/* ═══════════════════════════════════════════════════════════════
   AiM v3 — THE SCREENING ROOM
   A film, not a page. Warm-black #0a0907 · candle-gold #b8965a ·
   cream #FAF8F3. Motion: transform/opacity only, ease-out enters,
   full prefers-reduced-motion support.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --black:#0a0a0a; --canvas:#0a0907; --s2:#141414; --s3:#1d1d1c;
  --cream:#FAF8F3; --cream2:#ECE7D7;
  --gold:#b8965a; --gold2:#d4ae7a; --golddim:#6e5a36;
  --mint:#00ff88;
  --line:rgba(255,255,255,.08); --linelt:rgba(255,255,255,.14);
  --muted:rgba(255,255,255,.55);
  --display:'Archivo Black',system-ui,sans-serif;
  --puff:'Sigmar One',system-ui,sans-serif;
  --body:'Space Grotesk',system-ui,sans-serif;
  --serif:Georgia,'Times New Roman',serif;
  --max:1440px; --gut:clamp(20px,4vw,56px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--canvas); color:var(--cream);
  font-family:var(--body); font-weight:300; line-height:1.5;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:var(--black)}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ── grain (brand texture — web only) ─────────────────────────── */
.grain{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.14;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' seed='5'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.92  0 0 0 0 0.86  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}

/* ── scroll progress ──────────────────────────────────────────── */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;pointer-events:none}
.progress__fill{height:100%;width:0;
  background:linear-gradient(90deg,var(--golddim),var(--gold),var(--gold2));
  box-shadow:0 0 14px rgba(184,150,90,.5)}

/* (custom cursor removed by request — native cursor everywhere) */

/* ── nav ──────────────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:210;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px var(--gut);
  background:linear-gradient(rgba(10,9,7,.82),rgba(10,9,7,0));
  transition:background .4s}
.nav.scrolled{background:rgba(10,9,7,.88);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav__logo img{height:28px;width:auto;display:block}
.nav__links{display:flex;gap:26px}
.nav__links a{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);transition:color .25s}
.nav__links a:hover{color:var(--gold2)}
.nav__cta{display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--black);background:var(--gold);padding:11px 20px;border-radius:1px;
  transition:background .25s,transform .25s}
.nav__cta:hover{background:var(--gold2);transform:translateY(-2px)}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 8px var(--mint);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.4}}
/* ── mobile nav: hamburger → full-screen drawer ─────────────── */
.nav__burger{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;padding:9px;margin-right:-9px;background:none;border:0;cursor:pointer;z-index:210}
.nav__burger span{display:block;height:2px;width:100%;background:var(--cream);border-radius:2px;
  transition:transform .35s var(--ease),opacity .2s}
.mobilemenu{position:fixed;inset:0;z-index:200;
  background:rgba(10,9,7,.985);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;flex-direction:column;justify-content:center;padding:96px var(--gut) 44px;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .4s var(--ease),transform .45s var(--ease),visibility .4s}
.mobilemenu__links{display:flex;flex-direction:column}
.mobilemenu a{font-family:var(--display);font-size:clamp(30px,8.5vw,44px);line-height:1.16;
  color:var(--cream);letter-spacing:-.01em;padding:11px 0;border-bottom:1px solid var(--line)}
.mobilemenu a:active{color:var(--gold2)}
.mobilemenu__cta{margin-top:30px;display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  font-family:var(--body);font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--black);background:var(--gold);padding:15px 28px;border-radius:1px}
html.menu-open{overflow:hidden}
html.menu-open .mobilemenu{opacity:1;visibility:visible;transform:none}
html.menu-open .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
html.menu-open .nav__burger span:nth-child(2){opacity:0}
html.menu-open .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:880px){
  .nav__links{display:none}
  .nav__cta{display:none}
  .nav__burger{display:flex}
}
@media(min-width:881px){.mobilemenu{display:none}}

/* ── chapter dots ─────────────────────────────────────────────── */
.dots{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:140;
  display:flex;flex-direction:column;gap:13px;padding:14px 9px;border-radius:40px;
  background:rgba(20,20,20,.5);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);border:1px solid var(--line)}
.dots button{position:relative;width:8px;height:8px;border-radius:50%;border:0;padding:0;
  background:rgba(255,255,255,.25);cursor:pointer;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .3s}
.dots button:hover{transform:scale(1.7);background:var(--gold2)}
.dots button.on{background:var(--gold);transform:scale(1.5);box-shadow:0 0 10px rgba(184,150,90,.7)}
.dots button::after{content:attr(data-label);position:absolute;right:20px;top:50%;
  transform:translateY(-50%) translateX(6px);white-space:nowrap;opacity:0;pointer-events:none;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);
  background:rgba(10,9,7,.92);padding:4px 9px;border-radius:3px;transition:.25s}
.dots button:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
@media(max-width:900px){.dots{display:none}}

