/* ===========================================================================
   NABILTON GROUP PTY LTD — single stylesheet
   Custom concrete pool builders, Sydney. Static site, no build step.
   Section order matches index.html top to bottom.
   =========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root{
  --navy-900:#061a2f;
  --navy-800:#0a2240;
  --navy-700:#103154;
  --aqua-600:#0c86bd;
  --aqua-500:#1aa7dd;
  --aqua-400:#39c2ef;
  --aqua-300:#7fdcf7;
  --aqua-100:#dff3fb;
  --sand:#f6f4ef;
  --ink:#0d1b2a;
  --body:#4a5a6b;

  --grad:linear-gradient(100deg,#0a2240,#0c86bd);
  --grad-aqua:linear-gradient(100deg,#1aa7dd,#7fdcf7);

  --shadow-sm:0 1px 2px rgba(6,26,47,.06),0 4px 12px rgba(6,26,47,.06);
  --shadow-md:0 2px 6px rgba(6,26,47,.06),0 14px 34px rgba(6,26,47,.10);
  --shadow-lg:0 4px 10px rgba(6,26,47,.08),0 26px 60px rgba(6,26,47,.16);

  --r-sm:16px; --r-md:22px; --r-lg:28px; --r-xl:34px;

  --hdr-h:84px;
  --ease:cubic-bezier(.22,.8,.3,1);
  --container:1220px;
}

/* --- 2. Reset ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px)}
body{
  margin:0;
  /* clip (not hidden) — `overflow-x:hidden` on body would kill position:sticky */
  overflow-x:clip;
  background:#fff;
  color:var(--body);
  font:400 16px/1.65 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0 0 .5em;color:var(--ink);font-family:Outfit,system-ui,sans-serif;font-weight:700;line-height:1.12;letter-spacing:-.015em}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--aqua-600);text-decoration:none}
a:hover{color:var(--aqua-500)}
img{max-width:100%;height:auto;display:block}
/* Browser default figure margin breaks the gallery + lightbox grids. */
figure{margin:0}
button{font:inherit;color:inherit}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--aqua-400);outline-offset:3px;border-radius:6px}

.skip-link{position:absolute;left:12px;top:-64px;z-index:200;background:#fff;color:var(--navy-800);
  padding:12px 18px;border-radius:10px;font-weight:600;box-shadow:var(--shadow-md);transition:top .2s}
.skip-link:focus{top:12px}

.container{width:min(var(--container),100% - 48px);margin-inline:auto}
.i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.grad{background:var(--grad-aqua);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{margin:0 0 .55em;color:var(--aqua-600);font-family:Outfit,sans-serif;font-weight:700;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase}
.eyebrow--light{color:var(--aqua-300)}
.lede{font-size:1.0625rem;line-height:1.75}
.lede--light{color:rgba(223,243,251,.82)}

.sec-head{max-width:720px;margin:0 auto 52px;text-align:center}
.sec-head--left{margin-inline:0;text-align:left}
.sec-head h2{font-size:clamp(1.8rem,3.4vw,2.75rem)}
.sec-head__sub{margin:0;font-size:1.0625rem}

/* --- 3. Buttons --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:52px;padding:.85em 1.75em;border:0;border-radius:999px;
  font-family:Outfit,sans-serif;font-weight:700;font-size:1rem;line-height:1.1;
  text-align:center;cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s,color .25s;
}
.btn .i{font-size:1.15em;stroke-width:1.9}
.btn--primary{background:var(--grad);color:#fff;box-shadow:0 10px 26px rgba(12,134,189,.34)}
.btn--primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 16px 34px rgba(12,134,189,.42)}
.btn--ghost{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.5);backdrop-filter:blur(6px)}
.btn--ghost:hover{background:rgba(255,255,255,.18);color:#fff;transform:translateY(-2px)}
.btn--light{background:#fff;color:var(--navy-800);box-shadow:var(--shadow-md)}
.btn--light:hover{color:var(--navy-800);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn--sm{min-height:44px;padding:.6em 1.3em;font-size:.9375rem}
.btn--block{width:100%}

/* --- 4. Scroll progress ------------------------------------------------- */
.progress{position:fixed;inset:0 0 auto;height:3px;z-index:120;background:transparent;pointer-events:none}
.progress span{display:block;height:100%;width:0;background:var(--grad-aqua);transition:width .08s linear}

/* --- 5. Top utility bar ------------------------------------------------- */
.topbar{background:var(--navy-900);color:rgba(223,243,251,.8);font-size:.8125rem}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:40px;flex-wrap:wrap;padding-block:6px}
.topbar p{margin:0}
.topbar__area,.topbar__link,.topbar__hours{display:inline-flex;align-items:center;gap:.5em;white-space:nowrap}
.topbar__right{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.topbar__link{color:rgba(223,243,251,.8)}
.topbar__link:hover{color:var(--aqua-300)}
.socials{display:flex;align-items:center;gap:8px}
.socials a{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.08);color:rgba(223,243,251,.85);font-size:15px;transition:background-color .25s,color .25s,transform .25s var(--ease)}
.socials a:hover{background:var(--aqua-500);color:#fff;transform:translateY(-2px)}
.socials--bar a{width:28px;height:28px;font-size:14px}

/* --- 6. Sticky header --------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(6,26,47,.07);transition:box-shadow .3s,background-color .3s}
.hdr.is-stuck{box-shadow:0 10px 30px rgba(6,26,47,.10);background:rgba(255,255,255,.98)}
.hdr__in{display:flex;align-items:center;gap:20px;width:min(1380px,100% - 32px);margin-inline:auto;
  min-height:var(--hdr-h);transition:min-height .3s var(--ease)}
.hdr.is-stuck .hdr__in{min-height:68px}
.brand{flex:0 0 auto;display:block}
.brand img{width:auto;height:42px;transition:height .3s var(--ease)}
.hdr.is-stuck .brand img{height:36px}

.nav{flex:1 1 auto;min-width:0;display:flex;justify-content:center}
.nav__list{display:flex;align-items:center;gap:22px}
.nav__link{position:relative;display:block;padding:6px 2px;color:var(--navy-800);
  font-family:Outfit,sans-serif;font-weight:600;font-size:.9375rem;white-space:nowrap;transition:color .25s}
.nav__link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--grad-aqua);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav__link:hover,.nav__link.is-active{color:var(--aqua-600)}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}

.hdr__cta{flex:0 0 auto;display:flex;align-items:center;gap:14px}
.phone{display:inline-flex;align-items:center;gap:10px;color:var(--navy-800)}
.phone__ico{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--aqua-100);color:var(--aqua-600);font-size:17px;transition:background-color .25s,color .25s}
.phone:hover .phone__ico{background:var(--aqua-500);color:#fff}
.phone__txt{display:flex;flex-direction:column;line-height:1.15}
.phone__txt small{color:var(--body);font-size:.6875rem}
.phone__txt strong{font-family:Outfit,sans-serif;font-size:.9375rem;color:var(--navy-800)}

.burger{display:none;width:46px;height:46px;padding:0;border:1px solid rgba(6,26,47,.12);
  border-radius:12px;background:#fff;cursor:pointer}
.burger span{display:block;width:20px;height:2px;margin:4px auto;border-radius:2px;background:var(--navy-800);
  transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* --- 7. Hero ------------------------------------------------------------ */
/* HERO STRUCTURE (18 Sep 2026)
   The copy sits on its own navy panel, so the photograph does not have to be
   darkened to keep text readable. Desktop: photo full-bleed behind a very light
   wash, panel on the left. Phone: no text over the photo at all — a navy block,
   then the photo as a full-width band, then the form. Contrast is measured
   against the panel, not the photo. */
/* --- 9. Hero: full-bleed photo, copy over it on the left ------------------ */
/* NO COPY PANEL. A translucent panel was tried and rejected: it reads as a box
   sitting on the photograph. The darkness behind the text is a wide gradient
   that dissolves into the image and is fully transparent well before the pool,
   so it reads as shading. Do not give .hero__copy a background, a border or a
   border-radius.
   A two-column hero with the photo in its own panel was also tried and
   reverted — the photo came out too small and the copy column read as dead
   space. Both live in git history. */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--navy-900);
  padding-block:clamp(22px,2.4vw,32px) clamp(40px,4.6vw,64px)}
