/* =========================================================================
   Nuh Consulting · pitch site (system A) — fixed house look, sent to every
   prospect. Ported from the "ai-advertiser-dark" skin
   (.claude/skills/vsl-funnel-builder/assets/skins/ai-advertiser-dark/skin.css)
   as-shipped — black bg, drifting blue/indigo glow, blue gradient buttons,
   amber-to-blue headline gradient, system fonts. Only the logo/wordmark and
   copy are Nuh Consulting's; the color system is the skin's own, unchanged.
   Structural/interaction layer (grid, reveal, lightbox, player, sticky CTA
   mechanics) is unchanged from the shipped carbon-pitch scaffold. See
   house/HOUSE.md "Pitch-site look" for the standing decision.
   ========================================================================= */

:root {
  --bg: #000000;
  --bg-2: #000000;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.03);
  --line: rgba(255, 255, 255, 0.10);
  --line-soft: rgba(255, 255, 255, 0.06);

  --text: #ffffff;
  --text-2: #d4d4d4;
  --text-3: #a3a3a3;

  --amber: #f59e0b;
  --shine-1: #3275f8;
  --shine-2: #60a5fa;
  --shine-3: #93bbfc;
  --fm-accent: #5b46e5;
  --fm-accent-2: #2f6bf0;

  --grad: linear-gradient(to right, lab(54.1736 13.3369 -74.6839) 0%, lab(44.0605 29.0279 -86.0352) 50%, lab(36.9089 35.0961 -85.66) 100%);
  /* the blend's three stops, broken out so the shine animation can reuse them */
  --gt-amber: lab(80.1641 16.6016 99.2089);
  --gt-blue: lab(54.1736 13.3369 -74.6839);
  --gt-deep: lab(44.0605 29.0279 -86.0352);
  /* blue pushed later than the skin's 50% so gold holds more of the word */
  --grad-text: linear-gradient(to right, var(--gt-amber) 0%, var(--gt-amber) 14%, var(--gt-blue) 66%, var(--gt-deep) 100%);

  --accent: var(--shine-2);
  --accent-2: var(--fm-accent-2);
  --accent-deep: var(--shine-3);
  --accent-ink: #ffffff;
  --accent-soft: rgba(47, 107, 240, 0.12);

  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --container: 1120px;
  --gutter: clamp(20px, 5vw, 32px);
  --section-y: clamp(72px, 11vh, 132px);
  --radius: 18px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------- Base --------------------------------- */
[hidden] { display: none !important; } /* mode-switched elements must stay hidden even when a component sets display */
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
/* page canvas: ai-advertiser-dark's ".bg-fx" — deep-black base + slow-drifting blue/indigo radial blobs (exact) */
body::before { content: ""; position: fixed; inset: -20% 0; z-index: -2; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(40% 40% at 18% 12%, rgba(50, 117, 248, 0.20), transparent 70%),
    radial-gradient(38% 38% at 82% 18%, rgba(91, 70, 229, 0.18), transparent 70%),
    radial-gradient(45% 45% at 70% 82%, rgba(47, 107, 240, 0.14), transparent 72%),
    radial-gradient(40% 40% at 22% 88%, rgba(36, 35, 86, 0.30), transparent 70%);
  background-size: 160% 160%, 150% 150%, 170% 170%, 150% 150%;
  background-position: 0% 0%, 100% 0%, 80% 100%, 0% 100%;
  animation: bg-drift 26s ease-in-out infinite; }
/* darken toward the top, matching .bg-fx::after */
html::before { content: ""; position: fixed; inset: -20% 0 0 0; z-index: -2; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 0%, transparent, rgba(0, 0, 0, 0.55) 100%); }
@keyframes bg-drift {
  0% { background-position: 0% 0%, 100% 0%, 80% 100%, 0% 100%; }
  50% { background-position: 30% 20%, 70% 25%, 55% 70%, 25% 75%; }
  100% { background-position: 0% 0%, 100% 0%, 80% 100%, 0% 100%; }
}
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 140px 140px; }
body {
  margin: 0;
  background: transparent;
  color: var(--text-2);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--accent-ink); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); position: relative; }

/* ------------------------------ Typography ------------------------------ */
.eyebrow {
  margin: 0 0 18px;
  /* display font, not mono: mono's 0.18em tracking reads wrong in a sans face (same call already
     made on .group__count and .pcard__kicker). Size stays small on purpose. */
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}
.section__title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Small directional arrows */
.arrow, .arrow-down {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  vertical-align: middle;
  margin-left: 7px;
  transition: transform 0.3s var(--ease);
}
.arrow { transform: rotate(-45deg); }
.arrow-down { transform: rotate(45deg); margin-left: 8px; }

