/* ============================================================
   SECRET MENU — Brand & Creator Consulting
   Navy #0F1C2E · Cyan #00E0FF · Barlow Condensed 900 display
   Same class contracts as the JT site, entirely new skin.
   ============================================================ */

:root{
  --bg:#0F1C2E;
  --panel:#0B1523;
  --tint:#13233A;
  --cyan:#00E0FF;
  --ink:#EAF3F9;
  --muted:#8DA2B5;
  --faint:#54687A;
  --hair:rgba(0,224,255,.16);
  --hair2:rgba(234,243,249,.08);
  --disp:'Barlow Condensed',sans-serif;
  --body:'Barlow',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--cyan);color:var(--bg)}

.wrap{max-width:1240px;margin:0 auto;padding:0 28px}

/* ---------- type ---------- */
.display{font-family:var(--disp);font-weight:900;text-transform:uppercase;line-height:.92;letter-spacing:.005em;font-size:clamp(34px,5vw,64px)}
.display-hero{font-size:clamp(46px,8vw,110px)}
.display em{font-style:normal;color:transparent;-webkit-text-stroke:2px var(--cyan);text-stroke:2px var(--cyan)}
@media(max-width:640px){.display em{-webkit-text-stroke-width:1.3px}}
.eyebrow,.cat{display:inline-block;font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan)}
.lead{font-size:19px;color:var(--muted);max-width:620px;margin-top:22px}
.lr{display:block;overflow:hidden}
.lr>span{display:block}
p{color:var(--muted)}
h4{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:22px;letter-spacing:.01em;color:var(--ink)}

/* ---------- header ---------- */
#site-header{position:sticky;top:0;z-index:50;background:rgba(15,28,46,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair2)}
.nav-in{display:flex;align-items:center;gap:34px;height:72px}
.brand{font-family:var(--disp);font-weight:900;font-size:24px;text-transform:uppercase;letter-spacing:.01em;line-height:.85;color:transparent;-webkit-text-stroke:1.4px var(--cyan);white-space:nowrap}
.brand:hover{color:var(--cyan);-webkit-text-stroke:1.4px var(--cyan)}
.nav-links{display:flex;gap:26px;margin-left:auto}
.nav-links a{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding:6px 2px;border-bottom:2px solid transparent}
.nav-links a:hover{color:var(--ink)}
.nav-links a.on{color:var(--cyan);border-bottom-color:var(--cyan)}
.nav-cta{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;border:1.5px solid var(--cyan);color:var(--cyan);border-radius:100px;padding:9px 20px;white-space:nowrap}
.nav-cta:hover{background:var(--cyan);color:var(--bg)}
@media(max-width:760px){.nav-links{display:none}}

