/* ====================================================================
   Djigit Detailing — premium cinematic detailing site
   Palette: near-black + owned brand green. One accent, used with restraint.
   ==================================================================== */

:root{
  --bg:#0B0C0A;
  --bg-soft:#0F120E;
  --surface:#14180F;
  --surface-2:#171C13;
  --line:rgba(244,246,242,.10);
  --line-strong:rgba(244,246,242,.18);
  --green:#57C84D;
  --green-glow:#7BE06B;
  --green-deep:#2E7D32;
  --ink:#F4F6F2;
  --muted:#A7AEA2;
  --muted-2:#868D7B;
  --gold:#F2B705;
  --display:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --maxw:1200px;
  --r:16px;
  /* easing tokens (Emil Kowalski) — ease-out for enter/exit, ease-in-out for move */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:auto}} /* Lenis owns scroll */
html,body{background:var(--bg);color:var(--ink);font-family:var(--body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{overflow-x:hidden;line-height:1.6}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.04;letter-spacing:-.02em}
em{font-style:normal;color:var(--green)}
::selection{background:var(--green);color:#06140A}

/* ---------- cinematic overlays (static, GPU-cheap) ---------- */
.grain{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.vignette{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(130% 120% at 50% 30%,transparent 58%,rgba(0,0,0,.6) 100%)}

.skip-link{position:fixed;left:-999px;top:8px;z-index:100;background:var(--green);color:#06140A;
  padding:.6rem 1rem;border-radius:8px}
.skip-link:focus{left:8px}

/* ---------- buttons ---------- */
.btn{--bgc:var(--green);display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  background:var(--bgc);color:#06140A;font-family:var(--body);font-weight:700;font-size:.98rem;
  padding:.85rem 1.5rem;border:1px solid transparent;border-radius:999px;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,background .25s;
  box-shadow:0 6px 24px -10px rgba(87,200,77,.6)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px -10px rgba(87,200,77,.75)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--green-glow);outline-offset:3px}
.btn-lg{padding:1.05rem 2rem;font-size:1.05rem}
.btn-sm{padding:.6rem 1.1rem;font-size:.9rem}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);box-shadow:none}
.btn-ghost:hover{border-color:var(--green);color:var(--green-glow);box-shadow:none}

.eyebrow{font-family:var(--body);font-size:.74rem;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--green);margin-bottom:1.1rem}
.stars{color:var(--gold);letter-spacing:.1em}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,backdrop-filter .3s,border-color .3s;
  border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(9,10,8,.72);backdrop-filter:blur(14px) saturate(1.1);border-bottom-color:var(--line)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:.85rem clamp(1rem,4vw,2rem);
  display:flex;align-items:center;gap:1.5rem}
.nav-brand{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:700;
  letter-spacing:.02em;font-size:1.05rem}
.nav-logo{width:40px;height:40px;object-fit:contain}
.nav-name-dim{color:var(--muted);margin-left:.35em;font-weight:500}
.nav-links{display:flex;gap:1.6rem;margin-left:auto;font-size:.95rem;font-weight:500}
.nav-links a{color:var(--muted);transition:color .2s;position:relative}
.nav-links a:hover{color:var(--ink)}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--green);transition:right .25s}
.nav-links a:hover::after{right:0}
.nav-cta{flex-shrink:0}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px;margin-left:auto}
.nav-toggle span{width:26px;height:2px;background:var(--ink);transition:transform .3s,opacity .3s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* full-screen opaque overlay so nothing bleeds through */
.mobile-menu{position:fixed;inset:0;z-index:45;display:none;flex-direction:column;justify-content:center;
  gap:.2rem;padding:5.5rem clamp(1.5rem,7vw,2.5rem) 3rem;background:var(--bg)}
.mobile-menu a{padding:.95rem .2rem;font-size:1.35rem;font-weight:600;border-bottom:1px solid var(--line)}
.mobile-menu .btn{margin-top:1.4rem;justify-content:center;font-size:1.1rem;padding:1rem}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:7rem clamp(1.2rem,6vw,5rem) 6rem;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(60% 60% at 72% 28%,rgba(87,200,77,.16),transparent 60%),
    radial-gradient(55% 50% at 12% 88%,rgba(46,125,50,.16),transparent 62%),
    linear-gradient(180deg,#0A0B09,#0B0C0A 60%)}
.hero-glow{position:absolute;inset:-15% -10% 0 -10%;z-index:0;pointer-events:none;
  background:radial-gradient(40% 50% at 70% 35%,rgba(123,224,107,.12),transparent 70%)}
.hero-media{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-media img{position:absolute;right:0;top:0;width:60%;height:100%;object-fit:cover;object-position:30% center;opacity:.62;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 60%);mask-image:linear-gradient(90deg,transparent 0,#000 60%)}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,12,10,.25),transparent 30%,rgba(11,12,10,.7) 88%)}
.hero-inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;width:100%}
.hero-title{font-size:clamp(2.9rem,10vw,8rem);font-weight:700;margin:.2rem 0 0}
.hero-title span{display:block;overflow:hidden}
.hero-sub{margin-top:1.6rem;max-width:46ch;font-size:clamp(1.05rem,2.1vw,1.4rem);color:var(--muted)}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem}
.hero-proof{display:flex;align-items:center;gap:.7rem;margin-top:2.4rem;color:var(--muted);font-size:.98rem}
.hero-proof strong{color:var(--ink)}
.hero-proof .stars{font-size:1.05rem}
.scroll-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:1;
  font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted-2)}
.scroll-hint span{display:inline-block;animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(8px);opacity:1}}