/* -------------------------------- Reveal -------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.hero__inner .reveal:nth-child(1) { transition-delay: 0.05s; }
.hero__inner .reveal:nth-child(2) { transition-delay: 0.18s; }
.hero__inner .reveal:nth-child(3) { transition-delay: 0.3s; }

/* -------------------------------- Buttons ------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 13px 26px;
  border-radius: 980px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease),
    border-color 0.3s var(--ease), opacity 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn--primary {
  background: var(--grad);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.btn--primary::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%); background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.28), transparent); transition: transform 0.6s var(--ease); }
.btn--primary:hover { transform: translateY(-3px); filter: brightness(1.08); box-shadow: 0 12px 28px rgba(47, 107, 240, 0.32); }
.btn--primary:hover::after { transform: translateX(120%); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn--lg { padding: 17px 40px; font-size: 1.1rem; }

/* --------------------------------- Hero --------------------------------- */
.hero {
  text-align: center;
  padding-top: clamp(56px, 8vh, 96px);
  padding-bottom: clamp(24px, 4vh, 48px);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -120px; left: -10%; width: 60%; height: 380px;
  background: radial-gradient(circle at 30% 30%, rgba(47, 107, 240, 0.45), transparent 60%);
  filter: blur(40px);
  opacity: 0.6;
  pointer-events: none;
}
.hero__inner { position: relative; }
.hero__title {
  margin: 0 auto;
  max-width: 1080px;
  font-family: var(--display);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  text-wrap: balance;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--text);
}
/* Word-by-word reveal (applied once JS splits the headline) */
.hero__title.split { opacity: 1; transform: none; transition: none; } /* the words carry the entrance; no transition on the h1 itself so GSAP never samples a half-way state */
.hero__title .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em);
  filter: blur(6px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), filter 0.7s var(--ease);
  will-change: opacity, transform, filter;
}
.hero__title.is-in .word { opacity: 1; transform: none; filter: blur(0); }

/* the $ figure: ai-advertiser-dark's exact headline gradient (--grad-text: amber -> blue -> deep blue) */
.mark {
  position: relative;
  white-space: nowrap;
  /* same amber -> blue blend, but tiled wide with a white band so it can sweep (the shine) */
  background-image: linear-gradient(100deg,
    var(--gt-amber) 0%, var(--gt-amber) 10%, var(--gt-blue) 30%, var(--gt-deep) 40%,
    #ffffff 50%,
    var(--gt-deep) 60%, var(--gt-blue) 70%, var(--gt-amber) 90%, var(--gt-amber) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: mark-shine 6.5s linear infinite;
}
@keyframes mark-shine {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}
.mark::after {
  content: "";
  position: absolute;
  left: -1px; right: -1px; bottom: -0.04em;
  height: 0.09em;
  background: var(--grad-text);
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--ease) 0.5s;
}
.hero__title.is-in .mark::after { transform: scaleX(1); }

/* reusable word-level accent — the same amber-to-blue blend + underline as .mark ("$100k"), for
   other standout words across the page. Sparingly, on one or two words per section, not whole
   lines. Static underline (no scroll-triggered draw-in like the hero's, which is tied to the
   hero's own word-reveal timing) — same end look, simpler to apply anywhere. */
.grad-word {
  position: relative;
  white-space: nowrap;
  background-image: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad-word::after {
  content: "";
  position: absolute;
  left: -1px; right: -1px; bottom: -0.04em;
  height: 0.09em;
  background: var(--grad-text);
  border-radius: 3px;
}


.hero__actions { margin-top: 40px; display: flex; justify-content: center; }
.hero__actions .arrow-down { animation: chevBob 2.2s var(--ease) infinite; }

/* -------------------------------- Player -------------------------------- */
.hplayer { position: relative; margin: 44px auto 0; max-width: 760px; padding: 3px; }
/* shine-border glow ring — ai-advertiser-dark's exact radial multi-stop, 15s pulse */
.hplayer::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--radius) + 3px);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 0%, transparent 18%, var(--shine-1) 34%, var(--shine-2) 44%, var(--shine-3) 50%, var(--shine-2) 56%, var(--shine-1) 66%, transparent 82%, transparent 100%);
  background-size: 300% 300%;
  animation: shine-pulse 15s ease infinite;
}
@keyframes shine-pulse {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}
.hplayer__stage {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius);
  overflow: hidden; background: #05060a; border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.hplayer__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #05060a; }

/* dark scrim behind the big play button (idle only) */
.hplayer__scrim { position: absolute; inset: 0; pointer-events: none; transition: opacity 0.45s var(--ease);
  background: radial-gradient(120% 120% at 50% 45%, rgba(0,0,0,0.12), rgba(0,0,0,0.55)); }
.hplayer__stage:not([data-state="idle"]) .hplayer__scrim { opacity: 0; }

/* big centered play — ai-advertiser-dark's translucent white circle (.vslp-bigplay), not a solid accent fill */
.hplayer__big { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 88px; height: 88px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.1); backdrop-filter: blur(6px);
  transition: transform 0.4s var(--ease), background 0.4s var(--ease), opacity 0.4s var(--ease), border-color 0.4s var(--ease); }