/* ---------- rosette hero (the comp) ---------- */
.rose-hero{position:relative;height:100vh;min-height:640px;overflow:hidden;background:var(--bg)}
.rose-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.55) contrast(1.05);z-index:0}
.rose-scrim{position:absolute;inset:0;background:rgba(15,28,46,.52);z-index:1}
.rose-hero>.rose-nav,.rose-hero>.rose-num,.rose-hero>.rose-stage,.rose-hero>.rose-pill{z-index:3}
.rose-nav{position:absolute;top:44px;left:48px;display:flex;gap:34px;z-index:60;pointer-events:auto}
.rose-nav a{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);padding-bottom:8px}
.rose-nav a.on{border-bottom:3px solid var(--cyan)}
.rose-nav a:hover{border-bottom:3px solid var(--cyan)}
.rose-num{position:absolute;left:48px;top:50%;transform:translateY(-50%);z-index:2;font-family:var(--disp);font-weight:900;font-size:clamp(70px,9vw,130px);line-height:1;color:transparent;-webkit-text-stroke:2.5px var(--cyan)}
.rose-pill{position:absolute;right:48px;bottom:44px;z-index:3;font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);border:2px solid var(--cyan);border-radius:100px;padding:16px 34px}
.rose-pill:hover{background:var(--cyan);color:var(--bg)}
.rose-tag{position:absolute;right:48px;bottom:44px;z-index:3;font-family:var(--disp);font-weight:900;font-size:clamp(18px,1.8vw,26px);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
@media(max-width:900px){.rose-tag{right:24px;bottom:24px}}
.rose-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.rose-stage svg{height:96%;max-height:96vh;aspect-ratio:1;margin-left:12vw}
@media(max-width:900px){.rose-stage svg{margin-left:0;width:130%;height:auto}.rose-num{display:none}.rose-nav{left:24px}.rose-pill{right:24px;bottom:24px}}
/* mobile nav: links collapse behind a Menu button that opens a full-screen overlay */
.nav-toggle{display:none;font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);background:none;border:1.5px solid var(--cyan);border-radius:100px;padding:8px 16px 7px;cursor:pointer;line-height:1}
body.nav-lock{overflow:hidden}
.nav-brand{display:none;font-family:var(--disp);font-weight:900;font-size:17px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);line-height:1}
@media(max-width:760px){
  .rose-nav{left:20px;right:20px;top:24px;gap:0;justify-content:space-between;align-items:center}
  .rose-nav.cs-nav{padding:20px 20px 0;justify-content:space-between}
  .rose-nav .nav-brand{display:block}
  .rose-nav.open .nav-brand{position:absolute;top:32px;left:32px}
  .rose-nav>a:not(.nav-brand){display:none}
  .rose-nav .nav-toggle{display:inline-block}
  .rose-nav.open{position:fixed;inset:0;top:0;left:0;right:0;background:var(--bg);flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;padding:0 32px;z-index:9999}
  .rose-nav.open>a:not(.nav-brand){display:block;font-size:52px;letter-spacing:.04em;line-height:1.05;padding:4px 0;border-bottom:0;color:var(--cyan)}
  .rose-nav.open>a.on{color:var(--ink);border-bottom:0}
  .rose-nav.open>a:hover{border-bottom:0}
  .rose-nav.open .nav-toggle{position:absolute;top:24px;right:20px}
}
/* ticker wall — full-viewport alternating marquees */
.ticker-wall{position:absolute;inset:0;z-index:2;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.trow{white-space:nowrap;font-family:var(--disp);font-weight:900;text-transform:uppercase;line-height:1;color:transparent;-webkit-text-stroke:2px var(--cyan);text-stroke:2px var(--cyan);will-change:transform}
@keyframes tick-l{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--u)))}}
@keyframes tick-r{from{transform:translateX(calc(-1 * var(--u)))}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.trow{animation:none!important}}

#rosette .ring{transform-box:view-box;transform-origin:50% 50%}
#rosette .r-spin-cw{animation:rose-cw var(--dur,120s) linear infinite}
#rosette .r-spin-ccw{animation:rose-ccw var(--dur,120s) linear infinite}
@keyframes rose-cw{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes rose-ccw{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
@media(prefers-reduced-motion:reduce){#rosette .ring{animation:none}}
#rosette text{font-family:var(--disp);font-weight:900;text-transform:uppercase}
#rosette .back{fill:none;stroke:var(--cyan);stroke-opacity:.85}
#rosette .front{fill:none;stroke:var(--cyan)}

/* ---------- LET'S TALK page (about) ---------- */
.talk-hero{position:relative;height:100vh;min-height:680px;overflow:hidden;background:var(--bg);display:flex;flex-direction:column;align-items:center}
.talk-head{display:inline-block;font-family:var(--disp);font-weight:900;text-transform:uppercase;color:var(--cyan);line-height:.82;white-space:nowrap;margin-top:110px;letter-spacing:-.005em;font-size:120px;visibility:hidden}
.cs-head .talk-head{margin-top:6px}
.talk-head.fitted{visibility:visible}
.talk-badge{position:relative;width:min(330px,58vw);aspect-ratio:1;margin-top:calc(min(330px,58vw) * -.42);z-index:2}
.talk-badge svg{width:100%;height:100%;display:block}
.talk-badge svg text{font-family:var(--disp);font-weight:700;fill:var(--cyan);letter-spacing:.14em}
.talk-badge .spin{transform-box:view-box;transform-origin:50% 50%;animation:rose-cw 26s linear infinite}
@media(prefers-reduced-motion:reduce){.talk-badge .spin{animation:none}}
.talk-pill{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--bg);border:2px solid var(--cyan);border-radius:100px;padding:14px 30px;font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);white-space:nowrap}
.talk-pill:hover{background:var(--cyan);color:var(--bg)}
.talk-spacer{flex:1}
.talk-pill2{background:var(--bg);border:2px solid var(--cyan);border-radius:100px;padding:16px 36px;font-family:var(--disp);font-weight:700;font-size:clamp(16px,2vw,20px);letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);white-space:nowrap;margin-bottom:34px}
.talk-pill2:hover{background:var(--cyan);color:var(--bg)}
.talk-hero{padding-bottom:56px}
.talk-links{margin-top:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.talk-links a{font-family:var(--disp);font-weight:900;font-size:26px;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan);line-height:1.2}
.talk-cap{margin-top:16px;color:var(--muted);font-size:15px}
.about-col{max-width:680px;padding:6vh 28px 10vh;display:flex;flex-direction:column;align-items:center;text-align:center}
.about-col p{font-size:17.5px;line-height:1.7;color:var(--ink);margin-bottom:22px}

