/* Homepage only. Tokens, fonts, reset, buttons and the .highlight-word marker live in base.css; header and footer in
   header.css / footer.css.

   Page rhythm: 1) the branded intro screen (first visit only); 2) a pinned full-screen video hero with the animated
   logo, whose wave washes the screen clean on scroll; 3) the light introduction; 4) the pinned 3D panel story
   (copy left, panel centre, step indicator right); 5) a light band with the services, the process, the gallery, the
   questions; 6) the contact section on night navy, with the evaluation request (its dialog lives in evaluation.css). */

/* ---------- intro screen ----------
   Plain, opaque navy with the full logo at the exact centre of the screen; under it, hanging from the logo so they never
   push it off centre, a thin gold bar as wide as the "SunClean" wordmark and one quiet line. The bar follows real
   loading signals (see main.js). It is shown only when <html> carries .sc-boot, and hides itself after 8 s even if the
   script never runs.
   The exit is one continuous move: the bar and the line fade, the navy dissolves, and the logo itself glides and grows
   into the place of the hero logo, which takes over without a jump (same artwork, same box). */
.boot{display:none}
html.sc-boot .boot{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;background-color:var(--navy);
  transition:background-color .6s ease,opacity .4s ease,visibility 0s linear .4s;animation:bootFailsafe 0s linear 8s forwards}
html.sc-boot .boot.is-flying{background-color:rgba(3,34,80,0);pointer-events:none}
html.sc-boot .boot.is-done{opacity:0;visibility:hidden}
@keyframes bootFailsafe{to{opacity:0;visibility:hidden}}
.boot-in{position:relative;display:flex;flex-direction:column;align-items:center}
.boot-logo{display:block;width:clamp(180px,17vw,236px);height:auto}
.boot-meta{position:absolute;top:100%;left:50%;width:max-content;max-width:calc(100vw - 48px);display:flex;flex-direction:column;align-items:center;
  transform:translateX(-50%);transition:opacity .3s ease}
.boot.is-flying .boot-meta,.boot.is-done .boot-meta{opacity:0}
/* the wordmark spans 1.5%–98.2% of the logo's width, so the bar is laid exactly under it */
.boot-bar{position:relative;display:block;width:clamp(173px,16.4vw,228px);height:3px;margin-top:clamp(1.6rem,4.5vh,2.25rem);border-radius:3px;
  background:rgba(243,245,248,.14);overflow:hidden}
.boot-bar i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#F6B84A,var(--gold));transform:scaleX(0);transform-origin:left}
.boot-note{margin:1rem 0 0;color:var(--mist);font-size:.84rem;line-height:1.45;letter-spacing:.01em;text-align:center;text-wrap:balance}
.boot-logo{animation:bootIn .5s var(--ease) backwards}
.boot-meta{animation:bootMeta .5s var(--ease) .1s backwards}
@keyframes bootIn{from{opacity:0;transform:translateY(8px)}}
@keyframes bootMeta{from{opacity:0;transform:translate(-50%,8px)}}

/* ---------- video hero ---------- */
/* the hero stays pinned for --hero-pin while the introduction, topped by the logo's wave, slides up over it:
   the wave is always followed directly by content, so the hand-off never shows an empty screen. The wave (--edge-h)
   starts exactly at the bottom of the first screen, so it never covers the hero on load, whatever the window height. */
:root{--hero-pin:100vh;--edge-h:17vw}
.hero{position:relative;height:calc(100vh + var(--hero-pin));height:calc(100svh + var(--hero-pin))}
.hero-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;
  background:radial-gradient(110% 85% at 50% 45%,#0b2b60 0%,var(--navy) 45%,var(--night) 85%)}
.hero-media{position:absolute;inset:0;z-index:0;transform-origin:50% 58%;will-change:transform}
/* the identity filter keeps the video out of the hardware overlay path: the scroll zoom would resize that overlay every frame and stall the GPU */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:brightness(1);transition:transform 2.4s var(--ease)}
.hero-shade{position:absolute;inset:0;
  background:
    radial-gradient(62% 52% at 50% 48%,rgba(2,22,54,.66),rgba(2,22,54,0) 72%),
    linear-gradient(180deg,rgba(2,26,63,.78) 0%,rgba(2,26,63,.28) 30%,rgba(2,26,63,.3) 62%,rgba(2,26,63,.88) 100%)}
.hero-flare{position:absolute;width:80vmax;aspect-ratio:1;right:-34vmax;top:-44vmax;border-radius:50%;
  background:radial-gradient(circle,rgba(251,176,59,.26) 0%,rgba(251,176,59,.07) 36%,rgba(251,176,59,0) 66%)}