.hplayer__big svg { width: 32px; height: 32px; fill: #fff; margin-left: 4px; position: relative; z-index: 1; }
.hplayer__big-glow { position: absolute; inset: 0; border-radius: 50%; animation: hpPulse 2.8s ease-out infinite; }
.hplayer__big:hover { transform: translate(-50%, -50%) scale(1.07); background: rgba(255,255,255,0.16); border-color: #fff; }
.hplayer__stage:not([data-state="idle"]) .hplayer__big { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.8); }
@keyframes hpPulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.35); } 70% { box-shadow: 0 0 0 22px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }

/* captions overlay */
.hplayer__cc { position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); max-width: 84%; text-align: center;
  font-size: clamp(0.9rem, 0.8rem + 0.5vw, 1.08rem); line-height: 1.4; color: #fff; pointer-events: none;
  transition: bottom 0.3s var(--ease); }
.hplayer__cc span { background: rgba(6,8,14,0.64); padding: 3px 10px; border-radius: 7px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hplayer__cc:empty { display: none; }
.hplayer__stage:hover .hplayer__cc, .hplayer__stage[data-state="paused"] .hplayer__cc { bottom: 82px; }

/* control bar */
.hplayer__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: linear-gradient(to top, rgba(4,6,10,0.85), rgba(4,6,10,0.4) 60%, transparent);
  opacity: 0; transform: translateY(8px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.hplayer__stage:hover .hplayer__bar, .hplayer__stage[data-state="paused"] .hplayer__bar,
.hplayer__stage.hp-touch .hplayer__bar { opacity: 1; transform: none; }
.hplayer__stage[data-state="idle"] .hplayer__bar { opacity: 0; pointer-events: none; }

.hp-btn { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: none; background: transparent;
  color: #fff; cursor: pointer; border-radius: 8px; opacity: 0.82; transition: opacity 0.2s var(--ease), background 0.2s var(--ease); }
.hp-btn:hover { opacity: 1; background: rgba(255,255,255,0.1); }
.hp-btn svg { width: 20px; height: 20px; fill: #fff; }
.hp-btn--mute svg, .hp-btn--full svg { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hp-i-play, .hp-i-sound { display: none; }
.hplayer__stage[data-state="paused"] .hp-i-pause, .hplayer__stage[data-state="idle"] .hp-i-pause { display: none; }
.hplayer__stage[data-state="paused"] .hp-i-play, .hplayer__stage[data-state="idle"] .hp-i-play { display: block; }

.hp-time { font-size: 0.78rem; color: rgba(255,255,255,0.75); font-variant-numeric: tabular-nums; min-width: 36px; text-align: center; }

/* scrub */
.hp-scrub { position: relative; flex: 1 1 auto; height: 28px; display: flex; align-items: center; cursor: pointer; }
.hp-scrub__track { position: relative; width: 100%; height: 4px; border-radius: 99px; background: rgba(255,255,255,0.22); transition: height 0.15s var(--ease); }
.hp-scrub:hover .hp-scrub__track, .hp-scrub.dragging .hp-scrub__track { height: 6px; }
.hp-scrub__buf { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 99px; background: rgba(255,255,255,0.3); }
.hp-scrub__fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 99px; background: var(--grad); box-shadow: 0 0 10px rgba(47,107,240,0.6); }
.hp-scrub__knob { position: absolute; top: 50%; left: 0; width: 13px; height: 13px; border-radius: 50%; background: #fff;
  transform: translate(-50%, -50%) scale(0); transition: transform 0.18s var(--ease); box-shadow: 0 1px 5px rgba(0,0,0,0.45); }
.hp-scrub:hover .hp-scrub__knob, .hp-scrub.dragging .hp-scrub__knob { transform: translate(-50%, -50%) scale(1); }

/* CC toggle */
.hp-btn--cc { width: auto; padding: 0 9px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; }
.hp-btn--cc.is-on { background: rgba(47,107,240,0.4); opacity: 1; }

/* speed */
.hp-speed { position: relative; }
.hp-btn--speed { width: auto; padding: 0 9px; font-size: 0.76rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hp-speed__menu { position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%); min-width: 76px; padding: 6px;
  background: rgba(10,12,18,0.97); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  display: none; flex-direction: column; gap: 2px; }
.hp-speed__menu.open { display: flex; }
.hp-speed__menu button { border: none; background: transparent; color: rgba(255,255,255,0.8); font-size: 0.78rem; font-weight: 600;
  padding: 7px 10px; border-radius: 7px; cursor: pointer; text-align: center; font-variant-numeric: tabular-nums; }
.hp-speed__menu button:hover { background: rgba(255,255,255,0.09); color: #fff; }
.hp-speed__menu button.is-on { background: rgba(47,107,240,0.35); color: #fff; }

@media (max-width: 560px) {
  .hp-btn { width: 30px; height: 30px; }
  .hp-btn--full { display: none; }
  .hplayer__cc { bottom: 62px; }
}

/* ------------------------- Hero reel (no-loom tier) --------------------- */
/* Slow ticker of the deliverable previews, standing in for the pitch video when the
   sender didn't record one. The marquee pattern is components.md's: duplicated track,
   translateX(-50%), slow. Decorative: the deliverables grid below is the clickable one.
   Frames reuse .thumb / .thumb__bar / .thumb__img, so there is no second card style. */
.hreel { position: relative; margin: 44px auto 0; max-width: 760px; width: 100%; overflow: hidden;
  pointer-events: none; -webkit-user-select: none; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
/* Spacing is margin-right, NOT gap. translateX(-50%) has to land exactly one half along,
   and `gap` puts n-1 gaps in the track, so half the width is a few px short of half the
   frames and the loop visibly jumps. A trailing margin on each frame makes the two halves
   identical. */
.hreel__track { display: flex; width: max-content; animation: hreel-marq 46s linear infinite; }
.hreel__frame { flex: none; width: 258px; margin-right: 18px; }
/* In the grid these thumbs sit on a lit .pcard. Here they're naked on the black hero, so
   they need their own edge and lift or the dark previews sink into the background. */
.hreel__frame .thumb { border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 38px -18px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.05); }
.hreel__frame .thumb::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11); }
/* The .pcard hover treatment doesn't apply here, so hold the image still. */
.hreel__frame .thumb__img { transition: none; filter: brightness(1.12) saturate(1.05); }
@keyframes hreel-marq { to { transform: translateX(-50%); } }

/* Hero rhythm, no-loom only. The shared spacing was tuned around a 470px hero video that
   fills the band with something bright. The reel is 194px of small dark thumbnails on a
   black page, so the identical padding now surrounds far less and reads as a void: at a
   738px window it was ~570px from the header to "Here are the deliverables", 231px of it
   pure air. Tightening it here takes that to ~450px, so the deliverables heading lands on
   the first screen. The loom hero still has the video and keeps the rhythm it was drawn
   for, which is why this is scoped rather than changed globally. */
.tier-noloom .hero { padding-top: clamp(24px, 3vh, 44px); padding-bottom: clamp(12px, 1.6vh, 22px); }
.tier-noloom .hreel { margin-top: clamp(18px, 2.4vh, 26px); }
.tier-noloom .hero__actions { margin-top: clamp(18px, 2.4vh, 26px); }
.tier-noloom .deliverables { padding-top: clamp(14px, 1.8vh, 24px); }

@media (max-width: 560px) {
  .hreel { margin-top: 32px; }
  .hreel__frame { width: 176px; margin-right: 12px; }
}

/* ----------------------------- Deliverables ----------------------------- */
.deliverables { padding-top: clamp(28px, 4.5vh, 56px); }
/* the run into Book a call was ~2x --section-y of empty black. Half of it reads much
   tighter without crowding the last row of cards. */
.deliverables { padding-bottom: clamp(36px, 5.5vh, 66px); }
.cta { padding-top: clamp(36px, 5.5vh, 66px); }
.deliverables__title { text-align: center; margin-bottom: clamp(28px, 4.5vh, 52px); color: var(--text); }

.group { margin-bottom: clamp(44px, 6.5vh, 76px); }
.group:last-child { margin-bottom: 0; }
/* rules flank the label only, so they sit on the label's optical centre — the count drops
   below the whole row (centring them on label+count stacked them ~14px low) */
.group__head { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 26px; }
.group__row { display: flex; align-items: center; justify-content: center; gap: 28px; width: 100%; }
.group__rule { flex: 1; height: 1px; background: var(--line); max-width: 220px; transform: scaleX(0); transform-origin: center; transition: transform 0.9s var(--ease); }
.group__head.is-in .group__rule { transform: scaleX(1); }
.group__label { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.group__count { font-family: var(--display); font-size: 0.95rem; font-weight: 700; color: var(--text); letter-spacing: 0.05em; }

.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-inline: auto; }
.grid--1 { grid-template-columns: 1fr; }

/* Preview card: ai-advertiser-dark card treatment (translucent dark surface + browser-chrome window) */
.pcard {
  appearance: none; font: inherit; color: inherit; text-align: left; position: relative;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 12px 12px 20px; cursor: pointer; display: flex; flex-direction: column; gap: 0;
  transform-style: preserve-3d; will-change: transform;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 10px 30px -22px rgba(0, 0, 0, 0.6);
  transition: transform 0.6s var(--ease), border-color 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.pcard:hover { border-color: rgba(96, 165, 250, 0.35); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 30px 60px -28px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(96, 165, 250, 0.12); }
.pcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(96, 165, 250, 0.12), transparent 44%); opacity: 0; transition: opacity 0.35s var(--ease); pointer-events: none; }
.pcard:hover::after { opacity: 1; }

/* the window frame — dark browser chrome (real traffic-light dots kept, bar recolored dark) */
.thumb { position: relative; display: block; border-radius: 12px; overflow: hidden; background: var(--surface-2); aspect-ratio: 4 / 3; border: 1px solid var(--line-soft); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.55); }
.thumb--wide { aspect-ratio: 16 / 7; }
.thumb__bar { position: absolute; left: 0; right: 0; top: 0; height: 26px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: linear-gradient(180deg, rgba(24, 24, 24, 0.95), rgba(12, 12, 12, 0.9)); border-bottom: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(6px); }
.thumb__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.thumb__bar i:nth-child(1) { background: #ff5f57; } .thumb__bar i:nth-child(2) { background: #febc2e; } .thumb__bar i:nth-child(3) { background: #28c840; }
.thumb__url { margin-left: 8px; flex: 1; height: 16px; border-radius: 7px; background: rgba(255, 255, 255, 0.08); display: flex; align-items: center; padding: 0 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.03em; color: var(--text-3); white-space: nowrap; overflow: hidden; }
.thumb__img { position: absolute; inset: 26px 0 0 0; width: 100%; height: calc(100% - 26px); object-fit: cover; object-position: 50% 0%; transition: object-position 2.2s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s var(--ease); }
.pcard:hover .thumb__img { object-position: 50% 38%; }
.thumb--wide .thumb__img { object-position: 50% 50%; }
.pcard:hover .thumb--wide .thumb__img { object-position: 50% 50%; transform: scale(1.02); }
.thumb::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }

/* type */
.pcard__body { padding: 16px 8px 0; }
.pcard__kicker { display: block; font-family: var(--display); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); margin-bottom: 8px; }
.pcard__title { display: block; font-family: var(--display); font-size: 1.22rem; font-weight: 600; letter-spacing: -0.005em; line-height: 1.2; color: var(--text); }
.pcard__desc { display: block; margin-top: 6px; font-size: 0.92rem; line-height: 1.5; color: var(--text-2); }
.pcard__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 0.86rem; font-weight: 600; color: var(--accent); letter-spacing: 0.005em; transition: gap 0.3s var(--ease); }
.pcard:hover .pcard__link { gap: 10px; }
.pcard__link .arrow { margin-left: 0; border-color: currentColor; }
.pcard--wide .pcard__body { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; }
.pcard--wide .pcard__link { margin-top: 0; }

