/* ===== Powered By Pictures — matched to PoweredByPictures_Deck_NC_082226 ===== */
:root {
  --ink: #09161F;
  --black: #000000;
  --gray: #4A5A66;
  --red: #FD5733;
  --cyan: #4CD3F6;
  --cyan-light: #74D0F2;
  --cyan-deep: #0E93BE;
  --steel: #4994B0;
  --nav-word: #3BA2CF;     /* menu words: a deeper tone of the bar itself */
  --white: #FFFFFF;
  --sky-grad: linear-gradient(180deg,#4CD3F6 0%,#4CD3F6 65%,#69D9F2 75%,#86DFEC 85%,#9DE4E5 93%,#B7EBDE 100%);
  --sky-grad-flip: linear-gradient(0deg,#4CD3F6 0%,#4CD3F6 65%,#69D9F2 75%,#86DFEC 85%,#9DE4E5 93%,#B7EBDE 100%);
  --font-display: "Inter", system-ui, sans-serif;
  --font-body: "Archivo", "Inter", system-ui, sans-serif;
  --pad-x: clamp(24px, 7.8vw, 118px);
  --nav-h: 76px;
  --crest: 44px;          /* docked crest size — the flying gif scales to match */
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-snap-type:y proximity; }
/* the process page is a composed sheet — landing anywhere near it pulls it
   flush to the viewport, so it is never seen half-on */
body { font-family:var(--font-body); background:var(--white); color:var(--black); -webkit-font-smoothing:antialiased; overflow-x:hidden;
  /* deck used static Inter Black; stop the variable opsz axis narrowing large type */
  font-optical-sizing:none; font-variation-settings:"opsz" 14; }
::selection { background:var(--cyan); color:var(--ink); }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
em { font-style:italic; }

.dot { color:var(--red); }
.dot-red { color:var(--red); }
.dot-ink { color:inherit; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1 { transition-delay:.12s; }
.reveal.d2 { transition-delay:.24s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
  .wm-word { transform:none !important; transition:none !important; }
  .type-on, .type-on.typed { clip-path:none !important; animation:none !important; }
  .hero-badge img, .hero-badge canvas { opacity:1 !important; transform:none !important; }
}

/* ---------- nav ---------- */
.nav { position:fixed; inset:0 0 auto 0; z-index:100; transition:background .35s, box-shadow .35s, backdrop-filter .35s, opacity .45s ease; }
.nav.scrolled { background:rgba(76,211,246,.94); backdrop-filter:blur(14px); box-shadow:0 1px 0 rgba(9,22,31,.14); }
.nav.scrolled .nav-links a { color:var(--nav-word); opacity:1; }
.nav.scrolled .nav-links a:hover { color:var(--white); }
.nav.scrolled .nav-links a.is-current { color:var(--red); }
/* the word for the page you are on */
.nav-links a.is-current { color:var(--red); }
.nav.scrolled .nav-burger span { background:var(--ink); }
.nav-cta { transition:transform .25s cubic-bezier(.2,.6,.2,1), background .2s, opacity .3s ease; }
.nav-cta.tuck { opacity:0; pointer-events:none; }
.nav-inner { position:relative; height:var(--nav-h); padding:0 var(--pad-x); display:flex; align-items:center; }
/* one non-wrapping row, baseline-aligned inside it and vertically centred by the bar */
.nav-row { display:flex; flex-wrap:nowrap; align-items:baseline; gap:var(--nav-gap); width:100%;
           justify-content:space-between; }   /* any residue spreads evenly, never dumps right */
.bl { display:inline-block; width:0; height:0; vertical-align:baseline; }
:root { --nav-gap: clamp(18px,2.5vw,38px); }
.nav-logo { display:flex; align-items:baseline; gap:var(--nav-gap); flex:none; pointer-events:none; }
.nav-logo.live { pointer-events:auto; }
.crest-slot { display:block; width:var(--crest); height:var(--crest); align-self:center; }
.nav-contact {
  font-family:var(--font-display); font-weight:900; font-size:var(--nav-font,15px);
  letter-spacing:-0.01em; color:var(--white); opacity:0;
}
.nav-logo:hover .nav-contact { opacity:.75 !important; }
.nav-logo img { height:44px; width:auto; transition:transform .25s; }

.nav-logo:hover img { transform:rotate(-4deg) scale(1.06); }
/* contents, not flex: the words become direct children of .nav-row so the bar's
   space-between shares slack between EVERY item, not just around this group */
.nav-links { display:contents; }
/* holds the space the docked wordmark will occupy so the words distribute against it */
.nav-dock { flex:none; width:var(--dock-w, 0px); height:1px; align-self:center; }
.nav-links a {
  font-family:var(--font-display); font-weight:900; font-size:var(--nav-font,15px);
  letter-spacing:-0.01em; color:var(--nav-word); opacity:1; transition:color .2s;
}
.nav-links a:hover { color:var(--white); }
/* the word for the page you are on */
.nav-links a.is-current { color:var(--red); }
.nav-cta { display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:700; background:var(--red); color:var(--white); padding:12px 22px; border-radius:100px; transition:transform .25s cubic-bezier(.2,.6,.2,1), background .2s; }
.nav-cta:hover { transform:scale(1.04); background:#D93A12; }
.cta-arrow { transition:transform .25s; }
.nav-cta:hover .cta-arrow { transform:translateX(3px); }
.nav-burger { display:none; }
.mobile-menu[hidden] { display:none; }
.mobile-menu { position:fixed; inset:var(--nav-h) 0 auto 0; z-index:110; background:rgba(255,255,255,.97); backdrop-filter:blur(14px); padding:24px var(--pad-x) 40px; display:flex; flex-direction:column; gap:20px; box-shadow:0 1px 0 rgba(9,22,31,.1); }
.mobile-menu a { font-family:var(--font-display); font-size:26px; font-weight:900; color:var(--ink); }
.mobile-menu .mobile-cta { color:var(--red); }

/* ---------- shared slide chrome ---------- */
.slide { position:relative; background:var(--white); padding:clamp(72px,11vh,140px) var(--pad-x) clamp(96px,15vh,180px); }
.slide-flush { padding-left:0; padding-right:0; }
.pad { padding-left:var(--pad-x); padding-right:var(--pad-x); }
/* deck's signature gradient rule at the foot of every white slide */
.slide::after { content:""; position:absolute; left:0; right:0; bottom:0; height:10px; background:var(--sky-grad-flip); }
.stamp { position:absolute; right:var(--pad-x); bottom:34px; width:clamp(34px,3.6vw,56px); height:auto; }
.slide-flush .stamp { right:var(--pad-x); }

.eyebrow { font-family:var(--font-display); font-weight:900; font-size:clamp(15px,1.5vw,21px); color:var(--cyan-light); margin-bottom:clamp(28px,5vh,64px); }
.eyebrow-on-sky { color:rgba(255,255,255,.55); }

.head { font-family:var(--font-display); font-weight:900; font-size:clamp(30px,4.4vw,66px); line-height:1.06; letter-spacing:-0.03em; color:var(--black); }
.body { font-family:var(--font-body); font-size:clamp(15px,1.35vw,20px); line-height:1.5; color:var(--black); max-width:74ch; margin-top:clamp(12px,1.6vh,20px); }
.subhead { font-family:var(--font-display); font-weight:900; font-size:clamp(22px,2.6vw,38px); letter-spacing:-0.02em; color:var(--black); margin-top:clamp(18px,2.6vh,32px); }

/* ---------- 01 cover ---------- */
.hero { position:relative; min-height:100svh; display:flex; flex-direction:column; padding:calc(var(--nav-h) + 3vh) var(--pad-x) 5vh; background:var(--sky-grad); overflow:hidden; }
.hero-inner { position:relative; z-index:2; flex:1; display:flex; flex-direction:column; justify-content:center; }
.hero-lockup { display:flex; align-items:center; gap:2.7vw; }
.badge-slot { flex:0 0 auto; margin-left:1.5vw; }
.hero-badge { position:fixed; z-index:101; pointer-events:none; transform-origin:left top; display:block; width:clamp(84px, min(16.2vw, 26vh), 390px); }
.hero-badge img { width:100%; height:auto; display:block; }
/* The crest is drawn frame by frame onto a canvas rather than left to the
   browser's animated-image machinery: iOS stops advancing animated images that
   sit inside a fixed, repeatedly-transformed layer, which is exactly where this
   one lives. Drawing it ourselves is immune to that. */
.hero-badge canvas, .finale-badge canvas { width:100%; height:auto; display:block; }
.hero-badge.has-canvas > img, .finale-badge.has-canvas > img { display:none; }
.wm-slot { flex:1; }
.hero-wordmark {
  position:fixed; z-index:101; pointer-events:none; transform-origin:left top;
  font-family:var(--font-display); font-weight:900; font-size:clamp(34px, min(11.2vw, 19vh), 270px);
  line-height:.8; letter-spacing:-0.03em; color:var(--white); white-space:nowrap;
}
.wm-l2 { will-change:transform; }
.hero-wordmark.docked { pointer-events:auto; cursor:none; }
.hero-wordmark.docked:hover { opacity:.85; }
.wm-dot { color:var(--red); }
.wm-line { display:block; overflow:hidden; padding-bottom:.35em; margin-bottom:-.35em; }
.wm-word { display:inline-block; }
.hero-wordmark.done .wm-line { overflow:visible; padding-bottom:0; margin-bottom:0; }
/* sits above the wordmark, indented past the crest so it lines up with it */
.hero-tag {
  align-self:flex-start;
  margin-left:calc(clamp(84px, min(16.2vw, 26vh), 390px) + 4.2vw);
  margin-bottom:clamp(6px,1.1vw,22px);
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(12px, min(2.5vw, 4.4vh), 52px); letter-spacing:-0.01em; color:var(--white);
}
/* ---------- landing sequence: the cover types itself on ----------
   a clip-path wipe in character-sized steps. it is a paint-time effect, so the
   boxes never move and the wordmark's flight measurements stay valid. the
   negative top/bottom insets matter: line-height is .8, so the letterforms sit
   outside their box and a plain inset(0 ...) would shave the ascenders. */
.type-on { clip-path:inset(-0.35em 100% -0.35em -0.14em); }
.type-on.typed {
  animation:type-in var(--type-dur,.9s) steps(var(--type-steps,20), end) var(--type-delay,0s) both;
}
/* once the wipe has run, drop the clip altogether. a stepped animation that
   fails to settle on its last keyframe (seen on iOS) would otherwise leave the
   final character sliced in half forever */
.type-on.type-done { clip-path:none !important; animation:none !important; }
@keyframes type-in {
  from { clip-path:inset(-0.35em 100%    -0.35em -0.14em); }
  to   { clip-path:inset(-0.35em -0.14em -0.35em -0.14em); }
}
/* the spinning crest holds off until the words have finished. opacity and a
   transform on the INNER img only — the flight owns .hero-badge's transform */
.hero-badge img, .hero-badge canvas { opacity:0; transform:scale(.88); }
.hero-badge.lit img, .hero-badge.lit canvas {
  opacity:1; transform:none;
  transition:opacity .55s ease, transform .7s cubic-bezier(.2,.8,.25,1);
}

.hero-kicker { margin-top:auto; font-family:var(--font-display); font-weight:900; font-size:clamp(13px,1.5vw,22px); letter-spacing:.02em; color:var(--steel); }
.hero-kicker .bar { color:var(--steel); }

/* ---------- 02 bridge ---------- */
.bridge { position:relative; background:var(--sky-grad-flip); padding:clamp(110px,26vh,300px) var(--pad-x) clamp(90px,18vh,200px); }
.bridge-statement { font-family:var(--font-display); font-weight:900; font-size:clamp(32px,5.6vw,86px); line-height:1.05; letter-spacing:-0.03em; color:var(--white); }
.bridge-but { display:block; width:max-content; margin-left:68%; margin-top:clamp(56px,14vh,150px); font-family:var(--font-display); font-weight:900; font-size:clamp(32px,5.6vw,86px); line-height:1; color:var(--white); transition:color .2s; }
.bridge-but:hover { color:var(--ink); }
.bridge .stamp { bottom:34px; }

/* ---------- 03 possibility ---------- */
.pivot { font-family:var(--font-display); font-weight:900; font-size:clamp(22px,2.8vw,40px); letter-spacing:-0.02em; color:var(--cyan-deep); margin-top:clamp(40px,8vh,96px); }

/* ---------- 04 passion ---------- */
.plain-list { margin-top:clamp(26px,4.5vh,56px); display:flex; flex-direction:column; gap:clamp(10px,1.6vh,20px); }
.plain-list li { font-family:var(--font-body); font-size:clamp(15px,1.4vw,21px); line-height:1.45; color:var(--black); max-width:82ch; }
.sig { font-family:var(--font-display); font-weight:900; font-size:clamp(26px,3.6vw,54px); letter-spacing:-0.02em; color:var(--black); margin-top:clamp(34px,6vh,72px); }

/* ---------- 05 people ---------- */
/* the deck leads People with its promise, then the founder beneath it */
.people-head{ font-size:clamp(26px,3.8vw,80px); margin:0 0 clamp(22px,4.6vh,58px); }
.founder-name { font-family:var(--font-display); font-weight:900; font-size:clamp(28px,3vw,46px); letter-spacing:-0.03em; color:var(--black); }
.founder-role { font-family:var(--font-display); font-weight:700; font-size:clamp(12px,1.05vw,15px); letter-spacing:.1em; text-transform:uppercase; color:var(--gray); margin-top:10px; }
.team { margin-top:clamp(26px,4.5vh,52px); display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(22px,3vw,44px) clamp(18px,2.4vw,36px); }
.team li { padding-top:14px; border-top:4px solid var(--cyan); }
.team-name { display:block; font-family:var(--font-display); font-weight:900; font-size:clamp(15px,1.4vw,21px); letter-spacing:-0.01em; color:var(--black); }
.team-role { display:block; margin-top:5px; font-family:var(--font-display); font-weight:700; font-size:clamp(10px,.85vw,13px); letter-spacing:.08em; text-transform:uppercase; color:var(--cyan-deep); }

/* ---------- 06 pixels ---------- */
/* two rows of stills on a white frame, with a play button over the middle */
.reel { position:relative; margin-top:clamp(28px,5vh,56px); background:var(--white); overflow:hidden; }
.reel-strip {
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:var(--reel-gap); background:var(--white);
  transition:opacity .55s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
/* the rows start low and travel back up when the reel finishes */
.reel-strip.enter { opacity:0; transform:translateY(34px); }
:root { --reel-gap: clamp(6px,0.7vw,10px); }
.reel-strip img { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
/* when the grid can't show the whole set, each cell wipes over to another shot.
   the incoming frame sits on top and is revealed by a clip, so nothing reflows.
   the wipe direction is set inline per swap, so it can vary every time */
.reel-cell { position:relative; display:block; overflow:hidden; }
.reel-swap {
  position:absolute; inset:0; width:100%; height:100%;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .85s cubic-bezier(.65,0,.35,1);
}
@media (prefers-reduced-motion:reduce){
  .reel-swap { transition:none; }
}
.reel-play {
  position:absolute; inset:0; margin:auto; padding:0; border:0; background:none;
  width:clamp(80px,10vw,150px); height:clamp(80px,10vw,150px); cursor:pointer;
  opacity:0; transform:scale(.82);
  transition:opacity .6s cubic-bezier(.2,.6,.2,1), transform .6s cubic-bezier(.2,.6,.2,1);
}
/* it only arrives once both rows are actually on screen */
.reel.in .reel-play { opacity:1; transform:scale(1); }
.reel-play { overflow:visible; }
.play-icon { width:100%; height:100%; display:block; filter:drop-shadow(0 4px 18px rgba(9,22,31,.45)); }

/* the title ring rides outside the button and turns while you hover */
.play-ring {
  position:absolute; left:50%; top:50%;
  width:172%; height:172%; margin:-86% 0 0 -86%;
  overflow:visible; pointer-events:none;
  opacity:0; transform:rotate(0deg); transform-origin:50% 50%;
  transition:opacity .35s ease;
  animation:ring-turn 11s linear infinite; animation-play-state:paused;
  filter:drop-shadow(0 3px 12px rgba(9,22,31,.4));
}
.play-ring text {
  font-family:var(--font-display); font-weight:900; font-size:15px; letter-spacing:1.6px;
  fill:var(--white);
}
.reel-play:hover .play-ring,
.reel-play:focus-visible .play-ring { opacity:1; animation-play-state:running; }
@keyframes ring-turn { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .play-ring { animation:none; } }
.reel.in .reel-play:hover { transform:scale(1.07); }

/* ---------- work · stacked title cards ---------- */
/* each card sticks at the top so the next one slides up over it, Arpeggio-style */
.work { position:relative; background:var(--ink); }
.card { position:sticky; top:0; height:100svh; overflow:hidden; background:#0A1118; }
.card-media { position:absolute; inset:0; }
.card-media img,
.card-media video { width:100%; height:100%; object-fit:cover; display:block; }
/* plates are clean now, so the type is real text — crisp at any size and never cropped */
.card-title {
  position:absolute; left:var(--pad-x); top:clamp(90px, 12vh, 150px); z-index:2;
  max-width:min(72%, 900px); color:var(--white);
}
.card-title h3 {
  font-family:var(--font-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(30px, 5.6vw, 92px); line-height:.95; letter-spacing:-0.02em;
}
.ct-sub {
  font-family:var(--font-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(17px, 2.5vw, 40px); line-height:1.1; letter-spacing:-0.01em; margin-top:.18em;
}
/* the last card carries two names — a hairline binds them into one lockup
   without spending a second full title line, so the tiers below stay put */
.ct-rule {
  border:0; height:1px; background:currentColor; opacity:.75;
  box-shadow:0 2px 24px rgba(9,22,31,.45);   /* same lift the type gets over photography */
  font-size:clamp(30px, 5.6vw, 92px);   /* only so the margins scale with the title */
  width:100%; margin:.07em 0 .02em;     /* the block shrink-wraps, so this spans the name */
}
.ct-cred {
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(11px, 1.15vw, 17px); letter-spacing:.08em; margin-top:.7em; opacity:.92;
}
/* a card lifting into view gets a soft shadow so the stack reads as layers */
.card + .card { box-shadow:0 -30px 60px -20px rgba(9,22,31,.55); }

/* each stat stands on its own line, flush left */
.head-line { display:block; }

/* ---------- 07 process ---------- */
/* the filmstrip, reborn as ingredient cards: at rest one playing frame, on
   rollover it deals out into the five stages that made it */
.xp{ width:min(58vw,640px); aspect-ratio:41/24; position:relative; perspective:1400px;
     cursor:pointer; margin:clamp(20px,4vh,44px) auto clamp(26px,4vh,48px); }
.xp.open{ z-index:600; }
.xp-stack{ position:absolute; inset:0; transform-style:preserve-3d; }
.xp-layer{ position:absolute; inset:0; border-radius:10px; overflow:hidden;
  box-shadow:0 24px 60px -18px rgba(9,22,31,.5);
  transform:translate3d(0,0,0);
  transition:transform .65s cubic-bezier(.2,.75,.2,1), opacity .5s ease;
  backface-visibility:hidden; }
.xp-layer img{ width:100%; height:100%; object-fit:cover; display:block; }
.xp-layer:not(.xp-top){ opacity:0; }
.xp.open .xp-layer{ opacity:1; }
.xp-layer video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .35s ease; pointer-events:none; }
.xp-layer.playing video{ opacity:1; }
.xp-layer.playing img{ visibility:hidden; }
.xp-tag{ position:absolute; left:14px; bottom:12px;
  font-family:var(--font-display); font-weight:900; font-size:clamp(11px,1.15vw,16px);
  letter-spacing:.06em; text-transform:uppercase; color:var(--white);
  background:rgba(9,22,31,.72); padding:.45em .8em; border-radius:6px;
  opacity:0; transform:translateY(6px); transition:opacity .4s ease .25s, transform .4s ease .25s; }
.xp.open .xp-tag{ opacity:1; transform:none; font-size:clamp(14px,1.6vw,22px); }
.xp-hint{ position:absolute; inset:auto 0 -2.4em 0; text-align:center;
  font-family:var(--font-display); font-weight:700; font-size:clamp(12px,1.2vw,15px);
  color:var(--gray); opacity:.85; transition:opacity .3s; }
.xp.open .xp-hint{ opacity:0; }
.xp-stack.swap{ opacity:0; }
.xp-stack{ transition:opacity .22s ease; }
.xp-caption{ margin:clamp(14px,2.2vh,22px) auto 0; text-align:center; min-height:1.3em;
  font-family:var(--font-display); font-weight:900; letter-spacing:-.01em;
  font-size:clamp(16px,1.8vw,26px); color:var(--ink); }
.xp-nav{ display:flex; justify-content:center; gap:clamp(18px,2.4vw,30px);
  margin:clamp(10px,1.6vh,18px) auto clamp(18px,3vh,34px); }
.xp-nav button{ width:clamp(46px,4.6vw,60px); height:clamp(46px,4.6vw,60px);
  border:0; border-radius:50%; background:var(--red); color:var(--white); cursor:none;
  display:grid; place-items:center; transition:transform .18s ease;
  box-shadow:0 10px 26px -8px rgba(9,22,31,.4); }
.xp-nav button:hover{ transform:scale(1.1); }
.xp-nav button:active{ transform:scale(.94); }
.xp-nav svg{ width:38%; height:38%; display:block; }
/* every page seats itself: scroll near one and it snaps flush. the work
   stack snaps card by card instead of as a whole */
.hero, #progress, #pixels, .partners, #people, #performance, .finale{ scroll-snap-align:start; }
/* every eyebrow sits at exactly the Partners offset from its page top */
#people{ padding-top:clamp(56px,11.5vh,150px); min-height:100svh; box-sizing:border-box; }
.card{ scroll-snap-align:start; }

/* on desktop the stats pair into two lines so the page fits one screen:
   "30 years in. 450+ Episodes." / "4 Emmy Awards. Artist led."
   phones keep the four-line stack */
#pixelsHead .head-line{ display:inline; }
#pixelsHead .head-line:nth-child(2)::before,
#pixelsHead .head-line:nth-child(4)::before{ content:" "; }
#pixelsHead .head-line:nth-child(2)::after{ content:"\A"; white-space:pre; }
@media (max-width:560px){
  #pixelsHead .head-line{ display:block; }
  #pixelsHead .head-line:nth-child(2)::before,
  #pixelsHead .head-line:nth-child(4)::before,
  #pixelsHead .head-line:nth-child(2)::after{ content:none; }
}

/* pixels fits one screen: compact vertical rhythm, same type and tiles */
#pixels{ display:flex; flex-direction:column; justify-content:flex-start; min-height:100svh;
  padding-top:clamp(56px,11.5vh,150px); padding-bottom:1vh; }
/* the reel centres itself in whatever room the type leaves */
#pixels .reel{ margin-top:auto; margin-bottom:auto; }
#pixels .head{ line-height:.92; }
#pixels .eyebrow{ margin-bottom:clamp(10px,1.6vh,18px); }
#pixels .body{ margin-top:clamp(8px,1.2vh,14px); }
/* deck spacing: air after the eyebrow, body close under the stats (3.3:1) */
@media (min-width:561px){
  #pixels .eyebrow{ margin-bottom:7.8vh; }
  #pixels #pixelsHead{ margin-top:0; }
  #pixels .body{ margin-top:2.3vh; }
}
#pixels .stamp{ display:none; }

/* the process page is ONE screen, laid out per the comp: eyebrow, the case's
   challenge line centred, the frame flanked by its arrows, headline at the foot */
#process{ scroll-snap-align:start; scroll-snap-stop:always;
  display:flex; flex-direction:column; min-height:100svh;
  padding-top:clamp(56px,11.5vh,150px); padding-bottom:3vh; }
#process .challenge{ text-align:center; margin:auto var(--pad-x) 8.3vh;
  font-size:clamp(16px,1.6vw,23px); }
.xp-wrap{ flex:1; display:flex; align-items:center; justify-content:center;
  gap:clamp(22px,2.6vw,42px); min-height:0; }
#process .xp{
  width:min(56vw, 620px, calc((100svh - 360px) * 41 / 24));
  margin:0;
}
.xp-wrap button{ width:clamp(46px,4.6vw,60px); height:clamp(46px,4.6vw,60px);
  border:0; border-radius:50%; background:var(--red); color:var(--white); cursor:none;
  display:grid; place-items:center; transition:transform .18s ease, opacity .3s ease;
  box-shadow:0 10px 26px -8px rgba(9,22,31,.4); flex:none; }
.xp-wrap button:hover{ transform:scale(1.1); }
.xp-wrap button:active{ transform:scale(.94); }
.xp-wrap svg{ width:38%; height:38%; display:block; }
/* title and crest matched to "Suddenly, the future looks clear." and the
   crest on the Partners page: same face size, same distances from the edges */
#process .head-rest{ margin:clamp(6px,1vh,12px) 0 0; font-size:clamp(26px,3.8vw,80px); }
#process .xp-foot .head{ margin:0 0 11vh; font-size:clamp(23px,3vw,64px); }
/* the foot line trades places with the cascade: at rest the promise, dealt out
   the method */
.head-cascade{ display:none; }
body.xp-open .head-rest{ display:none; }
/* rides above the cascade's white sheet, lower-left, like its partner line */
body.xp-open .head-cascade{ display:block; position:fixed;
  left:var(--pad-x); bottom:12vh; margin:0; z-index:590; }
@media (max-width:600px){ body.xp-open .head-cascade{ display:none; } }
#process .stamp{ width:clamp(48px,5.3vw,96px); right:4.6vw; bottom:11.3vh; }
body.xp-open .xp-wrap button{ opacity:0; pointer-events:none; }

/* while the cascade is out: the bar steps aside and the follow-up line takes
   the lower-left; letting go brings both straight back */
.xp-alt{ position:fixed; right:6vw; top:13vh; z-index:590;
  font-family:var(--font-display); font-weight:900; letter-spacing:-.03em; line-height:1.04;
  font-size:clamp(26px,3.4vw,52px); color:var(--ink);
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .35s ease .15s, transform .35s ease .15s; }
body.xp-open .xp-alt{ opacity:1; transform:none; }
/* the dealt cascade always sits on a clean white sheet — a fixed backdrop
   under the cards guarantees it on every device, whatever lies behind */
body.xp-open::before{ content:""; position:fixed; inset:0; background:var(--white); z-index:540; }
body.xp-open .xp{ z-index:600; }
body.xp-open .nav{ opacity:0 !important; pointer-events:none !important; }
body.xp-open .hero-badge,
body.xp-open .hero-wordmark,
body.xp-open .stamp{ opacity:0 !important; pointer-events:none !important; transition:opacity .3s ease; }
.hero-badge, .stamp{ transition:opacity .3s ease; }
body.xp-open #process .pad:not(.xp-foot),
body.xp-open #process .challenge{ opacity:0; transition:opacity .3s ease; }
#process .pad, #process .challenge{ transition:opacity .3s ease; }
@media (max-width:600px){ .xp-alt{ display:none; } }
@media (prefers-reduced-motion:reduce){ .xp-layer{ transition:none; } }
.challenge { font-family:var(--font-display); font-weight:900; font-size:clamp(14px,1.35vw,20px); line-height:1.35; color:var(--ink); margin-bottom:clamp(34px,6vh,72px); }
.cols { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,64px); }
.col { padding-top:14px; border-top:4px solid var(--cyan); }
.col h3 { font-family:var(--font-display); font-weight:900; font-size:clamp(16px,1.5vw,22px); color:var(--black); margin-bottom:8px; }
.col p { font-family:var(--font-body); font-size:clamp(14px,1.2vw,17px); line-height:1.45; color:var(--black); }
.closer { font-family:var(--font-display); font-weight:900; font-size:clamp(26px,3.8vw,56px); letter-spacing:-0.03em; color:var(--black); margin-top:clamp(38px,7vh,84px); }

/* ---------- 08 partners — measured off the slide ----------
   slide is 2000 wide: eyebrow 1.5%, headline 3.8%, body 1.7%, closer 3.0%,
   body indented ~1% past the headline, logo column centred at 93%          */
.partners {
  position:relative; background:var(--sky-grad); min-height:100svh;
  padding:clamp(56px,11.5vh,150px) clamp(14px,2.2vw,46px) clamp(70px,12vh,160px) var(--pad-x);
  display:grid; grid-template-columns:1fr auto; gap:clamp(28px,4vw,80px); align-items:stretch;
}
.partners .eyebrow { font-size:clamp(13px,1.5vw,32px); margin-bottom:clamp(20px,3.4vh,46px); }
.partners-main{ display:flex; flex-direction:column; }
.partners-main .partners-closer{ margin-top:auto; }
.partners-head {
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(26px,3.8vw,80px); line-height:1.18; letter-spacing:-0.025em; color:var(--white);
}
.partners-body {
  margin-top:clamp(22px,4.2vh,54px); margin-left:1%;
  display:flex; flex-direction:column; gap:clamp(18px,3.2vh,44px);
  max-width:min(69vw, 100%);
}
.partners-body p { font-family:var(--font-body); font-weight:400; font-size:clamp(15px,1.7vw,36px); line-height:1.6; color:var(--black); }
.partners-closer {
  margin-top:clamp(38px,7vh,96px);
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(23px,3vw,64px); letter-spacing:-0.03em; color:var(--ink);
}
/* the column runs the full height of the section, logos spread evenly down it */
.partner-logos {
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  gap:clamp(14px,2vh,30px); padding:clamp(18px,3.5vh,48px) 0 clamp(10px,2vh,28px);
  width:clamp(110px,10vw,206px); height:100%;
}
.partner-logos img { max-height:clamp(38px,5.4vw,114px); max-width:100%; width:auto; height:auto; object-fit:contain; }
.partners-crest { width:clamp(40px,4vw,84px); max-height:none; }

/* ---------- 09 performance ---------- */
.perf-rows { display:flex; flex-direction:column; gap:clamp(30px,5.5vh,66px); }
.perf-row .head { font-size:clamp(24px,3.6vw,54px); }
.perf-list { font-family:var(--font-body); font-size:clamp(14px,1.3vw,19px); line-height:1.45; color:var(--black); margin-top:8px; }
.perf-list strong { font-family:var(--font-display); font-weight:900; text-transform:uppercase; letter-spacing:.02em; color:var(--black); }
.perf-close { margin-top:clamp(44px,9vh,110px); text-align:right; padding-right:clamp(70px,7vw,110px); font-family:var(--font-display); font-weight:900; font-size:clamp(15px,1.6vw,24px); letter-spacing:-0.01em; color:var(--ink); }

/* ---------- 10 finale — deck page 10 geometry ---------- */
/* deck page is 960x540; every offset below is that page's own percentage */
.finale { position:relative; min-height:100svh; background:var(--sky-grad); overflow:hidden; }
.finale-stage { position:absolute; left:0; right:0; top:var(--nav-h); bottom:0; container-type:size; display:grid; place-items:center; }
/* a true 16:9 stage, so every deck percentage maps exactly on both axes */
.finale-page { position:relative; height:min(100cqh, 56.25cqw); aspect-ratio:16/9; container-type:size; }

.litany { position:absolute; left:7.8%; top:6.6%; }
.litany li { font-family:var(--font-display); font-weight:900; font-size:6.25cqh; line-height:1.75; letter-spacing:normal; white-space:nowrap; }
.litany .t1 { color:#7BDFF9; }
.litany .t2 { color:#8FE3F9; }
.litany .t3 { color:#A7E9FA; }
.litany .t4 { color:#BDEFFC; }
.litany .t5 { color:#D2F4FD; }
.litany .t6 { color:#EAFAFE; }
.litany .t7 { color:#FFFFFF; }

.finale-badge { position:absolute; left:57.5%; top:16%; width:29.5%; display:block; transform:translateZ(0); }
.finale-badge img { width:100%; height:auto; display:block; }

.finale-cta { position:absolute; left:7.8%; top:75.2%; }
.finale-word { display:block; font-family:var(--font-display); font-weight:900; font-size:12cqh; line-height:1; letter-spacing:normal; white-space:nowrap; color:var(--white); transition:color .3s; }
.wm-gap { display:inline-block; width:.28em; }
.finale-cta:hover .finale-word { color:var(--ink); }

.finale-contact { position:absolute; left:7.8%; top:89.5%; display:flex; gap:1.8cqh; white-space:nowrap; flex-wrap:wrap; font-family:var(--font-display); font-weight:900; font-size:2.55cqh; color:var(--steel); }
.finale-contact .sep { opacity:.6; }
.finale-contact a { color:var(--steel); transition:color .2s; }
.finale-contact a:hover { color:var(--ink); }

/* tighten the bar before giving up on it, so the links stay across the top as long as possible */
/* keep all seven words across the top as long as they can physically fit */
@media (max-width:1180px){
  :root { --crest:38px; }
}
@media (max-width:980px){
  :root { --crest:34px; }
}

@media (max-width:560px){
  .nav-links, .nav-dock { display:none; }
  .nav-burger { display:flex; flex-direction:column; gap:6px; margin-left:auto; align-self:center; background:none; border:none; cursor:pointer; padding:8px; }
  .nav-burger span { width:26px; height:2px; background:var(--ink); transition:transform .3s; }
  .nav-burger[aria-expanded="true"] span:first-child { transform:translateY(4px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:last-child { transform:translateY(-4px) rotate(-45deg); }
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .team { grid-template-columns:repeat(2,1fr); }
  .cols { grid-template-columns:1fr; gap:26px; }
  .art-grid { grid-template-columns:repeat(2,1fr); }
  .partners { grid-template-columns:1fr; }
  .partner-logos { flex-direction:row; flex-wrap:wrap; justify-content:flex-start; gap:26px; }
  .perf-close { padding-right:0; }
}
/* below 1000px (or very short viewports) the deck's fixed geometry stops fitting */
@media (max-width: 700px), (max-height: 480px) {
  .finale { min-height:0; padding:calc(var(--nav-h) + 6vh) var(--pad-x) 8vh; }
  .finale-stage { position:static; display:block; container-type:normal; }
  .finale-page { height:auto; aspect-ratio:auto; container-type:normal; }
  .litany { position:static; margin-bottom:6vh; }
  .litany li { font-size:clamp(20px,4.6vw,40px); line-height:1.3; white-space:normal; }
  .finale-badge { position:static; width:clamp(120px,22vw,220px); margin:0 0 5vh auto; }
  .finale-cta { position:static; }
  .finale-word { font-size:clamp(34px,8.4vw,80px); white-space:normal; }
  .finale-contact { position:static; margin-top:4vh; font-size:clamp(12px,2.4vw,16px); gap:12px; }
}
/* the cover only breaks into a stack on a genuinely narrow phone */
@media (max-width: 540px) {
  .hero-lockup { flex-direction:column; align-items:flex-start; gap:3vh; }
  .badge-slot { margin-left:0; }
  .hero-badge { width:96px; }
  .hero-tag { margin-left:0; }
}
@media (max-width: 560px) {
  .nav-links, .nav-cta { display:none; }
  .nav-burger { display:flex; flex-direction:column; gap:6px; margin-left:auto; align-self:center; background:none; border:none; cursor:pointer; padding:8px; }
  .nav-burger span { width:26px; height:2px; background:var(--ink); transition:transform .3s; }
  .nav-burger[aria-expanded="true"] span:first-child { transform:translateY(4px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:last-child { transform:translateY(-4px) rotate(-45deg); }
  .bridge-but { margin-left:0; }
  .team { grid-template-columns:1fr; }
}

/* ============ square reveal loader ============ */
.loader{
  position:fixed; inset:0; z-index:9999; display:grid; pointer-events:none;
  grid-template-columns:repeat(var(--cols,6),1fr);
  grid-template-rows:repeat(var(--rows,4),1fr);
}
.loader i{
  display:block; background:var(--red);
  transition:background-color .16s linear, opacity .42s ease;
}
/* red flips to brand blue, then the blue lifts away to hand off to the real gradient */
.loader.tint i{ background:var(--cyan); }
.loader.out  i{ opacity:0; }
.loader.done{ display:none; }
/* before any script runs, the cover is already down: solid red from markup */
.loader.solid{ background:var(--red); }
/* hold the hero still until the squares clear */
body.loading{ overflow:hidden; }

/* ============ cursor ============ */
:root{ --cursor-size:30px; }
@media (pointer:fine){
  body{ cursor:none; }
  a, button, .card, .art-grid img, [role="button"], [role="link"]{ cursor:none; }
  .cursor{
    position:fixed; top:0; left:0; z-index:12000; pointer-events:none;  /* above the video window too */
    width:var(--cursor-size); height:var(--cursor-size);
    margin:calc(var(--cursor-size)/-2) 0 0 calc(var(--cursor-size)/-2);
    opacity:0;
    transition:opacity .25s ease,
               width .32s cubic-bezier(.2,.7,.2,1), height .32s cubic-bezier(.2,.7,.2,1),
               margin .32s cubic-bezier(.2,.7,.2,1);
    will-change:transform;
  }
  .cursor.on{ opacity:1; }

  /* a red ring holding a red dot — the dot is the weight that lags behind */
  .cur-ring{
    position:absolute; inset:0; border-radius:50%;
    border:2px solid var(--red); background:transparent;
    transition:background .22s ease, border-color .22s ease, border-width .22s ease;
    will-change:transform;
  }
  .cur-dot{
    position:absolute; left:50%; top:50%;
    width:44%; height:44%; margin:-22% 0 0 -22%;
    border-radius:50%; background:var(--red);
    transition:width .28s cubic-bezier(.2,.7,.2,1), height .28s cubic-bezier(.2,.7,.2,1),
               margin .28s cubic-bezier(.2,.7,.2,1), opacity .2s ease;
    will-change:transform;
  }
  /* the PLAY label rides inside the same circle */
  .cur-word{ display:inline-block; white-space:nowrap; }
  .cur-ltr { display:inline-block; font-style:normal; will-change:transform; }
  .cur-label{
    position:absolute; inset:0; display:grid; place-items:center;
    font-family:var(--font-display); font-weight:900; color:var(--white);
    font-size:0; letter-spacing:.02em; line-height:1; opacity:0; white-space:nowrap;
    transition:font-size .32s cubic-bezier(.2,.7,.2,1), opacity .22s ease;
  }

  /* over anything clickable the ring opens and the weight drops out */
  .cursor.hot{ --cursor-size:46px; }
  .cursor.hot .cur-dot{ width:0; height:0; margin:0; opacity:0; }

  /* over a work card it fills into the solid red PLAY button */
  .cursor.play{ --cursor-size:140px; }
  .cursor.play .cur-ring{ background:var(--red); border-color:var(--red); }
  .cursor.play .cur-dot{ width:0; height:0; margin:0; opacity:0; }
  .cursor.play .cur-label{ font-size:26px; opacity:1; }

  /* the scroll nudge: sit still on the cover and the cursor becomes a gentle
     down-arrow — same rounded strokes, same red, the dot riding at its head */
  /* the nudge grows OUT of the cursor: the ring-and-dot stays put as the
     arrow's bottom-most point, and the dot-chevrons sprout upward above it */
  .cur-arrow{ position:absolute; left:50%; top:calc(100% + 3px);
    width:48px; height:124px; pointer-events:none;
    opacity:0; transform:translateX(-50%) scale(.12); transform-origin:50% 0;
    transition:opacity .3s ease, transform .55s cubic-bezier(.2,.8,.25,1); }
  .cur-arrow svg{ width:100%; height:100%; display:block; overflow:visible; }
  .cur-ring, .cur-dot{ transition:opacity .3s ease; }
  .cursor.nudge .cur-arrow{ opacity:1; transform:translateX(-50%) scale(1); }
  /* the electronic-sign run: each chevron lights in turn, top to bottom */
  .cur-arrow .chev{ opacity:.18; }
  .cursor.nudge .cur-arrow .chev{ animation:chev-run 1.1s linear infinite; }
  .cursor.nudge .cur-arrow .chev:nth-child(1){ animation-delay:0s; }
  .cursor.nudge .cur-arrow .chev:nth-child(2){ animation-delay:.18s; }
  .cursor.nudge .cur-arrow .chev:nth-child(3){ animation-delay:.36s; }
  .cursor.nudge .cur-arrow .chev:nth-child(4){ animation-delay:.54s; }
  .cursor.nudge .cur-arrow .chev:nth-child(5){ animation-delay:.72s; }
  @keyframes chev-run{ 0%{opacity:.18;} 22%{opacity:1;} 55%{opacity:.18;} 100%{opacity:.18;} }
  @media (prefers-reduced-motion:reduce){ .cursor.nudge .cur-arrow .chev{ animation:none; opacity:.9; } }

  /* straddling the join between two cards — ambiguous, so make it read as unavailable */
  .cursor.seam{ opacity:.5; }
}
@media (pointer:coarse){ .cursor{ display:none; } }
@media (prefers-reduced-motion:reduce){
  .loader{ display:none; }
  .cursor{ transition:opacity .2s ease; }
  .cur-ring, .cur-dot, .cur-ltr{ transform:none !important; }
  .cur-ring{ border-radius:50% !important; }
}

/* ============ story — one gradient stage, copy revealed by scroll ============ */
.story { position:relative; height:640vh; }
.story-stage {
  position:sticky; top:0; height:100svh; overflow:hidden;
  background:var(--sky-grad-flip);
  display:flex; align-items:center;
  padding:0 var(--pad-x);
}
.story-lines { width:100%; }
.story-rest { will-change:clip-path; }
.s-sig { will-change:transform; }
.story-lines p {
  opacity:0; transform:translateY(22px);
  font-family:var(--font-display); font-weight:900; letter-spacing:-0.03em; line-height:1.06;
}
.s-white { color:var(--white); font-size:clamp(28px,4.6vw,70px); }
.s-run { display:flex; align-items:baseline; gap:.45em; flex-wrap:wrap; }
.s-but { color:var(--white); opacity:0; }
.s-ink  { color:var(--black); font-size:clamp(24px,3.8vw,58px); }
.s-block2 { margin-top:.55em; }
.s-next { color:var(--cyan-deep); font-size:clamp(20px,2.9vw,44px); margin-top:.6em; margin-left:52%; }
.s-sig  { color:var(--black); font-size:clamp(34px,7vw,108px); margin-top:.55em; margin-left:0; }
@media (max-width:720px){
  .s-next { margin-left:0; }
}

/* ============================================================
   PHONE (9:16). Everything below is inside a max-width query,
   so none of it can reach the locked 1440 desktop layout.
   ============================================================ */
@media (max-width: 560px){
  /* the docked wordmark right-aligns into the bar, which is exactly where
     "Contact" sits once the links collapse — the two were overprinting.
     Contact already lives in the burger menu, so drop it from the bar. */
  .nav-contact { display:none; }

  /* five columns of 73px tiles is unreadable. the strip is ONE grid whose two
     rows form the two bands, so 2 columns x 4 tiles keeps both bands intact. */
  .reel-strip { grid-template-columns:repeat(2,1fr); }
  .reel-strip .reel-cell:nth-child(n+5), .reel-strip > img:nth-child(n+5) { display:none; }

  /* the 1% optical indent reads as a misalignment at this width */
  .partners-body { margin-left:0; max-width:100%; }

  /* the logo rail is a tall narrow column on desktop; on a phone it has to
     become a row under the copy, or it collapses to 110px wide */
  .partner-logos {
    width:100%; height:auto; flex-direction:row; flex-wrap:wrap;
    align-items:center; justify-content:space-between;
    gap:22px 18px; padding:8px 0 0;
  }
  .partner-logos img { max-height:42px; }
  .partners-crest { width:52px; }

  /* phone: the challenge clears upward and the crest sits at the page bottom */
  #process .challenge{ margin-bottom:14vh; }
  #process .stamp{ bottom:2.6vh; right:6vw; width:50px; }

  /* the ingredient stage takes the full width a phone can give it */
  .xp{ width:88vw; }

  /* card titles were boxed to 72% of a 390px screen, and pinned at the 30px
     floor of their clamp. 8.7vw puts the longest ("SURROUND STUDIO") at ~321
     of the 329px content box, so it grows without ever wrapping */
  .card-title { max-width:88%; }
  .card-title h3 { font-size:clamp(30px, 8.7vw, 40px); }

  /* a 16:9 plate cropped to a 9:16 card only shows the middle ~26% of the
     frame. the bunny sits left of centre, so pull the crop window that way */
  .card-media img[src*="03-scarry"] { object-position:25% center; }
  .card-media img[src*="01-bark"]   { object-position:72% center; }
  .ct-sub  { font-size:clamp(17px, 4.9vw, 22px); }
  .ct-cred { font-size:12px; }

  /* the menu links were 32px tall — under the 44px minimum touch target */
  .mobile-menu a { min-height:48px; display:flex; align-items:center; }
  .mobile-menu   { padding-top:14px; }

  /* the role sat at 10px under a 15px name */
  .team-name { font-size:17px; }
  .team-role { font-size:12px; }
}

/* the 9:16 cover: crest on top and large, then the tagline, then the wordmark.
   the tagline must always sit directly above "Powered By Pictures." */
@media (max-width: 540px){
  /* the crest lives inside .hero-lockup, so the lockup has to stop generating a
     box before its slot can be ordered against the tagline above it */
  .hero-lockup { display:contents; }
  .badge-slot  { order:-1; margin:0 0 clamp(16px,2.6vh,30px); }
  .hero-tag    { order:0; margin-left:0; margin-bottom:clamp(6px,1.2vh,14px);
                 font-size:clamp(14px,4.4vw,20px); }
  .wm-slot     { order:1; flex:0 0 auto; }

  /* a 96px crest and 43px type left the frame mostly empty */
  .hero-badge    { width:min(64vw, 38vh); }
  /* 14.6vw keeps the widest line ("Pictures.") inside the 7.8vw side padding
     at every phone width — 16vw overshot it by 17px at 390 */
  .hero-wordmark { font-size:clamp(40px, 14.6vw, 57px); }
}

/* the 9:16 closing page: the litany fills the top edge to edge, the sign-off
   goes big, and the crest centres under it rather than hanging off the right */
@media (max-width: 560px){
  /* 6.75vw puts the longest line ("Powered By Performance", 12.33px of width
     per px of font) at ~325 of the 329px content box — full bleed, no wrap */
  .litany    { margin-bottom:2.5vh; }
  .litany li { font-size:min(6.75vw, 34px); line-height:1.22; white-space:nowrap; }

  /* 13.8vw puts "Powered By" (5.717px per px of font) at ~308px */
  .finale-word { font-size:min(13.8vw, 60px); }
  .wm-gap      { display:block; height:0; }   /* forces the two-line lockup */

  /* the deck stacks crest-then-sign-off; on the phone the sign-off follows the
     litany directly and the crest sits under it, above the contact line */
  .finale-page    { display:flex; flex-direction:column; }
  .litany         { order:1; }
  .finale-cta     { order:2; }
  .finale-badge   { order:3; width:min(42vw, 30vh); margin:2.6vh auto 2.4vh; }
  .finale-contact { order:4; text-align:center; justify-content:center; margin-top:2vh; }

  /* the deck's generous vertical air doesn't fit 9:16 once the type goes big.
     min-height matters too: the section is shorter than the screen, so the page
     bottomed out before it could reach the top and the previous section's white
     tail stayed wedged under the bar */
  .finale {
    min-height:100svh;
    padding:calc(var(--nav-h) + 2vh) var(--pad-x) 3vh;
    display:flex; flex-direction:column; justify-content:center;
  }
}
@media (prefers-reduced-motion:reduce){
  .story { height:auto; }
  .story-stage { position:static; height:auto; padding:14vh var(--pad-x); }
  .story-lines p, .s-but { opacity:1 !important; transform:none !important; }
}

/* a stale cached page can still carry an inline <video> in the strip — never show it */
.reel > video, .reel .reel-video { display:none !important; }

/* ============ reel window ============ */
.reel-modal[hidden] { display:none; }
.reel-modal {
  position:fixed; inset:0; z-index:10001;
  display:grid; place-items:center; padding:clamp(16px,4vw,64px);
}
.reel-scrim {
  position:absolute; inset:0; background:rgba(9,22,31,.82); backdrop-filter:blur(7px);
  opacity:0; transition:opacity .38s ease;
}
.reel-modal.is-open .reel-scrim { opacity:1; }
.reel-window {
  position:relative; width:min(78vw, calc((100svh - 26vh) * 1.7778));
  will-change:transform, opacity;
}
.reel-window video {
  cursor:none;
  display:block; width:100%; aspect-ratio:16/9; background:#000;
  border-radius:10px; box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
}
.reel-close {
  opacity:0; transition:opacity .3s ease .12s, transform .2s cubic-bezier(.2,.6,.2,1), background .2s;
  position:absolute; top:-1px; right:-1px; transform:translate(35%,-35%);
  width:clamp(38px,3.4vw,52px); height:clamp(38px,3.4vw,52px);
  display:grid; place-items:center; padding:0;
  font-family:var(--font-display); font-weight:900; font-size:clamp(20px,1.9vw,28px); line-height:1;
  color:var(--white); background:var(--red); border:0; border-radius:50%; cursor:none;
  transition:transform .2s cubic-bezier(.2,.6,.2,1), background .2s;
}
.reel-modal.is-open .reel-close { opacity:1; }
.reel-close:hover { transform:translate(35%,-35%) scale(1.08); background:#D93A12; }
@media (prefers-reduced-motion:reduce){ .reel-window, .reel-scrim, .reel-close { transition:none !important; } }

/* phone: the stacked stats breathe, and the body sits a step lower */
@media (max-width:560px){
  #pixels #pixelsHead{ line-height:1.12; }
  #pixels .body{ margin-top:20px; }
}

/* tablet: the deck's rhythm, sized to actually fill a tall portrait screen —
   larger stats, a 3-across reel (9 shots), work anchored to the bottom */
@media (min-width:561px) and (max-width:1100px){
  #pixels #pixelsHead{ font-size:clamp(40px,6.4vw,66px); }
  #pixels .eyebrow{ margin-bottom:4.6vh; }
  #pixels .body{ margin-top:2vh; font-size:clamp(16px,1.9vw,20px); max-width:58ch; }
  .reel-strip{ grid-template-columns:repeat(3,1fr); }
  .reel-strip .reel-cell:nth-child(n+10), .reel-strip > img:nth-child(n+10){ display:none; }
  .reel-strip .reel-cell:nth-child(-n+9), .reel-strip > img:nth-child(-n+9){ display:block; }
  #pixels .reel{ margin-top:auto; margin-bottom:0; }
}

/* tablet: People fills the tall screen — two team columns, larger entries */
@media (min-width:561px) and (max-width:1100px){
  #people{ min-height:100svh; }
  .people-head{ font-size:clamp(34px,4.6vw,52px); }
  .team{ grid-template-columns:repeat(2,1fr); gap:clamp(26px,3.4vh,46px) clamp(24px,4vw,52px); }
  .team-name{ font-size:clamp(17px,2vw,22px); }
  .team-role{ font-size:clamp(11px,1.2vw,14px); }
}

/* performance: three verbs and their lists, closer on the shared bottom line */
#performance{ position:relative; display:flex; flex-direction:column;
  min-height:100svh; padding-top:clamp(56px,11.5vh,150px); padding-bottom:11.3vh; }
.perf-list{ display:flex; flex-direction:column; gap:clamp(26px,9.5vh,116px); margin-top:clamp(12px,2vh,26px); }
.perf-head{ font-family:var(--font-display); font-weight:900;
  font-size:clamp(26px,3.8vw,80px); line-height:1.04; letter-spacing:-0.03em; color:var(--ink); }
.perf-body{ margin-top:clamp(6px,1vh,12px); font-family:var(--font-body);
  font-size:clamp(15px,1.45vw,22px); line-height:1.5; color:var(--black); max-width:80ch; }
.perf-closer{ margin-top:auto; padding-top:4vh;
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(21px,2.4vw,52px); letter-spacing:-0.03em; color:var(--cyan-deep); }
#performance .stamp{ width:clamp(48px,5.3vw,96px); right:4.6vw; bottom:11.3vh; }
@media (max-width:560px){
  #performance{ padding-bottom:7vh; }
  .perf-closer{ padding-right:64px; }
  #performance .stamp{ bottom:2.6vh; right:6vw; width:50px; }
}

/* tablet, both orientations: the finale litany owns the whole page —
   full-height column, type sized by whichever axis binds first */
@media (min-width:561px) and (max-width:1280px){
  .finale-page{ height:100cqh; width:100%; aspect-ratio:auto;
    display:flex; flex-direction:column; justify-content:flex-start;
    padding:3.5% 0 3% 7.8%; box-sizing:border-box; }
  .litany, .finale-cta, .finale-contact{ position:static; }
  /* per the comp: tight litany at the top, the crest BIG and centered in
     the middle, the closing line large at the bottom */
  .litany{ flex:none; display:flex; flex-direction:column; gap:0; }
  .litany li{ font-size:min(5.8cqw, 6.4cqh); line-height:1.62; }
  .finale-badge{ position:static; left:auto; top:auto; align-self:center;
    width:min(33%, 27cqh); margin:auto 0; }
  .finale-word{ font-size:min(8.2cqw, 11cqh); margin:0 0 1.2vh; }
  .finale-contact{ font-size:min(1.9cqw, 2.8cqh); }
}

/* the pbp crest sits in the SAME corner on every page */
#people .stamp{ right:4.6vw; bottom:11.3vh; width:clamp(48px,5.3vw,96px); }
@media (max-width:560px){
  /* phone: one shared seat — 2.6vh up, 6vw in, 50px wide */
  #people .stamp{ bottom:2.6vh; right:6vw; width:50px; }
  .partner-logos .partners-crest{ position:absolute; bottom:2.6vh; right:6vw; width:50px; max-height:none; }
  /* per the comp: logos sit between the body and the closer —
     HP / Asteria / SOAD across one line, BARK + Sesame on the next */
  .partners{ display:flex; flex-direction:column; }
  .partners-main{ display:contents; }
  .partner-logos{ order:4; margin-top:1vh; }
  .partners-closer{ order:5; margin-top:4.5vh; }
  .partner-logos{ gap:34px 4%; }
  .partner-logos img{ min-width:0; flex-grow:0; flex-shrink:1; }
  .partner-logos img[src*="image13"]{ order:1; flex-basis:30%; max-height:46px; object-position:left center; }
  .partner-logos img[src*="image17"]{ order:2; }
  .partner-logos img[src*="image9"]{ order:3; }
  .partner-logos img[src*="image15"]{ order:4; }
  .partner-logos img[src*="image8"]{ order:5; }
  .partner-logos .partners-crest{ order:9; }
  .partner-logos img[src*="image17"]{ flex-basis:30%; max-height:20px; object-position:center; }
  .partner-logos img[src*="image9"]{ flex-basis:30%; max-height:64px; object-position:right center; }
  .partner-logos img[src*="image15"]{ flex-basis:44%; max-height:56px; object-position:center; }
  .partner-logos img[src*="image8"]{ flex-basis:44%; max-height:56px; object-position:center; }
  .partners{ padding-bottom:calc(2.6vh + 76px); }
}

/* tablet: Partners is a half page — compact column, logos in one row,
   the sky gradient filling exactly that half page */
@media (min-width:561px) and (max-width:1100px){
  .partners{ min-height:54svh; display:flex; flex-direction:column;
    grid-template-columns:none; padding-bottom:4.5vh; }
  .partners-main{ display:contents; }
  .partners .eyebrow{ margin-bottom:3vh; }
  .partners-body{ margin-top:2.6vh; gap:2.4vh; max-width:100%; }
  .partner-logos{ order:4; width:100%; height:auto; flex-direction:row;
    align-items:center; justify-content:space-between; gap:4%;
    padding:4.5vh 8vw 0 0; }
  .partner-logos img{ min-width:0; max-height:52px; }
  .partner-logos img[src*="image17"]{ max-height:20px; }
  .partner-logos img[src*="image9"]{ max-height:60px; }
  .partners-closer{ order:5; margin-top:4.5vh; }
  .partner-logos img[src*="image13"]{ order:1; }
  .partner-logos img[src*="image17"]{ order:2; }
  .partner-logos img[src*="image8"]{ order:3; }
  .partner-logos img[src*="image15"]{ order:4; }
  .partner-logos img[src*="image9"]{ order:5; }
  .partner-logos .partners-crest{ position:absolute; right:4.6vw; bottom:4vh; width:60px; max-height:none; }
}

/* the red period takes real clicks even while the wordmark layer is
   click-transparent — it is the portal */
.hero-wordmark .wm-dot{ pointer-events:auto; }

/* progress: the equation page — brand magic in cyan, the sum at rest */
#progress{ position:relative; display:flex; flex-direction:column;
  min-height:100svh; padding-top:clamp(56px,11.5vh,150px); padding-bottom:11.3vh; }
.progress-head{ font-size:clamp(26px,3.8vw,80px); line-height:1.12; margin:1.8vh 0 0; }
.brand-magic{ display:block; color:var(--cyan-light); font-size:1.3em; line-height:1.05; }
.progress-formula{ margin:13vh 0 auto; font-family:var(--font-display); font-weight:900;
  font-size:clamp(17px,2.35vw,48px); letter-spacing:-0.02em; color:var(--ink); }
.progress-closer{ margin:0; font-family:var(--font-display); font-weight:900;
  font-size:clamp(20px,2.4vw,52px); letter-spacing:-0.02em; color:var(--cyan-deep); }
#progress .stamp{ width:clamp(48px,5.3vw,96px); right:4.6vw; bottom:11.3vh; }
@media (max-width:560px){
  #progress{ padding-bottom:7vh; }
  #progress .stamp{ bottom:2.6vh; right:6vw; width:50px; }
  .progress-closer{ padding-right:64px; }
}

/* the formula reads inline on desktop, and stacks as an equation on phones */
.pf-plus{ margin:0 .35em; }
@media (max-width:560px){
  .progress-head{ margin-top:2.5vh; font-size:30px; }
  .brand-magic{ margin-top:1.2vh; }
  .progress-formula{ margin:9vh 0 auto; text-align:center; font-size:6.4vw; line-height:1.25; }
  .pf-term{ display:block; }
  .pf-plus{ display:block; margin:2.2vh 0; }
  .progress-closer{ font-size:22px; }
}

/* returning home from a crest keeps the nav dressed on the cover —
   static crest and wordmark stand in for the flying pair, which are
   back at their hero positions */
.nav-crest-static{ display:none; width:100%; height:auto; }
.nav-wm-static{ display:none; font-family:var(--font-display); font-weight:900;
  font-size:var(--nav-font, 21px); letter-spacing:-0.02em; white-space:nowrap;
  color:var(--white); line-height:1; }
.nav-wm-static .dot-red{ color:var(--red); }
.nav.show-statics .nav-crest-static{ display:block; }
.nav.show-statics .nav-wm-static{ display:inline-block; }
.nav.show-statics .nav-dock{ width:auto; }
@media (max-width:560px){
  .nav.show-statics .nav-dock{ display:flex; align-items:center; margin-left:8px; }
}

/* the static wordmark shares the links' baseline, like the docked one did */
.nav.show-statics .nav-dock{ align-self:baseline; height:auto; }

/* phone return-state bar: just the burger and a SPINNING crest */
.nav-crest-spin{ display:none; width:100%; height:auto; }
@media (max-width:560px){
  .nav.show-statics .nav-crest-static{ display:none; }
  .nav.show-statics .nav-crest-spin{ display:block; }
  .nav.show-statics .nav-dock, .nav.show-statics .nav-wm-static{ display:none; }
}

/* ---------- the contact page: summoned, not scrolled to ---------- */
.contact-page{ position:relative; background:var(--white); scroll-snap-align:start; }
.contact-close{ position:fixed; top:18px; right:22px; z-index:920;
  width:52px; height:52px; border:0; border-radius:50%; cursor:pointer;
  background:var(--red); color:var(--white); font-size:30px; font-weight:900; line-height:1;
  font-family:var(--font-display); display:grid; place-items:center; }
.contact-inner{ padding:clamp(56px,11.5vh,150px) var(--pad-x) 6vh; max-width:1280px; }
.contact-title{ font-family:var(--font-display); font-weight:900; color:var(--ink);
  font-size:clamp(54px,8.4vw,132px); letter-spacing:-0.03em; line-height:.95; margin:1.4vh 0 0; }
.contact-sub{ font-family:var(--font-body); color:var(--gray, #6a7a85);
  font-size:clamp(18px,2vw,32px); margin:1.6vh 0 0; }
.contact-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(28px,5vw,90px);
  margin-top:clamp(28px,6.5vh,70px); }
.contact-h2{ font-family:var(--font-display); font-weight:900; color:var(--ink);
  font-size:clamp(26px,3vw,48px); letter-spacing:-0.02em; margin:0; }
.contact-points{ margin:2.2vh 0 0; padding:0 0 0 1.2em; font-family:var(--font-body);
  font-size:clamp(15px,1.3vw,20px); line-height:2; color:var(--black); }
.contact-form{ margin-top:3.5vh; }
.cf-label{ font-family:var(--font-display); font-weight:900; color:var(--ink);
  font-size:clamp(15px,1.25vw,19px); margin:3vh 0 1.2vh; }
.cf-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.cf-chips button{ font-family:var(--font-display); font-weight:700; cursor:pointer;
  font-size:clamp(13px,1.05vw,16px); color:var(--ink);
  background:none; border:2px solid var(--cyan); border-radius:999px; padding:9px 18px;
  transition:background .2s, color .2s, border-color .2s; }
.cf-chips button.on{ background:var(--red); border-color:var(--red); color:var(--white); }
.cf-field{ display:block; width:100%; margin-top:2vh; box-sizing:border-box;
  font-family:var(--font-body); font-size:clamp(26px,2.6vw,42px); color:var(--ink);
  background:none; border:0; border-bottom:1px solid rgba(9,22,31,.14); padding:3.2vh 2px 2vh;
  outline:none; border-radius:0; }
.cf-field::placeholder{ color:#3c4a54; opacity:1; }
.cf-field:focus{ border-bottom-color:var(--red); }
.cf-area{ resize:vertical; }
.cf-submit{ display:inline-block; margin-top:5vh; cursor:pointer; border:0; background:none;
  padding:0 0 4px; color:#9aa6ad; font-family:var(--font-body); font-weight:400;
  font-size:clamp(26px,2.6vw,42px); border-bottom:2px solid #9aa6ad; border-radius:0;
  transition:color .2s, border-color .2s; }
.cf-submit:hover{ color:var(--red); border-color:var(--red); }
.cf-done{ margin-top:2.5vh; font-family:var(--font-display); font-weight:900;
  color:var(--cyan-deep); font-size:clamp(17px,1.6vw,24px); }
.contact-side{ display:flex; flex-direction:column; gap:18px; }
.cs-card{ border:2px solid var(--cyan); border-radius:14px; padding:22px 24px; }
.cs-card h4{ font-family:var(--font-display); font-weight:900; color:var(--ink);
  font-size:clamp(17px,1.5vw,23px); margin:0; }
.cs-card p{ font-family:var(--font-body); color:var(--black);
  font-size:clamp(14px,1.15vw,17px); margin:8px 0 10px; }
.cs-card a{ font-family:var(--font-display); font-weight:900; color:var(--red);
  font-size:clamp(14px,1.2vw,18px); text-decoration:none; word-break:break-all; }
.cs-card a:hover{ text-decoration:underline; }
/* the footer block, after the Arpeggio close */
.contact-foot{ margin-top:clamp(40px,9vh,100px); border-top:2px solid var(--cyan); padding-top:5vh; }
.cf-crest{ width:clamp(56px,6vw,96px); height:auto; display:block; }
.cf-wordmark{ font-family:var(--font-display); font-weight:900; color:var(--ink);
  font-size:clamp(44px,7vw,110px); letter-spacing:-0.03em; line-height:1; margin:2vh 0 0; }
.cf-wordmark .dot-red{ color:var(--red); }
.cf-based{ display:flex; align-items:flex-start; gap:14px; font-family:var(--font-display);
  font-weight:900; color:var(--ink); font-size:clamp(24px,3vw,48px); letter-spacing:-0.02em;
  line-height:1.25; margin:5vh 0 0; max-width:16em; }
.cf-bullet{ flex:none; width:.5em; height:.5em; margin-top:.35em; border-radius:50%;
  border:.16em solid var(--red); }
.cf-clock{ font-family:var(--font-display); font-weight:900; color:var(--ink);
  font-size:clamp(44px,6vw,96px); letter-spacing:-0.02em; margin:1.5vh 0 0; font-variant-numeric:tabular-nums; }
.cf-tz{ font-family:var(--font-body); color:var(--gray,#6a7a85); font-size:clamp(14px,1.3vw,20px); margin:.6vh 0 0; }
.cf-links{ margin-top:5vh; }
.cf-links a{ font-family:var(--font-body); color:var(--ink); font-size:clamp(16px,1.4vw,22px);
  text-decoration:none; border-bottom:2px solid var(--red); padding-bottom:2px; }
@media (max-width:760px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-close{ top:12px; right:12px; width:44px; height:44px; }
}

/* the contact page uses the native cursor — forms want a real pointer */
body.contact-open{ cursor:auto; }
body.contact-open a, body.contact-open button,
body.contact-open [role="button"], body.contact-open [role="link"]{ cursor:pointer; }
body.contact-open .cf-field{ cursor:text; }
body.contact-open .cursor{ display:none; }

/* ---------- the contact sheet, per the comp: address left, map right ---------- */
.cx-inner{ display:flex; flex-direction:column; min-height:100svh; box-sizing:border-box;
  padding-bottom:4vh; max-width:none; }
.cx-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px,5vw,90px);
  align-items:start; margin-top:4.5vh; flex:1; }
.cx-based{ font-family:var(--font-display); font-weight:900; color:var(--ink);
  font-size:clamp(28px,3.2vw,50px); white-space:nowrap; letter-spacing:-0.02em; line-height:1.06; margin:0; }
.cx-inner .cf-clock{ margin-top:1vh; font-size:clamp(48px,6.2vw,100px); }
.cx-wordmark{ font-family:var(--font-display); font-weight:900; color:var(--ink);
  font-size:clamp(28px,3.1vw,50px); letter-spacing:-0.03em; margin:5.5vh 0 0; }
.cx-wordmark .dot-red{ color:var(--red); }
.cx-address{ font-family:var(--font-display); font-weight:900; color:var(--ink);
  font-size:clamp(18px,2vw,32px); letter-spacing:.01em; line-height:1.55;
  text-transform:uppercase; margin:2.2vh 0 0; }
.cx-address a{ color:var(--ink); text-decoration:none; text-transform:lowercase; }
.cx-address a:hover{ color:var(--red); }
.cx-map{ align-self:stretch; }
.cx-map iframe{ width:100%; height:100%; min-height:clamp(300px,56vh,560px);
  display:block; border-radius:10px; }
.cx-closer{ font-family:var(--font-display); font-weight:900; color:#4FB5E2;
  font-size:clamp(17px,2.15vw,36px); letter-spacing:-0.02em; margin:auto 9vw 0 0; padding-top:2vh; }
.cx-stamp{ position:absolute; right:4.6vw; bottom:4vh; width:clamp(52px,5.6vw,100px);
  height:auto; cursor:pointer; }
@media (max-width:760px){
  .cx-based{ white-space:normal; }
  .cx-grid{ grid-template-columns:1fr; }
  .cx-map iframe{ min-height:44vh; }
  .cx-closer{ margin-right:0; padding-right:70px; }
  .cx-stamp{ bottom:2.6vh; right:6vw; width:50px; }
}

/* the contact sheet's link row: Email / Linkedin / Instagram */
.cx-links{ display:flex; gap:clamp(28px,4vw,72px); margin:3.4vh 0 0;
  font-family:var(--font-body); font-size:clamp(16px,1.5vw,26px); }
.cx-links a{ color:var(--ink); text-decoration:none; display:inline-flex;
  align-items:center; gap:.55em; }
.cx-links a:hover{ color:var(--red); }
.cx-arr{ color:var(--red); font-weight:900; letter-spacing:-0.12em;
  font-size:.8em; transform:translateY(.04em); }

/* comp match: bigger map (the eyebrow stays standard, like every page) */
.cx-map iframe{ min-height:clamp(280px,50vh,520px); height:clamp(280px,50vh,520px); }
.cx-grid{ margin-top:2vh; }

.cx-map{ align-self:start; }

/* the small legal row beneath the socials, each word tabbed in red */
.cx-legal{ display:flex; flex-wrap:wrap; gap:clamp(18px,2.4vw,44px); margin:2vh 0 0;
  font-family:var(--font-body); font-size:clamp(14px,1.35vw,24px); }
.cx-legal a{ color:var(--ink); text-decoration:none; padding-bottom:5px;
  background-image:linear-gradient(var(--red),var(--red));
  background-size:1.05em 3px; background-position:0 100%; background-repeat:no-repeat; }
.cx-legal a:hover{ color:var(--red); }

/* the 12-hour face wears its AM/PM small, riding the clock's cap height */
.cf-ampm{ font-size:.34em; letter-spacing:0; margin-left:.28em; vertical-align:.28em; }

/* ---------- contact: icon shields left, a live canvas right ---------- */
.cx-icons{ display:flex; gap:clamp(12px,1.6vw,26px); margin-top:3vh; }
.cx-ic{ width:clamp(58px,6.4vw,96px); padding:0; background:none; border:0; cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.7,.2,1.4); }
.cx-ic:hover{ transform:translateY(-4px); }
.cx-ic svg{ width:100%; height:auto; display:block; }
.cx-ic .ic-shield{ fill:var(--ink); transition:fill .2s; }
.cx-ic .ic-glyph{ fill:#fff; }
.cx-ic.on .ic-shield{ fill:var(--red); }
.cx-canvas{ position:relative; min-height:clamp(300px,52vh,540px); }
.cxp{ display:none; position:absolute; inset:0; }
.cxp.on{ display:flex; flex-direction:column; justify-content:center; animation:cxp-in .35s ease; }
@keyframes cxp-in{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }
.cxp[data-panel="map"].on{ display:flex; flex-direction:column; }
.cxp[data-panel="map"] iframe{ flex:1; min-height:0; height:auto; }
.cxp-addr{ text-align:center; margin:1.2vh 0 0; }
.cxp iframe{ width:100%; height:100%; display:block; border-radius:10px; }
.cxp-big{ font-family:var(--font-display); font-weight:900; color:var(--ink);
  font-size:clamp(34px,4.2vw,72px); letter-spacing:-0.03em; margin:0; }
.cxp-mail{ font-family:var(--font-display); font-weight:900; color:var(--red);
  font-size:clamp(18px,2vw,34px); text-decoration:none; margin-top:1.6vh; word-break:break-all; }
.cxp-mail:hover{ text-decoration:underline; }
.cxp-sub{ font-family:var(--font-body); color:var(--black); font-size:clamp(15px,1.4vw,22px); margin:1.6vh 0 0; }
.cxp-night.on{ background:#0A1118; border-radius:14px; padding:0 clamp(20px,3vw,48px); }
.cxp-night .cxp-big{ color:#fff; }
.cxp-night .cxp-sub{ color:#9fb4c0; }
@media (max-width:760px){
  .cx-icons{ flex-wrap:wrap; }
  .cx-canvas{ min-height:46vh; margin-top:2vh; }
}

/* the LinkedIn canvas: company card, then the people */
.cx-ic.on[data-panel="li"] .ic-shield{ fill:#0A66C2; }
.cxp-li.on{ justify-content:flex-start; gap:18px; }
.li-co, .li-p{ display:flex; gap:16px; align-items:flex-start; text-decoration:none;
  background:#fff; border:1px solid rgba(9,22,31,.12); border-radius:12px;
  padding:18px 20px; box-shadow:0 10px 26px -18px rgba(9,22,31,.35);
  transition:transform .18s, box-shadow .18s; }
.li-co:hover, .li-p:hover{ transform:translateY(-3px); box-shadow:0 16px 30px -18px rgba(9,22,31,.45); }
.li-logo{ flex:none; width:56px; height:56px; border-radius:8px; background:#0A66C2;
  color:#F5D34C; font-family:var(--font-display); font-weight:900; font-size:22px;
  display:grid; place-items:center; }
.li-cotext{ display:flex; flex-direction:column; gap:4px; }
.li-cotext strong, .li-p strong{ font-family:var(--font-display); font-weight:900;
  color:var(--ink); font-size:clamp(17px,1.5vw,24px); }
.li-cotext em{ font-style:normal; font-family:var(--font-body); color:var(--black);
  font-size:clamp(13px,1.1vw,17px); }
.li-cotext small, .li-p small{ font-family:var(--font-body); color:#5c6b76;
  font-size:clamp(12px,1vw,15px); }
.li-people{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.li-p{ flex-direction:column; gap:4px; }
@media (max-width:760px){ .li-people{ grid-template-columns:1fr; } }

/* tonight's moon, big on the dark canvas */
.cx-moon{ font-size:clamp(84px,10vw,160px); line-height:1; margin:0 0 1.4vh; }

/* the real icons from the AI file, painted through masks so they recolor */
.ic-m{ display:block; width:100%; aspect-ratio:477/490; background:var(--ink);
  -webkit-mask:var(--i) center/contain no-repeat; mask:var(--i) center/contain no-repeat;
  transition:background .2s; }
.cx-ic.on .ic-m{ background:var(--red); }
.cx-ic.on[data-panel="li"] .ic-m{ background:#0A66C2; }

/* the ? canvas: a surprise from the reel, press again to spin it */
.cxp-tube.on{ justify-content:flex-start; gap:10px; }
.cxp-tube iframe{ width:100%; aspect-ratio:16/9; border-radius:10px; background:#0A1118; }
.cx-tube-hint{ margin:0; }