.crest{position:absolute;z-index:3;inset:0;will-change:opacity,transform;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:clamp(1.1rem,2.8vh,1.7rem);padding-block:92px 110px;padding-left:var(--gut-l);padding-right:var(--gut-r)}
.hero-logo{margin:0;line-height:0}
.logo-anim{display:block;width:clamp(240px,33vw,500px);max-width:100%;height:auto;overflow:visible}
.la-ray{transform-box:view-box;transform-origin:150px 102.18px}
.la-spark{transform-box:fill-box;transform-origin:50% 50%}
.hero-lede{margin:0;max-width:34ch;color:rgba(243,245,248,.94);font-size:clamp(1rem,.94rem + .3vw,1.18rem);line-height:1.5;text-wrap:balance;text-shadow:0 1px 14px rgba(2,10,30,.65)}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}
.hero-actions .btn-ghost{background:rgba(2,26,63,.55)}
.hero-note{margin:-.25rem 0 0;color:rgba(243,245,248,.86);font-size:.92rem;line-height:1.4;text-shadow:0 1px 12px rgba(2,10,30,.7)}
.hero-ui{position:absolute;inset:0;z-index:4;pointer-events:none}
.hero-ui>*{pointer-events:auto}
.hero-hint{position:absolute;z-index:4;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,245,248,.8)}
@media (max-height:720px){.hero-hint{display:none}}
.hero-hint i{width:1px;height:34px;background:linear-gradient(var(--paper),rgba(243,245,248,0));transform-origin:top}

/* while the intro screen is up the hero waits: the video stays slightly zoomed and the logo is not built yet */
.hero.is-loading .hero-video{transform:scale(1.08)}
.hero.is-loading .crest,.hero.is-loading .hero-ui{visibility:hidden}
/* while the intro logo glides into place the hero logo waits hidden; once it has landed it is shown already built
   (no second entrance), and only the text around it rises in */
.hero.is-landing .hero-logo{visibility:hidden}
.hero.is-landing:not(.is-revealed) :is(.hero-lede,.hero-actions,.hero-note){opacity:0}
.hero.is-landing:not(.is-revealed) .hero-ui{visibility:hidden}
.hero.is-landed :is(.logo-anim,.la-sun,.la-ray,.la-w1,.la-w2,.la-wave,.la-spark){animation:none!important}

.vid-toggle{position:absolute;z-index:4;right:var(--gut-r);bottom:calc(env(safe-area-inset-bottom,0px) + 18px);width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(243,245,248,.38);background:rgba(2,26,63,.62);
  color:var(--paper);display:grid;place-items:center;cursor:pointer;padding:0;transition:border-color var(--t-fast)}
.vid-toggle:hover{border-color:var(--paper)}
.vid-toggle svg{width:14px;height:14px}
.vid-toggle .i-play,.vid-toggle[data-paused="true"] .i-pause{display:none}
.vid-toggle[data-paused="true"] .i-play{display:block}

/* the logo assembles once, calmly: the sun rises behind its own wave, the rays open, the words fade in whole */
@media (prefers-reduced-motion:no-preference){
  .hero.is-in .logo-anim{animation:fadeIn .6s ease both}
  .hero.is-in .la-sun{animation:sunRise 1.3s cubic-bezier(.16,.8,.2,1) .1s both}
  .hero.is-in .la-ray{animation:rayIn .8s cubic-bezier(.16,.8,.2,1) backwards;animation-delay:calc(.45s + var(--d) * 45ms)}
  .hero.is-in .la-w1,.hero.is-in .la-w2,.hero.is-in .la-wave{animation:fadeIn .9s ease .35s both}
  .hero.is-in .la-spark{animation:sparkIn .6s var(--ease) backwards;animation-delay:calc(1s + var(--i) * 110ms)}
  .hero.is-revealed .hero-lede{animation:rise .9s var(--ease) .45s both}
  .hero.is-revealed .hero-actions{animation:rise .9s var(--ease) .6s both}
  .hero.is-revealed .hero-note{animation:rise .9s var(--ease) .72s both}
  .hero.is-revealed .hero-hint,.hero.is-revealed .vid-toggle{animation:fadeIn 1s 1.1s backwards}
  .hero-hint i{animation:drip 2.2s cubic-bezier(.6,0,.2,1) infinite}
}
@keyframes sunRise{from{transform:translateY(40px)}}
@keyframes rayIn{from{opacity:0;transform:scale(.75)}}
@keyframes sparkIn{from{opacity:0;transform:scale(.4)}}