/* SVG mock palette (legacy) */
.mock { width: 100%; height: auto; }
.m-stroke { fill: none; stroke: rgba(255, 255, 255, 0.28); stroke-width: 2; }
.m-line { stroke: rgba(255, 255, 255, 0.12); stroke-width: 1.5; }
.m-fill { fill: var(--accent); }
.m-soft { fill: rgba(255, 255, 255, 0.16); }
.m-faint { fill: rgba(255, 255, 255, 0.07); }
.m-panel { fill: var(--surface-2); stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; }

/* --------------------------------- CTA ---------------------------------- */
.cta { text-align: center; overflow: hidden; }
.cta::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 50% 120%, rgba(47, 107, 240, 0.16), transparent 70%);
  pointer-events: none;
}
.cta__wrap { position: relative; }
.cta__title {
  margin: 0 0 36px;
  font-family: var(--display);
  font-size: clamp(2.4rem, 6.5vw, 4rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* -------------------------------- Footer -------------------------------- */
.footer { position: relative; height: 72px; background: rgba(255, 255, 255, 0.02); border-top: 1px solid var(--line-soft); }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: -140px; height: 140px; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.2)); }
.footer__inner { height: 100%; display: flex; align-items: center; justify-content: center; }
.footer__note { font-family: var(--mono); font-size: 0.84rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); line-height: 48px; }

