/* ---------- tokens ---------- */
:root{
  --ink:#f2efe9;
  --ink-dim:#aaa397;
  --paper:#0c0b09;
  --card:#1a1813;
  --line:rgba(242,239,233,.12);
  --accent:#d9531e;
  --accent-dark:#b8410f;
  --radius:14px;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wrap:1280px;
  --expo:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;font-family:var(--font-body);color:var(--ink);background:var(--paper);
  line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,4vw,56px);position:relative}
h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1;margin:0 0 .4em;color:#fff}
p{margin:0 0 1em}
main{position:relative;z-index:1}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- WebGL stage: one fixed canvas BEHIND the content ---------- */
.gl-stage{position:fixed;inset:0;z-index:0;pointer-events:none}
.gl-stage canvas{display:block;width:100%;height:100%}
/* once a plane has its texture, the DOM image steps aside (it still holds the layout) */
.gl .gl-ready > img{opacity:0}
.gl .gl-ready{background:transparent !important}

/* ---------- grain (static layer, no blending) ---------- */
.grain{
  position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:100;background:#080706;display:flex;align-items:flex-end;padding:clamp(20px,4vw,56px);will-change:transform}
.loader-inner{display:flex;justify-content:space-between;align-items:flex-end;width:100%}
.loader-brand{font-family:var(--font-display);font-size:clamp(18px,2vw,26px);color:var(--ink-dim)}
.loader-num{font-family:var(--font-display);font-size:clamp(80px,16vw,240px);line-height:.8;color:#fff;font-variant-numeric:tabular-nums}
.loader-num sup{font-size:.25em;color:var(--accent);vertical-align:top}
.loader-bar{position:absolute;left:0;top:0;height:3px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
html:not(.js) .loader{display:none}

/* ---------- cursor ---------- */
.cursor{position:fixed;top:0;left:0;width:72px;height:72px;margin:-36px 0 0 -36px;pointer-events:none;z-index:90;opacity:0;display:flex;align-items:center;justify-content:center;transform:translate3d(-100px,-100px,0)}
.cursor.seen{opacity:1}
.cursor .dot{position:absolute;inset:0;border-radius:50%;background:var(--accent);transform:scale(.18);transition:transform .5s var(--expo)}
.cursor #cursor-text{position:relative;font-size:12px;font-weight:600;color:#fff;opacity:0;transform:scale(.6);transition:opacity .25s,transform .5s var(--expo)}
.cursor.grow .dot{transform:scale(1)}
.cursor.grow #cursor-text{opacity:1;transform:none}
body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:none}
@media(max-width:899px),(hover:none){.cursor{display:none}}

/* ---------- buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 24px;border-radius:999px;font-weight:600;font-size:15px;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background-color .3s,color .3s,scale .2s var(--expo);font-family:inherit;
}
/* tap feedback: `scale` is its own property, so it never fights GSAP's transform */
a,button{-webkit-tap-highlight-color:transparent}
.btn:active{scale:.94}
.btn-label{display:inline-block;position:relative}
.btn-accent{background:color-mix(in srgb,var(--accent) 88%,#000);color:#fff}
.btn-accent:hover{background:color-mix(in srgb,var(--accent) 80%,#000)}
.btn-ghost{background:transparent;color:var(--ink);border-color:rgba(242,239,233,.35)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-ghost-dark{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.35)}
.btn-lg{padding:18px 30px;font-size:16px}
/* the call button breathes: a ring that swells and fades, compositor only */
.call-ring{position:absolute;inset:0;border-radius:inherit;border:2px solid var(--accent);pointer-events:none;animation:ring 2.4s var(--expo) infinite}
@keyframes ring{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(1.35,1.7);opacity:0}}

/* ---------- demo banner ---------- */
.demo-banner{background:#000;color:#fff;text-align:center;font-size:13px;padding:8px 12px;border-bottom:2px solid var(--accent);position:relative;z-index:60}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(12,11,9,.94);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px;gap:12px}
.logo{font-family:var(--font-display);font-weight:600;font-size:19px;color:#fff;margin-right:auto}
.header-phone{display:flex;align-items:center;gap:6px;font-weight:600;font-size:14px;color:var(--ink-dim);padding:8px}
.header-cta{display:none}
@media(min-width:640px){.header-cta{display:inline-flex}}
@media(max-width:639px){.logo{font-size:16px}.header-phone span{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;color:#fff;min-height:calc(100vh - 60px);min-height:calc(100svh - 60px);display:flex;align-items:flex-end}
.hero-media-clip{position:absolute;inset:0;overflow:hidden}
.hero-media-clip img{width:100%;height:100%;object-fit:cover}
.hero3d-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.1s ease}
/* the concept scene is a fallback-first enhancement: only shown, and only hides the photo, once it has actually rendered a frame */
html.hero3d-ready .hero-media-clip{background:linear-gradient(180deg,#20160f 0%,#0c0906 75%)}
html.hero3d-ready .hero3d-canvas.hero3d-ready{opacity:1}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,5,4,.55) 0%,rgba(6,5,4,.25) 40%,rgba(6,5,4,.9) 100%)}
.hero-inner{position:relative;z-index:1;padding-top:110px;padding-bottom:56px;width:100%}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:600;color:#f3d9c9;margin-bottom:18px}
.map-link{text-decoration:underline;text-underline-offset:2px;display:inline-block;padding:4px 2px;margin:-4px -2px}
.hero-headline{font-size:clamp(44px,7.8vw,136px);max-width:14ch;margin-bottom:.35em;letter-spacing:-.025em;line-height:.92;text-shadow:0 2px 28px rgba(0,0,0,.6),0 1px 4px rgba(0,0,0,.85)}
.hero-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-bottom:28px}
.hero-sub{font-size:clamp(15px,1.4vw,19px);max-width:40ch;color:#e9e5df;margin:0}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero-ctas .btn-ghost:only-child{background:color-mix(in srgb,var(--accent) 88%,#000);color:#fff;border-color:transparent}
.hero-ctas .btn-ghost:only-child:hover{background:color-mix(in srgb,var(--accent) 80%,#000)}
.trust-row{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;padding:18px 0 0;margin:0;font-size:14px;color:#f1ede6;border-top:1px solid var(--line)}
.trust-item{display:flex;align-items:center;gap:6px}
.stars{color:#ffb648;letter-spacing:1px;font-size:14px}
.scroll-cue{position:absolute;right:clamp(20px,4vw,56px);top:45%;z-index:1;display:none;flex-direction:column;align-items:center;gap:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);writing-mode:vertical-rl}
.scroll-cue span{width:1px;height:56px;background:var(--ink-dim);transform-origin:top;animation:cue 2s var(--expo) infinite}
@media(min-width:900px){.scroll-cue{display:flex}}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* split text: words never break; chars are inline-block so they can move */
.kin-title .word{display:inline-block;white-space:nowrap;vertical-align:top;overflow:hidden;padding:0 .04em .14em;margin:0 -.04em -.14em}
.kin-title.settled .word{overflow:visible}
.kin-title .char{display:inline-block;transform-origin:50% 100%}
.hero-headline em,.section-title em{font-style:italic;color:var(--accent)}

/* ---------- sections ---------- */
.section{padding:clamp(80px,12vw,160px) 0}
.skew{transform-origin:50% 50%}
.gl .skew{will-change:transform}
.section-eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:700;color:var(--accent);margin-bottom:14px}
.section-title{font-size:clamp(34px,5.6vw,84px);max-width:16ch;letter-spacing:-.02em}
.section-num{
  display:block;font-family:var(--font-display);font-size:clamp(80px,14vw,220px);
  color:transparent;-webkit-text-stroke:1px rgba(242,239,233,.16);line-height:1;margin-bottom:-.35em;
  position:absolute;right:clamp(20px,4vw,56px);top:-.3em;pointer-events:none;
}
.reveal-up{opacity:1}

/* ---------- pinned services ---------- */
.services-pin{position:relative;overflow:hidden}
/* layout variant: lead with the gallery (finished work) before the services pitch — picked per site
   by business.json's "layout" key; each section keeps its own scroll/sticky behaviour untouched,
   only its position in the page's flow moves */
html[data-layout="alt"] main#top{display:flex;flex-direction:column}
html[data-layout="alt"] #hero{order:1}
html[data-layout="alt"] #gallery{order:2}
html[data-layout="alt"] #before-after{order:3}
html[data-layout="alt"] #services{order:4}
html[data-layout="alt"] .counters-section{order:5}
html[data-layout="alt"] #reviews{order:6}
html[data-layout="alt"] #area{order:7}
html[data-layout="alt"] #quote{order:8}
/* default = vertical stack (JS-off, mobile, reduced motion). JS opts into the row with .pin-active */
.pin-track{display:flex;flex-direction:column;position:relative}
.pin-head{padding:80px clamp(20px,4vw,56px) 24px}
.pin-hint{display:none;color:var(--ink-dim);font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-top:24px}
.panel{padding:40px clamp(20px,4vw,56px);position:relative;border-top:1px solid var(--line)}
.panel-num{font-family:var(--font-display);font-size:56px;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(242,239,233,.28);display:block;margin-bottom:12px;pointer-events:none}
.panel-img{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;margin-bottom:22px;background:var(--card)}
.panel-img img{width:100%;height:100%;object-fit:cover}
.panel h3{font-size:clamp(24px,2.4vw,36px);margin-bottom:.3em}
.panel p{color:var(--ink-dim);max-width:34ch;margin:0}
@media(min-width:900px){
  .pin-track.pin-active{flex-direction:row;align-items:center;height:100vh;width:max-content;padding:90px 10vw 0 0}
  .pin-track.pin-active .pin-head{flex:0 0 44vw;padding:0 4vw 0 clamp(20px,4vw,56px)}
  .pin-track.pin-active .pin-hint{display:block}
  .pin-track.pin-active .panel{flex:0 0 auto;width:min(30vw,440px);margin-right:6vw;padding:0;border:0}
  .pin-track.pin-active .panel:nth-child(odd){margin-top:16vh}
  .pin-track.pin-active .panel:nth-child(even){margin-bottom:14vh}
  .pin-track.pin-active .panel-img{aspect-ratio:4/5;height:auto;max-height:56vh}
  .pin-track.pin-active .panel-num{position:absolute;top:-.55em;left:-.3em;font-size:clamp(90px,9vw,150px);z-index:1}
}

/* ---------- counters ---------- */
.counters-section{padding:clamp(60px,8vw,110px) 0}
.counters-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-top:40px;padding-bottom:40px}
.counter-num,.counter-num-wrap{display:block;font-family:var(--font-display);font-size:clamp(40px,8vw,112px);font-weight:500;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.counter-num-wrap .counter-num{display:inline;font-size:inherit}
.counter-label{display:block;font-size:12.5px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.08em;margin-top:10px}

/* ---------- before/after slider (transforms only: wrap slides one way, image the other) ---------- */
.ba-slider{position:relative;width:100%;aspect-ratio:16/10;max-height:78vh;border-radius:var(--radius);overflow:hidden;margin-top:40px;cursor:ew-resize;user-select:none;touch-action:pan-y;--p:50%}
.ba-after,.ba-before{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.ba-before-wrap{position:absolute;inset:0;overflow:hidden;transform:translateX(calc(var(--p) - 100%))}
.ba-before-wrap img{transform:translateX(calc(100% - var(--p)))}
.ba-handle{position:absolute;inset:0;pointer-events:none;transform:translateX(calc(var(--p) - 50%))}
.ba-handle::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#fff}
.ba-arrows{position:absolute;left:50%;top:50%;margin:-28px 0 0 -28px}
.ba-arrows{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:56px;height:56px;border-radius:50%;background:#fff;color:var(--paper);font-size:20px;box-shadow:0 8px 28px rgba(0,0,0,.4)}
.ba-label{position:absolute;bottom:16px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(12,11,9,.7);color:#fff;padding:7px 13px;border-radius:999px}
.ba-label-before{left:16px}
.ba-label-after{right:16px}

/* ---------- gallery: a loose, floating composition ---------- */
.gallery-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:48px;padding:0 clamp(20px,4vw,56px)}
.gallery-item{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:var(--card)}
.gallery-item img{width:100%;height:100%;object-fit:cover}
@media(min-width:680px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){
  .gallery-grid{grid-template-columns:repeat(12,1fr);column-gap:2vw;row-gap:0;max-width:1440px;margin-inline:auto}
  .gallery-item:nth-child(5n+1){grid-column:1 / span 5;aspect-ratio:4/5}
  .gallery-item:nth-child(5n+2){grid-column:7 / span 6;aspect-ratio:3/2;margin-top:22vh}
  .gallery-item:nth-child(5n+3){grid-column:3 / span 4;aspect-ratio:1;margin-top:18vh}
  .gallery-item:nth-child(5n+4){grid-column:8 / span 4;aspect-ratio:3/4;margin-top:-4vh}
  .gallery-item:nth-child(5n+5){grid-column:2 / span 7;aspect-ratio:16/9;margin-top:4vh}
}
/* no-WebGL path (touch, JS off): light CSS scroll-driven parallax, still compositor-only */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    html:not(.gl) .gallery-item img,html:not(.gl) .panel-img img{scale:1.14;animation:drift linear both;animation-timeline:view()}
    html:not(.gl) .gallery-item:nth-child(even){animation:float linear both;animation-timeline:view()}
  }
}
@keyframes drift{from{transform:translateY(-6%)}to{transform:translateY(6%)}}
@keyframes float{from{transform:translateY(40px)}to{transform:translateY(-40px)}}

/* ---------- marquee reviews ---------- */
.reviews-section{overflow:hidden}
.marquee{overflow:hidden;margin-top:48px;padding:24px 0}
.marquee-track{display:flex;gap:18px;width:max-content;animation:marquee 40s linear infinite}
.js-marquee .marquee-track{animation:none}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.review-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;margin:0;width:min(84vw,420px);flex:0 0 auto}
.review-card p{font-family:var(--font-display);font-size:19px;line-height:1.35;color:var(--ink);margin:12px 0 16px}
.review-card footer{font-size:13px;color:var(--ink-dim);font-weight:600}

/* ---------- service area ---------- */
.area-chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:32px 0 0}
.area-chips li{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-size:15px;font-weight:500}

/* ---------- quote form ---------- */
.quote-wrap{display:grid;grid-template-columns:1fr;gap:40px}
@media(min-width:900px){.quote-wrap{grid-template-columns:1fr 1fr;align-items:start}}
.quote-copy{position:relative}
.quote-copy p{color:var(--ink-dim)}
.quote-phone{display:inline-flex;color:var(--accent);font-weight:700;margin-top:6px;padding:8px 0}
.quote-form{display:grid;gap:14px;background:var(--card);padding:28px;border-radius:var(--radius);border:1px solid var(--line)}
.quote-form label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink-dim)}
.quote-form input,.quote-form select,.quote-form textarea{font:inherit;padding:11px 13px;border-radius:8px;border:1px solid var(--line);background:var(--paper);color:var(--ink)}
.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.quote-form button{margin-top:6px}

/* ---------- footer ---------- */
.site-footer{position:relative;z-index:1;background:#000;color:var(--ink-dim);padding:48px 0 24px}
.footer-inner{display:grid;grid-template-columns:1fr;gap:20px;font-size:14px}
@media(min-width:720px){.footer-inner{grid-template-columns:repeat(3,1fr)}}
.footer-name{font-family:var(--font-display);font-size:19px;color:#fff;margin-bottom:4px}
.footer-copy{text-align:center;font-size:12.5px;color:#948e80;margin:32px 0 0}

/* ---------- sticky mobile call bar ---------- */
.sticky-call{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(0,0,0,.96)}
.sticky-call-btn{flex:1;padding:13px 10px;font-size:14.5px}
@media(min-width:768px){.sticky-call{display:none}}
@media(max-width:767px){.site-footer{padding-bottom:90px}}

/* ---------- phone layer: no hover, no cursor, so the page moves on its own ---------- */
/* live badge */
.live-badge{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:#fff;padding:8px 15px 8px 13px;border-radius:999px;background:rgba(8,7,6,.62);border:1px solid rgba(255,255,255,.2);margin-bottom:18px}
.pulse{position:relative;flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:#35d07f}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:#35d07f;animation:pulse 1.8s ease-out infinite}
@keyframes pulse{from{transform:scale(1);opacity:.75}to{transform:scale(3.2);opacity:0}}

/* hero photo drifts on its own (Ken Burns). individual scale/translate, so the GSAP scroll zoom still composes */
html:not(.gl) #hero-img{animation:kenburns 24s ease-in-out infinite alternate}
@keyframes kenburns{from{scale:1.04;translate:0 0}to{scale:1.2;translate:-3% -2%}}

/* ticker of services and areas */
.ticker{position:relative;z-index:1;overflow:hidden;background:color-mix(in srgb,var(--accent) 88%,#000);color:#fff;padding:14px 0}
.ticker:has(.ticker-track:empty){display:none}
.ticker-track{display:flex;align-items:center;width:max-content;white-space:nowrap;font-family:var(--font-display);font-size:clamp(22px,4vw,40px);line-height:1;animation:marquee 32s linear infinite}
.ticker-track i{display:inline-block;width:.36em;height:.36em;margin:0 .7em;border-top:2px solid currentColor;border-left:2px solid currentColor;transform:rotate(45deg) translate(.08em,.08em);opacity:.8}

/* a wavy clean-swipe line that draws itself on scroll (drawn in full without JS) */
.cleanline{display:block;width:100%;max-width:460px;height:auto;margin-top:26px;overflow:visible}
.cleanline path{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}

/* gallery dots (built by script.js, phone only) */
.gallery-dots{display:none}
.gallery-dots button{width:30px;height:30px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer}
.gallery-dots button::before{content:"";width:8px;height:8px;border-radius:99px;background:rgba(242,239,233,.3);transition:width .45s var(--expo),background-color .3s}
.gallery-dots button[aria-current="true"]::before{width:26px;background:var(--accent)}

/* sticky call bar waits below the fold until the hero has gone */
.sticky-call{transition:transform .6s var(--expo)}
.sticky-call.tuck{transform:translateY(calc(100% + 12px))}

@media(max-width:899px){
  .loader{display:none}                     /* phones go straight to the page: usable first, pretty second */
  /* the call button must sit above the fold on a phone, whatever the tagline's length */
  .hero-inner{padding-top:36px;padding-bottom:28px}
  .hero-headline{font-size:clamp(30px,8.6vw,44px);max-width:none}
  .live-badge{margin-bottom:12px}
  .hero .eyebrow{margin-bottom:12px}
  .hero-foot{gap:14px;margin-bottom:18px}
  .hero-ctas{order:-1;width:100%}
  .hero-ctas .btn{flex:1 1 100%}
  .trust-row{padding-top:14px;font-size:13px}
  .footer-inner a{display:inline-block;padding:11px 0}
  /* services: cards that stick and stack as you scroll */
  .services-pin{overflow:visible}           /* overflow:hidden on an ancestor would kill position:sticky */
  .pin-track{padding:0 14px 30px}
  .pin-head{padding:72px 6px 22px}
  .panel{position:sticky;top:calc(86px + var(--i,0) * 12px);background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 14px 22px;margin-bottom:18px;transform-origin:50% 0;box-shadow:0 -12px 30px rgba(0,0,0,.35)}
  .panel::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#000;opacity:var(--dim,0);pointer-events:none}
  .panel:nth-child(3){--i:1}.panel:nth-child(4){--i:2}.panel:nth-child(5){--i:3}.panel:nth-child(6){--i:4}.panel:nth-child(7){--i:5}.panel:nth-child(n+8){--i:6}
  .panel-num{position:absolute;top:20px;right:24px;z-index:1;margin:0;font-size:44px;-webkit-text-stroke:1px rgba(255,255,255,.7)}
  .panel-img{aspect-ratio:16/10;margin-bottom:16px}
  .panel h3{font-size:26px}
}
@media(max-width:679px){
  /* gallery: a swipeable strip that snaps, with the next photo peeking in */
  .gallery-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;padding:0 20px 4px;overscroll-behavior-x:contain;scrollbar-width:none}
  .gallery-grid::-webkit-scrollbar{display:none}
  .gallery-item{flex:0 0 84%;aspect-ratio:4/5;scroll-snap-align:start;transition:scale .5s var(--expo),opacity .5s}
  .gallery-grid.snap .gallery-item:not(.on){scale:.93;opacity:.6}
  html:not(.gl) .gallery-item,html:not(.gl) .gallery-item img{animation:none;scale:1}
  .gallery-dots{display:flex;justify-content:center;margin-top:12px}
}
@media(max-width:899px) and (prefers-reduced-motion:no-preference){
  /* hero entrance in CSS, so it starts on first paint rather than after the scripts arrive */
  .hero .reveal-up{animation:rise .9s var(--expo) both}
  .hero .live-badge{animation-delay:.05s}
  .hero .eyebrow{animation-delay:.15s}
  .hero-headline{animation:wipe 1.25s cubic-bezier(.65,0,.35,1) .2s both}   /* a mask sweeping down reveals it line by line */
  .hero .hero-sub{animation-delay:.6s}
  .hero .hero-ctas{animation-delay:.45s}
  .hero .trust-row{animation-delay:.8s}
}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes wipe{from{clip-path:inset(-10% -10% 100% -10%);transform:translateY(22px)}to{clip-path:inset(-10% -10% -25% -10%);transform:none}}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .loader{display:none}
  .call-ring,.scroll-cue span,.pulse::after,#hero-img,.ticker-track{animation:none !important}
  .ticker-track{flex-wrap:wrap;width:auto;white-space:normal;padding:0 20px}
  .marquee-track{animation:none;flex-wrap:wrap;width:auto;padding:0 20px}
}
@media(max-width:699px){.section-num{display:none}}
.counters-row{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.counters-section:not(:has(.counter)){display:none}
@media(max-width:700px){.header-phone{min-height:44px;display:inline-flex;align-items:center}}