:root{
  --ink-950:#0A0908; --ink-900:#12100E; --ink-800:#1C1915; --ink-600:#3A342C;
  --gold-400:#E3A24D; --gold-300:#F5B95C; --champagne-200:#FCD58A;
  --ivory-50:#F6F0E6; --stone-400:#A39A8C; --paper:#F1EEE8; --line:rgba(246,240,230,.12);
  --grad-gold-text:linear-gradient(100deg,#B07A35 0%,#E3A24D 30%,#F5C979 55%,#D99A44 80%,#B07A35 100%);
  --glass-fill:rgba(246,240,230,.06); --glass-stroke:rgba(246,240,230,.13); --glass-hi:rgba(255,255,255,.18);
  --f-display:"Unbounded",sans-serif; --f-body:"Geist",system-ui,sans-serif; --f-mono:"Geist Mono",ui-monospace,monospace; --f-hand:"Instrument Serif",serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(18px,3.4vw,52px);
  --side:7.5%;                                             /* desktop side margin: content uses 85% of the screen */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='28'%3E%3Cpath d='M1 2 L22 23 L43 2' fill='none' stroke='%23E3A24D' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink-950)}
body{background:var(--ink-950);color:var(--ivory-50);font-family:var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--gold-400);outline-offset:4px}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.05;mix-blend-mode:overlay;background-image:var(--grain)}
.mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.gold-text{background:var(--grad-gold-text);-webkit-background-clip:text;background-clip:text;color:transparent}
/* headlines in Unbounded: its word space is narrow, so give the words a little more room */
h1,h2,h3,.mf-text,.wt-title,.fn-title,.ns-links a,.ph-title,.story-copy h3,.vc-text{word-spacing:.1em}
.glass{position:relative;background:var(--glass-fill);border:1px solid var(--glass-stroke);-webkit-backdrop-filter:blur(22px) saturate(120%);backdrop-filter:blur(22px) saturate(120%);box-shadow:inset 0 1px 0 var(--glass-hi),0 24px 50px -24px rgba(0,0,0,.7)}

/* ---------- deep space (WebGL, fixed behind the hero) ---------- */
.space{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
.space.off{visibility:hidden}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;border-radius:999px;height:52px;padding:0 26px;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;isolation:isolate}
.btn .roll{position:relative;display:inline-block;overflow:hidden;height:1.25em;line-height:1.25em}
.btn .roll span{display:block;transition:transform .55s var(--ease)}
.btn .roll span+span{position:absolute;left:0;top:100%}
.btn:hover .roll span{transform:translateY(-100%)}
.btn-glass{color:var(--ivory-50)}
.btn-glass:hover{border-color:rgba(246,240,230,.32)}
.cta-pill{position:relative;display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 30px;border-radius:999px;font-family:var(--f-body);font-weight:600;font-size:18px;letter-spacing:-.005em;color:#1a1206;white-space:nowrap;background:linear-gradient(100deg,#B98336 0%,#D99A44 30%,#F2C477 62%,#F7D79A 82%,#E3A24D 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 6px rgba(110,74,31,.35),0 14px 34px -14px rgba(227,162,77,.55);overflow:hidden;isolation:isolate}
.cta-pill::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-130%);transition:transform .9s var(--ease);z-index:-1}
.cta-pill:hover::after{transform:translateX(130%)}
.cta-pill .arr{display:inline-block;transition:transform .5s var(--ease)}
.cta-pill:hover .arr{transform:translateX(4px)}
.cta-pill.dark{background:#16130F;color:#F1EEE8;box-shadow:0 14px 34px -16px rgba(10,9,8,.6);font-size:15px;height:52px}
.reel-badge{position:relative;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(227,162,77,.35);background:rgba(18,16,14,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:border-color .4s}
.reel-badge:hover{border-color:rgba(227,162,77,.7)}
.reel-badge svg.ringtxt{position:absolute;inset:0;width:100%;height:100%;animation:spin 14s linear infinite}
.reel-badge svg.ringtxt text{font-family:var(--f-mono);font-size:7.4px;letter-spacing:2.2px;fill:var(--champagne-200);text-transform:uppercase}
.reel-badge .pl{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,#F2C477,#B98336);box-shadow:inset 0 1px 0 rgba(255,255,255,.4);transition:transform .5s var(--ease)}
.reel-badge:hover .pl{transform:scale(1.15)}
.reel-badge .pl svg{width:10px;fill:#1a1206;margin-left:2px}
@keyframes spin{to{transform:rotate(360deg)}}
.creator-link{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:14px;color:var(--stone-400)}
.creator-link a{position:relative;color:var(--ivory-50);font-weight:500;padding-bottom:3px}
.creator-link a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold-400);transform:scaleX(.35);transform-origin:left;transition:transform .6s var(--ease)}
.creator-link a:hover::after{transform:scaleX(1)}
.creator-link .ar{display:inline-block;color:var(--gold-300);transition:transform .5s var(--ease)}
.creator-link a:hover .ar{transform:translate(3px,-3px)}
.creator-link .dot{width:6px;height:6px;border-radius:50%;background:var(--gold-400);box-shadow:0 0 0 4px rgba(227,162,77,.14)}

/* ---------- cursor ---------- */
.cursor{position:fixed;left:0;top:0;z-index:300;pointer-events:none;opacity:0;transition:opacity .3s}
.cursor.on{opacity:1}
.c-dot{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--ivory-50);mix-blend-mode:difference}
.c-ring{position:absolute;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:1px solid rgba(246,240,230,.55);display:grid;place-items:center;transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease),background .4s,border-color .4s}
.c-ring span{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-950);opacity:0;transition:opacity .25s}
.cursor.hover .c-ring{width:62px;height:62px;margin:-31px 0 0 -31px;border-color:rgba(227,162,77,.7)}
.cursor.label .c-ring{width:78px;height:78px;margin:-39px 0 0 -39px;background:var(--ivory-50);border-color:var(--ivory-50)}
.cursor.label .c-ring span{opacity:1}
.cursor.label .c-dot{opacity:0}
@media (pointer:coarse){.cursor{display:none}}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:250;background:var(--ink-950);display:grid;place-items:center}
.loader svg{width:min(140px,30vw);overflow:visible}
.loader path{fill:rgba(227,162,77,0);stroke:var(--gold-400);stroke-width:2.4;stroke-linejoin:round}
.loader .count{position:absolute;left:var(--gutter);bottom:calc(var(--gutter) - 6px);font-family:var(--f-display);font-weight:800;font-size:clamp(48px,8vw,110px);line-height:1;color:var(--ink-600)}
.loader .tag{position:absolute;right:var(--gutter);bottom:var(--gutter);color:var(--stone-400)}