/* ------------------------------ Sticky CTA ------------------------------ */
/* Booking one tap away for the whole scroll; yields only to the closing CTA. */
.stickycta {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 980px;
  background: var(--grad);
  color: #fff;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 12px 40px rgba(47, 107, 240, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.96);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease),
    visibility 0s linear 0.35s;
}
.stickycta.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(var(--mgx, 0px), var(--mgy, 0px)) scale(1);
  transition: opacity 0.35s var(--ease), transform 0.25s var(--ease), visibility 0s;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s;
}
.stickycta.is-visible:hover { transform: translate(var(--mgx, 0px), calc(var(--mgy, 0px) - 2px)) scale(1.02); filter: brightness(1.08); box-shadow: 0 16px 48px rgba(47, 107, 240, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.stickycta__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: stickyPulse 2.4s var(--ease) infinite;
}
@keyframes stickyPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
  70%, 100% { box-shadow: 0 0 0 7px transparent; }
}
@media (max-width: 560px) {
  .stickycta { left: clamp(16px, 3vw, 28px); right: clamp(16px, 3vw, 28px); justify-content: center; }
}

/* ------------------------------- Lightbox ------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vw, 64px);
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox__inner {
  max-width: 1000px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.lightbox__stage {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  max-height: 78vh;
  transform-origin: top left;
  transition: transform 0.5s var(--ease);
  will-change: transform;
}
.lightbox__stage img { width: 100%; height: auto; max-height: 78vh; object-fit: contain; display: block; }
.lightbox__stage--embed { height: 78vh; background: #0a0a0a; }
.lightbox__frame { width: 100%; height: 100%; border: 0; display: block; background: #0a0a0a; }
.lightbox__open { margin-left: 12px; font-size: 0.85rem; font-weight: 500; color: rgba(255, 255, 255, 0.75); border-bottom: 1px solid rgba(255, 255, 255, 0.35); transition: color 0.3s var(--ease); }
.lightbox__open:hover { color: #fff; }
.lightbox__placeholder { padding: clamp(28px, 6vw, 64px); text-align: center; }
.lightbox__placeholder .mock { max-width: 560px; margin: 0 auto 22px; }
.lightbox__placeholder p { margin: 0; font-size: 0.9rem; color: var(--text-3); }
.lightbox__title { margin: 0; font-size: 1.05rem; font-weight: 600; color: #fff; }
.lightbox__close {
  position: absolute;
  top: clamp(16px, 3vw, 28px);
  right: clamp(16px, 3vw, 28px);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.lightbox__close:hover { background: rgba(255, 255, 255, 0.15); transform: rotate(90deg); }

/* --------------------------- Calendly popup ----------------------------- */
.cal-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease);
}
.cal-modal.open { opacity: 1; visibility: visible; }
.cal-frame {
  position: relative;
  width: min(820px, 100%);
  height: min(1000px, 92vh);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
  transform: scale(0.98);
  transition: transform 0.28s var(--ease);
}
.cal-modal.open .cal-frame { transform: scale(1); }
.cal-frame iframe { position: relative; z-index: 1; width: 100%; height: 100%; border: 0; display: block; background: transparent; }
.cal-loader {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.3s var(--ease);
}
.cal-loader span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: calDot 1s ease-in-out infinite; }
.cal-loader span:nth-child(2) { animation-delay: 0.15s; }
.cal-loader span:nth-child(3) { animation-delay: 0.3s; }
.cal-modal.cal-ready .cal-loader { opacity: 0; }