/* ---------- introduction ---------- */
.intro{position:relative;z-index:2;margin-top:calc(var(--edge-h) - var(--hero-pin));background:var(--snow);color:var(--ink);
  padding:clamp(1rem,2.5vw,2.5rem) var(--gut-r) calc(var(--sec-y) * .7 + clamp(36px,6vw,92px)) var(--gut-l);scroll-margin-top:calc(var(--header-h) + var(--edge-h))}
/* the logo's double wave, grown to full width, as the top edge of the section */
.intro-edge{position:absolute;left:0;bottom:calc(100% - 1px);display:block;width:100%;height:var(--edge-h);pointer-events:none}
.intro-edge path{fill:var(--snow)}
.intro-in{max-width:var(--w-max);margin:0 auto;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(2.5rem,6vw,6rem);align-items:center}
.kicker{margin:0;display:flex;align-items:center;gap:.75rem;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite-2)}
.kicker::before{content:"";width:24px;height:2px;background:var(--gold);flex:none}
.intro-title{margin:1.5rem 0 0;font-family:var(--f-display);font-stretch:104%;font-weight:600;font-size:clamp(2.35rem,1.2rem + 3.9vw,4.6rem);line-height:1.02;
  letter-spacing:-.038em;color:var(--ink);text-wrap:balance}
.intro-lede{margin:1.6rem 0 0;max-width:38ch;color:var(--graphite);font-size:var(--fs-lede);line-height:1.58}
.intro-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;margin-top:2.25rem}
.intro-points{list-style:none;margin:clamp(2.75rem,5vw,4rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem clamp(1.25rem,2.5vw,2.25rem)}
.intro-points li{position:relative;padding-top:1.1rem;border-top:1px solid var(--steel);display:flex;flex-direction:column;gap:.35rem;min-width:0}
.intro-points li::before{content:"";position:absolute;left:0;top:-1px;width:28px;height:1px;background:var(--navy)}
.intro-points strong{font:600 1rem/1.3 var(--f-display);font-stretch:102%;color:var(--ink)}
.intro-points span{font-size:.93rem;line-height:1.5;color:var(--graphite-2)}
/* the photograph, with a navy block offset behind it like a print mount */
.intro-media{position:relative;margin:0 0 0 clamp(0rem,2vw,2rem)}
.intro-media::before{content:"";position:absolute;inset:clamp(18px,2.2vw,32px) clamp(-32px,-2.2vw,-18px) clamp(-32px,-2.2vw,-18px) clamp(18px,2.2vw,32px);border-radius:var(--r-2);background:var(--navy)}
.intro-media::after{content:"";position:absolute;left:clamp(18px,2.2vw,32px);bottom:clamp(-32px,-2.2vw,-18px);width:clamp(48px,5vw,72px);height:3px;background:var(--gold)}
.intro-img{position:relative;display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-2);background:var(--cloud);box-shadow:var(--sh-1)}
.intro .band-edge{position:absolute;left:0;bottom:-1px;width:100%;height:clamp(36px,6vw,92px)}
.intro .band-edge path{fill:var(--night)}
.intro .band-edge path.soft{opacity:.4}