/* ---------- transformations ---------- */
.transformations{position:relative;padding:clamp(4rem,9vw,8rem) 0 2rem}
.journey-intro{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.2rem,6vw,5rem);
  text-align:center;margin-bottom:1rem}
.journey-h{font-size:clamp(2rem,6vw,4.2rem);margin:.2rem auto .9rem}
.journey-lead{max-width:54ch;margin:0 auto;color:var(--muted);font-size:1.08rem}
.journey-rail{position:fixed;right:clamp(.7rem,2vw,1.6rem);top:50%;transform:translateY(-50%);
  z-index:40;display:flex;flex-direction:column;gap:.85rem;opacity:0;transition:opacity .4s;pointer-events:none}
.journey-rail.active{opacity:1}
.rail-dot{width:9px;height:9px;border-radius:50%;background:var(--line-strong);
  transition:background .3s,transform .3s,box-shadow .3s}
.rail-dot.on{background:var(--green);transform:scale(1.35);box-shadow:0 0 14px rgba(87,200,77,.8)}

.scene{position:relative;min-height:100svh;display:grid;place-items:center;
  padding:clamp(4rem,8vh,7rem) clamp(1.2rem,6vw,5rem);overflow:hidden}
.scene-index{position:absolute;top:clamp(1rem,5vh,3rem);left:clamp(1rem,5vw,4rem);z-index:0;
  font-family:var(--display);font-weight:700;font-size:clamp(7rem,26vw,22rem);line-height:.8;
  color:rgba(244,246,242,.035);letter-spacing:-.04em;user-select:none}
.scene-index::before{content:attr(data-i)} /* generated content = not a contrast target */
.scene-inner{position:relative;z-index:1;width:100%;max-width:var(--maxw);
  display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.scene-inner--rev .scene-copy{order:2}
.scene-copy .scene-title{font-size:clamp(1.9rem,4.4vw,3.4rem);margin:.1rem 0 1.1rem}
.scene-text{color:var(--muted);font-size:1.08rem;max-width:42ch}
.scene-price{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-top:1.8rem;padding-top:1.1rem;border-top:1px solid var(--line);max-width:24rem}
.scene-price span{color:var(--muted);font-size:.95rem}
.scene-price strong{font-family:var(--display);font-size:1.55rem;color:var(--green-glow)}

/* before/after media + wipe */
.scene-media{--wipe:1;--ar:1.333;container-type:inline-size;position:relative;width:100%;
  aspect-ratio:var(--ar);max-height:80svh;max-width:calc(80svh * var(--ar));margin-inline:auto;
  border-radius:var(--r);overflow:hidden;border:1px solid var(--line-strong);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.4)}
html.js .scene-media{--wipe:0}
.scene[data-scene="0"] .scene-media{--ar:1.333}
.scene[data-scene="1"] .scene-media{--ar:1.5}
.scene[data-scene="2"] .scene-media{--ar:.75}
.scene[data-scene="3"] .scene-media{--ar:.75}
.ba-frame{position:absolute;inset:0}
.ba-frame img{width:100%;height:100%;object-fit:cover}
/* BEFORE is the base (left). AFTER reveals from the right edge, growing left as you scroll. */
.ba-frame--after{clip-path:inset(0 0 0 calc((1 - var(--wipe)) * 100%))}
.ba-tag{position:absolute;top:14px;font-size:.68rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;padding:.4rem .7rem;border-radius:999px;backdrop-filter:blur(6px)}
.ba-tag--before{left:14px;background:rgba(8,9,7,.6);color:var(--ink);border:1px solid var(--line)}
.ba-tag--after{right:14px;background:rgba(87,200,77,.92);color:#06140A}
.ba-divider{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--green-glow);
  transform:translateX(calc((1 - var(--wipe)) * 100cqw));box-shadow:0 0 18px 2px rgba(123,224,107,.7);will-change:transform}
.ba-handle{position:absolute;top:50%;left:50%;width:38px;height:38px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--green-glow);
  box-shadow:0 0 22px rgba(123,224,107,.8);display:grid;place-items:center}
.ba-handle::before,.ba-handle::after{content:"";position:absolute;width:0;height:0;
  border-top:5px solid transparent;border-bottom:5px solid transparent}
.ba-handle::before{left:8px;border-right:7px solid #06140A}
.ba-handle::after{right:8px;border-left:7px solid #06140A}

/* ---------- proof band ---------- */
.proof{padding:clamp(3rem,6vw,5rem) clamp(1.2rem,6vw,5rem);border-block:1px solid var(--line);
  background:linear-gradient(180deg,#0C0E0A,#0A0B08)}
.proof-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,4vw,3rem);text-align:center}
.proof-num{display:block;font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,6vw,4rem);
  color:var(--green-glow);line-height:1}
.proof-label{display:block;margin-top:.6rem;color:var(--muted);font-size:.9rem;letter-spacing:.02em}

/* ---------- section heads (centered site-wide) ---------- */
.section-head{max-width:var(--maxw);margin:0 auto clamp(2.5rem,5vw,4rem);padding:0 clamp(1.2rem,6vw,5rem);text-align:center}
.section-head h2{font-size:clamp(2rem,5.5vw,3.8rem)}
.section-lead{margin:1.1rem auto 0;max-width:52ch;color:var(--muted);font-size:1.08rem}

/* ---------- services ---------- */
.services{padding:clamp(4rem,8vw,7rem) 0}
.services-grid{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.2rem,6vw,5rem);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1px;
  background:var(--line-strong);border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden}