/* ------------------------------- Keyframes ------------------------------ */
@keyframes playPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.16); }
  70%, 100% { box-shadow: 0 0 0 18px rgba(255, 255, 255, 0); }
}
@keyframes chevBob {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50% { transform: rotate(45deg) translate(2px, 2px); }
}
@keyframes calDot {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-4px); }
}

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 860px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .grid--3, .grid--2 { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .pcard--wide .pcard__body { grid-template-columns: 1fr; }
  .thumb--wide { aspect-ratio: 16 / 9; }
  .group__rule { max-width: 60px; }
  .hero__actions .btn { width: 100%; }
  .stickycta { padding: 12px 22px; }
  .cal-frame { height: 90vh; border-radius: 16px; }
}

/* --------------------------- Reduced motion ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .lightbox, .lightbox__stage { transition: none; }
  .hero::before, .hplayer::before, .hplayer__big-glow, .hero__actions .arrow-down, .mark { animation: none; }
  .hreel__track { animation: none; }
  .mark::after { transition: none; transform: scaleX(1); }
  .group__rule { transition: none; transform: scaleX(1); }
  .thumb__img { transition: none; }
  .pcard { transition: none; }
  .stickycta { transform: none; transition: opacity 0.25s linear, visibility 0s linear 0.25s; }
  .stickycta.is-visible { transform: none; transition: opacity 0.25s linear; }
  .stickycta__dot { animation: none; }
  .cal-modal { transition: opacity 0.15s linear; }
  .cal-frame { transition: none; transform: none; }
  .cal-loader span { animation: none; }
}

/* ---------------------- Hero photo-swarm (signature) -------------------- */
/* Overlay above the already-visible hero. pointer-events none throughout. */
/* FIXED, not absolute. The photo offsets below are in vh, so the box they're measured
   against has to be the viewport too. While this was absolute inside .hero it was clipped
   by .hero's overflow:hidden at whatever height the hero happened to be, and the bottom
   pair lost ~40px. It also meant any copy change that shortened the hero cut the photos
   deeper, which is exactly what happened when the eyebrow and research line came out. */
.swarm {
  position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: visible;
  /* Card size is declared once, here, so the safe-area maths below can never
     drift out of step with the card itself. 4/5 portrait => height = w * 1.25. */
  --ph-w: clamp(84px, 9vw, 128px);
  --ph-h: calc(var(--ph-w) * 1.25);
  /* 28 rather than 24: at rest each card is rotated up to 3.2deg, which puffs
     its bounding box out by ~3-5px per side beyond the numbers below. */
  --gut: 28px;
  /* Cards are anchored by their TOP-LEFT corner (left/top: 50%), not their
     centre. That's deliberate — the mirrored --ix values in the markup are
     hand-offset (-34 vs +30, -38 vs +34, -26 vs +22) to compensate for it, and
     re-centring would throw that balance out. It does mean the safe range is
     asymmetric: a card can travel a full half-viewport left, but only half a
     viewport minus its own width right. Same story vertically. */
  --min-x: calc(-50vw + var(--gut));
  --max-x: calc(50vw - var(--ph-w) - var(--gut));
  --min-y: calc(-50vh + var(--gut));
  --max-y: calc(50vh - var(--ph-h) - var(--gut));
}
.swarm__ph { position: absolute; width: var(--ph-w); aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6); background: var(--surface);
  opacity: 0; transform: translate(var(--ox), var(--oy)) rotate(var(--r, 0deg)) scale(0.92); will-change: transform, opacity;
  /* The resting spot, clamped into the safe area. A photo now physically cannot
     cross an edge, whatever the window size and however much the hero copy
     changes underneath it. --ox/--oy are left unclamped on purpose: those are
     the fly-in/out positions and are meant to sit off-screen. */
  --rx: clamp(var(--min-x), var(--ix), var(--max-x));
  --ry: clamp(var(--min-y), var(--iy), var(--max-y)); }