/* inset:0, not a negative overscan: there is no parallax any more, so there is
   nothing to travel and any overscan would just be crop thrown away. */
.hero__bg{position:absolute;inset:0;z-index:-2}
/* 58% across: the crop places the pool right of centre, and this keeps it there
   when the box is wider than the image's own aspect. */
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:58% 50%}
/* THE FADE. Deep enough on the left to carry the contrast on its own (WCAG
   ignores the text-shadow below), held flat across the full width of the copy,
   then a long dissolve to nothing by ~74% — past the copy, before the pool.
   No stop introduces a visible edge: each step is small and the spacing is
   wide. The bottom wash seats the section into the one below it. */
.hero__scrim{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to right,
      rgba(6,26,47,.97) 0%,
      rgba(6,26,47,.96) 30%,
      rgba(6,26,47,.94) 46%,
      rgba(6,26,47,.84) 55%,
      rgba(6,26,47,.60) 63%,
      rgba(6,26,47,.30) 70%,
      rgba(6,26,47,0)   79%),
    linear-gradient(to top,rgba(6,26,47,.38) 0%,rgba(6,26,47,0) 32%)}

.hero__in{width:min(var(--container),100% - 48px);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr)}
.hero__copy{color:rgba(255,255,255,.9);max-width:min(560px,46%)}
/* Insurance for real-world legibility over a busy photograph, NOT for passing
   the contrast check — WCAG measurement ignores text-shadow entirely, and the
   scrim above is measured with the text hidden so it carries the ratio alone. */
.hero h1,.hero__sub,.hero .ticks li{text-shadow:0 1px 2px rgba(6,26,47,.55),0 2px 14px rgba(6,26,47,.42)}
/* ⚠️ .grad is `color:transparent` with a gradient background clipped to the text.
   A text-shadow on it paints OVER that gradient fill and visibly dulls the aqua
   to a muddy navy. Use a drop-shadow filter instead, which shadows the rendered
   glyphs rather than painting inside them. */
/* The hero headline's gradient runs aqua-400 -> aqua-300, NOT the site default
   aqua-500 -> aqua-300. The default's dark stop (#1aa7dd) measured 3.73:1 over
   the fade, well under the floor — white text hid it, because the h1's computed
   colour is white and the gradient span is `color:transparent`. Measure the
   clipped fill against its DARKEST stop, not the element's computed colour. */
.hero h1 .grad{background:linear-gradient(100deg,#39c2ef,#9fe6fa);
  -webkit-background-clip:text;background-clip:text;
  text-shadow:none;filter:drop-shadow(0 1px 3px rgba(6,26,47,.6))}
.hero h1{color:#fff;font-size:clamp(2rem,4.1vw,3.3rem);font-weight:800;margin-bottom:.35em}
.hero h1 .grad{display:block}
.hero__sub{font-size:clamp(.95rem,1.15vw,1.0625rem);line-height:1.65;color:rgba(223,243,251,.85);max-width:36em}
.hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 20px}

.pill{display:inline-flex;align-items:center;gap:.6em;margin:0 0 22px;padding:.5em 1.1em;
  border:1px solid rgba(127,220,247,.36);border-radius:999px;background:rgba(12,134,189,.18);
  backdrop-filter:blur(6px);color:var(--aqua-300);
  font-family:Outfit,sans-serif;font-weight:600;font-size:.8125rem;letter-spacing:.04em}
.pill__dot{width:8px;height:8px;border-radius:50%;background:var(--aqua-400);
  box-shadow:0 0 0 0 rgba(57,194,239,.7);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(57,194,239,0)}100%{box-shadow:0 0 0 0 rgba(57,194,239,0)}}