.svc{position:relative;background:var(--bg);padding:1.7rem 1.6rem;display:flex;flex-direction:column;gap:.55rem;
  transition:background .3s}
.svc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--green);
  transform:scaleY(0);transform-origin:top;transition:transform .3s}
.svc:hover{background:var(--surface)}
.svc:hover::before{transform:scaleY(1)}
.svc h3{font-size:1.18rem}
.svc p{color:var(--muted);font-size:.96rem;flex:1}
.svc-price{align-self:flex-start;margin-top:.4rem;font-weight:700;font-size:.92rem;color:var(--green-glow);
  background:rgba(87,200,77,.1);border:1px solid rgba(87,200,77,.25);padding:.3rem .7rem;border-radius:999px}

/* ---------- prices ---------- */
.prices{padding:clamp(4rem,8vw,7rem) 0;background:var(--bg-soft)}
.price-list{max-width:860px;margin:0 auto;padding:0 clamp(1.2rem,6vw,2rem)}
.price-row{display:flex;align-items:baseline;gap:.8rem;padding:1.05rem 0;border-bottom:1px solid var(--line)}
.price-name{font-weight:500;color:var(--ink)}
.price-dots{flex:1;border-bottom:1px dotted var(--line-strong);transform:translateY(-4px)}
.price-val{font-family:var(--display);font-weight:600;color:var(--green-glow);white-space:nowrap}
.price-note{max-width:860px;margin:1.6rem auto 0;padding:0 clamp(1.2rem,6vw,2rem);
  color:var(--muted-2);font-size:.9rem;text-align:center}
.prices-cta{display:flex;width:max-content;margin:2.4rem auto 0}

/* ---------- showcase / reels (click-to-play vertical videos) ---------- */
.showcase{position:relative;padding:clamp(4rem,8vw,7rem) 0;overflow:hidden}
.showcase::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 46% at 50% -4%,rgba(87,200,77,.10),transparent 60%)}
.showcase .section-head{position:relative;z-index:1}

.reel-track{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;
  padding:0 clamp(1.2rem,6vw,5rem);
  display:grid;grid-template-columns:repeat(3,minmax(0,300px));justify-content:center;
  gap:clamp(1.1rem,2.4vw,1.9rem)}
.reel{position:relative}

.reel-media{position:relative;aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;
  background:#06080c;border:1px solid var(--line-strong);isolation:isolate;
  box-shadow:0 30px 70px -38px rgba(0,0,0,.92),0 0 0 1px rgba(0,0,0,.4);
  transition:transform .45s var(--ease-out),border-color .35s,box-shadow .35s}
.reel-media:hover{transform:translateY(-6px);border-color:rgba(87,200,77,.45);
  box-shadow:0 46px 92px -42px rgba(0,0,0,.95),0 0 0 1px rgba(87,200,77,.3)}

.reel-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform .6s var(--ease-out),opacity .35s}
.reel-media:hover .reel-poster{transform:scale(1.045)}
.reel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background:#06080c;z-index:4;border-radius:inherit}

.reel-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,8,5,.42) 0%,transparent 20%,transparent 52%,rgba(6,8,5,.9) 100%)}

.reel-dur{position:absolute;top:12px;right:12px;z-index:2;font-family:var(--display);
  font-weight:600;font-size:.74rem;letter-spacing:.03em;color:var(--ink);
  padding:.26rem .58rem;border-radius:999px;
  background:rgba(6,8,5,.55);backdrop-filter:blur(6px);border:1px solid var(--line)}

.reel-info{position:absolute;left:14px;right:14px;bottom:15px;z-index:2;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4rem}
.reel-tag{font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#06140A;background:var(--green);padding:.32rem .6rem;border-radius:999px;
  box-shadow:0 6px 18px -8px rgba(87,200,77,.7)}
.reel-car{font-family:var(--display);font-weight:600;font-size:1.04rem;color:var(--ink);
  text-shadow:0 2px 14px rgba(0,0,0,.7)}

.reel-trigger{position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  background:transparent;border:0;cursor:pointer;color:#06140A;-webkit-tap-highlight-color:transparent}
.reel-play{position:relative;display:grid;place-items:center;width:66px;height:66px;border-radius:50%;
  background:rgba(87,200,77,.94);box-shadow:0 16px 38px -12px rgba(87,200,77,.75);
  transition:transform .25s var(--ease-out),box-shadow .3s}
.reel-play::after{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1px solid rgba(123,224,107,.55);animation:reelPulse 2.8s ease-out infinite}
.reel-play svg{margin-left:3px}
.reel-trigger:hover .reel-play{transform:scale(1.09);box-shadow:0 20px 46px -12px rgba(87,200,77,.9)}
.reel-trigger:active .reel-play{transform:scale(.97)}
.reel-trigger:focus-visible{outline:none}
.reel-trigger:focus-visible .reel-play{outline:3px solid var(--green-glow);outline-offset:4px}
@keyframes reelPulse{0%{transform:scale(1);opacity:.9}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}

/* playing: video covers the card, overlays fade out */
.reel-media.is-playing .reel-shade,
.reel-media.is-playing .reel-dur,
.reel-media.is-playing .reel-info,
.reel-media.is-playing .reel-trigger{opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s,visibility .3s}
.reel-media.is-playing .reel-poster{opacity:0}

.reel-hint{display:none}

/* ---------- reviews ---------- */
.reviews{padding:clamp(4rem,8vw,7rem) 0}
.reviews-score{display:flex;align-items:center;justify-content:center;gap:.8rem;margin-top:1.4rem}
.reviews-rate{font-family:var(--display);font-weight:700;font-size:2.4rem;color:var(--ink)}
.reviews-score .stars{font-size:1.4rem}
.reviews-count{color:var(--muted);font-size:.95rem}
.reviews-grid{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.2rem,6vw,5rem);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1.2rem}
.review{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.5rem 1.5rem 1.35rem;display:flex;flex-direction:column;gap:.75rem;transition:transform .3s,border-color .3s}
.review:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.review .stars{font-size:1.05rem}
.review blockquote{color:#E4E8E0;font-size:1rem;line-height:1.65}
.review figcaption{color:var(--muted);font-weight:600;font-size:.92rem;margin-top:auto}
.review figcaption::before{content:""}
.reviews-cta{display:flex;width:max-content;margin:2.4rem auto 0}

/* ---------- why ---------- */
.why{padding:clamp(4rem,8vw,7rem) 0;background:var(--bg-soft)}
.why-grid{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.2rem,6vw,5rem);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.6rem}
.why-item{border-top:2px solid var(--green);padding-top:1.2rem}
.why-n{font-family:var(--display);font-weight:700;color:var(--green-glow);font-size:.95rem;letter-spacing:.1em}
.why-item h3{font-size:1.22rem;margin:.6rem 0 .5rem}
.why-item p{color:var(--muted);font-size:.98rem}