/* ── shared: slates, chapter heads, reveals ───────────────────── */
.slate{display:flex;align-items:center;gap:14px;
  font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.slate::before{content:"";width:28px;height:1px;background:var(--gold)}
.slate__num{font-family:var(--display);font-size:13px;color:var(--cream);
  background:var(--s3);border:1px solid var(--linelt);padding:3px 8px;letter-spacing:.1em}
.chap{max-width:var(--max);margin:0 auto;padding:110px var(--gut) 50px}
.chap__h{font-family:var(--display);font-size:clamp(46px,8vw,110px);line-height:.92;
  letter-spacing:-.03em;margin-top:22px;text-transform:none}
.chap__h em{font-family:var(--serif);font-style:italic;color:var(--gold);font-weight:400}
.chap__p{margin-top:20px;max-width:560px;color:var(--muted);font-size:17px}
.chap--overlay{position:absolute;top:0;left:0;right:0;z-index:5;padding-bottom:0}

/* word-mask reveal */
.aim-mask{display:inline-block;overflow:clip;vertical-align:top;
  padding:0 .04em .16em;margin:0 -.04em -.16em}
.aim-word{display:inline-block;transform:translateY(116%);
  transition:transform .7s var(--ease);transition-delay:var(--d,0ms)}
.in .aim-word,.aim-word.in{transform:translateY(0)}
/* block reveal — --rd (distance) varies per section so the cascade never
   feels metronomic; --d is the per-card stagger set by app.js. */
.js .reveal{opacity:0;transform:translateY(var(--rd,26px)) scale(var(--rs,.99));
  transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none}
/* reveal-all pages (Journal index + blog posts): text is present the instant the
   page loads — no scroll, no wait, no dependency on JS/requestAnimationFrame. */
html.reveal-all .reveal{opacity:1;transform:none;transition:none}
html.reveal-all .aim-word{transform:none;transition:none}

/* ── 00 · TITLE ───────────────────────────────────────────────── */
.title{height:200vh;position:relative}
.title__pin{position:sticky;top:0;height:100vh;overflow:hidden}
.title__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.52) saturate(.9)}
/* three stacked washes: floor vignette, a centre pool behind the type,
   and top/bottom bands so the nav and scroll cue stay legible. */
.title__shade{position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% 88%,rgba(10,9,7,.92) 0%,rgba(10,9,7,.45) 45%,rgba(10,9,7,.22) 100%),
    radial-gradient(72% 56% at 50% 47%,rgba(10,9,7,.74) 0%,rgba(10,9,7,.30) 62%,transparent 100%),
    linear-gradient(180deg,rgba(10,9,7,.58) 0%,transparent 20%,transparent 60%,rgba(10,9,7,.72) 100%)}
.title__card{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;padding:0 var(--gut);
  will-change:transform,opacity}
.title__h{font-family:var(--display);font-size:clamp(54px,9.5vw,150px);line-height:.95;
  letter-spacing:-.03em;margin:26px 0 22px;max-width:1200px}
.title__h em{font-family:var(--serif);font-style:italic;color:var(--gold);font-weight:400}
/* rotating gold phrase — same mask idiom as .aim-word, one unit at a time.
   app.js pins the width to the widest phrase (capped at 100%) so swapping
   never reflows the rest of the headline, and long phrases wrap instead
   of overflowing the viewport. */
.rot{display:inline-block;overflow:clip;vertical-align:top;text-align:center;
  max-width:100%;padding:0 .04em .16em;margin:0 -.04em -.16em}
.rot__w{display:inline-block;transform:translateY(var(--ry,0));
  transition:transform .62s var(--ease)}
.title__h .puff{font-family:var(--puff);font-weight:400;letter-spacing:.01em}
.title__sub{font-family:var(--serif);font-style:italic;font-size:clamp(17px,2vw,24px);
  color:var(--cream2);opacity:.85}
.title__scroll{margin-top:52px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:12px}
.title__scroll span{width:1px;height:44px;background:linear-gradient(var(--gold),transparent);
  animation:drip 1.8s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ── kinetic strips ───────────────────────────────────────────── */
.kstrip{overflow:hidden;padding:34px 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);background:var(--black)}
.kstrip__track{display:flex;white-space:nowrap;width:max-content}
.kstrip__track span{font-family:var(--display);font-size:clamp(38px,5.5vw,72px);
  letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px rgba(184,150,90,.55);
  text-transform:uppercase}
.k-left{animation:kmar 38s linear infinite}
.k-right{animation:kmar 38s linear infinite reverse}
@keyframes kmar{to{transform:translateX(-50%)}}

/* ── 01 · THE REEL ────────────────────────────────────────────── */
.reelc{background:var(--canvas)}
.cinema{max-width:var(--max);margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(120px,12.4vw,180px);gap:18px}
/* ★ row height is tuned so a 1-col cell lands on 16:9 — posters are 16:9 and were
   losing ~10% to the old 1.59 cells. The 2x2 star spans 2 rows + a gap so it sits
   ~2% off 16:9; that residue is unavoidable with a fixed gap and is not visible. */