.ticks{display:flex;flex-direction:column;gap:8px}
.ticks li{display:flex;align-items:flex-start;gap:.7em;color:rgba(223,243,251,.88);font-size:.9375rem}
.ticks .i{margin-top:.25em;color:var(--aqua-400);stroke-width:2.4}

/* PHONE: stack it. Solid navy block, then the photo as a full-width band, then
   the form section. No scrim and no text over the image at all, so there is no
   contrast constraint to trade against.
   ⚠️ This block must stay AFTER the base .hero__in rule above, or `display:
   contents` is overridden by it (that cost a debugging round once). */
@media (max-width:760px){
  /* clip, not visible: the reveal animation starts elements off to the side,
     which widens the document on first paint. clip does not create a scroll
     container, so the sticky header still works. */
  .hero{display:grid;padding-block:0;overflow:clip}
  .hero__in{display:contents}
  .hero__scrim{display:none}
  .hero h1,.hero__sub,.hero .ticks li{text-shadow:none}
  .hero__copy{order:1;width:min(var(--container),100% - 48px);margin-inline:auto;
    padding-block:clamp(22px,6vw,34px) clamp(22px,6vw,30px);max-width:none}
  .hero__bg{order:2;position:relative;inset:auto;width:100%;aspect-ratio:16/11}
}

/* --- 9b. Quote section ---------------------------------------------------- */
.qs{position:relative;background:var(--navy-900);
  background-image:radial-gradient(1100px 420px at 78% -10%,rgba(12,134,189,.30),transparent 60%);
  padding-block:clamp(44px,5.4vw,76px)}