/* ---------- contact ---------- */
.contact{padding:clamp(4rem,8vw,7rem) clamp(1.2rem,6vw,5rem)}
.contact-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1.05fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
.contact-info h2{font-size:clamp(2.2rem,5vw,3.6rem)}
.contact-lead{margin-top:1rem;color:var(--muted);max-width:38ch}
.contact-list{list-style:none;margin:2rem 0;display:grid;gap:1.3rem}
.contact-list li{display:flex;flex-direction:column;gap:.2rem}
.ci-label{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--green);font-weight:700}
.contact-list a:hover{color:var(--green-glow)}
.contact-list small{color:var(--muted-2)}
.contact-socials{display:flex;flex-wrap:wrap;gap:.6rem}
.contact-socials a{font-size:.85rem;font-weight:600;color:var(--muted);border:1px solid var(--line);
  padding:.45rem .9rem;border-radius:999px;transition:border-color .2s,color .2s}
.contact-socials a:hover{color:var(--green-glow);border-color:var(--green)}

.contact-form-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.5rem,3vw,2.4rem)}
.lead-form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field--full{grid-column:1/-1}
.field label{font-size:.84rem;font-weight:600;color:var(--muted)}
.field .opt{color:var(--muted-2);font-weight:400}
.field input,.field select,.field textarea{font-family:var(--body);font-size:1rem;color:var(--ink);
  background:var(--bg);border:1px solid var(--line-strong);border-radius:10px;padding:.8rem .9rem;
  transition:border-color .2s,box-shadow .2s;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(87,200,77,.18)}
.field textarea{resize:vertical;min-height:84px}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23A7AEA2'%3E%3Cpath d='M7 10L2 4h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-submit{grid-column:1/-1;justify-self:start;margin-top:.3rem;box-shadow:none}
.form-submit:hover{box-shadow:0 8px 22px -12px rgba(87,200,77,.55)}
.form-status{grid-column:1/-1;font-size:.92rem;min-height:1.2em}
.form-status.ok{color:var(--green-glow)}
.form-status.err{color:#ff7a6b}
.form-fineprint{grid-column:1/-1;color:var(--muted-2);font-size:.78rem}

.contact-map{max-width:var(--maxw);margin:clamp(2rem,4vw,3rem) auto 0}
.map-load{position:relative;width:100%;border:1px solid var(--line-strong);color:var(--ink);
  border-radius:var(--r);padding:2.1rem 1.4rem;display:flex;align-items:center;justify-content:center;gap:.75rem;
  cursor:pointer;font-family:var(--body);font-size:1rem;font-weight:600;overflow:hidden;
  background:
    repeating-linear-gradient(0deg,transparent 0 27px,rgba(244,246,242,.035) 27px 28px),
    repeating-linear-gradient(90deg,transparent 0 27px,rgba(244,246,242,.035) 27px 28px),
    radial-gradient(70% 130% at 50% 0,rgba(87,200,77,.10),transparent 60%),var(--surface);
  transition:border-color .25s,box-shadow .25s}
.map-load:hover{border-color:var(--green);box-shadow:0 0 0 1px rgba(87,200,77,.3)}
.map-pin{flex-shrink:0;width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--green);box-shadow:0 0 16px rgba(87,200,77,.55);display:grid;place-items:center}
.map-pin::after{content:"";width:8px;height:8px;border-radius:50%;background:#06140A}
.contact-map iframe{width:100%;height:380px;border:0;border-radius:var(--r);display:block}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);background:var(--bg-soft);padding:clamp(2.5rem,5vw,4rem) clamp(1.2rem,6vw,5rem) 1.5rem}
.footer-inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:2rem;
  justify-content:space-between;align-items:center}
.footer-brand{display:flex;align-items:center;gap:.8rem}
.footer-brand div{display:flex;flex-direction:column}
.footer-brand strong{font-family:var(--display)}
.footer-brand span{color:var(--muted);font-size:.85rem}
.footer-links{display:flex;flex-wrap:wrap;gap:1.3rem;font-size:.95rem;color:var(--muted)}
.footer-links a:hover{color:var(--ink)}
.footer-socials{display:flex;flex-wrap:wrap;gap:1rem;font-size:.88rem;color:var(--muted)}
.footer-socials a:hover{color:var(--green-glow)}
.footer-base{max-width:var(--maxw);margin:2rem auto 0;padding-top:1.4rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between;color:var(--muted-2);font-size:.82rem}
.footer-base a{color:var(--muted)}
.footer-base a:hover{color:var(--green-glow)}