/* ── bento mosaic (9 cards): the music video is the ★ star (2x2), 8 uniform thumbnails.
   Every card wears a golden gradient border with rounded edges. ── */
.cinema .cine{aspect-ratio:auto;border:2px solid transparent;border-radius:16px;
  background:linear-gradient(var(--canvas),var(--canvas)) padding-box,
             linear-gradient(140deg,var(--gold2) 0%,var(--golddim) 48%,var(--gold) 100%) border-box}
.cinema .cine.playing{aspect-ratio:auto}
.cinema .cine figcaption{display:none}      /* no titles on the reel */
.cinema .cine:hover{box-shadow:0 26px 62px rgba(0,0,0,.5),0 0 24px rgba(184,150,90,.30)}
.cinema .cine:nth-child(1){grid-column:1/3;grid-row:1/3}   /* ★ STAR — music video */
.cinema .cine:nth-child(2){grid-column:3/4;grid-row:1/2}   /* Wealthsimple */
.cinema .cine:nth-child(3){grid-column:4/5;grid-row:1/2}   /* Betway */
.cinema .cine:nth-child(4){grid-column:3/4;grid-row:2/3}   /* Koho */
.cinema .cine:nth-child(5){grid-column:4/5;grid-row:2/3}   /* Aether */
.cinema .cine:nth-child(6){grid-column:1/2;grid-row:3/4}   /* AiM reel — craft */
.cinema .cine:nth-child(7){grid-column:2/3;grid-row:3/4}   /* AiM reel — explainer */
.cinema .cine:nth-child(8){grid-column:3/4;grid-row:3/4}   /* Get A Grip */
.cinema .cine:nth-child(9){grid-column:4/5;grid-row:3/4}   /* Original G */
.cine{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  cursor:pointer;background:#000;aspect-ratio:16/9;
  transition:transform .45s var(--ease),border-color .45s,box-shadow .45s}
.cine:hover{transform:translateY(-6px);border-color:rgba(184,150,90,.5);
  box-shadow:0 30px 70px rgba(0,0,0,.55)}
.cine img{width:100%;height:100%;object-fit:cover;
  filter:brightness(.96) saturate(1.03);transition:filter .5s,transform .8s var(--ease);
  transform:scale(var(--pz,1)) translate3d(0,var(--py,0px),0)}
.cine:hover img{filter:none;--pz:1.03}
/* .pimg = parallax-managed by app.js; the extra scale is the travel headroom */
.cine img.pimg{--pz:1.12}
.cine:hover img.pimg{--pz:1.17}
/* silent looping preview — sits over the poster, under the caption/play button */
.cine__prev{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;
  opacity:0;transition:opacity .7s var(--ease);pointer-events:none;background:#000}
.cine.previewing .cine__prev{opacity:1}
.cine figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:40px 20px 16px;
  background:linear-gradient(transparent,rgba(10,9,7,.92))}
.cine__brand{font-family:var(--display);font-size:clamp(18px,2vw,26px);letter-spacing:-.01em}
.cine__kind{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold2)}
.cine__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  width:74px;height:74px;border-radius:50%;background:var(--gold);color:var(--black);
  display:grid;place-items:center;font-size:20px;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .3s,opacity .35s}
.cine:hover .cine__play{transform:translate(-50%,-50%) scale(1.14);background:var(--gold2)}
/* while a card is previewing, the ▶ recedes — nine full-size gold discs over
   moving footage is noise. It comes back on hover, where it means "with sound". */
.cine.previewing .cine__play{transform:translate(-50%,-50%) scale(.58);opacity:.5}
.cine.previewing:hover .cine__play{transform:translate(-50%,-50%) scale(1.14);opacity:1}
.cine.playing{aspect-ratio:16/9}
.cine.playing .cine__play,.cine.playing figcaption{display:none}
.cine video,.cine iframe{width:100%;height:100%;border:0;display:block;background:#000}
.cine--wide{grid-column:1/-1;aspect-ratio:21/9}          /* marquee slots */
/* still card — no playback; whole card links to the CLICK case study */
.cine--still .cine__link{position:absolute;inset:0;z-index:4;display:block}
.cine--still figcaption{pointer-events:none}
@media(max-width:900px){
  .cinema{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:14px}
  .cinema .cine{grid-column:auto !important;grid-row:auto !important;aspect-ratio:16/9}
  .cine--wide{aspect-ratio:16/9}
}
@media(max-width:560px){ .cinema{grid-template-columns:1fr} }

/* disclosure — visible, bordered note */
.reelc{padding-bottom:100px}
.legal{display:block;max-width:calc(var(--max) - 2*var(--gut));
  margin:44px var(--gut) 0;font-size:13px;line-height:1.8;color:rgba(255,255,255,.55);
  border:1px solid rgba(184,150,90,.25);border-left:3px solid var(--gold);
  border-radius:6px;background:rgba(184,150,90,.05);padding:18px 22px}
@media(min-width:1441px){.legal{margin-left:auto;margin-right:auto}}
.legal strong{color:var(--gold);letter-spacing:.06em}
.legal em{color:var(--cream2);font-style:italic}

/* ── 02 · PAN (horizontal lookbook) ───────────────────────────── */
/* height sets the pan speed: taller = more scroll per px of sideways travel.
   Raised with the bigger .look cards (V45) so the lookbook still reads at ~2.3px
   of pan per px of scroll, matching how it felt at the old card size. */
.pan{position:relative;height:520vh}
.pan__pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:flex-end}
.pan__track{display:flex;gap:22px;padding:0 var(--gut) 9vh;will-change:transform}
/* 16:9 frames — the stills are 16:9 and a near-square card was cropping ~46% off
   the sides. Portrait outliers letterbox via .fitc rather than lose their subject. */