.swarm__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swarm.is-on .swarm__ph { animation: swarmIn 2.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes swarmIn {
  0%   { opacity: 0; transform: translate(var(--ox), var(--oy)) rotate(var(--r, 0deg)) scale(0.92); }
  28%  { opacity: 1; transform: translate(var(--rx), var(--ry)) rotate(calc(var(--r, 0deg) * 0.4)) scale(1); }
  52%  { opacity: 1; transform: translate(var(--rx), var(--ry)) rotate(calc(var(--r, 0deg) * 0.4)) scale(1); }
  100% { opacity: 0; transform: translate(var(--ox), var(--oy)) rotate(var(--r, 0deg)) scale(0.92); }
}
@media (prefers-reduced-motion: reduce) { .swarm { display: none; } }
@media (max-width: 760px) { .swarm { display: none; } }

/* reduced / static: jump to final states (no mid-transition captures, honours prefers-reduced-motion) */
html.reduced *, html.reduced *::before, html.reduced *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; transition-delay: 0s !important; }

/* ------------------------- Brand lockup (fixed) -------------------------- */
/* NC monogram + wordmark, top-left. Fixed for every Nuh Consulting send —
   ported verbatim from projects/internal-systems/sales-system/logo/LOCKUP-SNIPPET.html */
.agency-bar { position: absolute; top: clamp(18px, 3vw, 28px); left: clamp(18px, 3vw, 32px); z-index: 6; }
.brand-lockup { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { width: clamp(24px, 4vw, 30px); height: auto; flex: none; display: block; }
.brand__word {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.16em;
  font-size: clamp(0.68rem, 1.4vw, 0.8rem);
  text-transform: uppercase;
  margin: 0;
  color: var(--text);
}

/* Hero embed (Loom / Wistia) */
.hplayer__embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #05060a; }
.hplayer__stage[data-state="embed"] .hplayer__scrim, .hplayer__stage[data-state="embed"] .hplayer__big, .hplayer__stage[data-state="embed"] .hplayer__bar, .hplayer__stage[data-state="embed"] .hplayer__cc { display: none; }

/* Inline Calendly (replaces the CTA button + modal) */
.cta__title { margin-bottom: 28px; }
.cal-inline { position: relative; width: min(900px, 100%); margin: 0 auto; height: min(760px, 92vh); border-radius: 20px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.6); }
.cal-inline iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Case studies (optional, PITCH_CONFIG.caseStudies) */
.case-studies { padding-top: 0; }
.case-studies__title { text-align: center; margin-bottom: clamp(36px, 6vh, 60px); color: var(--text); }
.cs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 960px; margin-inline: auto; }
.cs-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.cs-media { aspect-ratio: 16 / 9; background: var(--surface-2); }
.cs-media iframe, .cs-media img { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
.cs-body { padding: 20px 22px 24px; text-align: center; }
.cs-result { margin: 0 0 8px; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.cs-title { margin: 0 0 8px; font-family: var(--display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.005em; color: var(--text); }
.cs-text { margin: 0; font-size: 0.95rem; color: var(--text-2); line-height: 1.55; }
@media (max-width: 700px) { .cs-grid { grid-template-columns: 1fr; } .cal-inline { height: 80vh; border-radius: 16px; } }

/* ------------------------- Bridge (unaware mode) ------------------------- */
.bridge { padding-bottom: clamp(24px, 4vh, 48px); }
.bridge__head { text-align: center; margin-bottom: clamp(56px, 9vh, 96px); }
.bridge__head .eyebrow { margin-bottom: 14px; }
.beat { display: grid; grid-template-columns: 92px minmax(0, 1.25fr) minmax(280px, 0.9fr); gap: clamp(24px, 4vw, 56px); align-items: start; padding-block: clamp(40px, 6vh, 64px); border-top: 1px solid var(--line-soft); }
.beat:last-of-type { border-bottom: 1px solid var(--line-soft); }
.beat__num { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.beat__idx { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.2em; color: var(--accent); }
.beat__rule { width: 36px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease) 0.25s; }
.beat.is-in .beat__rule { transform: scaleX(1); }
.beat__kicker { margin: 0 0 12px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.beat__title { margin: 0 0 16px; font-family: var(--display); font-size: clamp(1.35rem, 2.3vw, 1.8rem); font-weight: 700; line-height: 1.16; letter-spacing: -0.01em; text-wrap: balance; color: var(--text); }
.beat__text { margin: 0; font-size: 1.02rem; line-height: 1.65; color: var(--text-2); max-width: 56ch; }
.beat__aside { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 22px 24px; box-shadow: 0 18px 48px -28px rgba(0, 0, 0, 0.55); }
.aside__note { margin: 16px 0 0; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
/* 01 · price ladder */
.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ladder li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 0.95rem; }
.ladder li span { color: var(--text-2); }
.ladder li b { font-family: var(--display); font-weight: 700; white-space: nowrap; color: var(--text); }
.ladder__gap { background: transparent !important; border: 1px dashed rgba(96, 165, 250, 0.45); }
.ladder__gap b { color: var(--accent); font-family: var(--mono); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; }
/* 02 · before / after */
.shift { display: grid; grid-template-columns: 1fr 28px 1fr; align-items: center; gap: 10px; }
.shift__col { display: grid; gap: 4px; padding: 14px 12px; border-radius: 12px; background: var(--surface-2); }
.shift__col--on { background: var(--accent-soft); border: 1px solid rgba(96, 165, 250, 0.3); }
.shift__label { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.shift__col b { font-family: var(--display); font-size: 1rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--text); }
.shift__col--on b { color: var(--accent-deep); }
.shift__sub { font-size: 0.8rem; color: var(--text-2); line-height: 1.35; }
.shift__arrow { width: 22px; height: 22px; border-right: 1.6px solid var(--accent); border-top: 1.6px solid var(--accent); transform: rotate(45deg) scale(0.6); justify-self: center; }
/* 03 · sums */
.sums { display: grid; gap: 10px; }
.sum { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.sum b { font-family: var(--display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--text); }
.sum span { font-size: 0.86rem; color: var(--text-2); line-height: 1.4; }
.sum--on { background: var(--accent-soft); border: 1px solid rgba(96, 165, 250, 0.3); }
.sum--on b { color: var(--accent-deep); }
/* 04 · the week */
.week { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.week li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: baseline; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.week b { font-family: var(--display); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.week span { font-size: 0.86rem; color: var(--text-2); line-height: 1.4; }
.bridge__close { text-align: center; padding-top: clamp(44px, 7vh, 72px); display: grid; gap: 24px; justify-items: center; }
.bridge__closing { margin: 0; max-width: 46ch; font-family: var(--display); font-size: clamp(1.15rem, 1.9vw, 1.45rem); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; text-wrap: balance; color: var(--text); }
.cta__sub { margin: -12px auto 32px; max-width: 52ch; font-size: 1.02rem; line-height: 1.6; color: var(--text-2); }
@media (max-width: 900px) {
  .beat { grid-template-columns: 1fr; gap: 22px; }
  .beat__num { flex-direction: row; align-items: center; }
}

/* ---- mobile hardening (references/mobile.md) ---- */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
p, li, td, th, blockquote, figcaption,
h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; }
table, pre { display: block; max-width: 100%; overflow-x: auto; }
@media (max-width: 700px) {
  .tag, [class*="badge"], [class*="pill"] { margin-left: 0; }
}
@media (max-width: 420px) {
  .tok-merge, .tok-link, code { white-space: normal; }
}

/* Lockup clearance: below ~1240px the centred h1 grows into the top-left lockup (it sat on
   top of "NUH CONSULTING" on phones). Push the hero copy below the lockup there. */
@media (max-width: 1240px) {
  .hero__inner { padding-top: clamp(40px, 6vw, 56px); }
}

/* Hero sub-line (2026-10-02): one plain line under the headline saying what's on the page. */
.hero__sub { margin: 16px auto 0; max-width: 46ch; font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.55; color: var(--text-2); text-wrap: balance; }
/* The mark now holds a brand name, which can be long: let it wrap on phones. */
@media (max-width: 560px) { .mark { white-space: normal; } .mark::after { display: none; } }
.hero__inner .hero__sub.reveal { transition-delay: 0.2s; }
.hero__inner .hplayer.reveal, .hero__inner .hreel.reveal { transition-delay: 0.32s; }

/* What's included (2026-10-02): an organized list under the hero instead of a sentence. */
.hero__incl { list-style: none; padding: 0; margin: 18px auto 0; max-width: 680px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hero__incl li { font-size: 0.9rem; line-height: 1; color: var(--text-2); padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); }
.hero__incl li[hidden] { display: none; }
.hero__inner .hero__incl.reveal { transition-delay: 0.2s; }

/* hero__sub one line (2026-10-02): the included list reads as one line on desktop. */
.hero__sub { max-width: 92ch; }

/* Lockup clearance, all widths (2026-10-02): a one-line headline at 1440 ran into the lockup. */
.hero__inner { padding-top: clamp(48px, 6vw, 72px); }

/* First-draft note under the deliverables title (2026-10-02). */
.deliverables__note { margin: -8px auto clamp(36px, 6vh, 56px); max-width: 52ch; text-align: center; font-size: 1rem; line-height: 1.6; color: var(--text-3); text-wrap: balance; }