/* contact v2 — image bg, outlined type, info bar */
.talk2{justify-content:flex-start}
.talk-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.62);z-index:0}
.talk-scrim{position:absolute;inset:0;background:rgba(15,28,46,.62);z-index:1}
.talk2 .rose-nav{z-index:60}
.talk2 .lt-stack,.talk2 .talk-pill3,.talk2 .talk-bar{position:relative;z-index:2}
.talk2 .lt-stack{margin-top:14vh}
.lt-stack{display:flex;flex-direction:column;align-items:center;margin-top:8vh;line-height:.86}
.lt-line{position:relative;font-family:var(--disp);font-weight:900;text-transform:uppercase;white-space:nowrap;visibility:hidden}
.lt-line.fitted{visibility:visible}
.lt-line .main{color:transparent;-webkit-text-stroke:2.5px var(--cyan);text-stroke:2.5px var(--cyan)}
.lt-line .ghost{position:absolute;left:2.5%;top:9%;color:transparent;-webkit-text-stroke:2px rgba(0,224,255,.18);text-stroke:2px rgba(0,224,255,.18)}
.talk-pill3{margin:5vh 0 0;z-index:2}
.talk-bar{margin-top:auto;width:100%;display:grid;grid-template-columns:repeat(4,1fr);border-top:1.5px solid rgba(0,224,255,.55)}
.talk-bar a{display:flex;flex-direction:column;gap:8px;padding:26px 30px 60px;border-left:1.5px solid rgba(0,224,255,.55)}
.talk-bar a:first-child{border-left:0}
.talk-bar .lb{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)}
.talk-bar .hd{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);opacity:.85}
.talk-bar a:hover .lb{text-decoration:underline;text-underline-offset:4px}
@media(max-width:760px){.talk-bar{grid-template-columns:1fr 1fr}.talk-bar a{padding:18px 20px 28px}.talk-bar a:nth-child(3){border-left:0}}

/* work v2 — site register, tight tile grid */
.work-hero{position:relative;background:var(--bg);display:flex;flex-direction:column;align-items:center;padding-bottom:5vh}
.work-hero .rose-nav{position:absolute}
.work-stack{margin-top:16vh}
.work-tiles{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 6px 6px}
@media(max-width:700px){.work-tiles{grid-template-columns:1fr}}
.wtile2{position:relative;display:block;overflow:hidden;background:var(--panel);aspect-ratio:16/10}
.wtile2:first-child{grid-column:1/-1;aspect-ratio:21/9}
.wtile2 img,.wtile2 video{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85);transition:transform .6s cubic-bezier(.16,1,.3,1),filter .4s}
.wtile2:hover img,.wtile2:hover video{transform:scale(1.03);filter:saturate(1)}
.wtile2 .lab{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;background:linear-gradient(to top,rgba(15,28,46,.92),rgba(15,28,46,0));display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.wtile2 .lab h3{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(26px,3vw,44px);line-height:.95;color:var(--cyan)}
.wtile2:first-child .lab h3{font-size:clamp(34px,4.6vw,68px)}
.wtile2 .lab .cat{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);opacity:.8;white-space:nowrap}