/* ---------- thank-you + 404 (externalized for a strict CSP) ---------- */
.ty{min-height:100svh;display:grid;place-items:center;text-align:center;padding:2rem}
.ty-inner{max-width:560px}
.ty img{width:84px;height:84px;margin:0 auto 1.6rem}
.ty h1{font-size:clamp(2rem,7vw,3.4rem);margin-bottom:1rem}
.ty p{color:var(--muted);font-size:1.1rem;margin-bottom:2rem}
.ty .btn{margin:.4rem}
.nf{min-height:100svh;display:grid;place-items:center;text-align:center;padding:2rem}
.nf-inner{max-width:520px}
.nf .code{font-family:var(--display);font-weight:700;font-size:clamp(5rem,20vw,9rem);color:var(--green-glow);line-height:1}
.nf h1{font-size:clamp(1.6rem,5vw,2.4rem);margin:.4rem 0 1rem}
.nf p{color:var(--muted);margin-bottom:2rem}

/* ====================================================================
   Responsive
   ==================================================================== */
@media (max-width:900px){
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:flex}
  .mobile-menu[hidden]{display:none}
  .mobile-menu{display:flex}
  .hero{padding-left:1.5rem;padding-right:1.5rem}
  .hero-media img{width:100%;opacity:.3;object-position:center;
    -webkit-mask-image:linear-gradient(180deg,#000,transparent 72%);mask-image:linear-gradient(180deg,#000,transparent 72%)}
  .section-head,.journey-intro{padding-left:1.5rem;padding-right:1.5rem}
  .scene{padding-left:1.5rem;padding-right:1.5rem}
  .scene-inner{grid-template-columns:1fr;gap:1.8rem;max-width:560px}
  .scene-inner--rev .scene-copy{order:0}
  .scene-copy{order:2;text-align:left}
  .scene-media{order:1}
  .scene-price{max-width:none}
  .contact-grid{grid-template-columns:1fr}
  .proof-grid{grid-template-columns:repeat(2,1fr);gap:2rem 1rem}
  .journey-rail{display:none}
  /* reels become a swipeable, snapping carousel so each poster stays large + visible */
  .reel-track{display:flex;grid-template-columns:none;justify-content:flex-start;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:1.5rem;
    gap:1rem;padding:.4rem 1.5rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .reel-track::-webkit-scrollbar{display:none}
  .reel-track::after{content:"";flex:0 0 .5rem}
  .reel{flex:0 0 min(76%,320px);scroll-snap-align:center}
  .reel-hint{display:block;position:relative;z-index:1;margin:1.3rem auto 0;text-align:center;
    color:var(--muted-2);font-size:.74rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
}
@media (max-width:560px){
  .lead-form{grid-template-columns:1fr}
  .hero-actions .btn{flex:1}
  .scene-media{max-width:100%}
  .scene[data-scene] .scene-media{--ar:1.2}
  .scene[data-scene="2"] .scene-media,.scene[data-scene="3"] .scene-media{--ar:.82}
  .reel{flex-basis:82%}
}

/* ====================================================================
   Reduced motion — static, readable. Before/after shown side by side.
   ==================================================================== */
@media (prefers-reduced-motion: reduce){
  .grain,.scroll-hint{display:none}
  .scene{min-height:auto;padding-block:clamp(3rem,7vw,5rem)}
  .scene-media{aspect-ratio:auto;max-height:none;max-width:none;display:grid;grid-template-columns:1fr 1fr;
    background:var(--bg)}
  .ba-frame{position:relative;inset:auto}
  .ba-frame img{aspect-ratio:var(--ar,1.2);height:auto}
  .ba-frame--after{clip-path:none}
  .ba-divider{display:none}
  .hero-rise,.scene-copy>*{opacity:1!important;transform:none!important}
  .reel-play::after{animation:none;display:none}
  .reel-media:hover{transform:none}
  .reel-media:hover .reel-poster{transform:none}
}

/* ====================================================================
   FILM HERO — scroll scrubs the whole film; badge resolves & docks to nav.
   Reuses .intro-lottie / .intro-badge / .intro-shine for the badge.
   ==================================================================== */
.film-hero{position:relative;height:500vh;background:#06080c}
.film-stage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
}
.film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}

/* the badge that flies into the nav */
.film-logo{
  position:absolute;left:50%;top:50%;z-index:2;
  width:min(40vmin,400px);height:min(40vmin,400px);
  transform:translate(-50%,-50%) scale(.92);
  display:grid;place-items:center;border-radius:50%;overflow:hidden;
  opacity:0;visibility:hidden;filter:blur(14px);will-change:transform,opacity,filter;
}
.intro-lottie{position:absolute;inset:0}
.intro-badge{width:100%;height:100%;object-fit:contain}
.intro-shine{
  position:absolute;top:-20%;left:0;width:60%;height:140%;
  transform:translateX(-160%) skewX(-18deg);opacity:0;pointer-events:none;
  mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent,rgba(207,231,255,.85),transparent);
}

/* payoff copy: fades in over the clean final frame — centered hero */
.film-copy{
  position:relative;z-index:3;max-width:var(--maxw);margin:0 auto;width:100%;
  padding:0 clamp(1.2rem,4vw,2rem);text-align:center;
  display:flex;flex-direction:column;align-items:center;
  opacity:0;visibility:hidden;transform:translateY(24px);
}
.film-copy .hero-title{margin-inline:auto}
.film-copy .hero-sub{margin-left:auto;margin-right:auto;text-wrap:balance}
.film-copy .hero-actions{justify-content:center}
.film-copy .hero-proof{justify-content:center}

/* ---- scroll captions (Voice A): scrubbed in/out as the film plays ---- */
.film-caps{position:absolute;inset:0;z-index:3;pointer-events:none}
.film-cap{
  position:absolute;top:50%;z-index:3;max-width:min(40ch,40vw);
  opacity:0;visibility:hidden;will-change:transform,opacity,filter;
}
.fc-left{left:clamp(1.2rem,7vw,6.5rem);text-align:left}
.fc-right{right:clamp(1.2rem,7vw,6.5rem);text-align:right}
.fc-center{left:50%;text-align:center;max-width:min(22ch,86vw)}
.fc-label{font-family:var(--body);font-size:.78rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--green);margin-bottom:.7rem}
.fc-line{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.05;
  font-size:clamp(2rem,5.5vw,4rem);white-space:nowrap}