.look{flex:0 0 auto;position:relative;border-radius:10px;overflow:hidden;
  border:1px solid var(--line);width:min(880px,78vw);aspect-ratio:16/9;background:#000}
.look img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2) brightness(.9)}
/* .fitc = this source is not 16:9 (an ultrawide 2.35 master, or a portrait still).
   Letterbox it inside the frame instead of cropping the subject out. Matches how
   <video> already behaves on playback, so poster and film agree. */
.cine img.fitc,.look img.fitc,.lane__media img.fitc{object-fit:contain;background:#000;--pz:1;--py:0px}
.cine:hover img.fitc,.look:hover img.fitc{--pz:1}
/* Lookbook captions retired (V46) — the stills carry themselves; nothing overlays them.
   Kept as a safety net in case a card ever ships with a stray <figcaption>. */
.look figcaption{display:none}
/* reels pan (#social) — 19 vertical cards, scroll-driven like the lookbook */
.pan--reels{height:460vh;background:var(--canvas)}
.pan--reels .pan__track{gap:20px;align-items:flex-end}
.pan--reels .cell{height:min(66vh,640px)}

@media(max-width:900px){
  .pan{height:auto}
  .pan__pin{position:static;height:auto;display:block;overflow:visible}
  .chap--overlay{position:static}
  .pan__track{overflow-x:auto;padding-top:30px;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory}
  .look{scroll-snap-align:center;width:min(560px,86vw)}   /* aspect-ratio keeps it 16:9 */
  .pan--reels{height:auto}
  .pan--reels .cell{scroll-snap-align:center;height:112vw}
}

/* ── 03 · LANES (sticky stack) ────────────────────────────────── */
.lanes{background:var(--black);border-top:1px solid var(--line)}
.stack{max-width:1180px;margin:0 auto;padding:0 var(--gut) 130px}
.lane{position:sticky;top:calc(90px + var(--i)*34px);
  display:grid;grid-template-columns:1.1fr 1fr;min-height:340px;
  margin-bottom:44px;border-radius:16px;overflow:hidden;
  border:1px solid var(--linelt);
  background:linear-gradient(160deg,#181613,#0d0c0a);
  box-shadow:0 -18px 50px rgba(0,0,0,.45)}
.lane__media{position:relative;min-height:240px}
.lane__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.25) brightness(.8);transition:filter .5s,transform .8s var(--ease);
  transform:scale(var(--pz,1)) translate3d(0,var(--py,0px),0)}
.lane__media img.pimg{--pz:1.12}
.lane:hover .lane__media img{filter:grayscale(0) brightness(.95)}
.lane__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 55%,#12100d 100%)}
.lane__body{padding:38px 40px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.lane__num{font-family:var(--display);color:var(--gold);letter-spacing:.1em}
.lane__h{font-family:var(--display);font-size:clamp(26px,3.4vw,44px);letter-spacing:-.02em}
.lane__p{color:var(--muted);max-width:400px}
.lane__cta{margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);align-self:flex-start;
  border-bottom:1px solid var(--golddim);padding-bottom:3px;transition:color .25s}
.lane__cta:hover{color:var(--gold2)}
@media(max-width:820px){
  .lane{grid-template-columns:1fr;position:static}
  .lane__media{min-height:180px}
}

/* ── 04 · REEL CELLS (#social) ────────────────────────────────── */
/* Sizing lives with .pan--reels above; the old drag-strip (.film/.strip)
   was retired when #social became a scroll-driven pan. */