/* services v2 — site register, four cells, above the fold */
.svc-hero{height:100vh;min-height:640px;overflow:hidden}
.svc-stack{margin-top:10vh}
.svc-grid{flex:1;width:100%;max-width:1240px;display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:rgba(0,224,255,.35);border:1.5px solid rgba(0,224,255,.55);margin:4vh 28px 0;min-height:0}
.svc-grid .cell{background:var(--bg);padding:3vh 3vw;display:flex;flex-direction:column;justify-content:center;min-height:0}
.svc-grid .num{font-family:var(--disp);font-weight:700;color:var(--cyan);font-size:13px;letter-spacing:.24em}
.svc-grid h4{margin:.8vh 0 .8vh;font-size:clamp(24px,3.4vh,38px);color:var(--cyan)}
.svc-grid p{font-size:clamp(13px,1.6vh,16px);line-height:1.5;color:var(--ink)}
.svc-pill{margin:3.5vh 0 5vh;position:relative;z-index:2;background:var(--bg);border:2px solid var(--cyan);border-radius:100px;padding:16px 36px;font-family:var(--disp);font-weight:700;font-size:clamp(16px,2vw,20px);letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.svc-pill:hover{background:var(--cyan);color:var(--bg)}
@media(max-width:760px){.svc-hero{height:auto;min-height:100vh}.svc-grid{grid-template-columns:1fr;margin:3vh 16px 0}.svc-grid .cell{padding:22px 20px}.svc-grid p{font-size:15px}}

/* about v3 — split: image + ABOUT left, copy right */
.split-hero{position:relative;height:100vh;min-height:640px;display:grid;grid-template-columns:1fr 1fr;background:var(--bg);overflow:hidden}
.split-left{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.split-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.62)}
.split-scrim{position:absolute;inset:0;background:rgba(15,28,46,.55)}
.split-stack{position:relative;z-index:2;margin-top:0}
.split-right{display:flex;align-items:center;justify-content:center;padding:14vh 5vw 6vh 4.5vw;min-height:0}
.split-copy{max-width:560px;display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.split-copy p{font-size:clamp(13px,1.6vh,17px);line-height:1.55;color:var(--ink);margin-bottom:1.4vh}
.split-copy p.ab-lede{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(24px,3.6vh,38px);line-height:1.02;color:var(--cyan);letter-spacing:.01em;margin-bottom:2vh}
.split-copy p.ab-svcs{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(18px,2.6vh,26px);line-height:1.15;color:var(--cyan);letter-spacing:.03em;margin:1.8vh 0}
.split-copy .about-pill{margin:2.5vh 0 0}
@media(max-width:900px){
  .split-hero{height:auto;grid-template-columns:1fr}
  .split-left{height:52vh}
  .split-right{padding:6vh 24px 8vh}
  .split-copy p{font-size:15px}
}

/* about v2 — contact register, above the fold */
.about2 .about-stack{margin-top:9vh}
.about2 .talk-scrim{background:rgba(15,28,46,.74)}
.about-body{position:relative;z-index:2;max-width:760px;padding:2.5vh 28px 0;text-align:center}
.about-body p{font-size:clamp(13px,1.55vh,17px);line-height:1.5;color:var(--ink);margin-bottom:1.3vh}
.about-body p.ab-lede{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(20px,3.2vh,32px);line-height:1.05;color:var(--cyan);letter-spacing:.01em;margin-bottom:1.8vh}
.about-body p.ab-svcs{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(16px,2.4vh,24px);line-height:1.2;color:var(--cyan);letter-spacing:.04em;margin:1.8vh 0}
.about-pill{margin:auto 0 5vh;position:relative;z-index:2}
@media(max-width:760px){.about2{height:auto;min-height:100vh}.about-body{padding-top:4vh}.about-body p{font-size:15px}.about-pill{margin:5vh 0 6vh}}

/* clients — video bg, outlined title, fixed 4-col grid, above the fold */
.clients-hero{height:100vh;min-height:620px;overflow:hidden}
.clients-stack{margin-top:11vh}
.client-grid{position:relative;z-index:2;flex:1;width:100%;display:grid;grid-template-columns:repeat(3,1fr) 1.15fr 1.15fr;grid-template-rows:1fr 1fr;gap:1.5vh 2vw;padding:2vh 5vw 5vh;align-items:center;justify-items:center;min-height:0}
.client{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4vh;width:100%;height:100%;min-height:0;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.client:hover{transform:scale(1.04)}
.client img{display:block}
.lg-logo{max-width:80%;max-height:14vh;width:auto;height:auto}
.lg-square{max-height:22vh}
.client-tall{grid-column:4;grid-row:1/3}
.creator-card{max-height:44vh;width:auto;max-width:92%}
.client-airrack{grid-column:5;grid-row:1/3;gap:0}
.airrack-photo{max-height:34vh;width:auto;max-width:92%}
.airrack-name{max-height:8vh;max-width:80%;width:auto;margin-top:-3.2vh;position:relative;z-index:1}
@media(max-width:760px){
  .clients-hero{height:auto;min-height:100vh}
  .client-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto;padding-bottom:8vh}
  .lg-logo{max-height:11vh}
  .lg-square{max-height:16vh}
  .client-tall,.client-airrack{grid-column:auto;grid-row:auto}
  .creator-card{max-height:30vh}
  .airrack-photo{max-height:22vh}
  .airrack-name{max-height:6vh;margin-top:-2vh}
}

/* ---------- case study, visual-first (extra-credit register) ---------- */
.cs-nav{position:relative;top:auto;left:auto;padding:44px 48px 0;display:flex;gap:34px}
@media(max-width:760px){.cs-nav{padding:24px 24px 0}}
.cs-head{text-align:center;padding:40px 0 8px}
.cs-kicker{display:block;font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan);margin-bottom:14px}
.cs-copy{max-width:660px;margin:0 auto;padding:6vh 28px;text-align:center}
.cs-copy p{font-size:18.5px;line-height:1.7;color:var(--ink)}
.cs-full{padding:0 6px 6px}
.cs-full img,.cs-full video{width:100%;display:block;object-fit:cover}
.cs-full video{aspect-ratio:16/9;background:var(--panel)}
.cs-grid{display:grid;gap:6px;padding:0 6px 6px}
.cs-grid.g2{grid-template-columns:1fr 1fr}
.cs-grid.g3{grid-template-columns:1fr 1fr 1fr}
@media(max-width:700px){.cs-grid.g2,.cs-grid.g3{grid-template-columns:1fr}}
.cs-grid img,.cs-grid video{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
.cs-social{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 6px 6px}
@media(max-width:760px){.cs-social{grid-template-columns:1fr}}
.cs-vc{margin:0;background:var(--panel)}
.cs-vc .video-card{position:relative;aspect-ratio:9/16;max-height:78vh;background:var(--panel);overflow:hidden}
.cs-vc .video-card.ig{aspect-ratio:9/16}
.cs-vc .video-card iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cs-vc figcaption{padding:12px 16px;font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.cs-grid.cs-vgrid video{aspect-ratio:16/9;background:var(--panel)}
.cs-grid.g3 img,.cs-grid.g3 video{aspect-ratio:1/1}
.cs-yt{position:relative;aspect-ratio:16/9;background:var(--panel)}
.cs-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cs-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:6px;padding:0 6px 6px}
.cs-stat{background:var(--panel);padding:5vh 24px;text-align:center}
.cs-stat b{display:block;font-family:var(--disp);font-weight:900;font-size:clamp(48px,7vw,104px);line-height:.95;color:var(--cyan)}
.cs-stat span{display:block;margin-top:10px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cs-callout{text-align:center;padding:11vh 24px}
.cs-callout .big{font-family:var(--disp);font-weight:900;text-transform:uppercase;line-height:.92;color:var(--cyan);font-size:clamp(80px,16vw,230px)}
.cs-callout .sub{margin-top:16px;font-size:15px;letter-spacing:.04em;color:var(--muted);max-width:560px;margin-left:auto;margin-right:auto}
.cs-next{display:block;text-align:center;padding:12vh 24px 14vh;border-top:1px solid var(--hair2)}
.cs-next .big{display:block;font-family:var(--disp);font-weight:900;text-transform:uppercase;line-height:.92;font-size:clamp(60px,12vw,170px);color:transparent;-webkit-text-stroke:2.5px var(--cyan)}
.cs-next:hover .big{color:var(--cyan)}

/* ---------- hero motif wall ---------- */
.wall{position:relative;overflow:hidden;border-bottom:1px solid var(--hair2);padding:42px 0 46px;user-select:none}
.wall .row{white-space:nowrap;font-family:var(--disp);font-weight:900;text-transform:uppercase;line-height:1.04;will-change:transform}
.wall .row span.ltr{display:inline-block;color:transparent;-webkit-text-stroke:2.2px var(--cyan)}
.wall .row.fill span.ltr{color:var(--cyan);-webkit-text-stroke:0}
.wall .row .gap{display:inline-block;width:.45em}
@media(prefers-reduced-motion:reduce){.wall .row{animation:none!important}}
@keyframes drift-l{from{transform:translateX(0)}to{transform:translateX(-25%)}}
@keyframes drift-r{from{transform:translateX(-25%)}to{transform:translateX(0)}}

/* ---------- hero text ---------- */
.hero-media{position:relative}
.hero-inner{padding:84px 28px 70px}
.hero-cta{display:flex;gap:16px;margin-top:36px;flex-wrap:wrap}
.scroll-cue{display:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:.12em;text-transform:uppercase;border-radius:100px;padding:14px 28px;transition:transform .15s ease}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--cyan);color:var(--bg)}
.btn-primary:hover{box-shadow:0 0 0 4px rgba(0,224,255,.25)}
.btn-ghost{border:1.5px solid var(--hair);color:var(--ink)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.arr{font-family:var(--body)}
.link-underline{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);border-bottom:2px solid var(--cyan);padding-bottom:4px}
.link-underline:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- sections ---------- */
.block{padding:96px 0}
.block.tight{padding:44px 0}
.block.tint{background:var(--panel)}
.sec-head{max-width:820px;margin-bottom:48px}
.sec-head p{margin-top:18px;font-size:17px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.split{display:flex;justify-content:space-between;align-items:flex-end;max-width:none;gap:30px;flex-wrap:wrap}
.page-head{padding:84px 0 10px}

/* ---------- marquee (client logos) ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--hair2);border-bottom:1px solid var(--hair2);padding:22px 0;background:var(--panel)}
.marquee .track{display:flex;align-items:center;gap:44px;width:max-content;animation:mq 30s linear infinite}
.marquee img{height:26px;width:auto;opacity:.85;filter:grayscale(1) brightness(1.6)}
.marquee img.lg{height:34px}
.marquee .word{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.marquee .sep,.word-ticker .solid{color:var(--cyan)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee .track,.word-ticker .track{animation:none}}

/* ---------- word ticker ---------- */
.word-ticker{overflow:hidden;border-top:1px solid var(--hair2);border-bottom:1px solid var(--hair2);padding:16px 0}
.word-ticker .track{display:flex;gap:28px;width:max-content;animation:mq 26s linear infinite;font-family:var(--disp);font-weight:900;font-size:20px;letter-spacing:.06em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1px var(--cyan)}
.word-ticker .solid{-webkit-text-stroke:0;color:var(--cyan)}

/* ---------- showcase / work grid ---------- */
.showcase{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.showcase .card:first-child{grid-column:1/-1}
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;padding:40px 0 90px}
@media(max-width:800px){.showcase,.work-grid{grid-template-columns:1fr}}
.card{position:relative;display:block;background:var(--panel);border:1px solid var(--hair2);overflow:hidden}
.card .im{aspect-ratio:16/9;overflow:hidden}
.card:first-child .im{aspect-ratio:21/9}
.card .im img{width:100%;height:100%;object-fit:cover;filter:saturate(.9);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.card:hover .im img{transform:scale(1.04)}
.card .meta{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:18px 20px;border-top:1px solid var(--hair2)}
.card .meta h3{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:24px;letter-spacing:.01em}
.card .meta .cat{color:var(--faint);letter-spacing:.18em;font-size:12px}
.card:hover .meta h3{color:var(--cyan)}

/* ---------- stats ---------- */
.stats-band{border-top:1px solid var(--hair2);border-bottom:1px solid var(--hair2);background:var(--panel)}
.stats-band .grid{display:grid;grid-template-columns:repeat(4,1fr)}
@media(max-width:800px){.stats-band .grid{grid-template-columns:repeat(2,1fr)}}
.stat-cell{padding:38px 28px;border-right:1px solid var(--hair2)}
.stat-cell:last-child{border-right:0}
@media(max-width:800px){.stat-cell:nth-child(2n){border-right:0}.stat-cell:nth-child(-n+2){border-bottom:1px solid var(--hair2)}}
.stat-cell b{display:block;font-family:var(--disp);font-weight:900;font-size:clamp(38px,4.4vw,58px);line-height:1;color:var(--cyan)}
.stat-cell span{display:block;margin-top:10px;font-size:13px;letter-spacing:.04em;color:var(--muted)}

/* ---------- services ---------- */
.svc-mini{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--hair2);border:1px solid var(--hair2)}
@media(max-width:760px){.svc-mini{grid-template-columns:1fr}}
.svc-mini .cell{background:var(--bg);padding:28px}
.svc-mini .cell .num{font-family:var(--disp);font-weight:700;color:var(--cyan);font-size:14px;letter-spacing:.2em}
.svc-mini .cell h4{margin:8px 0 8px;font-size:26px}
.svc-mini .cell p{font-size:15px}
.svc-list{display:flex;flex-direction:column;border-top:1px solid var(--hair2);margin:30px 0 80px}
.svc-list .term{border-bottom:1px solid var(--hair2);padding:34px 0;display:grid;grid-template-columns:90px 1fr 2fr;gap:24px;align-items:baseline}
@media(max-width:760px){.svc-list .term{grid-template-columns:1fr}}
.svc-list .term-bar{font-family:var(--disp);font-weight:700;color:var(--cyan);letter-spacing:.2em;font-size:15px}
.svc-list .term h3,.svc-list .nm{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:30px;line-height:1}
.svc-list .term-body p{font-size:16px}

/* ---------- case pages ---------- */
.case-head{padding:70px 0 26px}
.case-back{display:inline-block;font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:26px}
.case-back:hover{color:var(--cyan)}
.case-head .cat{margin-bottom:14px}
.case-hero{margin-top:26px}
.case-body{display:grid;grid-template-columns:1fr 1.6fr;gap:44px;padding:50px 0}
@media(max-width:800px){.case-body{grid-template-columns:1fr}}
.case-body .side .k{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:28px;line-height:1.05;color:var(--ink);display:block}
.case-body .copy p{margin-bottom:16px;font-size:17px}
.case-body .copy em{font-style:normal;color:var(--cyan)}

.video-self video,.yt-embed iframe{width:100%;border:1px solid var(--hair2);background:var(--panel)}
.video-self video{aspect-ratio:16/9;object-fit:cover}
.yt-embed{position:relative;aspect-ratio:16/9}
.yt-embed iframe{position:absolute;inset:0;width:100%;height:100%}
.sub-embed{margin-top:14px}
.yt-cap{margin-top:14px;font-size:13px;letter-spacing:.03em;color:var(--faint)}
.media-full{width:100%;border:1px solid var(--hair2)}

.shot{overflow:hidden;border:1px solid var(--hair2);background:var(--panel)}
.shot img{width:100%;height:100%;object-fit:cover}
.shot.r169{aspect-ratio:16/9}
.shot.r43{aspect-ratio:4/3}
.shot.r45{aspect-ratio:4/5}
.shot-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.shot-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:700px){.shot-grid-2,.shot-grid-3{grid-template-columns:1fr}}