.fc-accent{font-family:var(--display);font-weight:600;letter-spacing:-.01em;line-height:1.08;
  font-size:clamp(1.5rem,3.6vw,2.8rem);color:var(--ink)}
.fc-center .fc-accent{color:var(--ink);opacity:.92}
/* opening intro: full hero-style header over the load screen (open-door car) */
.fc-intro{width:min(var(--maxw),92vw);max-width:none}
.fc-title{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.04;
  font-size:clamp(2.8rem,8.5vw,6.5rem)}
.fc-sub{margin:1.4rem auto 0;max-width:48ch;color:var(--muted);
  font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.5}
/* stronger backdrop so the big intro reads over the bright (undimmed) frame */
.fc-intro::before{inset:-45% -25%;border-radius:50%;
  background:radial-gradient(58% 60% at 50% 50%,rgba(5,7,6,.78),rgba(5,7,6,.45) 52%,transparent 78%);filter:blur(10px)}
/* legibility scrim behind captions during the bright frames */
.film-cap::before{content:"";position:absolute;inset:-1.2em -1.4em;z-index:-1;border-radius:50%;
  background:radial-gradient(70% 70% at 50% 50%,rgba(5,7,6,.62),transparent 75%);filter:blur(6px)}

/* scroll hint pinned to the viewport, not the tall section */
.film-hint{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:40}

/* hide the nav while the film runs; it returns when the logo docks */
html.film-mode .nav{opacity:0;pointer-events:none;transition:opacity .5s ease}
/* drop the mix-blend-mode grain during the scrub — it recomposites the whole viewport each frame */
html.film-mode .grain{display:none}
.film-video{will-change:transform;backface-visibility:hidden}

/* phones: the same scrub runs, but the desktop caption metrics don't fit —
   40vw side columns are ~150px at 390px wide, and the nowrap display lines
   overflow the frame at their desktop size floors. Wider boxes, smaller floors;
   the ::before scrim keeps them readable over the center of the frame. */
@media (max-width:767px){
  .film-cap{max-width:min(30ch,76vw)}
  .fc-center{max-width:min(22ch,88vw)}
  .fc-intro{max-width:none} /* the intro header keeps its full 92vw width */
  .fc-line{font-size:clamp(1.65rem,7.8vw,4rem)}
  .fc-title{font-size:clamp(2.1rem,10.5vw,6.5rem)}
  .fc-accent{font-size:clamp(1.3rem,6.6vw,2.8rem)}
  .fc-sub{font-size:1rem}
}

/* Motion JS unavailable (GSAP CDN blocked / failed): same static hero as the
   reduced-motion fallback. Needs a JS-set class — no media query can see a
   failed <script>, and without this the hero is 500vh of poster with no copy. */