.cell{flex:0 0 auto;aspect-ratio:9/16;overflow:hidden;background:#000}
.cell video{width:100%;height:100%;object-fit:cover}

/* ── 05 · CLICK case study ────────────────────────────────────── */
.case{background:var(--canvas);border-top:1px solid var(--line);padding-bottom:110px}
.case__grid{max-width:var(--max);margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:1fr 1fr;gap:18px}
.case__shot{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);min-height:220px}
.case__shot--main{grid-row:1/3}
.case__shot img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  filter:grayscale(.15) brightness(.9);transition:filter .5s,transform .8s var(--ease);
  transform:scale(var(--pz,1)) translate3d(0,var(--py,0px),0)}
.case__shot:hover img{filter:none;--pz:1.03}
.case__shot img.pimg{--pz:1.12}
.case__shot:hover img.pimg{--pz:1.17}
.case__shot figcaption{position:absolute;left:14px;bottom:12px;z-index:2;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cream);
  text-shadow:0 1px 8px rgba(0,0,0,.85)}
@media(max-width:820px){.case__grid{grid-template-columns:1fr;grid-template-rows:auto}
  .case__shot--main{grid-row:auto}.case__shot{min-height:200px;height:56vw}}
.case__film{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.case__film .cine--wide{aspect-ratio:16/9;max-width:1080px;margin:0 auto;display:block}
.case__ctas{max-width:var(--max);margin:34px auto 0;padding:0 var(--gut);
  display:flex;align-items:baseline;gap:28px;flex-wrap:wrap}
.case__link{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);border-bottom:1px solid var(--golddim);padding-bottom:3px;transition:color .25s}
.case__link:hover{color:var(--gold2)}
.case__note{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:15px;max-width:480px}