.did-list{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--hair2);border:1px solid var(--hair2)}
@media(max-width:760px){.did-list{grid-template-columns:1fr}}
.did-item{background:var(--bg);padding:30px}
.did-item .num{font-family:var(--disp);font-weight:900;font-size:15px;color:var(--cyan);letter-spacing:.18em;margin-bottom:10px}
.did-item h4{margin-bottom:8px}
.did-item p{font-size:15px}

.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:760px){.video-grid{grid-template-columns:1fr}}
.video-card video{width:100%;border:1px solid var(--hair2)}
.video-card .vid{font-size:13px;color:var(--faint);margin-top:8px}

.tweet-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:760px){.tweet-grid{grid-template-columns:1fr}}
.press-name{font-family:var(--disp);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:13px;color:var(--faint)}
.read{color:var(--cyan)}

.issue-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:760px){.issue-grid{grid-template-columns:1fr}}
.issue{background:var(--panel);border:1px solid var(--hair2);padding:18px}
.issue-img{border:1px solid var(--hair2);margin-bottom:12px}

.cols-3,.three{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:760px){.cols-3,.three{grid-template-columns:1fr}}
.creator{background:var(--panel);border:1px solid var(--hair2);padding:16px}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:54px;align-items:start;padding:40px 0 90px}
@media(max-width:800px){.about-grid{grid-template-columns:1fr}}
.about-photo img{border:1px solid var(--hair2);width:100%}
.about-copy p{margin-bottom:16px;font-size:17px}
.about-copy em{font-style:normal;color:var(--cyan)}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:54px;padding:40px 0 100px}
@media(max-width:800px){.contact-grid{grid-template-columns:1fr}}
.contact-email{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(26px,4vw,44px);line-height:1;color:var(--cyan);border-bottom:3px solid var(--cyan);display:inline-block;padding-bottom:6px}
.contact-email:hover{color:var(--ink);border-color:var(--ink)}
.contact-channels{display:flex;flex-direction:column;border-top:1px solid var(--hair2)}
.chip,.contact-channels a{display:flex;justify-content:space-between;gap:16px;padding:18px 4px;border-bottom:1px solid var(--hair2)}
.contact-channels .name{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:15px}
.contact-channels .handle{color:var(--faint)}
.contact-channels a:hover .name{color:var(--cyan)}

