/* Layout concept: one cinematic journey. Film opens the page, the type does the talking,
   each scene breathes, and every scene ends one step from a call or the Brand Score. */
:root{
  --bg:#f5f3ef; --surface:#ffffff; --surface-2:#ece8e2;
  --fg:#14100e; --fg-2:#4a433d; --mute:#7a7169;
  --line:rgba(20,16,14,.11);
  --x:#ff5b1f; --x-ink:#c3400b; --on-x:#170b05; --x-soft:rgba(255,91,31,.12);
  --shadow:0 24px 60px rgba(20,16,14,.12);
  --cinema:#0b0908; --cinema-fg:#f2ece3; --cinema-mute:#a39788; --cinema-line:rgba(242,236,227,.13);
  --f-display:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-serif:"Instrument Serif","Times New Roman",Georgia,serif;
  --ease:cubic-bezier(.2,.7,.1,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0b0908; --surface:#151210; --surface-2:#1d1916; --fg:#f2ece3; --fg-2:#d2c8bc; --mute:#9d9184;
    --line:rgba(242,236,227,.11); --x-ink:#ff7341; --x-soft:rgba(255,91,31,.14); --shadow:0 30px 70px rgba(0,0,0,.55);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0b0908; --surface:#151210; --surface-2:#1d1916; --fg:#f2ece3; --fg-2:#d2c8bc; --mute:#9d9184;
  --line:rgba(242,236,227,.11); --x-ink:#ff7341; --x-soft:rgba(255,91,31,.14); --shadow:0 30px 70px rgba(0,0,0,.55);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg)}
body{background:var(--bg);color:var(--fg);font-family:var(--f-display);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .5s var(--ease),color .5s var(--ease)}
a{color:inherit}
::selection{background:var(--x);color:var(--on-x)}
:focus-visible{outline:2px solid var(--x);outline-offset:3px}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}

.wrap{padding-left:max(24px, env(safe-area-inset-left, 0px));padding-right:max(24px, env(safe-area-inset-right, 0px));max-width:1320px;margin-inline:auto}
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:32px;height:1px;background:var(--x)}
.serif{font-family:var(--f-serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.01em}
.accent{color:var(--x)}
.h2{font-weight:900;font-size:clamp(2.4rem,6vw,5.6rem);line-height:.92;letter-spacing:-.05em;text-transform:uppercase}
.lead{color:var(--fg-2);font-size:clamp(1rem,1.35vw,1.15rem);max-width:54ch}
.sec{padding-block:clamp(100px,16vh,190px)}
.sec-head{display:grid;gap:22px;max-width:920px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7em;font-weight:800;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:1.1em 1.7em;border:1px solid var(--line);color:var(--fg);background:transparent;cursor:pointer;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);white-space:nowrap}
.btn:hover{border-color:var(--fg)}
.btn.solid{background:var(--x);border-color:var(--x);color:var(--on-x)}
.btn.solid:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.btn.ghost-dark{color:var(--cinema-fg);border-color:rgba(242,236,227,.35)}
.btn.ghost-dark:hover{border-color:var(--cinema-fg)}
.btn.solid.on-dark:hover{background:var(--cinema-fg);border-color:var(--cinema-fg);color:var(--cinema)}
.btn .arr{transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:16px;padding-left:max(24px, env(safe-area-inset-left,0px));padding-right:max(24px, env(safe-area-inset-right,0px));display:flex;align-items:center;gap:22px;color:var(--cinema-fg);transition:background .45s var(--ease),color .45s var(--ease),border-color .45s;border-bottom:1px solid transparent}
.nav.solid{background:color-mix(in srgb, var(--bg) 88%, transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:var(--line);color:var(--fg)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-weight:800;letter-spacing:.22em;font-size:.72rem;margin-right:auto}
.brand svg{width:28px;height:28px;flex:none}
.nav-links{display:flex;gap:28px;font-size:.82rem;font-weight:600}
.nav-links a{text-decoration:none;opacity:.75;transition:opacity .3s}
.nav-links a:hover{opacity:1}
.score-pill{position:relative;display:inline-flex;align-items:center;gap:10px;padding:.7em 1.15em;border-radius:999px;border:1px solid var(--x);background:rgba(255,91,31,.1);color:inherit;font-weight:800;font-size:.74rem;letter-spacing:.08em;cursor:pointer;white-space:nowrap;transition:background .3s}
.score-pill:hover{background:var(--x);color:var(--on-x)}
.score-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--x);box-shadow:0 0 0 0 rgba(255,91,31,.6);animation:pulse 2.2s infinite}
.score-pill:hover .dot{background:var(--on-x)}
.score-pill small{font-size:.6rem;font-weight:800;letter-spacing:.12em;background:var(--x);color:var(--on-x);padding:.2em .5em;border-radius:999px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,91,31,.55)}70%{box-shadow:0 0 0 10px rgba(255,91,31,0)}100%{box-shadow:0 0 0 0 rgba(255,91,31,0)}}
.theme-btn{width:40px;height:40px;border:1px solid currentColor;border-color:color-mix(in srgb, currentColor 25%, transparent);background:transparent;cursor:pointer;display:grid;place-items:center;flex:none;color:inherit;border-radius:50%}
.theme-btn svg{width:17px;height:17px}
.theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:block}
:root[data-theme="dark"] .theme-btn .moon{display:none}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .theme-btn .sun{display:block} :root:not([data-theme="light"]) .theme-btn .moon{display:none} }
.nav .btn{padding:.9em 1.25em;font-size:.68rem}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;overflow:hidden;background:radial-gradient(70% 80% at 78% 45%, rgba(255,91,31,.16) 0%, rgba(255,91,31,0) 60%),var(--cinema);color:var(--cinema-fg);display:flex;align-items:center}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--cinema-line) 1px,transparent 1px),linear-gradient(90deg,var(--cinema-line) 1px,transparent 1px);background-size:64px 64px;opacity:.35;-webkit-mask-image:radial-gradient(60% 70% at 75% 50%,#000 0%,transparent 75%);mask-image:radial-gradient(60% 70% at 75% 50%,#000 0%,transparent 75%);pointer-events:none}
.hero-in{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;padding-top:calc(110px + env(safe-area-inset-top,0px));padding-bottom:clamp(60px,9vh,110px)}
.hero-copy{min-width:0}
.hero .eyebrow{color:var(--cinema-mute)}
.hero h1{font-weight:900;text-transform:uppercase;letter-spacing:-.055em;line-height:.82;margin-top:24px}
.hero h1 .l{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .l > span{display:inline-block}
.hero h1 .l1{font-size:clamp(3.6rem,8.6vw,9rem)}
.hero h1 .l1 .serif{color:var(--x);letter-spacing:-.03em;font-size:1.08em}
.hero h1 .l2{font-size:clamp(3rem,7.4vw,7.8rem)}
.hero-sub{max-width:44ch;font-size:clamp(1rem,1.3vw,1.15rem);color:#ddd3c7;margin-top:28px}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-proof{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:34px;font-size:.8rem;color:var(--cinema-mute)}
.hero-proof b{color:var(--cinema-fg);font-weight:800}

/* the folder scene */
.scene{position:relative;width:100%;max-width:620px;aspect-ratio:1/1;justify-self:end;perspective:1600px}
.rig{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(14deg) rotateY(-16deg)}
.folder{position:absolute;left:6%;right:6%;bottom:10%;height:54%;perspective:1100px;perspective-origin:50% 0}
.f-back{position:absolute;inset:0;border-radius:18px;background:linear-gradient(160deg,#2a221d,#17120f);box-shadow:0 40px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06)}
.f-tab{position:absolute;left:0;top:-30px;width:38%;height:44px;border-radius:14px 14px 0 0;background:#2a221d;display:flex;align-items:center;gap:10px;padding:0 16px 10px;font-size:.66rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--cinema-mute)}
.f-tab::after{content:"";position:absolute;right:-26px;bottom:0;width:30px;height:100%;background:#2a221d;clip-path:polygon(0 0,40% 0,100% 100%,0 100%)}
.f-tab i{width:9px;height:9px;border-radius:50%;background:var(--x);box-shadow:0 0 10px var(--x)}
.f-front{position:absolute;left:0;right:0;bottom:0;top:30%;border-radius:18px;transform-origin:50% 100%;background:linear-gradient(170deg,#ff6a2e 0%,#e8480f 100%);box-shadow:0 -6px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35);display:flex;flex-direction:column;justify-content:flex-end;padding:20px 24px;color:#1a0c05;z-index:6}
.f-front b{font-weight:900;font-size:clamp(1.3rem,2.4vw,2rem);letter-spacing:-.04em;text-transform:uppercase;line-height:.9}
.f-front small{font-size:.62rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;opacity:.7;margin-top:8px}
.f-front svg{position:absolute;right:22px;top:20px;width:34px;height:34px}
.item{position:absolute;border-radius:14px;background:#1c1714;border:1px solid rgba(242,236,227,.1);box-shadow:0 24px 50px rgba(0,0,0,.5);overflow:hidden;color:var(--cinema-fg);will-change:transform}
/* growth chart card */
.i-chart{left:6%;width:58%;top:8%;height:46%;padding:16px 18px;display:flex;flex-direction:column;gap:6px;z-index:3}
.i-chart .hd{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.i-chart .hd span{font-size:.6rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--cinema-mute)}
.i-chart .hd em{font-style:normal;font-size:.62rem;font-weight:800;color:#3ccf6e;background:rgba(60,207,110,.12);padding:.25em .55em;border-radius:999px}
.i-chart strong{font-size:clamp(1.4rem,2.6vw,2.1rem);font-weight:900;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.i-chart svg{flex:1;width:100%;min-height:0;overflow:visible}
.i-chart .grid line{stroke:rgba(242,236,227,.08)}
.i-chart .area{fill:url(#gArea)}
.i-chart .line{fill:none;stroke:var(--x);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.i-chart .bar{fill:rgba(242,236,227,.12)}
.i-chart .dot{fill:var(--x)}
.i-chart .halo{fill:var(--x);opacity:.25}
/* reel card */
.i-reel{right:5%;top:2%;width:26%;aspect-ratio:9/16;z-index:4}
.i-reel video,.i-reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.i-reel .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 30%,transparent 65%,rgba(0,0,0,.7))}
.i-reel .top{position:absolute;left:10px;top:9px;right:10px;display:flex;justify-content:space-between;font-size:.55rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.i-reel .rec{display:flex;align-items:center;gap:5px}
.i-reel .rec::before{content:"";width:6px;height:6px;border-radius:50%;background:#ff3b30}
.i-reel .bot{position:absolute;left:10px;right:10px;bottom:10px;display:grid;gap:5px}
.i-reel .bot b{font-size:.68rem;font-weight:800}
.i-reel .prog{height:2px;background:rgba(255,255,255,.25);border-radius:2px;overflow:hidden}
.i-reel .prog i{display:block;height:100%;width:0;background:#fff}
/* ad card */
.i-ad{left:50%;top:22%;width:34%;z-index:7;padding:10px}
.i-ad .who{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.i-ad .who span{width:22px;height:22px;border-radius:50%;background:var(--x);display:grid;place-items:center}
.i-ad .who b{font-size:.68rem;font-weight:800;display:block;line-height:1.1}
.i-ad .who small{font-size:.56rem;color:var(--cinema-mute)}
.i-ad .pic{aspect-ratio:4/3;border-radius:8px;background-size:cover;background-position:center}
.i-ad .row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px}
.i-ad .row small{font-size:.58rem;color:var(--cinema-mute);min-width:0}
.i-ad .row span{font-size:.58rem;font-weight:800;background:var(--cinema-fg);color:var(--cinema);padding:.45em .7em;border-radius:6px;white-space:nowrap}
/* chips */
.chip{position:absolute;z-index:7;display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:999px;background:rgba(28,23,20,.92);border:1px solid rgba(242,236,227,.12);box-shadow:0 14px 30px rgba(0,0,0,.45);font-size:.7rem;font-weight:700;white-space:nowrap;color:var(--cinema-fg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.chip i{width:8px;height:8px;border-radius:50%;background:#3ccf6e;box-shadow:0 0 8px #3ccf6e}
.chip.c1{left:2%;top:4%}
.chip.c2{right:0;top:44%}
.chip.c3{right:8%;top:92%}
.chip .up{color:#3ccf6e;font-weight:900}

/* folder loop: 10s, pure CSS. --H is the scene height (set by script) */
.scene{--H:560px;--T:10s}
.f-front,.i-chart,.i-reel,.i-ad,.chip,#bars rect,#chLine,#chArea,#chDot,#chHalo,#reelProg{animation-duration:var(--T);animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.2,.7,.1,1);animation-fill-mode:both}
.scene.paused *{animation-play-state:paused!important}
.f-front{animation-name:fFront}
@keyframes fFront{0%,8%{transform:rotateX(0)}18%,84%{transform:rotateX(-28deg)}94%,100%{transform:rotateX(0)}}
.i-chart{animation-name:iChart}
@keyframes iChart{0%,13%{transform:translate3d(0,calc(var(--H)*.2),-40px) rotate(-2deg);opacity:0}27%,82%{transform:translate3d(0,calc(var(--H)*-.3),0) rotate(-4deg);opacity:1}92%,100%{transform:translate3d(0,calc(var(--H)*.22),0) rotate(-2deg);opacity:0}}
.i-reel{animation-name:iReel}
@keyframes iReel{0%,15%{transform:translate3d(0,calc(var(--H)*.22),-20px) rotate(6deg);opacity:0}29%,81%{transform:translate3d(0,calc(var(--H)*-.34),0) rotate(5deg);opacity:1}91%,100%{transform:translate3d(0,calc(var(--H)*.22),0) rotate(6deg);opacity:0}}
.i-ad{animation-name:iAd}
@keyframes iAd{0%,17%{transform:translate3d(0,calc(var(--H)*.24),0) rotate(-4deg);opacity:0}31%,80%{transform:translate3d(0,calc(var(--H)*-.02),40px) rotate(-3deg);opacity:1}90%,100%{transform:translate3d(0,calc(var(--H)*.22),0) rotate(-4deg);opacity:0}}
#bars rect{transform-box:fill-box;transform-origin:50% 100%;animation-name:bar}
#bars rect:nth-child(2){animation-delay:.05s}#bars rect:nth-child(3){animation-delay:.1s}#bars rect:nth-child(4){animation-delay:.15s}
#bars rect:nth-child(5){animation-delay:.2s}#bars rect:nth-child(6){animation-delay:.25s}#bars rect:nth-child(7){animation-delay:.3s}#bars rect:nth-child(8){animation-delay:.35s}
@keyframes bar{0%,28%{transform:scaleY(0)}38%,84%{transform:scaleY(1)}90%,100%{transform:scaleY(0)}}
#chLine{stroke-dasharray:1;animation-name:draw;animation-timing-function:ease-in-out}
@keyframes draw{0%,30%{stroke-dashoffset:1}46%,86%{stroke-dashoffset:0}90%,100%{stroke-dashoffset:1}}
#chArea{animation-name:area}
@keyframes area{0%,36%{opacity:0}46%,84%{opacity:1}90%,100%{opacity:0}}
#chDot{transform-box:fill-box;transform-origin:center;animation-name:dot}
@keyframes dot{0%,45%{transform:scale(0)}49%,84%{transform:scale(1)}88%,100%{transform:scale(0)}}
#chHalo{transform-box:fill-box;transform-origin:center;animation-name:halo;animation-timing-function:ease-out}
@keyframes halo{0%,47%{transform:scale(0);opacity:0}48%{transform:scale(1);opacity:.35}58%{transform:scale(2.4);opacity:0}59%{transform:scale(1);opacity:.35}69%{transform:scale(2.4);opacity:0}70%,100%{transform:scale(0);opacity:0}}
.chip{animation-name:chip}
.chip.c2{animation-delay:.15s}.chip.c3{animation-delay:.3s}
@keyframes chip{0%,40%{transform:translateZ(80px) scale(.6);opacity:0}46%,80%{transform:translateZ(80px) scale(1);opacity:1}84%,100%{transform:translateZ(80px) scale(.6);opacity:0}}
#reelProg{animation-name:prog;animation-timing-function:linear}
@keyframes prog{0%,36%{width:0}82%{width:100%}83%,100%{width:0}}
.rig{transition:transform .9s cubic-bezier(.2,.7,.1,1)}
@media (prefers-reduced-motion:reduce){
  .f-front,.i-chart,.i-reel,.i-ad,.chip,#bars rect,#chLine,#chArea,#chDot,#chHalo,#reelProg{animation-delay:calc(var(--T) * -.6)!important;animation-play-state:paused!important}
}
.scene-note{position:absolute;right:6%;bottom:0;font-size:.58rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,236,227,.35)}
.scroll-cue{position:absolute;right:max(24px, env(safe-area-inset-right,0px));bottom:calc(28px + env(safe-area-inset-bottom,0px));z-index:2;writing-mode:vertical-rl;font-size:.64rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--cinema-mute);display:flex;align-items:center;gap:14px}
.scroll-cue::after{content:"";width:1px;height:56px;background:linear-gradient(var(--x),transparent)}

/* ---------- numbers + logos ---------- */
.numbers{padding-block:clamp(80px,12vh,140px) clamp(50px,8vh,90px)}
.num-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.num{padding:0 28px 0 0;display:grid;gap:10px;min-width:0}
.num + .num{border-left:1px solid var(--line);padding-left:28px}
.num strong{font-weight:900;font-size:clamp(3rem,7vw,6.2rem);letter-spacing:-.06em;line-height:.9;font-variant-numeric:tabular-nums}
.num strong em{font-style:normal;color:var(--x)}
.num > span{color:var(--fg-2);font-size:.95rem;max-width:20ch}
.logos{padding-block:30px 10px}
.logos-head{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.marquee{overflow:hidden;margin-top:28px;border-block:1px solid var(--line);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq 64s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.logo{flex:none;height:120px;padding:0 60px;display:grid;place-items:center;color:var(--fg);opacity:.62;transition:opacity .3s}
.logo:hover{opacity:1}
.logo img{height:var(--h,36px);width:auto;max-width:200px;object-fit:contain;display:none}
.logo[data-logo="kos"]{--h:50px}
.logo[data-logo="mdnt45"]{--h:24px}
.logo[data-logo="bummer"]{--h:32px}
.logo[data-logo="babystore"]{--h:42px}
.logo[data-logo="cocopup"]{--h:38px}
.logo[data-logo="arctic-hunter"]{--h:42px}
.logo[data-logo="undrgoods"]{--h:30px}
.logo[data-logo="zofeur"]{--h:32px}
.logo[data-logo="tuff"]{--h:28px}
.logo[data-logo="steppi"]{--h:28px}
.logo[data-logo="leinka"]{--h:46px}
.logo.has-img img{display:block}
.logo.has-img b{display:none}
.logo b{font-weight:900;font-size:1.45rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.logo b i{font-style:normal;font-weight:500;letter-spacing:.2em;font-size:.6em;margin-left:.4em;vertical-align:.25em}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .logo img{filter:invert(1)} }
:root[data-theme="dark"] .logo img{filter:invert(1)}

/* ---------- manifesto ---------- */
.manifesto .big{font-weight:800;font-size:clamp(1.9rem,4.6vw,4.4rem);line-height:1.06;letter-spacing:-.04em;max-width:20ch;margin-top:40px}
.manifesto .big .serif{color:var(--x)}

/* ---------- video-in-type ---------- */
.mask{position:relative;height:clamp(440px,86vh,880px);overflow:hidden;background:#000;isolation:isolate}
.mask video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mask-layer{position:absolute;inset:0;background:#000;color:#fff;mix-blend-mode:multiply;display:grid;place-items:center;padding:0 16px}
.mask-layer h2{font-weight:900;font-size:clamp(3.6rem,15.5vw,16rem);line-height:.8;letter-spacing:-.06em;text-transform:uppercase;text-align:center;will-change:transform}
.mask-cap{position:absolute;left:0;right:0;bottom:28px;z-index:2;text-align:center;color:var(--cinema-mute);font-size:.72rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase}

/* ---------- films ---------- */
.films-bar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-top:40px}
.chips-f{display:flex;gap:8px;flex-wrap:wrap}
.chipbtn{border:1px solid var(--line);background:transparent;padding:.6em 1.15em;font-weight:700;font-size:.8rem;cursor:pointer;border-radius:999px;transition:background .3s,color .3s,border-color .3s}
.chipbtn:hover{border-color:var(--fg)}
.chipbtn[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.films{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.verticals{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.film{position:relative;aspect-ratio:16/9;background:var(--cinema);overflow:hidden;cursor:pointer;border:0;padding:0;display:block;width:100%;color:var(--cinema-fg);text-align:left;font:inherit}
.film.wide{grid-column:1/-1;aspect-ratio:21/9}
.verticals .film{aspect-ratio:9/16}
.film img,.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.film:hover img,.film:hover video{transform:scale(1.04)}
.film .tag2{position:absolute;top:14px;left:14px;z-index:2;font-size:.6rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;background:rgba(11,9,8,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:.45em .75em}
.film .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:48px 20px 18px;background:linear-gradient(transparent,rgba(11,9,8,.85));display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.film .cap span{min-width:0}
.film .cap b{display:block;font-size:.62rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--x)}
.film .cap strong{display:block;font-size:clamp(.9rem,1.4vw,1.12rem);font-weight:800;line-height:1.2;margin-top:3px}
.film .play{width:46px;height:46px;border-radius:50%;background:rgba(242,236,227,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(242,236,227,.35);display:grid;place-items:center;flex:none;transition:background .3s,border-color .3s}
.film:hover .play{background:var(--x);border-color:var(--x)}
.film:hover .play path{fill:var(--on-x)}

/* ---------- work ---------- */
.stack{display:grid;gap:5vh;margin-top:56px}
.card{position:sticky;top:calc(96px + var(--i) * 16px);height:min(72vh,600px);min-height:440px;background:var(--surface);border:1px solid var(--line);display:grid;grid-template-columns:1.4fr 1fr;overflow:hidden;box-shadow:var(--shadow)}
.card .still{position:relative;overflow:hidden;min-width:0;background:var(--cinema);color:var(--cinema-fg)}
.card .still video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .name{position:absolute;left:6%;bottom:8%;font-weight:900;font-size:clamp(2.4rem,6.4vw,6rem);line-height:.82;letter-spacing:-.055em;text-transform:uppercase;z-index:2;text-shadow:0 6px 40px rgba(0,0,0,.35)}
.card .meta{padding:clamp(24px,3.4vw,48px);display:flex;flex-direction:column;gap:16px;min-width:0}
.card .cat{font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--x-ink)}
.card h3{font-weight:800;font-size:clamp(1.35rem,2.2vw,1.95rem);line-height:1.1;letter-spacing:-.03em}
.card p{color:var(--fg-2)}
.card .watch{align-self:flex-start;padding:.9em 1.2em;font-size:.66rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.chips span{font-size:.72rem;font-weight:600;padding:.45em .85em;border:1px solid var(--line);color:var(--fg-2)}
.stat{display:flex;align-items:baseline;gap:12px;border-top:1px solid var(--line);padding-top:14px}
.stat strong{font-weight:900;font-size:2.4rem;letter-spacing:-.05em;color:var(--x);font-variant-numeric:tabular-nums;line-height:1}
.stat span{font-size:.88rem;color:var(--fg-2)}
.also{margin-top:36px;color:var(--mute);font-size:.95rem}
.also b{color:var(--fg-2);font-weight:700}

/* ---------- services ---------- */
.svc{margin-top:56px;border-top:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:1.2fr 1fr auto;gap:24px;align-items:center;padding:34px 0;border-bottom:1px solid var(--line);transition:padding .5s var(--ease)}
.svc-row:hover{padding-left:16px}
.svc-row h3{font-weight:900;font-size:clamp(1.8rem,4.2vw,3.6rem);letter-spacing:-.05em;line-height:.95;text-transform:uppercase}
.svc-row h3 .serif{color:var(--x)}
.svc-row p{color:var(--fg-2);max-width:44ch}
.svc-row .tag{font-size:.6rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;padding:.5em .85em;background:var(--x);color:var(--on-x);white-space:nowrap}
.svc-row .tag.q{background:transparent;color:var(--mute);border:1px solid var(--line)}

/* ---------- score band ---------- */
.scoreband{background:var(--cinema);color:var(--cinema-fg);overflow:hidden;position:relative}
.scoreband .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;padding-block:clamp(80px,12vh,130px)}
.scoreband h2{font-weight:900;font-size:clamp(2.2rem,5.4vw,4.8rem);line-height:.92;letter-spacing:-.05em;text-transform:uppercase}
.scoreband h2 .serif{color:var(--x)}
.scoreband p{color:#cfc5b9;margin-top:18px;max-width:46ch}
.scoreband .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.dial{justify-self:end;width:min(320px,70vw);aspect-ratio:1;position:relative}
.dial svg{width:100%;height:100%;transform:rotate(-90deg)}
.dial circle{fill:none;stroke-width:6}
.dial .bg{stroke:var(--cinema-line)}
.dial .fg{stroke:var(--x);stroke-dasharray:578;stroke-dashoffset:578}
.dial b{position:absolute;inset:0;display:grid;place-items:center;font-weight:900;font-size:clamp(3.4rem,8vw,5.4rem);letter-spacing:-.06em}
.dial small{position:absolute;left:0;right:0;bottom:30%;text-align:center;font-size:.66rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--cinema-mute)}

/* ---------- fit ---------- */
.fit-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:56px;border-top:1px solid var(--line)}
.fit-col{padding:32px 44px 6px 0;min-width:0}
.fit-col + .fit-col{border-left:1px solid var(--line);padding-left:44px;padding-right:0}
.fit-col h3{font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;margin-bottom:14px}
.fit-col.yes h3{color:var(--x-ink)}
.fit-col.no h3{color:var(--mute)}
.fit-col ul{list-style:none;margin:0;padding:0}
.fit-col li{padding-block:17px;border-bottom:1px solid var(--line);font-size:clamp(1rem,1.5vw,1.22rem);font-weight:600;line-height:1.35;display:grid;grid-template-columns:30px 1fr;gap:8px}
.fit-col li i{font-style:normal;color:var(--x);font-weight:800}
.fit-col.no li{color:var(--mute);font-weight:500}
.fit-col.no li i{color:var(--mute)}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:60px;position:relative;border-top:1px solid var(--line)}
.steps .bar{position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--x);transform-origin:left}
.step{padding:30px 28px 0 0;display:grid;gap:12px;align-content:start;min-width:0}
.step + .step{padding-left:28px;border-left:1px solid var(--line)}
.step .n{font-weight:800;color:var(--x-ink);font-size:.8rem;letter-spacing:.14em}
.step h3{font-weight:800;font-size:clamp(1.25rem,2vw,1.7rem);letter-spacing:-.03em;line-height:1.08}
.step p{color:var(--fg-2);font-size:.95rem}

/* ---------- booking ---------- */
.book-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,6vw,96px);align-items:start}
.book-side{display:grid;gap:26px;position:sticky;top:110px}
.gets{display:grid;border-top:1px solid var(--line)}
.gets div{display:grid;grid-template-columns:36px 1fr;gap:10px;padding-block:16px;border-bottom:1px solid var(--line)}
.gets b{color:var(--x-ink);font-weight:800}
.gets strong{display:block;font-weight:700}
.gets span{color:var(--mute);font-size:.92rem}
.widget{background:var(--surface);border:1px solid var(--line);min-width:0;box-shadow:var(--shadow)}
.w-steps{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.w-steps div{padding:16px 18px;font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);display:flex;gap:10px;align-items:center;position:relative}
.w-steps div::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--x);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.w-steps div.on{color:var(--fg)}
.w-steps div.on::after{transform:scaleX(1)}
.w-steps i{font-style:normal;width:22px;height:22px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:.64rem;letter-spacing:0;flex:none}
.w-body{padding:clamp(22px,3.4vw,42px)}
.bform{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px}
.field{display:grid;gap:8px;min-width:0}
.field.full{grid-column:1/-1}
.field label,.legend{font-size:.64rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.bform input,.bform select{font-size:1rem;background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 0;border-radius:0;width:100%;transition:border-color .3s}
.bform select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--x) 50%),linear-gradient(135deg,var(--x) 50%,transparent 50%);background-position:calc(100% - 12px) 55%,calc(100% - 7px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:26px}
.bform select option{background:var(--surface);color:var(--fg)}
.bform input:focus,.bform select:focus{outline:none;border-bottom-color:var(--x)}
.bform input::placeholder{color:var(--mute)}
fieldset{border:0;padding:0;margin:0}
.choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.choices label{cursor:pointer;font-size:.84rem;letter-spacing:0;text-transform:none;font-weight:600;color:var(--fg);border:1px solid var(--line);padding:.6em 1em;transition:background .25s,border-color .25s,color .25s}
.choices input{position:absolute;opacity:0;width:1px;height:1px}
.choices label:has(input:checked){background:var(--x);border-color:var(--x);color:var(--on-x)}
.choices label:has(input:focus-visible){outline:2px solid var(--x);outline-offset:2px}
.form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.form-foot small{color:var(--mute);font-size:.8rem;max-width:36ch}
.err{color:var(--x-ink);font-size:.9rem;grid-column:1/-1}
.days{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px}
.day{flex:none;width:66px;padding:12px 0;border:1px solid var(--line);background:transparent;cursor:pointer;display:grid;gap:2px;text-align:center;transition:background .25s,border-color .25s,color .25s}
.day b{font-size:1.3rem;font-weight:800;letter-spacing:-.03em}
.day span{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.day:hover{border-color:var(--fg)}
.day.on{background:var(--x);border-color:var(--x);color:var(--on-x)}
.day.on span{color:var(--on-x)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;margin-top:18px}
.slot{padding:13px 0;border:1px solid var(--line);background:transparent;cursor:pointer;font-weight:700;font-size:.92rem;font-variant-numeric:tabular-nums;transition:background .25s,border-color .25s,color .25s}
.slot:hover{border-color:var(--fg)}
.slot.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.tzline{font-size:.8rem;color:var(--mute);margin-top:14px}
.pick-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.pick-head h3{font-weight:800;font-size:1.35rem;letter-spacing:-.02em}
.linkbtn{background:none;border:0;color:var(--mute);cursor:pointer;font-size:.8rem;text-decoration:underline;text-underline-offset:3px;padding:0}
.confirm-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.confirm-row p{font-weight:600}
.loading{color:var(--mute);padding:26px 0}
.done{display:grid;gap:16px}
.done .tick{width:56px;height:56px;border-radius:50%;background:var(--x);display:grid;place-items:center}
.done h3{font-weight:900;font-size:clamp(1.8rem,4vw,2.7rem);letter-spacing:-.04em;line-height:.95;text-transform:uppercase}
.done p{color:var(--fg-2)}
.when{border:1px solid var(--line);padding:16px 18px;display:grid;gap:4px}
.when strong{font-size:1.15rem;font-weight:800}
.when span{color:var(--mute);font-size:.88rem}
.preview-note{font-size:.8rem;color:var(--x-ink);border:1px dashed var(--x);padding:10px 12px}

/* ---------- faq ---------- */
.faq-list{margin-top:44px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:26px 0;display:flex;justify-content:space-between;gap:20px;font-weight:700;font-size:clamp(1.05rem,1.7vw,1.32rem)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{color:var(--x);flex:none;transition:transform .4s var(--ease);font-weight:400;font-size:1.4em;line-height:1}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq details p{padding:0 0 28px;color:var(--fg-2);max-width:66ch}

/* ---------- final ---------- */
.final{background:var(--cinema);color:var(--cinema-fg);padding-block:clamp(110px,18vh,200px)}
.final h2{font-weight:900;font-size:clamp(3rem,10vw,9.6rem);line-height:.84;letter-spacing:-.055em;text-transform:uppercase;max-width:11ch}
.final h2 .serif{color:var(--x)}
.qf{display:grid;grid-template-columns:1fr 1fr auto;border:1px solid var(--cinema-line);background:#141110;max-width:760px;margin-top:44px}
.qf input{border:0;background:transparent;padding:20px;font-size:1rem;min-width:0;border-right:1px solid var(--cinema-line);color:var(--cinema-fg)}
.qf input:focus{outline:none;background:rgba(255,91,31,.1)}
.qf input::placeholder{color:#8b8075}
.qf .btn{border:0;padding-inline:1.6em}
.qf-err{font-size:.86rem;color:#ff9a70;margin-top:10px}
.qf-note{font-size:.8rem;color:var(--cinema-mute);margin-top:14px;display:flex;flex-wrap:wrap;gap:6px 18px}
.qf-note span::before{content:"✓ ";color:var(--x);font-weight:800}
footer{background:var(--cinema);color:var(--cinema-mute);border-top:1px solid var(--cinema-line);padding-block:30px calc(110px + env(safe-area-inset-bottom,0px))}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;align-items:center;font-size:.82rem}
.foot .brand{color:var(--cinema-fg);margin-right:0}

/* ---------- modals ---------- */
.modal{position:fixed;inset:0;z-index:90;background:rgba(6,5,4,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;padding:calc(20px + env(safe-area-inset-top,0px)) max(16px, env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px))}
.sheet{background:var(--surface);color:var(--fg);width:min(980px,100%);max-height:calc(100vh - 40px);overflow:auto;position:relative;box-shadow:0 40px 100px rgba(0,0,0,.5);overscroll-behavior:contain}
.sheet-h{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px clamp(20px,3.4vw,40px) 0}
.sheet-h .eyebrow{font-size:.66rem}
.x-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:1.4rem;line-height:1;color:var(--fg);flex:none}
.x-btn:hover{border-color:var(--fg)}
.tabs{display:flex;gap:0;margin:16px clamp(20px,3.4vw,40px) 0;border-bottom:1px solid var(--line);overflow-x:auto}
.tab{background:none;border:0;padding:14px 18px;font-weight:800;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);cursor:pointer;position:relative;white-space:nowrap}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--x);transform:scaleX(0);transition:transform .4s var(--ease)}
.tab[aria-selected="true"]{color:var(--fg)}
.tab[aria-selected="true"]::after{transform:scaleX(1)}
.tool{padding:clamp(22px,3.4vw,40px)}
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,52px);align-items:start}
.qz-top{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.qz-bar{height:3px;background:var(--line);margin-top:14px;overflow:hidden}
.qz-bar i{display:block;height:100%;background:var(--x);width:0;transition:width .5s var(--ease)}
.qz-q{font-weight:800;font-size:clamp(1.35rem,2.4vw,2rem);letter-spacing:-.03em;line-height:1.15;margin-top:28px;max-width:28ch}
.qz-opts{display:grid;gap:10px;margin-top:24px;max-width:560px}
.qz-opt{text-align:left;background:transparent;border:1px solid var(--line);padding:16px 18px;cursor:pointer;font-weight:600;font-size:1rem;display:flex;justify-content:space-between;gap:16px;align-items:center;transition:border-color .25s,background .25s}
.qz-opt:hover{border-color:var(--fg)}
.qz-opt.on{background:var(--x);border-color:var(--x);color:var(--on-x)}
.qz-opt kbd{font:inherit;font-size:.72rem;color:var(--mute);border:1px solid var(--line);padding:.1em .45em}
.qz-opt.on kbd{color:var(--on-x)}
.qz-back{background:none;border:0;color:var(--mute);cursor:pointer;font-size:.82rem;text-decoration:underline;text-underline-offset:3px;padding:0;margin-top:18px}
.qz-intro h3{font-weight:900;font-size:clamp(1.8rem,3.4vw,2.8rem);letter-spacing:-.045em;line-height:.96;text-transform:uppercase}
.qz-intro ul{list-style:none;padding:0;margin:20px 0 26px;display:grid;gap:10px;color:var(--fg-2)}
.qz-intro li::before{content:"→ ";color:var(--x-ink);font-weight:800}
.score{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.ring{width:140px;height:140px;flex:none;position:relative}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:10}
.ring .bg{stroke:var(--line)}
.ring .fg{stroke:var(--x);transition:stroke-dashoffset 1.4s var(--ease)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-weight:900;font-size:2.5rem;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.band{display:grid;gap:6px;min-width:0;flex:1}
.band strong{font-weight:900;font-size:1.5rem;letter-spacing:-.03em;text-transform:uppercase}
.band span{color:var(--fg-2)}
.locked{position:relative}
.areas{display:grid;gap:12px}
.area{display:grid;grid-template-columns:100px 1fr 40px;gap:12px;align-items:center;font-size:.9rem;font-weight:600}
.area .bar{height:8px;background:var(--line)}
.area .bar i{display:block;height:100%;background:var(--x)}
.area b{text-align:right;font-variant-numeric:tabular-nums}
.locked.lock .areas,.locked.lock .fixes{filter:blur(6px);user-select:none;pointer-events:none}
.fixes{margin-top:22px;display:grid;border-top:1px solid var(--line)}
.fixes div{display:grid;grid-template-columns:30px 1fr;gap:8px;padding-block:13px;border-bottom:1px solid var(--line);font-size:.94rem}
.fixes b{color:var(--x-ink)}
.unlock{position:absolute;inset:-6px;display:grid;place-items:center;padding:8px}
.unlock-card{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);padding:22px;max-width:400px;width:100%;display:grid;gap:11px}
.unlock-card h4{font-weight:800;font-size:1.1rem;letter-spacing:-.02em}
.unlock-card p{color:var(--fg-2);font-size:.9rem}
.unlock-card input{border:0;border-bottom:1px solid var(--line);background:transparent;padding:10px 0;font-size:1rem;width:100%}
.unlock-card input:focus{outline:none;border-bottom-color:var(--x)}
.small-err{font-size:.84rem;color:var(--x-ink)}
.calc{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.calc label{display:grid;gap:8px;font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);min-width:0}
.calc .inp{display:flex;align-items:center;border-bottom:1px solid var(--line)}
.calc .inp span{font-size:.9rem;color:var(--mute);font-weight:600;letter-spacing:0;text-transform:none}
.calc input{border:0;background:transparent;padding:10px 6px;font-size:1.1rem;font-weight:700;width:100%;min-width:0;font-variant-numeric:tabular-nums}
.calc input:focus{outline:none}
.calc .inp:focus-within{border-bottom-color:var(--x)}
.cur{display:flex;gap:6px;margin-bottom:20px}
.outs{display:grid;border-top:1px solid var(--line)}
.out{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:baseline;padding-block:18px;border-bottom:1px solid var(--line)}
.out span{color:var(--fg-2);font-weight:600}
.out small{display:block;color:var(--mute);font-weight:500;font-size:.8rem}
.out strong{font-weight:900;font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.out.hl strong{color:var(--x)}
.calc-cta{margin-top:22px;display:grid;gap:12px}
.calc-cta p{color:var(--fg-2);font-size:.94rem}

/* film lightbox */
.lb{position:fixed;inset:0;z-index:95;background:rgba(6,5,4,.95);display:grid;place-items:center;padding:calc(64px + env(safe-area-inset-top,0px)) max(16px, env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px))}
.lb-in{display:grid;gap:16px;width:min(1200px,100%);justify-items:center}
.lb video{max-width:100%;max-height:72vh;background:#000;display:block}
.lb-bar{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;width:100%;color:var(--cinema-fg)}
.lb-bar b{display:block;font-size:.64rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--x)}
.lb-bar strong{font-size:1.15rem;font-weight:800}
.lb-bar .ask{display:flex;flex-wrap:wrap;gap:12px;align-items:center;color:#cfc5b9;font-size:.92rem}
.lb-close{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:calc(14px + env(safe-area-inset-right,0px));width:46px;height:46px;border-radius:50%;background:rgba(242,236,227,.12);border:0;color:var(--cinema-fg);font-size:1.6rem;line-height:1;cursor:pointer}
.lb-close:hover{background:var(--x);color:var(--on-x)}

/* ---------- toast + mobile bar ---------- */
.toast{position:fixed;left:50%;top:calc(86px + env(safe-area-inset-top,0px));z-index:99;translate:-50% 0;background:var(--fg);color:var(--bg);padding:12px 18px;font-weight:600;font-size:.9rem;box-shadow:var(--shadow);max-width:calc(100vw - 40px)}
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;padding:10px max(16px, env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px));background:color-mix(in srgb, var(--bg) 92%, transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .5s var(--ease)}
.mbar.show{transform:none}
.mbar .row{display:flex;gap:8px}
.mbar .btn{flex:1;padding-inline:.6em;font-size:.66rem}

/* ---------- chat ---------- */
.launcher{position:fixed;right:calc(22px + env(safe-area-inset-right,0px));bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:60;width:62px;height:62px;border-radius:50%;background:var(--x);border:0;cursor:pointer;display:grid;place-items:center;box-shadow:0 14px 34px rgba(255,91,31,.4);transition:transform .35s var(--ease)}
.launcher:hover{transform:scale(1.06)}
.launcher.away{transform:scale(0);pointer-events:none}
.launcher svg{width:26px;height:26px}
.badge{position:absolute;top:-2px;right:-2px;min-width:22px;height:22px;border-radius:11px;background:#e5252b;color:#fff;font-size:.72rem;font-weight:800;display:grid;place-items:center;border:2px solid var(--bg)}
.peek{position:fixed;right:calc(22px + env(safe-area-inset-right,0px));bottom:calc(98px + env(safe-area-inset-bottom,0px));z-index:60;width:min(300px,calc(100vw - 44px));display:grid;gap:8px;justify-items:end}
.peek .bub{background:var(--surface);color:var(--fg);border:1px solid var(--line);box-shadow:var(--shadow);padding:13px 16px;font-size:.94rem;font-weight:500;border-radius:16px 16px 4px 16px;cursor:pointer;line-height:1.45}
.peek .who{font-size:.72rem;color:var(--mute);font-weight:600}
.peek .x{background:var(--surface);border:1px solid var(--line);border-radius:50%;width:26px;height:26px;cursor:pointer;color:var(--mute);line-height:1}
.chat{position:fixed;right:calc(22px + env(safe-area-inset-right,0px));bottom:calc(98px + env(safe-area-inset-bottom,0px));z-index:65;width:min(390px,calc(100vw - 44px));height:min(620px,calc(100vh - 130px));background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.35);border-radius:20px;overflow:hidden}
.chat-h{background:var(--cinema);color:var(--cinema-fg);padding:18px}
.chat-h .row{display:flex;align-items:center;gap:12px}
.avs{display:flex}
.avs span{width:34px;height:34px;border-radius:50%;border:2px solid var(--cinema);display:grid;place-items:center;font-weight:800;font-size:.7rem;margin-left:-8px;color:var(--on-x)}
.avs span:first-child{margin-left:0}
.chat-h .who{flex:1;min-width:0}
.chat-h strong{display:block;font-size:1rem}
.chat-h small{font-size:.76rem;color:var(--cinema-mute);display:flex;align-items:center;gap:6px}
.chat-h small::before{content:"";width:7px;height:7px;border-radius:50%;background:#3ccf6e}
.chat-x{background:none;border:0;color:var(--cinema-mute);cursor:pointer;font-size:1.5rem;line-height:1;padding:2px 6px}
.msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:6px;overscroll-behavior:contain;background:var(--bg)}
.msg{max-width:84%;padding:10px 14px;font-size:.93rem;line-height:1.48;white-space:pre-wrap;word-wrap:break-word}
.msg.bot{background:var(--surface);border:1px solid var(--line);align-self:flex-start;border-radius:16px 16px 16px 4px}
.msg.me{background:var(--x);color:var(--on-x);align-self:flex-end;border-radius:16px 16px 4px 16px;font-weight:500}
.meta-line{font-size:.66rem;color:var(--mute);margin:0 4px 8px}
.meta-line.me{align-self:flex-end}
.typing{display:inline-flex;gap:4px;padding:14px 16px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--mute);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.opts{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;margin:2px 0 10px}
.opts button{background:var(--surface);border:1px solid var(--x);color:var(--x-ink);padding:.55em .95em;font-size:.84rem;font-weight:600;cursor:pointer;border-radius:999px;transition:background .25s,color .25s}
.opts button:hover{background:var(--x);color:var(--on-x)}
.chat-f{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:var(--surface)}
.chat-f input{flex:1;border:0;background:transparent;padding:10px 4px;font-size:.95rem;min-width:0}
.chat-f input:focus{outline:none}
.chat-f button{background:var(--x);border:0;width:40px;height:40px;border-radius:50%;cursor:pointer;display:grid;place-items:center;flex:none}
.chat-note{font-size:.64rem;color:var(--mute);text-align:center;padding:0 12px 10px;background:var(--surface)}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .hero-in{grid-template-columns:1fr;gap:10px}
  .scene{justify-self:center;max-width:520px;margin-top:10px}
  .hero{min-height:0}
  .nav-links{display:none}
  .num-grid{grid-template-columns:1fr 1fr;gap:36px 0}
  .num:nth-child(3){border-left:0;padding-left:0}
  .card{grid-template-columns:1fr;grid-template-rows:230px auto;height:auto;min-height:0;position:relative;top:auto}
  .svc-row{grid-template-columns:1fr;gap:10px}
  .svc-row .tag{justify-self:start}
  .scoreband .wrap{grid-template-columns:1fr}
  .dial{justify-self:start;width:min(240px,60vw)}
  .steps{grid-template-columns:1fr 1fr;gap:0}
  .step:nth-child(4){border-left:0;padding-left:0}
  .step:nth-child(n+4){padding-top:30px}
  .book-grid{grid-template-columns:1fr}
  .book-side{position:static}
  .tool-grid{grid-template-columns:1fr}
  .mbar{display:block}
  .launcher{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  .peek,.chat{bottom:calc(152px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:680px){
  .nav{gap:10px}
  .nav .btn,.brand span{display:none}
  .score-pill small{display:none}
  .scene{max-width:440px}
  .i-chart{padding:10px 12px;gap:3px}
  .i-chart .hd span{font-size:.46rem;letter-spacing:.14em;white-space:nowrap}
  .i-chart .hd em{font-size:.5rem}
  .i-chart strong{font-size:1.15rem}
  .i-reel .top{font-size:.44rem;left:7px;right:7px;top:6px}
  .i-reel .bot{left:7px;right:7px;bottom:7px}
  .i-reel .bot b{font-size:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .i-ad{padding:7px}
  .i-ad .who{gap:6px;margin-bottom:5px}
  .i-ad .who span{width:16px;height:16px}
  .i-ad .who b{font-size:.52rem}.i-ad .who small{font-size:.46rem}
  .i-ad .row{margin-top:5px}.i-ad .row small,.i-ad .row span{font-size:.46rem}
  .f-front{padding:12px 14px}
  .f-front b{font-size:1.05rem}
  .f-front small{font-size:.44rem;letter-spacing:.14em}
  .f-front svg{width:22px;height:22px;right:14px;top:12px}
  .f-tab{font-size:.5rem;height:32px;top:-22px;padding:0 10px 8px}
  .chip{font-size:.58rem;padding:6px 10px;gap:6px}
  .hero .cta .btn{flex:1}
  .hide-sm{display:none}
  .scroll-cue{display:none}
  .films{grid-template-columns:1fr}
  .film.wide{aspect-ratio:16/9}
  .verticals{gap:10px}
  .verticals .film .cap{padding:30px 10px 10px}
  .verticals .film .play{display:none}
  .fit-grid{grid-template-columns:1fr}
  .fit-col,.fit-col + .fit-col{padding:26px 0 0;border-left:0}
  .steps{grid-template-columns:1fr}
  .step,.step + .step{border-left:0;padding-left:0;padding-top:26px}
  .bform,.calc,.qf{grid-template-columns:1fr}
  .qf input{border-right:0;border-bottom:1px solid var(--cinema-line)}
  .w-steps div{padding:13px 10px;font-size:.58rem;letter-spacing:.1em}
  .w-steps div span{display:none}
  .logo{padding:0 34px;height:96px}
  .logo img{height:calc(var(--h,36px) * .8)}
  .chat{right:0;left:0;bottom:0;width:100%;height:calc(100% - 50px);border-radius:20px 20px 0 0}
  .sheet{max-height:calc(100vh - 20px)}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }

/* =====================================================================
   SITE-WIDE ADDITIONS (multi-page)
   ===================================================================== */
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--x);color:var(--on-x);padding:10px 14px;font-weight:800}
.skip:focus{left:12px;top:12px}

/* reveal on scroll — content is visible by default; script opts in */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}

/* ---------- nav: services dropdown + mobile drawer ---------- */
.nav-links{align-items:center}
.dd{position:relative}
.dd > button{background:none;border:0;cursor:pointer;font:inherit;font-weight:600;font-size:.82rem;opacity:.75;display:flex;align-items:center;gap:6px;padding:8px 0;color:inherit}
.dd > button:hover,.dd.open > button{opacity:1}
.dd > button svg{width:10px;height:10px;transition:transform .3s}
.dd.open > button svg{transform:rotate(180deg)}
.dd-menu{position:absolute;top:calc(100% + 12px);left:50%;translate:-50% 0;width:560px;background:var(--surface);color:var(--fg);border:1px solid var(--line);box-shadow:var(--shadow);padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:4px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s,transform .25s,visibility .25s}
.dd.open .dd-menu{opacity:1;visibility:visible;transform:none}
.dd-menu a{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:start;padding:14px;text-decoration:none;opacity:1;transition:background .2s}
.dd-menu a:hover{background:var(--surface-2)}
.dd-menu .ic{width:38px;height:38px;border-radius:10px;background:var(--x-soft);display:grid;place-items:center;color:var(--x-ink)}
.dd-menu .ic svg{width:18px;height:18px}
.dd-menu b{display:block;font-size:.9rem;font-weight:800;letter-spacing:-.01em}
.dd-menu small{display:block;font-size:.78rem;color:var(--mute);line-height:1.4;margin-top:2px}
.nav-links a.cur{opacity:1;color:var(--x)}
.burger{display:none;width:42px;height:42px;border-radius:50%;border:1px solid color-mix(in srgb, currentColor 25%, transparent);background:transparent;color:inherit;cursor:pointer;place-items:center}
.burger svg{width:18px;height:18px}
.drawer{position:fixed;inset:0;z-index:85;background:var(--bg);color:var(--fg);padding:calc(80px + env(safe-area-inset-top,0px)) max(24px, env(safe-area-inset-right,0px)) 32px max(24px, env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:6px;overflow:auto}
.drawer a{font-weight:900;font-size:1.9rem;letter-spacing:-.04em;text-transform:uppercase;text-decoration:none;padding:10px 0;border-bottom:1px solid var(--line)}
.drawer a small{display:block;font-size:.8rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--mute)}
.drawer .btn{margin-top:18px;font-size:.8rem}
.drawer-x{position:absolute;top:calc(18px + env(safe-area-inset-top,0px));right:max(20px, env(safe-area-inset-right,0px))}

/* ---------- page hero (service pages) ---------- */
.phero{position:relative;overflow:hidden;background:radial-gradient(70% 80% at 78% 45%, rgba(255,91,31,.16) 0%, rgba(255,91,31,0) 60%),var(--cinema);color:var(--cinema-fg)}
.phero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--cinema-line) 1px,transparent 1px),linear-gradient(90deg,var(--cinema-line) 1px,transparent 1px);background-size:64px 64px;opacity:.3;-webkit-mask-image:radial-gradient(60% 70% at 75% 50%,#000 0%,transparent 75%);mask-image:radial-gradient(60% 70% at 75% 50%,#000 0%,transparent 75%);pointer-events:none}
.phero-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:center;padding-top:calc(130px + env(safe-area-inset-top,0px));padding-bottom:clamp(70px,10vh,120px);min-height:min(100vh,940px)}
.phero .eyebrow{color:var(--cinema-mute)}
.phero h1{font-weight:900;font-size:clamp(2.8rem,6.4vw,6.4rem);line-height:.9;letter-spacing:-.055em;text-transform:uppercase;margin-top:24px}
.phero h1 .serif{color:var(--x);font-size:1.06em;letter-spacing:-.03em}
.phero .hero-sub{margin-top:26px}
.crumbs{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--cinema-mute);display:flex;gap:10px;align-items:center}
.crumbs a{text-decoration:none;opacity:.8}
.crumbs a:hover{opacity:1;color:var(--x)}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.badges span{font-size:.74rem;font-weight:700;padding:.5em .9em;border:1px solid var(--cinema-line);border-radius:999px;color:#ddd3c7;display:inline-flex;align-items:center;gap:8px}
.badges span i{width:7px;height:7px;border-radius:50%;background:var(--x)}

/* ---------- stat strip ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line)}
.stats > div{padding:30px 24px;display:grid;gap:6px;min-width:0}
.stats > div + div{border-left:1px solid var(--line)}
.stats strong{font-weight:900;font-size:clamp(2.2rem,4.6vw,3.8rem);letter-spacing:-.06em;line-height:.95;font-variant-numeric:tabular-nums}
.stats strong em{font-style:normal;color:var(--x)}
.stats span{color:var(--fg-2);font-size:.9rem;max-width:26ch}
.stats small{color:var(--mute);font-size:.72rem}

/* ---------- service cards (home) ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:56px}
.scard{position:relative;display:flex;flex-direction:column;gap:16px;min-height:440px;padding:clamp(24px,3vw,40px);background:var(--surface);border:1px solid var(--line);text-decoration:none;overflow:hidden;transition:border-color .4s var(--ease),transform .5s var(--ease)}
.scard:hover{border-color:var(--x);transform:translateY(-4px)}
.scard .num{font-size:.72rem;font-weight:800;letter-spacing:.22em;color:var(--x-ink)}
.scard h3{font-weight:900;font-size:clamp(1.9rem,3.6vw,3rem);letter-spacing:-.05em;line-height:.92;text-transform:uppercase;max-width:12ch}
.scard p{color:var(--fg-2);max-width:42ch}
.scard ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.scard li{font-size:.74rem;font-weight:600;padding:.45em .85em;border:1px solid var(--line);color:var(--fg-2)}
.scard .go{position:absolute;right:clamp(20px,2.6vw,34px);top:clamp(20px,2.6vw,34px);width:46px;height:46px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:background .3s,border-color .3s,transform .4s var(--ease)}
.scard:hover .go{background:var(--x);border-color:var(--x);transform:rotate(-45deg)}
.scard:hover .go path{stroke:var(--on-x)}
.scard .viz{position:absolute;right:-6%;bottom:-8%;width:56%;aspect-ratio:1;pointer-events:none;opacity:.95}
.scard.dark{background:var(--cinema);color:var(--cinema-fg);border-color:var(--cinema-line)}
.scard.dark p{color:#cfc5b9}.scard.dark li{color:#cfc5b9;border-color:var(--cinema-line)}.scard.dark .go{border-color:var(--cinema-line)}
.scard.dark .num{color:var(--x)}
.scard.orange{background:var(--x);color:var(--on-x);border-color:var(--x)}
.scard.orange p,.scard.orange .num{color:var(--on-x)}
.scard.orange li{color:var(--on-x);border-color:rgba(23,11,5,.25)}
.scard.orange .go{border-color:rgba(23,11,5,.3)}
.scard.orange:hover .go{background:var(--on-x)}.scard.orange:hover .go path{stroke:var(--x)}
.scard .viz-reels{display:flex;gap:10px;position:absolute;right:24px;bottom:-30px;transform:rotate(-8deg)}
.scard .viz-reels span{width:92px;aspect-ratio:9/16;border-radius:12px;background-size:cover;background-position:center;box-shadow:0 18px 40px rgba(0,0,0,.4);transition:transform .6s var(--ease)}
.scard .viz-reels span:nth-child(2){transform:translateY(-26px)}
.scard:hover .viz-reels span{transform:translateY(-14px)}
.scard:hover .viz-reels span:nth-child(2){transform:translateY(-44px)}
.scard .viz-browser{position:absolute;right:-30px;bottom:-30px;width:62%;aspect-ratio:16/11;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;transition:transform .6s var(--ease)}
.scard:hover .viz-browser{transform:translate(-8px,-10px)}
.scard .viz-browser i{display:block;height:22px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,#ff5f57 0 8px,transparent 8px 14px,#febc2e 14px 22px,transparent 22px 28px,#28c840 28px 36px,transparent 36px) 12px 7px/40px 8px no-repeat}
.scard .viz-browser span{display:block;position:absolute;inset:22px 0 0 0;background-size:cover;background-position:top center}
.scard .viz-chart{position:absolute;right:24px;bottom:24px;width:52%;height:46%}
.scard .viz-chart path{fill:none;stroke:var(--on-x);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease)}
.scard.orange.in .viz-chart path,.scard.orange:hover .viz-chart path{stroke-dashoffset:0}
.scard .viz-chart rect{fill:rgba(23,11,5,.12)}
.scard .viz-app{position:absolute;right:-20px;bottom:-24px;width:60%;aspect-ratio:16/11;border-radius:12px;background:#151210;border:1px solid var(--cinema-line);box-shadow:0 30px 60px rgba(0,0,0,.5);display:grid;grid-template-columns:22% 1fr;overflow:hidden;transition:transform .6s var(--ease)}
.scard:hover .viz-app{transform:translate(-8px,-10px)}
.scard .viz-app aside{background:#0f0c0b;border-right:1px solid var(--cinema-line);display:grid;align-content:start;gap:8px;padding:12px 8px}
.scard .viz-app aside i{display:block;height:7px;border-radius:4px;background:rgba(242,236,227,.12)}
.scard .viz-app aside i:first-child{background:var(--x);width:60%}
.scard .viz-app div{padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start}
.scard .viz-app div b{display:block;height:38px;border-radius:8px;background:rgba(242,236,227,.07)}
.scard .viz-app div b:first-child{grid-column:1/-1;height:60px;background:linear-gradient(90deg,rgba(255,91,31,.4),rgba(255,91,31,.08))}

/* ---------- result cards ---------- */
.rfilter{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.rcard{position:relative;background:var(--surface);border:1px solid var(--line);padding:22px 22px 18px;display:flex;flex-direction:column;gap:14px;min-width:0;transition:border-color .3s,transform .4s var(--ease)}
.rcard:hover{border-color:var(--x);transform:translateY(-3px)}
.rcard .top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.rcard .plat{display:inline-flex;align-items:center;gap:8px;font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2)}
.rcard .plat i{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-style:normal;font-size:.62rem;font-weight:900;color:#fff}
.plat.meta i{background:#0866ff}.plat.shopify i{background:#5e8e3e}.plat.google i{background:#ea4335}.plat.tiktok i{background:#111}.plat.amazon i{background:#ff9900;color:#111}
.rcard .when{font-size:.72rem;color:var(--mute);font-weight:600;white-space:nowrap}
.rcard .big{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rcard .big strong{font-weight:900;font-size:clamp(2.6rem,4.4vw,3.6rem);letter-spacing:-.06em;line-height:.9;color:var(--x);font-variant-numeric:tabular-nums}
.rcard .big span{font-size:.8rem;font-weight:700;color:var(--fg-2);text-transform:uppercase;letter-spacing:.12em}
.rcard dl{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin:0;padding-top:14px;border-top:1px solid var(--line)}
.rcard dl div{min-width:0}
.rcard dt{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.rcard dd{margin:2px 0 0;font-weight:800;font-size:1rem;font-variant-numeric:tabular-nums;letter-spacing:-.01em;overflow-wrap:anywhere}
.rcard .note{font-size:.78rem;color:var(--fg-2)}
.rcard .proof{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;cursor:pointer;font-size:.76rem;font-weight:700;color:var(--fg);text-align:left;margin-top:auto}
.rcard .proof img{width:64px;height:40px;object-fit:cover;object-position:top;border:1px solid var(--line);border-radius:4px;filter:grayscale(.2)}
.rcard .proof:hover{color:var(--x-ink)}
.rcard.feature{grid-row:span 2;background:var(--cinema);color:var(--cinema-fg);border-color:var(--cinema-line)}
.rcard.feature .plat,.rcard.feature .note{color:#cfc5b9}
.rcard.feature dl{border-color:var(--cinema-line)}
.rcard.feature .big strong{font-size:clamp(4rem,7vw,6rem)}
.rcard.feature .proof{color:var(--cinema-fg)}
.rcard.feature .proof img{width:100%;height:auto;max-height:280px;border-color:var(--cinema-line)}
.rcard.feature .proof{flex-direction:column;align-items:stretch}
.disclaim{font-size:.8rem;color:var(--mute);margin-top:22px;max-width:80ch}

/* sparkline in shopify cards */
.spark{height:46px;width:100%}
.spark path{fill:none;stroke:var(--x);stroke-width:2}
.spark .a{fill:var(--x-soft);stroke:none}

/* ---------- browser mockups (websites) ---------- */
.browser{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.browser .bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:#ff5f57}
.browser .bar i:nth-child(2){background:#febc2e}.browser .bar i:nth-child(3){background:#28c840}
.browser .bar span{margin-left:12px;flex:1;max-width:320px;height:20px;border-radius:6px;background:var(--surface);border:1px solid var(--line);font-size:.66rem;color:var(--mute);display:flex;align-items:center;padding:0 10px;gap:6px;font-weight:600;overflow:hidden;white-space:nowrap}
.browser .bar span::before{content:"";width:8px;height:8px;border:1.5px solid var(--mute);border-radius:2px}
.browser .view{position:relative;aspect-ratio:16/10;overflow:hidden;background:#000}
.mock{position:absolute;inset:0;display:flex;flex-direction:column;font-family:var(--f-display)}

/* hero browser that cycles sites */
.bstage{position:relative;width:100%;max-width:640px;justify-self:end}
.bstage .browser{transform:perspective(1600px) rotateY(-10deg) rotateX(6deg);transform-origin:70% 50%;border-color:var(--cinema-line);background:#141110}
.bstage .browser .bar{background:#1b1714;border-color:var(--cinema-line)}
.bstage .browser .bar span{background:#0f0c0b;border-color:var(--cinema-line);color:#a39788}
.bstage .slide{position:absolute;inset:0;opacity:0;transform:scale(1.03);transition:opacity .9s var(--ease),transform 1.2s var(--ease)}
.bstage .slide.on{opacity:1;transform:none}
.bstage .dots{display:flex;gap:8px;justify-content:center;margin-top:18px}
.bstage .dots button{width:30px;height:4px;border:0;border-radius:4px;background:rgba(242,236,227,.2);cursor:pointer;padding:0}
.bstage .dots button.on{background:var(--x)}
.bstage .phone{position:absolute;left:-8%;bottom:-10%;width:26%;aspect-ratio:9/19;border-radius:24px;background:#0b0908;border:6px solid #221c18;box-shadow:0 30px 60px rgba(0,0,0,.55);overflow:hidden}
.bstage .phone .slide{transition-delay:.12s}

/* mock sites (stylised recreations) */
.m-sarv{background:#0d1310;color:#efe8de}
.m-zeeki{background:#f4efe6;color:#2a2118}
.m-minus{background:#0a0d12;color:#e9eef5}
.m-aloud{background:#0b0907;color:#f1e5c8}
.m-pinn{background:#0d1424;color:#eaf0ff}
.m-getset{background:#f5f8ff;color:#0e1a3a}
.mock .mnav{display:flex;align-items:center;justify-content:space-between;padding:4% 5% 0;font-size:clamp(.42rem,.9vw,.66rem);font-weight:700;letter-spacing:.18em;text-transform:uppercase;gap:8px}
.mock .mnav .lg{font-weight:900;letter-spacing:.3em;font-size:1.2em}
.mock .mnav .lk{display:flex;gap:1.6em;opacity:.7}
.mock .mhero{position:relative;flex:1;margin:3% 5% 5%;border-radius:8px;overflow:hidden;background-size:cover;background-position:center}
.mock .mhero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),transparent 65%)}
.mock .mcopy{position:absolute;left:6%;bottom:12%;z-index:2;max-width:60%}
.mock .mcopy small{display:block;font-size:clamp(.38rem,.8vw,.58rem);letter-spacing:.24em;text-transform:uppercase;font-weight:700;opacity:.85}
.mock .mcopy b{display:block;font-size:clamp(1rem,3vw,2.3rem);line-height:.92;letter-spacing:-.04em;font-weight:900;text-transform:uppercase;margin-top:6px;color:#fff}
.mock .mcopy em{display:inline-block;margin-top:10px;font-style:normal;font-size:clamp(.38rem,.8vw,.58rem);font-weight:800;letter-spacing:.18em;text-transform:uppercase;padding:.8em 1.3em;background:#fff;color:#111}
.m-zeeki .mcopy em{background:#b08a3a;color:#fff}
.m-sarv .mcopy em{background:#e6ddc8;color:#0d1310}
.m-minus .mcopy em{background:#5ad1ff;color:#03131c}
.m-aloud .mcopy em{background:#c9a24a;color:#1a1307}
.m-pinn .mcopy em{background:#6b8bff;color:#fff}
.m-getset .mhero{background:linear-gradient(135deg,#1d4ed8,#0ea5e9)}
.m-getset .mhero::after{display:none}
.m-getset .mcopy{left:6%;top:16%;bottom:auto;max-width:80%}
.m-getset .zip{display:flex;gap:6px;margin-top:10px}
.m-getset .zip span{background:#fff;border-radius:6px;padding:.7em 1em;font-size:clamp(.38rem,.8vw,.58rem);color:#475569;flex:1;max-width:160px}
.m-getset .zip i{font-style:normal;background:#0e1a3a;color:#fff;border-radius:6px;padding:.7em 1em;font-size:clamp(.38rem,.8vw,.58rem);font-weight:800}
.m-getset .plans{position:absolute;left:6%;right:6%;bottom:10%;display:grid;grid-template-columns:repeat(3,1fr);gap:6%}
.m-getset .plans div{background:#fff;border-radius:8px;padding:8% 10%;color:#0e1a3a;font-size:clamp(.38rem,.8vw,.58rem);font-weight:700;box-shadow:0 10px 20px rgba(14,26,58,.25)}
.m-getset .plans div b{display:block;font-size:1.8em;font-weight:900;color:#1d4ed8}
.m-pinn .mhero{background:radial-gradient(80% 90% at 70% 30%, #2a3f7a 0%, #0d1424 70%)}
.m-pinn .mhero::after{background:none}
.m-pinn .peak{position:absolute;right:6%;bottom:0;width:55%;height:70%;background:linear-gradient(180deg,#6b8bff,#2a3f7a);clip-path:polygon(0 100%,38% 22%,52% 44%,70% 0,100% 100%);opacity:.85}

/* website cards */
.wgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:56px}
.wcard{display:flex;flex-direction:column;gap:18px;min-width:0}
.wcard .browser{transition:transform .6s var(--ease)}
.wcard:hover .browser{transform:translateY(-6px)}
.wcard .wmeta{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.wcard h3{font-weight:900;font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:-.04em;line-height:1}
.wcard p{color:var(--fg-2);margin-top:8px;max-width:48ch}
.wcard .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.wcard .tags span{font-size:.7rem;font-weight:700;padding:.4em .8em;border:1px solid var(--line);color:var(--fg-2)}
.wcard .plat-tag{font-size:.64rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--x-ink);white-space:nowrap}
.wcard.wide{grid-column:1/-1}
.wcard.wide .browser .view{aspect-ratio:21/9}

/* ---------- reels hero (AI content) ---------- */
.rstage{position:relative;width:100%;max-width:600px;aspect-ratio:1/1;justify-self:end}
.rstage .rc{position:absolute;width:38%;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#000;border:1px solid var(--cinema-line);box-shadow:0 40px 80px rgba(0,0,0,.6);transition:transform 1.2s var(--ease),opacity 1.2s var(--ease),filter 1.2s var(--ease)}
.rstage .rc video,.rstage .rc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rstage .rc .lbl{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;display:flex;justify-content:space-between;gap:6px;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.rstage .rc::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 60%,rgba(0,0,0,.7));z-index:1}
.rstage .p0{left:31%;top:6%;z-index:3;transform:none}
.rstage .p1{left:2%;top:16%;z-index:2;transform:rotate(-8deg) scale(.86);filter:brightness(.6)}
.rstage .p2{left:60%;top:16%;z-index:2;transform:rotate(8deg) scale(.86);filter:brightness(.6)}
.rstage .prompt{position:absolute;left:4%;right:4%;bottom:2%;z-index:5;background:rgba(21,18,16,.92);border:1px solid var(--cinema-line);border-radius:14px;padding:14px 16px;display:flex;gap:12px;align-items:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 20px 40px rgba(0,0,0,.5)}
.rstage .prompt i{width:30px;height:30px;border-radius:8px;background:var(--x);display:grid;place-items:center;flex:none}
.rstage .prompt span{font-size:.82rem;color:#e8dfd3;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.rstage .prompt span::after{content:"";display:inline-block;width:2px;height:1em;background:var(--x);margin-left:2px;vertical-align:-2px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.rstage .prompt b{font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#3ccf6e;white-space:nowrap}

/* ---------- ads dashboard hero (performance) ---------- */
.dash{position:relative;width:100%;max-width:620px;justify-self:end;background:#141110;border:1px solid var(--cinema-line);border-radius:18px;box-shadow:0 40px 90px rgba(0,0,0,.6);padding:18px;display:grid;gap:14px;transform:perspective(1600px) rotateY(-9deg) rotateX(5deg)}
.dash .dh{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.dash .ptabs{display:flex;gap:6px;flex-wrap:wrap}
.dash .ptabs button{background:transparent;border:1px solid var(--cinema-line);color:#cfc5b9;border-radius:999px;padding:.45em .85em;font-size:.7rem;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px}
.dash .ptabs button i{width:8px;height:8px;border-radius:50%}
.dash .ptabs button.on{background:var(--cinema-fg);color:var(--cinema);border-color:var(--cinema-fg)}
.dash .live{font-size:.64rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#3ccf6e;display:flex;align-items:center;gap:6px}
.dash .live::before{content:"";width:7px;height:7px;border-radius:50%;background:#3ccf6e;box-shadow:0 0 8px #3ccf6e}
.dash .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dash .kpis div{background:#1c1714;border:1px solid var(--cinema-line);border-radius:12px;padding:12px 14px;min-width:0}
.dash .kpis small{display:block;font-size:.58rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--cinema-mute)}
.dash .kpis b{display:block;font-size:clamp(1.2rem,2.4vw,1.9rem);font-weight:900;letter-spacing:-.04em;margin-top:4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.dash .kpis b.up{color:var(--x)}
.dash .chart{background:#1c1714;border:1px solid var(--cinema-line);border-radius:12px;padding:12px 14px 8px}
.dash .chart svg{width:100%;height:150px;display:block}
.dash .chart .g line{stroke:rgba(242,236,227,.07)}
.dash .chart .rev{fill:none;stroke:var(--x);stroke-width:2.5;stroke-linejoin:round}
.dash .chart .spd{fill:none;stroke:#a39788;stroke-width:1.5;stroke-dasharray:4 4}
.dash .chart .ar{fill:url(#dArea)}
.dash .chart .lg{display:flex;gap:14px;font-size:.62rem;color:var(--cinema-mute);font-weight:700;margin-bottom:6px}
.dash .chart .lg i{display:inline-block;width:14px;height:2px;background:var(--x);vertical-align:3px;margin-right:6px}
.dash .chart .lg i.s{background:#a39788}
.dash .foot{display:flex;justify-content:space-between;font-size:.62rem;color:var(--cinema-mute);font-weight:600;gap:10px}

/* platform grid */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.pcell{padding:28px 24px 30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:14px;min-width:0;transition:background .35s}
.pcell:hover{background:var(--surface)}
.pcell .pl{display:flex;align-items:center;gap:12px}
.pcell .pl i{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-weight:900;color:#fff;font-size:1rem}
.pcell h3{font-weight:900;font-size:1.5rem;letter-spacing:-.04em}
.pcell p{color:var(--fg-2);font-size:.94rem}
.pcell ul{list-style:none;padding:0;margin:auto 0 0;display:grid;gap:7px;font-size:.86rem;color:var(--fg-2)}
.pcell li::before{content:"— ";color:var(--x)}

/* track tabs (ecommerce / local) */
.track-tabs{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:5px;margin-top:40px;background:var(--surface)}
.track-tabs button{border:0;background:transparent;padding:.85em 1.5em;border-radius:999px;font-weight:800;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;color:var(--mute)}
.track-tabs button[aria-selected="true"]{background:var(--fg);color:var(--bg)}
.track{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);margin-top:40px;align-items:start}
.track h3{font-weight:900;font-size:clamp(1.8rem,3.4vw,2.8rem);letter-spacing:-.05em;line-height:.95;text-transform:uppercase}
.track p{color:var(--fg-2);margin-top:16px;max-width:50ch}
.track .kpi-list{display:grid;gap:0;border-top:1px solid var(--line)}
.track .kpi-list div{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:18px 0;border-bottom:1px solid var(--line)}
.track .kpi-list b{color:var(--x-ink);font-weight:800}
.track .kpi-list strong{display:block;font-weight:800;font-size:1.05rem}
.track .kpi-list span{color:var(--mute);font-size:.92rem}

/* ---------- software ---------- */
.astage{position:relative;width:100%;max-width:660px;justify-self:end}
.appwin{position:relative;background:#141110;border:1px solid var(--cinema-line);border-radius:16px;box-shadow:0 40px 90px rgba(0,0,0,.6);overflow:hidden;transform:perspective(1600px) rotateY(-9deg) rotateX(5deg);aspect-ratio:16/11}
.appwin .bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid var(--cinema-line);background:#1b1714}
.appwin .bar i{width:10px;height:10px;border-radius:50%;background:#ff5f57}
.appwin .bar i:nth-child(2){background:#febc2e}.appwin .bar i:nth-child(3){background:#28c840}
.appwin .bar span{margin-left:12px;font-size:.68rem;font-weight:700;color:#a39788;letter-spacing:.06em}
.appwin .scr{position:absolute;inset:34px 0 0 0;display:grid;grid-template-columns:23% 1fr;opacity:0;transition:opacity .8s var(--ease)}
.appwin .scr.on{opacity:1}
.appwin aside{background:#0f0c0b;border-right:1px solid var(--cinema-line);padding:16px 12px;display:grid;align-content:start;gap:6px}
.appwin aside b{font-size:.8rem;font-weight:900;letter-spacing:-.02em;margin-bottom:10px;color:var(--cinema-fg);display:flex;align-items:center;gap:8px}
.appwin aside b i{width:18px;height:18px;border-radius:5px;background:var(--x)}
.appwin aside span{font-size:.64rem;font-weight:600;color:#a39788;padding:6px 8px;border-radius:6px}
.appwin aside span.on{background:rgba(255,91,31,.14);color:var(--x)}
.appwin main{padding:16px;display:grid;gap:10px;align-content:start;min-width:0;color:var(--cinema-fg)}
.appwin .row{display:grid;gap:10px}
.appwin .r3{grid-template-columns:repeat(3,1fr)}
.appwin .r2{grid-template-columns:1.4fr 1fr}
.appwin .tile{background:#1c1714;border:1px solid var(--cinema-line);border-radius:10px;padding:10px 12px;min-width:0}
.appwin .tile small{display:block;font-size:.52rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--cinema-mute)}
.appwin .tile b{display:block;font-size:clamp(.9rem,1.8vw,1.35rem);font-weight:900;letter-spacing:-.03em;margin-top:3px;white-space:nowrap}
.appwin .tile b.g{color:#3ccf6e}.appwin .tile b.o{color:var(--x)}.appwin .tile b.r{color:#ff6b6b}
.appwin .list{display:grid;gap:6px}
.appwin .list div{display:flex;justify-content:space-between;gap:8px;font-size:.62rem;color:#cfc5b9;padding:6px 8px;border-radius:6px;background:rgba(242,236,227,.03);white-space:nowrap;overflow:hidden}
.appwin .list div em{font-style:normal;font-weight:800}
.appwin .list .ok{color:#3ccf6e}.appwin .list .bad{color:#ff6b6b}.appwin .list .warn{color:#febc2e}
.appwin .bars{display:flex;align-items:flex-end;gap:5px;height:70px}
.appwin .bars i{flex:1;background:linear-gradient(180deg,var(--x),rgba(255,91,31,.25));border-radius:3px 3px 0 0}
.appwin h5{margin:0;font-size:.8rem;font-weight:800;display:flex;justify-content:space-between;align-items:center}
.appwin h5 span{font-size:.56rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cinema-mute)}
.astage .chipset{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:20px}
.astage .chipset button{background:transparent;border:1px solid var(--cinema-line);color:#cfc5b9;border-radius:999px;padding:.5em 1em;font-size:.72rem;font-weight:700;cursor:pointer}
.astage .chipset button.on{background:var(--x);border-color:var(--x);color:var(--on-x)}

.prod-list{display:grid;gap:18px;margin-top:56px}
.prod{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(24px,3.4vw,44px);background:var(--surface);border:1px solid var(--line);min-width:0}
.prod:nth-child(even){grid-template-columns:1fr 1.1fr}
.prod:nth-child(even) .pvis{order:2}
.prod .pvis{min-width:0}
.prod .pvis .appwin{transform:none;aspect-ratio:16/10}
.prod .pvis .appwin .scr{opacity:1}
.prod .status{display:inline-flex;align-items:center;gap:8px;font-size:.64rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;padding:.45em .85em;border-radius:999px;background:var(--x-soft);color:var(--x-ink)}
.prod .status i{width:7px;height:7px;border-radius:50%;background:var(--x)}
.prod .status.live{background:rgba(60,207,110,.12);color:#1f9d55}
.prod .status.live i{background:#3ccf6e}
.prod h3{font-weight:900;font-size:clamp(2rem,3.6vw,3rem);letter-spacing:-.05em;line-height:.92;text-transform:uppercase;margin-top:16px}
.prod .tagline{font-family:var(--f-serif);font-style:italic;font-size:clamp(1.2rem,2vw,1.6rem);color:var(--x-ink);margin-top:6px}
.prod p{color:var(--fg-2);margin-top:14px;max-width:50ch}
.prod ul{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.prod li{font-size:.9rem;color:var(--fg-2);display:flex;gap:8px}
.prod li::before{content:"✓";color:var(--x);font-weight:800}
.prod .pcta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}

/* ---------- generic split + list ---------- */
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,80px);align-items:start;margin-top:56px}
.offer{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:56px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.offer > div{padding:28px 24px 30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;gap:10px;align-content:start;transition:background .35s;min-width:0}
.offer > div:hover{background:var(--surface)}
.offer .k{font-size:.68rem;font-weight:800;letter-spacing:.2em;color:var(--x-ink)}
.offer h3{font-weight:800;font-size:1.3rem;letter-spacing:-.03em;line-height:1.1}
.offer p{color:var(--fg-2);font-size:.94rem}

/* cta band */
.cta-band{background:var(--x);color:var(--on-x)}
.cta-band .wrap{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:center;justify-content:space-between;padding-block:clamp(56px,9vh,96px)}
.cta-band h2{font-weight:900;font-size:clamp(2rem,5vw,4.4rem);letter-spacing:-.05em;line-height:.9;text-transform:uppercase;max-width:16ch}
.cta-band h2 .serif{color:var(--cinema)}
.cta-band p{max-width:42ch;font-weight:500;margin-top:14px}
.cta-band .btn.solid{background:var(--cinema);border-color:var(--cinema);color:var(--cinema-fg)}
.cta-band .btn.solid:hover{background:var(--cinema-fg);color:var(--cinema);border-color:var(--cinema-fg)}

/* footer */
.sitefoot{background:var(--cinema);color:var(--cinema-mute);padding-block:70px calc(110px + env(safe-area-inset-bottom,0px))}
.sitefoot .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.sitefoot h4{color:var(--cinema-fg);font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px}
.sitefoot a{display:block;text-decoration:none;padding:5px 0;font-size:.9rem;color:#cfc5b9}
.sitefoot a:hover{color:var(--x)}
.sitefoot .about p{font-size:.92rem;max-width:36ch;margin-top:14px;color:#cfc5b9}
.sitefoot .brand{color:var(--cinema-fg)}
.sitefoot .legal{margin-top:48px;padding-top:22px;border-top:1px solid var(--cinema-line);display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-size:.8rem}

/* booking modal sheet */
.book-sheet{width:min(1100px,100%)}
.book-sheet .book-grid{padding:0 clamp(20px,3.4vw,40px) clamp(20px,3.4vw,40px);margin-top:18px}
.book-sheet .book-side{position:static}
.book-sheet .h2{font-size:clamp(2rem,4vw,3.4rem)}
.book-sheet .widget{box-shadow:none}

/* image lightbox */
.lb img{max-width:100%;max-height:78vh;display:block;background:#fff;border-radius:6px}

/* ---------- responsive (new parts) ---------- */
@media (max-width:1060px){
  .nav-links,.nav .score-pill{display:none}
  .burger{display:grid}
  .phero-in{grid-template-columns:1fr;min-height:0;gap:36px}
  .bstage,.rstage,.dash,.astage{justify-self:center}
  .svc-grid{grid-template-columns:1fr}
  .rgrid{grid-template-columns:1fr 1fr}
  .rcard.feature{grid-row:auto;grid-column:1/-1}
  .wgrid{grid-template-columns:1fr}
  .pgrid{grid-template-columns:1fr 1fr}
  .track{grid-template-columns:1fr}
  .prod,.prod:nth-child(even){grid-template-columns:1fr}
  .prod:nth-child(even) .pvis{order:0}
  .split{grid-template-columns:1fr}
  .offer{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr}
  .stats > div:nth-child(3){border-left:0}
  .stats > div:nth-child(n+3){border-top:1px solid var(--line)}
  .sitefoot .cols{grid-template-columns:1fr 1fr}
  .dash,.appwin,.bstage .browser{transform:none}
}
@media (max-width:680px){
  .rgrid,.pgrid,.offer{grid-template-columns:1fr}
  .scard{min-height:400px}
  .scard .viz-reels span{width:70px}
  .prod ul{grid-template-columns:1fr}
  .dash .kpis{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .dash .kpis div{padding:9px 10px}
  .dash .kpis b{font-size:1rem}
  .bstage .phone{display:none}
  .appwin aside{display:none}
  .appwin .scr{grid-template-columns:1fr}
  .sitefoot .cols{grid-template-columns:1fr}
  .wcard .wmeta{flex-direction:column;gap:6px}
  .track-tabs button{padding:.8em 1.1em;font-size:.68rem}
}
@media (prefers-reduced-motion:reduce){ .js .rv{opacity:1;transform:none} }

/* ---------- page-specific extras ---------- */
.dash .ptabs span{border:1px solid var(--cinema-line);color:#cfc5b9;border-radius:999px;padding:.45em .85em;font-size:.7rem;font-weight:700;display:flex;align-items:center;gap:6px}
.dash .ptabs span i{width:8px;height:8px;border-radius:50%}
.dash .ptabs span.on{background:var(--cinema-fg);color:var(--cinema);border-color:var(--cinema-fg)}
.tlist{display:grid;margin-top:30px;border-top:1px solid var(--line)}
.tlist a{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding .35s var(--ease),color .3s}
.tlist a:hover{padding-left:10px;color:var(--x-ink)}
.tlist b{font-weight:800}
.tlist span{color:var(--mute);font-size:.9rem}
.soft-teaser .split{margin-top:0;align-items:center}
.astage-light .appwin{transform:none}
.proofstack{position:relative;width:100%;max-width:560px;aspect-ratio:1/1;justify-self:end}
.proofstack img{position:absolute;width:44%;aspect-ratio:9/16;object-fit:cover;object-position:top;border-radius:16px;border:1px solid var(--cinema-line);box-shadow:0 40px 80px rgba(0,0,0,.6);background:#fff;animation:pfloat 9s var(--ease) infinite alternate}
.proofstack img:nth-child(1){left:2%;top:12%;transform:rotate(-9deg);filter:brightness(.7)}
.proofstack img:nth-child(2){left:54%;top:10%;transform:rotate(8deg);filter:brightness(.7);animation-delay:-3s}
.proofstack img:nth-child(3){left:28%;top:2%;z-index:2;animation-delay:-6s}
@keyframes pfloat{to{translate:0 -14px}}
.pchip{position:absolute;z-index:3;background:rgba(21,18,16,.92);border:1px solid var(--cinema-line);border-radius:14px;padding:12px 16px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 20px 40px rgba(0,0,0,.5)}
.pchip b{display:block;font-size:1.7rem;font-weight:900;letter-spacing:-.04em;color:var(--x);line-height:1}
.pchip span{font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#cfc5b9}
.pchip.c1{left:0;bottom:14%}.pchip.c2{right:0;bottom:4%}
.m-minus .mhero{background:radial-gradient(70% 90% at 75% 40%,#1b3b55 0%,#0a0d12 70%)}
.m-minus .mhero::after{background:none}
.m-minus .frost{position:absolute;right:10%;top:16%;width:34%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#bfefff,#5ad1ff 45%,rgba(90,209,255,0) 72%);filter:blur(2px);opacity:.75}
.m-xm-live{position:absolute;inset:0;background:#000}
.m-xm-live video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.xm-ov{position:absolute;left:5%;bottom:12%;z-index:2;color:#fff}
.xm-ov small{font-size:clamp(.5rem,.9vw,.7rem);font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:#ddd3c7}
.xm-ov b{display:block;font-weight:900;text-transform:uppercase;font-size:clamp(2rem,6vw,5rem);line-height:.86;letter-spacing:-.05em;margin-top:8px}
.xm-ov b .serif{color:var(--x);text-transform:none}
.xm-ov em{display:inline-block;margin-top:14px;font-style:normal;background:var(--x);color:var(--on-x);font-weight:800;font-size:clamp(.5rem,.9vw,.72rem);padding:.9em 1.4em;letter-spacing:.06em}
.sec-head + .rfilter{margin-top:30px}
.steps .step{min-width:0}
@media (max-width:1060px){ .proofstack{justify-self:center;max-width:440px} .nav-book{display:none} }
@media (max-width:680px){ .tlist a{grid-template-columns:1fr;gap:2px} .pchip b{font-size:1.3rem} }
/* fixes */
.stats > div > span{color:var(--fg-2);font-size:.9rem;max-width:26ch}
.stats strong span{font-size:inherit;color:inherit;max-width:none}
.stats > div > strong{display:block;white-space:nowrap}
.phero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.scard p{max-width:34ch;position:relative;z-index:1}
.scard h3,.scard ul{position:relative;z-index:1}
.scard .viz-browser{width:50%;bottom:-46px;right:-24px}
.scard .viz-app{width:50%;bottom:-40px}
.sitefoot .brand{display:inline-flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.16em;font-size:.78rem;padding:0}
.sitefoot .brand svg{width:22px;height:22px}
.sitefoot a.btn{display:inline-flex;padding:1.05em 1.4em;font-size:.68rem;color:var(--on-x)}
.sitefoot a.btn:hover{color:var(--on-x)}
.bstage .phone .mock .mnav .lk{display:none}
.bstage .phone .mock .mnav{font-size:.4rem;padding:10px 8px 0}
.bstage .phone .mock .mhero{margin:8px}
.bstage .phone .mock .mcopy{max-width:86%}
.bstage .phone .mock .mcopy b{font-size:.9rem}
.bstage .phone .mock .mcopy small,.bstage .phone .mock .mcopy em{font-size:.36rem}
.bstage .phone .m-getset .plans,.bstage .phone .m-getset .zip{display:none}
.soft-teaser .lead{margin-top:20px}
.proofstack{aspect-ratio:auto;height:min(560px,62vh)}
.proofstack img{width:62%;aspect-ratio:auto;height:auto;object-fit:contain;border-radius:14px}
.proofstack img:nth-child(1){left:0;top:16%}
.proofstack img:nth-child(2){left:38%;top:4%}
.proofstack img:nth-child(3){left:18%;top:30%}
.pchip.c1{left:auto;right:2%;bottom:auto;top:52%}.pchip.c2{right:auto;left:-2%;bottom:8%}
@media (max-width:680px){ .proofstack{height:360px} }
@media (max-width:680px){
  .scard{min-height:0;padding-bottom:210px}
  .scard ul{margin-top:18px;max-width:none!important}
  .scard .viz-browser,.scard .viz-app{width:72%}
  .scard .viz-chart{bottom:40px!important;width:70%!important}
  .rgrid[data-results="top"]{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:84%;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-20px;padding:4px 20px 14px;scrollbar-width:none}
  .rgrid[data-results="top"]::-webkit-scrollbar{display:none}
  .rgrid[data-results="top"] .rcard{scroll-snap-align:start}
}
.sample-note{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);text-align:center;margin-top:12px}.phero .sample-note{color:var(--cinema-mute)}

/* =====================================================================
   V2 — CALM LAYER: smaller type, sentence case, more air, pill buttons
   ===================================================================== */
:root{--f-display:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--r:18px}
body{font-size:16px;line-height:1.6;letter-spacing:-.005em}
.h2{font-weight:600;font-size:clamp(2rem,3.4vw,3.1rem);line-height:1.06;letter-spacing:-.035em;text-transform:none}
.serif{letter-spacing:-.01em}
.h2 .serif,.phero h1 .serif,.hero h1 .serif{font-weight:400}
.lead{font-size:1.05rem;max-width:46ch;color:var(--fg-2)}
.sec{padding-block:clamp(84px,12vh,140px)}
.sec-head{gap:16px;max-width:760px}
.eyebrow{font-size:.7rem;letter-spacing:.18em;font-weight:600}
.btn{font-weight:600;font-size:.9rem;letter-spacing:-.005em;text-transform:none;border-radius:999px;padding:.85em 1.4em;gap:.5em}
.nav .btn{font-size:.85rem;padding:.7em 1.15em}
.btn .arr{font-size:1em}

/* nav — lighter */
.nav{padding-top:calc(14px + env(safe-area-inset-top,0px));padding-bottom:14px;gap:28px}
.brand{letter-spacing:.14em;font-size:.72rem;font-weight:700;gap:10px}
.brand svg{width:24px;height:24px}
.nav-links{gap:30px;align-items:center;font-size:.9rem;font-weight:500}
.nav-links > a,.dd > button{font:inherit;font-size:.9rem;font-weight:500;line-height:1;padding:10px 0;opacity:.72;display:inline-flex;align-items:center;gap:6px;margin:0}
.nav-links > a:hover,.dd > button:hover,.dd.open > button{opacity:1}
.dd-menu{border-radius:16px;top:calc(100% + 14px)}
.dd-menu a{border-radius:12px}
.tools-link{display:inline-flex;align-items:center;gap:8px;background:none;border:0;color:inherit;font:inherit;font-size:.88rem;font-weight:500;cursor:pointer;opacity:.85;padding:8px 0}
.tools-link:hover{opacity:1}
.tools-link i{width:7px;height:7px;border-radius:50%;background:var(--x);box-shadow:0 0 0 4px rgba(255,91,31,.18);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(255,91,31,0)}}
.theme-btn{width:36px;height:36px}
.theme-btn svg{width:15px;height:15px}

/* hero v2 */
.hero{min-height:min(100vh,900px)}
.hero h1{font-weight:600;text-transform:none;letter-spacing:-.045em;line-height:1.02;font-size:clamp(2.7rem,5vw,4.6rem);margin-top:20px;max-width:13ch}
.hero h1 .serif{color:var(--x);font-size:1.06em}
.hero-sub{font-size:1.08rem;max-width:40ch;color:#cfc5b9;margin-top:22px}
.hero .cta{margin-top:30px}
.hero-proof{gap:8px 22px;margin-top:30px;font-size:.84rem}
.hero-film{position:relative;justify-self:end;width:100%;max-width:640px;aspect-ratio:6/5;border-radius:24px;overflow:hidden;border:1px solid var(--cinema-line);box-shadow:0 40px 100px rgba(0,0,0,.55);background:#0b0908}
.hero-film video,.hero-film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-film .tagl{position:absolute;left:16px;bottom:16px;z-index:2;font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#cfc5b9;background:rgba(11,9,8,.7);border:1px solid var(--cinema-line);padding:.5em .9em;border-radius:999px;backdrop-filter:blur(8px)}
.hero-film .snd{position:absolute;right:14px;bottom:14px;z-index:2;width:38px;height:38px;border-radius:50%;background:rgba(11,9,8,.7);border:1px solid var(--cinema-line);display:grid;place-items:center;color:#f2ece3;cursor:pointer}

/* page heroes v2 */
.phero-in{min-height:min(88vh,820px);padding-top:calc(120px + env(safe-area-inset-top,0px))}
.phero h1{font-weight:600;text-transform:none;font-size:clamp(2.5rem,4.6vw,4.2rem);line-height:1.03;letter-spacing:-.045em;margin-top:20px;max-width:14ch}
.phero h1 .serif{font-size:1.05em}
.phero .hero-sub{font-size:1.05rem;max-width:42ch}
.badges span{font-weight:500;font-size:.78rem}

/* numbers strip v2 */
.numbers{padding-block:56px}
.num strong{font-weight:600;font-size:clamp(2.4rem,4.4vw,3.8rem);letter-spacing:-.05em}
.num span:not([data-count]){font-size:.9rem}
.stats strong{font-weight:600;font-size:clamp(2rem,3.6vw,3rem);letter-spacing:-.045em}

/* cards v2 */
.rcard,.offer > div,.pcell,.prod,.widget,.sheet{border-radius:var(--r)}
.offer,.pgrid{border:0;gap:14px}
.offer > div,.pcell{border:1px solid var(--line);background:var(--surface)}
.offer h3{font-weight:600;font-size:1.15rem}
.pcell h3{font-weight:600;font-size:1.25rem}
.rcard .big strong{font-weight:700;font-size:clamp(2.3rem,3.4vw,3rem);letter-spacing:-.05em}
.rcard.feature .big strong{font-size:clamp(3rem,5vw,4.4rem)}
.prod h3{font-weight:600;text-transform:none;font-size:clamp(1.7rem,2.6vw,2.3rem);letter-spacing:-.04em;line-height:1.05}
.prod .tagline{font-size:1.2rem}
.track h3{font-weight:600;text-transform:none;font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.04em;line-height:1.08}
.step h3{font-weight:600;font-size:1.2rem}
.faq summary{font-weight:500}
.final{padding-block:clamp(90px,14vh,150px)}
.final h2{font-weight:600;text-transform:none;font-size:clamp(2.4rem,5vw,4.4rem);line-height:1.02;letter-spacing:-.045em;max-width:14ch}
.scoreband h2{font-weight:600;text-transform:none;font-size:clamp(2rem,3.6vw,3.2rem);line-height:1.05;letter-spacing:-.04em}
.qf{border-radius:999px;overflow:hidden}
.qf input{border-radius:0}
.qf .btn{border-radius:0 999px 999px 0}
.chipbtn{border-radius:999px}

/* CTA after results */
.after-cta{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.after-cta p{flex:1;min-width:220px;font-weight:600;font-size:1.05rem;letter-spacing:-.01em}
.after-cta p span{display:block;font-weight:400;font-size:.9rem;color:var(--mute)}

/* carousel */
.carousel{position:relative;margin-top:36px}
.car-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,calc((100% - 32px)/3));gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px;cursor:grab;overscroll-behavior-x:contain}
.car-track::-webkit-scrollbar{display:none}
.car-track.drag{cursor:grabbing;scroll-snap-type:none}
.car-track > *{scroll-snap-align:start}
.car-track.rgrid{margin-top:0}
.car-nav{display:flex;gap:10px;align-items:center}
.car-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer;display:grid;place-items:center;transition:background .3s,border-color .3s}
.car-nav button:hover{border-color:var(--x);background:var(--x);color:var(--on-x)}
.car-nav button:disabled{opacity:.35;pointer-events:none}
.car-bar{flex:1;height:2px;background:var(--line);border-radius:2px;overflow:hidden;max-width:260px}
.car-bar i{display:block;height:100%;width:30%;background:var(--x);transition:transform .2s linear}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}

/* services showcase (sticky) */
.ss{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);margin-top:48px;align-items:start}
.ss-list{display:grid}
.ss-item{display:grid;grid-template-columns:44px 1fr;gap:6px 14px;padding:30px 0;border-top:1px solid var(--line);text-decoration:none;cursor:pointer;opacity:.45;transition:opacity .5s var(--ease)}
.ss-item:last-child{border-bottom:1px solid var(--line)}
.ss-item.on{opacity:1}
.ss-item .n{font-size:.78rem;font-weight:600;color:var(--x-ink);padding-top:.5em}
.ss-item h3{font-weight:600;font-size:clamp(1.4rem,2.2vw,1.9rem);letter-spacing:-.035em;line-height:1.1}
.ss-item p{grid-column:2;color:var(--fg-2);max-width:40ch;max-height:0;overflow:hidden;transition:max-height .6s var(--ease)}
.ss-item.on p{max-height:120px}
.ss-item .go{grid-column:2;font-size:.85rem;font-weight:600;color:var(--x-ink);max-height:0;overflow:hidden;transition:max-height .6s var(--ease)}
.ss-item.on .go{max-height:40px}
.ss-stage{position:sticky;top:110px;aspect-ratio:5/4;border-radius:24px;overflow:hidden;background:var(--cinema);border:1px solid var(--line)}
.ss-panel{position:absolute;inset:0;opacity:0;transform:scale(1.03);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.ss-panel.on{opacity:1;transform:none}
.ss-panel video,.ss-panel > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ss-panel .cap{position:absolute;left:18px;bottom:18px;z-index:2;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#f2ece3;background:rgba(11,9,8,.7);padding:.5em .9em;border-radius:999px}
.ss-panel .pan{position:absolute;inset:7% 7% 0;border-radius:14px 14px 0 0;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.5);background:#fff}
.ss-panel .pan img{width:100%;display:block;animation:pan 16s ease-in-out infinite alternate}
@keyframes pan{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(calc(-100% + 300px))}}
.ss-panel .dash,.ss-panel .appwin{position:absolute;left:7%;right:7%;top:9%;width:auto;max-width:none;transform:none}
.ss-panel .appwin{aspect-ratio:auto;bottom:9%}

/* website hover-scroll shots */
.sgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 22px;margin-top:48px}
.scard2{display:grid;gap:14px;text-decoration:none;color:inherit;min-width:0}
.shot{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2);box-shadow:var(--shadow);aspect-ratio:16/10;container-type:size}
.shot .bar{position:absolute;top:0;left:0;right:0;height:30px;z-index:2;display:flex;align-items:center;gap:6px;padding:0 12px;background:color-mix(in srgb,var(--surface) 92%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.shot .bar i{width:9px;height:9px;border-radius:50%;background:#ff5f57}.shot .bar i:nth-child(2){background:#febc2e}.shot .bar i:nth-child(3){background:#28c840}
.shot .bar span{margin-left:10px;font-size:.68rem;color:var(--mute);font-weight:500}
.shot img{position:absolute;left:0;top:30px;width:100%;min-height:calc(100% - 30px);object-fit:cover;object-position:top;transform:translateY(0);transition:transform var(--d,6s) cubic-bezier(.45,.05,.35,1)}
.scard2:hover .shot img,.scard2:focus-visible .shot img,.shot.auto img{transform:translateY(calc(-100% + 100cqh - 30px))}
.shot .hint{position:absolute;right:12px;bottom:12px;z-index:2;font-size:.68rem;font-weight:600;color:#fff;background:rgba(11,9,8,.72);padding:.5em .85em;border-radius:999px;transition:opacity .4s}
.scard2:hover .hint{opacity:0}
.scard2 .meta2{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.scard2 h3{font-weight:600;font-size:1.2rem;letter-spacing:-.02em}
.scard2 .meta2 span{font-size:.82rem;color:var(--mute)}
.scard2 p{color:var(--fg-2);font-size:.94rem;margin-top:-6px;max-width:52ch}
.scard2 video{position:absolute;left:0;top:30px;width:100%;height:calc(100% - 30px);object-fit:cover}
.scard2.wide{grid-column:1/-1}
.scard2.wide .shot{aspect-ratio:21/9}

/* website hero: real screenshots */
.bstage .slide img{position:absolute;left:0;top:0;width:100%;animation:pan 14s ease-in-out infinite alternate}
.bstage .view{aspect-ratio:16/10;background:#fff}

/* process with scroll progress */
.steps .bar{transform:scaleX(var(--p,0));transition:transform .2s linear}
.step{opacity:.45;transition:opacity .5s}
.step.on{opacity:1}

/* film row */
.frow .film{aspect-ratio:9/14}
.frow{grid-auto-columns:minmax(220px,calc((100% - 48px)/4))}

@media (max-width:1060px){
  .nav .tools-link{display:none}
  .ss{grid-template-columns:1fr}
  .ss-stage{position:relative;top:0;order:-1}
  .ss-item{opacity:1}
  .ss-item p,.ss-item .go{max-height:none}
  .hero-film{justify-self:center}
  .car-track{grid-auto-columns:minmax(280px,46%)}
  .frow{grid-auto-columns:minmax(200px,40%)}
}
@media (max-width:680px){
  .sgrid{grid-template-columns:1fr}
  .scard2.wide .shot{aspect-ratio:16/10}
  .car-track{grid-auto-columns:86%}
  .frow{grid-auto-columns:62%}
  .hero h1{font-size:2.5rem}
  .phero h1{font-size:2.3rem}
  .after-cta .btn{flex:1}
  .qf{border-radius:16px}
  .qf .btn{border-radius:0}
}
.car-track.rgrid{grid-template-columns:none}
.ss-stage{color:var(--cinema-fg)}
.frow .film .cap strong{font-size:.92rem;line-height:1.2}
.frow .film .cap b{font-size:.56rem}
.frow .film .play{width:32px;height:32px}
@media (max-width:1060px){
  .ss-stage{position:sticky;top:72px;aspect-ratio:16/10;z-index:2;order:-1;box-shadow:0 20px 40px rgba(0,0,0,.25)}
  .ss-item{opacity:.45}
  .ss-item.on{opacity:1}
}
.car-track{grid-auto-columns:calc((100% - 32px)/3)}
.car-track.frow{grid-auto-columns:calc((100% - 64px)/5)}
@media (max-width:1060px){ .car-track{grid-auto-columns:calc((100% - 16px)/2)} .car-track.frow{grid-auto-columns:calc((100% - 32px)/3)} }
@media (max-width:680px){ .car-track{grid-auto-columns:86%} .car-track.frow{grid-auto-columns:62%} }

/* =====================================================================
   WordPress theme additions
   ===================================================================== */
:root{--x:#ff6700}
.brand img{width:28px;height:28px;flex:none;display:block}
.brand span{font-family:"Poppins",var(--f-display);font-weight:600;letter-spacing:-.01em;font-size:1.02rem;text-transform:none}
.sitefoot .brand span{color:var(--x)}
.admin-bar .nav{top:32px}
@media (max-width:782px){.admin-bar .nav{top:46px}}

/* Al Oud Stories theme preview — the sky moves from Fajr to Isha */
.aloud{position:absolute;left:0;right:0;top:30px;bottom:0;overflow:hidden;color:#f1e5c8;font-family:var(--f-display);--T:20s}
.aloud .sky{position:absolute;inset:0;opacity:0;animation:al-phase var(--T) linear infinite;animation-delay:calc(var(--i) * var(--T) / 5 - var(--T))}
.aloud .s0{background:linear-gradient(180deg,#141a3d 0%,#3c3b6e 45%,#c98a8a 100%)}
.aloud .s1{background:linear-gradient(180deg,#3f86c6 0%,#86bce3 55%,#e3f0f8 100%)}
.aloud .s2{background:linear-gradient(180deg,#8e6a3a 0%,#d39f55 50%,#f6dba4 100%)}
.aloud .s3{background:linear-gradient(180deg,#2c1840 0%,#9a3b4f 50%,#f2763a 100%)}
.aloud .s4{background:linear-gradient(180deg,#04060d 0%,#0b1226 55%,#1b2645 100%)}
@keyframes al-phase{0%{opacity:0}4%{opacity:1}20%{opacity:1}24%{opacity:0}100%{opacity:0}}
.aloud .stars{position:absolute;inset:0 0 40% 0;background-image:radial-gradient(1.2px 1.2px at 12% 20%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 28% 38%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 44% 12%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 63% 30%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 78% 16%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 90% 42%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 6% 50%,#fff 50%,transparent 51%),radial-gradient(1.3px 1.3px at 54% 46%,#fff 50%,transparent 51%);animation:al-stars var(--T) linear infinite}
@keyframes al-stars{0%{opacity:.7}10%{opacity:0}78%{opacity:0}88%{opacity:1}100%{opacity:.7}}
.aloud .arc{position:absolute;left:50%;bottom:24%;width:0;height:0;animation:al-arc var(--T) linear infinite}
.aloud .orb{position:absolute;left:-3.2cqw;top:calc(-62cqh);width:6.4cqw;height:6.4cqw;border-radius:50%;background:#fff1c9;box-shadow:0 0 30px 10px rgba(255,214,140,.55);animation:al-orb var(--T) linear infinite}
@keyframes al-arc{0%{transform:rotate(-78deg)}78%{transform:rotate(78deg)}78.01%{transform:rotate(72deg)}100%{transform:rotate(40deg)}}
@keyframes al-orb{0%,76%{background:#fff1c9;box-shadow:0 0 30px 10px rgba(255,214,140,.55)}60%{background:#ffb36b;box-shadow:0 0 40px 16px rgba(255,120,60,.55)}80%,100%{background:#e9ecf5;box-shadow:0 0 22px 6px rgba(200,210,255,.35)}}
.aloud .city{position:absolute;left:0;right:0;bottom:0;height:42%;color:#0d0a07}
.aloud .city svg{position:absolute;left:0;bottom:0;width:100%;height:100%}
.aloud .glow{position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(180deg,transparent,rgba(13,10,7,.85));pointer-events:none}
.aloud .mn{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:4.2cqh 5cqw;font-size:clamp(.42rem,1.4cqw,.72rem);font-weight:700;letter-spacing:.26em;text-transform:uppercase;z-index:3}
.aloud .mn span:last-child{display:flex;gap:2.4em;opacity:.8}
.aloud .cp{position:absolute;left:5cqw;top:24cqh;z-index:3;max-width:56%}
.aloud .cp small{display:block;font-size:clamp(.4rem,1.3cqw,.68rem);font-weight:700;letter-spacing:.28em;text-transform:uppercase;height:1.2em;position:relative}
.aloud .cp small i{position:absolute;left:0;top:0;font-style:normal;opacity:0;animation:al-phase var(--T) linear infinite;animation-delay:calc(var(--i) * var(--T) / 5 - var(--T))}
.aloud .cp b{display:block;font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:clamp(1.2rem,5.6cqw,3rem);line-height:1;margin-top:1.4cqh;text-shadow:0 4px 20px rgba(0,0,0,.35)}
.aloud .cp em{display:inline-block;margin-top:3cqh;font-style:normal;font-size:clamp(.4rem,1.2cqw,.64rem);font-weight:800;letter-spacing:.2em;text-transform:uppercase;padding:.9em 1.5em;background:#c9a24a;color:#1a1307}
.aloud .pt{position:absolute;left:5cqw;right:5cqw;bottom:5cqh;z-index:3;display:grid;grid-template-columns:repeat(5,1fr);gap:1cqw}
.aloud .pt span{position:relative;font-size:clamp(.38rem,1.15cqw,.62rem);font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding-top:1.6cqh;border-top:1px solid rgba(241,229,200,.3);color:rgba(241,229,200,.55)}
.aloud .pt span i{position:absolute;left:0;top:-1px;height:2px;width:100%;background:#c9a24a;opacity:0;animation:al-phase var(--T) linear infinite;animation-delay:calc(var(--i) * var(--T) / 5 - var(--T))}
.aloud .pt span b{display:block;font-weight:600;letter-spacing:0;font-size:1.3em;color:#f1e5c8;margin-top:.3em;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.aloud *{animation:none!important}.aloud .s3,.aloud .cp small i:nth-child(4){opacity:1}}
.ss-panel .aloud{top:0}
.xm-prose{max-width:760px}.xm-content{line-height:1.75}.xm-content p{margin:0 0 1.1em}.xm-content a{color:var(--x-ink)}