.qs__in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,560px);gap:clamp(28px,4vw,56px);align-items:start}
.qs__lead{color:rgba(223,243,251,.85);padding-top:clamp(0px,1vw,12px)}
.qs__lead h2{color:#fff;font-size:clamp(1.7rem,3vw,2.4rem)}
.qs__sub{margin:0;font-size:1.0625rem;line-height:1.7}
/* The number, sized to be tapped rather than read. 56px tall clears the 44px
   touch target with room to spare, and it is a real tel: link on every width. */
.qs__tel{display:inline-flex;align-items:center;gap:14px;margin-top:clamp(22px,2.4vw,30px);
  padding:12px 22px 12px 14px;border-radius:999px;color:#fff;text-decoration:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(127,220,247,.30);
  transition:background .2s ease,border-color .2s ease}
.qs__tel:hover,.qs__tel:focus-visible{background:rgba(127,220,247,.13);border-color:rgba(127,220,247,.55)}
.qs__tel .i{width:38px;height:38px;flex:none;padding:9px;border-radius:50%;
  background:rgba(127,220,247,.16);color:var(--aqua-400);stroke-width:2.2}
.qs__tel-txt{display:flex;flex-direction:column;font-family:Outfit,system-ui,sans-serif;
  font-weight:700;font-size:1.375rem;letter-spacing:-.01em;line-height:1.15}
.qs__tel small{font-family:Inter,system-ui,sans-serif;font-weight:500;font-size:.8125rem;
  letter-spacing:0;color:rgba(223,243,251,.82)}
.qs__points{display:flex;flex-direction:column;gap:14px;margin-top:clamp(22px,2.4vw,30px)}
.qs__points li{display:flex;align-items:flex-start;gap:.75em;font-size:.9375rem;line-height:1.6;
  color:rgba(223,243,251,.85)}
.qs__points .i{width:1.15em;height:1.15em;margin-top:.12em;flex:none;color:var(--aqua-400);stroke-width:2.2}
.qs__points strong{color:#fff;font-weight:600}
@media (max-width:900px){
  .qs__in{grid-template-columns:minmax(0,1fr);gap:24px}
  .qs__lead{max-width:640px}
  /* Full-width on phones so the number is the easiest thing on screen to hit. */
  .qs__tel{display:flex;justify-content:center;margin-top:22px}
  .qs__points{margin-top:20px}
}

/* Dark frost, not white frost. This is the conversion element and it sits over
   a photograph, so it is deliberately the most opaque surface on the page: a
   white 10% card left its own labels at 3.34:1 and its sub-heading at 1.88:1.
   The navy wash takes the card to 12:1 on labels and 7.6:1 on the sub-heading,
   with headroom for a brighter photo later. Measured with the text hidden. */
.quote{background:linear-gradient(rgba(6,26,47,.80),rgba(6,26,47,.80)),rgba(255,255,255,.04);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.24);border-radius:var(--r-xl);
  padding:clamp(22px,2.4vw,32px);box-shadow:0 30px 70px rgba(6,26,47,.42);color:#fff}
.quote__title{color:#fff;font-size:1.5rem;margin-bottom:.2em}
.quote__sub{margin:0 0 20px;font-size:.875rem;color:rgba(223,243,251,.82)}
.qf{display:flex;flex-direction:column;gap:14px}
.qf__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.qf__f{display:flex;flex-direction:column;gap:6px;min-width:0}
.qf__f>span{font-family:Outfit,sans-serif;font-weight:600;font-size:.8125rem;color:rgba(223,243,251,.9)}
.qf input,.qf select,.qf textarea{
  width:100%;min-height:48px;padding:.7em .9em;border-radius:14px;
  /* The fields are translucent too, so darkening the card alone left the
     placeholder text washed out wherever the photo behind was bright. */
  border:1px solid rgba(255,255,255,.28);background:rgba(6,26,47,.78);color:#fff;
  font-size:.9375rem;transition:border-color .2s,background-color .2s}
.qf textarea{min-height:92px;resize:vertical}
.qf select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,rgba(223,243,251,.8) 50%),linear-gradient(135deg,rgba(223,243,251,.8) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2.6em}
.qf select option{background:var(--navy-800);color:#fff}
/* .5 measured 1.3:1 in the message field over a bright patch of the photo. */
.qf ::placeholder{color:rgba(223,243,251,.78)}
.qf input:focus,.qf select:focus,.qf textarea:focus{border-color:var(--aqua-400);background:rgba(6,26,47,.88)}
.qf input[aria-invalid="true"],.qf textarea[aria-invalid="true"]{border-color:#ff8f8f}
.qf__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.qf__status{margin:2px 0 0;min-height:1.2em;font-size:.875rem;color:rgba(223,243,251,.9)}
.qf__status.is-ok{color:var(--aqua-300);font-weight:600}
.qf__status.is-err{color:#ffb4b4}
.qf__status a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.qf button[disabled]{opacity:.65;cursor:progress}

/* Wave divider — filled with the navy of the marquee band below it */
.wave{position:absolute;left:0;right:0;bottom:-1px;z-index:1;line-height:0;pointer-events:none}
.wave svg{display:block;width:100%;height:clamp(52px,7vw,104px)}
.wave path{fill:var(--navy-900)}

/* --- 8. Marquee --------------------------------------------------------- */
.marquee{overflow:hidden;background:var(--navy-900);border-block:1px solid rgba(127,220,247,.14);padding-block:18px}
.marquee__track{display:flex;width:max-content;animation:slide 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__grp{display:flex;align-items:center}
.marquee__grp li{display:flex;align-items:center;color:var(--aqua-300);
  font-family:Outfit,sans-serif;font-weight:600;font-size:clamp(.9rem,1.5vw,1.0625rem);
  letter-spacing:.03em;white-space:nowrap;padding-inline:26px}
.marquee__grp li::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--aqua-500);margin-left:26px;opacity:.7}
@keyframes slide{to{transform:translateX(-50%)}}

/* --- 9. Stats ----------------------------------------------------------- */
.stats{background:var(--sand);padding-block:clamp(40px,5vw,64px)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
.stat{background:#fff;border-radius:var(--r-md);padding:clamp(20px,2.2vw,30px) 20px;text-align:center;
  box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.stat:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.stat strong{display:block;font-family:Outfit,sans-serif;font-weight:800;font-size:clamp(1.9rem,3.4vw,2.75rem);
  line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{display:block;margin-top:10px;font-size:.875rem;color:var(--body)}

/* --- 10. About ---------------------------------------------------------- */
.about{padding-block:clamp(64px,8vw,110px)}
.about__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(32px,5vw,72px);align-items:center}
.about__media{position:relative;border-radius:var(--r-xl);overflow:visible}
.about__media img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:var(--r-xl);box-shadow:var(--shadow-lg)}
.about__badge{position:absolute;right:-14px;bottom:-22px;max-width:190px;
  background:#fff;border-radius:var(--r-md);padding:18px 22px;box-shadow:var(--shadow-lg);text-align:center}
.about__badge strong{display:block;font-family:Outfit,sans-serif;font-weight:800;font-size:2.2rem;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.about__badge span{display:block;margin-top:4px;font-size:.8125rem;line-height:1.4}
.about__copy h2{font-size:clamp(1.75rem,3.2vw,2.6rem)}

.feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:34px}
.feat li{display:flex;gap:14px;align-items:flex-start}
.feat__ico{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:14px;
  background:var(--grad);color:#fff;font-size:22px;box-shadow:0 8px 20px rgba(12,134,189,.28)}
.feat strong{display:block;color:var(--ink);font-family:Outfit,sans-serif;font-size:1rem;margin-bottom:2px}
.feat p{margin:0;font-size:.875rem;line-height:1.55}

/* --- 11. Solutions ------------------------------------------------------ */
.sol{background:var(--sand);padding-block:clamp(64px,8vw,110px)}
/* Cards size to their content: align-items:stretch evens out each row and grid-auto-rows:1fr
   evens out the rows, so every card matches whatever the copy length. The description is always
   visible, with no hover reveal, because touch devices have no hover. If a reveal is ever wanted,
   animate grid-template-rows 0fr to 1fr on a wrapper, never max-height (it needs a magic number). */
.sol__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;align-items:stretch;
  gap:clamp(18px,2vw,28px)}
.sol__card{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;
  border-radius:var(--r-lg);padding:clamp(26px,2.6vw,34px) clamp(22px,2.4vw,30px);
  background:var(--navy-800);box-shadow:var(--shadow-md);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
/* Aqua glow in the corner, brighter on hover. These cards carry no photo (see the
   note in index.html), so the glow does the job the image used to. */
.sol__card::before{content:"";position:absolute;z-index:-1;top:-42%;right:-32%;width:82%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(26,167,221,.4),rgba(26,167,221,0) 68%);opacity:.7;
  transition:transform .6s var(--ease),opacity .4s}
.sol__card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.sol__card:hover::before{transform:scale(1.25);opacity:1}
.sol__ico{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;margin-bottom:22px;
  background:var(--grad-aqua);color:var(--navy-900);font-size:26px;box-shadow:0 10px 24px rgba(26,167,221,.28)}
.sol__num{font-family:Outfit,sans-serif;font-weight:800;font-size:.8125rem;letter-spacing:.14em;
  color:var(--aqua-300);margin-bottom:6px}
.sol__card h3{color:#fff;font-size:1.3125rem;margin:0 0 10px}
.sol__desc{margin:0;color:rgba(223,243,251,.8);font-size:.9375rem;line-height:1.6}
.sol__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:18px}
.sol__tags li{padding:.35em .9em;border-radius:999px;border:1px solid rgba(127,220,247,.3);
  background:rgba(127,220,247,.08);color:var(--aqua-300);font-size:.75rem;font-weight:600;letter-spacing:.02em}

/* --- 12. Banner cards --------------------------------------------------- */
.banners{padding-block:clamp(56px,7vw,96px)}
.banners__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,30px)}
.banner{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(28px,3vw,40px);
  background:var(--sand);border:1px solid rgba(6,26,47,.06);box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.banner:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.banner__ico{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;margin-bottom:20px;
  background:var(--grad);color:#fff;font-size:26px;box-shadow:0 10px 26px rgba(12,134,189,.3)}
.banner h3{font-size:clamp(1.4rem,2.4vw,1.875rem);margin-bottom:.35em}
.banner p{margin:0 0 20px;max-width:46ch}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips li{padding:.45em 1em;border-radius:999px;background:#fff;border:1px solid rgba(6,26,47,.08);
  font-size:.8125rem;font-weight:500;color:var(--navy-700)}

/* --- 13. Process -------------------------------------------------------- */
.proc{background:var(--sand);padding-block:clamp(64px,8vw,110px)}
.proc__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,30px)}
.proc__card{background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.proc__card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.proc__media{position:relative}
.proc__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.proc__num{position:absolute;left:24px;bottom:-24px;display:grid;place-items:center;width:56px;height:56px;
  border-radius:50%;background:var(--grad);color:#fff;font-family:Outfit,sans-serif;font-weight:800;font-size:1.375rem;
  box-shadow:0 12px 26px rgba(12,134,189,.36);border:3px solid #fff}
.proc__body{padding:44px 26px 30px}
.proc__body h3{font-size:1.1875rem}
.proc__body p{margin:0;font-size:.9375rem}
.proc__media img.img-mid{object-position:50% 58%}

/* Six-milestone strip under the three stage cards */
.steps{margin-top:clamp(40px,4.4vw,56px);background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  padding:clamp(22px,2.6vw,32px) clamp(20px,2.8vw,40px)}
.steps__intro{margin:0 auto 24px;max-width:60ch;text-align:center;font-size:.9375rem}
.steps__list{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
/* the connecting line runs through the middle of the number badges */
.steps__list::before{content:"";position:absolute;left:calc(100% / 12);right:calc(100% / 12);top:21px;height:2px;
  background:linear-gradient(90deg,var(--aqua-500),var(--aqua-300));opacity:.45}
.steps__list li{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;
  text-align:center;font-family:Outfit,sans-serif;font-weight:600;font-size:.9375rem;color:var(--ink)}
.steps__num{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:#fff;border:2px solid var(--aqua-500);color:var(--aqua-600);font-weight:800;font-size:.875rem;
  transition:background-color .3s,color .3s,transform .3s var(--ease)}
.steps__list li:hover .steps__num{background:var(--aqua-500);color:#fff;transform:translateY(-3px)}

/* --- 14. Built to Last (dark split) ------------------------------------- */
.built{position:relative;overflow:hidden;isolation:isolate;background:var(--navy-900);
  padding-block:clamp(64px,8vw,110px)}
.glow{position:absolute;z-index:-1;border-radius:50%;filter:blur(90px);pointer-events:none}
.glow--a{width:min(520px,70vw);aspect-ratio:1;background:rgba(12,134,189,.42);top:-14%;left:-8%}
.glow--b{width:min(420px,60vw);aspect-ratio:1;background:rgba(57,194,239,.24);bottom:-18%;right:-6%}
.built__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center}
.built h2{color:#fff;font-size:clamp(1.75rem,3.2vw,2.6rem)}
.built__copy .btn{margin-top:10px}
.built__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}
.built__grid li{background:rgba(255,255,255,.06);border:1px solid rgba(127,220,247,.16);
  border-radius:var(--r-md);padding:24px 22px;backdrop-filter:blur(6px);
  transition:transform .35s var(--ease),background-color .35s,border-color .35s}
.built__grid li:hover{transform:translateY(-4px);background:rgba(255,255,255,.1);border-color:rgba(127,220,247,.34)}
.built__ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;margin-bottom:14px;
  background:var(--grad-aqua);color:var(--navy-900);font-size:21px}
.built__grid strong{display:block;color:#fff;font-family:Outfit,sans-serif;font-size:1rem;margin-bottom:4px}
.built__grid p{margin:0;color:rgba(223,243,251,.72);font-size:.875rem;line-height:1.55}

/* --- 15. Gallery -------------------------------------------------------- */
.gal{padding-block:clamp(64px,8vw,110px)}
.gal__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:clamp(140px,14vw,200px);grid-auto-flow:dense;gap:clamp(12px,1.4vw,18px)}
.gal__tile{min-width:0}
.gal__tile--xl{grid-column:span 2;grid-row:span 2}
.gal__tile--wide{grid-column:span 2}
.gal__btn{position:relative;display:block;width:100%;height:100%;padding:0;border:0;
  border-radius:var(--r-md);overflow:hidden;background:var(--navy-800);cursor:pointer;
  box-shadow:var(--shadow-sm);transition:box-shadow .35s var(--ease)}
.gal__btn:hover{box-shadow:var(--shadow-lg)}
.gal__btn img{width:100%;height:100%;object-fit:cover;object-position:50% 44%;
  /* biased up: the subject in a landscape pool shot sits above the horizon,
     and a dead-centre crop trades it for foreground paving. */
  transition:transform .7s var(--ease)}
.gal__btn::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,26,47,.85),rgba(6,26,47,0) 55%);
  opacity:0;transition:opacity .35s}
.gal__btn:hover img,.gal__btn:focus-visible img{transform:scale(1.08)}
.gal__btn:hover::after,.gal__btn:focus-visible::after{opacity:1}
.gal__cap{position:absolute;left:18px;right:18px;bottom:16px;z-index:1;text-align:left;
  color:#fff;font-family:Outfit,sans-serif;font-weight:600;font-size:.9375rem;
  opacity:0;transform:translateY(12px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.gal__btn:hover .gal__cap,.gal__btn:focus-visible .gal__cap{opacity:1;transform:none}

/* --- 15b. Ideas for Your Build (AI concept imagery) ---------------------- */
/* Deliberately NOT built like the work gallery above it. That one is a white
   section with a dense mosaic of mixed tile sizes and captions that appear on
   hover. This one is a dark section with a uniform 3-up grid of equal cards,
   each with a permanent caption bar under the image and a "Concept" tag pinned
   to the corner. A skim-reader should register two different kinds of thing
   before reading a word. Do not "tidy" this to match the gallery. */
.insp{background:var(--navy-900);
  background-image:radial-gradient(900px 400px at 14% -10%,rgba(12,134,189,.26),transparent 62%);
  padding-block:clamp(64px,8vw,110px)}
.insp__head{max-width:760px}
.insp__head h2{color:#fff}
/* The disclosure. Visible copy at body size, not a footnote: it is the reason
   this section is allowed to exist. verify.cjs [4b] fails if it goes missing. */
.insp__note{margin:0;color:rgba(223,243,251,.85);font-size:1.0625rem;line-height:1.7}
.insp__note strong{color:#fff;font-weight:600}
.insp__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.insp__tile{min-width:0}
.insp__btn{position:relative;display:flex;flex-direction:column;width:100%;height:100%;padding:0;
  border:1px solid rgba(127,220,247,.16);border-radius:var(--r-md);overflow:hidden;
  background:rgba(255,255,255,.04);cursor:pointer;text-align:left;
  transition:border-color .35s var(--ease),transform .35s var(--ease)}
.insp__btn:hover,.insp__btn:focus-visible{border-color:rgba(127,220,247,.44);transform:translateY(-4px)}
.insp__btn img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;display:block}
/* Always visible — no hover, no focus, no media query hides it. */
.insp__tag{position:absolute;top:12px;left:12px;z-index:2;
  padding:.36em .85em;border-radius:999px;
  background:rgba(6,26,47,.86);border:1px solid rgba(127,220,247,.5);backdrop-filter:blur(6px);
  color:var(--aqua-300);font-family:Outfit,sans-serif;font-weight:700;
  font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase}
/* Caption bar, permanent: the gallery's captions appear on hover, these do not. */
.insp__cap{display:block;padding:14px 18px 16px;color:rgba(223,243,251,.9);
  font-family:Outfit,sans-serif;font-weight:600;font-size:.9375rem}
.insp__foot{margin:clamp(26px,3vw,38px) 0 0;color:rgba(223,243,251,.85);font-size:1rem}
.insp__foot a{color:var(--aqua-300);text-decoration:underline;text-underline-offset:3px}
.insp__foot a:hover{color:#fff}
@media (max-width:1100px){ .insp__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .insp__grid{grid-template-columns:minmax(0,1fr)} }

/* --- 16. Projects in progress (video) --------------------------------- */
.vid{background:var(--sand);padding-block:clamp(64px,8vw,110px)}
.vid__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,28px);
  max-width:1040px;margin-inline:auto}
.vid__card{background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.vid__card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
/* Phone footage, all portrait. The frame reserves 9:16 so nothing shifts when the
   lazy poster arrives. */
.vid__frame{aspect-ratio:9/16;background:var(--navy-800)}
.vid__frame video{display:block;width:100%;height:100%;object-fit:cover;background:var(--navy-800)}
.vid__body{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:18px 22px 20px}
.vid__body h3{margin:0;font-size:1.0625rem}
.vid__len{flex:none;font-size:.8125rem;font-variant-numeric:tabular-nums;color:var(--body)}

/* --- 17. What you can expect -------------------------------------------- */
.exp{padding-block:clamp(64px,8vw,110px)}
.exp__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,28px)}
.exp__card{position:relative;background:#fff;border:1px solid rgba(6,26,47,.07);border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,34px);box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.exp__card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.exp__ico{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;margin-bottom:18px;
  background:var(--aqua-100);color:var(--aqua-600);font-size:24px}
.exp__card h3{font-size:1.125rem}
.exp__card p{margin:0;font-size:.9375rem}
.exp__note{margin:34px 0 0;text-align:center;font-size:.9375rem}
.stars{display:flex;gap:3px;color:#f5a524;font-size:18px;margin-bottom:14px}
.exp__who{margin-top:16px;font-size:.875rem}
.exp__who strong{display:block;color:var(--ink);font-family:Outfit,sans-serif}
/* Reviews — no review is published; the commented template in index.html uses these */
.tst{padding-block:clamp(64px,8vw,110px) 0}
.tst__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.2vw,28px)}
.tst__grid li{min-width:0}
.exp__card--review{height:100%;margin:0}
.exp__card--review blockquote{margin:0}
.exp__card--review blockquote p{margin:0;color:var(--ink);font-size:1rem;line-height:1.7}

/* --- 18. FAQs ----------------------------------------------------------- */
.faq{background:var(--sand);padding-block:clamp(64px,8vw,110px)}
.faq__in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,64px);align-items:start}
.faq .sec-head{margin-bottom:0;position:sticky;top:calc(var(--hdr-h) + 24px)}
.acc{display:flex;flex-direction:column;gap:12px}
.acc__item{background:#fff;border:1px solid rgba(6,26,47,.07);border-radius:var(--r-sm);overflow:hidden;
  transition:box-shadow .3s,border-color .3s}
.acc__item.is-open{box-shadow:var(--shadow-md);border-color:rgba(12,134,189,.24)}
.acc__item h3{margin:0;font-size:1rem}
.acc__btn{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
  padding:20px 22px;border:0;background:transparent;text-align:left;cursor:pointer;
  font-family:Outfit,sans-serif;font-weight:600;font-size:1.0625rem;color:var(--ink);transition:color .25s}
.acc__btn:hover{color:var(--aqua-600)}
.acc__ico{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:var(--aqua-100);
  transition:background-color .3s,transform .35s var(--ease)}
.acc__ico::before,.acc__ico::after{content:"";position:absolute;top:50%;left:50%;
  width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--aqua-600);transition:transform .35s var(--ease),background-color .3s}