/* ---------- CTA band ---------- */
.cta-band{background:var(--cyan);color:var(--bg);padding:90px 0;text-align:left}
.cta-band .eyebrow{color:var(--bg);opacity:.7}
.cta-band .display{color:var(--bg);margin:14px 0 30px}
.cta-band .display em{color:transparent;-webkit-text-stroke:2px var(--bg)}
.cta-band .btn-primary{background:var(--bg);color:var(--cyan)}

/* ---------- next case ---------- */
.next-case{display:block;background:var(--panel);border-top:1px solid var(--hair2);padding:56px 0}
.next-case .eyebrow{color:var(--faint)}
.next-case h2{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(40px,6vw,80px);line-height:.95;color:transparent;-webkit-text-stroke:2px var(--cyan);margin:8px 0 4px}
.next-case:hover h2{color:var(--cyan)}
.next-case .sub{font-family:var(--disp);font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:13px;color:var(--faint)}

/* ---------- footer ---------- */
#site-footer{border-top:1px solid var(--hair2);padding:70px 0 40px;background:var(--panel)}
.foot-mark{text-align:center;font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(54px,10vw,130px);line-height:.85;color:transparent;-webkit-text-stroke:2px var(--cyan);margin-bottom:34px}
.foot-grid{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:flex-end}
.foot-grid .fl{display:flex;flex-direction:column;gap:6px}
.foot-grid a:hover{color:var(--cyan)}
.foot-note{margin-top:34px;font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}