/* ---------- nav: one floating capsule of matte glass; a gold pill marks where you are and follows the hover ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:60;padding:14px var(--side);pointer-events:none;transition:transform .6s var(--ease)}
.nav.hide{transform:translateY(-130%)}
.nav-bar{position:relative;display:flex;align-items:center;gap:18px;max-width:1240px;height:66px;margin:0 auto;padding:0 9px 0 20px;border-radius:999px;pointer-events:auto;background:rgba(14,12,10,.42);border:1px solid rgba(246,240,230,.1);-webkit-backdrop-filter:blur(18px) saturate(130%);backdrop-filter:blur(18px) saturate(130%);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 20px 44px -26px rgba(0,0,0,.85);transition:height .5s var(--ease),background .5s,box-shadow .5s,border-color .5s}
.nav.scrolled .nav-bar{height:58px;background:rgba(14,12,10,.8);border-color:rgba(246,240,230,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 50px -24px rgba(0,0,0,.95)}
.brand{display:flex;align-items:center;flex:none}
.brand img{width:116px;height:auto;transition:width .5s var(--ease)}
.nav.scrolled .brand img{width:104px}
.nav-links{position:relative;display:flex;align-items:center;margin:0 auto;padding:4px}
.nav-links a{position:relative;z-index:1;padding:10px 17px;border-radius:999px;font-weight:500;font-size:14.5px;color:rgba(246,240,230,.68);transition:color .35s}
.nav-links a:hover,.nav-links a.on{color:var(--ivory-50)}
.nav-links a.on::after{content:"";position:absolute;left:50%;bottom:4px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--gold-300);box-shadow:0 0 8px var(--gold-300)}
.nav-blob{position:absolute;left:0;top:4px;bottom:4px;width:var(--bw,0px);border-radius:999px;background:rgba(246,240,230,.075);box-shadow:inset 0 0 0 1px rgba(227,162,77,.32),inset 0 1px 0 rgba(255,255,255,.08);transform:translateX(var(--bx,0px));opacity:var(--bo,0);transition:transform .55s var(--ease),width .55s var(--ease),opacity .35s}
.nav-r{display:flex;align-items:center;gap:8px;flex:none}
.nav-cta{height:48px;padding:0 22px;font-size:15.5px}
.nav-menu{display:none;position:relative;width:46px;height:46px;border-radius:50%;background:rgba(246,240,230,.06);border:1px solid var(--glass-stroke)}
.nav-menu i{position:absolute;left:14px;right:14px;height:1.5px;border-radius:2px;background:var(--ivory-50);transition:transform .45s var(--ease),top .45s var(--ease)}
.nav-menu i:first-child{top:19px}.nav-menu i:last-child{top:26px}
.nav-menu[aria-expanded=true] i:first-child{top:22px;transform:rotate(45deg)}
.nav-menu[aria-expanded=true] i:last-child{top:22px;transform:rotate(-45deg)}
/* how far down the page you are, along the capsule's lower edge */
.nav-prog{position:absolute;left:26px;right:26px;bottom:-1px;height:1.5px;border-radius:2px;background:linear-gradient(90deg,#B07A35,#F5C979);transform:scaleX(var(--p,0));transform-origin:left;opacity:.9;pointer-events:none}
/* the phone menu */
.nav-sheet{position:fixed;inset:0;z-index:59;display:flex;flex-direction:column;justify-content:space-between;padding:110px var(--gutter) 36px;background:rgba(8,7,6,.95);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);clip-path:circle(0 at calc(100% - 46px) 42px);visibility:hidden;transition:clip-path .8s var(--ease),visibility 0s .8s}
.nav-sheet.open{clip-path:circle(150% at calc(100% - 46px) 42px);visibility:visible;transition:clip-path .8s var(--ease)}
.ns-links{display:flex;flex-direction:column}
.ns-links a{display:flex;align-items:baseline;gap:14px;padding:6px 0;font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(34px,10.5vw,58px);line-height:1.1;letter-spacing:-.02em;color:var(--ivory-50);opacity:0;transform:translateY(26px);transition:opacity .4s,transform .7s var(--ease)}
.ns-links a .mono{font-family:var(--f-mono);font-weight:400;font-size:11px;letter-spacing:.14em;color:var(--gold-300)}
.nav-sheet.open .ns-links a{opacity:1;transform:none;transition-delay:calc(.18s + var(--k) * .06s)}
.ns-foot{display:flex;flex-direction:column;align-items:flex-start;gap:14px;opacity:0;transition:opacity .5s .45s}
.nav-sheet.open .ns-foot{opacity:1}
.ns-mail{font-size:18px;color:var(--ivory-50)}
.ns-foot .mono{color:var(--stone-400)}

/* ---------- WhatsApp: a floating button right above Ask Mania AI ---------- */
.wa-fab{position:relative;display:flex;align-items:center;height:56px;border-radius:999px;background:rgba(18,16,14,.66);border:1px solid rgba(37,211,102,.35);-webkit-backdrop-filter:blur(24px) saturate(120%);backdrop-filter:blur(24px) saturate(120%);box-shadow:inset 0 1px 0 var(--glass-hi),0 18px 36px -16px rgba(0,0,0,.8);color:var(--ivory-50);transition:border-color .4s,box-shadow .4s,transform .5s var(--ease)}
.wa-fab:hover{border-color:rgba(37,211,102,.7);box-shadow:inset 0 1px 0 var(--glass-hi),0 18px 36px -16px rgba(0,0,0,.8),0 0 30px -6px rgba(37,211,102,.45);transform:translateY(-2px)}
.wa-label{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;font-size:10.5px;transition:max-width .6s var(--ease),opacity .35s,padding .6s var(--ease)}
.wa-fab:hover .wa-label,.wa-fab:focus-visible .wa-label{max-width:200px;padding-left:20px;opacity:1}
.wa-ic{position:relative;display:grid;place-items:center;width:54px;height:54px;flex:none;border-radius:50%}
.wa-ic svg{width:25px;height:25px;fill:#25D366}
.wa-ic::after{content:"";position:absolute;inset:4px;border-radius:50%;animation:wapulse 2.6s ease-out infinite}
@keyframes wapulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}70%,100%{box-shadow:0 0 0 14px rgba(37,211,102,0)}}
.ai:has(.ai-panel:not([hidden])) .wa-fab{display:none}
/* (it sits in the floating group's markup so every page gets it, but lives on its own in the bottom left corner) */
.up-fab{position:fixed;left:22px;bottom:22px;z-index:80;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:rgba(18,16,14,.66);border:1px solid var(--glass-stroke);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:var(--gold-300);font-size:18px;box-shadow:inset 0 1px 0 var(--glass-hi),0 16px 32px -16px rgba(0,0,0,.8);opacity:0;transform:translateY(14px) scale(.85);pointer-events:none;transition:opacity .4s,transform .6s var(--ease),background .35s,color .35s}
.show-up .up-fab{opacity:1;transform:none;pointer-events:auto}
.up-fab:hover{background:linear-gradient(140deg,#F2C477,#B98336);color:#1a1206}
.up-ring{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);transform:rotate(-90deg);pointer-events:none}
.up-ring circle{fill:none;stroke:#E3A24D;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:141.4;stroke-dashoffset:calc(141.4 * (1 - var(--p,0)))}
.ai:has(.ai-panel:not([hidden])) .up-fab{display:none}

/* ---------- hero ---------- */
.hero{position:relative;z-index:1;overflow:hidden;isolation:isolate}
/* the cursor lights up a faint chevron grid (brand texture) over the stars */
.pat-lit{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:var(--chev);background-size:44px 28px;background-position:center;opacity:0;transition:opacity .5s;-webkit-mask-image:radial-gradient(220px circle at var(--mx,-999px) var(--my,-999px),#000 0%,rgba(0,0,0,.3) 45%,transparent 75%);mask-image:radial-gradient(220px circle at var(--mx,-999px) var(--my,-999px),#000 0%,rgba(0,0,0,.3) 45%,transparent 75%)}
.hero.pointer .pat-lit{opacity:.38}

.fold{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(78px + 1.2vh) var(--side) 2.5vh}
.copy{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none}
/* the copy column spans the full width; only its own controls take the pointer, so the cosmos behind stays hoverable */
.copy a,.copy button,.trust{pointer-events:auto}
.trust{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;font-size:12.5px;color:rgba(246,240,230,.8)}
.trust .avs{display:flex}
.trust .avs i{width:24px;height:24px;border-radius:50%;margin-left:-7px;border:2px solid #1a1714;background-size:cover;background-position:center}
.trust .avs i:first-child{margin-left:0}
.trust b{color:var(--gold-300);font-weight:500}
.h1{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:min(6.2vw,9vh);line-height:1;letter-spacing:-.02em;margin:14px 0 10px;white-space:nowrap}
.h1 .ln{display:inline-block;overflow:hidden;padding:.03em .02em .07em;vertical-align:top}
.h1 .ch{display:inline-block;will-change:transform}
.sub{font-size:clamp(15px,1.15vw,17.5px);line-height:1.63;color:rgba(246,240,230,.66);max-width:52ch}
.sub em{font-family:var(--f-hand);font-style:italic;font-size:1.22em;color:var(--ivory-50)}
.ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:center}

/* ---------- orb (hero-v5: Figma shell + gyro rings in one WebGL scene) ---------- */
/* the orb sits in a fixed layer; JS moves and scales it onto the hero slot or the Services slot (--orb = layer size) */
.orb-layer{position:fixed;left:0;top:0;z-index:5;width:var(--orb,400px);height:var(--orb,400px);pointer-events:none;transform-origin:50% 50%;will-change:transform}
.orb-layer.flying .orb-tilt{filter:drop-shadow(0 0 46px rgba(245,185,92,.38))}
/* --orb is the visible glass sphere. The canvas box is 1.3× the shell frame (room for the hover opening, see PAD in
   hero-v7-orb.js), so the sphere fills ~68% of it and the box overflows the slot */
.orb-slot{--orb:clamp(220px,calc((100svh - 470px) * .92),460px);position:relative;width:var(--orb);height:var(--orb);margin:1.4vh 0 1.2vh;flex:none}
.sculpture{position:absolute;left:50%;top:50%;width:calc(var(--orb) / .89 * 1.3);aspect-ratio:1;transform:translate(-50%,-50%);perspective:1100px;pointer-events:none}
.orb-float{position:absolute;inset:0}
.orb-tilt{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
/* inside the tilting 3D context every layer gets its own depth, so Safari can't paint the frosted disc or the halo over
   the WebGL orb (coplanar layers there sort unreliably once the tilt moves) */
/* a dark frosted disc behind the glass keeps the orb readable over stars and silk */
.glass-blur{position:absolute;inset:16.5%;border-radius:50%;-webkit-backdrop-filter:blur(10px) saturate(115%);backdrop-filter:blur(10px) saturate(115%);background:radial-gradient(circle,rgba(14,11,8,.55) 0%,rgba(14,11,8,.3) 62%,rgba(246,240,230,.03) 100%);transform:translateZ(-2px)}
/* Safari (and every iPhone browser) can't run a backdrop blur inside a 3D context: it blurs the orb in front instead, so
   there the disc is a plain, slightly denser gradient */
.webkit .glass-blur,.webkit .sculpture.is-open .glass-blur{-webkit-backdrop-filter:none;backdrop-filter:none;background:radial-gradient(circle,rgba(14,11,8,.72) 0%,rgba(14,11,8,.42) 62%,rgba(246,240,230,.04) 100%)}
@supports (font: -apple-system-body){.glass-blur,.sculpture.is-open .glass-blur{-webkit-backdrop-filter:none;backdrop-filter:none;background:radial-gradient(circle,rgba(14,11,8,.72) 0%,rgba(14,11,8,.42) 62%,rgba(246,240,230,.04) 100%)}}
.orb-static{position:absolute;inset:11.5%;width:77%;height:77%;user-select:none;-webkit-user-drag:none;transition:opacity .55s ease}
.orb-parts{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateZ(2px)}
.layers-ready .orb-static{opacity:0}
.layers-ready .orb-parts{opacity:1;visibility:visible;transition:opacity .6s ease}
.orb-kinetic{position:absolute;inset:0;width:100%;height:100%;display:block}
/* the SVG is the shell's source geometry; once WebGL draws it, the SVG itself stays hidden */
.orb-shell-figma{position:absolute;left:0;top:50%;width:100%;height:auto;transform:translateY(-50%);overflow:visible;pointer-events:none}
.layers-ready .orb-shell-figma{visibility:hidden}
/* hover: a warm halo blooms behind the glass while the shell opens (hero-v7-orb.js) */
.orb-tilt::before{content:"";position:absolute;inset:14.5%;border-radius:50%;background:radial-gradient(circle,rgba(245,185,92,.34) 0%,rgba(227,162,77,.14) 42%,transparent 68%);filter:blur(18px);opacity:0;transform:translateZ(-3px) scale(.86);transition:opacity .9s var(--ease),transform 1.2s var(--ease);pointer-events:none}
.sculpture.is-open .orb-tilt::before{opacity:1;transform:translateZ(-3px) scale(1.12)}
.sculpture.is-open .glass-blur{background:radial-gradient(circle,rgba(70,44,14,.5) 0%,rgba(14,11,8,.3) 62%,rgba(246,240,230,.03) 100%)}
.glass-blur{transition:background .9s var(--ease)}
/* Mania AI thinking: the big orb pulses gold with the mini one */
.sculpture.thinking .orb-tilt{animation:orb-think .9s ease-in-out infinite}
@keyframes orb-think{50%{filter:brightness(1.18) drop-shadow(0 0 28px rgba(245,185,92,.35))}}

/* ---------- two layouts to compare (?layout=top | ?layout=split) ---------- */
/* orb on top: the orb leads, the headline follows */
[data-layout="top"] .orb-slot{--orb:clamp(205px,calc((100svh - 500px) * .92),425px);order:-1;margin:1vh 0 2.2vh}
/* split: copy left-aligned on the left, the orb owns the right */
[data-layout="split"] .copy{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(24px,3.5vw,64px);align-items:center;align-content:center;justify-items:start;text-align:left;width:100%}
[data-layout="split"] .copy>*{grid-column:1}
[data-layout="split"] .orb-slot{--orb:min(33vw,calc((100svh - 190px) * .92),570px);grid-column:2;grid-row:1 / span 5;margin:0}
[data-layout="split"] .h1{font-size:min(5.1vw,10.8vh);white-space:normal;margin:18px 0 16px}
[data-layout="split"] .h1 .ln{display:block}
[data-layout="split"] .sub{max-width:44ch}
[data-layout="split"] .ctas{justify-content:flex-start;margin-top:26px}
[data-layout="split"] .creator-link{margin-top:16px}

/* ---------- cosmos: hover a planet, star or galaxy for a number ---------- */
.cosmos{position:absolute;inset:0;z-index:2;pointer-events:none}
.cobj{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);pointer-events:auto;cursor:pointer;border-radius:50%;will-change:transform}
.cobj .art{position:absolute;inset:0;transition:transform .7s var(--ease),filter .7s}
.cobj:hover .art,.cobj:focus-visible .art,.cobj.open .art{transform:scale(1.16);filter:brightness(1.35)}
.cobj:focus-visible{outline-offset:8px}
/* a faint ping now and then, so people know they can be explored */
.cobj::after{content:"";position:absolute;inset:-14%;border-radius:50%;border:1px solid rgba(252,213,138,.4);opacity:0;pointer-events:none;animation:ping 9s var(--ease) infinite;animation-delay:var(--d,0s)}
@keyframes ping{0%{transform:scale(.55);opacity:0}6%{opacity:.32}32%,100%{transform:scale(1.4);opacity:0}}
.cobj:hover::after,.cobj.open::after{animation:none}
/* info card + leader line, opens toward the centre */
.ccard{position:absolute;top:50%;left:calc(100% + 44px);display:flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;border-radius:16px;white-space:nowrap;text-align:left;pointer-events:none;opacity:0;transform:translate(-10px,-50%);transition:opacity .45s var(--ease),transform .7s var(--ease);background:rgba(28,25,21,.55);border:1px solid var(--glass-stroke);-webkit-backdrop-filter:blur(20px) saturate(120%);backdrop-filter:blur(20px) saturate(120%);box-shadow:inset 0 1px 0 var(--glass-hi),0 24px 50px -24px rgba(0,0,0,.8)}
.ccard::before{content:"";position:absolute;right:calc(100% + 6px);top:50%;width:38px;height:1px;background:linear-gradient(90deg,rgba(252,213,138,0),rgba(252,213,138,.75));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease) .05s}
.cobj.flip .ccard{left:auto;right:calc(100% + 44px);transform:translate(10px,-50%)}
.cobj.flip .ccard::before{right:auto;left:calc(100% + 6px);background:linear-gradient(270deg,rgba(252,213,138,0),rgba(252,213,138,.75));transform-origin:right}
.cobj:hover .ccard,.cobj:focus-visible .ccard,.cobj.open .ccard{opacity:1;transform:translate(0,-50%)}
.cobj:hover .ccard::before,.cobj:focus-visible .ccard::before,.cobj.open .ccard::before{transform:scaleX(1)}
/* on a touch screen the pinned card is lifted out into a fixed layer above the orb (main.js), and follows its object */
.ccard.ctip{position:fixed;left:0;top:0;z-index:58;opacity:0;transform:none;transition:opacity .45s var(--ease);will-change:transform}
.ccard.ctip.on{opacity:1}
.ccard.ctip::before{transform:scaleX(1)}
.ccard.ctip.flip::before{right:auto;left:calc(100% + 6px);background:linear-gradient(270deg,rgba(252,213,138,0),rgba(252,213,138,.75));transform-origin:right}
@media (hover:none){.cobj.open .ccard{opacity:0!important}}
.ccard small i{font-style:normal;color:var(--champagne-200)}

/* galaxy: spiral arms drawn in SVG, tilted into an ellipse */
.galaxy .gal{position:absolute;inset:0;transform:rotate(-26deg) scaleY(.44)}
.galaxy svg{width:100%;height:100%;overflow:visible;animation:spin 220s linear infinite}
/* ringed gold planet */
.planet-ring .ball{position:absolute;inset:24%;border-radius:50%;background:radial-gradient(circle at 34% 30%,#FCE3B0 0%,#E9B45E 20%,#A8732F 50%,#3A2410 80%,#140d06 100%);box-shadow:inset -6px -8px 14px rgba(0,0,0,.55),0 0 22px rgba(227,162,77,.16)}
.planet-ring .rg{position:absolute;left:-4%;right:-4%;top:42%;height:16%;border-radius:50%;border:1.5px solid rgba(252,213,138,.6);box-shadow:0 0 0 3px rgba(227,162,77,.1),inset 0 0 0 3px rgba(227,162,77,.12);transform:rotate(-16deg)}
.planet-ring .rg.back{clip-path:inset(0 0 50% 0)}
.planet-ring .rg.front{clip-path:inset(50% 0 0 0)}
/* bright star with a four-point flare */
.star .tw{position:absolute;inset:0;animation:twinkle 4.5s ease-in-out infinite}
.star .core{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px rgba(255,236,200,.9),0 0 26px 6px rgba(227,162,77,.26)}
.star .fl{position:absolute;left:0;right:0;top:50%;height:1.4px;margin-top:-.7px;background:linear-gradient(90deg,transparent,rgba(255,240,214,.9) 50%,transparent)}
.star .fl.v{transform:rotate(90deg)}
.star .fl.d1{transform:rotate(45deg) scaleX(.42);opacity:.55}
.star .fl.d2{transform:rotate(-45deg) scaleX(.42);opacity:.55}
@keyframes twinkle{50%{transform:scale(.8) rotate(10deg);opacity:.72}}
/* constellation: a growth chart drawn in stars */
.cluster svg{width:100%;height:100%;overflow:visible}
.cluster .lines{fill:none;stroke:rgba(252,213,138,.55);stroke-width:1;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.1s var(--ease)}
.cluster:hover .lines,.cluster:focus-visible .lines,.cluster.open .lines{stroke-dashoffset:0}
.cluster circle{fill:#FFF3DC;filter:drop-shadow(0 0 3px rgba(252,213,138,.9))}
.cluster circle:nth-child(odd){animation:dim 3.6s ease-in-out infinite}
.cluster circle:nth-child(3n){animation-delay:-1.8s}
@keyframes dim{50%{opacity:.45}}
/* small banded planet */
.planet-band .ball{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,240,220,.38),transparent 42%),repeating-linear-gradient(168deg,#C27A3E 0 9%,#8C4A22 9% 15%,#D99A55 15% 21%,#6E3A1A 21% 29%);box-shadow:inset -7px -6px 12px rgba(0,0,0,.7),0 0 16px rgba(217,130,70,.18)}
/* comet */
.comet .cm{position:absolute;inset:0;transform:rotate(-24deg);animation:drift 9s ease-in-out infinite}
.comet .head{position:absolute;right:12%;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px rgba(255,230,190,.8)}
.comet .tail{position:absolute;right:14%;top:50%;width:78%;height:3px;margin-top:-1.5px;border-radius:3px;background:linear-gradient(90deg,transparent,rgba(252,213,138,.6));filter:blur(.6px)}
@keyframes drift{50%{translate:6px -3px}}

/* ---------- reels: the carousel stands on a gold planet's horizon ---------- */
.reels{position:relative;height:clamp(500px,72vh,680px)}
.horizon{position:absolute;z-index:0;left:50%;top:59%;width:max(260vw,2400px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle closest-side,#080706 90%,#100b07 95.5%,#24180c 99%,#4a3217 100%);
  box-shadow:0 0 0 1px rgba(252,213,138,.38),0 -4px 22px -2px rgba(245,185,92,.38),0 -40px 120px -24px rgba(227,162,77,.2)}
.horizon::after{content:"";position:absolute;inset:0;border-radius:50%;background-image:var(--grain);opacity:.07}
/* sunlight pooling on the rim, top centre */
.horizon .atmo{position:absolute;left:50%;top:0;width:34%;height:9%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse 50% 40% at 50% 0%,rgba(252,213,138,.32),transparent 70%)}
.stage{position:absolute;left:0;right:0;top:3%;height:70%;z-index:2;perspective:1100px;perspective-origin:50% 35%;touch-action:pan-y;cursor:grab}
.stage:active{cursor:grabbing}
.ring{position:absolute;left:50%;top:50%;transform-style:preserve-3d}
.reel{position:absolute;left:0;top:0;width:var(--cw);height:calc(var(--cw)*16/9);margin:calc(var(--cw)*-8/9) 0 0 calc(var(--cw)/-2);border-radius:18px;will-change:transform,opacity;backface-visibility:hidden}
.reel .in{position:absolute;inset:0;border-radius:18px;overflow:hidden;background:#1a1714;box-shadow:0 30px 60px -20px rgba(0,0,0,.8);transition:transform .5s var(--ease),box-shadow .5s;outline:1px solid rgba(246,240,230,.08);outline-offset:-1px}
.reel img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.02);transition:transform 1.2s var(--ease)}
.reel .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,8,.15),transparent 30%,transparent 55%,rgba(10,9,8,.85))}
.reel .plat{position:absolute;left:10px;top:10px;width:30px;height:30px;border-radius:10px;display:grid;place-items:center}
.reel .plat svg{width:15px;fill:none;stroke:var(--ivory-50);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.reel .meta{position:absolute;left:12px;right:12px;bottom:11px;display:flex;justify-content:space-between;align-items:flex-end}
.reel .views{font-family:var(--f-display);font-weight:800;font-size:clamp(15px,1.25vw,19px);letter-spacing:-.02em;line-height:1}
.reel .views small{display:block;font-family:var(--f-mono);font-weight:400;font-size:8.5px;letter-spacing:.14em;color:rgba(246,240,230,.65);margin-top:5px}
.reel .client{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(246,240,230,.7)}
.reel .playb{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;display:grid;place-items:center;opacity:0;transform:scale(.6);transition:all .45s var(--ease)}
.reel .playb svg{width:12px;fill:var(--ivory-50);margin-left:3px}
.reel .bar{position:absolute;left:12px;right:12px;top:48px;height:2px;border-radius:2px;background:rgba(246,240,230,.18);overflow:hidden;opacity:0;transition:opacity .3s}
.reel .bar i{position:absolute;inset:0;background:var(--gold-300);transform-origin:left;transform:scaleX(0)}
.reel:hover .in{transform:translateY(-10px) scale(1.05);box-shadow:0 40px 80px -20px rgba(0,0,0,.9),0 0 0 1px rgba(227,162,77,.45)}
.reel:hover img{transform:scale(1.08)}
.reel:hover .playb{opacity:1;transform:none}
.reel:hover .bar{opacity:1}
.reel:hover .bar i{transform:scaleX(1);transition:transform 6s linear}

/* stat chips + space info cards share one look */
.chip{position:absolute;z-index:4;display:flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;border-radius:16px;pointer-events:auto}
.chip .ic,.ccard .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(227,162,77,.14);color:var(--gold-300);flex:none}
.chip .ic svg,.ccard .ic svg{width:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chip b,.ccard b{display:block;font-family:var(--f-display);font-weight:800;font-size:19px;letter-spacing:-.02em;line-height:1;color:var(--ivory-50)}
.chip small,.ccard small{display:block;font-size:11.5px;color:var(--stone-400);margin-top:4px;white-space:nowrap}
.chip-a{left:max(var(--gutter),8vw);top:30%}
.chip-b{right:max(var(--gutter),8vw);top:5%}
.chip-c{right:max(var(--gutter),14vw);top:76%}
.note{position:absolute;z-index:4;font-family:var(--f-hand);font-style:italic;font-size:clamp(18px,1.6vw,24px);color:var(--gold-300);line-height:1.05;pointer-events:none}
.note svg{position:absolute;overflow:visible}
.note path{fill:none;stroke:var(--gold-300);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.note-a{left:max(var(--gutter),12vw);top:4%;transform:rotate(-6deg)}
.note-a svg{left:58%;top:105%;width:70px;height:46px}
.note-b{right:max(var(--gutter),6vw);top:48%;transform:rotate(5deg);text-align:right}
.note-b svg{right:96%;top:20%;width:60px;height:30px}

/* ---------- 02 · marquee + the two paths ---------- */
.audience{position:relative;z-index:2;background:var(--ink-950);padding:clamp(36px,5vw,72px) 0 clamp(90px,10vw,140px);overflow:hidden}
/* velocity marquee: speed and lean follow the scroll */
.marquee{padding-bottom:clamp(70px,8vw,120px)}
.mq-label{text-align:center;color:var(--stone-400);margin-bottom:22px}
.mq-row{overflow:hidden;padding:12px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq-row+.mq-row{border-top:1px solid var(--line)}
.mq-track{display:flex;align-items:center;width:max-content;will-change:transform}
.mq-item{display:inline-flex;align-items:center;gap:12px;padding:0 clamp(24px,3vw,48px);color:rgba(246,240,230,.4);white-space:nowrap;line-height:1;transition:color .45s var(--ease),text-shadow .45s}
.mq-item:hover{color:var(--champagne-200);text-shadow:0 0 18px rgba(245,185,92,.35)}
.mq-sep{width:14px;flex:none;fill:none;stroke:rgba(227,162,77,.45);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lg-a{font-family:var(--f-display);font-weight:800;font-size:clamp(22px,2.2vw,32px);letter-spacing:-.045em;text-transform:uppercase}
.lg-b{font-family:var(--f-hand);font-style:italic;font-size:clamp(28px,2.7vw,40px);letter-spacing:-.01em}
.lg-c{font-family:var(--f-mono);font-size:clamp(13px,1.15vw,16px);letter-spacing:.34em;text-transform:uppercase}
.lg-d{font-family:var(--f-body);font-weight:600;font-size:clamp(22px,2.1vw,30px);letter-spacing:-.04em}
.mq-item.plat{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:0 clamp(20px,2.4vw,36px)}
.mq-item.plat i{width:6px;height:6px;border-radius:50%;background:rgba(227,162,77,.6)}

.aud-wrap{padding:0 var(--side)}
.aud-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.aud-head .eyebrow{color:var(--stone-400)}
.aud-head h2{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(36px,4.8vw,76px);line-height:1.02;letter-spacing:-.02em;margin-top:16px}
.aud-sub{max-width:34ch;color:rgba(246,240,230,.62);font-size:clamp(14px,1.1vw,16.5px);line-height:1.68;padding-bottom:8px}

/* the two paths: hover one and it grows and glows, the other drops to .2 */
.paths{display:flex;gap:18px;margin-top:clamp(36px,4vw,56px);height:clamp(540px,74vh,660px);perspective:1400px}
.path{position:relative;flex:1 1 0;min-width:0;border-radius:28px;overflow:hidden;isolation:isolate;background:#12100E;border:1px solid rgba(246,240,230,.09);transform-style:preserve-3d;will-change:transform;transition:flex-grow .9s var(--ease),opacity .6s var(--ease),border-color .6s,box-shadow .8s var(--ease)}
.paths.has-focus .path{flex-grow:.78;opacity:.2}
.paths.has-focus .path.is-focus{flex-grow:1.32;opacity:1;border-color:rgba(227,162,77,.5);box-shadow:0 0 0 1px rgba(227,162,77,.22),0 40px 90px -40px rgba(227,162,77,.45),inset 0 1px 0 rgba(255,255,255,.12)}
.p-media{position:absolute;inset:0;z-index:-3}
.p-media img{width:100%;height:100%;object-fit:cover;opacity:.3;filter:grayscale(.55) contrast(1.05);transform:scale(1.04);transition:opacity .9s var(--ease),filter .9s,transform 1.6s var(--ease)}
.path::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(10,9,8,.25) 0%,rgba(10,9,8,.5) 40%,rgba(10,9,8,.95) 100%)}
.is-focus .p-media img{opacity:.55;filter:none;transform:scale(1.1)}
.p-glow{position:absolute;inset:0;z-index:-1;background:radial-gradient(460px circle at var(--px,70%) var(--py,30%),rgba(245,185,92,.17),transparent 62%);opacity:0;transition:opacity .6s}
.is-focus .p-glow{opacity:1}
/* gold chevrons fade in from the top-right corner */
.p-chev{position:absolute;inset:0;z-index:-1;background-image:var(--chev);background-size:44px 28px;opacity:.38;-webkit-mask:radial-gradient(circle at 100% 0%,#000 0%,rgba(0,0,0,.35) 38%,transparent 70%) 100% 0/0% 0% no-repeat;mask:radial-gradient(circle at 100% 0%,#000 0%,rgba(0,0,0,.35) 38%,transparent 70%) 100% 0/0% 0% no-repeat;transition:-webkit-mask-size 1.1s var(--ease),mask-size 1.1s var(--ease)}
.is-focus .p-chev{-webkit-mask-size:125% 125%;mask-size:125% 125%}
.p-top{position:absolute;left:clamp(22px,2.4vw,34px);right:clamp(22px,2.4vw,34px);top:24px;display:flex;justify-content:space-between;align-items:center}
.p-top .mono{color:var(--champagne-200)}
.p-num{font-family:var(--f-display);font-weight:800;font-size:13px;color:rgba(246,240,230,.38)}
.p-body{position:absolute;left:clamp(22px,2.4vw,36px);right:clamp(22px,2.4vw,36px);bottom:clamp(22px,2.4vw,34px)}
.path h3{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(34px,3.9vw,62px);line-height:1;letter-spacing:-.02em}
.p-copy{margin-top:16px;max-width:40ch;color:rgba(246,240,230,.7);font-size:15px;line-height:1.68}
.p-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;list-style:none;max-width:520px}
.p-tags li{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:7px 11px;border-radius:999px;color:rgba(246,240,230,.82);border:1px solid rgba(246,240,230,.14);background:rgba(10,9,8,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .5s,color .5s}
.is-focus .p-tags li{border-color:rgba(227,162,77,.35)}
.p-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:26px}
.p-stat{text-align:right}
.p-stat b{display:block;font-family:var(--f-display);font-weight:800;font-size:20px;letter-spacing:-.02em}
.p-stat small{display:block;font-size:11.5px;color:var(--stone-400);margin-top:4px}
.cta-pill.wa{background:linear-gradient(100deg,#F1E9D8,#FFF8EA 60%,#E9DFC9);box-shadow:inset 0 1px 0 #fff,0 14px 34px -14px rgba(246,240,230,.35)}
/* brand visual: a campaign dashboard with a social post tucked behind it; on focus the bars grow,
   the dashboard straightens and rises and the post fans out (mirrors the creator phone) */
.for-brand .p-media{background:radial-gradient(90% 70% at 88% 6%,rgba(227,162,77,.16),transparent 62%),radial-gradient(60% 50% at 10% 100%,rgba(227,162,77,.06),transparent 70%)}
.p-visual{position:absolute;pointer-events:none}
.dash{right:clamp(30px,3.4vw,54px);top:52px;width:clamp(190px,15vw,228px)}
.db{position:relative;z-index:2;padding:13px 14px 12px;border-radius:18px;background:linear-gradient(160deg,rgba(44,37,28,.96),rgba(17,15,13,.98));border:1px solid rgba(246,240,230,.16);box-shadow:0 30px 60px -18px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08);transform:rotate(-7deg) translateY(24px);transition:transform 1.1s var(--ease)}
.db-top{display:flex;align-items:center;gap:7px;font-size:10px;color:rgba(246,240,230,.72);white-space:nowrap}
.db-av{width:16px;height:16px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,#F5C979,#8a5a1e)}
.db-live{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--champagne-200)}
.db-live::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold-300);box-shadow:0 0 0 3px rgba(245,185,92,.2);animation:dim 1.6s ease-in-out infinite}
.db-kpi{margin-top:11px}
.db-kpi b{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.03em;line-height:1}
.db-kpi small{display:block;font-size:10px;color:var(--stone-400);margin-top:4px}
.db-bars{display:flex;align-items:flex-end;gap:4px;height:40px;margin-top:10px}
.db-bars i{flex:1;height:var(--h);border-radius:3px 3px 1px 1px;background:linear-gradient(180deg,#F7D79A,#B98336);transform-origin:bottom;transform:scaleY(.42);opacity:.7;transition:transform .9s var(--ease) calc(var(--i) * 45ms),opacity .6s}
.db-bars i:last-child{box-shadow:0 0 12px rgba(245,185,92,.6)}
.db-row{display:flex;justify-content:space-between;gap:6px;margin-top:10px;padding-top:9px;border-top:1px solid rgba(246,240,230,.1)}
.db-row small{display:block;font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--stone-400)}
.db-row b{display:block;font-family:var(--f-display);font-weight:700;font-size:12.5px;margin-top:3px}
.post{position:absolute;z-index:1;left:-42%;top:-14px;width:58%;aspect-ratio:4/5;border-radius:14px;overflow:hidden;border:1px solid rgba(246,240,230,.2);background:#0d0c0a;box-shadow:0 24px 50px -20px rgba(0,0,0,.9);transform:rotate(-15deg) translateY(30px);transition:transform 1.1s var(--ease)}
.post img{width:100%;height:100%;object-fit:cover;opacity:.85}
.post-likes{position:absolute;left:8px;bottom:8px;padding:4px 8px;border-radius:999px;font-size:9.5px;font-weight:600;background:rgba(10,9,8,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.post-likes i{font-style:normal;color:var(--gold-300)}
.is-focus .db{transform:rotate(-2deg) translateY(-6px) scale(1.04)}
.is-focus .db-bars i{transform:scaleY(1);opacity:1}
.is-focus .post{transform:rotate(-20deg) translate(-16px,-4px)}
.dash-tag,.phone-tag{position:absolute;display:inline-flex;gap:6px;align-items:center;padding:7px 12px;border-radius:999px;font-size:11.5px;color:rgba(246,240,230,.8);white-space:nowrap;opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease) .5s,transform .8s var(--ease) .5s}
.dash-tag b,.phone-tag b{font-family:var(--f-display);font-weight:800;color:var(--ivory-50)}
.dash-tag{left:-58%;top:-30px;z-index:3}
.is-focus .dash-tag,.is-focus .phone-tag{opacity:1;transform:none}
/* creator visual: a phone with a reel that rises on focus */
.phone{right:clamp(26px,3vw,48px);top:58px;width:clamp(96px,7.6vw,118px)}
.ph{position:relative;aspect-ratio:9/19;border-radius:22px;overflow:hidden;border:1px solid rgba(246,240,230,.22);background:#0d0c0a;box-shadow:0 30px 60px -20px rgba(0,0,0,.9),inset 0 0 0 5px #0d0c0a;transform:rotate(9deg) translateY(28px);transition:transform 1.1s var(--ease)}
.ph img{width:100%;height:100%;object-fit:cover;border-radius:18px;opacity:.85}
.ph-notch{position:absolute;left:50%;top:9px;width:34%;height:12px;margin-left:-17%;border-radius:8px;background:#0d0c0a}
.ph-views{position:absolute;left:12px;bottom:12px;font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(246,240,230,.8)}
.ph-views b{display:block;font-family:var(--f-display);font-size:15px;letter-spacing:-.02em;color:var(--ivory-50)}
.phone-tag{right:calc(100% - 26px);bottom:38px}
.is-focus .ph{transform:rotate(2deg) translateY(-6px) scale(1.04)}

/* ---------- 03 · manifesto: on the night sky. The words light up as you read, the key ones settle into gold, and a soft
   gold light travels with the line being read (manifesto.js) ---------- */
.manifesto{--gx:0px;--gy:0px;--go:0;position:relative;z-index:1;isolation:isolate;overflow-x:clip;padding:clamp(100px,10vw,150px) var(--side) clamp(90px,9vw,130px)}
.manifesto::before{content:"";position:absolute;z-index:-1;left:0;top:0;width:min(78vw,980px);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(227,162,77,.17),rgba(227,162,77,.05) 55%,transparent);transform:translate(calc(var(--gx) - 50%),calc(var(--gy) - 50%));opacity:var(--go);transition:opacity 1s var(--ease);pointer-events:none}
.mf-top{display:flex;justify-content:space-between;color:var(--stone-400)}
.mf-hint{opacity:.7}
.mf-text{margin-top:clamp(28px,3.4vw,48px);font-family:var(--f-display);font-weight:600;font-size:clamp(30px,4.25vw,70px);line-height:1.12;letter-spacing:-.022em;max-width:22ch}
.mf-text .w{color:rgba(246,240,230,var(--a,.12));transition:color .25s linear}
/* keywords: ivory first, then they settle into gold with a faint glow */
.mf-text .w.key.gold{color:var(--gold-300);text-shadow:0 0 30px rgba(227,162,77,.3);transition:color .6s var(--ease),text-shadow .6s}
/* inline media capsules sit inside the sentence and swell on hover */
.cap{display:inline-block;vertical-align:middle;width:1.9em;height:.92em;margin:-.1em .05em 0;border-radius:999px;overflow:hidden;background:#1C1915;box-shadow:0 0 0 1px rgba(246,240,230,.16),0 10px 24px -10px rgba(0,0,0,.8);transform:scale(var(--s,.82));opacity:var(--o,.22);transition:transform .7s var(--ease),opacity .5s,width .7s var(--ease)}
.cap img{width:100%;height:100%;object-fit:cover}
.cap:hover{width:2.6em}
.cap-avs{width:auto;padding:0 .14em;background:rgba(246,240,230,.06);display:inline-flex;align-items:center}
.cap-avs i{width:.66em;height:.66em;border-radius:50%;margin-left:-.18em;border:2px solid #12100E;background-size:cover;background-position:center}
.cap-avs i:first-child{margin-left:0}
.cap-avs:hover{width:auto}
.mf-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:clamp(40px,5vw,72px);padding-top:28px;border-top:1px solid var(--line)}
.mf-foot p{max-width:52ch;line-height:1.7;color:var(--stone-400)}

/* ---------- 04 · services: six services orbit the creative core ---------- */
/* no background: the fixed space canvas (stars, nebula, silk) shows through around the orb */
.services{position:relative;z-index:1;overflow-x:clip;padding:clamp(110px,11vw,160px) var(--side) clamp(90px,9vw,130px)}   /* clip: the cards slide in from the sides */
.svc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.svc-head .mono{color:var(--stone-400)}
.svc-head h2{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(36px,4.8vw,76px);line-height:1.02;letter-spacing:-.02em;margin-top:16px}
.svc-sub{max-width:36ch;color:rgba(246,240,230,.62);font-size:clamp(14px,1.1vw,16.5px);line-height:1.68;padding-bottom:8px}
.svc-orbit{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(48px,6.5vw,124px);margin-top:clamp(40px,5vw,70px)}
/* connector lines from each service into the core; a gold pulse travels along them */
.svc-lines{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.svc-lines .ln{fill:none;stroke:rgba(227,162,77,.32);stroke-width:1;stroke-dasharray:2 6;transition:stroke .5s}
.svc-lines .flow{fill:none;stroke:var(--gold-300);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:26 260;opacity:.45;animation:svc-flow 3.2s linear infinite;animation-delay:var(--d,0s);transition:opacity .5s,stroke-width .5s}
.svc-lines .end{fill:var(--gold-300);opacity:.35;transition:opacity .5s}
.svc-lines .on .ln{stroke:rgba(245,185,92,.65)}
.svc-lines .on .flow{opacity:1;stroke-width:2.2;filter:drop-shadow(0 0 6px rgba(245,185,92,.9));animation-duration:1.4s}
.svc-lines .on .end{opacity:1}
@keyframes svc-flow{from{stroke-dashoffset:286}to{stroke-dashoffset:0}}
.svc-col{position:relative;display:flex;flex-direction:column;gap:14px}
.svc-col.l{align-items:flex-end}
.svc-col.r{align-items:flex-start}
.svc{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;width:min(100%,350px);padding:18px 20px;border-radius:20px;background:rgba(18,16,14,.6);border:1px solid rgba(246,240,230,.1);-webkit-backdrop-filter:blur(16px) saturate(120%);backdrop-filter:blur(16px) saturate(120%);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:transform .6s var(--ease),border-color .5s,background .5s,box-shadow .6s,opacity .5s}
.svc-num{font-family:var(--f-mono);font-size:11px;color:var(--gold-300);padding-top:5px}
.svc h3{font-family:var(--f-display);font-weight:800;font-size:clamp(17px,1.45vw,22px);line-height:1.05;letter-spacing:-.015em;text-transform:uppercase}
.svc-line{display:block;font-size:13.5px;line-height:1.63;color:rgba(246,240,230,.62);margin-top:6px}
.svc-tags{display:flex;flex-wrap:wrap;gap:6px;max-height:0;margin-top:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .4s,margin .6s var(--ease)}
.svc-tags i{font-style:normal;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:999px;border:1px solid rgba(227,162,77,.3);color:var(--champagne-200)}
.svc-arrow{font-size:18px;line-height:1;color:rgba(246,240,230,.4);transition:transform .5s var(--ease),color .4s}
.svc-col.l .svc{--nudge:12px}.svc-col.r .svc{--nudge:-12px}
.svc.on,.svc:focus-visible{border-color:rgba(227,162,77,.5);background:rgba(30,26,20,.82);box-shadow:0 0 0 1px rgba(227,162,77,.18),0 30px 60px -30px rgba(227,162,77,.4),inset 0 1px 0 rgba(255,255,255,.1);transform:translateX(var(--nudge))}
.svc.on .svc-tags,.svc:focus-visible .svc-tags{max-height:90px;opacity:1;margin-top:12px}
.svc.on .svc-arrow{transform:rotate(45deg);color:var(--gold-300)}
.svc-orbit.has-on .svc:not(.on){opacity:.35}
/* the core: the orb docks in this slot, wrapped in two orbits with travelling dots */
.svc-center{position:relative;display:flex;flex-direction:column;align-items:center}
.svc-slot{--orb:min(29vw,calc(100svh - 320px),430px);position:relative;width:var(--orb);height:var(--orb)}
.svc-rings{position:absolute;inset:-24%;pointer-events:none}
.svc-rings i{position:absolute;border-radius:50%}
.svc-rings i:nth-child(1){inset:9%;border:1px dashed rgba(227,162,77,.34)}
.svc-rings i:nth-child(2){inset:-3%;border:1px solid rgba(246,240,230,.1)}
.svc-rings b{position:absolute;inset:9%;border-radius:50%;animation:spin 28s linear infinite}
.svc-rings b:nth-of-type(2){inset:-3%;animation-duration:44s;animation-direction:reverse}
.svc-rings b::after{content:"";position:absolute;left:50%;top:-3px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--gold-300);box-shadow:0 0 10px rgba(245,185,92,.9)}
.svc-core{margin-top:clamp(56px,7vw,96px);text-align:center;color:var(--champagne-200);line-height:1.8}
.svc-core span{display:block;font-family:var(--f-body);font-size:12px;letter-spacing:0;text-transform:none;color:var(--stone-400)}
.svc-cta-m{display:none}
/* desktop shows the orbit; phones get the cards as a stacked list (see the media query) */
[data-svc="orbit"] .svc-orbit{display:none}
[data-svc="cards"] .svc-stage{display:none}
/* B · orbit: six service "planets" travel an orbit around the core; JS places them and draws the link */
.svc-stage{position:relative;height:clamp(640px,86vh,860px);margin-top:clamp(20px,3vw,44px)}
.svc-slot-b{--orb:min(26vw,calc(100svh - 360px),400px);position:absolute;left:50%;top:42%;width:var(--orb);height:var(--orb);transform:translate(-50%,-50%)}
.orbit-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.orbit-path{fill:none;stroke:rgba(227,162,77,.4);stroke-width:1;stroke-dasharray:3 6}
.orbit-base{fill:none;stroke:rgba(245,185,92,.5);stroke-width:1.2;opacity:0;transition:opacity .45s}
.orbit-base.on{opacity:1}
.orbit-link{fill:none;stroke:#FFE2A8;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:14 22;opacity:0;filter:drop-shadow(0 0 6px rgba(245,185,92,.9));animation:svc-flow 1.3s linear infinite;transition:opacity .45s}
.orbit-link.on{opacity:1}
.planets{list-style:none;position:absolute;inset:0;margin:0;padding:0;pointer-events:none}
.planet-pill{position:absolute;left:0;top:0;pointer-events:auto;display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 9px;border-radius:999px;white-space:nowrap;background:rgba(18,16,14,.62);border:1px solid rgba(246,240,230,.12);-webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);will-change:transform,opacity;transition:border-color .45s,background .45s,box-shadow .6s}
.planet-pill i{width:22px;height:22px;border-radius:50%;flex:none;background:radial-gradient(circle at 34% 30%,#FCE3B0,#E3A24D 40%,#7a4e1c 80%);box-shadow:0 0 12px rgba(245,185,92,.3);transition:box-shadow .5s,transform .6s var(--ease)}
.planet-pill .pn{font-family:var(--f-mono);font-size:10.5px;color:var(--gold-300)}
.planet-pill .pl{font-family:var(--f-display);font-weight:700;font-size:clamp(13px,1.05vw,16px);letter-spacing:-.01em;text-transform:uppercase;color:var(--ivory-50)}
.planet-pill.on{border-color:rgba(227,162,77,.6);background:rgba(34,29,22,.88);box-shadow:0 0 0 1px rgba(227,162,77,.25),0 20px 44px -18px rgba(227,162,77,.55)}
.planet-pill.on i{box-shadow:0 0 18px rgba(245,185,92,.85);transform:scale(1.15)}
.svc-detail{position:absolute;left:0;right:0;bottom:0;margin:0 auto;width:min(640px,100%);text-align:center}
.sd-top{display:flex;justify-content:center;align-items:center;gap:14px}
.sd-num{color:var(--gold-300)}
.sd-dashes{display:flex;gap:4px}
.sd-dashes i{position:relative;width:18px;height:2px;border-radius:2px;background:rgba(246,240,230,.16);overflow:hidden}
.sd-dashes i::after{content:"";position:absolute;inset:0;background:var(--gold-300);transform:scaleX(0);transform-origin:left}
.sd-dashes i.done::after{transform:scaleX(1)}
.sd-dashes i.on::after{animation:sd-fill var(--cycle,3.6s) linear forwards}
.sd-dashes.hold i.on::after{animation:none;transform:scaleX(1)}
@keyframes sd-fill{to{transform:scaleX(1)}}
.sd-title{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(26px,2.7vw,42px);line-height:1.02;letter-spacing:-.018em;margin-top:12px}
.sd-line{margin:10px auto 0;max-width:46ch;color:rgba(246,240,230,.68);font-size:15px;line-height:1.68}
.sd-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:14px}
.sd-tags i{font-style:normal;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:999px;border:1px solid rgba(227,162,77,.3);color:var(--champagne-200)}

.svc-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:clamp(40px,5vw,64px);padding-top:26px;border-top:1px solid var(--line)}
.svc-foot p{color:var(--stone-400);font-size:14px}
.svc-ai{color:var(--champagne-200);font-weight:500;border-bottom:1px solid rgba(227,162,77,.5);padding-bottom:2px;margin-left:6px}
/* a reel preview follows the cursor while you hover a service */
.svc-preview{position:fixed;left:0;top:0;z-index:70;width:124px;aspect-ratio:9/14;border-radius:16px;overflow:hidden;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.6) rotate(-8deg);transition:opacity .35s,transform .6s var(--ease);box-shadow:0 30px 60px -20px rgba(0,0,0,.9),0 0 0 1px rgba(246,240,230,.15)}
.svc-preview img{width:100%;height:100%;object-fit:cover}
.svc-preview span{position:absolute;left:10px;bottom:10px;font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ivory-50);text-shadow:0 1px 6px rgba(0,0,0,.8)}
.svc-preview.on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-4deg)}

/* ---------- 05 · impact: stories (js/sections/impact.js) ---------- */
.impact{position:relative;z-index:1;padding:clamp(110px,11vw,160px) var(--side) clamp(80px,8vw,120px)}
.ip-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.ip-eyebrow{color:var(--stone-400)}
.ip-head h2{margin-top:16px;font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(36px,4.8vw,76px);line-height:1.02;letter-spacing:-.02em}
.ip-lede{max-width:36ch;padding-bottom:8px;color:rgba(246,240,230,.62);font-size:clamp(14px,1.1vw,16.5px);line-height:1.68}
.ip-num{display:block;font-family:var(--f-display);font-weight:700;line-height:1;letter-spacing:-.05em;color:var(--ivory-50);font-variant-numeric:tabular-nums}
.ip-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.ip-note{color:var(--stone-400);opacity:.75}
.ip-link{color:var(--ivory-50)}
.ip-link span{display:inline-block;color:var(--gold-300);transition:transform .5s var(--ease)}
.ip-link:hover span{transform:translateX(5px)}

/* B · stories: four portrait panels in a row; the open one grows, comes into focus and plays its bar like a story */
.ip-stories{display:flex;gap:12px;height:clamp(440px,64vh,600px);margin-top:clamp(44px,5.5vw,80px)}
.st-panel{--mx:0;--my:0;position:relative;flex:1 1 0;min-width:0;overflow:hidden;isolation:isolate;border-radius:26px;border:1px solid var(--glass-stroke);background:var(--ink-900);cursor:pointer;opacity:0;transform:translateY(70px);transition:flex-grow .9s var(--ease),border-color .5s,transform 1.2s var(--ease) calc(var(--k) * .1s),opacity .8s var(--ease) calc(var(--k) * .1s)}
.ip-stories.in .st-panel{opacity:1;transform:none}
.st-panel.on{flex-grow:2.7;border-color:rgba(227,162,77,.4)}
.st-panel:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px}
/* the reel behind: frosted glass when closed, in focus when open, drifting against the cursor */
.st-media{position:absolute;inset:-7%;z-index:-2;filter:blur(18px) saturate(.45) brightness(.5);transform:scale(1.08);translate:calc(var(--mx) * -18px) calc(var(--my) * -18px);transition:filter 1.1s var(--ease),transform 1.4s var(--ease),translate .8s var(--ease)}
.st-media img{width:100%;height:100%;object-fit:cover}
.st-panel.on .st-media{filter:blur(0) saturate(.85) brightness(.66) sepia(.22);transform:scale(1)}
.st-light{position:absolute;inset:0;z-index:-1;background:radial-gradient(75% 55% at 35% 72%,rgba(245,170,80,.42),transparent 66%),radial-gradient(60% 45% at 85% 18%,rgba(227,162,77,.2),transparent 70%);mix-blend-mode:screen;transition:opacity 1s}
.st-panel::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,9,8,.6) 0%,rgba(10,9,8,0) 24%,rgba(10,9,8,0) 48%,rgba(10,9,8,.88) 100%)}
.st-panel.on .st-light{opacity:.4}
/* the embossed gold glyph: liquid gold lines with a lit upper edge, tilting with the cursor */
.st-glyph{position:absolute;left:50%;top:42%;width:min(64%,250px);aspect-ratio:1;translate:-50% -50%;overflow:visible;opacity:.5;transform:perspective(800px) rotateY(calc(var(--mx) * 24deg)) rotateX(calc(var(--my) * -24deg)) scale(.72);filter:drop-shadow(0 18px 24px rgba(0,0,0,.6));transition:opacity .9s var(--ease),transform .8s var(--ease)}
.st-panel.on .st-glyph{opacity:1;transform:perspective(800px) rotateY(calc(var(--mx) * 24deg)) rotateX(calc(var(--my) * -24deg)) scale(1)}
.st-glyph g{fill:none;stroke-linecap:round;stroke-linejoin:round}
.st-g{stroke:url(#stGold);stroke-width:11}
.st-g circle{fill:url(#stGold);stroke:none}
.st-hi{stroke:rgba(255,246,222,.55);stroke-width:2;transform:translate(-2.4px,-2.4px)}
.st-hi circle{fill:none;stroke:rgba(255,246,222,.55)}
/* story bars along the top */
.st-bar{position:absolute;left:18px;right:18px;top:14px;height:2px;border-radius:2px;background:rgba(246,240,230,.18);overflow:hidden}
.st-bar i{position:absolute;inset:0;background:var(--gold-300);transform:scaleX(var(--f,0));transform-origin:left}
.st-top{position:absolute;left:20px;right:20px;top:30px;display:flex;justify-content:space-between;gap:10px;color:var(--ivory-50);white-space:nowrap}
.st-when{color:var(--champagne-200);transition:opacity .5s}
.st-panel:not(.on) .st-when{opacity:0}
.st-bot{position:absolute;left:20px;right:20px;bottom:22px}
.st-num{font-size:clamp(26px,2.2vw,36px);transition:font-size .9s var(--ease)}
.st-panel.on .st-num{font-size:clamp(46px,4.6vw,76px)}
.st-bot p{max-width:32ch;max-height:0;margin-top:0;overflow:hidden;opacity:0;font-size:15px;line-height:1.63;color:rgba(246,240,230,.74);transition:opacity .5s,max-height .9s var(--ease),margin .9s var(--ease)}
.st-panel.on .st-bot p{max-height:6em;margin-top:12px;opacity:1;transition-delay:.25s}
/* ---------- 06 · selected work: the window (js/sections/work.js) ---------- */
.work{position:relative;z-index:1;overflow-x:clip;padding:clamp(60px,7vw,110px) var(--side) clamp(80px,8vw,120px)}
.wk-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.wk-eyebrow{color:var(--stone-400)}
.wk-head h2{margin-top:16px;white-space:nowrap;font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(36px,4.8vw,76px);line-height:1.02;letter-spacing:-.02em}
.wk-side{max-width:36ch;padding-bottom:8px}
.wk-lede{color:rgba(246,240,230,.62);font-size:clamp(14px,1.1vw,16.5px);line-height:1.68}
.wk-all{display:inline-block;margin-top:18px;color:var(--ivory-50)}
.wk-all span{display:inline-block;color:var(--gold-300);transition:transform .5s var(--ease)}
.wk-all:hover span{transform:translateX(5px)}
.wk-note{margin-top:26px;color:var(--stone-400);opacity:.75}
/* shared bits of a case */
.wk-idx{color:var(--stone-400)}
.wk-idx b{font-weight:400;color:var(--ivory-50)}
.wk-client{margin-top:22px;color:var(--gold-300)}
.work h3{margin-top:12px;max-width:16ch;font-family:var(--f-display);font-weight:700;font-size:clamp(26px,2.6vw,44px);line-height:1.06;letter-spacing:-.018em}
.wk-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px;list-style:none}
.wk-tags li{padding:7px 11px;border-radius:999px;border:1px solid var(--glass-stroke);font-size:10px;color:var(--champagne-200)}
.wk-res{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-top:20px;border-top:1px solid var(--line)}
.wk-res b{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(30px,3vw,50px);line-height:1;letter-spacing:-.05em}
.wk-res span{display:block;margin-top:8px;font-size:13px;color:var(--stone-400)}
.wk-cta{display:inline-flex;align-items:center;gap:10px;margin-top:24px;padding:13px 18px;border-radius:999px;border:1px solid var(--glass-stroke);background:rgba(246,240,230,.05);color:var(--ivory-50);transition:background .5s,color .5s,border-color .5s}
.wk-cta span{display:inline-block;transition:transform .5s var(--ease)}
.wk-cta:hover{background:linear-gradient(100deg,#B98336 0%,#F2C477 60%,#E3A24D 100%);border-color:transparent;color:#1a1206}
.wk-cta:hover span{transform:rotate(45deg)}
.wk-ui{position:absolute;left:10px;top:12px;display:flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:10px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.wk-ui i{width:20px;height:20px;border-radius:50%;background:var(--grad-gold-text);box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.wk-likes{position:absolute;left:10px;bottom:12px;font-family:var(--f-mono);font-size:10px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6)}

/* B · window */
.wk-theatre{position:relative;height:calc(100svh + 80vh + 3 * 85vh)}
[data-work=b] .wk-head{display:none}
[data-work=b] .work{padding-top:0}
.wt-stage{--e:0;--e2:0;position:sticky;top:0;height:100svh;overflow:hidden;margin:0 calc(50% - 50vw);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(24px,3.6vw,64px);padding:0 calc(50vw - 50%)}   /* full bleed; the content still lines up with the page */
.wt-ambient{position:absolute;inset:-10%;z-index:-2;opacity:var(--e);-webkit-mask-image:radial-gradient(closest-side,#000 35%,transparent 100%);mask-image:radial-gradient(closest-side,#000 35%,transparent 100%)}
/* the opening: the headline, centred; it lifts away and fades as the window rises through it */
.wt-intro{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--side);text-align:center;opacity:calc(1 - var(--e) * 1.7);transform:translateY(calc(var(--e) * -9vh)) scale(calc(1 - var(--e) * .1))}
.wt-intro.gone{visibility:hidden}
.wt-title{margin-top:18px;font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(44px,6.6vw,116px);line-height:1;letter-spacing:-.022em}
.wt-intro .wk-lede{margin-top:26px;max-width:46ch}
.wt-ambient img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(70px) saturate(1.3) brightness(.4);opacity:var(--o,0);will-change:opacity}   /* its own layer: the blur is drawn once, then only faded */
.wt-names{position:absolute;left:0;right:0;top:50%;height:1em;margin-top:-.5em;overflow:hidden;z-index:0;opacity:var(--e2);font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(80px,15vw,260px);line-height:1;letter-spacing:-.05em;pointer-events:none}
.wt-roll{transform:translateY(calc(var(--s,0) * -1em))}
.wt-roll span{display:block;height:1em;text-align:center;white-space:nowrap;color:rgba(227,162,77,.075)}
.wt-left,.wt-right{position:relative;z-index:2;align-self:center;min-height:300px;opacity:var(--e2)}
.wt-right{justify-self:end;width:min(100%,340px)}
.wt-case{position:absolute;left:0;right:0;top:50%;opacity:0;transform:translateY(calc(-50% + 24px));pointer-events:none;transition:opacity .5s var(--ease),transform .8s var(--ease)}
.wt-case.on{opacity:1;transform:translateY(-50%);pointer-events:auto;transition-delay:.12s}
.wt-window{--rx:0deg;--ry:0deg;position:relative;z-index:4;height:min(66svh,620px);aspect-ratio:9/16;border-radius:30px;padding:7px;background:rgba(18,16,14,.55);border:1px solid var(--glass-stroke);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 var(--glass-hi),0 40px 90px -30px rgba(0,0,0,.9);opacity:var(--wo,1);transform:perspective(1200px) translateY(var(--wy,0px)) scale(var(--ws,1)) rotateX(var(--rx)) rotateY(var(--ry))}
.wt-frame{position:absolute;inset:7px;overflow:hidden;border-radius:24px;clip-path:inset(calc((1 - var(--r,0)) * 100%) 0 0 0 round 24px)}
.wt-frame:first-child{--r:1}
.wt-frame img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.18 - var(--r,0) * .18))}
.wt-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,8,.45),transparent 22%,transparent 70%,rgba(10,9,8,.55))}
.wt-frame .wk-ui,.wt-frame .wk-likes{z-index:1;left:14px}
.wt-frame .wk-ui{top:16px}.wt-frame .wk-likes{bottom:16px}
.wt-index{position:absolute;left:var(--side);right:var(--side);bottom:clamp(22px,4vh,40px);z-index:2;opacity:var(--e2);display:flex;justify-content:center;gap:clamp(14px,2.4vw,36px)}
.wt-index button{position:relative;padding-top:12px;color:var(--stone-400);transition:color .4s}
.wt-index button i{position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;background:rgba(246,240,230,.15);overflow:hidden}
.wt-index button i::after{content:"";position:absolute;inset:0;background:var(--gold-300);transform:scaleX(var(--f,0));transform-origin:left}
.wt-index button.on,.wt-index button:hover{color:var(--ivory-50)}

/* ---------- 07 · creator academy: the pass (js/sections/academy.js) ---------- */
/* --lt runs 0 → 1 as the section scrolls in (and back as it leaves): a fixed ivory layer (.daylight) fades in over the
   sky and the type turns from ivory to ink */
.academy{--lt:0;overflow-x:clip;--fg:color-mix(in srgb,var(--ink-950) calc(var(--lt) * 100%),var(--ivory-50));--mut:color-mix(in srgb,#5E5C59 calc(var(--lt) * 100%),#A39A8C);--rule:color-mix(in srgb,rgba(10,9,8,.12) calc(var(--lt) * 100%),rgba(246,240,230,.12));position:relative;z-index:1;color:var(--fg);padding:clamp(110px,11vw,160px) var(--side) clamp(80px,8vw,120px)}
.ac-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:28px 40px}
.ac-eyebrow{color:var(--mut)}
.ac-head h2{margin-top:16px;font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(40px,5.6vw,92px);line-height:1;letter-spacing:-.022em}
[data-academy=a] .academy .gold-text{background:linear-gradient(100deg,#8A5A22 0%,#C98E3D 35%,#E9B15E 55%,#A8732F 80%);-webkit-background-clip:text;background-clip:text}
.ac-side{max-width:40ch;padding-bottom:6px}
.ac-lede{color:var(--mut);font-size:clamp(14px,1.1vw,16.5px);line-height:1.73}
.ac-facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px;list-style:none}
.ac-facts li{padding:7px 11px;border-radius:999px;border:1px solid var(--rule);font-size:10px;color:var(--fg)}
.ac-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:22px}
.ac-wa{height:52px;padding:0 24px;font-size:16px}
.ac-more{color:var(--fg)}
.ac-more span{display:inline-block;color:color-mix(in srgb,#A8732F calc(var(--lt) * 100%),var(--gold-300));transition:transform .5s var(--ease)}
.ac-more:hover span{transform:translateX(5px)}
.ac-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:clamp(40px,5vw,72px);padding-top:24px;border-top:1px solid var(--rule)}
.ac-proof b{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(30px,3.2vw,52px);letter-spacing:-.05em;line-height:1}
.ac-proof span{display:block;margin-top:8px;color:var(--mut);font-size:14px}
a.ac-proof{display:block}
a.ac-proof span{transition:color .3s}
a.ac-proof:hover span{color:var(--gold-300)}
.ac-note{color:var(--mut);opacity:.8}

/* B · the pass, hanging on its strap beside the headline */
[data-academy=b] .ac-head{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);grid-template-rows:auto 1fr;align-items:start}
[data-academy=b] .ac-title,[data-academy=b] .ac-side{grid-column:1}
[data-academy=b] .ac-side{align-self:start}
.ac-pass-stage{--mx:0;--my:0;--sw:0deg;position:relative;grid-column:2;grid-row:1 / span 2;align-self:stretch;min-height:clamp(520px,64vh,620px);display:flex;justify-content:center;padding-top:clamp(70px,9vh,110px);perspective:1400px}
.ps-strap{position:absolute;left:50%;top:-30vh;height:calc(30vh + clamp(70px,9vh,110px) + 26px);width:22px;margin-left:-11px;border-radius:4px;background:linear-gradient(90deg,#8A5A22,#E9B15E 40%,#F7D79A 55%,#A8732F);box-shadow:0 10px 20px -10px rgba(60,40,10,.5);transform-origin:50% 100%;transform:rotate(calc(var(--sw) * -.35))}
.ac-pass{position:relative;width:min(100%,340px);border-radius:26px;padding:56px 26px 92px;overflow:hidden;color:var(--ivory-50);background:radial-gradient(90% 60% at 50% 18%,rgba(227,162,77,.13),transparent 70%),linear-gradient(160deg,#211C16,#100E0C 65%,#0B0A08);border:1px solid rgba(246,240,230,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(227,162,77,.12),0 50px 90px -40px rgba(0,0,0,.95),0 0 60px -20px rgba(227,162,77,.18);transform-origin:50% 0;transform:translateY(-70%) rotate(-14deg);opacity:0;transition:transform 1.4s cubic-bezier(.2,1.4,.4,1),opacity .6s}
.ac-pass-stage.in .ac-pass{transform:rotate(var(--sw)) rotateY(calc(var(--mx) * 22deg)) rotateX(calc(var(--my) * -18deg));opacity:1}
.ac-pass-stage.in.live .ac-pass{transition:opacity .6s}
.ps-hole{position:absolute;left:50%;top:18px;width:46px;height:12px;margin-left:-23px;border-radius:999px;background:#050403;box-shadow:inset 0 2px 3px rgba(0,0,0,.8),0 1px 0 rgba(246,240,230,.1)}
.ac-pass::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--grain);opacity:.07;mix-blend-mode:overlay}
.ps-foil{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;opacity:1;background:linear-gradient(115deg,transparent 30%,rgba(227,162,77,.12) 41%,rgba(255,236,200,.2) 50%,rgba(227,162,77,.1) 59%,transparent 70%);background-size:260% 260%;background-position:calc(50% + var(--mx) * 90%) calc(50% + var(--my) * 90%)}
.ps-glare{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(60% 40% at calc(50% + var(--mx) * 100%) calc(30% + var(--my) * 100%),rgba(255,236,200,.08),transparent 70%);mix-blend-mode:screen}
.ps-top{display:flex;justify-content:space-between;font-size:9.5px;color:var(--stone-400)}
.ps-mono-wrap{width:44%;aspect-ratio:410/381;margin:28px auto 0;filter:drop-shadow(0 -1px 0 rgba(255,240,205,.35)) drop-shadow(0 10px 18px rgba(0,0,0,.7)) drop-shadow(0 0 22px rgba(227,162,77,.18))}
.ps-mono{display:block;width:100%;height:100%;-webkit-mask:url(../assets/sm-monogram-rebuilt.svg) center/contain no-repeat;mask:url(../assets/sm-monogram-rebuilt.svg) center/contain no-repeat;background:linear-gradient(120deg,#6E4718 0%,#C98E3D 25%,#FFF1CF 42%,#E3A24D 58%,#7E521F 80%,#C98E3D 100%);background-size:220% 220%;background-position:calc(50% + var(--mx) * 120%) calc(50% + var(--my) * 120%)}
.ps-batch{display:flex;align-items:baseline;justify-content:space-between;margin-top:22px;padding-top:16px;border-top:1px solid rgba(246,240,230,.1)}
.ps-batch .mono{color:var(--stone-400)}
.ps-batch b{font-family:var(--f-display);font-weight:900;font-size:58px;line-height:.9;letter-spacing:-.05em}
.ps-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin-top:16px}
.ps-meta dt{font-size:9.5px;color:var(--stone-400)}
.ps-meta dd{margin-top:4px;font-size:14px;font-weight:600}
.ps-holder{grid-column:1 / -1}
.ps-holder dd{display:flex;align-items:center;font-family:var(--f-mono);font-weight:500}
.ps-caret{width:2px;height:16px;margin-left:3px;background:var(--gold-300);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.ps-seats{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:6px 10px;margin-top:16px}
.ps-seats .mono{font-size:9.5px;color:var(--stone-400)}
.ps-seats b{font-size:13px}
.ps-seats i{grid-column:1 / -1;height:4px;border-radius:4px;background:rgba(246,240,230,.1);overflow:hidden}
.ps-seats s{display:block;height:100%;width:70%;border-radius:4px;background:linear-gradient(90deg,#A8732F,#E9B15E)}
.ps-stub{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 26px 18px;border-top:2px dashed rgba(246,240,230,.16);background:rgba(246,240,230,.035)}
.ps-stub .mono{font-size:9.5px;color:var(--stone-400)}
.ps-code{width:96px;height:26px;opacity:.85;background:repeating-linear-gradient(90deg,var(--ivory-50) 0 2px,transparent 2px 4px,var(--ivory-50) 4px 5px,transparent 5px 8px,var(--ivory-50) 8px 11px,transparent 11px 13px)}
.ps-stub::before,.ps-stub::after{content:"";position:absolute;top:-11px;width:20px;height:20px;border-radius:50%;background:var(--ink-950);box-shadow:inset 0 0 0 1px rgba(246,240,230,.12)}
.ps-stub::before{left:-10px}.ps-stub::after{right:-10px}
/* the six modules as ticket stubs, dealt in as they scroll into view */
.ac-stubs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:clamp(48px,6vw,90px)}
.ac-stub{position:relative;padding:18px 18px 20px;border-radius:18px;background:rgba(18,16,14,.72);border:1px solid var(--glass-stroke);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 var(--glass-hi),0 24px 44px -30px rgba(0,0,0,.9);opacity:0;transform:translateY(50px) rotate(calc((var(--k) - 2.5) * 2deg));transition:transform 1s var(--ease) calc(var(--k) * .08s),opacity .7s var(--ease) calc(var(--k) * .08s),translate .6s var(--ease),rotate .6s var(--ease)}
.ac-stubs.in .ac-stub{opacity:1;transform:none}
.ac-stub:hover{translate:0 -8px;rotate:-1.5deg;border-color:rgba(227,162,77,.45)}
.ac-stub.clone{display:none}
.ac-stub::before{content:"";position:absolute;left:0;right:0;top:50px;border-top:2px dashed rgba(246,240,230,.12)}
.ac-stub>.mono{color:var(--gold-300)}
.ac-stub svg{display:block;width:44px;height:44px;margin:30px 0 14px;overflow:visible;filter:drop-shadow(0 6px 10px rgba(0,0,0,.7)) drop-shadow(0 0 10px rgba(227,162,77,.2))}
.ac-stub g{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ac-stub .gs{stroke:url(#acGoldLit);stroke-width:3.2}
.ac-stub .gh{stroke:rgba(255,250,236,.85);stroke-width:.9;transform:translate(-.8px,-.8px)}
.ac-stub h3{font-family:var(--f-display);font-weight:700;font-size:15px;line-height:1.15;letter-spacing:-.01em;color:var(--ivory-50)}
.ac-stub p{margin-top:8px;font-size:12.5px;line-height:1.58;color:var(--stone-400)}

/* ---------- 08 · process: the gold thread (js/sections/process.js) ---------- */
.process{position:relative;z-index:1;overflow-x:clip;padding:clamp(30px,4vw,60px) var(--side) clamp(80px,8vw,120px)}
.pr-theatre{position:relative;height:calc(100svh + 3 * 70vh)}
.pr-stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,3.4vh,40px);padding:clamp(80px,11vh,110px) 0 clamp(24px,4vh,44px)}
.pr-eyebrow{color:var(--stone-400)}
/* the dust cloud: full bleed behind the stage's content, drawn at half resolution (it is soft anyway) */
.pr-dust{position:absolute;top:0;left:calc(50% - 50vw);width:100vw;height:100%;z-index:-1;pointer-events:none}
.pr-title{margin-top:14px;font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(34px,4.4vw,70px);line-height:1.02;letter-spacing:-.02em}
.pr-lede{max-width:38ch;color:rgba(246,240,230,.62);font-size:clamp(14px,1.1vw,16.5px);line-height:1.68}
.pr-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:20px}
.pr-go{height:50px;padding:0 22px;font-size:16px}
.pr-call{color:var(--ivory-50)}
.pr-call span{display:inline-block;color:var(--gold-300);transition:transform .5s var(--ease)}
.pr-call:hover span{transform:rotate(45deg)}
.pr-when{color:var(--stone-400)}
.pr-when b{font-weight:400;color:var(--gold-300)}

/* A · gold thread */
.pr-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.pr-side{max-width:40ch;padding-bottom:6px}
.pr-thread{position:relative;height:clamp(100px,16vh,160px);margin:0 calc(50% - 50vw)}
.pr-thread svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pr-thread path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.pr-base{stroke:rgba(246,240,230,.14);stroke-width:1.5}
.pr-gold{stroke:url(#prGold);stroke-width:3}
.pr-glow{stroke:rgba(245,185,92,.5);stroke-width:10;filter:blur(6px)}
.pr-node{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;display:grid;place-items:center;border-radius:50%;background:var(--ink-900);border:1px solid rgba(246,240,230,.18);transition:border-color .5s,background .5s,box-shadow .6s,transform .6s var(--ease)}
.pr-node b{font-family:var(--f-mono);font-weight:400;font-size:11px;color:var(--stone-400);transition:color .5s}
.pr-node.lit{border-color:rgba(245,185,92,.75);background:#1E1811;box-shadow:0 0 0 6px rgba(227,162,77,.1),0 0 26px rgba(227,162,77,.35)}
.pr-node.lit b{color:var(--champagne-200)}
.pr-node.on{transform:scale(1.18)}
.pr-bead{position:absolute;left:0;top:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFF6DE,#F5C979 45%,#B07A35);box-shadow:0 0 0 4px rgba(245,185,92,.18),0 0 24px 6px rgba(245,185,92,.55),0 0 60px 12px rgba(227,162,77,.25);transform:translate(var(--bx,0px),var(--by,0px));will-change:transform}
.pr-cards{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pr-card{padding:20px 22px 22px;border-radius:22px;background:rgba(18,16,14,.6);border:1px solid var(--glass-stroke);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 var(--glass-hi);opacity:.36;transform:translateY(10px);transition:opacity .6s var(--ease),transform .8s var(--ease),border-color .5s,box-shadow .6s}
.pr-card.past{opacity:.7;transform:none}
.pr-card.on{opacity:1;transform:none;border-color:rgba(227,162,77,.5);box-shadow:inset 0 1px 0 var(--glass-hi),0 0 0 1px rgba(227,162,77,.14),0 30px 60px -30px rgba(227,162,77,.35)}
.pr-card h3{margin-top:12px;font-family:var(--f-display);font-weight:700;font-size:clamp(24px,2.2vw,34px);letter-spacing:-.018em;line-height:1}
.pr-line{margin-top:10px;font-size:14px;line-height:1.63;color:rgba(246,240,230,.66)}
.pr-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;list-style:none}
.pr-chips li{padding:6px 10px;border-radius:999px;border:1px solid var(--glass-stroke);font-size:9.5px;color:var(--champagne-200)}
.pr-rail{display:none}

/* ---------- 09 · the studio ---------- */
.studio{position:relative;z-index:1;padding:clamp(110px,11vw,170px) var(--side) clamp(40px,5vw,80px)}
.stu-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;gap:28px clamp(30px,5vw,80px)}
.stu-eyebrow{color:var(--stone-400)}
.studio h2{margin-top:16px;font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(32px,4.2vw,64px);line-height:1.02;letter-spacing:-.02em}
.stu-lede{max-width:44ch;color:var(--stone-400);font-size:clamp(14.5px,1.15vw,17px);line-height:1.73}
.stu-values{list-style:none;margin-top:22px;border-top:1px solid var(--line)}
.stu-values li{display:grid;grid-template-columns:34px 150px minmax(0,1fr);align-items:baseline;gap:10px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}
.stu-values .mono{color:var(--gold-300)}
.stu-values b{font-weight:600}
.stu-values li>span:last-child{color:var(--stone-400)}
/* the team: hairline columns, a portrait hanging in each on a thread and swaying (studio.js); photos sit in black and
   white until a member is in focus, then come into their own colours */
.tm-team{margin-top:clamp(56px,6vw,90px);opacity:0;translate:0 40px;transition:opacity 1s var(--ease),translate 1.2s var(--ease)}
.tm-team.in{opacity:1;translate:0 0}
.tm-team .nowrap{white-space:nowrap}
.tm-ph{position:relative;overflow:hidden;background:#0E0C0A}
.tm-ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:grayscale(1) brightness(.82);transition:filter .9s var(--ease),transform 1.4s var(--ease)}
.on .tm-ph img{filter:none}
.tm-empty{display:grid;place-items:center;background:radial-gradient(70% 55% at 50% 42%,rgba(227,162,77,.2),transparent 70%),linear-gradient(160deg,#211C16,#0E0C0A)}
.tm-init{font-family:var(--f-display);font-weight:900;font-size:clamp(40px,4vw,72px);letter-spacing:-.04em}
.tm-links{display:flex;gap:8px}
.tm-links a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--ivory-50);background:rgba(10,9,8,.55);border:1px solid rgba(246,240,230,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:color .35s,border-color .35s,background .35s,transform .5s var(--ease)}
.tm-links svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tm-links a:hover,.tm-links a:focus-visible{color:#1a1206;border-color:transparent;background:linear-gradient(140deg,#F2C477,#B98336);transform:translateY(-3px)}

/* C · hanging columns */
.tmC{margin-left:calc(var(--side) * -1);margin-right:calc(var(--side) * -1);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tmC-cols{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));height:clamp(520px,42vw,600px);padding:0 var(--side)}
.tmC-col{--o:60px;--sw:0deg;position:relative;border-left:1px solid var(--line);cursor:pointer;transition:background .7s var(--ease)}
.tmC-col:last-child{border-right:1px solid var(--line)}
.tmC-col.on{background:linear-gradient(180deg,rgba(246,240,230,.06),rgba(246,240,230,.015) 70%,transparent)}
.tmC-string{position:absolute;left:50%;top:0;height:var(--o);border-left:1px dashed rgba(246,240,230,.22);transform:scaleY(0);transform-origin:top;transition:transform 1.2s var(--ease) calc(var(--k) * .1s),border-color .6s}
.tm-team.in .tmC-string{transform:scaleY(1)}
.tmC-col.on .tmC-string{border-color:rgba(227,162,77,.65)}
.tmC-hang{position:absolute;left:50%;top:var(--o);width:80%;transform-origin:50% calc(var(--o) * -1);transform:translateX(-50%) rotate(var(--sw))}
.tmC-hang .tm-ph{aspect-ratio:3/4;border-radius:18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.95),0 0 0 1px rgba(246,240,230,.12);transition:box-shadow .7s}
.tmC-col.on .tm-ph{box-shadow:0 40px 70px -30px rgba(0,0,0,.95),0 0 0 1px rgba(227,162,77,.5)}
.tmC-hang .tm-ph img{transform:scale(1.04)}
.tmC-col.on .tm-ph img{transform:scale(1.1)}
.tmC-meta{margin-top:16px;text-align:center}
.tmC-meta b{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(13px,1.05vw,16px);line-height:1.2;opacity:.7;transition:opacity .5s}
.tmC-meta .mono{display:block;margin-top:7px;font-size:9px;line-height:1.55;color:var(--stone-400);opacity:0;transform:translateY(6px);transition:opacity .5s,transform .7s var(--ease)}
.tmC-meta .tm-links{justify-content:center;margin-top:12px;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .7s var(--ease)}
.tmC-meta .tm-links a{width:32px;height:32px}
.tmC-meta .tm-links svg{width:14px;height:14px}
.tmC-col.on .tmC-meta b{opacity:1}
.tmC-col.on .tmC-meta .mono,.tmC-col.on .tmC-meta .tm-links{opacity:1;transform:none}

.stu-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:clamp(30px,3vw,44px)}
.stu-cta .mono{color:var(--stone-400)}

/* ---------- 10 · testimonials: the drifting carousel (js/sections/voices.js) ---------- */
.voices{position:relative;z-index:1;overflow-x:clip;padding:clamp(100px,10vw,150px) var(--side) clamp(70px,7vw,110px)}
.vc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.vc-eyebrow{color:var(--stone-400)}
.voices h2{margin-top:16px;font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(34px,4.6vw,72px);line-height:1.02;letter-spacing:-.02em}
.vc-side{max-width:36ch;padding-bottom:8px}
.vc-rating{display:flex;align-items:center;gap:14px}
.vc-rating b{font-family:var(--f-display);font-weight:700;font-size:44px;line-height:1;letter-spacing:-.05em}
.vc-rating small{display:block;margin-top:4px;color:var(--stone-400);font-size:13px}
.vc-stars{color:var(--gold-300);letter-spacing:3px;font-size:13px}
.vc-lede{margin-top:14px;color:rgba(246,240,230,.62);font-size:clamp(14px,1.1vw,16.5px);line-height:1.68}
.vc-chip{display:inline-block;padding:7px 11px;border-radius:999px;border:1px solid rgba(227,162,77,.32);background:rgba(227,162,77,.08);font-size:10px;color:var(--champagne-200)}
.vc-av{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;font-family:var(--f-display);font-weight:700;font-size:14px;color:#1a1206;background:var(--grad-gold-text);box-shadow:0 0 0 2px rgba(10,9,8,.85),0 0 0 3px rgba(227,162,77,.4)}
.vc-who{display:flex;align-items:center;gap:12px}
.vc-who b{display:block;font-size:15px;font-weight:600}
.vc-who div span{display:block;margin-top:2px;font-size:13px;color:var(--stone-400)}
.vc-text{font-family:var(--f-display);font-weight:500;font-size:clamp(19px,1.6vw,25px);line-height:1.3;letter-spacing:-.01em}
.vc-note{margin-top:26px;color:var(--stone-400);opacity:.75}

/* A · carousel: a full-bleed rail; the track moves under the drag and carries on with inertia */
.vc-rail{position:relative;margin:clamp(40px,5vw,72px) calc(50% - 50vw) 0;padding:24px calc(50vw - 50%);cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none}
.vc-rail.drag{cursor:grabbing}
.vc-rail:focus-visible .vc-track{outline:2px solid var(--gold-400);outline-offset:10px;border-radius:30px}
.vc-track{display:flex;align-items:stretch;gap:18px;width:max-content;transform:translate3d(var(--x,0px),0,0);will-change:transform}
.vc-card{position:relative;flex:none;height:clamp(380px,52vh,460px);border-radius:28px;transform:perspective(1200px) rotateY(var(--tilt,0deg)) scale(var(--sc,1));transition:scale .45s var(--ease)}
.vc-rail.drag .vc-card{--sc:.97}
.vc-quote{width:clamp(300px,30vw,440px);display:flex;flex-direction:column;justify-content:space-between;padding:28px;background:rgba(18,16,14,.66);border:1px solid var(--glass-stroke);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 var(--glass-hi),0 30px 60px -36px rgba(0,0,0,.9)}
.vc-quote::before{content:"“";position:absolute;right:26px;top:40px;font-family:var(--f-hand);font-style:italic;font-size:150px;line-height:1;color:rgba(227,162,77,.16);pointer-events:none}
.vc-top{display:flex;justify-content:space-between;align-items:center}
.vc-video{width:clamp(240px,21vw,300px);overflow:hidden;border:1px solid var(--glass-stroke);background:#000;cursor:pointer;outline:none}
.vc-video:focus-visible{box-shadow:0 0 0 2px var(--gold-400)}
.vc-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.75) sepia(.25) brightness(.72);transition:transform 1.2s var(--ease),filter .6s;pointer-events:none}
.vc-video:hover img{transform:scale(1.05);filter:saturate(.9) sepia(.12) brightness(.85)}
.vc-video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,8,.45),transparent 26%,transparent 50%,rgba(10,9,8,.9))}
.vc-dur{position:absolute;left:18px;top:18px;z-index:2;padding:6px 10px;border-radius:999px;background:rgba(10,9,8,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:10px;color:var(--ivory-50)}
.vc-play{position:absolute;left:50%;top:44%;z-index:2;width:68px;height:68px;margin:-34px 0 0 -34px;display:grid;place-items:center;border-radius:50%;background:rgba(18,16,14,.45);border:1px solid rgba(246,240,230,.32);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .5s var(--ease),background .5s,border-color .5s}
.vc-play::before{content:"";margin-left:5px;border-left:17px solid var(--ivory-50);border-top:10px solid transparent;border-bottom:10px solid transparent;transition:border-color .5s}
.vc-video:hover .vc-play{transform:scale(1.12);background:linear-gradient(100deg,#B98336,#F2C477 65%,#E3A24D);border-color:transparent}
.vc-video:hover .vc-play::before{border-left-color:#1a1206}
.vc-vmeta{position:absolute;left:20px;right:20px;bottom:20px;z-index:2}
.vc-vmeta b{display:block;margin-top:12px;font-size:16px;font-weight:600}
.vc-vmeta>span:last-child{display:block;margin-top:2px;font-size:12.5px;color:rgba(246,240,230,.7)}
.vc-foot{display:flex;align-items:center;gap:24px;margin-top:20px}
.vc-prog{position:relative;flex:1;max-width:440px;height:2px;border-radius:2px;background:rgba(246,240,230,.14);overflow:hidden}
.vc-prog i{position:absolute;inset:0;background:var(--gold-300);transform-origin:left;transform:scaleX(var(--f,.1))}
.vc-hint{color:var(--stone-400)}
.vc-arrows{display:flex;gap:8px;margin-left:auto}
.vc-arrows button{width:48px;height:48px;border-radius:50%;font-size:16px;color:var(--ivory-50);transition:background .4s,color .4s}
.vc-arrows button:hover{background:linear-gradient(100deg,#B98336,#F2C477 65%,#E3A24D);color:#1a1206}
/* the drag cursor: a gold disc that says what a press will do */
.vc-cursor{position:fixed;left:0;top:0;z-index:85;width:84px;height:84px;margin:-42px 0 0 -42px;display:grid;place-items:center;border-radius:50%;background:rgba(245,185,92,.92);color:#1a1206;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;pointer-events:none;transform:translate(var(--cx,-200px),var(--cy,-200px)) scale(var(--cs,0));transition:scale .35s var(--ease)}
/* the lightbox */
.vc-box{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px;background:rgba(5,4,3,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transition:opacity .4s}
.vc-box[hidden]{display:none}
.vc-box.on{opacity:1}
.vc-box-in{position:relative;display:grid;grid-template-columns:auto minmax(0,380px);align-items:center;gap:clamp(24px,4vw,60px);transform:scale(.94) translateY(20px);transition:transform .6s var(--ease)}
.vc-box.on .vc-box-in{transform:none}
.vc-box-media{position:relative;height:min(76vh,680px);aspect-ratio:2/3;overflow:hidden;border-radius:28px;border:1px solid var(--glass-stroke);background:#000}
.vc-box-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) sepia(.2) brightness(.75)}
.vc-box-media .vc-play{top:50%}
.vc-box-note{position:absolute;left:18px;right:18px;bottom:18px;color:var(--champagne-200);font-size:10px}
.vc-box-cap .vc-who{margin-top:24px}
.vc-close{position:absolute;right:-14px;top:-14px;z-index:3;width:44px;height:44px;border-radius:50%;color:var(--ivory-50);font-size:14px}

/* ---------- 10 · reels wall: the wall (js/sections/reels.js) ---------- */
.reelwall{position:relative;z-index:1;overflow-x:clip;padding:clamp(40px,5vw,80px) 0 clamp(60px,6vw,100px)}
.rw-eyebrow{color:var(--stone-400)}
.reelwall h2,.rw-title{margin-top:14px;font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(34px,4.4vw,68px);line-height:1.02;letter-spacing:-.02em}
.rw-note{margin:22px var(--side) 0;color:var(--stone-400);opacity:.75}
.rw-profile{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:24px;text-align:left}
.rw-logo{width:46px;height:46px;padding:8px;border-radius:50%;background:#0D0B09;box-shadow:0 0 0 1.5px rgba(227,162,77,.6),0 0 0 4px rgba(10,9,8,.9),0 0 0 5.5px rgba(227,162,77,.3);object-fit:contain}
.rw-profile b{display:block;font-size:16px}
.rw-profile .mono{display:block;margin-top:4px;font-size:9.5px;color:var(--stone-400)}
.rw-stats{display:flex;justify-content:center;gap:clamp(18px,3vw,36px);margin-top:22px;list-style:none}
.rw-stats b{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(22px,2vw,30px);letter-spacing:-.04em}
.rw-stats span{display:block;margin-top:4px;font-size:12px;color:var(--stone-400)}
.rw-follow{margin-top:26px;height:52px;padding:0 24px;font-size:16px}

/* a reel tile: dim at rest, full colour on hover with its progress bar running */
.rw-tile,.rw-t{position:relative;margin:0;aspect-ratio:9/16;overflow:hidden;border-radius:18px;background:#14110E;box-shadow:0 0 0 1px rgba(246,240,230,.08),0 24px 44px -24px rgba(0,0,0,.85)}
.rw-tile img,.rw-t img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) sepia(.12) brightness(.58);transition:filter .5s,transform .9s var(--ease);pointer-events:none}
.rw-tile figcaption,.rw-t figcaption{position:absolute;left:10px;right:10px;bottom:10px;display:flex;justify-content:space-between;gap:6px;font-size:9px;color:rgba(255,255,255,.85);text-transform:none;letter-spacing:.04em}
.rw-bar{position:absolute;left:10px;right:10px;top:10px;height:2px;border-radius:2px;background:rgba(255,255,255,.25);overflow:hidden}
.rw-bar::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.rw-tile:hover img{filter:saturate(1) brightness(.95);transform:scale(1.05)}
.rw-tile:hover .rw-bar::after{transform:scaleX(1);transition:transform 6s linear}

/* A · wall */
.rw-wrap{position:relative;height:clamp(640px,108vh,980px);overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 13%,#000 87%,transparent);mask-image:linear-gradient(transparent,#000 13%,#000 87%,transparent)}
.rw-wall{--mx:0;--my:0;position:absolute;left:50%;top:50%;width:max(1500px,122vw);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;transform:translate(-50%,-50%) perspective(1800px) rotateX(calc(18deg + var(--my) * -4deg)) rotateZ(calc(-7deg + var(--mx) * 2deg)) scale(1.06);transition:transform 1s var(--ease)}
.rw-col{display:flex;flex-direction:column;gap:16px;transform:translate3d(0,var(--y,0px),0);will-change:transform}
.rw-col:nth-child(even){margin-top:-140px}
.rw-card{position:absolute;left:50%;top:50%;z-index:3;width:min(92vw,520px);padding:clamp(26px,3vw,38px);transform:translate(-50%,-50%);text-align:center;border-radius:32px;background:rgba(14,12,10,.74);border:1px solid var(--glass-stroke);-webkit-backdrop-filter:blur(22px) saturate(120%);backdrop-filter:blur(22px) saturate(120%);box-shadow:inset 0 1px 0 var(--glass-hi),0 50px 100px -30px rgba(0,0,0,.95),0 0 0 100vmax rgba(10,9,8,.0)}
.rw-card h2{font-size:clamp(34px,3.8vw,58px)}

/* ---------- 11 · the last word: the wordmark (js/sections/finale.js) ---------- */
.finale{position:relative;z-index:1;overflow-x:clip;padding:clamp(110px,11vw,170px) var(--side) clamp(30px,4vw,60px)}
.fn-eyebrow{color:var(--stone-400)}
.fn-title{margin-top:16px;font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(44px,7.2vw,124px);line-height:.98;letter-spacing:-.022em}
.fn-cta{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:end;gap:40px}
.fn-lede{max-width:38ch;color:rgba(246,240,230,.66);font-size:clamp(15px,1.2vw,18px);line-height:1.68}
.fn-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px}
.fn-go{height:60px;padding:0 30px;font-size:18px}
.fn-alt{height:60px;padding:0 26px}
.fn-wa{margin-top:18px;color:var(--stone-400)}
.fn-wa a{color:var(--champagne-200)}
/* the wordmark: one line edge to edge (fitted in JS), filling with liquid gold from the bottom, a wave on top */
.fn-word{margin:clamp(70px,9vw,140px) calc(50% - 50vw) 0;padding:0 calc(50vw - 50% - .02em);line-height:0}
.fn-w{--fh:0px;--wy:100%;--wx:0px;display:inline-block;font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:12vw;line-height:.86;letter-spacing:-.055em;white-space:nowrap;color:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='30' viewBox='0 0 300 30'%3E%3Cpath d='M0 15 C38 0 112 0 150 15 S262 30 300 15 V30 H0Z' fill='%23F5C979'/%3E%3C/svg%3E"),linear-gradient(180deg,#FCE2A8,#E3A24D 45%,#A8732F),linear-gradient(rgba(227,162,77,.08),rgba(227,162,77,.08));background-repeat:repeat-x,no-repeat,no-repeat;background-size:300px 30px,100% var(--fh),100% 100%;background-position:var(--wx) var(--wy),0 100%,0 0;-webkit-background-clip:text;background-clip:text}
.fn-word.full .fn-w{filter:drop-shadow(0 0 26px rgba(227,162,77,.2))}
/* ---------- footer: on the sky; a marquee, the big address, live studio clocks, and a gold planet sunrise ---------- */
.site-foot{position:relative;z-index:2;overflow:hidden;color:rgba(246,240,230,.72);padding:0 0 96px}
.sf-marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;background:rgba(10,9,8,.4)}
.sf-run{display:flex;width:max-content;animation:sfrun 38s linear infinite}
.sf-run span{padding:0 26px;font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:clamp(20px,2.2vw,34px);letter-spacing:-.015em;color:var(--ivory-50)}
.sf-run i{font-style:normal;color:var(--gold-300);font-size:clamp(14px,1.4vw,20px);align-self:center}
.sf-marquee:hover .sf-run{animation-play-state:paused}
@keyframes sfrun{to{transform:translateX(-50%)}}
.sf-main{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(40px,6vw,100px);padding:clamp(60px,7vw,110px) var(--side) 0}
.sf-eyebrow{color:var(--stone-400)}
/* the address: big, its letters roll over to gold on hover; a click copies it */
.sf-mail{display:block;margin-top:18px;white-space:nowrap;font-family:var(--f-display);font-weight:700;font-size:clamp(24px,3.3vw,56px);line-height:1.05;letter-spacing:-.045em;color:var(--ivory-50);text-align:left;cursor:copy}
.sf-mail .ch{position:relative;display:inline-block;overflow:hidden;vertical-align:top}
.sf-mail .ch span{display:block;transition:transform .55s var(--ease) calc(var(--i) * 18ms)}
.sf-mail .ch span+span{position:absolute;left:0;top:100%;background:var(--grad-gold-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.sf-mail:hover .ch span,.sf-mail:focus-visible .ch span{transform:translateY(-100%)}
.sf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:28px}
.sf-wa{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:999px;border:1px solid var(--glass-stroke);background:rgba(18,16,14,.5);color:var(--ivory-50);font-size:10.5px;transition:border-color .4s}
.sf-wa:hover{border-color:rgba(227,162,77,.55)}
.sf-socials{display:flex;gap:8px}
.sf-soc{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--glass-stroke);background:rgba(18,16,14,.5);color:var(--ivory-50);transition:background .45s,color .45s,border-color .45s}
.sf-soc svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .7s var(--ease)}
.sf-soc:hover{background:linear-gradient(100deg,#B98336,#F2C477 65%,#E3A24D);border-color:transparent;color:#1a1206}
.sf-soc:hover svg{transform:rotate(360deg)}
/* the studios, live */
.sf-clocks{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sf-clock{padding:18px 20px;border-radius:22px;background:rgba(18,16,14,.55);border:1px solid var(--glass-stroke);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.sf-clock>.mono{color:var(--stone-400)}
.sf-clock b{display:block;margin-top:10px;font-family:var(--f-display);font-weight:700;font-size:clamp(28px,2.6vw,42px);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ivory-50)}
.sf-clock em{display:flex;align-items:center;gap:7px;margin-top:10px;font-style:normal;font-size:9.5px;color:var(--stone-400);white-space:nowrap}
.sf-clock em i{width:7px;height:7px;border-radius:50%;background:#6B655C}
.sf-clock.open em i{background:#6FD08C;box-shadow:0 0 8px #6FD08C}
.sf-clock.open em{color:var(--champagne-200)}
.sf-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px}
.sf-col{display:flex;flex-direction:column;gap:12px;font-size:15px}
.sf-col .mono{margin-bottom:6px;color:var(--stone-400)}
.sf-col a{width:max-content;color:var(--ivory-50);background:linear-gradient(var(--gold-300),var(--gold-300)) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease),color .4s}
.sf-col a:hover{color:var(--champagne-200);background-size:100% 1px}
/* the sunrise: a planet's gold limb across the bottom; the monogram climbs from behind it as the page ends */
.sf-horizon{--rise:0;position:relative;height:clamp(220px,26vw,380px);margin-top:clamp(30px,4vw,60px)}
.sf-glow{position:absolute;left:50%;bottom:8%;width:min(80vw,900px);height:min(40vw,440px);transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(245,185,92,calc(.18 + var(--rise) * .3)),rgba(227,162,77,calc(var(--rise) * .1)) 55%,transparent);filter:blur(10px)}
.sf-sun{position:absolute;left:50%;bottom:calc(42% - 4px);width:clamp(110px,12vw,180px);transform:translate(-50%,calc((1 - var(--rise)) * 104% - 8%));filter:drop-shadow(0 0 24px rgba(245,185,92,.55)) drop-shadow(0 0 60px rgba(227,162,77,.35))}
.sf-planet{position:absolute;left:50%;top:58%;width:max(1700px,160vw);height:max(1700px,160vw);transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 50% 0%,#1A140D 0%,#0B0A08 18%,#070605 60%);box-shadow:0 -1.5px 0 rgba(252,213,138,.95),0 -10px 34px -6px rgba(245,185,92,.75),0 -60px 140px -30px rgba(227,162,77,.45),inset 0 18px 40px -20px rgba(245,185,92,.35)}
.sf-bar{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:-70px;padding:0 var(--side);font-size:12px;color:var(--stone-400)}
.sf-legal{display:flex;gap:18px}
.sf-legal a{color:var(--stone-400);transition:color .3s}
.sf-legal a:hover{color:var(--champagne-200)}
/* at the foot of the page the footer has its own WhatsApp pill, so the floating one steps aside */
.wa-fab{transition:border-color .4s,box-shadow .4s,transform .5s var(--ease),opacity .4s}
.at-foot .wa-fab{opacity:0;transform:translateY(12px) scale(.9);pointer-events:none}
.sf-toast{position:fixed;left:50%;bottom:28px;z-index:130;padding:12px 18px;border-radius:999px;background:linear-gradient(100deg,#B98336,#F2C477 65%,#E3A24D);color:#1a1206;font-size:10.5px;transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:opacity .35s,transform .5s var(--ease)}
.sf-toast.on{opacity:1;transform:translate(-50%,0)}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* ---------- Mania AI ---------- */
.ai{position:fixed;right:22px;bottom:22px;z-index:80;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.ai-pill{display:flex;align-items:center;gap:12px;height:58px;padding:0 20px 0 9px;border-radius:999px;border:1px solid var(--glass-stroke);background:rgba(18,16,14,.62);-webkit-backdrop-filter:blur(26px) saturate(120%);backdrop-filter:blur(26px) saturate(120%);box-shadow:inset 0 1px 0 var(--glass-hi),0 20px 40px -18px rgba(0,0,0,.8);color:var(--ivory-50);transition:border-color .3s,transform .5s var(--ease)}
.ai-pill:hover{border-color:rgba(227,162,77,.45);transform:translateY(-2px)}
.ai-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.mini-core{--d:16s;position:relative;width:40px;height:40px;flex:none;border-radius:50%}
.mini-core img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none}
.mini-core .mo-rings{animation:mo-spin var(--d) linear infinite}
.mini-core .mo-shell{animation:mo-spin calc(var(--d) * 3) linear infinite reverse}
.mini-core .mo-core{animation:mo-breathe 3.2s ease-in-out infinite;filter:drop-shadow(0 0 3px rgba(245,185,92,.55))}
.mini-core::after{content:"";position:absolute;inset:2px;border-radius:50%;pointer-events:none}
@keyframes mo-spin{to{transform:rotate(360deg)}}
@keyframes mo-breathe{50%{transform:scale(1.12);filter:drop-shadow(0 0 6px rgba(245,185,92,.85)) brightness(1.12)}}
.mini-core.thinking{--d:1.1s}
.mini-core.thinking .mo-core{animation-duration:.8s}
.mini-core.pulse::after{animation:mc-pulse 1s var(--ease)}
@keyframes mc-pulse{0%{box-shadow:0 0 0 0 rgba(245,185,92,.7)}100%{box-shadow:0 0 0 18px rgba(245,185,92,0)}}
.mini-core.sm{width:36px;height:36px}
.ai-panel{width:min(370px,calc(100vw - 32px));max-height:min(560px,70vh);display:flex;flex-direction:column;border-radius:22px;border:1px solid var(--glass-stroke);background:rgba(18,16,14,.93);-webkit-backdrop-filter:blur(26px) saturate(120%);backdrop-filter:blur(26px) saturate(120%);box-shadow:inset 0 1px 0 var(--glass-hi),0 30px 70px -20px rgba(0,0,0,.85);overflow:hidden;transform-origin:bottom right;animation:panel-in .5s var(--ease)}
.ai-panel[hidden]{display:none}
@keyframes panel-in{from{opacity:0;transform:translateY(12px) scale(.96)}}
.ai-head{display:flex;align-items:center;gap:12px;padding:14px 14px 12px 16px;border-bottom:1px solid var(--line)}
.ai-head strong{display:block;font-size:14px;font-weight:600}
.ai-head small{display:block;font-size:11px;color:#8c9082;margin-top:2px}
.ai-x{margin-left:auto;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);color:#aeb0a6;font-size:18px;line-height:1}
.ai-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:120px}
.msg{max-width:86%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.58}
.msg.user{align-self:flex-end;background:var(--paper);color:var(--ink-900);border-bottom-right-radius:4px}
.msg.bot{align-self:flex-start;background:rgba(255,255,255,.05);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.thinking{color:#aeb0a6;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.msg.thinking i{display:inline-block;width:4px;height:4px;margin-left:4px;border-radius:50%;background:var(--gold-400);animation:dot 1s infinite}
.msg.thinking i:nth-child(2){animation-delay:.15s}.msg.thinking i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{opacity:.2;transform:translateY(-3px)}}
.ai-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px}
.ai-chips button{font-size:11.5px;padding:7px 11px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:#c2c4ba;transition:border-color .3s,color .3s}
.ai-chips button:hover{border-color:rgba(227,162,77,.5);color:var(--ivory-50)}
.ai-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.ai-form input{flex:1;height:42px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ivory-50);padding:0 12px;font:inherit;font-size:13.5px;outline:none}
.ai-form input:focus{border-color:rgba(227,162,77,.55)}
.ai-form button{width:42px;height:42px;border-radius:12px;background:linear-gradient(140deg,#F2C477,#B98336);color:#1a1206;font-size:17px;font-weight:600}

/* ---------- responsive ---------- */
@media (max-width:960px){
  :root{--side:var(--gutter)}
  .nav{padding:10px var(--gutter)}
  .nav-bar{height:58px;padding:0 6px 0 16px}
  .nav.scrolled .nav-bar{height:56px}
  .nav-links,.nav-cta{display:none}
  .nav-r{margin-left:auto}
  .nav-menu{display:block}
  .nav-prog{left:20px;right:20px}
  .wa-fab{height:54px}
  .up-fab{left:14px;bottom:14px;width:48px;height:48px}
  .wa-ic{width:52px;height:52px}
  .wa-ic svg{width:24px;height:24px}
  .fold{min-height:0;padding:calc(92px + 2vh) var(--gutter) 30px}
  .h1{font-size:min(10.6vw,64px);white-space:normal}
  .h1 .ln{display:block}
  .orb-slot,[data-layout] .orb-slot{--orb:min(66vw,330px);margin:3vh 0 2.4vh}
  [data-layout="split"] .copy{display:flex;text-align:center;justify-items:center}
  [data-layout="split"] .h1{font-size:min(10.6vw,64px)}
  [data-layout="split"] .ctas{justify-content:center}
  [data-layout="top"] .orb-slot{margin:0 0 3vh}
  .cta-pill{height:54px;padding:0 26px;font-size:16px}
  .creator-link{font-size:13px}
  /* phones keep a few objects, at the edges */
  .cobj:not([data-m]){display:none}
  .ccard{padding:8px 12px 8px 8px;gap:9px;left:calc(100% + 26px)}
  .cobj.flip .ccard{right:calc(100% + 26px)}
  .ccard::before{width:20px}
  .ccard .ic{width:30px;height:30px}.ccard b{font-size:16px}.ccard small{font-size:10px;white-space:normal;width:9.5em;line-height:1.3}
  .reels{height:470px}
  .stage{top:4%;height:66%}
  .horizon{top:62%;width:420vw}
  .note,.chip-c{display:none}
  .chip-a{left:var(--gutter);top:auto;bottom:6%}
  .chip-b{right:var(--gutter);top:auto;bottom:6%}
  .chip{padding:8px 10px 8px 8px;gap:8px}.chip .ic{width:28px;height:28px}.chip .ic svg{width:14px}.chip b{font-size:15px}.chip small{font-size:9.5px;white-space:normal;max-width:9.5em;line-height:1.3}
  .mf-foot{display:block}.mf-foot .cta-pill{margin-top:22px}
  .im-head{display:block}.im-sub{margin-top:16px}
  .ip-head{display:block}
  .ip-lede{margin-top:16px}
  .ip-cards{--tall:300px;grid-template-columns:1fr 1fr;gap:10px}
  .ip-short{height:250px}
  .ip-card{padding:16px 16px 18px;border-radius:20px}
  .ip-go{display:none}
  .ip-card .ip-num{font-size:clamp(24px,7vw,34px)}
  .ip-bot p{margin-top:8px;font-size:12.5px}
  .ip-stories{flex-direction:column;height:auto;gap:10px}
  .st-panel{flex:none;height:104px;border-radius:20px;transition:height .9s var(--ease),border-color .5s,transform 1.2s var(--ease) calc(var(--k) * .1s),opacity .8s var(--ease) calc(var(--k) * .1s)}
  .st-panel.on{height:400px}
  .st-glyph{top:40%;width:min(46%,180px)}
  .st-panel:not(.on) .st-glyph{opacity:0}
  .st-top{left:16px;right:16px;top:26px}
  .st-bot{left:16px;right:16px;bottom:16px}
  .st-num{font-size:26px}
  .st-panel.on .st-num{font-size:44px}
  .st-bot p{font-size:13.5px}
  .wk-head{display:block}
  .wk-head h2{white-space:normal}
  .wk-side{margin-top:16px}
  .wk-card{top:calc(78px + var(--k) * 10px);height:min(80svh,660px);margin-bottom:6vh}
  .wk-inner{grid-template-columns:1fr;grid-template-rows:42% 1fr;gap:18px;padding:14px 14px 18px;border-radius:24px}
  .wk-media{order:-1}
  .wk-phone{left:auto;right:6%;bottom:-10%;width:26%;border-width:3px;border-radius:16px}
  .wk-phone .wk-ui,.wk-phone .wk-likes{display:none}
  .wk-client{margin-top:12px}
  .work h3{font-size:clamp(22px,6.2vw,28px)}
  .wk-tags{display:none}
  .wk-res{gap:12px;padding-top:14px}
  .wk-res b{font-size:clamp(24px,7vw,30px)}
  .wk-res span{font-size:12px}
  .wk-cta{margin-top:14px;padding:11px 15px}
  /* B on a phone: story bars on top, the reel in the middle, the story and its results under it, all centred */
  .wt-stage{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:14px;padding-top:64px;padding-bottom:18px;text-align:center}
  .wt-index{position:static;order:0;display:flex;gap:5px;margin:0 auto;width:min(100%,300px)}
  .wt-index button{flex:1;padding-top:3px;font-size:0}
  .wt-window{order:1;align-self:center;height:min(44svh,380px);border-radius:24px;padding:5px;-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(18,16,14,.82)}   /* a backdrop blur on a tilting window re-blurs every frame on a phone */
  .wt-ambient img{filter:blur(36px) saturate(1.3) brightness(.4)}
  .wt-frame{inset:5px;border-radius:19px}
  .wt-left{order:2;align-self:stretch;min-height:92px}
  .wt-right{order:3;align-self:stretch;width:auto;min-height:112px}
  .wt-case{top:0;transform:translateY(14px)}
  .wt-case.on{transform:none}
  .wt-left .wk-tags,.wt-left .wk-client{display:none}
  .wt-left h3{margin:8px auto 0;max-width:22ch;font-size:clamp(19px,5.4vw,24px)}
  .wt-right .wk-res{max-width:300px;margin:0 auto;padding-top:12px}
  .wt-right .wk-res b{font-size:clamp(24px,7vw,30px)}
  .wt-right .wk-res span{margin-top:5px;font-size:12px}
  .wt-right .wk-cta{margin-top:12px;padding:10px 15px}
  .wt-names{font-size:30vw}
  .wt-title{font-size:8.2vw;white-space:nowrap}
  .ac-head,[data-academy=b] .ac-head{display:block}
  .ac-side{margin-top:16px}
  .ac-course{display:block;margin-top:36px}
  .ac-phone-col{display:none}
  .ac-list{padding:0 0 0 30px}
  .ac-line{left:5px;top:0;bottom:0}
  .ac-mod{display:block;min-height:0;padding:16px 0 26px;opacity:.45}
  .ac-mod::before{left:-30px;top:24px}
  .ac-n{font-size:28px}
  .ac-mod h3{margin-top:8px;font-size:21px}
  .ac-mod p{font-size:14px}
  .ac-thumb{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;margin-top:14px;border-radius:16px}
  .ac-pass-stage{min-height:0;margin-top:30px;padding-top:56px}
  .ps-strap{top:-20px;height:84px}
  .ac-pass{width:min(86%,310px);padding:52px 22px 88px}
  .ps-batch b{font-size:50px}
  .ac-stubs{display:flex;gap:10px;overflow-x:auto;scroll-padding-inline:var(--gutter);margin:36px calc(var(--gutter) * -1) 0;padding:6px var(--gutter) 20px;scrollbar-width:none}
  .ac-stub,.ac-stub.clone{display:block;flex:none;width:62%}
  .ac-foot{display:block}
  .ac-note{margin-top:14px}
  .pr-a{height:auto}
  .pr-a .pr-stage{position:static;height:auto;padding:70px 0 0;gap:26px}
  .pr-head{display:block}
  .pr-side{margin-top:16px}
  .pr-thread{display:none}
  .pr-cards{display:block;padding-left:30px}
  .pr-card{margin-bottom:12px;padding:18px 18px 20px}
  .pr-rail{display:block;position:absolute;left:6px;top:10px;bottom:10px;width:2px;border-radius:2px;background:rgba(246,240,230,.12);overflow:hidden}
  .pr-rail i{position:absolute;inset:0;background:linear-gradient(180deg,#F5C979,#A8732F);transform:scaleY(var(--f,0));transform-origin:top}
  .pw-stage{flex-direction:column;align-items:stretch;justify-content:center;gap:22px;padding-top:76px}
  .pw-words{font-size:clamp(46px,15vw,72px)}
  .pw-side{width:auto}
  .pw-side .pr-eyebrow,.pw-side .pr-title{display:none}
  .pw-bars{margin-top:0;width:100%}
  .pw-step{margin-top:18px;column-gap:16px}
  .pw-num{font-size:48px}
  .pw-panels{min-height:118px}
  .pw-line{font-size:14.5px}
  .pw-capsets{margin-top:12px;min-height:76px}
  .vc-head{display:block}
  .vc-side{margin-top:18px}
  .vc-quote{width:min(80vw,330px);padding:22px}
  .vc-video{width:min(62vw,250px)}
  .vc-card{height:400px}
  .vc-text{font-size:18px}
  .vc-hint{display:none}
  .vc-box-in{grid-template-columns:1fr;gap:16px;max-height:92svh}
  .vc-box-media{height:min(58svh,520px);justify-self:center}
  .vc-box-cap .vc-text{font-size:16px}
  .vc-close{right:4px;top:4px}
  .vc-stage{grid-template-columns:1fr;align-content:center;gap:18px;padding-top:70px}
  .vc-left .vc-side,.vc-go{display:none}
  .voices .vc-left h2{font-size:clamp(26px,7.4vw,34px)}
  .vc-inbox{height:min(64svh,560px)}
  .vc-bub{font-size:13.5px}
  .rw-wrap{height:min(118svh,900px)}
  .rw-wall{width:190vw;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .rw-col:nth-child(n+5){display:none}
  .rw-col{gap:10px}
  .rw-card{padding:24px 20px}
  .rw-stats span{font-size:11px}
  .rw-t{width:112px;margin:-100px 0 0 -56px;border-radius:12px}
  .rw-t figcaption{display:none}
  .rw-end{padding:24px 18px}
  .fn-cta{display:block}
  .fn-side{margin-top:20px}
  .fn-go,.fn-alt{height:54px}
  .fn-slot{--orb:min(50vw,27vh);margin:-6px 0}
  .sf-main{grid-template-columns:1fr;padding-top:56px}
  .sf-mail{font-size:clamp(19px,6.4vw,34px)}
  .sf-clock{padding:14px 16px}
  .sf-bar{flex-wrap:wrap;margin-top:-40px;row-gap:14px}
  .sf-horizon{height:220px}
  .ip-foot{display:block}
  .ip-link{display:inline-block;margin-top:12px}
  .svc-head{display:block}.svc-sub{margin-top:16px}
  [data-svc] .svc-orbit{display:grid;grid-template-columns:1fr;gap:12px}
  [data-svc] .svc-stage{display:none}
  .svc-lines,.svc-preview{display:none}
  .svc-center{order:-1;margin:10px 0 30px}
  .svc-slot{--orb:min(62vw,290px)}
  .svc-core{margin-top:clamp(44px,14vw,70px)}
  .svc-col.l,.svc-col.r{align-items:stretch;gap:12px}
  .svc{width:100%}
  .svc-tags{max-height:none;opacity:1;margin-top:10px}
  .svc-orbit.has-on .svc:not(.on){opacity:1}
  .svc-foot{display:none}
  .svc-cta-m{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:22px;text-align:center}
  .svc-cta-m p{color:var(--stone-400);font-size:14px}
  .brand img,.nav.scrolled .brand img{width:96px}
  .aud-head{display:block}.aud-sub{margin-top:16px}
  .paths{flex-direction:column;height:auto;gap:14px}
  .path{flex:none;display:flex;flex-direction:column;justify-content:flex-end;padding:72px clamp(20px,5vw,28px) 24px}
  .p-body{position:static}
  .p-visual{position:relative;top:auto;right:auto;margin:0 0 22px auto}
  .paths.has-focus .path{opacity:1}
  .dash{width:200px;margin-right:6px}
  .post{left:-36%}
  .phone{width:96px;margin-right:8px}.ph{transform:rotate(6deg)}
  .phone-tag{right:auto;left:-120px;bottom:24px}
  .dash-tag{left:-34%;top:auto;bottom:-18px}
  .p-foot{flex-wrap:wrap}.p-stat{text-align:left}
  .mq-label{padding:0 var(--gutter);line-height:1.68}
  /* the two floating buttons: the same 54px circle, one above the other */
  .ai{right:14px;bottom:14px;gap:10px}
  .stu-head{grid-template-columns:1fr}
  .stu-values li{grid-template-columns:30px minmax(0,1fr)}
  .stu-values li>span:last-child{grid-column:2}
  .tmC-cols{display:flex;height:auto;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:0}
  .tmC-cols::-webkit-scrollbar{display:none}
  .tmC-col{flex:0 0 52vw;height:min(128vw,500px);scroll-snap-align:center}
  .tmC-col:first-child{margin-left:var(--side)}
  .tmC-col:last-child{margin-right:var(--side)}
  .ai-label{display:none}
  .ai-pill{padding:0;width:54px;height:54px;justify-content:center}
}