.acc__ico::after{transform:rotate(90deg)}
.acc__btn[aria-expanded="true"] .acc__ico{background:var(--grad);transform:rotate(180deg)}
.acc__btn[aria-expanded="true"] .acc__ico::before,
.acc__btn[aria-expanded="true"] .acc__ico::after{background:#fff}
.acc__btn[aria-expanded="true"] .acc__ico::after{transform:rotate(0)}
.acc__panel{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.acc__inner{padding:0 22px 22px}
.acc__inner p{margin:0;font-size:.9375rem}

/* --- 19. CTA band ------------------------------------------------------- */
.cta{position:relative;isolation:isolate;overflow:hidden;background:var(--navy-900);
  padding-block:clamp(64px,8vw,104px);text-align:center}
.cta__bg{position:absolute;inset:0;z-index:-2}
.cta__bg img{width:100%;height:100%;object-fit:cover}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(6,26,47,.9),rgba(10,34,64,.78) 55%,rgba(12,134,189,.5))}
.cta h2{color:#fff;font-size:clamp(1.9rem,3.8vw,3rem)}
.cta p{max-width:56ch;margin:0 auto 30px;color:rgba(223,243,251,.88);font-size:1.0625rem}
.cta__btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* --- 20. Footer --------------------------------------------------------- */
.ft{position:relative;overflow:hidden;isolation:isolate;background:var(--navy-900);
  color:rgba(223,243,251,.72);padding-block:clamp(52px,6vw,80px) 0}
.ft__glow{position:absolute;z-index:-1;top:-30%;left:50%;transform:translateX(-50%);
  width:min(900px,120vw);aspect-ratio:2/1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(12,134,189,.32),rgba(12,134,189,0) 68%)}