html.no-motion .film-hero{height:auto}
html.no-motion .film-stage{position:relative;height:100svh;background:#06080c center/cover no-repeat;background-image:url("../assets/hero-gloss.webp")}
html.no-motion .film-video{display:none}
html.no-motion .film-copy{opacity:1;visibility:visible;transform:none}
html.no-motion .film-logo,html.no-motion .film-caps{display:none}

/* No-JS / reduced-motion: no scrub, so show the CLEAN hero still + copy and hide the
   (dirty frame-0) poster video. Uses @media(scripting:none) — NOT html.no-js — so JS
   users never hit it during the defer gap (that was the opening flash). */
@media (scripting: none){
  .film-hero{height:auto}
  .film-stage{position:relative;height:100svh;background:#06080c center/cover no-repeat;background-image:url("../assets/hero-gloss.webp")}
  .film-video{display:none}
  .film-copy{opacity:1;visibility:visible;transform:none}
  .film-logo,.film-caps{display:none}
}
@media (prefers-reduced-motion: reduce){
  .film-hero{height:auto}
  .film-stage{position:relative;height:100svh;background:#06080c center/cover no-repeat;background-image:url("../assets/hero-gloss.webp")}
  .film-video{display:none}
  .film-copy{opacity:1!important;visibility:visible!important;transform:none!important}
  .film-logo,.film-caps{display:none}
}

/* ====================================================================
   BOOKING MODAL — multi-step, premium (native <dialog>)
   Open/step transitions follow Emil Kowalski rules: transform+opacity+blur
   only, ease-out, <300ms, scale from .97 (never 0).
   ==================================================================== */
.book{
  border:none;padding:0;background:transparent;color:var(--ink);margin:auto;
  width:min(560px,calc(100vw - 2rem));
  opacity:0;transform:translateY(10px) scale(.97);
  transition:opacity .3s var(--ease-out),transform .3s var(--ease-out),
             overlay .3s var(--ease-out) allow-discrete,display .3s var(--ease-out) allow-discrete;
}
.book[open]{opacity:1;transform:none}
@starting-style{.book[open]{opacity:0;transform:translateY(10px) scale(.97)}}
.book::backdrop{background:rgba(4,6,5,.55);backdrop-filter:blur(6px);opacity:0;
  transition:opacity .3s var(--ease-out),overlay .3s var(--ease-out) allow-discrete,display .3s var(--ease-out) allow-discrete}
.book[open]::backdrop{opacity:1}
@starting-style{.book[open]::backdrop{opacity:0}}

.book-panel{position:relative;overflow:hidden auto;max-height:calc(100svh - 2rem);
  border-radius:var(--r);border:1px solid var(--line-strong);
  background:linear-gradient(180deg,var(--surface-2),var(--bg-soft));
  box-shadow:0 40px 120px -30px rgba(0,0,0,.85);
  padding:clamp(1.4rem,4vw,2.2rem)}
.book-close{position:absolute;top:.9rem;right:.9rem;z-index:2;display:grid;place-items:center;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.03);
  color:var(--muted);cursor:pointer;transition:transform .16s var(--ease-out),color .2s,border-color .2s}
.book-close:hover{color:var(--ink);border-color:var(--line-strong)}
.book-close:active{transform:scale(.94)}

.book-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem;padding-right:2.6rem}
.book-eyebrow{font-family:var(--body);font-size:.72rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--green);white-space:nowrap}
.book-progress{display:flex;gap:.4rem;flex:1}
.book-progress span{flex:1;height:4px;border-radius:999px;background:var(--line-strong);overflow:hidden;position:relative}
.book-progress span::after{content:"";position:absolute;inset:0;background:var(--green);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out)}
.book-progress span.is-on::after{transform:scaleX(1)}
.book-stepcount{font-size:.8rem;color:var(--muted-2);white-space:nowrap;font-variant-numeric:tabular-nums}

