/* ============================================================
   Gancho Studio · v12
   Piel A = negro + lima · Piel C = salvia + burdeos + crema
   ============================================================ */
:root{
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,4vw,64px);
  --max:1480px;
  --lime:#D4FF24;--cobalt:#6E9BFF;--ink:#030407;--sage:#A5A79B;--burg:#590907;--cream:#E8D2B5;
  --display:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
  --script:'Pinyon Script',cursive;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Manrope',Helvetica,Arial,sans-serif;
}
body.skin-a,[data-skin="a"]{--bg:#030407;--fg:#F2F4F7;--muted:#A9B0BE;--acc:#D4FF24;--acc-ink:#030407;--acc2:#6E9BFF;--line:#1C2230}
body.skin-c,[data-skin="c"]{--bg:#A5A79B;--fg:#590907;--muted:#3B3D35;--acc:#590907;--acc-ink:#E8D2B5;--acc2:#E8D2B5;--line:rgba(59,61,53,.35)}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:84px}
body{margin:0;background:#030407;color:var(--fg);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
[data-skin]{color:var(--fg)}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,p,figure,dl,dd,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
svg{display:inline-block;width:1em;height:1em}
:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
::selection{background:var(--lime);color:#030407}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.skinbg{position:fixed;inset:0;z-index:-1;pointer-events:none}
.skinbg i{position:absolute;inset:0;transition:opacity .9s var(--ease)}
.skinbg .a{background:#030407}.skinbg .c{background:#A5A79B;opacity:0}
body.skin-c .skinbg .c{opacity:1}

/* film grain */
body::after{content:"";position:fixed;inset:0;z-index:150;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* loader */
.loader{position:fixed;inset:0;z-index:500;background:#030407;display:grid;place-items:center;pointer-events:none;animation:loaderOut 1s 1.05s var(--ease) forwards}
.loader span{font-family:var(--script);font-size:clamp(64px,12vw,140px);color:var(--lime);animation:loaderIn .9s var(--ease) both}
@keyframes loaderIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes loaderOut{to{clip-path:inset(0 0 100% 0);visibility:hidden}}

/* progress + cursor */
.progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:210;pointer-events:none}
.progress i{display:block;height:100%;width:100%;background:var(--lime);transform-origin:left;transform:scaleX(0)}
.cursor{position:fixed;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:400;opacity:0;transition:width .45s var(--ease),height .45s var(--ease),margin .45s var(--ease),opacity .3s}
.cursor.on{opacity:1}
.cursor.big{width:76px;height:76px;margin:-38px 0 0 -38px}
@media (hover:none),(prefers-reduced-motion:reduce){.cursor{display:none}}

/* ---------- eyebrow / pills / buttons ---------- */
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);line-height:1.8}
.eyebrow::after{content:"";display:block;width:36px;height:1px;background:currentColor;margin-top:12px}
.pill{display:inline-block;font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--lime);border:1px solid rgba(212,255,36,.4);padding:9px 16px;border-radius:999px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--acc);color:var(--acc-ink);padding:16px 28px;border-radius:999px;font:700 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;border:0;cursor:pointer;will-change:transform;transition:box-shadow .4s,background .3s,color .3s}
.btn svg{width:16px;height:16px;transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-sm{padding:12px 20px;font-size:11px}
.btn-lg{padding:20px 32px;font-size:13px;letter-spacing:.08em;text-transform:none;font-weight:600;font-size:16px}
.btn-ghost{display:inline-flex;align-items:center;gap:12px;padding:19px 28px;border-radius:999px;border:1px solid rgba(242,244,247,.28);background:transparent;color:#F2F4F7;font-weight:600;font-size:16px;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.btn-ghost svg{width:14px;height:14px}
.btn-ghost:hover{background:#F2F4F7;color:#030407;border-color:#F2F4F7}
.rv{opacity:0;transform:translateY(34px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:100;padding-top:env(safe-area-inset-top,0px);color:var(--fg);transition:background .5s,backdrop-filter .5s,color .6s,border-color .5s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(3,4,7,.62);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border-color:rgba(255,255,255,.07)}
body.skin-c .nav.scrolled{background:rgba(165,167,155,.7);border-color:rgba(89,9,7,.15)}
body.skin-c .nav .btn{background:#590907;color:#E8D2B5}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:84px;gap:24px}
.logo{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.logo b{font-family:var(--display);font-weight:900;font-size:32px;letter-spacing:.01em;line-height:1}
.logo span{font-size:17px;font-weight:300}
.links{display:flex;gap:clamp(20px,3vw,48px);margin-left:auto;font-size:15px;font-weight:500}
.links a{position:relative;padding:6px 0;opacity:.88;transition:opacity .3s}
.links a:hover{opacity:1}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.links a:hover::after{transform:scaleX(1);transform-origin:left}
.burger{display:none;align-items:center;gap:12px;background:transparent;border:1px solid currentColor;border-radius:999px;height:48px;padding:0 20px;cursor:pointer;font-size:14px;font-weight:500;position:relative;opacity:.95}
.burger i{display:none}
.burger[aria-expanded="true"]{background:var(--lime);color:#030407;border-color:var(--lime)}
.sheet{position:fixed;inset:0;z-index:90;background:#030407;color:#F2F4F7;padding:calc(110px + env(safe-area-inset-top,0px)) var(--pad) 40px;display:flex;flex-direction:column;justify-content:space-between;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .8s var(--ease),visibility 0s .8s}
.sheet.on{clip-path:inset(0);visibility:visible;transition:clip-path .8s var(--ease)}
.sheet nav{display:grid}
.sheet a{display:flex;align-items:baseline;gap:18px;font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(56px,16vw,96px);line-height:1.02;border-bottom:1px solid #1C2230;padding:8px 0}
.sheet a em{font:500 12px var(--sans);letter-spacing:.14em;color:var(--cobalt)}
.sheet a.hl{color:var(--lime)}
.sheet p{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8F96A6}
@media (max-width:860px){
  .links,.nav-cta{display:none}
  .burger{display:inline-flex;margin-left:auto}
  .nav-in{height:68px}
  .logo b{font-size:28px}
  .nav.scrolled,.nav.menu-open{background:rgba(3,4,7,.78)}
  body .nav.menu-open{color:#F2F4F7;background:#030407;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
  body.skin-c .nav.menu-open .btn,body .nav.menu-open .burger{color:#030407}
}

/* ============ 01 HERO (A) ============ */
.hero{position:relative;overflow:hidden;padding-top:clamp(108px,12vw,150px)}
.hero-bg{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 55% at 78% 42%,rgba(46,84,255,.20),transparent 70%),
             linear-gradient(90deg,#030407 0%,rgba(3,4,7,.72) 42%,rgba(3,4,7,.3) 100%),
             url("hook-lime.webp") 82% 34%/cover no-repeat;
  opacity:0;transition:opacity 1.8s .5s}
.loaded .hero-bg{opacity:.32}
.hero-bg::after{content:"";position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(0deg,#030407,transparent)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(24px,3vw,56px);align-items:center;min-height:min(78svh,820px);padding-bottom:clamp(40px,5vw,72px)}
.hero-copy .pill{margin-bottom:clamp(8px,1.6vw,22px)}
.hero h1{font-weight:400;line-height:.84}
.hero h1 .ln{display:block;overflow:hidden;padding:0 .14em .08em .06em;margin:0 -.14em 0 -.06em}
.hero h1 .ln>span{display:block;transform:translateY(112%);transition:transform 1.5s var(--ease)}
.loaded .hero h1 .ln>span{transform:none}
.hero h1 .ln:nth-child(2)>span{transition-delay:.12s}.hero h1 .ln:nth-child(3)>span{transition-delay:.24s}
.hero .s{font-family:var(--script);color:var(--lime);font-size:clamp(84px,11.4vw,200px);line-height:1;margin-left:-.02em;padding-top:.04em}
.hero .big{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(78px,10.4vw,190px);line-height:.82;letter-spacing:-.005em;color:#F6F7FA}
.hero .lead{max-width:44ch;font-size:clamp(16px,1.35vw,20px);line-height:1.65;color:#C9CED8;margin:clamp(22px,3vh,36px) 0}
.hero .pill,.hero .lead,.hero .ctas,.hero .origin{opacity:0;transform:translateY(16px);transition:opacity 1s .7s,transform 1.1s .7s var(--ease)}
.loaded .hero .pill,.loaded .hero .lead,.loaded .hero .ctas,.loaded .hero .origin{opacity:1;transform:none}
.hero .ctas{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hero .origin{margin-top:26px;font-size:14px;color:#8F96A6}
.hero .origin em{font-family:var(--serif);font-size:1.25em;color:#C9CED8}

.phones{position:relative;width:100%;max-width:780px;justify-self:end;aspect-ratio:1/1.02;perspective:1400px}
.phone{position:absolute;border:0;padding:0;background:#0B0E15;aspect-ratio:9/16;border-radius:clamp(16px,2.3vw,34px);overflow:hidden;cursor:pointer;
  box-shadow:0 50px 90px -24px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.1),0 0 60px rgba(46,84,255,.12);
  opacity:0;transform:translateY(90px) scale(.94);transition:opacity 1.2s var(--ease),transform 1.6s var(--ease);will-change:translate}
.loaded .phone{opacity:1;transform:none}
.phone video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0B0E15}
.phone.l{width:34%;left:0;top:27%;rotate:-8deg;z-index:1;transition-delay:.45s}
.phone.c{width:42%;left:29%;top:2%;z-index:3;transition-delay:.3s}
.phone.r{width:34%;right:0;top:32%;rotate:7deg;z-index:2;transition-delay:.6s}
.phone.c::after,.phone.l::after,.phone.r::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);pointer-events:none}
.playbtn{position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;margin:-13% 0 0 -13%;border-radius:50%;background:var(--lime);color:#030407;display:grid;place-items:center;box-shadow:0 10px 40px rgba(212,255,36,.35);transition:transform .5s var(--ease)}
.playbtn svg{width:34%;height:34%;margin-left:6%}
.playbtn::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--lime);animation:ring 2.4s var(--ease) infinite}
@keyframes ring{from{transform:scale(1);opacity:.8}to{transform:scale(1.7);opacity:0}}
.phone.c:hover .playbtn{transform:scale(1.12)}
.phone:hover{filter:brightness(1.08)}
.reelpill{position:absolute;z-index:4;left:50%;bottom:0;display:inline-flex;align-items:center;gap:10px;transform:translateX(-10%);padding:12px 20px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(3,4,7,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:14px;font-weight:500;color:#F2F4F7;white-space:nowrap}
.reelpill i{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(212,255,36,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(212,255,36,0)}100%{box-shadow:0 0 0 0 rgba(212,255,36,0)}}

.strip{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr);gap:32px;align-items:center;border-top:1px solid #1C2230;padding-top:30px;padding-bottom:clamp(36px,4vw,56px);margin-top:8px}
.trust{font-size:15px;line-height:1.7;color:#A9B0BE;max-width:34ch}
.trust b{color:#F2F4F7;font-weight:600}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.metrics div{border-left:1px solid #2B3242;padding-left:22px}
.metrics dt{font-family:var(--display);font-weight:700;font-size:clamp(44px,4.6vw,72px);line-height:.95;color:#F2F4F7;letter-spacing:.005em}
.metrics dd{margin-top:6px;font-size:13px;color:#8F96A6;letter-spacing:.02em}

@media (max-width:1000px){
  .hero{padding-top:84px}
  .hero-grid{grid-template-columns:1fr;gap:0;min-height:0}
  .phones{order:-1;max-width:560px;justify-self:center;aspect-ratio:1/.86;margin:6px auto 0}
  .hero-copy{margin-top:18px}
  .hero .s{font-size:clamp(86px,24vw,160px)}
  .hero .big{font-size:clamp(76px,20vw,150px)}
  .hero .ctas .btn-lg{width:100%}
  .hero .ctas .btn-ghost{padding:12px 0;border:0;font-size:15px;color:#C9CED8}
  .hero .ctas .btn-ghost:hover{background:none;color:var(--lime)}
  /* phones cover the top, so the hook + flower sit behind the headline instead, larger and brighter */
  .hero-bg{--t:clamp(300px,74vw,560px);
           background:linear-gradient(180deg,rgba(3,4,7,0) calc(var(--t) + 82vw),#030407 calc(var(--t) + 120vw)),
                      linear-gradient(90deg,rgba(3,4,7,.82) 0%,rgba(3,4,7,.4) 52%,rgba(3,4,7,.05) 100%),
                      linear-gradient(180deg,#030407 0,rgba(3,4,7,0) 140px),
                      url("hook-lime.webp") left -96vw top var(--t)/218vw auto no-repeat}
  .loaded .hero-bg{opacity:.78}
  .strip{grid-template-columns:1fr;gap:26px}
  .reelpill{display:none}
}
/* tablets: the phone-sized vw values push the hook off the right edge, so pin it in px instead */
@media (min-width:600px) and (max-width:1000px){
  .hero-bg{--t:540px;background-position:0 0,0 0,0 0,right -120px top var(--t);background-size:auto,auto,auto,1500px auto}
}
@media (max-width:560px){.metrics{gap:12px}.metrics div{padding-left:14px}.metrics dd{font-size:12px}}

/* ============ STATEMENT (A) ============ */
.statement{padding-top:clamp(110px,15vw,210px);padding-bottom:clamp(70px,9vw,130px)}
.statement p{font-family:var(--serif);font-weight:500;font-size:clamp(34px,4.9vw,82px);line-height:1.04;letter-spacing:-.01em;max-width:17ch}
.statement .wd{color:#252b38;transition:color .5s}
.statement .wd.lit{color:var(--fg)}
.statement .wd.k.lit{color:var(--lime);font-style:italic}
.def{margin-top:40px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:14px;letter-spacing:.04em}
.def b{font-family:var(--script);font-weight:400;font-size:44px;color:var(--lime);letter-spacing:0;line-height:1}

/* ============ EXPLAINER + HOOK LAB (A) ============ */
.explainer{padding:clamp(60px,8vw,120px) 0 clamp(60px,8vw,120px)}
.ex-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,100px);align-items:center}
.ex-copy .eyebrow{margin-bottom:22px}
.ex-copy p{color:#C9CED8;line-height:1.7;max-width:46ch;margin:22px 0 30px;font-size:clamp(16px,1.3vw,19px)}
.trio{border-top:1px solid #1C2230;margin-bottom:36px}
.trio li{display:grid;grid-template-columns:54px 92px 1fr;align-items:baseline;gap:6px;padding:16px 0;border-bottom:1px solid #1C2230}
.trio b{font-family:var(--display);font-weight:700;font-size:26px;color:var(--cobalt)}
.trio span{font-weight:700;font-size:17px;color:#F2F4F7}
.trio em{font-style:normal;color:#A9B0BE;font-size:15px}
.xp{justify-self:center;width:min(100%,380px)}
.xp .frame{position:relative;display:block;width:100%;aspect-ratio:9/16;border:0;padding:0;border-radius:clamp(24px,2.6vw,36px);overflow:hidden;cursor:pointer;background:#0B0E15;box-shadow:0 60px 100px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.1),0 0 80px rgba(212,255,36,.06);transition:transform .8s var(--ease)}
.xp .frame:hover{transform:translateY(-8px) rotate(-1deg)}
.xp video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.xp .playbtn{width:20%;top:84%;margin:-10% 0 0 -10%;opacity:.95}
.xcap{margin-top:16px;text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8F96A6}

.hooklab{padding:clamp(40px,6vw,90px) 0 clamp(70px,9vw,130px)}
.hl-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,110px);align-items:center}
.hl-phone{justify-self:center;width:min(100%,360px)}
.screen{position:relative;isolation:isolate;aspect-ratio:9/16;border-radius:clamp(24px,2.6vw,36px);overflow:hidden;background:#0B0E15;display:flex;flex-direction:column;justify-content:center;padding:clamp(22px,3vw,34px);box-shadow:0 60px 100px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.1)}
.screen::after{content:"";position:absolute;inset:-12%;z-index:-2;background:url("../media/orbita_spec_en.jpg") center/cover;filter:blur(22px) saturate(1.2)}
.screen::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(3,4,7,.45),rgba(3,4,7,.72))}
.screen>*{position:relative}
.hl-tag{position:absolute;left:clamp(16px,2.4vw,24px);top:clamp(16px,2.4vw,24px);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#030407;background:var(--lime);padding:7px 13px;border-radius:999px}
.hl-text{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(40px,4.2vw,64px);line-height:.92;color:#fff;text-shadow:0 6px 30px rgba(0,0,0,.5)}
.hl-text.swap{animation:hlIn .7s var(--ease)}
@keyframes hlIn{from{opacity:0;transform:translateY(26px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.hl-timer{position:absolute!important;left:clamp(16px,2.4vw,24px);right:clamp(16px,2.4vw,24px);bottom:44px;height:3px;border-radius:3px;background:rgba(255,255,255,.2);overflow:hidden}
.hl-timer u{display:block;height:100%;width:0;background:var(--lime);text-decoration:none}
.hl-note{position:absolute!important;left:clamp(16px,2.4vw,24px);bottom:16px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#C9CED8}
.hl-copy .eyebrow{margin-bottom:22px}
.hl-copy p{color:#C9CED8;line-height:1.7;max-width:48ch;margin:22px 0 30px;font-size:clamp(16px,1.3vw,19px)}
.tabs{display:grid;gap:12px;max-width:560px}
.tabs button{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:baseline;text-align:left;background:transparent;border:1px solid #232A3A;border-radius:18px;padding:16px 22px;cursor:pointer;transition:border-color .3s,background .3s}
.tabs button b{grid-row:1/3;font-family:var(--display);font-weight:900;font-size:40px;line-height:.9;color:#4a5266;transition:color .3s}
.tabs button span{font-weight:700;font-size:17px;color:#F2F4F7}
.tabs button em{font-style:normal;color:#A9B0BE;font-size:14px}
.tabs button:hover{border-color:var(--cobalt)}
.tabs button[aria-selected="true"]{border-color:var(--lime);background:rgba(212,255,36,.06)}
.tabs button[aria-selected="true"] b{color:var(--lime)}
@media (max-width:900px){
  .ex-grid,.hl-grid{grid-template-columns:1fr}
  .xp{order:-1;width:min(100%,320px)}
  .trio li{grid-template-columns:44px 80px 1fr}
}

/* marquee */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:26px 0;color:var(--fg);transition:border-color .9s,color .6s}
.track{display:flex;gap:56px;width:max-content;will-change:transform;align-items:baseline}
.marquee span{font-family:var(--display);font-weight:900;font-size:clamp(44px,6vw,104px);text-transform:uppercase;white-space:nowrap;line-height:1}
.marquee span.sc{font-family:var(--script);font-weight:400;text-transform:none;font-size:clamp(52px,6.6vw,116px);color:var(--lime)}
body.skin-c .marquee{color:#590907}
body.skin-c .marquee span.sc{color:#590907}
body.skin-c .marquee{border-color:rgba(89,9,7,.35)}

/* ============ 03 WORK (C) ============ */
.work{position:relative;overflow:hidden;padding:0 0 clamp(80px,9vw,140px)}
.work .stage{position:relative;padding-top:clamp(90px,11vw,170px)}
.work .band{position:absolute;top:-6%;height:76%;left:44%;width:30%;background:#590907;transform:skewX(-16deg);-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}
.work .ghost{position:absolute;right:-2vw;top:clamp(40px,7vw,120px);font-family:var(--display);font-weight:900;font-size:clamp(220px,34vw,560px);line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(232,210,181,.65);white-space:nowrap;will-change:transform;pointer-events:none}
.work .stage>.wrap{position:relative;z-index:2}
/* the burgundy hook floats over the band, behind the copy (scroll parallax on .hook, idle float on i) */
.work .hook{position:absolute;z-index:1;left:47%;top:clamp(-30px,-1vw,0px);width:min(34vw,560px);aspect-ratio:1;pointer-events:none;will-change:transform}
.work .hook i{position:absolute;inset:0;background:url("hook-burgundy.webp") center/contain no-repeat;filter:drop-shadow(0 40px 46px rgba(40,10,5,.45));rotate:-6deg;animation:hookFloat 6s ease-in-out infinite}
@keyframes hookFloat{0%,100%{rotate:-9deg;translate:0 0}50%{rotate:-3deg;translate:0 -16px}}
.c-h{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.86;letter-spacing:-.005em;font-size:clamp(70px,10.6vw,190px)}
.c-h span{display:block}
.c-h .tag{display:inline-block;background:#590907;color:#E8D2B5;padding:.02em .12em .06em;margin-top:.04em}
.c-h .l1{padding-bottom:.04em}
.work-head{margin-bottom:clamp(36px,5vw,64px)}
.work-head p{font-size:16px;line-height:1.7;color:#2b2d26;max-width:46ch;margin-top:clamp(24px,3vw,40px);position:relative;z-index:3}
.work-head p .tch{display:none}
.work-head p .hov{display:block;margin-top:10px;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.reels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.4vw,22px);align-items:start}
.reel .frame{display:block;position:relative;width:100%;aspect-ratio:9/16;border:0;padding:0;border-radius:clamp(14px,1.6vw,22px);overflow:hidden;background:#2a0404;cursor:pointer;box-shadow:0 30px 50px -28px rgba(40,10,5,.55);transition:transform .8s var(--ease),box-shadow .8s var(--ease)}
.reel .frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.reel:hover .frame{transform:translateY(-12px);box-shadow:0 44px 60px -26px rgba(40,10,5,.7)}
.reel:hover .frame video{transform:scale(1.05)}
.reel .pl{position:absolute;right:12px;bottom:12px;width:42px;height:42px;border-radius:50%;background:rgba(40,6,5,.78);color:#fff;display:grid;place-items:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .5s var(--ease),background .3s}
.reel .pl svg{width:16px;height:16px;margin-left:2px}
.reel:hover .pl{transform:scale(1.15);background:#590907}
.reel .badge{position:absolute;left:12px;top:12px;background:#E8D2B5;color:#590907;font-size:12px;font-weight:700;padding:7px 13px;border-radius:999px;letter-spacing:.02em}
.reel .cap{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:16px}
.reel h3{font-family:var(--display);font-weight:900;font-size:clamp(24px,2.3vw,36px);text-transform:uppercase;line-height:.95;color:#590907}
.reel .cap span{font-size:12px;color:#3B3D35;text-align:right}
.reel p{margin-top:8px;font-size:14px;line-height:1.5;color:#3B3D35;max-width:30ch}
.dots{display:none}

/* catalog layers */
.layer-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;margin:clamp(48px,6vw,84px) 0 22px;padding-bottom:14px;border-bottom:1.5px solid #590907}
.layer-head:first-of-type{margin-top:0}
.layer-head h3{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(30px,3vw,46px);line-height:.95;color:#590907}
.layer-head span{font-size:14px;color:#3B3D35}
.reels.also{grid-template-columns:repeat(4,minmax(0,1fr));width:calc(80% - 4px)}
a.reel{display:block}

.clients{margin-top:clamp(80px,10vw,150px)}
.c-h2{font-family:var(--display);font-weight:900;font-size:clamp(56px,7.4vw,130px);line-height:.86;text-transform:uppercase;color:#590907}
.c-h2.sm{font-size:clamp(48px,6vw,104px);margin-bottom:36px}
.list{border-top:1.5px solid #590907}
.item{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:24px;align-items:center;padding:clamp(18px,2.2vw,30px) 0;border-bottom:1px solid rgba(89,9,7,.35);position:relative;overflow:hidden}
.item::before{content:"";position:absolute;inset:0;background:#590907;transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease)}
.item:hover::before{transform:scaleY(1)}
.item>*{position:relative;transition:color .4s,transform .6s var(--ease)}
.item .no{font-size:12px;letter-spacing:.14em;color:#3B3D35}
.item .name{font-family:var(--display);font-weight:900;font-size:clamp(34px,4.6vw,78px);text-transform:uppercase;line-height:.95;color:#590907}
.item .kind{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#3B3D35;text-align:right}
.item:hover .name{color:#E8D2B5;transform:translateX(16px)}
.item:hover .no,.item:hover .kind{color:#E8D2B5}

@media (max-width:1000px) and (min-width:761px){.reels,.reels.also{grid-template-columns:repeat(3,minmax(0,1fr));width:auto}}
@media (max-width:900px){.work .band{left:38%;width:40%}}
@media (hover:none){.work-head p .hov{display:none}.work-head p .tch{display:block;margin-top:10px;font-size:11px;letter-spacing:.18em;text-transform:uppercase}}
@media (max-width:760px){
  .work .stage{padding-top:104px}
  .c-h{font-size:clamp(64px,19vw,120px)}
  .work .band{left:78%;width:46%;top:-5%;height:40%}
  .work .ghost{right:auto;left:30%;top:16px;font-size:60vw}
  .work .stage{padding-top:min(62vw,290px)}
  .work .hook{left:auto;right:6vw;top:30px;width:min(54vw,260px)}
  .reels,.reels.also{width:auto}
  .layer-head{margin-top:44px}
  .reels{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 calc(-1*var(--pad));padding:0 var(--pad) 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .reels::-webkit-scrollbar{display:none}
  .reel{flex:0 0 78vw;scroll-snap-align:center}
  .reel .frame{border-radius:22px}
  .reel:hover .frame{transform:none}
  .dots{display:flex;gap:8px;justify-content:center;margin-top:10px}
  .dots i{width:7px;height:7px;border-radius:50%;background:rgba(89,9,7,.3);transition:all .4s var(--ease)}
  .dots i.on{width:22px;border-radius:7px;background:#590907}
  .item{grid-template-columns:44px minmax(0,1fr)}.item .kind{grid-column:2;text-align:left;margin-top:-8px}
}

/* ============ WEBSITES (C) ============ */
.webs{padding:clamp(70px,9vw,140px) 0 clamp(40px,5vw,70px)}
.web-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,90px);align-items:center}
.webs .kick{color:#590907;border-color:rgba(89,9,7,.45)}
.webs .c-h2{margin:22px 0 0}
.webs .c-h2 .tag{display:inline-block;background:#590907;color:#E8D2B5;padding:.02em .12em .06em;margin-top:.04em}
.web-copy>p{margin-top:26px;font-size:17px;line-height:1.7;color:#2b2d26;max-width:44ch}
.wfeat{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px;margin-top:30px;border-top:1.5px solid #590907;padding-top:24px}
.wfeat b{display:block;font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:22px;color:#590907;line-height:1}
.wfeat span{display:block;margin-top:6px;font-size:14px;line-height:1.5;color:#3B3D35}
.web-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:34px}
.lnk{display:inline-block;font-weight:600;color:#590907;border-bottom:1.5px solid currentColor;padding:8px 0 3px}
.browser{background:#1a0303;border-radius:18px;padding:0;overflow:hidden;box-shadow:0 60px 90px -40px rgba(40,10,5,.75),0 0 0 1px rgba(89,9,7,.4)}
.bbar{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;background:#2a0505}
.bbar .dots{display:flex;gap:7px}
.bbar .dots i{width:10px;height:10px;border-radius:50%;background:#E8D2B5;opacity:.35}
.btabs{display:flex;gap:6px;flex:1;min-width:0}
.btabs button{padding:7px 16px;border:0;border-radius:999px;background:rgba(232,210,181,.1);color:rgba(232,210,181,.75);font:600 12.5px var(--sans);cursor:pointer;transition:background .3s,color .3s}
.btabs button:hover{color:#E8D2B5}
.btabs button[aria-selected="true"]{background:#E8D2B5;color:#590907}
.btabs button:focus-visible{outline:2px solid #E8D2B5;outline-offset:2px}
.bopen{flex:none;font-size:12px;font-weight:600;color:#E8D2B5;border-bottom:1px solid rgba(232,210,181,.5);padding:6px 0 2px;white-space:nowrap}
.btap{display:none}
/* touch screens: swiping over the live site would scroll the iframe instead of the page, so it becomes a tap target */
@media (hover:none){
  .bview iframe{pointer-events:none}
  .btap{display:flex;position:absolute;inset:auto 14px 14px;justify-content:center;align-items:center;gap:8px;min-height:48px;border-radius:999px;background:rgba(232,210,181,.94);color:#590907;font-weight:700;font-size:14px;box-shadow:0 14px 30px rgba(0,0,0,.35)}
}
.bopen:hover{border-color:#E8D2B5}
.bview{position:relative;height:clamp(340px,36vw,560px);overflow:hidden;background:#0E0906}
.bview iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#0E0906;opacity:0;transition:opacity .6s}
.bview.ok iframe{opacity:1}
.bload{position:absolute;inset:0;display:grid;place-items:center;color:rgba(232,210,181,.6);font-size:12px;letter-spacing:.18em;text-transform:uppercase;pointer-events:none;transition:opacity .4s}
.bview.ok .bload{opacity:0}
.browser figcaption .hov,.browser figcaption .tch{display:inline}
.browser figcaption{display:grid;gap:4px;padding:16px 18px 18px;background:#E8D2B5;color:#3B3D35;font-size:13.5px;line-height:1.5}
.browser figcaption b{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:20px;color:#590907;line-height:1}
.browser figcaption em{display:block;margin-top:4px;font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.browser figcaption .tch{display:none}
@media (hover:none){.browser figcaption .hov{display:none}.browser figcaption .tch{display:inline}}
.also-web{display:flex;align-items:center;gap:20px;margin-top:clamp(36px,4vw,56px);padding:20px 0;border-top:1px solid rgba(89,9,7,.35);border-bottom:1px solid rgba(89,9,7,.35)}
.also-web .no{font-size:12px;letter-spacing:.14em;color:#3B3D35}
.also-web p{color:#3B3D35;font-size:15px}
.also-web b{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:24px;color:#590907;margin-right:12px}
@media (max-width:900px){.web-grid{grid-template-columns:1fr}.bview{height:min(150vw,560px)}}
@media (max-width:420px){.bbar .dots{display:none}.btabs button{padding:7px 12px}}
@media (max-width:560px){.wfeat{grid-template-columns:1fr;gap:16px}.web-ctas .btn{width:100%}.also-web{align-items:flex-start}.also-web b{display:block;margin:0 0 4px}}

/* ============ 04 PROCESS (C) ============ */
.process{padding:clamp(60px,8vw,120px) 0 clamp(90px,11vw,160px)}
.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 40px;margin-bottom:clamp(36px,5vw,64px)}
.head p{max-width:36ch;color:#3B3D35;line-height:1.65}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.step .viz{position:relative;aspect-ratio:4/3.4;background:#E8D2B5;border-radius:22px;overflow:hidden;margin-bottom:22px;transition:transform .8s var(--ease)}
.step:hover .viz{transform:translateY(-8px)}
.step .num{font-family:var(--display);font-weight:900;font-size:22px;color:#590907;letter-spacing:.06em}
.step h3{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(30px,2.8vw,44px);line-height:.95;color:#590907;margin:6px 0 10px}
.step p{color:#3B3D35;line-height:1.65;max-width:36ch}
.tagpill{position:absolute;left:16px;top:16px;background:#590907;color:#E8D2B5;font-size:12px;font-weight:700;padding:7px 14px;border-radius:999px;letter-spacing:.02em}
.mini{position:absolute;aspect-ratio:9/16;border-radius:14px;background:#2a0404 center/cover;box-shadow:0 24px 40px -14px rgba(40,10,5,.55);border:1px solid rgba(255,255,255,.2)}
.v1 .ph{position:absolute;width:24%;aspect-ratio:1;border-radius:12px;box-shadow:0 14px 24px -10px rgba(40,10,5,.5)}
.v1 .ph.a{left:9%;top:26%;background:linear-gradient(135deg,#a9563a,#5a1d12);rotate:-9deg}
.v1 .ph.b{left:20%;top:44%;background:linear-gradient(135deg,#7e9a7a,#3c4d3a);rotate:6deg}
.v1 .ph.c{left:8%;top:62%;background:linear-gradient(135deg,#d3a26f,#8b5a2b);rotate:-3deg;width:20%}
.v1 .arr{position:absolute;left:41%;top:50%;width:28px;height:28px;margin-top:-14px;color:#590907}
.v1 .mini{right:12%;top:12%;width:34%;rotate:4deg}
.v2 .m1{left:14%;top:16%;width:33%;rotate:-6deg}
.v2 .m2{right:12%;top:12%;width:33%;rotate:5deg}
.v3 .cal{position:absolute;inset:22% 8% 8%;display:grid;grid-template-columns:repeat(7,1fr);gap:7px;align-content:center}
.v3 .cal i{aspect-ratio:1;border-radius:8px;background:rgba(89,9,7,.14)}
.v3 .cal i.x{background:#590907;position:relative}
.v3 .cal i.x::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;margin:-4px 0 0 -3px;border-left:8px solid #E8D2B5;border-top:5px solid transparent;border-bottom:5px solid transparent}
@media (max-width:860px){.steps{grid-template-columns:1fr}.step .viz{aspect-ratio:16/10}}

/* ============ 05 PLANS (C) ============ */
.plans{padding:clamp(40px,6vw,90px) 0 clamp(110px,13vw,190px)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);align-items:stretch}
.plan{position:relative;background:#E8D2B5;color:#2b0403;padding:clamp(26px,2.6vw,40px);border-radius:26px;display:flex;flex-direction:column;gap:12px;min-height:500px;transition:transform .7s var(--ease),box-shadow .7s}
.plan:hover{transform:translateY(-8px);box-shadow:0 40px 60px -30px rgba(40,10,5,.55)}
.plan h3{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:700}
.plan .price{font-family:var(--display);font-weight:900;font-size:clamp(68px,6.4vw,104px);line-height:.9;color:#590907}
.plan .per{font-size:14px;color:#5a4a3c}
.plan ul{display:grid;gap:12px;margin-top:14px;font-size:15.5px;line-height:1.45}
.plan li{padding-left:22px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:2px;background:#590907}
.plan .btn{margin-top:auto;background:transparent;color:#590907;border:1.5px solid #590907;padding:18px 24px}
.plan .btn:hover{background:#590907;color:#E8D2B5}
.plan.feat{background:#590907;color:#E8D2B5;transform:translateY(-18px)}
.plan.feat:hover{transform:translateY(-26px)}
.plan.feat .price{color:#E8D2B5}.plan.feat .per{color:#d8b9a0}.plan.feat li::before{background:#E8D2B5}
.plan.feat .btn{background:#E8D2B5;color:#590907;border-color:#E8D2B5}
.plan.feat .btn:hover{background:#fff}
.flag{position:absolute;right:22px;top:22px;background:#E8D2B5;color:#590907;font-size:11px;font-weight:700;letter-spacing:.06em;padding:7px 13px;border-radius:999px}
.custom{display:inline-flex;align-items:center;gap:10px;margin-top:36px;font-weight:600;color:#590907;border-bottom:1.5px solid currentColor;padding-bottom:4px}
.custom svg{width:18px;height:18px;transition:transform .4s var(--ease)}.custom:hover svg{transform:translateX(5px)}
/* pricing tabs */
.ptabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:6px;margin-bottom:26px;border-radius:22px;background:rgba(89,9,7,.1);border:1.5px solid rgba(89,9,7,.25)}
.ptabs button{display:grid;gap:3px;justify-items:start;text-align:left;padding:14px 18px;border:0;border-radius:16px;background:transparent;color:#590907;cursor:pointer;transition:background .35s,color .35s}
.ptabs b{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(22px,2.2vw,32px);line-height:1}
.ptabs span{font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.ptabs button:hover{background:rgba(89,9,7,.12)}
.ptabs button[aria-selected="true"]{background:#590907;color:#E8D2B5}
.ptabs button:focus-visible{outline:2px solid #590907;outline-offset:3px}
.pane.on{animation:paneIn .6s var(--ease)}
@keyframes paneIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pnote{color:#3B3D35;line-height:1.6;margin:0 0 clamp(30px,3vw,44px);max-width:70ch}
.plan .price small{font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin-right:8px;vertical-align:.9em}
.plan.bonus{background:transparent;border:1.5px dashed rgba(89,9,7,.6)}
.reach{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 30px;margin-top:clamp(40px,4vw,60px);padding:24px clamp(20px,2.4vw,34px);border-radius:22px;background:#E8D2B5;color:#2b0403}
.reach p{font-size:16px;line-height:1.5}.reach p b{color:#590907}
.reach-links{display:flex;flex-wrap:wrap;gap:10px}
.reach-links a{padding:12px 18px;border-radius:999px;border:1.5px solid #590907;color:#590907;font-weight:600;font-size:14px;transition:background .3s,color .3s}
.reach-links a:hover{background:#590907;color:#E8D2B5}
.direct{margin-top:18px;font-size:14px;color:#A9B0BE}.direct a{color:#F2F4F7;border-bottom:1px solid #2B3242}.direct a:hover{color:var(--lime)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sheet p a{color:#F2F4F7}
@media (max-width:640px){.ptabs{gap:4px;padding:4px}.ptabs button{padding:12px 10px}.ptabs b{font-size:19px}.ptabs span{font-size:10px;letter-spacing:.04em}.reach-links a{flex:1 1 auto;text-align:center}}
@media (max-width:900px){
  .grid{grid-template-columns:1fr}
  .plan{min-height:0}.plan.feat{order:-1;transform:none}.plan.feat:hover{transform:translateY(-8px)}
  .plan .btn{margin-top:18px}
}

/* ============ 06 FOUNDER (A) ============ */
.founder{padding:clamp(90px,11vw,170px) 0 clamp(60px,8vw,110px)}
.fo-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,110px);align-items:center}
.portrait{position:relative;aspect-ratio:4/5;border-radius:28px;overflow:hidden;background:#05070d url("hook-lime.webp") 66% 50%/auto 135% no-repeat;border:1px solid #1C2230;box-shadow:0 50px 90px -30px rgba(0,0,0,.8)}
.portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,4,7,.75),transparent 45%);pointer-events:none}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.portrait figcaption{position:absolute;z-index:2;left:24px;right:24px;bottom:22px;display:flex;justify-content:space-between;align-items:flex-end;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#C9CED8;line-height:1.6}
.portrait figcaption span{font-family:var(--display);font-weight:900;font-size:30px;letter-spacing:.02em;color:#F2F4F7;line-height:.9}
.fo-copy h2{margin:22px 0 28px;line-height:.9}
.fo-copy .s{font-family:var(--script);color:var(--lime);font-size:clamp(70px,8vw,140px);font-weight:400;display:inline-block;margin-right:.1em}
.fo-copy .r{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(64px,8.6vw,150px);letter-spacing:-.005em}
.fo-copy p{color:#C9CED8;font-size:clamp(17px,1.45vw,21px);line-height:1.7;max-width:46ch;margin-bottom:18px}
.where{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:34px!important;font-size:14px!important;font-weight:600;color:#F2F4F7!important;letter-spacing:.01em}
.where .dot{width:9px;height:9px;border-radius:50%;background:#6b7385}
.where.live .dot{background:var(--lime);animation:pulse 2s infinite}
.where em{font-style:normal;font-weight:600;color:#A9B0BE;font-size:12px;letter-spacing:.04em;border:1px solid #2B3242;border-radius:999px;padding:5px 12px}
.where.live em{color:var(--lime);border-color:rgba(212,255,36,.4)}
@media (max-width:820px){.fo-grid{grid-template-columns:1fr}.portrait{aspect-ratio:1/1}}

/* ============ 07 FAQ (A) ============ */
.faq{padding:clamp(50px,7vw,100px) 0 clamp(90px,11vw,160px)}
.faq-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(28px,6vw,100px);align-items:start}
.faq-head p{color:var(--muted);margin-top:18px;line-height:1.65}
.a-h2{font-family:var(--serif);font-weight:600;font-size:clamp(46px,5.4vw,92px);line-height:.95;letter-spacing:-.01em}
.a-h2 em{display:block;font-family:var(--script);font-style:normal;font-weight:400;color:var(--lime);font-size:1.18em;line-height:1.05}
.faq-head{position:sticky;top:120px}
.qa{border-bottom:1px solid #1C2230}
.qa:first-child{border-top:1px solid #1C2230}
.qa button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:24px;background:none;border:0;padding:clamp(20px,2.2vw,30px) 0;cursor:pointer;text-align:left;font-size:clamp(18px,1.7vw,24px);font-weight:500;color:#F2F4F7;transition:color .3s}
.qa button:hover{color:var(--lime)}
.qa button svg{flex:none;width:34px;height:34px;padding:8px;border:1px solid #2B3242;border-radius:50%;transition:transform .5s var(--ease),background .3s,color .3s,border-color .3s}
.qa button[aria-expanded="true"] svg{transform:rotate(45deg);background:var(--lime);color:#030407;border-color:var(--lime)}
.ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.ans>div{overflow:hidden}
.ans.open{grid-template-rows:1fr}
.ans p{padding:0 56px clamp(22px,2.4vw,32px) 0;color:#C9CED8;line-height:1.75;font-size:16.5px;max-width:60ch}
@media (max-width:860px){.faq-grid{grid-template-columns:1fr}.faq-head{position:static}.ans p{padding-right:0}}

/* ============ 08 CONTACT (A) ============ */
.contact{position:relative;padding:clamp(90px,10vw,150px) 0 90px;overflow:hidden}
.contact::before{content:"";position:absolute;left:-18%;bottom:-8%;width:70%;aspect-ratio:1.3;background:radial-gradient(closest-side,rgba(46,84,255,.16),transparent 70%);pointer-events:none}
.contact .g{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(36px,5vw,90px);align-items:start}
.kick{display:inline-block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--lime);border:1px solid rgba(212,255,36,.35);padding:8px 14px;border-radius:999px}
.contact h2{margin:24px 0 0;line-height:.92}
.contact h2 .s{display:block;font-family:var(--script);font-weight:400;color:var(--lime);font-size:clamp(66px,7.2vw,128px);line-height:1.05;padding-left:.04em}
.contact h2 .r{display:block;font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(52px,6vw,108px);letter-spacing:-.005em}
.contact .lead{color:#C9CED8;line-height:1.7;max-width:44ch;margin-top:24px;font-size:17px}
.promise{margin-top:34px;border-top:1px solid #1C2230}
.promise li{display:grid;grid-template-columns:96px 1fr;align-items:center;padding:18px 0;border-bottom:1px solid #1C2230}
.promise b{font-family:var(--display);font-weight:700;font-size:44px;line-height:1;color:var(--cobalt);letter-spacing:.01em}
.promise span{color:#C9CED8;font-size:15.5px}
.book{display:inline-flex;align-items:center;gap:10px;margin-top:30px;font-weight:600;border-bottom:1px solid var(--lime);padding-bottom:4px;color:#F2F4F7;transition:color .3s}
.book:hover{color:var(--lime)}.book svg{width:18px;height:18px}
.mini-v{margin-top:36px;display:flex;gap:18px;align-items:center}
.mini-v button{flex:none;padding:0;border:0;background:none;cursor:pointer;border-radius:14px;transition:transform .5s var(--ease)}
.mini-v button:hover{transform:translateY(-4px)}
.mini-v video{display:block;width:132px;aspect-ratio:9/16;object-fit:cover;border-radius:14px;background:#11141B;border:1px solid #1C2230;box-shadow:0 0 40px rgba(212,255,36,.18)}
.mini-v figcaption{font-size:14px;color:#F2F4F7;line-height:1.5}.mini-v figcaption span{color:#8F96A6;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.brief{background:linear-gradient(180deg,#0B0E15,#07090E);border:1px solid #1C2230;border-radius:28px;padding:clamp(22px,3vw,44px);display:grid;gap:30px;box-shadow:0 50px 90px -20px rgba(0,0,0,.6)}
.steps-ui{display:flex;gap:6px}.steps-ui i{flex:1;height:3px;border-radius:3px;background:#1C2230;transition:background .4s}.steps-ui i.on{background:var(--lime)}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{display:flex;align-items:baseline;gap:12px;padding:0;margin-bottom:16px;font-family:var(--serif);font-weight:600;font-size:clamp(22px,2vw,28px);color:#F2F4F7}
legend span{font:500 11px var(--sans);letter-spacing:.18em;color:var(--cobalt)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chips span{display:inline-block;padding:12px 18px;border-radius:999px;border:1px solid #2B3242;color:#C9CED8;font-size:14px;transition:background .25s,border-color .25s,color .25s}
.chips label:hover span{border-color:var(--cobalt);color:#fff}
.chips input:checked+span{background:var(--lime);border-color:var(--lime);color:#030407;font-weight:600}
.chips input:focus-visible+span{outline:2px solid var(--lime);outline-offset:3px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fl{position:relative}.fl.wide{grid-column:1/-1}
.fl input{width:100%;font:inherit;font-size:16px;color:#F2F4F7;background:#0F131C;border:1px solid #232A3A;border-radius:14px;padding:26px 16px 10px;transition:border-color .25s,background .25s}
.fl label{position:absolute;left:17px;top:18px;font-size:15px;color:#8F96A6;pointer-events:none;transition:transform .25s var(--ease),font-size .25s,color .25s;transform-origin:left top}
.fl input:focus{outline:none;border-color:var(--cobalt);background:#111727}
.fl input:focus+label,.fl input:not(:placeholder-shown)+label{transform:translateY(-10px);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt)}
.fl input:user-invalid{border-color:#FF6B6B}
.send{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;border-radius:999px;background:var(--lime);color:#030407;padding:21px 28px;font:700 15px var(--sans);letter-spacing:.04em;cursor:pointer;transition:box-shadow .3s}
.send svg{width:22px;height:22px;transition:transform .3s var(--ease)}
.send:hover{box-shadow:0 14px 44px rgba(212,255,36,.28)}.send:hover svg{transform:translateX(4px)}
.fine{margin:-14px 0 0;font-size:12px;color:#8F96A6;text-align:center}
.formmsg{margin:-14px 0 0;color:var(--lime);min-height:1.2em;font-size:14px;text-align:center}
@media (max-width:900px){.contact .g{grid-template-columns:1fr}.mini-v video{width:104px}}
@media (max-width:560px){.fields{grid-template-columns:1fr}.chips span{padding:11px 15px;font-size:13px}.promise li{grid-template-columns:78px 1fr}.promise b{font-size:38px}}

footer{overflow:hidden;padding:20px 0 calc(28px + env(safe-area-inset-bottom,0px))}
.giant{font-family:var(--script);font-size:clamp(130px,25vw,440px);line-height:1;color:transparent;-webkit-text-stroke:1px #2B3242;text-align:center;margin:20px 0 10px;white-space:nowrap;transition:-webkit-text-stroke-color .6s}
footer:hover .giant{-webkit-text-stroke-color:rgba(212,255,36,.5)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#A9B0BE}
.foot a{display:inline-block;padding:6px 0}
.foot a:hover{color:var(--lime)}
.specnote{margin-bottom:18px;font-size:12px;line-height:1.6;color:#8F96A6;max-width:none}

/* sticky mobile CTA */
.sticky-cta{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:85;display:none;align-items:center;justify-content:center;gap:12px;padding:18px;border-radius:999px;background:var(--lime);color:#030407;font-weight:700;font-size:15px;box-shadow:0 18px 44px rgba(0,0,0,.5);transform:translateY(160%);transition:transform .7s var(--ease)}
.sticky-cta svg{width:18px;height:18px}
.sticky-cta.on{transform:none}
@media (max-width:860px){.sticky-cta{display:flex}footer{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:600;background:rgba(3,4,7,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top,0px) + 56px) 16px calc(env(safe-area-inset-bottom,0px) + 24px);gap:clamp(8px,3vw,40px)}
.lightbox.on{display:flex}
.lb-stage{display:grid;justify-items:center;gap:14px;max-height:100%;min-width:0}
.lightbox video{max-width:100%;max-height:calc(100svh - 160px);aspect-ratio:9/16;background:#000;border-radius:14px;box-shadow:0 40px 100px rgba(0,0,0,.7)}
.lb-stage p{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#C9CED8;text-align:center}
.lb-x,.lb-n{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.04);color:#fff;font:500 18px var(--sans);cursor:pointer;flex:none;transition:background .3s,color .3s}
.lb-x{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:16px}
.lb-x:hover,.lb-n:hover{background:var(--lime);color:#030407;border-color:var(--lime)}
@media (max-width:640px){.lb-n{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 14px)}.lb-n.prev{left:16px}.lb-n.next{right:16px}.lightbox{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 80px)}.lightbox video{max-height:calc(100svh - 230px)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  body::after,.loader{display:none}
  .rv,.hero .pill,.hero .lead,.hero .ctas,.hero .origin,.phone{opacity:1!important;transform:none!important}
  .hero h1 .ln>span{transform:none!important}
  .hero-bg{opacity:.32}
  .pane.on{animation:none}
  .statement .wd{color:var(--fg)}
}