.ft__grid{display:grid;grid-template-columns:1.5fr 1fr 1.35fr 1fr;gap:clamp(28px,3.4vw,48px)}
.ft__col{min-width:0}
.ft__logo{height:44px;width:auto;margin-bottom:18px}
.ft__col--brand p{font-size:.9375rem;max-width:40ch;margin-bottom:20px}
.ft__h{color:#fff;font-family:Outfit,sans-serif;font-size:1.0625rem;margin-bottom:18px}
.ft__links,.ft__contact{display:flex;flex-direction:column;gap:11px}
.ft__links a{color:rgba(223,243,251,.72);font-size:.9375rem;transition:color .25s,padding-left .25s var(--ease)}
.ft__links a:hover{color:var(--aqua-300);padding-left:5px}
.ft__contact li{display:flex;align-items:flex-start;gap:11px;font-size:.9375rem;line-height:1.5}
.ft__contact .i{margin-top:.3em;color:var(--aqua-400);font-size:1.05em}
.ft__contact a{color:rgba(223,243,251,.86)}
.ft__contact a:hover{color:var(--aqua-300)}
.ft__thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ft__thumbs img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;
  transition:transform .35s var(--ease),opacity .35s}
.ft__thumbs img:hover{transform:scale(1.06);opacity:.85}
.ft__bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
  margin-top:clamp(36px,4vw,56px);padding-block:22px;border-top:1px solid rgba(127,220,247,.14);
  font-size:.8125rem}