.book-form{position:relative}
.book-step{display:none}
.book-step.is-active{display:block;animation:bookIn .28s var(--ease-out) both}
.book-panel[data-dir="back"] .book-step.is-active{animation-name:bookInBack}
@keyframes bookIn{from{opacity:0;transform:translateX(16px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes bookInBack{from{opacity:0;transform:translateX(-16px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}

.book-title{font-size:clamp(1.4rem,3.4vw,1.9rem);margin-bottom:.3rem}
.book-help{color:var(--muted);font-size:.95rem;margin-bottom:1.2rem}
.chips-label{font-size:.84rem;font-weight:600;color:var(--muted);margin:1.1rem 0 .6rem}
.chips{display:flex;flex-wrap:wrap;gap:.55rem}
.chip{font-family:var(--body);font-size:.92rem;font-weight:600;color:var(--ink);
  background:var(--bg);border:1px solid var(--line-strong);border-radius:999px;padding:.6rem 1rem;cursor:pointer;
  transition:transform .16s var(--ease-out),border-color .2s,background .2s,color .2s}
.chip:hover{border-color:var(--muted-2)}
.chip:active{transform:scale(.96)}
.chip:focus-visible{outline:2px solid var(--green-glow);outline-offset:2px}
.chip.is-on{background:rgba(87,200,77,.14);border-color:var(--green);color:var(--green-glow)}

.book-form .field{margin-bottom:1rem}
.book-fine{color:var(--muted-2);font-size:.78rem;margin-top:.4rem}

/* the [hidden] attr must win over .btn/.book-foot display rules */
.book [hidden]{display:none}
.book-foot{display:flex;align-items:center;gap:1rem;margin-top:1.6rem}
.book-status{flex:1;font-size:.88rem;min-height:1.2em;color:var(--muted)}
.book-status.err{color:#ff7a6b}
.book-back{margin-right:auto}
.book-next,.book-submit{margin-left:auto}

.book-done{text-align:center}
.book-done.is-active{display:flex;flex-direction:column;align-items:center}
.book-check{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:rgba(87,200,77,.14);border:1px solid var(--green);color:var(--green-glow);margin-bottom:.8rem}

@media (max-width:480px){
  .book-head{flex-wrap:wrap}
  .book-foot{flex-wrap:wrap}
}
@media (prefers-reduced-motion: reduce){
  .book{transition:opacity .2s ease;transform:none}
  .book::backdrop{transition:opacity .2s ease}
  @starting-style{.book[open]{transform:none}}
  .book-step.is-active{animation:bookFade .2s ease both}
  @keyframes bookFade{from{opacity:0}to{opacity:1}}
}
html.book-open{overflow:hidden}

/* ====================================================================
   RESULTS — interactive before/after compare (.cmp namespace, distinct
   from the removed journey's dead .ba-* rules). Range input drives --pos;
   drag/keyboard both work. No-JS falls back to a static 50/50 split.
   ==================================================================== */
.results{position:relative;padding:clamp(4rem,8vw,7rem) 0;overflow:hidden}
.results::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 46% at 50% 0%,rgba(87,200,77,.09),transparent 60%)}
.results .section-head{position:relative;z-index:1}
.cmp-wrap{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.2rem,6vw,5rem)}
.cmp-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-bottom:1.8rem}
.cmp-tab{font-family:var(--body);font-weight:600;font-size:.92rem;color:var(--muted);
  background:var(--surface);border:1px solid var(--line-strong);padding:.55rem 1.15rem;border-radius:999px;
  cursor:pointer;transition:transform .16s var(--ease-out),color .2s,border-color .2s,background .2s}
.cmp-tab:hover{color:var(--ink)}
.cmp-tab:active{transform:scale(.96)}
.cmp-tab:focus-visible{outline:2px solid var(--green-glow);outline-offset:2px}
.cmp-tab.is-on{color:#06140A;background:var(--green);border-color:var(--green);font-weight:700}

.cmp{position:relative;width:100%;max-width:900px;margin:0 auto;aspect-ratio:var(--ar,4 / 3);
  border-radius:var(--r);overflow:hidden;border:1px solid var(--line-strong);isolation:isolate;
  background:#06080c;cursor:ew-resize;box-shadow:0 40px 90px -50px rgba(0,0,0,.95)}
.cmp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;
  -webkit-user-select:none;user-select:none}
.cmp-img-after{z-index:1}
.cmp-img-before{z-index:2;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cmp-tag{position:absolute;top:14px;z-index:3;pointer-events:none;font-size:.66rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;padding:.32rem .7rem;border-radius:999px;
  color:var(--ink);background:rgba(6,8,5,.6);backdrop-filter:blur(6px);border:1px solid var(--line)}
.cmp-tag-before{left:14px}
.cmp-tag-after{right:14px;color:#06140A;background:rgba(87,200,77,.92);border-color:transparent}
.cmp-divider{position:absolute;top:0;bottom:0;left:var(--pos);z-index:4;width:2px;
  background:var(--green);transform:translateX(-1px);pointer-events:none;
  box-shadow:0 0 18px rgba(87,200,77,.55)}
.cmp-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;
  width:46px;height:46px;border-radius:50%;background:var(--green);color:#06140A;
  box-shadow:0 10px 30px -8px rgba(87,200,77,.8)}
.cmp-range{position:absolute;inset:0;z-index:5;width:100%;height:100%;margin:0;padding:0;
  opacity:0;cursor:ew-resize;touch-action:pan-y}
.cmp:focus-within .cmp-handle{outline:3px solid var(--green-glow);outline-offset:3px}
.cmp-note{text-align:center;color:var(--muted-2);font-size:.86rem;margin-top:1.1rem}
/* no-JS: --pos stays at the inline 50%, so hide the (inert) range and keep a clean static split */
.no-js .cmp{cursor:default}
.no-js .cmp-range{display:none}

/* ====================================================================
   ABOUT / TEAM
   ==================================================================== */
.about{padding:clamp(4rem,8vw,7rem) clamp(1.2rem,6vw,5rem)}
.about-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.about-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;
  padding:clamp(2rem,4vw,3rem);border-radius:var(--r);border:1px solid var(--line-strong);
  background:radial-gradient(80% 70% at 50% 0%,rgba(87,200,77,.12),transparent 60%),var(--surface);
  box-shadow:0 40px 90px -55px rgba(0,0,0,.9)}
.about-logo{width:clamp(92px,14vw,130px);height:auto;margin-bottom:.4rem}
.about-card .stars{font-size:1.3rem}
.about-card strong{font-family:var(--display);font-size:1.15rem}
.about-card>span:last-child{color:var(--muted);font-size:.9rem}
.about-copy h2{font-size:clamp(2rem,5vw,3.4rem);margin:.2rem 0 1.1rem}
.about-copy p{color:var(--muted);margin-bottom:1rem;max-width:52ch}
.about-tags{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.4rem 0 1.9rem}
.about-tags span{font-size:.82rem;font-weight:600;color:var(--green-glow);
  background:rgba(87,200,77,.1);border:1px solid rgba(87,200,77,.25);padding:.4rem .85rem;border-radius:999px}
.about-cta{width:max-content}

/* ====================================================================
   FAQ — native <details> accordion (works without JS)
   ==================================================================== */
.faq{padding:clamp(4rem,8vw,7rem) 0;background:var(--bg-soft)}
.faq-list{max-width:820px;margin:0 auto;padding:0 clamp(1.2rem,6vw,2rem);display:flex;flex-direction:column;gap:.8rem}
.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  transition:border-color .25s}
.faq-item[open]{border-color:var(--line-strong)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;
  list-style:none;padding:1.15rem 1.4rem;font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline:2px solid var(--green-glow);outline-offset:-2px;border-radius:14px}
.faq-mark{position:relative;flex:0 0 auto;width:18px;height:18px}
.faq-mark::before,.faq-mark::after{content:"";position:absolute;top:50%;left:50%;background:var(--green);
  transform:translate(-50%,-50%);transition:transform .25s var(--ease-out),opacity .25s var(--ease-out)}
.faq-mark::before{width:14px;height:2px}
.faq-mark::after{width:2px;height:14px}
.faq-item[open] .faq-mark::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq-a{padding:0 1.4rem 1.3rem;color:var(--muted);line-height:1.65}
.faq-a p{max-width:64ch}
.faq-item[open] .faq-a{animation:faqReveal .35s var(--ease-out)}
@keyframes faqReveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---- responsive for the new sections ---- */
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr;gap:2rem}
  .about-media{max-width:420px;margin:0 auto}
  .cmp-wrap{padding-left:1.5rem;padding-right:1.5rem}
}
@media (prefers-reduced-motion: reduce){
  .cmp-tab{transition:color .2s,border-color .2s,background .2s}
  .faq-item[open] .faq-a{animation:none}
  .faq-mark::before,.faq-mark::after{transition:opacity .2s}
}