/* ---------- story ---------- */
.story{position:relative;height:440vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.sky{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,var(--night),rgba(2,26,63,0) 24%),radial-gradient(110% 85% at 62% 46%,#0b2b60 0%,var(--navy) 40%,var(--night) 80%)}
.sun{position:absolute;width:min(80vw,1000px);aspect-ratio:1;right:-24%;top:-40%;border-radius:50%;opacity:.25;
  background:radial-gradient(circle,rgba(251,176,59,.5) 0%,rgba(236,168,61,.2) 26%,rgba(220,159,62,.06) 50%,rgba(220,159,62,0) 68%)}
.rays{position:absolute;inset:0;opacity:.15;transform-origin:86% 4%;
  background:repeating-conic-gradient(from 196deg at 86% 4%,rgba(251,176,59,.08) 0deg,rgba(251,176,59,0) 2.4deg,rgba(251,176,59,0) 5.6deg,rgba(251,176,59,.08) 8deg);
  -webkit-mask-image:radial-gradient(80% 85% at 86% 4%,#000 0%,rgba(0,0,0,.4) 45%,transparent 75%);
          mask-image:radial-gradient(80% 85% at 86% 4%,#000 0%,rgba(0,0,0,.4) 45%,transparent 75%)}
.haze{position:absolute;inset:0;background:radial-gradient(90% 70% at 60% 55%,rgba(150,128,90,.16),rgba(65,70,75,.24) 72%)}
.motes{position:absolute;inset:0;width:100%;height:100%}
.vignette{position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(0deg,var(--night),rgba(2,26,63,0))}

.panel-pos{position:absolute;z-index:1;left:var(--cx,60%);top:var(--cy,52%);width:var(--pw,600px);height:var(--ph,362px);
  margin:calc(var(--ph,362px) / -2) 0 0 calc(var(--pw,600px) / -2);perspective:var(--persp,1500px)}
.panel{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(62deg) rotateZ(-28deg) scale(.9)}
.face{position:absolute;inset:0;transform-style:preserve-3d}
.cells,.fx{position:absolute;display:block}
.cells{left:0;top:0;width:100%;height:100%}
.fx{left:calc(var(--m,120px) * -1);top:calc(var(--m,120px) * -1);width:calc(100% + var(--m,120px) * 2);height:calc(100% + var(--m,120px) * 2);pointer-events:none}
.side{position:absolute;background:linear-gradient(90deg,#9aa2af,#cfd5de 40%,#7b8492)}
.side-b{left:0;bottom:0;width:100%;height:var(--t,18px);transform-origin:bottom;transform:rotateX(90deg);background:linear-gradient(180deg,#c3c9d3,#6e7786)}
.side-l{left:0;top:0;width:var(--t,18px);height:100%;transform-origin:left;transform:rotateY(90deg)}
.side-r{right:0;top:0;width:var(--t,18px);height:100%;transform-origin:right;transform:rotateY(-90deg)}
.shadow{position:absolute;inset:-2% -4%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,8,24,.75),rgba(0,8,24,.38) 55%,rgba(0,8,24,0));transform:translateZ(calc(var(--t,18px) * -1 - 70px))}

/* copy */
.copy{position:absolute;z-index:2;left:var(--gut-l);top:50%;transform:translateY(-46%);width:min(31rem,35vw);display:grid}
.phase{grid-area:1/1;align-self:center;display:flex;flex-direction:column;gap:1.15rem}
.phase-b,.phase-c{opacity:0}
.eyebrow{margin:0;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);display:flex;align-items:center;gap:.7rem}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--gold);flex:none}
.display{margin:0;font-family:var(--f-display);font-stretch:108%;font-weight:300;font-size:clamp(2rem,1.1rem + 2.9vw,3.75rem);line-height:1.04;letter-spacing:-.03em;text-wrap:balance;color:#fff}
.display-2{font-size:clamp(1.8rem,1.05rem + 2.2vw,3rem);line-height:1.07}
.lede{margin:0;color:var(--mist);font-size:clamp(1rem,.95rem + .22vw,1.125rem);line-height:1.6;max-width:40ch}

/* step indicator: three labels on a fine line, right of the panel; the active one in gold */
.rail{position:absolute;z-index:3;right:var(--gut-r);top:50%;transform:translateY(-50%);list-style:none;margin:0;padding:0 0 0 24px;width:12rem;
  display:flex;flex-direction:column;gap:2.6rem}
.rail-line{position:absolute;left:4px;top:7px;bottom:calc(1.1rem + 7px);width:1px;background:rgba(243,245,248,.2)}
.rail-fill{position:absolute;inset:0;background:var(--gold);transform-origin:top;transform:scaleY(var(--rp,0))}
.rail-i{position:relative;display:flex;flex-direction:column;gap:.35rem}
.rail-dot{position:absolute;z-index:1;left:-24px;top:2px;width:9px;height:9px;border-radius:50%;background:var(--night);border:1px solid rgba(243,245,248,.45);
  transition:background-color var(--t),border-color var(--t)}
.rail-t{font-family:var(--f-mono);font-size:.72rem;line-height:1.1;letter-spacing:.12em;text-transform:uppercase;color:rgba(169,180,198,.85);transition:color var(--t)}
.rail-c{font-size:.85rem;line-height:1.3;color:var(--mist);opacity:0;transition:opacity var(--t)}
.rail-i.on .rail-dot{background:var(--gold);border-color:var(--gold)}
.rail-i.on .rail-t{color:#fff}
.rail-i.on .rail-c{opacity:1}

.hint{position:absolute;z-index:3;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 30px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.hint i{width:1px;height:38px;background:linear-gradient(var(--paper),rgba(243,245,248,0));transform-origin:top}

/* floating contact: a WhatsApp pill (logo + label) bottom right, plus a round call button when a phone exists.
   It joins once the hero is behind, so it never covers the video controls or the hero buttons. */
.dock{position:fixed;z-index:20;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 16px);display:flex;align-items:center;gap:10px;
  opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .3s ease,transform .35s var(--ease),visibility 0s linear .35s}
html.past-hero .dock{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease,transform .35s var(--ease),visibility 0s}
.dock-wa{display:inline-flex;align-items:center;gap:.6rem;height:56px;padding:0 1.35rem 0 1.05rem;border-radius:28px;background:var(--wa);color:var(--night);
  font:700 1rem/1 var(--f-body);letter-spacing:.01em;text-decoration:none;
  box-shadow:inset 0 -2px 0 rgba(2,26,63,.14),0 12px 28px -12px rgba(2,10,30,.6);transition:background-color var(--t-fast),transform var(--t) var(--ease)}
.dock-wa .i-wa{width:26px;height:26px;flex:none}
.dock-wa:hover{background:var(--wa-hover);transform:translateY(-2px)}
.dock-call{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--gold);color:var(--night);
  box-shadow:inset 0 -2px 0 rgba(2,26,63,.14),0 12px 28px -12px rgba(2,10,30,.6);transition:transform var(--t) var(--ease)}
.dock-call svg{width:22px;height:22px}
.dock-call:hover{transform:translateY(-2px)}
.dock a:focus-visible{outline:2px solid var(--paper);outline-offset:3px;box-shadow:0 0 0 6px var(--night)}

/* ---------- load choreography ---------- */
@media (prefers-reduced-motion:no-preference){
  .stage.go .phase-a>*{animation:rise .9s var(--ease) both}
  .stage.go .phase-a>:nth-child(1){animation-delay:.15s}
  .stage.go .phase-a>:nth-child(2){animation-delay:.26s}
  .stage.go .phase-a>:nth-child(3){animation-delay:.38s}
  .stage.go .panel-pos{animation:panelIn 1.5s var(--ease) .05s both}
  .stage.go .rail{animation:fadeIn .9s .6s both}
  .hint i{animation:drip 2.2s cubic-bezier(.6,0,.2,1) infinite}
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@keyframes panelIn{from{opacity:0;transform:translateY(50px) scale(.96)}}
@keyframes fadeIn{from{opacity:0}}
@keyframes drip{0%{transform:scaleY(0);opacity:1}55%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* ---------- light band: services, process, gallery, questions ---------- */
.light-band{position:relative;z-index:1;background:var(--l-bg);color:var(--l-ink);
  padding-block:var(--sec-y) calc(var(--sec-y) + clamp(36px,6vw,92px));padding-left:var(--gut-l);padding-right:var(--gut-r)}
.band-edge{position:absolute;left:0;width:100%;height:clamp(36px,6vw,92px);display:block;pointer-events:none}
.band-edge.top{bottom:calc(100% - 1px)}
.band-edge.top path{fill:var(--l-bg)}
.band-edge.top path.soft{opacity:.45}
.band-edge.bottom{bottom:-1px}
.band-edge.bottom path{fill:var(--night)}
.band-edge.bottom path.soft{opacity:.4}
.l-in{max-width:var(--w-max);margin:0 auto}
.l-in+.l-in,.l-in+.gallery{margin-top:var(--sec-y)}
.sec-head{margin-bottom:clamp(2.25rem,4.5vw,3.75rem)}
.sec-head--split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:1.5rem clamp(2rem,5vw,5rem);align-items:end}
.sec-lede{margin:0;max-width:38ch;color:var(--graphite);font-size:var(--fs-body);line-height:1.62}
.l-eyebrow{margin:0 0 1.1rem;display:flex;align-items:center;gap:.75rem;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--l-eyebrow)}
.l-eyebrow::before{content:"";width:24px;height:2px;background:var(--navy);flex:none}
.l-title{margin:0;font-family:var(--f-display);font-stretch:104%;font-weight:600;font-size:var(--fs-h2);line-height:1.05;letter-spacing:-.034em;text-wrap:balance;color:var(--l-ink)}

/* services: the heading on the left, held in view while the four installation types pass on the right.
   Each card ends on its own evaluation link, aligned along the bottom of the row. */
.services{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.services-head{position:sticky;top:calc(var(--header-h) + 2.5rem);margin:0;display:flex;flex-direction:column;gap:1.4rem}
.services-head .l-eyebrow{margin:0}
.services-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.85rem,1.5vw,1.25rem)}
.svc{display:flex;flex-direction:column;gap:.7rem;min-width:0;padding:clamp(1.4rem,2.4vw,2rem);
  background:var(--white);border:1px solid var(--l-line);border-radius:var(--r-2);
  transition:border-color var(--t),box-shadow var(--t)}
.svc:hover{border-color:rgba(3,34,80,.24);box-shadow:var(--sh-1)}
.svc-icon{display:block;width:40px;height:40px;margin-bottom:.35rem;color:var(--navy)}
.svc-icon svg{width:100%;height:100%;stroke-width:1.5}
.svc h3{margin:0;font-family:var(--f-display);font-stretch:104%;font-weight:600;font-size:var(--fs-h3);line-height:1.22;letter-spacing:-.015em;color:var(--l-ink)}
.svc p{margin:0;color:var(--l-body);font-size:1rem;line-height:1.62}
.svc-cta{margin-top:auto;padding-top:.6rem;align-self:flex-start;display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  color:var(--l-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:5px}
.svc-cta svg{width:18px;height:18px;transition:transform var(--t)}
.svc-cta:hover svg{transform:translateX(3px)}

/* process: an inset navy panel with a horizontal timeline (vertical on phones), ending on the first step to take */
.process{position:relative;padding:clamp(2rem,5vw,4.5rem);border-radius:var(--r-3);background:var(--navy);color:var(--paper);overflow:hidden}
.process::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 90% at 100% 0%,rgba(251,176,59,.1),rgba(251,176,59,0) 60%)}
.process>*{position:relative}
.process .l-eyebrow{color:var(--mist)}
.process .l-eyebrow::before{background:var(--gold)}
.process .l-title{color:#fff}
.process .sec-lede{color:var(--mist)}
.steps{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem clamp(1.25rem,2.5vw,2.5rem)}
.steps::before{content:"";position:absolute;left:0;right:0;top:.62rem;height:1px;background:rgba(243,245,248,.18)}
.step{position:relative;min-width:0}
.step-n{position:relative;display:inline-flex;align-items:center;gap:.65rem;padding-right:.8rem;background:var(--navy);
  font-family:var(--f-mono);font-size:.74rem;line-height:1.25rem;letter-spacing:.08em;color:var(--mist)}
.step-n::before{content:"";width:11px;height:11px;border-radius:50%;box-sizing:border-box;border:1.5px solid var(--gold);background:var(--navy);flex:none;
  transition:background-color var(--t)}
.step:hover .step-n::before{background:var(--gold)}
.step h3{margin:1.5rem 0 .55rem;font-family:var(--f-display);font-stretch:104%;font-weight:600;font-size:clamp(1.25rem,1.05rem + .6vw,1.55rem);line-height:1.15;letter-spacing:-.02em;color:#fff}
.step p{margin:0;max-width:26ch;color:var(--mist);font-size:1rem;line-height:1.6}
.process-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(1.5rem,3vw,2rem);border-top:1px solid var(--line)}
.process-foot p{margin:0;max-width:44ch;color:var(--paper);font-size:var(--fs-body)}

/* gallery: one large photograph, the rest in a tighter grid (only rendered with real photographs) */
.gallery-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,17vw,250px);gap:clamp(.6rem,1vw,1rem)}
.g-item{min-width:0}
.g-item figure{position:relative;margin:0;height:100%;border-radius:var(--r-1);overflow:hidden;background:var(--cloud)}
.g-item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.g-item:hover img{transform:scale(1.025)}
.g-lead{grid-column:span 2;grid-row:span 2}
.g-item figcaption{position:absolute;left:.75rem;bottom:.75rem;padding:.35rem .6rem;border-radius:var(--r-1);background:rgba(2,26,63,.82);color:#fff;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase}

/* questions */
.faq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.faq-side{display:flex;flex-direction:column;gap:1.4rem;min-width:0;position:sticky;top:110px}
.faq-side .l-eyebrow{margin:0}
.faq-side .l-title{font-size:clamp(1.9rem,1.25rem + 2.2vw,3rem)}
.faq-side p:not([class]){margin:0;color:var(--l-body);font-size:var(--fs-body);line-height:1.62;max-width:34ch}
.faq-side .btn{align-self:flex-start}
.faq-list{background:var(--l-card);border:1px solid var(--l-line);border-radius:var(--r-2);padding:.4rem clamp(1.1rem,2.4vw,2.2rem);min-width:0}
.faq-item+.faq-item{border-top:1px solid var(--l-line)}
.faq-q{margin:0;font:inherit}
.faq-q button{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding:1.4rem 0;cursor:pointer;
  font-family:var(--f-display);font-stretch:102%;font-weight:600;font-size:clamp(1.02rem,.96rem + .3vw,1.18rem);line-height:1.35;letter-spacing:-.01em;color:var(--l-ink)}
.faq-q button:focus-visible{outline:2px solid var(--navy);outline-offset:4px;border-radius:var(--r-1)}
.faq-q .chev{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--l-line);display:grid;place-items:center;
  transition:background-color var(--t),border-color var(--t),transform .35s var(--ease)}
.faq-q .chev svg{width:18px;height:18px;fill:none;stroke:var(--l-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--t)}
.faq-q button:hover .chev{border-color:rgba(3,34,80,.35)}
.faq-q button[aria-expanded="true"] .chev{background:var(--navy);border-color:var(--navy);transform:rotate(180deg)}
.faq-q button[aria-expanded="true"] .chev svg{stroke:#fff}
.faq-a-in{max-width:62ch}
.faq-a-in p{margin:0;padding-bottom:1.5rem;color:var(--l-body);font-size:1rem;line-height:1.68}
/* collapsing only once the script runs: without it every answer simply stays open */
.faq.js-on .faq-a{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .38s var(--ease),visibility 0s linear .38s}
.faq.js-on .faq-item.open .faq-a{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .38s var(--ease),visibility 0s}
.faq.js-on .faq-a-in{overflow:hidden;min-height:0}

/* ---------- contact: the closing section ----------
   Left: who we are and how to reach us; right: the evaluation request (evaluation.css), whose glowing button is the
   one focal point of the page's ending. Phones stack it as introduction, request, then the contact details. */
.contact{position:relative;background:var(--night);padding:calc(var(--sec-y) * .55) var(--gut-r) var(--sec-y) var(--gut-l)}
.contact-in{max-width:var(--w-max);margin:0 auto;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  grid-template-areas:"intro panel" "details panel";gap:clamp(2.25rem,4vw,3.25rem) clamp(2.5rem,6vw,6rem);align-items:start}
.contact-intro{grid-area:intro;min-width:0}
.contact-mark{display:block;width:72px;height:auto;margin:0 0 1.6rem}
.contact-title{margin:1.25rem 0 0;font-family:var(--f-display);font-stretch:106%;font-weight:500;font-size:clamp(2.2rem,1.3rem + 3.1vw,4rem);line-height:1.03;letter-spacing:-.036em;color:#fff;text-wrap:balance}
.contact-lede{margin:1.4rem 0 0;max-width:44ch;color:var(--mist);font-size:var(--fs-lede);line-height:1.58}
.contact-details{grid-area:details;min-width:0}
/* the channels as a short list of label / value rows; the values are what people act on, so they carry the weight */
.contact-list{margin:0;border-top:1px solid var(--line)}
.contact-row{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:.35rem 1.5rem;align-items:baseline;padding:1rem 0;border-bottom:1px solid var(--line)}
.contact-row dt{display:flex;align-items:center;gap:.6rem;color:var(--mist);font-size:.92rem;line-height:1.4}
.contact-row dt svg{width:18px;height:18px;flex:none;color:var(--gold)}
.contact-row dd{margin:0;min-width:0;color:var(--paper);font-size:1.02rem;line-height:1.5}
.contact-row a{display:inline-flex;align-items:center;min-height:44px;margin-block:-.65rem;color:#fff;font:600 clamp(1.1rem,1rem + .4vw,1.3rem)/1.2 var(--f-display);font-stretch:104%;
  letter-spacing:-.01em;text-decoration:underline;text-decoration-color:rgba(251,176,59,.55);text-decoration-thickness:1px;text-underline-offset:6px;overflow-wrap:anywhere}
.contact-row a:hover{text-decoration-color:var(--gold);text-decoration-thickness:2px}

/* anchors from the header land below it (the full-screen hero and story stage are meant to sit under it) */
.services,.process,.gallery,.faq,.contact{scroll-margin-top:calc(var(--header-h) + 16px)}

/* gentle reveal of the light band, set up by main.js only for what starts below the fold */
.reveal-pre{opacity:0;transform:translateY(20px)}
.reveal-in{opacity:1;transform:none;transition:opacity .7s ease,transform .8s var(--ease);transition-delay:var(--rd,0ms)}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:3rem}
  .steps::before{display:none}
  .step{padding-top:0;border-top:1px solid var(--line)}
  .step-n{margin-top:-.62rem}
  .rail{width:9.5rem}
  .rail-c{display:none}
}
@media (max-width:899px){
  .intro-in{grid-template-columns:minmax(0,1fr)}
  .intro-media{order:2;margin:0 clamp(18px,4vw,32px) clamp(18px,4vw,32px) 0}
  .intro-img{aspect-ratio:4/3}
  .sec-head--split{grid-template-columns:minmax(0,1fr);align-items:start}
  .services{grid-template-columns:minmax(0,1fr);gap:2.25rem}
  .services-head{position:static}
  .contact-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "panel" "details"}
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(140px,34vw,240px)}
}