.ft__bot p{margin:0}

/* --- 21. Floating actions ----------------------------------------------- */
.fab{position:fixed;right:18px;z-index:90;display:grid;place-items:center;
  width:54px;height:54px;border:0;border-radius:50%;cursor:pointer;font-size:22px;
  transition:transform .3s var(--ease),opacity .3s,visibility .3s,box-shadow .3s}
.fab--call{bottom:18px;background:var(--grad);color:#fff;box-shadow:0 12px 30px rgba(12,134,189,.45);
  animation:bob 2.8s ease-in-out infinite}
.fab--call:hover{color:#fff;transform:scale(1.08);animation-play-state:paused}
.fab--top{bottom:84px;background:#fff;color:var(--navy-800);box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(10px)}
.fab--top.is-on{opacity:1;visibility:visible;transform:none}
.fab--top:hover{transform:translateY(-3px)}
/* Both floating buttons step aside while the quote form's error message is on screen (main.js
   toggles it). On phones either one can sit over the end of that line: the call button low down,
   back-to-top a little higher. The message carries its own tappable number. Declared after
   .fab--top.is-on so it wins; visibility:hidden also takes them out of the tab order. */
.fab.is-hidden{opacity:0;visibility:hidden;pointer-events:none;animation:none;transform:translateY(12px)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* --- 22. Lightbox ------------------------------------------------------- */
.lb{position:fixed;inset:0;z-index:200;display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:clamp(8px,2vw,24px);padding:clamp(56px,7vw,80px) clamp(12px,3vw,40px)}
.lb[hidden]{display:none}
.lb__backdrop{position:absolute;inset:0;background:rgba(6,26,47,.93);backdrop-filter:blur(8px);
  animation:fade .3s var(--ease)}
.lb__fig{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.lb__fig img{max-width:100%;max-height:76vh;width:auto;border-radius:var(--r-md);
  box-shadow:0 30px 80px rgba(0,0,0,.6);animation:pop .32s var(--ease)}
.lb__fig figcaption{color:rgba(223,243,251,.9);font-family:Outfit,sans-serif;font-weight:600;font-size:.9375rem;text-align:center}
/* The concept label, shown with the "Ideas for Your Build" images only. It is a
   pill rather than another line of caption so it cannot be mistaken for the
   image's title, and it is styled to be read, not skimmed past. */
.lb__note{margin:0;padding:.45em 1.1em;border-radius:999px;
  background:rgba(12,134,189,.22);border:1px solid rgba(127,220,247,.5);
  color:var(--aqua-300);font-family:Outfit,sans-serif;font-weight:700;
  font-size:.8125rem;letter-spacing:.04em;text-align:center}
.lb__nav,.lb__x{position:relative;z-index:1;display:grid;place-items:center;border:0;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;border-radius:50%;transition:background-color .25s,transform .25s var(--ease)}
.lb__nav{width:clamp(44px,6vw,56px);height:clamp(44px,6vw,56px);font-size:22px}
.lb__nav:hover{background:rgba(255,255,255,.24);transform:scale(1.06)}
.lb__x{position:absolute;top:16px;right:16px;width:46px;height:46px;font-size:20px}
.lb__x:hover{background:rgba(255,255,255,.24)}
.lb__count{position:absolute;left:0;right:0;bottom:20px;margin:0;text-align:center;
  color:rgba(223,243,251,.7);font-size:.8125rem}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.96)}}
body.lb-open{overflow:hidden}

/* --- 23. Scroll reveal --------------------------------------------------
   Hiding is gated on .js-reveal, which main.js sets on <html> before paint.
   If the script never runs, nothing is ever hidden — a JS failure cannot
   leave a blank page.                                                      */
/* The left/right variants start translated on the X axis, which pushes the page
   ~24px wider until they land — a real horizontal overflow on first paint, and
   one that hides itself the moment you scroll and the elements reveal. Clip at
   the section so the motion can never reach the document. `clip`, not `hidden`:
   it clips without creating a scroll container, so the sticky FAQ heading and
   the sticky header both keep working. */
.stats,.about,.sol,.banners,.proc,.gal,.vid,.tst,.exp,.faq{overflow-x:clip}

.js-reveal [data-reveal]{opacity:0;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js-reveal [data-reveal="up"]{transform:translateY(34px)}
.js-reveal [data-reveal="left"]{transform:translateX(38px)}
.js-reveal [data-reveal="right"]{transform:translateX(-38px)}
.js-reveal [data-reveal="zoom"]{transform:scale(.94)}
.js-reveal [data-reveal].is-revealed{opacity:1;transform:none}

/* --- 24. Responsive ------------------------------------------------------ */
@media (max-width:1200px){
  .hdr__in{position:relative;gap:14px}
  .burger{display:block}
  .nav{position:absolute;left:0;right:0;top:100%;justify-content:stretch;
    background:#fff;border-top:1px solid rgba(6,26,47,.07);box-shadow:0 20px 40px rgba(6,26,47,.14);
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .38s var(--ease),visibility .38s}
  .nav.is-open{max-height:70vh;overflow-y:auto;visibility:visible}
  .nav__list{flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 18px}
  .nav__link{padding:14px 0;border-bottom:1px solid rgba(6,26,47,.06);font-size:1rem}
  .nav__link::after{display:none}
  .nav__list li:last-child .nav__link{border-bottom:0}
}
@media (max-width:1320px) and (min-width:1201px){
  .phone__txt small{display:none}
  .nav__list{gap:16px}
}
@media (max-width:1024px){
  .hero__in{grid-template-columns:minmax(0,1fr);gap:36px}
  .quote{max-width:560px}
  .proc__grid,.exp__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .about__in,.built__in,.faq__in{grid-template-columns:minmax(0,1fr);gap:40px}
  .about__media{order:-1}
  .faq .sec-head{position:static}
  .sec-head--left{text-align:center;margin-inline:auto}
  .about__badge{right:12px;bottom:-18px}
}
@media (max-width:820px){
  .banners__grid{grid-template-columns:minmax(0,1fr)}
  .topbar__hours{display:none}
  .topbar__in{justify-content:center;text-align:center}
}
@media (max-width:760px){
  /* three solution cards: one row of three above 760px, one centred column below */
  .sol__grid{grid-template-columns:minmax(0,1fr);max-width:520px;margin-inline:auto}
  :root{--hdr-h:72px}
  .container{width:min(var(--container),100% - 36px)}
  .stats__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gal__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(130px,26vw,175px)}
  .phone__txt{display:none}
  .hdr__quote{display:none}
  .proc__grid,.exp__grid{grid-template-columns:minmax(0,1fr)}
  .steps__list{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:22px}
  .steps__list::before{display:none}
  .tst__grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .vid__grid{grid-template-columns:minmax(0,1fr);max-width:380px}
  .ft__grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .feat{grid-template-columns:minmax(0,1fr);gap:18px}
  .built__grid{grid-template-columns:minmax(0,1fr)}
  .ft__thumbs{max-width:280px}
  .lb{grid-template-columns:1fr;padding-inline:12px}
  .lb__nav{position:absolute;bottom:52px;z-index:2}
  .lb__nav--prev{left:16px}
  .lb__nav--next{right:16px}
  .lb__count{bottom:16px}
}
@media (max-width:480px){
  .container{width:min(var(--container),100% - 28px)}
  .hero__btns .btn{width:100%}
  .qf__row{grid-template-columns:minmax(0,1fr)}
  .cta__btns .btn{width:100%}
  .topbar{font-size:.75rem}
  .topbar__right{gap:14px}
  .steps__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fab{width:50px;height:50px;right:14px}
  .fab--call{bottom:14px}
  .fab--top{bottom:74px}
}

/* --- 25. Reduced motion --------------------------------------------------
   Everything decorative stops. Content must still be fully visible, so the
   reveal elements are forced back to their resting state.                  */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .js-reveal [data-reveal]{opacity:1 !important;transform:none !important}
  .marquee__track{animation:none;transform:none}
  .fab--call{animation:none}
  .pill__dot{animation:none}
}