/* ── 06 · WHY AI (Vinny) ──────────────────────────────────────── */
.vinny{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.vinny .cine--wide{aspect-ratio:16/9;max-width:1080px;margin:0 auto;display:block}
.why__cols{max-width:var(--max);margin:56px auto 0;padding:0 var(--gut);
  display:grid;grid-template-columns:1fr 1fr;gap:34px}
@media(max-width:820px){.why__cols{grid-template-columns:1fr}}
.why__col h3{font-family:var(--display);font-size:clamp(20px,2.4vw,30px);
  letter-spacing:-.01em;margin-bottom:12px}
.why__col p{color:var(--muted);font-size:15.5px;line-height:1.75;max-width:560px}
.why__col em{font-family:var(--serif);font-style:italic;color:var(--gold2)}

/* ── 07 · MUSIC ───────────────────────────────────────────────── */
.musicb{background:var(--canvas);border-top:1px solid var(--line);padding-bottom:120px}
.tracks{max-width:var(--max);margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.track{border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:linear-gradient(165deg,#151310,#0d0c0a);
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.track:hover{transform:translateY(-6px);border-color:rgba(184,150,90,.4);
  box-shadow:0 24px 50px rgba(0,0,0,.5)}
.track__cover{position:relative;aspect-ratio:16/10;overflow:hidden}
.track__cover img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.15) brightness(.88);transition:filter .5s,transform .8s var(--ease)}
.track:hover .track__cover img{filter:none;transform:scale(1.04)}
.track__tag{position:absolute;top:12px;left:12px;background:rgba(10,9,7,.82);color:var(--gold2);
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  padding:5px 10px;border-radius:2px;border:1px solid rgba(184,150,90,.3)}
.track__body{padding:18px 18px 20px}
.track__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.track__title{font-family:var(--display);font-size:17px;letter-spacing:-.01em}
.track__dur{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.track__meta{font-size:12.5px;color:var(--muted);margin:6px 0 14px}
.track audio{width:100%;height:36px;display:block;filter:invert(1) hue-rotate(180deg) saturate(.6)}

/* ── WHY (stats + manifesto shared) ───────────────────────────── */
.why{background:var(--black);border-top:1px solid var(--line);padding-bottom:120px}
.stats{max-width:var(--max);margin:0 auto;padding:10px var(--gut) 40px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.stat strong{display:block;font-family:var(--display);
  font-size:clamp(64px,10vw,150px);line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.stat strong.gold{color:var(--gold)}
.stat span{display:block;margin-top:10px;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted)}
@media(max-width:720px){.stats{grid-template-columns:1fr}}
.manifesto{max-width:var(--max);margin:0 auto;padding:30px var(--gut) 0}
.manifesto__line{font-family:var(--display);font-size:clamp(24px,3.6vw,46px);
  letter-spacing:-.02em;line-height:1.25;margin-bottom:18px}
.manifesto__line em{font-family:var(--serif);font-style:italic;color:var(--gold);font-weight:400}

/* ── 06 · ENGAGEMENT ──────────────────────────────────────────── */
.engage{padding-bottom:120px}
.plans{max-width:var(--max);margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.plan{position:relative;border:1px solid var(--line);border-radius:12px;padding:30px 26px;
  background:radial-gradient(120% 140% at 50% 0%,#17151199 0%,#0e0d0b 60%);
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.plan:hover{transform:translateY(-8px);border-color:rgba(184,150,90,.4);
  box-shadow:0 26px 60px rgba(0,0,0,.5)}
.plan__tag{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px}
.plan__h{font-family:var(--display);font-size:21px;letter-spacing:-.01em;margin-bottom:10px}
.plan__p{color:var(--muted);font-size:14.5px;margin-bottom:16px}
.plan ul{list-style:none}
.plan li{font-size:13.5px;color:var(--cream2);padding:7px 0 7px 22px;position:relative;
  border-top:1px solid var(--line)}
.plan li::before{content:"—";position:absolute;left:0;color:var(--gold)}
.plan__note{margin-top:14px;font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--gold2)}
.plan--ft{border-color:rgba(184,150,90,.6);
  box-shadow:0 0 0 1px rgba(184,150,90,.35),0 30px 70px rgba(0,0,0,.55)}
.plan--ft::before{content:"Most booked";position:absolute;top:14px;right:14px;
  background:var(--gold);color:var(--black);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:2px}

/* ── FINALE — one screen, everything visible ──────────────────── */
.finale{background:var(--black);border-top:1px solid var(--line);
  padding:90px var(--gut) 70px;position:relative;overflow:hidden;
  display:flex;align-items:center;min-height:70vh}
.finale::before{content:"";position:absolute;inset:-20%;pointer-events:none;
  background:radial-gradient(40% 50% at 18% 25%,rgba(184,150,90,.12),transparent 60%),
             radial-gradient(36% 46% at 85% 75%,rgba(212,174,122,.09),transparent 60%);
  filter:blur(18px);animation:aur 16s ease-in-out infinite alternate}
@keyframes aur{to{transform:translate3d(3%,2%,0) scale(1.06)}}
.finale__inner{position:relative;z-index:1;max-width:var(--max);margin:0 auto;width:100%}
.finale__h{font-family:var(--display);font-size:clamp(30px,4.2vw,60px);line-height:1.02;
  letter-spacing:-.02em;margin:18px 0 34px;max-width:900px}
.finale__h em{font-family:var(--serif);font-style:italic;color:var(--gold);font-weight:400}
.finale__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:start}
@media(max-width:880px){.finale__grid{grid-template-columns:1fr}.finale{min-height:0}}
.finale__alt{margin-top:20px;color:var(--muted);font-size:14.5px}
.finale__alt a{color:var(--gold);border-bottom:1px solid var(--golddim)}

/* 3D gold cube CTA (ui-animations #1, reskinned) */
.cube-btn{display:inline-block;cursor:pointer}
.cube{position:relative;display:inline-block;transition:all .5s var(--ease)}
.c-bg-top{position:absolute;height:10px;background:var(--gold);bottom:100%;left:5px;right:-5px;
  transform:skew(-45deg,0);transition:all .4s}
.c-bg{position:absolute;inset:0;background:var(--gold);transition:all .4s}
.c-bg-right{position:absolute;background:var(--gold);top:-5px;bottom:5px;width:10px;left:100%;
  transform:skew(0,-45deg);transition:all .4s}
.c-inner{background:var(--black);position:absolute;inset:2px}
.c-bg-top .c-inner{bottom:0}.c-bg-right .c-inner{left:0}
.c-text{position:relative;z-index:2;display:block;padding:1rem 2.2rem;color:var(--gold);
  font-weight:700;letter-spacing:.13em;text-transform:uppercase;font-size:.76rem;transition:color .3s}
.cube-btn:hover .c-bg-top{height:5px}
.cube-btn:hover .c-bg-right{width:5px}
.cube-btn:hover .c-text{color:var(--gold2)}
.cube-btn:active .cube{transform:translateY(2px)}

/* form */
.cform{display:flex;flex-direction:column;gap:16px}
.cform label{display:flex;flex-direction:column;gap:7px;font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);flex:1}
.cform input,.cform textarea{background:var(--s2);border:1px solid var(--line);border-radius:4px;
  color:var(--cream);font-family:var(--body);font-size:15px;padding:13px 14px;
  transition:border-color .25s}
.cform input:focus,.cform textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.cform__row{display:flex;gap:16px}
@media(max-width:560px){.cform__row{flex-direction:column}}
.cform button{align-self:flex-start;background:var(--gold);color:var(--black);border:0;
  font-family:var(--body);font-weight:700;font-size:.76rem;letter-spacing:.13em;
  text-transform:uppercase;padding:1rem 2.2rem;border-radius:1px;cursor:pointer;
  transition:background .25s,transform .25s,box-shadow .25s}
.cform button:hover{background:var(--gold2);transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(184,150,90,.35)}
.hp{position:absolute;left:-9999px}

/* ── SITE FOOTER — the full works ─────────────────────────────── */
.sitefoot{background:var(--canvas);border-top:1px solid var(--linelt)}
.sitefoot__grid{max-width:var(--max);margin:0 auto;padding:64px var(--gut) 44px;
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px}
@media(max-width:980px){.sitefoot__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sitefoot__grid{grid-template-columns:1fr}}
.sitefoot__brand img{height:34px;width:auto;margin-bottom:16px}
.sitefoot__brand p{color:var(--muted);font-size:13.5px;line-height:1.7;max-width:340px}
.sitefoot__status{margin-top:14px;display:flex;align-items:center;gap:8px;
  font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cream2) !important}
.sitefoot__col{display:flex;flex-direction:column;gap:10px}
.sitefoot__col h4{font-size:10px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);margin-bottom:6px}
.sitefoot__col a{color:rgba(255,255,255,.6);font-size:13.5px;transition:color .25s;
  display:inline-flex;align-items:center;gap:7px}
.sitefoot__col a:hover{color:var(--gold2)}
.sitefoot__bar{border-top:1px solid var(--line)}
.sitefoot__bar{max-width:none;display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;padding:18px var(--gut);color:rgba(255,255,255,.38);font-size:12px}
.sitefoot__bar a{color:rgba(255,255,255,.55);transition:color .25s}
.sitefoot__bar a:hover{color:var(--gold2)}
.sitefoot__top{font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:10px}

/* why-band links + single-still case study */
.why__more{max-width:var(--max);margin:34px auto 0;padding:0 var(--gut);
  display:flex;gap:34px;flex-wrap:wrap}
.case__grid--single{grid-template-columns:1fr;grid-template-rows:none}
.case__grid--single .case__shot--main{grid-row:auto;aspect-ratio:21/9;min-height:280px}
.case__ctas{align-items:center}
@media(max-width:820px){.case__grid--single .case__shot--main{aspect-ratio:16/9;height:auto}}

/* ── reduced motion: everything visible, nothing moves ────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .aim-word{transform:none !important;transition:none !important}
  .kstrip__track,.finale::before,.title__scroll span,.live-dot{animation:none !important}
  img.pimg{--pz:1 !important;--py:0px !important}
  .cine__prev{display:none}
  .title{height:auto}.title__pin{position:static;height:100vh}
  .pan{height:auto}.pan__pin{position:static;height:auto}
  .pan__track{overflow-x:auto}
  .cursor{display:none}
}

/* ═══════════════════════════════════════════════════════════════
   BLOG / THE JOURNAL — monthly dispatches (index + article pages)
   ═══════════════════════════════════════════════════════════════ */
.blogwrap{background:var(--canvas);border-top:1px solid var(--line)}
.posts{max-width:var(--max);margin:0 auto;padding:0 var(--gut) 30px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:24px}
.post{position:relative;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:linear-gradient(165deg,#151310,#0d0c0a);
  transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.post:hover{transform:translateY(-6px);border-color:rgba(184,150,90,.4);
  box-shadow:0 26px 60px rgba(0,0,0,.5)}
.post__link{position:absolute;inset:0;z-index:3}
.post__cover{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.post__cover img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.2) brightness(.85);transition:filter .5s,transform .8s var(--ease);
  transform:scale(var(--pz,1)) translate3d(0,var(--py,0px),0)}
.post:hover .post__cover img{filter:none;--pz:1.04}
.post__cover img.pimg{--pz:1.12}
.post:hover .post__cover img.pimg{--pz:1.18}
/* ★ Journal covers carry headline type baked into the art (e.g. "WHY DOES YOUR TECH
   COMPANY NEED A VIDEO?"). The parallax zoom + drift would clip that text, so these
   opt out of both — the frame is already 16:9, so they now sit pixel-exact. */
.post__cover img.pimg,
.post:hover .post__cover img.pimg{--pz:1;--py:0px}
/* Scroll-linked images need a short, linear smoothing instead of the .8s
   hover ease — otherwise the parallax visibly swims behind the scroll.
   Must sit after every `.<block> img` transition rule to win on source order. */
img.pimg{transition:filter .5s,transform .2s linear}
.post__cat{position:absolute;top:12px;left:12px;z-index:2;background:rgba(10,9,7,.82);
  color:var(--gold2);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  padding:6px 11px;border-radius:2px;border:1px solid rgba(184,150,90,.3)}
.post__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:56px;height:56px;border-radius:50%;background:var(--gold);color:var(--black);
  display:grid;place-items:center;font-size:15px;opacity:.92;transition:transform .35s var(--ease)}
.post:hover .post__play{transform:translate(-50%,-50%) scale(1.12)}
.post__body{padding:22px 22px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.post__meta{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.post__meta .gold{color:var(--gold)}
.post__title{font-family:var(--display);font-size:clamp(20px,2.1vw,26px);
  letter-spacing:-.01em;line-height:1.1}
.post__ex{color:var(--muted);font-size:14.5px;line-height:1.65}
.post__more{margin-top:auto;padding-top:6px;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold)}
/* featured hero post */
.post--ft{grid-column:1/-1;flex-direction:row;align-items:stretch}
.post--ft .post__cover{flex:0 0 58%;aspect-ratio:auto;min-height:340px}
.post--ft .post__body{justify-content:center;padding:40px}
.post--ft .post__title{font-size:clamp(26px,3.4vw,44px)}
.post--ft .post__ex{font-size:16px;max-width:520px}
@media(max-width:820px){.post--ft{flex-direction:column}.post--ft .post__cover{flex:none;min-height:0;aspect-ratio:16/9}
  .post--ft .post__body{padding:26px}}

/* ── ARTICLE (single post) ────────────────────────────────────── */
.article{max-width:760px;margin:0 auto;padding:10px var(--gut) 40px;
  font-size:17px;line-height:1.78;color:rgba(255,255,255,.82)}
.article > *{margin-bottom:1.15em}
.article h2{font-family:var(--display);font-size:clamp(24px,3vw,36px);letter-spacing:-.02em;
  line-height:1.1;color:var(--cream);margin:1.5em 0 .5em}
.article h2 em{font-family:var(--serif);font-style:italic;color:var(--gold);font-weight:400}
.article h3{font-family:var(--body);font-weight:700;font-size:19px;color:var(--cream);margin:1.3em 0 .3em}
.article a{color:var(--gold);border-bottom:1px solid var(--golddim);transition:color .2s}
.article a:hover{color:var(--gold2)}
.article strong{color:var(--cream);font-weight:600}
.article em{color:var(--cream2)}
.article ul,.article ol{padding-left:1.3em}
.article li{margin-bottom:.5em}
.article blockquote{border-left:2px solid var(--gold);padding:6px 0 6px 22px;margin:1.4em 0;
  font-family:var(--serif);font-style:italic;font-size:1.28em;color:var(--cream2)}
.article .kicker{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.4em}
.artmeta{max-width:760px;margin:0 auto;padding:0 var(--gut);display:flex;gap:16px;flex-wrap:wrap;
  align-items:center;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.artmeta .gold{color:var(--gold)}
.artmeta span::before{content:"·";margin-right:16px;color:var(--golddim)}
.artmeta span:first-child::before{content:none}
.artfilm{max-width:1000px;margin:34px auto 40px;padding:0 var(--gut)}
.artfilm .cine{aspect-ratio:16/9;border-radius:14px}

/* ── Golden rim — the signature gradient border, on all content media ─────────
   (bento .cinema .cine keeps its own 16px override; logos/icons/hero excluded) ── */
.cine,
.look,
.cell,
.case__shot,
.post__cover,
.lane__media{
  border:2px solid transparent;
  border-radius:14px;
  overflow:hidden;
  background:linear-gradient(var(--canvas),var(--canvas)) padding-box,
             linear-gradient(140deg,var(--gold2) 0%,var(--golddim) 48%,var(--gold) 100%) border-box;
}

/* FAQ (matches FAQPage schema) */
.faq{max-width:760px;margin:20px auto 0;padding:0 var(--gut)}
.faq h2{font-family:var(--display);font-size:clamp(22px,2.6vw,32px);letter-spacing:-.02em;
  color:var(--cream);margin-bottom:16px}
.faq details{border-top:1px solid var(--line);padding:16px 0}
.faq details[open] summary{color:var(--gold2)}
.faq summary{cursor:pointer;list-style:none;font-family:var(--body);font-weight:600;font-size:16px;
  color:var(--cream);display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:20px;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:12px;color:var(--muted);line-height:1.7;font-size:15px}
/* post CTA + next-post */
.artcta{max-width:760px;margin:40px auto 0;padding:34px var(--gut) 0;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.artcta .case__note{margin:0}
.artnext{max-width:760px;margin:36px auto 0;padding:0 var(--gut)}
.artnext a{display:flex;align-items:center;justify-content:space-between;gap:16px;
  border:1px solid var(--line);border-radius:12px;padding:20px 24px;transition:border-color .3s,transform .3s}
.artnext a:hover{border-color:rgba(184,150,90,.4);transform:translateY(-3px)}
.artnext .lbl{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.artnext .nx{font-family:var(--display);font-size:18px;color:var(--cream)}
/* placeholder video slot (awaiting asset) */
.vidph{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;
  border:1px dashed rgba(184,150,90,.4);background:#000;display:grid;place-items:center;text-align:center}
.vidph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.4) brightness(.4)}
.vidph span{position:relative;z-index:2;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold2);padding:10px 16px;border:1px solid rgba(184,150,90,.4);border-radius:40px;
  background:rgba(10,9,7,.7)}

/* article cover poster (music post — full video embeds when link lands) */
.artposter img{width:100%;border-radius:12px;display:block;border:1px solid var(--line)}
.artposter figcaption{margin-top:12px;text-align:center;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.artposter figcaption::before{content:"▶ ";color:var(--gold)}