/* ---------- phone ---------- */
@media (max-width:819px){
  .hero-hint{display:none}
  .crest{padding-block:84px 150px}
  .vid-toggle{bottom:calc(env(safe-area-inset-bottom,0px) + 14px)}
  .story{height:400vh}
  .copy{top:calc(env(safe-area-inset-top,0px) + 76px);right:var(--gut-r);transform:none;width:auto}
  .phase{align-self:start;gap:.8rem}
  .lede{font-size:.98rem}
  .hint{display:none}
  /* the step indicator lies flat above the call bar */
  .rail{top:auto;left:var(--gut-l);right:var(--gut-r);bottom:calc(env(safe-area-inset-bottom,0px) + 84px);transform:none;width:auto;padding:16px 0 0;
    flex-direction:row;justify-content:space-between;gap:.5rem}
  .rail-line{left:4px;right:4px;top:4px;bottom:auto;width:auto;height:1px}
  .rail-fill{transform-origin:left;transform:scaleX(var(--rp,0))}
  .rail-i{align-items:flex-start}
  .rail-i:nth-child(2){align-items:center}
  .rail-i:nth-child(3){align-items:flex-end}
  .rail-dot{left:auto;top:-16px}
  .rail-t{font-size:.64rem;letter-spacing:.1em}
  .faq{grid-template-columns:minmax(0,1fr)}
  .faq-side{position:static}
  .dock{right:var(--gut-r);bottom:calc(env(safe-area-inset-bottom,0px) + 14px)}
  .dock-wa{height:52px;padding:0 1.2rem 0 1rem}
  .dock-call{width:52px;height:52px}
}
@media (max-width:640px){
  .intro-points{grid-template-columns:minmax(0,1fr);gap:0}
  .intro-points li{flex-direction:row;flex-wrap:wrap;column-gap:.5rem;padding:1rem 0}
  .intro-points li:last-child{border-bottom:1px solid var(--steel)}
  .intro-points strong{flex:1 0 100%}
  .intro-actions .btn-navy{flex:1 1 100%}
  .hero-actions{flex-direction:column;align-self:stretch;max-width:22rem;margin-inline:auto;width:100%}
  .hero-actions .btn{width:100%}
  .services-grid{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr);row-gap:2.25rem;padding-left:1.75rem}
  .steps::before{display:none}
  .step:not(:last-child)::after{content:"";position:absolute;left:calc(5px - 1.75rem);top:.62rem;bottom:calc(-2.25rem - .62rem);width:1px;background:rgba(243,245,248,.18)}
  .step{border-top:0}
  .step-n{margin-top:0;padding-right:0;background:none}
  .step-n::before{position:absolute;z-index:1;left:-1.75rem;top:.25rem}
  .step h3{margin-top:.5rem}
  .process-foot .btn{width:100%}
  .contact-row{grid-template-columns:minmax(0,1fr);padding:.9rem 0}
  .contact-row a{margin-block:-.4rem}
  .gallery-grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
  .g-item figure{aspect-ratio:4/3;height:auto}
  .g-lead{grid-column:auto;grid-row:auto}
}

/* ---------- reduced motion: one calm, stacked composition ---------- */
@media (prefers-reduced-motion:reduce){
  :root{--hero-pin:0px}
  .hero{height:auto}
  .intro{margin-top:0}
  .hero-stage{position:relative;min-height:640px}
  .crest{padding-bottom:calc(110px + 12vw)}
  .hero-hint{display:none}
  .story{height:auto}
  .stage{position:relative;height:auto;overflow:hidden;display:flex;flex-direction:column;gap:2.5rem;
    padding-block:calc(env(safe-area-inset-top,0px) + 7rem) 3rem;padding-left:var(--gut-l);padding-right:var(--gut-r)}
  .copy{position:relative;left:auto;top:auto;right:auto;transform:none;width:auto;max-width:42rem;display:flex;flex-direction:column;gap:2.75rem}
  .phase{opacity:1 !important;transform:none !important}
  .panel-pos{position:relative;left:auto;top:auto;margin:3rem auto;order:2}
  .rail,.hint,.motes{display:none}
  .dock,.dock-wa,.dock-call,.svc-cta svg,.faq-q .chev,.faq.js-on .faq-a,.btn-text svg,.g-item img,.boot{transition:none !important}
  .reveal-pre{opacity:1;transform:none}
}