/* --- 26. Print ----------------------------------------------------------- */
@media print{
  .topbar,.hdr,.fab,.progress,.marquee,.lb{display:none !important}
  body{color:#000}
  .hero,.built,.cta,.ft{background:#fff !important;color:#000}
}

/* --- 19. Legal pages (privacy.html) ------------------------------------- */
/* A plain reading column. No reveal animations here: the page is text, and it
   has to be readable if JavaScript never runs. */
.legal{padding:calc(var(--hdr-h) + 48px) 0 88px;background:var(--sand)}
.legal__in{max-width:760px}
.legal h1{font-size:clamp(1.9rem,3.6vw,2.6rem)}
.legal h2{margin:1.9em 0 .5em;font-size:1.1875rem}
.legal p,.legal li{color:var(--body);line-height:1.75}
.legal__meta{margin:-.2em 0 1.6em;font-size:.875rem;color:var(--body);opacity:.8}
.legal__lede{font-size:1.0625rem;color:var(--ink)}
.legal ul{margin:0 0 1em;padding-left:1.15em;list-style:disc}  /* the global reset strips markers */
.legal li{margin-bottom:.4em}
.legal ul.legal__contact{list-style:none;padding-left:0}  /* beats .legal ul above */
.legal a{color:var(--aqua-600);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--navy-800)}
.legal__back{margin-top:2.6em;font-family:Outfit,sans-serif;font-weight:600}
.legal__back a{text-decoration:none}
@media (max-width:760px){
  .legal{padding-top:calc(var(--hdr-h) + 28px)}
}