/* ============================================================
   McCluster — cinematic 3D-scroll portfolio
   Ink black · Ruby red · Cream
   ============================================================ */

@font-face {
  font-family: "Anton";
  src: url("../assets/fonts/anton-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink: #0a0807;
  --ink-2: #120d0c;
  --ruby: #c1121f;
  --ruby-hot: #e5383b;
  --cream: #f4efe6;
  --cream-dim: rgba(244, 239, 230, 0.88);
  --display: "Anton", Impact, "Arial Narrow", sans-serif;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  /* THE METAL — champagne, banded like brushed metal catching light */
  --metal: linear-gradient(165deg, #ff5a5c 0%, #e5383b 34%, #b3121b 58%, #ff6a6c 100%);
  --glass-hi: rgba(255, 255, 255, 0.12);
  --glass-lo: rgba(255, 255, 255, 0.045);
  --edge: rgba(255, 255, 255, 0.14);
}
/* THE TWO ROOMS — dark is the cinema, light is the gallery. theme.js
   stamps html[data-theme] before first paint; the tokens do the rest. */
html[data-theme="light"] {
  --ink: #f2ede4;
  --ink-2: #e8e1d4;
  --cream: #1a140d;
  --cream-dim: rgba(26, 20, 13, 0.72);
  --glass-hi: rgba(26, 20, 13, 0.08);
  --glass-lo: rgba(26, 20, 13, 0.035);
  --edge: rgba(26, 20, 13, 0.14);
}
html[data-theme="light"] .grain { opacity: 0.3; }
html[data-theme="light"] .appbar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(240, 234, 224, 0.88));
  box-shadow: 0 18px 50px -12px rgba(26, 20, 13, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
html[data-theme="light"] .appbar__tab { color: #1a140d; }
html[data-theme="light"] .appbar__tab--slot {
  background: linear-gradient(180deg, rgba(26, 20, 13, 0.08), rgba(26, 20, 13, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
html[data-theme="light"] .dk-peek__card {
  background: rgba(250, 247, 240, 0.94);
  box-shadow: 0 20px 60px -10px rgba(26, 20, 13, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; }
/* Nothing may widen the page — rotated props and pills stay clipped.
   The clip lives on html ONLY: putting any non-visible overflow on
   body turns body into a scroll container, which silently breaks
   every position:sticky section (films stop pinning and the scroll
   runs past them into black). */
html { overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ruby); color: var(--cream); }

a { color: inherit; text-decoration: none; }

/* ---------- preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.7s ease, visibility 0.7s;
}
.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader__inner { text-align: center; }
.preloader__mark {
  position: relative;
  width: clamp(100px, 20vw, 170px);
  aspect-ratio: 1;
  margin: 0 auto;
  filter: drop-shadow(0 0 40px rgba(193, 18, 31, 0.45));
}
.preloader__piece {
  position: absolute; inset: 0; width: 100%; height: 100%;
  will-change: transform, opacity, filter;
}
/* the mark's two bars, split along the diagonal gap between them */
.preloader__piece--l { clip-path: polygon(0 0, 58% 0, 28% 100%, 0 100%); }
.preloader__piece--r { clip-path: polygon(58% 0, 100% 0, 100% 100%, 28% 100%); }
@keyframes pulse-m { from { opacity: 0.55; } to { opacity: 1; } }
.preloader__count {
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: 0.06em;
  margin-top: 0.5rem;
}
/* stage one at 50%: the assembling mark starts breathing hot */
.preloader.is-hot .preloader__mark { animation: preHot 0.85s ease-in-out infinite; }
@keyframes preHot {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 40px rgba(193, 18, 31, 0.45)); }
  50% { transform: scale(1.07); filter: drop-shadow(0 0 65px rgba(229, 56, 59, 0.85)); }
}
/* stage two at 85%: the whole loader quakes in, count runs ruby */
.preloader.is-blazing .preloader__inner { animation: loadQuake 0.26s linear infinite; }
.preloader.is-blazing .preloader__count { color: var(--ruby-hot); animation: loadFlash 0.4s steps(2) infinite; }
@media (prefers-reduced-motion: reduce) {
  .preloader.is-hot .preloader__mark,
  .preloader.is-blazing .preloader__inner,
  .preloader.is-blazing .preloader__count { animation: none; }
}
.preloader__pct { color: var(--ruby); }
.preloader__label {
  margin-top: 0.75rem;
  font-size: 0.84rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

/* ---------- the mindfulness cue: every loading screen teaches its own exercise ---------- */
.zencue {
  margin: 2rem auto 0; max-width: 42ch; display: flex; flex-direction: column;
  align-items: center; gap: 1.05rem; padding: 0 1rem;
  opacity: 0; animation: zenIn 1.1s ease 0.4s forwards;
}
.zencue__title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.1rem, 3.6vw, 1.4rem); letter-spacing: 0.1em; color: var(--ruby-hot);
}
.zencue__msg {
  font-size: clamp(1rem, 3.1vw, 1.2rem); line-height: 1.7; letter-spacing: 0.015em;
  color: rgba(244, 239, 230, 0.94); text-align: center;
}
@keyframes zenIn { to { opacity: 1; } }

/* 1 · the physiological sigh: two inhales up, one long exhale down */
.zencue__orb {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  border: 1.5px solid rgba(244, 239, 230, 0.5); position: relative;
  box-shadow: 0 0 24px rgba(244, 239, 230, 0.14);
  animation: zenBreath 11s ease-in-out infinite;
}
.zencue__orb::after {
  content: ""; position: absolute; inset: 30%; border-radius: 50%;
  background: rgba(244, 239, 230, 0.6);
}
@keyframes zenBreath {
  0%   { transform: scale(0.8); opacity: 0.5; }
  18%  { transform: scale(1.32); opacity: 1; }
  30%  { transform: scale(1.2); opacity: 0.92; }
  42%  { transform: scale(1.5); opacity: 1; }
  50%  { transform: scale(1.5); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0.5; }
}

/* 2 · box breathing: the dot walks the square, 4 counts a side */
.zenbox { position: relative; width: 52px; height: 52px; flex: none;
  border: 1.5px solid rgba(244, 239, 230, 0.5); border-radius: 8px;
  box-shadow: 0 0 20px rgba(244, 239, 230, 0.1); }
.zenbox i { position: absolute; top: -5px; left: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--ruby-hot); box-shadow: 0 0 10px rgba(229, 56, 59, 0.9);
  animation: zenBoxDot 16s linear infinite; }
@keyframes zenBoxDot {
  0% { transform: translate(0, 52px); }      /* bottom-left */
  25% { transform: translate(0, 0); }        /* in: climb */
  50% { transform: translate(52px, 0); }     /* hold: across */
  75% { transform: translate(52px, 52px); }  /* out: descend */
  100% { transform: translate(0, 52px); }    /* hold: back */
}

/* 3 · 4-7-8: grow 4, stay full 7, empty slow for 8 */
.zen478 {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  border: 1.5px solid rgba(244, 239, 230, 0.5); position: relative;
  box-shadow: 0 0 24px rgba(244, 239, 230, 0.14);
  animation: zen478 19s ease-in-out infinite;
}
.zen478::after { content: ""; position: absolute; inset: 26%; border-radius: 50%; background: rgba(244, 239, 230, 0.6); }
@keyframes zen478 {
  0% { transform: scale(0.72); opacity: 0.5; }
  21% { transform: scale(1.45); opacity: 1; }   /* in for 4 */
  58% { transform: scale(1.45); opacity: 1; }   /* hold for 7 */
  100% { transform: scale(0.72); opacity: 0.5; } /* out for 8 */
}

/* 4 · even breathing: five in, five out, smooth */
.zeneven {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  border: 1.5px solid rgba(244, 239, 230, 0.5); position: relative;
  box-shadow: 0 0 24px rgba(244, 239, 230, 0.14);
  animation: zenEven 10s ease-in-out infinite;
}
.zeneven::after { content: ""; position: absolute; inset: 28%; border-radius: 50%; background: rgba(244, 239, 230, 0.6); }
@keyframes zenEven { 0%, 100% { transform: scale(0.8); opacity: 0.55; } 50% { transform: scale(1.42); opacity: 1; } }

/* 5 · 5-4-3-2-1 grounding: one dot per sense, lighting in turn */
.zendots { display: flex; gap: 10px; flex: none; }
.zendots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(244, 239, 230, 0.28);
  animation: zenDot 10s ease-in-out infinite; }
.zendots i:nth-child(2) { animation-delay: 2s; }
.zendots i:nth-child(3) { animation-delay: 4s; }
.zendots i:nth-child(4) { animation-delay: 6s; }
.zendots i:nth-child(5) { animation-delay: 8s; }
@keyframes zenDot {
  0%, 24%, 100% { background: rgba(244, 239, 230, 0.28); transform: scale(1); box-shadow: none; }
  6% { background: var(--ruby-hot); transform: scale(1.5); box-shadow: 0 0 12px rgba(229, 56, 59, 0.9); }
  18% { background: rgba(244, 239, 230, 0.28); transform: scale(1); }
}

/* 6 · the body scan: light sweeps from the head down */
.zensweep { position: relative; width: 26px; height: 58px; flex: none;
  border: 1.5px solid rgba(244, 239, 230, 0.5); border-radius: 13px; overflow: hidden;
  box-shadow: 0 0 20px rgba(244, 239, 230, 0.1); }
.zensweep i { position: absolute; left: 0; right: 0; top: -30%; height: 30%;
  background: linear-gradient(180deg, transparent, rgba(229, 56, 59, 0.85), transparent);
  animation: zenSweep 8s ease-in-out infinite; }
@keyframes zenSweep { 0% { top: -30%; } 70%, 100% { top: 100%; } }

/* 7 · the release: rings let go of the center */
.zenrings { position: relative; width: 48px; height: 48px; flex: none; }
.zenrings::before, .zenrings::after {
  content: ""; position: absolute; inset: 30%; border-radius: 50%;
  border: 1.5px solid rgba(229, 56, 59, 0.8);
  animation: zenRing 6s ease-out infinite;
}
.zenrings::after { animation-delay: 3s; }
.zenrings i { position: absolute; inset: 38%; border-radius: 50%; background: rgba(244, 239, 230, 0.6); }
@keyframes zenRing { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.1); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .zencue { animation: none; opacity: 1; }
  .zencue__orb, .zenbox i, .zen478, .zeneven, .zendots i, .zensweep i, .zenrings::before, .zenrings::after { animation: none; }
}

/* ---------- grain ---------- */
.grain {
  position: fixed; inset: -100%; z-index: 120;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation: grain-shift 0.9s steps(6) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-4%, 3%); }
  40% { transform: translate(3%, -5%); }
  60% { transform: translate(-5%, -2%); }
  80% { transform: translate(4%, 4%); }
  100% { transform: translate(0, 0); }
}

/* ---------- scroll progress ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 150;
  background: rgba(244, 239, 230, 0.08);
}
.scroll-progress span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--ruby), var(--ruby-hot));
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* ---------- header ---------- */
.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 140;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem clamp(1.2rem, 4vw, 3rem);
}
.site-head::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; height: 160%;
  background: linear-gradient(180deg, rgba(10, 8, 7, 0.9) 0%, rgba(10, 8, 7, 0.55) 55%, transparent 100%);
  pointer-events: none;
}
.brand {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.14em;
}
.brand__mark {
  height: 1.3em;
  width: auto;
  display: block;
  will-change: transform, filter;
  animation: markflash 2.4s ease-in-out infinite;
}
@keyframes markflash {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 0 rgba(230, 57, 70, 0)); }
  50% { filter: brightness(1.75) drop-shadow(0 0 10px rgba(230, 57, 70, 0.85)); }
}
@media (prefers-reduced-motion: reduce) { .brand__mark { animation: none; } }

/* ============ song-page loader: percentage + genre logo animation ============ */
.songpre {
  position: fixed; inset: 0; z-index: 200;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
.songpre.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.songpre__inner { text-align: center; }
.songpre__chip {
  position: relative; display: inline-block;
  margin-bottom: 1.4rem;
}
.songpre__logo {
  height: 76px; width: auto; display: block;
  filter: drop-shadow(0 0 1px rgba(244, 239, 230, 0.55)) drop-shadow(0 4px 18px rgba(0, 0, 0, 0.65));
}
/* the vaunt glint needed the old solid chip to sweep across — retired */
.spre--vaunt .songpre__chip::after { display: none; }

/* ---- two-stage load escalation (every page) ----
   Below 50% the mark idles. At 50% the genre animation ignites.
   Past 85% the second hit stacks on: quake, ruby count, hot glow. */
.songpre .songpre__chip,
.songpre .songpre__chip::after { animation-play-state: paused; }
.songpre.is-hot .songpre__chip,
.songpre.is-hot .songpre__chip::after { animation-play-state: running; }
.songpre.is-blazing .songpre__inner { animation: loadQuake 0.26s linear infinite; }
.songpre.is-blazing .songpre__count { color: var(--ruby-hot); animation: loadFlash 0.4s steps(2) infinite; }
.songpre.is-blazing .songpre__logo { filter: drop-shadow(0 0 22px rgba(229, 56, 59, 0.95)) drop-shadow(0 0 2px rgba(244, 239, 230, 0.8)); }
@keyframes loadQuake {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-3px, 2px) rotate(-0.4deg); }
  50% { transform: translate(3px, -2px) rotate(0.4deg); }
  75% { transform: translate(-2px, -3px) rotate(-0.3deg); }
  100% { transform: translate(2px, 3px) rotate(0.3deg); }
}
@keyframes loadFlash { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
  .songpre.is-blazing .songpre__inner,
  .songpre.is-blazing .songpre__count { animation: none; }
}
.songpre__count {
  font-family: var(--display); font-size: 2.1rem; color: var(--cream);
  letter-spacing: 0.06em;
}
.songpre__pct { color: var(--ruby-hot); font-size: 0.6em; margin-left: 0.15em; }

/* Equity Uprise — the march: defiant stomp and rally-sign pump */
.spre--uprise .songpre__chip { animation: spreMarch 1.5s ease-in-out infinite; }
@keyframes spreMarch {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  18% { transform: translateY(-16px) rotate(-4deg); }
  36% { transform: translateY(0) rotate(0deg); }
  44% { transform: translateY(-3px); }
  52% { transform: translateY(0); }
  70% { transform: translateY(-16px) rotate(4deg); }
  88% { transform: translateY(0) rotate(0deg); }
}

/* Vaunt — first class: slow levitating bank with a cabin-light glint */
.spre--vaunt .songpre__chip { animation: spreFloat 3.4s ease-in-out infinite; }
.spre--vaunt .songpre__chip::after {
  content: ""; position: absolute; inset: -40%;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.85) 50%, transparent 58%);
  animation: spreGlint 3.4s ease-in-out infinite;
}
@keyframes spreFloat {
  0%, 100% { transform: translateY(0) rotate(-2.5deg); }
  50% { transform: translateY(-18px) rotate(2.5deg); }
}
@keyframes spreGlint {
  0%, 55% { transform: translateX(-110%); }
  85%, 100% { transform: translateX(110%); }
}

/* WE / Dealer Plates — surveillance: CCTV flicker and RGB-split jitter */
.spre--we .songpre__chip { animation: spreCCTV 1.2s steps(1) infinite; }
@keyframes spreCCTV {
  0%, 100% { transform: none; filter: none; opacity: 1; }
  8% { transform: translateX(-3px) skewX(-2deg); filter: drop-shadow(3px 0 0 rgba(255, 0, 60, 0.8)) drop-shadow(-3px 0 0 rgba(0, 220, 255, 0.8)); }
  14% { transform: translateX(2px); opacity: 0.55; }
  20% { transform: none; filter: none; opacity: 1; }
  62% { transform: translateY(1px); opacity: 0.8; }
  68% { transform: none; opacity: 1; }
  74% { transform: translateX(3px) skewX(2deg); filter: drop-shadow(-3px 0 0 rgba(255, 0, 60, 0.8)) drop-shadow(3px 0 0 rgba(0, 220, 255, 0.8)); }
  80% { transform: none; filter: none; }
}

/* Antisocial — the doomscroll: feed-flick jumps in cold phone glow */
.spre--antisocial .songpre__chip { animation: spreScroll 1.6s ease-in-out infinite; box-shadow: 0 0 34px rgba(80, 160, 255, 0.35); }
@keyframes spreScroll {
  0%, 22% { transform: translateY(0); }
  30% { transform: translateY(-12px); }
  34% { transform: translateY(-9px); }
  56% { transform: translateY(-9px); }
  64% { transform: translateY(-22px); }
  68% { transform: translateY(-18px); }
  86% { transform: translateY(-18px); }
  100% { transform: translateY(0); }
}

/* Who Did The Shoot — the set: shutter snap and strobe flash */
.spre--wdts .songpre__chip { animation: spreSnap 1.9s ease-in-out infinite; }
.spre--wdts::after {
  content: ""; position: absolute; inset: 0; background: #fff; opacity: 0;
  animation: spreFlash 1.9s ease-out infinite; pointer-events: none;
}
@keyframes spreSnap {
  0%, 88% { transform: scale(1); }
  92% { transform: scale(0.92); }
  96% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
@keyframes spreFlash {
  0%, 89% { opacity: 0; }
  92% { opacity: 0.9; }
  100% { opacity: 0; }
}

/* Got WiFi — the signal: rings radiating off the mark */
.spre--wifi .songpre__chip { animation: sprePing 2s ease-in-out infinite; }
.spre--wifi .songpre__inner::before {
  content: ""; position: absolute; left: 50%; top: 32px; width: 90px; height: 90px;
  border: 2px solid rgba(230, 57, 70, 0.8); border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: spreRing 2s ease-out infinite; pointer-events: none;
}
.spre--wifi .songpre__inner { position: relative; }
@keyframes sprePing {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.06); }
  24% { transform: scale(1); }
}
@keyframes spreRing {
  0% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.5); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.6); }
}

@media (prefers-reduced-motion: reduce) {
  .songpre__chip, .spre--wdts::after, .spre--wifi .songpre__inner::before { animation: none !important; }
}
.site-foot__brand { display: inline-flex; align-items: center; gap: 0.14em; }
.brand__m {
  color: var(--ruby-hot);
  background: linear-gradient(160deg, #f5f5f5, #9c9c9c 45%, var(--ruby-hot));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.2em;
}
.site-head__nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.2rem); }
.site-head__nav a {
  font-size: 0.84rem; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--cream-dim); transition: color 0.3s;
}
.site-head__nav a:hover { color: var(--cream); }
.head-cta {
  border: 1px solid var(--ruby);
  color: var(--cream) !important;
  padding: 0.55em 1.3em; border-radius: 100px;
  transition: background 0.3s, color 0.3s;
}
.head-cta:hover { background: var(--ruby); }
.sound-toggle[hidden] { display: none; }
.sound-toggle {
  display: inline-flex; align-items: center; gap: 0.5em;
  background: none; cursor: pointer;
  border: 1px solid rgba(244, 239, 230, 0.3); border-radius: 100px;
  color: var(--cream-dim);
  font-family: var(--body); font-size: 0.84rem;
  letter-spacing: 0.25em; text-transform: uppercase;
  padding: 0.55em 1.3em;
  transition: color 0.3s, border-color 0.3s;
}
.sound-toggle:hover { color: var(--cream); }
.sound-toggle__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(244, 239, 230, 0.35);
  transition: background 0.3s, box-shadow 0.3s;
}
.sound-toggle.is-on { color: var(--cream); border-color: var(--ruby); }
.sound-toggle.is-on .sound-toggle__dot {
  background: var(--ruby-hot);
  box-shadow: 0 0 12px rgba(229, 56, 59, 0.9);
  animation: pulse-m 0.8s ease-in-out infinite alternate;
}

/* ---------- hero ---------- */
.hero { height: 220vh; position: relative; }
.hero__sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: var(--ink);
}
#orbitCanvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block;
}
.hero__fallback {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: none;
}
.hero__fallback.is-active { display: block; }
.hero__vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(10, 8, 7, 0.72) 100%),
    linear-gradient(180deg, rgba(10, 8, 7, 0.55) 0%, transparent 22%, transparent 72%, rgba(10, 8, 7, 0.88) 100%);
  pointer-events: none;
}
.hero__content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
  padding: 0 4vw;
}
/* the hero swallows pointers so the orbit can scrub — but its BUTTONS
   are real: the tape, the pills, every link answers the finger */
.hero__content a, .hero__content button { pointer-events: auto; }
.hero__eyebrow {
  font-size: 0.84rem; letter-spacing: 0.5em; text-transform: uppercase;
  color: var(--cream-dim); margin-bottom: 1.2rem;
}
.hero__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3.4rem, 13.5vw, 12.5rem);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.hero__line { display: block; white-space: nowrap; }
.hero__line .ch {
  display: inline-block;
  will-change: transform, opacity;
}
.hero__line--accent .ch { color: var(--ruby-hot); text-shadow: 0 0 80px rgba(193, 18, 31, 0.35); }
.hero__sub {
  margin-top: 1.6rem;
  font-size: clamp(0.85rem, 1.6vw, 1.15rem);
  letter-spacing: 0.55em; text-transform: uppercase;
  color: var(--cream);
}
.hero__sub .bracket { color: var(--ruby-hot); font-style: normal; }
.reveal-line { overflow: hidden; }
.reveal-line > span { display: inline-block; }

.hero__hud {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 1.6rem clamp(1.2rem, 4vw, 3rem);
  font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--cream-dim);
}
.hud__deg {
  font-family: var(--display);
  font-size: 1.6rem; letter-spacing: 0.1em; color: var(--cream);
}
.hud__arrow { display: inline-block; animation: bob 1.4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ---------- shared section bits ---------- */
.kicker {
  font-size: 0.84rem; letter-spacing: 0.45em; text-transform: uppercase;
  color: var(--ruby-hot); margin-bottom: 1rem;
}
.kicker--center { text-align: center; }
.section-title {
  font-family: var(--display);
  font-size: clamp(3rem, 9vw, 8rem);
  line-height: 0.9; text-transform: uppercase; font-weight: 400;
}
.bg-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block;
}
.bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  display: none; /* scrubbed canvases lead; videos are the no-frames fallback */
}
.bg-video.is-active { display: block; }
.scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10, 8, 7, 0.85) 0%, rgba(10, 8, 7, 0.3) 55%, rgba(10, 8, 7, 0.55) 100%);
}
.scrim--deep {
  background: linear-gradient(180deg, rgba(10, 8, 7, 0.9) 0%, rgba(10, 8, 7, 0.42) 40%, rgba(10, 8, 7, 0.9) 100%);
}

.kicker__mark {
  height: 1.5em; width: auto;
  display: inline-block; vertical-align: -0.42em;
  margin-right: 0.3em;
}

/* ---------- the loadout ---------- */
.loadout { height: 380vh; position: relative; background: var(--ink); }
.loadout__sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center;
}
.loadout__frame {
  position: relative; z-index: 3; width: 100%;
  display: grid; grid-template-columns: minmax(280px, 1fr) 1.3fr;
  gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  padding: 0 clamp(1.2rem, 4vw, 3rem);
}
.loadout__head .work__answer { margin-top: 1rem; }
.loadout__tile {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  background: var(--ink-2);
  border: 1px solid rgba(244, 239, 230, 0.12);
  border-left: 3px solid var(--ruby-hot);
  padding: clamp(1.4rem, 3vw, 2.6rem);
  transform-style: preserve-3d; perspective: 1000px;
  will-change: transform, opacity;
}
.loadout__imgwrap { aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: #000; }
.loadout__imgwrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.loadout__role {
  font-size: 0.78rem; letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--ruby-hot);
}
.loadout__name {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.8rem);
  text-transform: uppercase; line-height: 1; margin-top: 0.5rem;
}
.loadout__specs { list-style: none; margin-top: 1.1rem; }
.loadout__specs li {
  color: var(--cream-dim); font-size: 0.95rem;
  padding: 0.42em 0; border-bottom: 1px solid rgba(244, 239, 230, 0.08);
}
.loadout__specs li::before { content: "— "; color: var(--ruby-hot); }
.loadout__count { position: absolute; right: clamp(1.2rem, 4vw, 3rem); top: -16vh; bottom: auto; }
@media (max-width: 900px) {
  .loadout__frame { grid-template-columns: 1fr; }
  .loadout__tile { grid-template-columns: 1fr; }
}

/* ---------- stats strip ---------- */
.stats {
  position: relative; z-index: 2;
  background: var(--ink-2);
  border-top: 1px solid rgba(244, 239, 230, 0.07);
  border-bottom: 1px solid rgba(244, 239, 230, 0.07);
  padding-bottom: clamp(3rem, 7vw, 6rem);
}
.marquee {
  overflow: hidden; white-space: nowrap;
  border-bottom: 1px solid rgba(244, 239, 230, 0.07);
  padding: 1.1rem 0;
}
.marquee__track {
  display: inline-block; white-space: nowrap;
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.6vw, 2rem);
  text-transform: uppercase; color: var(--cream-dim);
  will-change: transform;
}
.marquee__track span { padding-right: 0.5em; }
.stats__grid {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: rgba(244, 239, 230, 0.07);
  margin-top: clamp(3rem, 6vw, 5rem);
}
.stat {
  background: var(--ink-2);
  padding: clamp(1.6rem, 3.5vw, 3rem);
}
.stat__obj {
  height: clamp(7rem, 14vw, 11rem);
  display: flex; align-items: center; justify-content: flex-start;
  animation: float-bob 4.5s ease-in-out infinite;
}
.stat:nth-child(2) .stat__obj { animation-delay: -1.5s; }
.stat:nth-child(3) .stat__obj { animation-delay: -3s; }
@keyframes float-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.stat__obj img {
  height: 100%; width: auto;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 24px rgba(193, 18, 31, 0.25));
  will-change: transform;
}
.stat__name {
  margin-top: 1rem;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.1rem, 2.2vw, 1.7rem);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.stat__name em { color: var(--ruby-hot); font-style: normal; }
.stat__line { margin-top: 0.7rem; color: var(--cream-dim); font-size: 0.92rem; }
.stats__tagline {
  display: flex; align-items: baseline; gap: 1.2rem;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.2rem, 4vw, 3rem) 0;
}
.stat__bignum {
  font-family: var(--display);
  font-size: clamp(4rem, 12vw, 10rem);
  color: var(--cream); line-height: 1;
}
.stats__tagtext {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3.5vw, 3rem);
  text-transform: uppercase; color: var(--cream-dim);
}

/* ---------- pillars ---------- */
.pillars { height: 400vh; position: relative; }
.pillars__sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: var(--ink);
}
.pillars__frame {
  position: relative; z-index: 3; height: 100%;
  display: grid; grid-template-columns: minmax(280px, 1fr) 1.4fr;
  align-items: center;
  padding: 0 clamp(1.2rem, 4vw, 3rem);
  gap: clamp(1rem, 4vw, 4rem);
}
.pillars__list { display: flex; flex-direction: column; gap: clamp(1rem, 2.5vh, 2rem); }
.pillar {
  border-left: 3px solid rgba(244, 239, 230, 0.15);
  padding-left: clamp(1rem, 2.5vw, 2rem);
  opacity: 0.18;
  transform: translateX(2.5rem);
  transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.5s ease;
}
.pillar.is-active {
  opacity: 1; transform: translateX(0);
  border-color: var(--ruby-hot);
}
.pillar__idx {
  font-family: var(--display);
  font-size: clamp(1rem, 2vw, 1.5rem);
  color: var(--ruby-hot);
}
.pillar__name {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.8rem, 4.6vw, 4rem);
  line-height: 0.95; text-transform: uppercase;
  margin-top: 0.3rem;
}
.pillar__copy {
  margin-top: 0.6rem; max-width: 44ch;
  color: var(--cream-dim); font-size: 0.95rem;
  display: none;
}
.pillar.is-active .pillar__copy { display: block; }

/* ---------- VAUNT LIVE ---------- */
.vauntlive { height: 350vh; position: relative; }
.vauntlive__sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: var(--ink);
}
.vauntlive__content {
  position: absolute; z-index: 3;
  left: clamp(1.2rem, 4vw, 3rem); bottom: clamp(2.5rem, 9vh, 5.5rem);
  max-width: min(92vw, 50rem);
}
.vauntlive__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(4.5rem, 15vw, 13rem);
  line-height: 0.9; text-transform: uppercase;
  color: var(--ruby-hot);
  text-shadow: 0 0 100px rgba(229, 56, 59, 0.4);
}
.vauntlive__sub {
  margin-top: 0.9rem;
  font-size: 0.9rem; letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--cream-dim);
}

/* ---------- SERVICES slides ---------- */
/* height is auto so GSAP's pinSpacing drives the scrub scroll (a fixed height
   would clip the pin-spacer and let the next section overlap) */
.services { height: auto; position: relative; }
.services .command__sticky { position: relative; }
.services .command__count { display: none; }
/* this frame is no longer services: it explains Antisocial + the site's
   purpose + the marker icons, and ends in one big click-through to the video.
   the small now-playing gate is redundant here, so hide it */
.services .song-gate { display: none; }

.antiabout {
  bottom: clamp(2rem, 7vh, 4rem);
  max-width: 52rem; pointer-events: auto;
  display: flex; flex-direction: column; gap: 1rem;
}
/* fact + observation: the whole pitch in six words, next to a buzzing phone */
.antiabout__duo { display: flex; align-items: center; gap: clamp(0.9rem, 3vw, 1.4rem); }
.antiabout__phone {
  flex: none; display: grid; place-items: center;
  width: clamp(3rem, 9vw, 4rem); height: clamp(3.6rem, 11vw, 4.8rem);
  animation: phonePolice 1.32s steps(1, end) infinite, phoneBuzz 3.6s ease-in-out infinite;
}
.antiabout__phone svg { width: 100%; height: 100%; }
@keyframes phonePolice {
  0%, 49.9% { color: #2f6bff; filter: drop-shadow(0 0 16px rgba(47, 107, 255, 0.75)); }
  50%, 100% { color: #ff3535; filter: drop-shadow(0 0 16px rgba(255, 53, 53, 0.75)); }
}
@keyframes phoneBuzz {
  0%, 86%, 100% { transform: rotate(0); }
  88% { transform: rotate(-6deg); } 90% { transform: rotate(5deg); }
  92% { transform: rotate(-4deg); } 94% { transform: rotate(2deg); } 96% { transform: rotate(0); }
}
.antiabout__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.antiabout__points li { display: flex; align-items: center; gap: 0.7em; opacity: 0; transform: translateX(-14px); animation: ptIn 0.7s cubic-bezier(0.2, 0.9, 0.2, 1) forwards; animation-play-state: paused; }
.antiabout__points li + li { animation-delay: 0.22s; }
.antiabout__duo.is-in .antiabout__points li { animation-play-state: running; }
.antiabout__points span {
  font-family: var(--display); text-transform: uppercase; line-height: 0.95; letter-spacing: 0.01em;
  font-size: clamp(1.25rem, 4.6vw, 2.3rem); color: var(--cream);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}
@keyframes ptIn { to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .antiabout__phone { animation: none; color: var(--ruby-hot); }
  .antiabout__points li { animation: none; opacity: 1; transform: none; }
}

/* the big animated SCROLL SLOW headline */
.antiscroll__title {
  font-family: var(--display); font-weight: 400; margin: 0;
  text-transform: uppercase; line-height: 0.82; letter-spacing: -0.01em;
}
.antiscroll__title span { display: block; }
.antiscroll__l1 {
  font-size: clamp(1.6rem, 6vw, 4rem); color: var(--cream);
  opacity: 0.92;
}
.antiscroll__l2 {
  font-size: clamp(2.3rem, 10vw, 6.5rem);
  background: linear-gradient(100deg, var(--ruby) 0%, var(--ruby-hot) 28%, #ffb3b5 48%, #fff 52%, var(--ruby-hot) 72%, var(--ruby) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: slowSheen 5.5s linear infinite, slowBreath 4.5s ease-in-out infinite;
  transform-origin: left center;
  filter: drop-shadow(0 0 34px rgba(229, 56, 59, 0.35));
}
@keyframes slowSheen { to { background-position: 260% 0; } }
@keyframes slowBreath { 0%, 100% { transform: scale(1); letter-spacing: -0.01em; } 50% { transform: scale(1.015); letter-spacing: 0.015em; } }
/* the sign-off: hollow letters, drops in a beat after the rest */
.antiscroll__l3 {
  font-size: clamp(1.9rem, 8vw, 5.2rem); margin-top: 0.04em;
  color: transparent; -webkit-text-stroke: 1.5px var(--cream); text-stroke: 1.5px var(--cream);
  opacity: 0; transform: translateY(-0.25em);
  animation: homieIn 0.8s cubic-bezier(0.2, 0.9, 0.2, 1) 0.55s forwards;
  text-shadow: 0 0 30px rgba(244, 239, 230, 0.18);
}
@keyframes homieIn { to { opacity: 0.95; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .antiscroll__l2 { animation: none; color: var(--ruby-hot); }
  .antiscroll__l3 { animation: none; opacity: 0.95; transform: none; }
}

/* subtle 'turn on the sound' cue */
.antiabout__sound {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-size: 0.9rem; letter-spacing: 0.04em; color: var(--cream-dim);
  animation: soundCue 3s ease-in-out infinite;
}
.antiabout__spk { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; color: var(--ruby-hot); flex: none; }
.antiabout__spk svg { width: 100%; height: 100%; }
@keyframes soundCue { 0%, 100% { color: var(--cream-dim); } 50% { color: var(--cream); } }
@media (prefers-reduced-motion: reduce) { .antiabout__sound { animation: none; } }
.antiabout__cap {
  font-size: 0.84rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cream-dim);
}
.antiabout__icons { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.antiabout__ic {
  display: flex; flex-direction: column-reverse; align-items: center; gap: 0.3rem;
  padding: 0.6rem 0.7rem; min-width: 5.2rem;
  background: rgba(10, 8, 7, 0.5); border: 1px solid rgba(244, 239, 230, 0.16);
  border-radius: 12px; cursor: pointer; color: var(--cream-dim);
  transition: border-color 0.25s, color 0.25s, transform 0.25s;
}
.antiabout__ic:hover { border-color: var(--ruby-hot); color: var(--cream); transform: translateY(-3px); }
.antiabout__ic .psy__ic { width: 22px; height: 22px; color: var(--ruby-hot); }
.antiabout__nm { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; }

.antiabout__why {
  margin-top: 0.4rem; max-width: 40ch;
  font-size: clamp(1.05rem, 2.8vw, 1.5rem); line-height: 1.35; color: var(--cream);
}
.antiabout__why b { color: var(--ruby-hot); }

/* the big click-through: the largest icon on the frame */
.antiabout__enter {
  display: inline-flex; align-items: center; gap: 1.1rem; margin-top: 0.6rem;
  text-decoration: none; color: var(--cream); width: fit-content;
}
.antiabout__enter-ic {
  flex: none; position: relative; display: grid; place-items: center;
  width: clamp(4.6rem, 15vw, 6rem); height: clamp(4.6rem, 15vw, 6rem);
  border-radius: 50%; color: #fff; overflow: hidden;
  background: linear-gradient(120deg, var(--ruby), var(--ruby-hot));
  box-shadow: 0 12px 40px rgba(229, 56, 59, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.16) inset;
  animation: antiEnterPulse 2s ease-in-out infinite;
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.2, 1);
}
/* shine sweep across the face of the button */
.antiabout__enter-ic::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -70%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-18deg); animation: antiShine 3.4s ease-in-out infinite;
}
@keyframes antiShine { 0%, 55% { left: -70%; } 85%, 100% { left: 140%; } }
/* sonar rings rippling off the button */
.antiabout__enter-rings { position: absolute; inset: 0; pointer-events: none; }
.antiabout__enter-rings::before, .antiabout__enter-rings::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(229, 56, 59, 0.7); animation: antiRing 2.4s ease-out infinite;
}
.antiabout__enter-rings::after { animation-delay: 1.2s; }
@keyframes antiRing { 0% { transform: scale(1); opacity: 0.85; } 100% { transform: scale(1.9); opacity: 0; } }
.antiabout__enter-icwrap { position: relative; flex: none; }
.antiabout__enter-ic svg { width: 42%; height: 42%; margin-left: 6%; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35)); }
.antiabout__enter:hover .antiabout__enter-ic { transform: scale(1.1) rotate(4deg); }
.antiabout__enter:active .antiabout__enter-ic { transform: scale(0.96); }
.antiabout__enter-txt {
  font-family: var(--display); font-weight: 400; line-height: 1.05;
  font-size: clamp(1.2rem, 3.6vw, 1.8rem); text-transform: uppercase; letter-spacing: 0.02em;
}
.antiabout__enter-txt b {
  color: var(--ruby-hot); background: linear-gradient(100deg, var(--ruby-hot), #ffb3b5, var(--ruby-hot));
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: slowSheen 4s linear infinite;
}
.antiabout__enter-txt::after {
  content: ""; display: block; height: 2px; margin-top: 0.25em; width: 0;
  background: linear-gradient(90deg, var(--ruby), var(--ruby-hot)); transition: width 0.4s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.antiabout__enter:hover .antiabout__enter-txt::after { width: 100%; }
@keyframes antiEnterPulse {
  0%, 100% { box-shadow: 0 12px 40px rgba(229, 56, 59, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.16) inset; }
  50% { box-shadow: 0 14px 56px rgba(229, 56, 59, 0.85), 0 0 28px rgba(229, 56, 59, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.3) inset; }
}
@media (prefers-reduced-motion: reduce) {
  .antiabout__enter-ic, .antiabout__enter-ic::after, .antiabout__enter-rings::before, .antiabout__enter-rings::after, .antiabout__enter-txt b { animation: none; }
}
@media (max-width: 720px) {
  .antiabout { gap: 0.8rem; bottom: clamp(1.5rem, 5vh, 3rem); }
  .antiabout__points { gap: 0.45rem; }
  .antiabout__icons { gap: 0.5rem; }
  .antiabout__ic { min-width: 4.4rem; padding: 0.5rem; }
}
.command__pitch em {
  color: var(--ruby-hot); font-style: normal;
  font-family: var(--display); padding-right: 0.25em;
}

/* ---------- IN COMMAND mini scroll ---------- */
.command { height: 300vh; position: relative; }
.command__sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: var(--ink);
}
.command__canvas { opacity: 0; }
.command__head {
  position: absolute; z-index: 3;
  top: clamp(4.5rem, 12vh, 7rem); left: clamp(1.2rem, 4vw, 3rem);
  max-width: min(90vw, 46rem);
}
.command__panels {
  position: absolute; z-index: 3;
  left: clamp(1.2rem, 4vw, 3rem); right: clamp(1.2rem, 4vw, 3rem);
  bottom: calc(clamp(4.5rem, 13vh, 7.5rem) + env(safe-area-inset-bottom));
  min-height: 12rem;
}
.command__panel {
  position: absolute; left: 0; bottom: 0;
  max-width: 44rem;
  opacity: 0; transform: translateY(2rem);
  transition: opacity 0.55s ease, transform 0.55s ease;
  pointer-events: none;
  border-left: 3px solid var(--ruby-hot);
  padding-left: clamp(1rem, 2.5vw, 1.8rem);
}
.command__panel.is-active { opacity: 1; transform: none; }
.command__panel a { pointer-events: auto; }
.command__link { color: var(--ruby-hot); border-bottom: 1px solid var(--ruby); white-space: nowrap; }
.command__meta { display: flex; gap: 1rem; align-items: center; }
.command__logo {
  height: 2rem; width: auto;
  background: var(--cream); border-radius: 5px;
  padding: 0.2rem 0.45rem;
}
.command__logo--white { background: #fff; }
.vauntlive__logo { height: 2.6rem; margin-bottom: 1rem; display: block; }
.command__idx { font-family: var(--display); color: var(--ruby-hot); font-size: 1.1rem; }
.command__tag {
  font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--cream-dim);
}
.command__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.6rem);
  text-transform: uppercase; line-height: 1;
  margin-top: 0.6rem;
}
.command__pitch { margin-top: 0.7rem; color: var(--cream-dim); font-size: 0.98rem; max-width: 56ch; }
.command__count {
  position: absolute; z-index: 3;
  right: clamp(1.2rem, 4vw, 3rem);
  bottom: calc(clamp(4.5rem, 13vh, 7.5rem) + env(safe-area-inset-bottom));
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.6vw, 2rem);
  color: var(--cream-dim); letter-spacing: 0.1em;
}

/* ---------- work (legacy card styles kept for reuse) ---------- */
.work { position: relative; overflow: hidden; padding: clamp(5rem, 12vh, 9rem) 0; }
.work__frame {
  position: relative; z-index: 3;
  padding: 0 clamp(1.2rem, 4vw, 3rem);
}
.work__answer {
  margin-top: 1.2rem;
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.4vw, 1.8rem);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--cream-dim);
}
.work__answer em { color: var(--ruby-hot); font-style: normal; }
.work__grid {
  margin-top: clamp(2.5rem, 6vh, 4.5rem);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}
.card {
  position: relative; display: block;
  background: rgba(10, 8, 7, 0.66);
  border: 1px solid rgba(244, 239, 230, 0.12);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  backdrop-filter: blur(6px);
  transform: translateY(0);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.45s, background 0.45s;
  overflow: hidden;
  will-change: transform;
}
.card::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--ruby);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.card:hover { transform: translateY(-10px); border-color: rgba(229, 56, 59, 0.6); background: rgba(18, 13, 12, 0.85); }
.card:hover::after { transform: scaleX(1); }
.card__idx { font-family: var(--display); color: var(--ruby-hot); font-size: 1.1rem; }
.card__tag {
  float: right;
  font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--cream-dim); padding-top: 0.4rem;
}
.card__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  text-transform: uppercase; line-height: 1;
  margin-top: 1.4rem; clear: both;
}
.card__pitch { margin-top: 0.9rem; color: var(--cream-dim); font-size: 0.95rem; min-height: 3em; }
.card__cta {
  display: inline-block; margin-top: 1.4rem;
  font-size: 0.84rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ruby-hot);
}

/* ---------- finale ---------- */
.finale {
  position: relative; z-index: 2;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(193, 18, 31, 0.22), transparent 60%),
    var(--ink);
  padding: clamp(6rem, 18vh, 12rem) 1.5rem;
  text-align: center;
  border-top: 1px solid rgba(244, 239, 230, 0.07);
}
.finale__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(4.5rem, 19vw, 17rem);
  line-height: 0.88; text-transform: uppercase;
}
.finale__title .hero__line--accent .ch { text-shadow: 0 0 110px rgba(229, 56, 59, 0.45); }
.finale__actions {
  margin-top: clamp(2.2rem, 6vh, 4rem);
  display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap;
}
.btn {
  font-family: var(--body); font-weight: 700;
  font-size: 0.9rem; letter-spacing: 0.28em; text-transform: uppercase;
  padding: 1.15em 2.6em; border-radius: 100px;
  display: inline-block;
  /* kill the native <button> chrome so ghost pills aren't system-white */
  background: transparent; border: 1px solid transparent; color: var(--cream);
  cursor: pointer; -webkit-appearance: none; appearance: none;
  text-align: center; text-decoration: none; line-height: 1.1;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s, color 0.3s, box-shadow 0.3s, border-color 0.3s;
  will-change: transform;
}
.btn--ruby {
  background: var(--ruby); color: var(--cream);
  box-shadow: 0 0 50px rgba(193, 18, 31, 0.35);
}
.btn--ruby:hover { background: var(--ruby-hot); box-shadow: 0 0 90px rgba(229, 56, 59, 0.55); }
.btn--ghost {
  border: 1px solid rgba(244, 239, 230, 0.5);
  background: rgba(244, 239, 230, 0.06);
  color: var(--cream);
}
.btn--ghost:hover { border-color: var(--cream); background: rgba(244, 239, 230, 0.14); }

.finale__believe {
  margin-top: 2.2rem;
  font-size: 0.84rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--cream-dim);
}

/* ---------- footer ---------- */
.site-foot {
  position: relative; z-index: 2;
  background: var(--ink-2);
  border-top: 1px solid rgba(244, 239, 230, 0.07);
  padding: clamp(2.5rem, 6vh, 4rem) clamp(1.2rem, 4vw, 3rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}
.site-foot__brand { font-family: var(--display); font-size: 1.6rem; text-transform: uppercase; }
.site-foot__links { display: flex; flex-direction: column; gap: 0.45rem; }
.site-foot__links a {
  font-size: 0.84rem; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--cream-dim); transition: color 0.3s;
}
.site-foot__links a:hover { color: var(--ruby-hot); }
.site-foot__note { font-size: 0.84rem; color: rgba(244, 239, 230, 0.7); letter-spacing: 0.08em; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .pillars__frame { grid-template-columns: 1fr; align-content: center; gap: 2rem; }
  .pillars__head .section-title { font-size: clamp(2.4rem, 10vw, 4rem); }
  .site-head__nav a:not(.head-cta) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .grain, .hud__arrow { animation: none; }
}

/* ---------- song gates (discreet buy links) ---------- */
/* the now-playing bubble: a round icon centered on screen */
.song-gate {
  position: absolute; z-index: 4;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 3.1rem; height: 3.1rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(244, 239, 230, 0.28); border-radius: 50%;
  color: var(--cream); background: rgba(10, 8, 7, 0.62);
  backdrop-filter: blur(5px);
  font-size: 0; text-indent: -9999px; overflow: hidden;
  transition: color 0.3s, border-color 0.3s, transform 0.3s;
}
.song-gate::before {
  content: "\266A"; /* ♪ now playing */
  font-size: 1.3rem; line-height: 1; text-indent: 0;
}
.song-gate:hover { border-color: var(--ruby-hot); transform: translate(-50%, -50%) scale(1.09); }
.song-gate__dot {
  position: absolute; top: 7px; right: 7px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ruby-hot);
  box-shadow: 0 0 10px rgba(229, 56, 59, 0.9);
  animation: pulse-m 0.9s ease-in-out infinite alternate;
}
.stats__own {
  display: block; text-align: center;
  padding: 0 clamp(1.2rem, 4vw, 3rem) clamp(2rem, 4vh, 3rem);
  font-size: 0.78rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--cream-dim); transition: color 0.3s;
}
.stats__own:hover { color: var(--ruby-hot); }
.btn.is-pending { opacity: 0.55; cursor: default; }

/* ---------- song pages ---------- */
.songhero {
  min-height: 88vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 7rem 1.5rem 3rem;
}
/* the record's registry line: credits, length, rights owner */
.songhero__meta {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.5rem 0.6rem;
  margin-top: 1.6rem;
  max-width: min(46rem, 100%);
}
.songhero__meta span {
  font-size: 0.84rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream-dim);
  border: 1px solid rgba(244, 239, 230, 0.16);
  border-radius: 100px;
  padding: 0.34em 0.9em;
  white-space: nowrap;
}
.songhero__meta .is-key { color: var(--ruby-hot); border-color: rgba(193, 18, 31, 0.5); }
.songhero__cat {
  font-size: 0.84rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream);
  border: 1px solid rgba(244, 239, 230, 0.16);
  border-bottom-color: var(--ruby);
  border-radius: 100px;
  padding: 0.34em 0.9em;
  white-space: nowrap;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.songhero__cat:hover { border-color: var(--ruby-hot); color: var(--ruby-hot); }

.songhero__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(3.2rem, 13vw, 10.5rem);
  line-height: 0.92; text-transform: uppercase;
  color: var(--ruby-hot);
  text-shadow: 0 0 110px rgba(229, 56, 59, 0.4);
}
.songhero__sub {
  margin-top: 1.1rem;
  font-size: 0.9rem; letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--cream-dim);
}
.songhero__play { margin-top: 2.4rem; }
.songhero__hint {
  margin-top: 3.5rem;
  font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--cream-dim);
}
/* ============ CATALOGUE: the registered discography ============ */
.catalogue {
  position: relative; z-index: 2;
  background: var(--ink);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.2rem, 4vw, 3rem);
  overflow: clip;
}
.catalogue__head { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.catalogue__list {
  list-style: none;
  border-top: 1px solid rgba(244, 239, 230, 0.12);
}
.catalogue__row a,
.catalogue__rowinner {
  display: grid;
  grid-template-columns: 3rem minmax(0, 2fr) minmax(0, 3fr) 4rem 6rem;
  gap: 1rem; align-items: baseline;
  padding: clamp(1rem, 2.4vw, 1.6rem) 0.4rem;
  border-bottom: 1px solid rgba(244, 239, 230, 0.12);
  transition: background 0.25s ease, padding-left 0.25s ease;
}
.catalogue__album {
  font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ruby-hot);
  padding: 1.4rem 0.4rem 0.5rem; margin-top: 0.4rem;
  border-bottom: 1px solid rgba(229, 56, 59, 0.3);
}
.catalogue__list > .catalogue__album:first-child { padding-top: 0.2rem; }
.catalogue__row a:hover {
  background: rgba(193, 18, 31, 0.08);
  padding-left: 1rem;
}
.catalogue__no {
  font-size: 0.84rem; letter-spacing: 0.18em;
  color: var(--cream-dim);
}
.catalogue__title {
  font-family: var(--display);
  font-size: clamp(1.3rem, 3.2vw, 2.2rem);
  line-height: 1.05; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.catalogue__title em { font-style: normal; color: var(--ruby-hot); }
.catalogue__credit {
  font-size: 0.9rem; color: var(--cream-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.catalogue__len {
  font-size: 0.9rem; letter-spacing: 0.1em; color: var(--cream-dim);
  text-align: right; font-variant-numeric: tabular-nums;
}
.catalogue__own {
  font-size: 0.84rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ruby-hot); text-align: right; white-space: nowrap;
}
.catalogue__row:hover .catalogue__own { color: var(--cream); }
.catalogue__row--soon .catalogue__title,
.catalogue__row--soon .catalogue__credit { opacity: 0.5; }
.catalogue__note {
  margin-top: 1.4rem;
  font-size: 0.9rem; color: var(--cream-dim);
}
@media (max-width: 720px) {
  .catalogue__row a,
  .catalogue__rowinner {
    grid-template-columns: 2.2rem minmax(0, 1fr) 3.4rem;
    row-gap: 0.25rem;
  }
  .catalogue__credit { grid-column: 2; grid-row: 2; }
  .catalogue__own { display: none; }
}

/* the identity registry: every code the catalogue clears through */
.sysid { margin-top: clamp(2rem, 4vw, 3rem); }
.sysid__title {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3.4vw, 2.4rem);
  text-transform: uppercase;
  margin-bottom: 1.6rem;
}
.sysid__cols {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
}
.sysid__card {
  border: 1px solid rgba(244, 239, 230, 0.12);
  border-radius: 10px;
  padding: clamp(1rem, 2.6vw, 1.7rem);
  background: var(--ink-2);
}
.sysid__who {
  font-size: 0.84rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ruby-hot);
  margin-bottom: 1rem;
}
.sysid__sub { color: var(--cream-dim); font-size: 0.9rem; line-height: 1.6; max-width: 60ch; margin-bottom: 1.4rem; }
/* the earned badges, sitting over the info they're backed by */
.sysid__badges {
  display: flex; flex-wrap: wrap; gap: 0.7rem 1rem;
  margin-bottom: 1.1rem; padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(244, 239, 230, 0.14);
}
.sysid__badge {
  position: relative; display: flex; align-items: center; gap: 0.55rem;
  text-decoration: none; color: var(--cream);
  transition: transform 0.2s ease;
}
.sysid__badge .mbadge { width: 2.4em; flex: none; transition: transform 0.2s ease; }
.sysid__badge b { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; line-height: 1.25; }
.sysid__badge:hover { transform: translateY(-2px); }
.sysid__badge:hover .mbadge { transform: scale(1.12); filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.5)); }
.sysid__badge:hover b { color: var(--ruby-hot); }
/* the hover blurb */
.sysid__tip {
  position: absolute; bottom: calc(100% + 0.6rem); left: 0;
  width: max(14rem, 100%); max-width: 20rem; z-index: 20;
  background: rgba(10, 8, 7, 0.97); color: var(--cream-dim);
  border: 1px solid rgba(229, 56, 59, 0.5); border-radius: 10px;
  padding: 0.7rem 0.85rem; font-size: 0.84rem; letter-spacing: 0; text-transform: none; line-height: 1.5;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
}
.sysid__tip em { display: block; margin-top: 0.4rem; color: var(--ruby-hot); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.72rem; }
.sysid__badge:hover .sysid__tip, .sysid__badge:focus-visible .sysid__tip { opacity: 1; visibility: visible; transform: translateY(0); }
.sysid__item {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem;
  padding: 0.45rem 0.3rem;
  border-bottom: 1px dashed rgba(244, 239, 230, 0.1);
  cursor: pointer;
  transition: background 0.2s ease;
}
.sysid__item:last-child { border-bottom: 0; }
.sysid__item:hover { background: rgba(193, 18, 31, 0.1); }
.sysid__item dd { font-size: 0.84rem; color: var(--cream-dim); white-space: nowrap; }
.sysid__item code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9rem; letter-spacing: 0.04em;
  overflow-wrap: anywhere; text-align: right;
}
.sysid__item.is-copied code { color: var(--ruby-hot); }
.sysid__hint { margin-top: 0.9rem; font-size: 0.84rem; color: var(--cream-dim); }

/* cursor light: a soft glow that follows the mouse while a slide is
   tracking it (position + opacity driven by js/parallax.js root vars) */
.command__sticky::after,
.hero__sticky::after,
.songblock__sticky::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    46rem circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(255, 240, 219, 0.09), transparent 62%
  );
  opacity: var(--spot-o, 0);
  mix-blend-mode: screen;
}

/* the paid-call link on the Consultation tile */
.stat__book {
  display: inline-block; margin-top: 0.9rem;
  font-size: 0.9rem; letter-spacing: 0.04em;
  color: var(--ruby-hot); border-bottom: 1px solid var(--ruby);
}
.stat__book.is-pending { opacity: 0.55; }

.songblock { height: 300vh; position: relative; }
/* karaoke: the bar the track is singing right now */
.songblock__line { transition: color 0.3s ease; }
.songblock__line.is-now { color: var(--ruby-hot); }
/* storyboard frames: quicker scroll beats than full film blocks */
.songblock--short { height: 160vh; }
.songblock__sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: var(--ink);
}
.songblock__lyrics {
  position: absolute; z-index: 3;
  left: clamp(1.2rem, 5vw, 4rem); right: clamp(1.2rem, 5vw, 4rem);
  bottom: clamp(2.5rem, 9vh, 5rem);
  max-width: 62rem;
}
.songblock__tag {
  font-size: 0.78rem; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--ruby-hot); margin-bottom: 1rem;
}
.songblock__line {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.6rem, 4.6vw, 3.8rem);
  line-height: 1.04; text-transform: uppercase;
  color: var(--cream);
  will-change: transform, opacity;
}
.songblock__say {
  margin-top: 1.1rem; max-width: 48ch;
  color: var(--cream); font-size: clamp(1rem, 2.4vw, 1.22rem);
  line-height: 1.55; text-transform: none; font-family: inherit; font-weight: 500;
}
.songblock__say--dim { margin-top: 1rem; font-size: 0.95rem; color: var(--cream-dim); }
.songblock__markers--wide { margin-top: 1.3rem; }
.songbuy {
  min-height: 92vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 6rem 1.5rem;
  background: radial-gradient(ellipse at 50% 120%, rgba(193, 18, 31, 0.22), transparent 60%), var(--ink);
}
.songbuy__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(3rem, 12vw, 9rem);
  line-height: 0.9; text-transform: uppercase;
  margin: 1rem 0 2.4rem;
}

.songblock__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; will-change: transform;
}
/* the music-video card: real footage as the block's backdrop */
.songblock__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: #0a0807;
}

/* ---------- phone-width fixes: the header must never wrap, the strips
   must stack, and nothing may collide with the panel text ---------- */
@media (max-width: 720px) {
  .stats__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .site-head { padding: 0.85rem 0.9rem; }
  .site-head__nav { gap: 0.55rem; }
  .brand { font-size: 1.12rem; }
  .sound-toggle, .head-cta {
    font-size: 0.78rem; letter-spacing: 0.16em;
    padding: 0.5em 0.95em;
    white-space: nowrap;
  }
  /* the lyric reel crowds the scroll hint on small screens */
  .hud__reel { display: none; }
  /* the scene counter collides with panel copy — tuck it up by the head */
  .command__count {
    bottom: auto; top: 5.2rem;
    font-size: 1rem;
  }
  /* bubble stays a bubble on mobile */
  .song-gate { width: 2.9rem; height: 2.9rem; }
}

/* ============ M-Verified: badges + the verification application ============ */
/* the seal: our check mark — a scalloped seal in the entity's color
   with the white M inside (mask keeps it one asset, any color) */
.mbadge {
  --badge-c: var(--ruby-hot);
  position: relative; display: inline-block;
  width: 2.6em; aspect-ratio: 1; flex: none;
}
.mbadge::before {
  content: ""; position: absolute; inset: 0;
  background: var(--badge-c);
  -webkit-mask: url("../assets/img/seal.svg") center / contain no-repeat;
  mask: url("../assets/img/seal.svg") center / contain no-repeat;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
}
.mbadge img {
  position: absolute; inset: 26%;
  width: 48%; height: 48%; object-fit: contain;
  filter: brightness(0) invert(1);
}
.mbadge--lg { width: 4.2em; }

/* entity picker cards */
.verify { padding: clamp(7rem, 12vw, 9rem) clamp(1.2rem, 4vw, 3rem) clamp(4rem, 8vw, 6rem); max-width: 68rem; margin: 0 auto; }
.verify__grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  margin: 2rem 0;
}
.entity-card {
  display: flex; align-items: center; gap: 0.9rem;
  text-align: left;
  border: 1px solid rgba(244, 239, 230, 0.14); border-radius: 12px;
  background: var(--ink-2); color: var(--cream);
  padding: 1rem 1.1rem; cursor: pointer;
  font-family: var(--body); font-size: 0.95rem;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.entity-card:hover { transform: translateY(-2px); border-color: var(--badge-c); }
.entity-card.is-active { border-color: var(--badge-c); box-shadow: 0 0 0 1px var(--badge-c), 0 12px 30px rgba(0, 0, 0, 0.35); }
.entity-card__name { font-weight: 700; display: block; }
.entity-card__desc { font-size: 0.84rem; color: var(--cream-dim); display: block; margin-top: 0.15rem; }

/* the application form */
.vform { margin-top: 1.5rem; }
.vform__badgehead { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.vform__badgename { font-family: var(--display); font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.04em; }
.vform fieldset {
  border: 1px solid rgba(244, 239, 230, 0.14); border-radius: 12px;
  background: var(--ink-2);
  padding: clamp(1rem, 2.6vw, 1.6rem); margin-bottom: 1.2rem;
}
.vform legend {
  padding: 0 0.6em; font-size: 0.84rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ruby-hot);
}
.vform__row { display: grid; gap: 0.35rem; margin-bottom: 0.9rem; }
.vform__row:last-child { margin-bottom: 0; }
.vform label { font-size: 0.9rem; color: var(--cream-dim); }
.vform label .req { color: var(--ruby-hot); }
.vform label a { color: var(--ruby-hot); border-bottom: 1px solid var(--ruby); }
.vform input, .vform select, .vform textarea {
  background: var(--ink); color: var(--cream);
  border: 1px solid rgba(244, 239, 230, 0.18); border-radius: 8px;
  padding: 0.65em 0.8em; font-family: var(--body); font-size: 0.95rem;
}
.vform input:focus, .vform select:focus, .vform textarea:focus { outline: 2px solid var(--ruby); outline-offset: 1px; }
.vform input:invalid:not(:placeholder-shown) { border-color: var(--ruby-hot); }
.vform__hint { font-size: 0.84rem; color: var(--cream-dim); }
.vform__error { color: var(--ruby-hot); font-size: 0.9rem; margin-top: 0.8rem; display: none; }
.vform.show-errors .vform__error { display: block; }

/* identifier education cards */
.idcards { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); margin-top: 2rem; }
.idcard {
  border: 1px solid rgba(244, 239, 230, 0.14); border-radius: 12px;
  background: var(--ink-2); padding: clamp(1rem, 2.4vw, 1.5rem);
}
.idcard h3 { font-family: var(--display); font-size: 1.25rem; letter-spacing: 0.03em; text-transform: uppercase; }
.idcard__long { font-size: 0.84rem; color: var(--ruby-hot); letter-spacing: 0.06em; margin-bottom: 0.6rem; }
.idcard p { font-size: 0.88rem; color: var(--cream-dim); }
.idcard__meta { margin-top: 0.8rem; font-size: 0.84rem; color: var(--cream-dim); }
.idcard__meta code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--cream); }
.idcard__meta a { color: var(--ruby-hot); border-bottom: 1px solid var(--ruby); }
.badge-legend { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; margin: 1.6rem 0; }
.badge-legend__item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--cream-dim); }

/* ============ the intake interview: one question at a time ============ */
.chat { max-width: 46rem; margin: 0 auto; padding: clamp(6.5rem, 11vw, 8.5rem) 1.2rem 6rem; }
.chat__progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 150; background: rgba(244, 239, 230, 0.08); }
.chat__progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ruby), var(--ruby-hot)); transition: width 0.4s ease; }
.chat__log { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1.4rem; }
.chat__msg { max-width: 85%; padding: 0.8em 1.1em; border-radius: 14px; font-size: 0.95rem; line-height: 1.45; }
.chat__msg--q { align-self: flex-start; background: var(--ink-2); border: 1px solid rgba(244, 239, 230, 0.12); border-bottom-left-radius: 4px; }
.chat__msg--q .chat__group { display: block; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ruby-hot); margin-bottom: 0.3rem; }
.chat__msg--a { align-self: flex-end; background: var(--ruby); border-bottom-right-radius: 4px; color: #fff; }
.chat__msg--a .chat__edit { display: inline-block; margin-left: 0.6em; font-size: 0.84rem; opacity: 0.75; border-bottom: 1px solid rgba(255,255,255,0.5); cursor: pointer; }
.chat__input { display: flex; flex-direction: column; gap: 0.7rem; }
.chat__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chat__chip {
  border: 1px solid rgba(244, 239, 230, 0.25); border-radius: 100px;
  background: none; color: var(--cream); cursor: pointer;
  padding: 0.55em 1.1em; font-family: var(--body); font-size: 0.9rem;
  transition: border-color 0.2s, background 0.2s;
}
.chat__chip:hover { border-color: var(--ruby-hot); }
.chat__chip.is-picked { background: var(--ruby); border-color: var(--ruby); color: #fff; }
.chat__free { display: flex; gap: 0.5rem; }
.chat__free input, .chat__free textarea {
  flex: 1; background: var(--ink-2); color: var(--cream);
  border: 1px solid rgba(244, 239, 230, 0.2); border-radius: 10px;
  padding: 0.75em 0.9em; font-family: var(--body); font-size: 1rem;
}
.chat__free input:focus, .chat__free textarea:focus { outline: 2px solid var(--ruby); }
.chat__mic {
  flex: none; width: 2.9rem; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(244, 239, 230, 0.2); background: var(--ink-2);
  color: var(--cream); font-size: 1.1rem;
}
.chat__mic.is-live { background: var(--ruby); border-color: var(--ruby-hot); animation: loadFlash 0.6s steps(2) infinite; }
.chat__actions { display: flex; align-items: center; gap: 1rem; }
.chat__skip, .chat__back { font-size: 0.84rem; color: var(--cream-dim); border-bottom: 1px dashed rgba(244, 239, 230, 0.3); cursor: pointer; background: none; border-top: 0; border-left: 0; border-right: 0; font-family: var(--body); padding: 0; }
.chat__hint { font-size: 0.84rem; color: var(--cream-dim); }
.chat__review { border: 1px solid rgba(244, 239, 230, 0.14); border-radius: 12px; background: var(--ink-2); padding: 1.2rem; }
.chat__review h3 { font-family: var(--display); text-transform: uppercase; margin-bottom: 0.8rem; }
.chat__review dl { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: 0.35rem 1rem; font-size: 0.9rem; }
.chat__review dt { color: var(--cream-dim); }
.chat__review dd { overflow-wrap: anywhere; }

/* ============ Equity Uprise: the fellowship terminal ============ */
.term { --tg: #7ce38b; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.term .chat__msg--q { background: #05070a; border-color: rgba(124, 227, 139, 0.25); color: var(--tg); }
.term .chat__msg--q .chat__group { color: var(--ruby-hot); }
.term .chat__msg--q::before { content: "> "; color: var(--ruby-hot); }
.term .chat__msg--a { background: #101d13; border: 1px solid rgba(124, 227, 139, 0.35); color: #d9ffe0; }
.term .chat__chip { border-color: rgba(124, 227, 139, 0.35); color: var(--tg); font-family: inherit; }
.term .chat__chip.is-picked, .term .chat__chip:hover { border-color: var(--tg); }
.term .chat__chip.is-picked { background: rgba(124, 227, 139, 0.16); color: #d9ffe0; }
.term .chat__free input, .term .chat__free textarea {
  background: #05070a; border-color: rgba(124, 227, 139, 0.3); color: var(--tg);
  font-family: inherit; caret-color: var(--tg);
}
.term .chat__review { background: #05070a; border-color: rgba(124, 227, 139, 0.25); color: var(--tg); }
.manifesto {
  max-width: 46rem; margin: 0 auto;
  padding: clamp(7rem, 12vw, 9rem) 1.2rem 0;
}
.manifesto__title { font-family: var(--display); font-size: clamp(2.6rem, 9vw, 5rem); text-transform: uppercase; line-height: 0.95; }
.manifesto__title em { font-style: normal; color: var(--ruby-hot); }
.manifesto p { margin-top: 1.1rem; color: var(--cream-dim); font-size: 1rem; line-height: 1.65; }
.manifesto p strong { color: var(--cream); }
.manifesto__rule { margin-top: 2rem; border: 0; border-top: 1px dashed rgba(124, 227, 139, 0.35); }
.manifesto__boot {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: #7ce38b; font-size: 0.9rem; letter-spacing: 0.06em;
  margin-top: 1.6rem;
}
.manifesto__boot::after { content: "▮"; animation: loadFlash 1s steps(2) infinite; }

/* ============ Service Network panels: genre effects ============ */
/* PHOTO — the strobe: a camera flash pops across the panel, the link
   sits inside viewfinder brackets that snap to focus */
.panel-fx--photo .command__pitch { position: relative; }
.panel-fx--photo .command__pitch::after {
  content: ""; position: absolute; inset: -0.6rem -0.8rem;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), transparent 70%);
  opacity: 0; pointer-events: none; mix-blend-mode: screen;
  animation: fxFlash 4.6s ease-out infinite;
}
@keyframes fxFlash {
  0%, 88%, 100% { opacity: 0; }
  90% { opacity: 0.85; }
  93% { opacity: 0.1; }
  95% { opacity: 0.35; }
}
.panel-fx--photo:hover .command__pitch::after { animation-duration: 1.4s; }
.vf-link {
  position: relative; display: inline-block;
  margin-top: 0.5rem; padding: 0.3em 0.8em;
  color: var(--cream); white-space: nowrap;
}
.vf-link i {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--ruby-hot), var(--ruby-hot)) top left / 12px 2px,
    linear-gradient(var(--ruby-hot), var(--ruby-hot)) top left / 2px 12px,
    linear-gradient(var(--ruby-hot), var(--ruby-hot)) top right / 12px 2px,
    linear-gradient(var(--ruby-hot), var(--ruby-hot)) top right / 2px 12px,
    linear-gradient(var(--ruby-hot), var(--ruby-hot)) bottom left / 12px 2px,
    linear-gradient(var(--ruby-hot), var(--ruby-hot)) bottom left / 2px 12px,
    linear-gradient(var(--ruby-hot), var(--ruby-hot)) bottom right / 12px 2px,
    linear-gradient(var(--ruby-hot), var(--ruby-hot)) bottom right / 2px 12px;
  background-repeat: no-repeat;
  animation: fxFocus 2.6s ease-in-out infinite;
}
@keyframes fxFocus {
  0%, 100% { transform: scale(1.14); opacity: 0.45; }
  50% { transform: scale(1); opacity: 1; }
}
.vf-link:hover i { animation-duration: 0.9s; }

/* SOUND — the meters: a REC dot pulses on the tag, EQ bars dance
   beside a link underlined by a moving waveform */
.rec-dot {
  display: inline-block; width: 0.55em; height: 0.55em;
  border-radius: 50%; background: var(--ruby-hot);
  margin-right: 0.55em; vertical-align: 0.05em;
  animation: loadFlash 1.1s steps(2) infinite;
}
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 0.95em; margin: 0 0.5em 0 0.1em; vertical-align: -0.12em; }
.eq i {
  width: 3px; background: var(--ruby-hot); border-radius: 1px;
  animation: fxEq 0.9s ease-in-out infinite alternate;
}
.eq i:nth-child(1) { height: 45%; animation-delay: 0s; }
.eq i:nth-child(2) { height: 90%; animation-delay: 0.12s; }
.eq i:nth-child(3) { height: 60%; animation-delay: 0.24s; }
.eq i:nth-child(4) { height: 100%; animation-delay: 0.06s; }
.eq i:nth-child(5) { height: 70%; animation-delay: 0.18s; }
@keyframes fxEq { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }
.panel-fx--sound:hover .eq i { animation-duration: 0.35s; }
.eq-link {
  color: var(--cream); white-space: nowrap;
  background: linear-gradient(90deg, var(--ruby-hot) 0 2px, transparent 2px 6px) repeat-x bottom / 6px 2px;
  padding-bottom: 0.25em;
  animation: fxTape 1.2s linear infinite;
}
@keyframes fxTape { from { background-position-x: 0; } to { background-position-x: 6px; } }

/* LIVE — the broadcast: an on-air bug, RGB-split glitch bursts, and a
   GO LIVE button that jolts like a hot signal. Overdone on purpose. */
.live-bug {
  display: inline-block; background: var(--ruby); color: #fff;
  font-size: 0.66em; letter-spacing: 0.22em; font-weight: 700;
  border-radius: 4px; padding: 0.25em 0.6em; vertical-align: 0.15em;
  animation: loadFlash 0.9s steps(2) infinite;
  text-decoration: none; cursor: pointer; transition: box-shadow 0.25s;
}
.live-bug:hover { box-shadow: 0 0 16px rgba(229, 56, 59, 0.7); }
.glitch-text { position: relative; display: inline; }
.glitch-text::before, .glitch-text::after {
  content: attr(data-text);
  position: absolute; inset: 0; overflow: hidden;
  opacity: 0; pointer-events: none;
}
.glitch-text::before { color: #29e3ff; transform: translate(-2px, -1px); }
.glitch-text::after { color: var(--ruby-hot); transform: translate(2px, 1px); }
.panel-fx--live .glitch-text::before { animation: fxGlitch 3.4s steps(1) infinite; }
.panel-fx--live .glitch-text::after { animation: fxGlitch 3.4s steps(1) infinite 0.05s; }
@keyframes fxGlitch {
  0%, 87%, 94%, 100% { opacity: 0; clip-path: none; }
  88% { opacity: 0.8; clip-path: inset(10% 0 55% 0); }
  90% { opacity: 0.8; clip-path: inset(60% 0 15% 0); }
  92% { opacity: 0.8; clip-path: inset(30% 0 35% 0); }
}
.panel-fx--live:hover .glitch-text::before,
.panel-fx--live:hover .glitch-text::after { animation-duration: 0.7s; }
.live-link {
  display: inline-block; margin-top: 0.55rem;
  background: var(--ruby); color: #fff; font-weight: 700;
  letter-spacing: 0.14em; white-space: nowrap;
  border-radius: 6px; padding: 0.45em 1em;
  box-shadow: 0 0 18px rgba(229, 56, 59, 0.55);
  animation: fxJolt 3.4s linear infinite;
}
@keyframes fxJolt {
  0%, 86%, 96%, 100% { transform: translate(0, 0); }
  88% { transform: translate(-2px, 1px); }
  90% { transform: translate(2px, -1px); }
  92% { transform: translate(-1px, -1px); }
  94% { transform: translate(1px, 1px); }
}
.live-link:hover { background: var(--ruby-hot); }
@media (prefers-reduced-motion: reduce) {
  .panel-fx--photo .command__pitch::after, .vf-link i, .eq i, .eq-link,
  .rec-dot, .live-bug, .glitch-text::before, .glitch-text::after, .live-link { animation: none; }
}

/* network page skins: the flash and the meters follow their genre */
.net--photo { overflow: clip; }
.net--photo .section-title { position: relative; }
.net--photo .section-title::after {
  content: ""; position: absolute; inset: -1rem -2rem;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), transparent 70%);
  opacity: 0; pointer-events: none; mix-blend-mode: screen;
  animation: fxFlash 5s ease-out infinite;
}
.net--sound .section-title { border-left: 4px solid var(--ruby-hot); padding-left: 0.4em; animation: fxMeterEdge 1.1s ease-in-out infinite alternate; }
@keyframes fxMeterEdge { from { border-color: var(--ruby); } to { border-color: var(--ruby-hot); } }
@media (prefers-reduced-motion: reduce) { .net--photo .section-title::after, .net--sound .section-title { animation: none; } }

/* ============ the psychology layer: shimmering annotations + the card ============ */
.psy {
  font-style: normal; cursor: pointer;
  background: linear-gradient(90deg, var(--ruby-hot), var(--cream), var(--ruby-hot)) 0 100% / 200% 2px no-repeat;
  padding-bottom: 0.06em;
  animation: psyShimmer 2.8s linear infinite;
  transition: color 0.25s ease;
}
.psy::after {
  content: "?"; display: inline-block;
  font-size: 0.45em; vertical-align: super; margin-left: 0.25em;
  width: 1.5em; height: 1.5em; line-height: 1.55em; text-align: center;
  border: 1px solid var(--ruby-hot); border-radius: 50%;
  color: var(--ruby-hot);
  animation: psyPing 2.8s ease-in-out infinite;
}
@keyframes psyShimmer { from { background-position-x: 200%; } to { background-position-x: 0%; } }
@keyframes psyPing { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.25); opacity: 1; } }
.psy:hover { color: var(--ruby-hot); }

.psycard {
  position: fixed; z-index: 170;
  right: clamp(0.8rem, 3vw, 2rem); top: calc(4.2rem + env(safe-area-inset-top));
  width: min(16.5rem, calc(100vw - 1.6rem));
  background: rgba(10, 8, 7, 0.96);
  border: 1px solid rgba(229, 56, 59, 0.5); border-radius: 14px;
  padding: 0.9rem 1rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), 0 0 24px rgba(193, 18, 31, 0.25);
  transform: translateY(16px); opacity: 0; visibility: hidden;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
}
.psycard.is-open { transform: none; opacity: 1; visibility: visible; }
.psycard__x {
  position: absolute; top: 0.5rem; right: 0.7rem;
  background: none; border: 0; color: var(--cream-dim);
  font-size: 1.3rem; cursor: pointer; line-height: 1;
}
.psycard__kicker { font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ruby-hot); margin-bottom: 0.3rem; }
.psycard h4 { font-family: var(--display); font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.4rem; }
.psycard__body { font-size: 0.84rem; color: var(--cream-dim); line-height: 1.5; }
.psycard__quiz { margin-top: 0.8rem; border-top: 1px dashed rgba(244, 239, 230, 0.18); padding-top: 0.8rem; }
.psycard__quiz p { font-size: 0.9rem; margin-bottom: 0.55rem; }
.psycard__opts { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.psycard__opts .chat__chip { font-size: 0.84rem; padding: 0.45em 0.95em; }
.psycard__resp { color: var(--ruby-hot); font-size: 0.9rem; }
.psycard__foot { margin-top: 0.7rem; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244, 239, 230, 0.7); }

/* the sound toggle calls for its first tap: radiating ring until used */
.sound-toggle:not(.is-on):not(.was-used) { position: relative; animation: sndNudge 3.2s ease-in-out infinite; }
.sound-toggle:not(.is-on):not(.was-used)::after {
  content: ""; position: absolute; inset: -3px;
  border: 1px solid var(--ruby-hot); border-radius: 100px;
  animation: sndRing 1.8s ease-out infinite; pointer-events: none;
}
.sound-toggle:not(.is-on):not(.was-used) .sound-toggle__dot { background: var(--ruby-hot); animation: loadFlash 1.2s steps(2) infinite; }
@keyframes sndRing { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.45); opacity: 0; } }
@keyframes sndNudge { 0%, 90%, 100% { transform: rotate(0); } 92% { transform: rotate(-2.5deg); } 95% { transform: rotate(2.5deg); } 97% { transform: rotate(-1.5deg); } }
/* the "Tap for sound" micro-label — rides under the button until the first tap */
.sound-toggle__tip {
  position: absolute; top: calc(100% + 0.45rem); left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ruby-hot); white-space: nowrap;
  opacity: 0; pointer-events: none;
}
.sound-toggle:not(.is-on):not(.was-used) { position: relative; }
.sound-toggle:not(.is-on):not(.was-used) .sound-toggle__tip { animation: sndTip 3.2s ease-in-out infinite; }
@keyframes sndTip { 0%, 12%, 100% { opacity: 0; transform: translate(-50%, -3px); } 25%, 80% { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) {
  .psy, .psy::after, .sound-toggle::after, .sound-toggle, .sound-toggle__tip { animation: none !important; }
  .sound-toggle:not(.is-on):not(.was-used) .sound-toggle__tip { opacity: 1; }
}

/* ============ services copy: the punch tag + the mystery line ============ */
.command__punch {
  font-family: var(--display);
  font-size: clamp(1.3rem, 3vw, 2rem);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ruby-hot);
  animation: punchPulse 2.4s ease-in-out infinite;
  display: inline-block;
}
@keyframes punchPulse { 0%, 100% { transform: scale(1); text-shadow: none; } 50% { transform: scale(1.04); text-shadow: 0 0 18px rgba(229, 56, 59, 0.55); } }
@media (prefers-reduced-motion: reduce) { .command__punch { animation: none; } }
.command__link--mystery {
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom-style: dashed;
  animation: psyShimmer 2.8s linear infinite;
  background: linear-gradient(90deg, var(--ruby-hot), var(--cream), var(--ruby-hot)) 0 100% / 200% 1px no-repeat;
}
@media (prefers-reduced-motion: reduce) { .command__tag--punch, .command__link--mystery { animation: none; } }

/* ============ the bio: the director between the orbit and the network ============ */
.bio {
  background: var(--ink); position: relative;
  padding: clamp(3rem, 7vh, 5rem) clamp(1.2rem, 5vw, 4rem);
}
.bio__inner { max-width: 62rem; margin: 0 auto; }
.bio__name {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.4rem, 6.5vw, 4.6rem);
  text-transform: uppercase; line-height: 0.95;
  margin-top: 0.5rem;
}
.bio__lede {
  margin-top: 0.7rem;
  font-family: var(--display); font-size: clamp(1rem, 2.2vw, 1.4rem);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ruby-hot);
}
.bio__body { margin-top: 0.9rem; color: var(--cream-dim); font-size: 0.96rem; line-height: 1.75; max-width: 62ch; }
.bio__body em { color: var(--cream); font-style: italic; }

/* proof links — every claim in the intro links to its evidence, and each one
   carries its own original, extremely-subtle animated gradient underline */
.bio__body .proof {
  color: var(--cream); text-decoration: none;
  background-repeat: no-repeat; background-position: 0 100%;
  background-size: 100% 1.5px; padding-bottom: 2px;
  transition: color 0.45s ease, background-size 0.45s ease;
  cursor: pointer;
}
.bio__body .proof:hover { color: #fff; background-size: 100% 2.5px; }
@media (prefers-reduced-motion: no-preference) {
  /* 1 · McCluster Corp — ruby↔cream shimmer drifting left, very slow */
  .proof--1 { background-image: linear-gradient(90deg, var(--ruby), var(--cream), var(--ruby)); background-size: 220% 1.5px; animation: proof1 9s linear infinite; }
  @keyframes proof1 { to { background-position: -220% 100%; } }
  /* 2 · Equity Uprise — faint gold sweep, right→left */
  .proof--2 { background-image: linear-gradient(90deg, transparent 15%, #d4a017, transparent 85%); background-size: 240% 1.5px; animation: proof2 12s linear infinite; }
  @keyframes proof2 { from { background-position: 140% 100%; } to { background-position: -140% 100%; } }
  /* 3 · State of Georgia — barely-there glow breath under a steady line */
  .proof--3 { background-image: linear-gradient(90deg, #4a7fb5, #4a7fb5); animation: proof3 7.5s ease-in-out infinite; }
  @keyframes proof3 { 0%, 100% { text-shadow: none; } 50% { text-shadow: 0 0 7px rgba(74, 127, 181, 0.4); } }
  /* 4 · City of Bridgeport — violet→cream sweep, left→right, slower */
  .proof--4 { background-image: linear-gradient(90deg, transparent 12%, #8b5cf6, var(--cream), transparent 88%); background-size: 260% 1.5px; animation: proof4 14s linear infinite; }
  @keyframes proof4 { from { background-position: -160% 100%; } to { background-position: 160% 100%; } }
  /* 5 · Whip Equipped — slow ruby↔steel hue drift, easing back and forth */
  .proof--5 { background-image: linear-gradient(90deg, var(--ruby), #2aa8a0, var(--ruby)); background-size: 220% 1.5px; animation: proof5 16s ease-in-out infinite alternate; }
  @keyframes proof5 { to { background-position: 220% 100%; } }
  /* 6 · Fireside — a faint warm wash breathing behind the words */
  .proof--6 { background-image: linear-gradient(90deg, rgba(229, 56, 59, 0), rgba(229, 56, 59, 0.16), rgba(229, 56, 59, 0)); background-size: 240% 100%; padding: 0 0.15em 2px; border-radius: 3px; animation: proof6 10s linear infinite; }
  @keyframes proof6 { to { background-position: -240% 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .bio__body .proof { background-image: linear-gradient(90deg, var(--ruby), var(--ruby)); }
}
/* the character sheet: quest log + stat bars */
.bio__grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); margin-top: 1.6rem; align-items: start; }
.bio__h {
  font-size: 0.78rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ruby-hot); margin: 1.1rem 0 0.6rem;
}
.bio__grid .bio__h:first-child { margin-top: 0; }
.bio__ledger--stack { flex-direction: column; margin-top: 0; }
.bio__ledger--stack li { flex: none; }
.bio__achv { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.bio__achv li {
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid var(--ruby); border-radius: 100px;
  padding: 0; color: var(--cream);
  background: rgba(193, 18, 31, 0.12);
  transition: background 0.2s ease;
}
.bio__achv li { padding: 0.45em 1em; }
.bio__achv li:has(a) { padding: 0; }
.bio__achv a { display: block; padding: 0.45em 1em; color: var(--cream); text-decoration: none; }
.bio__achv li:hover:has(a) { background: var(--ruby); }
.bio__achv a:hover { color: var(--cream); }
.bio__stats {
  border: 1px solid rgba(244, 239, 230, 0.14); border-radius: 14px;
  background: var(--ink-2); padding: 1.3rem 1.4rem;
}
.bio__stat { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.7rem; align-items: center; margin-bottom: 0.75rem; }
.bio__stat span { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-dim); grid-column: 1; }
.bio__stat em { font-family: var(--display); font-style: normal; font-size: 1.05rem; color: var(--ruby-hot); grid-column: 2; grid-row: 1 / 3; align-self: center; }
.bio__stat i {
  grid-column: 1; display: block; height: 8px; border-radius: 100px;
  background: rgba(244, 239, 230, 0.1); overflow: hidden;
}
.bio__stat b {
  display: block; height: 100%; width: 0; border-radius: 100px;
  background: linear-gradient(90deg, var(--ruby), var(--ruby-hot));
  box-shadow: 0 0 10px rgba(229, 56, 59, 0.55);
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.bio__stats.is-on .bio__stat b { width: var(--v); }
.bio__stats.is-on .bio__stat:nth-child(2) b { transition-delay: 0.05s; }
.bio__stats.is-on .bio__stat:nth-child(3) b { transition-delay: 0.1s; }
.bio__stats.is-on .bio__stat:nth-child(4) b { transition-delay: 0.15s; }
.bio__stats.is-on .bio__stat:nth-child(5) b { transition-delay: 0.2s; }
.bio__stats.is-on .bio__stat:nth-child(6) b { transition-delay: 0.25s; }
.bio__stats.is-on .bio__stat:nth-child(7) b { transition-delay: 0.3s; }
.bio__stats.is-on .bio__stat:nth-child(8) b { transition-delay: 0.35s; }
.bio__stats.is-on .bio__stat:nth-child(9) b { transition-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) { .bio__stat b { transition: none; } }
.bio__class { margin-top: 1.1rem; font-size: 0.84rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-dim); line-height: 1.9; }

.bio__ledger { list-style: none; display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }
.bio__ledger li {
  border: 1px solid rgba(244, 239, 230, 0.14); border-left: 3px solid var(--ruby-hot);
  border-radius: 10px; background: var(--ink-2);
  padding: 0.9rem 1.1rem; flex: 1 1 15rem;
}
.bio__ledger b { display: block; font-family: var(--display); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; font-size: 1rem; }
.bio__ledger span { display: block; margin-top: 0.3rem; color: var(--cream-dim); font-size: 0.84rem; letter-spacing: 0.08em; }
/* the quest log runs tight — it's a list, not a set of cards */
.bio__ledger--stack { gap: 0.35rem; }
.bio__ledger--stack li { padding: 0.4rem 0.75rem; border-radius: 7px; border-top: 0; border-right: 0; border-bottom: 0; background: none; }
.bio__ledger--stack b { font-size: 0.84rem; }
.bio__ledger--stack span { margin-top: 0.1rem; font-size: 0.78rem; }

/* the experience timeline: a clean vertical rail, each role its own page */
.bio__timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid rgba(229, 56, 59, 0.5); }
.bio__timeline li { position: relative; }
.bio__timeline a {
  display: block; text-decoration: none; color: var(--cream);
  padding: 0.5rem 0.5rem 0.7rem 1.1rem; position: relative;
  transition: background 0.2s ease, padding-left 0.2s ease;
  border-radius: 0 8px 8px 0;
}
.bio__timeline a:hover { background: rgba(193, 18, 31, 0.08); padding-left: 1.35rem; }
.bio__tldot {
  position: absolute; left: -7px; top: 0.85rem;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--ruby-hot);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.bio__timeline a:hover .bio__tldot { background: var(--ruby-hot); box-shadow: 0 0 12px rgba(229, 56, 59, 0.9); }
/* each node flashes white in a wave down the timeline */
@keyframes tlFlashWhite {
  0%, 88%, 100% { box-shadow: 0 0 0 rgba(255, 255, 255, 0); border-color: var(--ruby-hot); }
  94% { box-shadow: 0 0 14px 3px rgba(255, 255, 255, 0.95); border-color: #fff; background: #fff; }
}
.bio__timeline .bio__tldot { animation: tlFlashWhite 5.5s ease-in-out infinite; }
.bio__timeline li:nth-child(1) .bio__tldot { animation-delay: 0s; }
.bio__timeline li:nth-child(2) .bio__tldot { animation-delay: 0.28s; }
.bio__timeline li:nth-child(3) .bio__tldot { animation-delay: 0.56s; }
.bio__timeline li:nth-child(4) .bio__tldot { animation-delay: 0.84s; }
.bio__timeline li:nth-child(5) .bio__tldot { animation-delay: 1.12s; }
.bio__timeline li:nth-child(6) .bio__tldot { animation-delay: 1.4s; }
.bio__timeline li:nth-child(7) .bio__tldot { animation-delay: 1.68s; }
.bio__timeline li:nth-child(8) .bio__tldot { animation-delay: 1.96s; }
.bio__timeline li:nth-child(9) .bio__tldot { animation-delay: 2.24s; }
.bio__timeline li:nth-child(10) .bio__tldot { animation-delay: 2.52s; }
.bio__timeline li:nth-child(11) .bio__tldot { animation-delay: 2.8s; }
.bio__timeline li:nth-child(12) .bio__tldot { animation-delay: 3.08s; }
.bio__timeline li:nth-child(13) .bio__tldot { animation-delay: 3.36s; }
.bio__timeline li:nth-child(14) .bio__tldot { animation-delay: 3.64s; }
.bio__timeline a:hover .bio__tldot { animation: none; }
@media (prefers-reduced-motion: reduce) { .bio__timeline .bio__tldot { animation: none; } }
.bio__timeline b { display: block; font-family: var(--display); font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.9rem; line-height: 1.2; }
.bio__tlorg { display: block; margin-top: 0.15rem; color: var(--cream-dim); font-size: 0.78rem; letter-spacing: 0.08em; }
.bio__tlgo { display: block; margin-top: 0.3rem; font-style: normal; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ruby-hot); opacity: 0; transition: opacity 0.2s ease; }
.bio__timeline a:hover .bio__tlgo, .bio__timeline a:focus-visible .bio__tlgo { opacity: 1; }
@media (hover: none) { .bio__tlgo { opacity: 1; } }

/* ============ the Equity Uprise logo: kill the white chip, keep it for Vaunt ============ */
.command__logo--transparent { background: transparent; padding: 0; border-radius: 0; }

/* ============ Equity Uprise platform CTAs ============ */
/* the two portals: terminal (computer) left, evidence room (safe) right */
.eu-portals {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem 1.5rem; flex-wrap: wrap; margin-top: 1rem; max-width: 46rem; pointer-events: auto;
}
.eu-portal {
  display: inline-flex; align-items: center; gap: 0.55em; text-decoration: none;
  color: var(--cream); font-family: var(--display); font-weight: 400;
  font-size: clamp(1rem, 2.6vw, 1.35rem); letter-spacing: 0.03em; text-transform: uppercase;
  text-shadow: 0 0 12px rgba(229, 56, 59, 0.55), 0 0 26px rgba(229, 56, 59, 0.28);
  transition: color 0.25s, text-shadow 0.25s, transform 0.25s;
  animation: euPortalGlow 2.2s ease-in-out infinite;
}
.eu-portal--safe { flex-direction: row-reverse; }
.eu-portal:hover { color: #fff; text-shadow: 0 0 20px rgba(229, 56, 59, 0.95), 0 0 40px rgba(229, 56, 59, 0.5); transform: scale(1.04); }
.eu-portal__ic {
  width: clamp(1.7rem, 5.5vw, 2.4rem); height: clamp(1.7rem, 5.5vw, 2.4rem);
  color: var(--ruby-hot); flex: none;
  filter: drop-shadow(0 0 6px rgba(229, 56, 59, 0.85));
  animation: euPortalFlash 1.3s steps(1, end) infinite;
}
.eu-portal--safe .eu-portal__ic { animation-delay: 0.65s; }
@keyframes euPortalFlash {
  0%, 54% { opacity: 1; filter: drop-shadow(0 0 9px rgba(229, 56, 59, 0.95)); }
  55%, 100% { opacity: 0.4; filter: drop-shadow(0 0 2px rgba(229, 56, 59, 0.35)); }
}
@keyframes euPortalGlow {
  0%, 100% { text-shadow: 0 0 12px rgba(229, 56, 59, 0.5), 0 0 26px rgba(229, 56, 59, 0.22); }
  50% { text-shadow: 0 0 18px rgba(229, 56, 59, 0.9), 0 0 38px rgba(229, 56, 59, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .eu-portal, .eu-portal__ic { animation: none; }
}

.eu-ctas { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.9rem; pointer-events: auto; }
.eu-ctas a {
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cream-dim);
  border: 1px solid rgba(244, 239, 230, 0.22); border-radius: 100px;
  padding: 0.45em 1em;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.eu-ctas a:hover { color: var(--cream); border-color: var(--ruby); background: rgba(193, 18, 31, 0.18); }

/* ============ the badge sets on the loadout panels ============ */
.mbadge-set {
  display: flex; flex-wrap: wrap; gap: 0.55rem 0.7rem;
  margin-top: 1rem; max-width: 34rem;
  pointer-events: auto;
}
.mbadge-set:empty { display: none; }
.mbadge-set .mbadge-chip {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  width: 4.4rem; padding: 0.2rem 0; text-align: center; text-decoration: none;
  opacity: 0; transform: translateY(12px);
  transition: transform 0.25s ease;
}
.mbadge-set .mbadge-chip .mbadge { width: 2.7em; }
.mbadge-set .mbadge-chip small {
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cream-dim); line-height: 1.3;
}
/* org-type chips: fewer, bigger — the seals carry the panel */
.mbadge-set .mbadge-chip--org { width: 7.2rem; }
.mbadge-set .mbadge-chip--org .mbadge { width: 3.2em; }
.mbadge-set .mbadge-chip--org small { font-size: 0.72rem; }

/* the standing highlight after the entrance: a slow ruby breath, one chip at a time */
.command__panel.is-active .mbadge-chip .mbadge { animation: badgeBreathe 6s ease-in-out infinite; }
.command__panel.is-active .mbadge-chip:nth-child(2n) .mbadge { animation-delay: 1.5s; }
.command__panel.is-active .mbadge-chip:nth-child(3n) .mbadge { animation-delay: 3s; }
.command__panel.is-active .mbadge-chip:nth-child(5n) .mbadge { animation-delay: 4.5s; }
@keyframes badgeBreathe { 0%, 88%, 100% { transform: scale(1); } 94% { transform: scale(1.14); } }
.mbadge-set .mbadge-chip:hover { transform: translateY(-3px) scale(1.12); }
.mbadge-set .mbadge-chip:hover small { color: var(--cream); }
/* rise in when the panel takes the stage, staggered, then the seal flashes */
.command__panel.is-active .mbadge-chip { animation: badgeRise 0.5s ease forwards; }
.command__panel.is-active .mbadge-chip .mbadge::before { animation: badgeSealFlash 0.9s ease 1; }
.command__panel.is-active .mbadge-chip:nth-child(1) { animation-delay: 0.05s; }
.command__panel.is-active .mbadge-chip:nth-child(2) { animation-delay: 0.1s; }
.command__panel.is-active .mbadge-chip:nth-child(3) { animation-delay: 0.15s; }
.command__panel.is-active .mbadge-chip:nth-child(4) { animation-delay: 0.2s; }
.command__panel.is-active .mbadge-chip:nth-child(5) { animation-delay: 0.25s; }
.command__panel.is-active .mbadge-chip:nth-child(6) { animation-delay: 0.3s; }
.command__panel.is-active .mbadge-chip:nth-child(7) { animation-delay: 0.35s; }
.command__panel.is-active .mbadge-chip:nth-child(8) { animation-delay: 0.4s; }
.command__panel.is-active .mbadge-chip:nth-child(9) { animation-delay: 0.45s; }
.command__panel.is-active .mbadge-chip:nth-child(10) { animation-delay: 0.5s; }
@keyframes badgeRise { to { opacity: 1; transform: none; } }
@keyframes badgeSealFlash { 0% { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55)); } 45% { filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.75)); } 100% { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55)); } }
/* the ruby scan line sweeping the whole set once it lands */
.mbadge-set { position: relative; overflow: hidden; }
.command__panel.is-active .mbadge-set::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -12%;
  width: 8%;
  background: linear-gradient(90deg, transparent, rgba(229, 56, 59, 0.35), transparent);
  animation: badgeScan 1.2s ease 0.55s 1 forwards;
}
@keyframes badgeScan { to { left: 108%; } }
@media (prefers-reduced-motion: reduce) {
  .mbadge-set .mbadge-chip { opacity: 1; transform: none; animation: none !important; }
  .command__panel.is-active .mbadge-set::after { display: none; }
}

/* ============ badge explainer page ============ */
.bexp { padding: clamp(7rem, 12vw, 9rem) clamp(1.2rem, 4vw, 3rem) clamp(4rem, 8vw, 6rem); max-width: 62rem; margin: 0 auto; }
.bexp__hero { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin: 1.4rem 0 2rem; }
.bexp__hero .mbadge { width: 5.4em; }
.bexp__hero h1 { font-family: var(--display); font-size: clamp(2.2rem, 6vw, 4rem); text-transform: uppercase; line-height: 1; }
.bexp__section { font-size: 0.78rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ruby-hot); }
.bexp__panel {
  border: 1px solid rgba(244, 239, 230, 0.14); border-radius: 14px;
  background: var(--ink-2); padding: 1.4rem 1.5rem; margin-bottom: 1rem;
}
.bexp__panel h3 { font-size: 0.78rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ruby-hot); margin-bottom: 0.6rem; }
.bexp__panel p, .bexp__panel li { color: var(--cream-dim); font-size: 0.95rem; line-height: 1.6; }
.bexp__panel ul { list-style: none; }
.bexp__panel li { padding-left: 1.1rem; position: relative; }
.bexp__panel li::before { content: "—"; position: absolute; left: 0; color: var(--ruby-hot); }
.bexp__attest { display: inline-block; border: 1px solid var(--ruby); border-radius: 100px; padding: 0.4em 1.1em; font-size: 0.84rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream); }
.bexp__legend { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); margin-top: 1.6rem; }
.bexp__card {
  display: flex; align-items: center; gap: 0.9rem;
  border: 1px solid rgba(244, 239, 230, 0.14); border-radius: 12px;
  background: var(--ink-2); padding: 0.9rem 1rem; color: var(--cream);
  transition: border-color 0.25s, transform 0.25s;
}
.bexp__card:hover { border-color: var(--ruby); transform: translateY(-3px); }
.bexp__card .mbadge { width: 2.4em; }
.bexp__card b { display: block; font-size: 0.88rem; }
.bexp__card small { color: var(--cream-dim); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* ============ AMENITIES — not badges. Own line-emblem, own language.
   A badge (.mbadge) wears the M seal and glows with a verification color.
   An amenity wears a stroked glyph in a squared tile — a spec, not a seal. ============ */
.amenity-set, .amenity-legend { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.amenity-legend { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }
.amenity-set:empty, .amenity-legend:empty { display: none; }
.amenity {
  --am-c: #c9c2b6;
  display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none;
  border: 1px solid rgba(244, 239, 230, 0.16); border-radius: 9px;
  background: rgba(244, 239, 230, 0.03); color: var(--cream);
  padding: 0.45rem 0.7rem 0.45rem 0.5rem; font: inherit;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
a.amenity:hover { border-color: color-mix(in srgb, var(--am-c) 70%, transparent); background: rgba(244, 239, 230, 0.06); transform: translateY(-2px); }
.amenity__ico {
  flex: none; width: 1.85em; height: 1.85em; border-radius: 6px; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--am-c) 45%, rgba(244, 239, 230, 0.18));
  background: color-mix(in srgb, var(--am-c) 12%, transparent);
}
.amenity__ico svg { width: 66%; height: 66%; fill: none; stroke: var(--am-c); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.amenity__txt b { font-size: 0.84rem; font-weight: 600; letter-spacing: 0.01em; display: block; line-height: 1.1; }
.amenity__txt small { display: block; color: var(--cream-dim); font-size: 0.78rem; margin-top: 0.15rem; letter-spacing: 0.02em; }
.amenity--lg { padding: 0.75rem 0.9rem; border-radius: 11px; align-items: flex-start; }
.amenity--lg .amenity__ico { width: 2.5em; height: 2.5em; }
.amenity--lg .amenity__txt b { font-size: 0.88rem; }
.amenity__ico--hero { width: 4.4rem; height: 4.4rem; border-radius: 14px; }
.am__hero { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin: 1.4rem 0 2rem; }
.am__hero h1 { font-family: var(--display); font-size: clamp(2.2rem, 6vw, 4rem); text-transform: uppercase; line-height: 1; }
.am__note { margin-top: 0.8rem; font-size: 0.9rem; color: var(--cream-dim); line-height: 1.6; }
.am__note a { color: var(--ruby-hot); }
.mnet__amlbl { margin: 1.1rem 0 0; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cream-dim); }

/* ============ psychology markers: icons on the bars + the deeper overlay ============ */
.psy__ic {
  display: inline-block; width: 1.05em; height: 1.05em;
  vertical-align: -0.15em; margin-left: 0.35em;
  color: var(--ruby-hot);
  animation: psyPing 2.8s ease-in-out infinite;
}
.psy.has-ic::after { display: none; }
.psycard__ichead { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.psycard__ichead .psy__ic { width: 1.7em; height: 1.7em; margin: 0; animation: none; }
.psycard__deep {
  margin-top: 0.8rem; display: inline-block;
  font-size: 0.84rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ruby-hot); background: none; border: 1px solid var(--ruby);
  border-radius: 100px; padding: 0.5em 1.2em; cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.psycard__deep:hover { background: var(--ruby); color: var(--cream); }

.psyoverlay {
  position: fixed; inset: 0; z-index: 260;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 5, 4, 0.94);
  opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s;
  padding: 1.2rem;
}
.psyoverlay.is-open { opacity: 1; visibility: visible; }
.psyoverlay__box { max-width: 30rem; width: 100%; text-align: center; }
.psyoverlay__box .psy__ic { width: 3.2em; height: 3.2em; margin: 0 auto 1rem; display: block; animation: psyPing 2.8s ease-in-out infinite; }
.psyoverlay__kicker { font-size: 0.78rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ruby-hot); margin-bottom: 0.5rem; }
.psyoverlay__q { font-family: var(--display); font-size: clamp(1.3rem, 4vw, 2rem); text-transform: uppercase; line-height: 1.15; margin-bottom: 1.2rem; }
.psyoverlay__opts { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.psyoverlay__resp { color: var(--cream-dim); font-size: 0.98rem; line-height: 1.6; margin-bottom: 1.4rem; }
.psyoverlay__consent { margin-top: 1.6rem; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244, 239, 230, 0.7); }
html.psy-locked, html.psy-locked body { overflow: hidden; }

/* ============ psychology markers index page ============ */
.pmk { padding: clamp(7rem, 12vw, 9rem) clamp(1.2rem, 4vw, 3rem) clamp(4rem, 8vw, 6rem); max-width: 68rem; margin: 0 auto; }
.pmk__grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); margin-top: 2rem; }
.pmk__card {
  border: 1px solid rgba(244, 239, 230, 0.14); border-radius: 14px;
  background: var(--ink-2); padding: 1.2rem 1.3rem;
  transition: border-color 0.25s, transform 0.25s;
}
.pmk__card:hover { border-color: var(--ruby); transform: translateY(-3px); }
.pmk__card .psy__ic { width: 2em; height: 2em; margin: 0 0 0.7rem; animation: none; display: block; }
.pmk__card h3 { font-family: var(--display); font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.03em; }
.pmk__card .pmk__id { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ruby-hot); }
.pmk__card p { margin-top: 0.5rem; color: var(--cream-dim); font-size: 0.9rem; line-height: 1.55; }
.pmk__gridlead { margin: 2.6rem 0 0.2rem; font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cream-dim); }

/* ---- Two Sides revamp: the page itself is split ---- */
.pmk--split { position: relative; }
.pmk__field {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 42% at 8% 6%, rgba(47, 107, 255, 0.13), transparent 65%),
    radial-gradient(60% 42% at 92% 10%, rgba(56, 192, 111, 0.12), transparent 65%);
}
.pmk__t-a { background: linear-gradient(100deg, #9db8ff, #f4efe6 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pmk__t-b { background: linear-gradient(100deg, #f4efe6 30%, #8fe6b4); -webkit-background-clip: text; background-clip: text; color: transparent; }

.pmk__card--duo { display: flex; flex-direction: column; gap: 0.45rem; color: inherit; text-decoration: none; }
.pmk__row { display: flex; align-items: center; gap: 0.6rem; }
.pmk__row .psy__ic { width: 1.5em; height: 1.5em; margin: 0; animation: none; flex: none; }
.pmk__row--a { color: #9db8ff; }
.pmk__row--b { color: #8fe6b4; }
.pmk__row b { font-family: var(--display); font-weight: 400; font-size: 1.02rem; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.05; }
.pmk__row--b { padding-bottom: 0.55rem; border-bottom: 1px dashed rgba(244, 239, 230, 0.14); }
.pmk__you {
  font-style: normal; flex: none; margin-left: auto; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 100px; padding: 0.3em 0.7em;
}
.pmk__card--duo p { margin-top: 0.15rem; }
.pmk__open { margin-top: 0.4rem; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ruby-hot); }

/* ---- the pair dossier ---- */
.pmkd__head { display: flex; align-items: center; gap: 1.1rem; margin: 1rem 0 1.6rem; flex-wrap: wrap; }
.pmkd__ics { display: inline-flex; gap: 0.5rem; flex: none; }
.pmkd__ics .psy__ic { margin: 0; animation: none; }
.pmkd__h { font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 4.6vw, 2.7rem); text-transform: uppercase; line-height: 1.02; }
.pmkd__vs { font-style: normal; color: var(--ruby-hot); padding: 0 0.15em; }
.pmkd__grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); }
.pmkd__panel { position: relative; border-radius: 16px; padding: 1.5rem 1.4rem; border: 1px solid; }
.pmkd__panel--a { border-color: rgba(47, 107, 255, 0.4); background: rgba(47, 107, 255, 0.07); }
.pmkd__panel--b { border-color: rgba(56, 192, 111, 0.4); background: rgba(56, 192, 111, 0.07); }
.pmkd__panel h3 { font-family: var(--display); font-weight: 400; font-size: 1.35rem; text-transform: uppercase; margin-bottom: 0.5rem; }
.pmkd__panel--a h3 { color: #9db8ff; }
.pmkd__panel--b h3 { color: #8fe6b4; }
.pmkd__panel p { font-size: 0.92rem; line-height: 1.6; }
.pmkd__dim { color: var(--cream-dim); margin-top: 0.5rem; }
.pmkd__you {
  position: absolute; top: 0.85rem; right: 0.95rem; font-size: 0.72rem; letter-spacing: 0.2em;
  text-transform: uppercase; border: 1px solid currentColor; border-radius: 100px; padding: 0.35em 0.8em;
}
.pmkd__try {
  margin-top: 1rem; border-top: 1px dashed rgba(244, 239, 230, 0.2); padding-top: 0.85rem;
  font-size: 0.9rem; line-height: 1.55;
}
.pmkd__try b { display: block; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ruby-hot); margin-bottom: 0.35rem; }
.pmkd__bar {
  display: block; margin-top: 1rem; border: 1px solid rgba(229, 56, 59, 0.4); border-radius: 16px;
  background: rgba(193, 18, 31, 0.07); padding: 1.3rem 1.4rem; color: inherit; text-decoration: none;
  transition: border-color 0.25s, transform 0.25s;
}
.pmkd__bar:hover { border-color: var(--ruby-hot); transform: translateY(-2px); }
.pmkd__bar span { font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ruby-hot); }
.pmkd__bar q { display: block; font-family: var(--display); font-size: clamp(1.15rem, 3.6vw, 1.7rem); text-transform: uppercase; line-height: 1.1; margin: 0.4rem 0; quotes: "\201C" "\201D"; }
.pmkd__bar i { font-style: normal; font-size: 0.84rem; color: var(--cream-dim); letter-spacing: 0.08em; text-transform: uppercase; }

/* ---- Vaunt brand skin: the Brand Collabs frame carries their orange ---- */
:root { --vaunt: #f84c0a; --vaunt-deep: #c93a04; }
/* the Vaunt experience gets extra runway: more scroll distance per frame so
   the fly-up into the section plays out even under a fast thumb */
#work { height: 440vh; }
#work .command__tag {
  color: #ffb38f; border: 1px solid rgba(248, 76, 10, 0.5); border-radius: 100px;
  padding: 0.4em 0.95em; background: rgba(248, 76, 10, 0.1); backdrop-filter: blur(3px);
}
#work .command__panel { border-left-color: var(--vaunt); }
#work .command__link {
  display: inline-block; margin-top: 0.5rem; color: #fff !important; text-decoration: none;
  background: linear-gradient(120deg, var(--vaunt-deep), var(--vaunt)); border-radius: 100px;
  padding: 0.5em 1.2em; font-weight: 700; letter-spacing: 0.06em;
  box-shadow: 0 8px 26px rgba(248, 76, 10, 0.45); transition: transform 0.25s, box-shadow 0.25s;
}
#work .command__link:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(248, 76, 10, 0.65); }
#work .command__count { color: var(--vaunt); }
#work .workvr__tag,
#work .workvr__btn--land { background: linear-gradient(120deg, var(--vaunt-deep), var(--vaunt)); box-shadow: 0 8px 26px rgba(248, 76, 10, 0.5); }
#work .workvr__btn:hover { border-color: var(--vaunt); background: rgba(248, 76, 10, 0.28); }
#work .workvr__btn.is-on { border-color: var(--vaunt); color: #ffb38f; }
#work .workvr__btn { --vr-flash: var(--vaunt); }
#work .vr360-spot i { background: var(--vaunt); box-shadow: 0 0 12px rgba(248, 76, 10, 0.9); }
#work .vr360-spot i::after { border-color: rgba(248, 76, 10, 0.7); }
#work .vr360-spot span { border-color: rgba(248, 76, 10, 0.55); }
#work .vr360-spot:hover span { background: var(--vaunt); border-color: var(--vaunt); }

/* ---- scroll trap: while the 360 band is live, the page cannot be scrolled
       away from underneath the viewer — Skip is the only sanctioned exit ---- */
html.vr-locked {
  overflow: hidden !important; touch-action: none; overscroll-behavior: none;
}

/* ---- the inline 360 band inside Brand Collabs ---- */
.workvr {
  position: absolute; inset: 0; z-index: 4;
  opacity: 0; pointer-events: none; transition: opacity 0.6s ease;
}
.workvr.is-live { opacity: 1; pointer-events: auto; }
.workvr__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.workvr__canvas:active { cursor: grabbing; }
.workvr__tag {
  position: absolute; top: calc(4.6rem + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase; color: #fff; white-space: nowrap;
  background: linear-gradient(120deg, var(--ruby), var(--ruby-hot)); border-radius: 100px; padding: 0.5em 1.1em;
  box-shadow: 0 8px 26px rgba(229, 56, 59, 0.5); pointer-events: none;
}
.workvr__compass {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  text-align: center; pointer-events: none; transition: opacity 0.6s ease;
  background: rgba(10, 8, 7, 0.55); backdrop-filter: blur(6px); border-radius: 18px; padding: 1.3rem 1.6rem 1.4rem;
  animation: vrCoachIn 0.7s ease-out both;
}
@keyframes vrCoachIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.86); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
/* animation:none here, or the entrance animation's fill would pin opacity at 1 */
.workvr__compass.is-gone { opacity: 0; animation: none; }
/* the gray caution sign sitting behind everything in the card */
.workvr__caution {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%);
  width: 140px; height: 140px; stroke: rgba(158, 152, 144, 0.5); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; z-index: 0;
}
.workvr__compass > *:not(.workvr__caution) { position: relative; z-index: 1; }
.workvr__rose { width: 52px; height: 52px; stroke: var(--cream); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: vrCompass 2.6s ease-in-out infinite; }
@keyframes vrCompass { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.12); opacity: 1; } }
/* the instructions read like a marker ran over them */
.workvr__warn mark, .workvr__how mark {
  background: linear-gradient(180deg, #ffd84f, #ffc61a); color: #191204;
  padding: 0.14em 0.45em; border-radius: 4px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.workvr__how mark b { color: #191204; }
.workvr__warn {
  margin: 0.7rem 0 0; font-weight: 800; font-size: 0.9rem; letter-spacing: 0.05em;
  text-transform: uppercase;
}
.workvr__how { margin-top: 0.55rem; font-size: 0.9rem; font-weight: 700; line-height: 1.6; }
/* the motion line: red, flashing white */
.workvr__motionhint {
  margin-top: 0.7rem; font-size: 0.84rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: #ff3b30;
  animation: vrMotionFlash 1.1s steps(2, jump-none) infinite;
}
.workvr__motionhint b { color: inherit; }
@keyframes vrMotionFlash { 0%, 100% { color: #ff3b30; text-shadow: 0 0 12px rgba(255, 59, 48, 0.6); } 50% { color: #fff; text-shadow: 0 0 12px rgba(255, 255, 255, 0.7); } }
.workvr__side {
  position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 0.55rem;
}
/* Back to top: filled, flashing red, the always-out door above Motion */
.workvr__btn--top {
  background: linear-gradient(120deg, #a4161a, #ff2c1f) !important;
  border: none; color: #fff; font-weight: 800;
  box-shadow: 0 8px 24px rgba(255, 44, 31, 0.5);
  animation: vrTopFlash 1.1s ease-in-out infinite;
}
@keyframes vrTopFlash {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 44, 31, 0.6); filter: brightness(1); }
  50% { box-shadow: 0 0 24px 4px rgba(255, 44, 31, 0.95); filter: brightness(1.3); }
}

/* the arrow pointing straight at the Motion button, nudging toward it */
.workvr__pointer {
  position: absolute; right: calc(100% + 0.55rem); top: 44px;
  width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(229, 56, 59, 0.85));
  animation: vrPointNudge 1.2s ease-in-out infinite;
}
#work .workvr__pointer { filter: drop-shadow(0 0 8px rgba(248, 76, 10, 0.85)); }
@keyframes vrPointNudge { 0%, 100% { transform: translateX(-7px); } 50% { transform: translateX(2px); } }
/* the tap ripple: a fingertip landing on Motion, over and over */
#workVRGyro { position: relative; }
#workVRGyro:not(.is-on)::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 32px; height: 32px;
  margin: -16px 0 0 -16px; border-radius: 50%; border: 2px solid #fff;
  opacity: 0; pointer-events: none; animation: vrTap 1.6s ease-out infinite;
}
@keyframes vrTap { 0% { transform: scale(0.3); opacity: 0.95; } 65% { transform: scale(1.3); opacity: 0; } 100% { transform: scale(1.3); opacity: 0; } }
.workvr__btn {
  --vr-flash: var(--ruby-hot);
  display: flex; align-items: center; gap: 0.45em; justify-content: center;
  border: 1px solid rgba(244, 239, 230, 0.4); border-radius: 100px; cursor: pointer;
  background: rgba(10, 8, 7, 0.65); color: var(--cream); font: inherit;
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.65em 1.1em;
  backdrop-filter: blur(4px); transition: border-color 0.25s, background 0.25s;
}
.workvr__icon { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.workvr__btn:hover { border-color: var(--ruby-hot); background: rgba(193, 18, 31, 0.3); }
.workvr__btn.is-on { border-color: var(--ruby-hot); color: var(--ruby-hot); }
.workvr__btn--land {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--ruby), var(--ruby-hot)); color: #fff; border: none;
  font-weight: 700; letter-spacing: 0.2em; padding: 0.75em 1.25em;
  box-shadow: 0 8px 24px rgba(229, 56, 59, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  animation: vrSkipNudge 2.8s ease-in-out infinite;
}
.workvr__btn--land::after { /* runway-sheen sweep across the pill */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.4) 50%, transparent 68%);
  transform: translateX(-100%); animation: vrLandSheen 3.4s ease-in-out infinite;
}
.workvr__icon--jet { width: 17px; height: 17px; animation: vrLandDip 2.8s ease-in-out infinite; }
@keyframes vrSkipNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes vrLandSheen { 0%, 55% { transform: translateX(-100%); } 90%, 100% { transform: translateX(100%); } }
@keyframes vrLandDip { 0%, 100% { transform: translate(0, -1.5px); } 50% { transform: translate(1px, 1px); } }

/* hotspots: tags pinned to things inside the 360 scene (base styles —
   the standalone vr-vaunt.html page carries its own copy of these) */
.vr360-spots { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.vr360-spot {
  /* the DOT sits exactly on the pinned point (it's 16px wide, so shift
     back by its half-width); the label pill flows out to the right */
  position: absolute; transform: translate(-8px, -50%); pointer-events: auto;
  display: flex; align-items: center; gap: 0.45em; text-decoration: none; color: var(--cream);
  padding: 6px 6px 6px 0; margin: -6px -6px -6px 0; /* a fatter tap target without moving the dot */
}
.vr360-spot i {
  width: 16px; height: 16px; border-radius: 50%; flex: none; position: relative;
  background: var(--ruby-hot); box-shadow: 0 0 12px rgba(229, 56, 59, 0.9);
}
.vr360-spot i::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(229, 56, 59, 0.7); animation: vrSpotPing 2s ease-out infinite;
}
@keyframes vrSpotPing { 0% { transform: scale(0.7); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
.vr360-spot span {
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
  background: rgba(10, 8, 7, 0.75); border: 1px solid rgba(229, 56, 59, 0.5);
  border-radius: 100px; padding: 0.45em 0.95em; backdrop-filter: blur(4px);
}
.vr360-spot:hover span { background: var(--ruby); border-color: var(--ruby-hot); }
/* off-screen tags park an arrow chip at the border, aimed where they live */
.vr360-edge {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; pointer-events: none;
  background: rgba(10, 8, 7, 0.72); border: 2px solid var(--ruby-hot);
  box-shadow: 0 0 12px rgba(229, 56, 59, 0.7);
}
.vr360-edge svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#work .vr360-edge { border-color: var(--vaunt); box-shadow: 0 0 12px rgba(248, 76, 10, 0.75); }
@media (prefers-reduced-motion: reduce) { .vr360-spot i::after { animation: none; } }

/* motion button: several small animations layered together so it reads as
   "tap me" — glow pulse, a soft bounce, and a border hue-shift, all tied to
   one --vr-flash color so the Vaunt section can recolor it in one line */
#workVRGyro:not(.is-on) {
  animation: vrGyroGlow 2.2s ease-in-out infinite, vrGyroBounce 2.2s ease-in-out infinite, vrGyroHue 2.2s ease-in-out infinite;
}
@keyframes vrGyroGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
  50% { box-shadow: 0 0 10px 1px var(--vr-flash), 0 0 24px 4px color-mix(in srgb, var(--vr-flash) 55%, transparent); }
}
@keyframes vrGyroBounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes vrGyroHue { 0%, 100% { border-color: rgba(244, 239, 230, 0.7); } 50% { border-color: var(--vr-flash); color: var(--vr-flash); } }
/* the sound ask: Motion tapped with the sound off — huge, center screen,
   arrow up to the SOUND pill (which stays above the dim and glows) */
.soundask {
  position: fixed; inset: 0; z-index: 130; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  background: rgba(8, 6, 5, 0.84); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  text-align: center; animation: soundAskIn 0.45s ease-out both;
}
.soundask[hidden] { display: none; }
@keyframes soundAskIn { from { opacity: 0; } to { opacity: 1; } }
.soundask__big {
  font-family: var(--display); text-transform: uppercase; line-height: 0.95;
  font-size: clamp(3.2rem, 13vw, 7.5rem); color: var(--cream);
  animation: soundAskPulse 1.6s ease-in-out infinite;
}
.soundask__big mark {
  background: linear-gradient(180deg, #ffd84f, #ffc61a); color: #191204;
  padding: 0.02em 0.16em; border-radius: 8px;
}
@keyframes soundAskPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
.soundask__sub { font-size: 0.9rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cream-dim); }
.soundask__arrow {
  position: absolute; top: 4.6rem; right: clamp(4rem, 13vw, 11rem);
  width: 62px; height: 62px; stroke: #fff; fill: none; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
  filter: drop-shadow(0 0 12px rgba(255, 198, 26, 0.9));
  animation: soundAskArrow 1.1s ease-in-out infinite;
}
@keyframes soundAskArrow { 0%, 100% { transform: translate(-6px, 6px); } 50% { transform: translate(6px, -6px); } }
.soundask__no {
  margin-top: 1.6rem; background: none; cursor: pointer; font: inherit;
  border: 1px solid rgba(244, 239, 230, 0.3); border-radius: 100px; color: var(--cream-dim);
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.65em 1.3em;
}
.sound-toggle.is-asked {
  border-color: #ffc61a; color: var(--cream);
  animation: soundAskTarget 1.2s ease-out infinite;
}
@keyframes soundAskTarget {
  0% { box-shadow: 0 0 0 0 rgba(255, 198, 26, 0.75); }
  100% { box-shadow: 0 0 0 16px rgba(255, 198, 26, 0); }
}

/* THE TAKEOFF: on approach to the 360 cabin, runway rails light both edges —
   scroll slow, arrows falling like landing lights, a small board call below */
.work__runway {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  opacity: 0; transition: opacity 0.55s ease;
}
.work__runway.is-shown { opacity: 1; }
.work__runway-rail {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.work__runway-rail--l { left: clamp(0.7rem, 3.4vw, 2.4rem); }
.work__runway-rail--r { right: clamp(0.7rem, 3.4vw, 2.4rem); }
.work__runway-rail b {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.52em; text-transform: uppercase;
  color: rgba(232, 200, 119, 0.95); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}
.work__runway-rail svg {
  width: 20px; height: 32px; fill: none;
  stroke: rgba(232, 200, 119, 0.95); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.85));
  animation: runwayFall 1.2s ease-in-out infinite;
}
.work__runway-rail--r svg { animation-delay: 0.6s; }
@keyframes runwayFall {
  0%, 100% { transform: translateY(-4px); opacity: 0.55; }
  50% { transform: translateY(7px); opacity: 1; }
}
.work__runway-note {
  position: absolute; left: 50%; bottom: clamp(4.6rem, 13vh, 7.5rem);
  transform: translateX(-50%); white-space: nowrap;
  font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--cream-dim); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}
@media (prefers-reduced-motion: reduce) { .work__runway-rail svg { animation: none; } }

/* after touchdown: the last card opens on a full-frame ask in Vaunt orange —
   eye level, a phone with a two-way swipe inside, the motto in tiny type */
.work__slowhint {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.2rem; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity 0.6s ease;
}
.work__slowhint.is-shown { opacity: 1; }
.work__slowhint-big {
  font-family: var(--display); text-transform: uppercase; line-height: 0.92;
  font-size: clamp(1.7rem, 7vw, 4rem); color: var(--vaunt);
  text-shadow: 0 4px 34px rgba(0, 0, 0, 0.8);
}
.work__slowhint.is-shown .work__slowhint-big { animation: slowHintBreathe 2.6s ease-in-out infinite; }
@keyframes slowHintBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.work__slowhint-phone {
  width: 54px; height: 96px; stroke: var(--vaunt); fill: none; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 16px rgba(248, 76, 10, 0.55));
}
.work__slowhint-swipe { animation: slowHintSwipe 1.8s ease-in-out infinite; }
@keyframes slowHintSwipe { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(4px); } }
.work__slowhint-tiny {
  font-size: 0.78rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--cream);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
}

/* word pills: the credential as one bold pill — the M seal leads the words,
   flashing and glowing; its Vaunt-branded sibling flies you to the referral */
.command__pitch--icons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; }
.wordpill {
  display: inline-flex; align-items: center; gap: 0.6em; flex: none;
  border-radius: 100px; padding: 0.45em 1.2em 0.45em 0.45em; text-decoration: none;
  border: 2px solid var(--badge-c, var(--ruby-hot)); background: rgba(10, 8, 7, 0.68);
  color: var(--cream); font-weight: 800; font-size: 0.84rem;
  letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  backdrop-filter: blur(4px); transition: transform 0.25s;
  animation: msealFlash 1.6s ease-in-out infinite;
}
.wordpill:hover { transform: translateY(-2px); }
.wordpill__seal {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--badge-c, var(--ruby-hot)); background: rgba(10, 8, 7, 0.7);
}
.wordpill__seal img { width: 17px; filter: drop-shadow(0 0 6px var(--badge-c, var(--ruby-hot))); }
.wordpill__seal--em { background: #fff; }
.wordpill__seal--em img { width: 60%; filter: none; }
.wordpill--vaunt { --badge-c: var(--vaunt); background: linear-gradient(120deg, var(--vaunt-deep), var(--vaunt)); border-color: var(--vaunt); color: #fff; }
.wordpill--vaunt .wordpill__seal { border-color: rgba(255, 255, 255, 0.85); background: #fff; overflow: hidden; }
.wordpill--vaunt .wordpill__seal img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; filter: none; }
@keyframes msealFlash {
  0%, 100% { box-shadow: 0 0 8px 0 var(--badge-c, var(--ruby-hot)); }
  50% { box-shadow: 0 0 22px 6px var(--badge-c, var(--ruby-hot)); }
}
@media (prefers-reduced-motion: reduce) { .wordpill { animation: none; } }

@media (prefers-reduced-motion: reduce) {
  .workvr__compass, .workvr__rose, .workvr__btn--land, .workvr__btn--land::after,
  .workvr__icon--jet, .workvr__motionhint, .workvr__pointer, #workVRGyro,
  #workVRGyro:not(.is-on)::after, .work__slowhint.is-shown .work__slowhint-big,
  .work__slowhint-swipe, .mseal,
  .soundask__big, .soundask__arrow, .sound-toggle.is-asked { animation: none; }
}

/* ---- the sound beacon: emanates from the Now Playing tab in Vaunt orange
       when someone is deep in the experience with the sound still off ---- */
.npbeak {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 120;
  bottom: calc(4.6rem + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  pointer-events: auto; cursor: pointer; text-align: center;
  animation: npbeakIn 0.4s ease-out both;
}
@keyframes npbeakIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.npbeak__words {
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 1.05rem; color: var(--vaunt); text-shadow: 0 2px 16px rgba(0, 0, 0, 0.85);
  animation: npbeakPulse 1.2s ease-in-out infinite;
}
.npbeak__arrow {
  width: 30px; height: 30px; stroke: var(--vaunt); fill: none; stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(248, 76, 10, 0.9));
  animation: npbeakDip 1s ease-in-out infinite;
}
@keyframes npbeakDip { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(5px); } }
.npbeak__ring {
  /* the pulse is born on the soundbar itself: the beacon's bottom edge sits
     0.9rem above the appbar, so -3.55rem drops each ring's center onto the
     bar line and the waves wash upward from it */
  position: absolute; bottom: -3.55rem; left: 50%; width: 34px; height: 34px;
  margin-left: -17px; border-radius: 50%; border: 2px solid var(--vaunt);
  opacity: 0; animation: npbeakRing 1.6s ease-out infinite; pointer-events: none;
}
.npbeak__ring:nth-child(2) { animation-delay: 0.5s; }
.npbeak__ring:nth-child(3) { animation-delay: 1s; }
@keyframes npbeakRing { 0% { transform: scale(0.3); opacity: 0.9; } 100% { transform: scale(3.6); opacity: 0; } }
@keyframes npbeakPulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .npbeak__words, .npbeak__arrow, .npbeak__ring { animation: none; } }

/* while the beacon burns, the level icon on the Now Playing tab glows softly orange */
.appbar__tab.is-beacon { color: var(--vaunt); }
.appbar__tab.is-beacon svg {
  filter: drop-shadow(0 0 7px rgba(248, 76, 10, 0.75));
  animation: npbeakGlow 1.6s ease-in-out infinite;
}
@keyframes npbeakGlow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(248, 76, 10, 0.45)); }
  50% { filter: drop-shadow(0 0 10px rgba(248, 76, 10, 0.95)); }
}
@media (prefers-reduced-motion: reduce) { .appbar__tab.is-beacon svg { animation: none; } }

/* ---- the Now Playing tab: equalizer bars that dance while sound is on ---- */
#appbarNPLabel { max-width: 6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appbar__tab .np-bar { transform-box: fill-box; transform-origin: center; }
.appbar__tab.is-playing { color: var(--ruby-hot); }
.appbar__tab.is-playing .np-bar { animation: npBar 0.9s ease-in-out infinite; }
.appbar__tab.is-playing .np-bar:nth-of-type(2) { animation-delay: 0.12s; }
.appbar__tab.is-playing .np-bar:nth-of-type(3) { animation-delay: 0.24s; }
.appbar__tab.is-playing .np-bar:nth-of-type(4) { animation-delay: 0.36s; }
@keyframes npBar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(2); } }
@media (prefers-reduced-motion: reduce) { .appbar__tab.is-playing .np-bar { animation: none; } }

/* ---- the binary capsule: two situations, no words — red is the scroll,
       blue is the room. Replaces the thin section tags on Antisocial. ---- */
.songblock__tag--duo {
  display: inline-flex; padding: 0; overflow: hidden; border-radius: 100px;
  border: 1px solid rgba(244, 239, 230, 0.25); line-height: 0;
}
.duotag__half {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 30px;
}
.duotag__half svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.duotag__half--red { background: linear-gradient(120deg, #a4161a, #e5383b); }
.duotag__half--blue { background: linear-gradient(120deg, #1d4ed8, #3b82f6); }

/* the quiz stop: the duality quiz drops in mid-experience */
.songquiz {
  position: relative; background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  padding: 16vh clamp(1rem, 4vw, 2.5rem);
}
.songquiz__inner { width: min(36rem, 100%); }

/* ---- lead capture modal ---- */
.leadov {
  position: fixed; inset: 0; z-index: 210; display: grid; place-items: center;
  padding: 1.2rem; background: rgba(5, 4, 4, 0.82); backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.leadov.is-open { opacity: 1; pointer-events: auto; }
.leadov__box {
  position: relative; width: min(92vw, 26rem); border-radius: 18px;
  border: 1px solid rgba(244, 239, 230, 0.18); background: var(--ink-2);
  padding: 1.8rem 1.6rem; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  transform: translateY(14px); transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.leadov.is-open .leadov__box { transform: translateY(0); }
.leadov__x { position: absolute; top: 0.8rem; right: 0.9rem; background: none; border: none; color: var(--cream-dim); font-size: 1rem; cursor: pointer; }
.leadov__x:hover { color: var(--cream); }
.leadov__kicker { font-size: 0.78rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ruby-hot); }
.leadov__h { font-family: var(--display); font-size: 1.7rem; text-transform: uppercase; margin: 0.25rem 0 1rem; }
.leadov__form { display: grid; gap: 0.7rem; }
.leadov__in {
  width: 100%; border: 1px solid rgba(244, 239, 230, 0.22); border-radius: 10px;
  background: rgba(244, 239, 230, 0.04); color: var(--cream); font: inherit;
  padding: 0.75em 0.95em; outline: none; transition: border-color 0.2s;
}
.leadov__in:focus { border-color: var(--ruby-hot); }
.leadov__ta { resize: vertical; min-height: 5.5em; }
.leadov__go { justify-self: start; }
.leadov__note { font-size: 0.84rem; color: var(--cream-dim); line-height: 1.5; }

/* ---- the duality quiz ---- */
.dq { margin: 2.4rem 0 0.5rem; }
.dq__offline { color: var(--cream-dim); font-size: 0.9rem; }
.dq__card {
  border: 1px solid rgba(244, 239, 230, 0.16); border-radius: 18px;
  background: linear-gradient(180deg, rgba(244, 239, 230, 0.05), rgba(244, 239, 230, 0.015));
  padding: clamp(1.5rem, 4vw, 2.6rem); position: relative; overflow: hidden;
}
.dq__card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background: radial-gradient(70% 60% at 15% 0%, rgba(47, 107, 255, 0.12), transparent 60%),
              radial-gradient(70% 60% at 85% 100%, rgba(229, 56, 59, 0.14), transparent 60%);
}
.dq__card > * { position: relative; z-index: 1; }
.dq__consent { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-dim); margin-bottom: 0.9rem; }
.dq__h { font-family: var(--display); font-size: clamp(2rem, 7vw, 3.4rem); text-transform: uppercase; line-height: 0.95; }
.dq__lead { color: var(--cream-dim); font-size: 1rem; line-height: 1.6; max-width: 52ch; margin: 0.8rem 0 1.6rem; }
.dq__start { font-family: var(--display); }

/* progress + question */
.dq__bar { height: 3px; border-radius: 3px; background: rgba(244, 239, 230, 0.14); overflow: hidden; margin-bottom: 0.7rem; }
.dq__bar > i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #2f6bff, var(--ruby-hot)); transition: width 0.35s ease; }
.dq__count { font-size: 0.78rem; letter-spacing: 0.24em; color: var(--cream-dim); }
.dq__poles { display: flex; align-items: center; gap: 0.7rem; margin: 1.1rem 0 0.2rem; }
.dq__pole { font-family: var(--display); text-transform: uppercase; font-size: clamp(0.8rem, 2.6vw, 1.05rem); line-height: 1; color: #7fa0ff; letter-spacing: 0.02em; flex: 1; }
.dq__pole--b { color: #6fe0a0; text-align: right; }
.dq__vs { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream-dim); }
.dq__prompt { font-size: clamp(1.15rem, 3.6vw, 1.7rem); line-height: 1.35; margin: 0.9rem 0 1.4rem; color: var(--cream); }
.dq__opts { display: grid; gap: 0.6rem; }
.dq__opt {
  text-align: left; border: 1px solid rgba(244, 239, 230, 0.18); border-radius: 12px;
  background: rgba(244, 239, 230, 0.03); color: var(--cream); padding: 0.85em 1.1em;
  font: inherit; font-size: 0.98rem; cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.dq__opt:hover { transform: translateX(3px); }
.dq__opt--a:hover, .dq__opt--a.is-on { border-color: #2f6bff; background: rgba(47, 107, 255, 0.14); }
.dq__opt--b:hover, .dq__opt--b.is-on { border-color: #38c06f; background: rgba(56, 192, 111, 0.14); }
.dq__nav { display: flex; align-items: center; justify-content: space-between; margin-top: 1.2rem; }
.dq__back { background: none; border: none; color: var(--cream-dim); font: inherit; font-size: 0.9rem; cursor: pointer; letter-spacing: 0.04em; }
.dq__back:hover { color: var(--cream); }
.dq__skiphint { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(244, 239, 230, 0.7); }

/* results */
.dq__reshead { text-align: center; margin-bottom: 1.6rem; }
.dq__reskick { font-size: 0.78rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ruby-hot); }
.dq__resleadin { font-size: 0.84rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-dim); margin-top: 0.6rem; }
.dq__resh { font-family: var(--display); font-size: clamp(2.1rem, 8vw, 4rem); text-transform: uppercase; line-height: 0.92; margin-top: 0.2rem; }
.dq__resh--split { color: var(--cream); }
.dq__ressub { color: var(--cream-dim); font-size: 0.92rem; line-height: 1.55; max-width: 46ch; margin: 0.7rem auto 0; }
.dq__meter {
  position: relative; height: 8px; border-radius: 8px; margin: 1.3rem auto 0.4rem; max-width: 26rem;
  background: linear-gradient(90deg, #2f6bff, rgba(244, 239, 230, 0.25) 50%, #38c06f);
}
.dq__needle {
  position: absolute; top: -5px; width: 4px; height: 18px; border-radius: 3px; background: var(--cream);
  transform: translateX(-50%); box-shadow: 0 0 10px rgba(244, 239, 230, 0.7);
}
.dq__meterkey { display: flex; justify-content: space-between; max-width: 26rem; margin: 0 auto; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.dq__meterkey span:first-child { color: #7fa0ff; }
.dq__meterkey span:last-child { color: #6fe0a0; }
.dq__resgrid { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr)); }
.dq__res {
  text-align: left; border: 1px solid rgba(47, 107, 255, 0.35); border-radius: 13px;
  background: rgba(47, 107, 255, 0.06); color: var(--cream); padding: 0.9rem 0.95rem;
  cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 0.35rem;
  transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.dq__res.is-b { border-color: rgba(56, 192, 111, 0.4); background: rgba(56, 192, 111, 0.07); }
.dq__res:hover { transform: translateY(-3px); }
.dq__resic .psy__ic { width: 1.8em; height: 1.8em; margin: 0; animation: none; display: block; color: #7fa0ff; transition: transform 0.3s ease, color 0.3s ease; }
.dq__res.is-b .psy__ic { color: #6fe0a0; }
.dq__ic.is-flipped { transform: scaleX(-1); }
.dq__ressay { font-family: var(--display); font-size: 0.98rem; text-transform: uppercase; line-height: 1.02; letter-spacing: 0.01em; }
.dq__resmeta { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.1rem; }
.dq__dots { display: inline-flex; gap: 3px; }
.dq__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ruby-hot); display: block; }
.dq__mag { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-dim); }
.dq__flip { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244, 239, 230, 0.7); margin-top: 0.15rem; }
.dq__footnote { color: var(--cream-dim); font-size: 0.9rem; line-height: 1.6; max-width: 54ch; margin: 1.6rem 0 0; }
.dq__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.3rem; }
@media (prefers-reduced-motion: reduce) { .dq__opt, .dq__res, .dq__bar > i, .dq__resic .psy__ic { transition: none; } }

.pmk__consent {
  border: 1px solid rgba(229, 56, 59, 0.4); border-radius: 14px;
  background: rgba(193, 18, 31, 0.08); padding: 1.2rem 1.4rem; margin-top: 2rem;
}
.pmk__consent h3 { font-size: 0.78rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ruby-hot); margin-bottom: 0.5rem; }
.pmk__consent p { color: var(--cream-dim); font-size: 0.9rem; line-height: 1.6; }

/* ============ Please Set Me Free: the civic poll ============ */
.poll { max-width: 52rem; margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) clamp(1.2rem, 4vw, 3rem) clamp(4rem, 8vw, 6rem); }
.poll__note { max-width: 46ch; margin: 1.4rem auto 0; color: var(--cream-dim); font-size: 0.9rem; line-height: 1.65; text-align: center; }
.poll__module { margin-bottom: clamp(3rem, 7vw, 5rem); }
.poll__module .songblock__tag { margin-bottom: 1.2rem; }
.poll__bar {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.25rem, 3.4vw, 2.1rem);
  text-transform: uppercase; line-height: 1.2;
  margin-bottom: 0.9rem; cursor: pointer;
  color: var(--cream); transition: color 0.3s, opacity 0.3s;
}
.poll__bar:hover { color: var(--ruby-hot); }
.poll__bar.is-now { color: var(--ruby-hot); }
.poll__bar.is-answered { opacity: 0.55; }
.poll__bar.is-answered::after { content: "✓ answered"; font-family: var(--body); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--ruby-hot); margin-left: 0.7em; vertical-align: middle; }
.poll__bar.is-locked { opacity: 0.28; cursor: default; }
.poll__bar.is-locked:hover { color: var(--cream); }
.poll__bar.is-locked::after { content: "deep mode"; font-family: var(--body); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--cream-dim); margin-left: 0.7em; vertical-align: middle; }
.poll__ic { width: 0.8em; height: 0.8em; vertical-align: -0.08em; }
.poll__now[hidden] { display: none; }
.poll__now { max-width: min(22rem, calc(100vw - 1.6rem)); }
.poll__opts { justify-content: center; }
.poll__opts .chat__chip { font-size: 0.9rem; }
.poll__scalekey { margin-top: 0.7rem; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-dim); text-align: center; }
.poll__consent { text-align: left; display: grid; gap: 0.7rem; margin-top: 1rem; }
.poll__consent label { font-size: 0.9rem; color: var(--cream-dim); line-height: 1.5; cursor: pointer; }
.poll__consent input { accent-color: var(--ruby); margin-right: 0.5em; }
.poll__text {
  width: 100%; margin-top: 0.4rem;
  background: var(--ink-2); color: var(--cream);
  border: 1px solid rgba(244, 239, 230, 0.25); border-radius: 10px;
  font-family: var(--body); font-size: 0.95rem; padding: 0.7em 0.9em;
}
.poll__text:focus { outline: none; border-color: var(--ruby); }
.psyoverlay__box--poll { max-width: 34rem; }

/* ============ the gallery wall (Who Did The Shoot) ============ */
.gal { padding: clamp(4rem, 8vw, 6rem) clamp(1.2rem, 4vw, 3rem); max-width: 80rem; margin: 0 auto; text-align: center; }
.gal__sub { margin: 1rem auto 0; color: var(--cream-dim); font-size: 0.98rem; line-height: 1.65; max-width: 52ch; }
.gal__wall { columns: 3 16rem; column-gap: 0.9rem; margin-top: 2.2rem; text-align: left; }
.gal__shot {
  break-inside: avoid; margin: 0 0 0.9rem; position: relative;
  border-radius: 12px; overflow: hidden; cursor: pointer;
  border: 1px solid rgba(244, 239, 230, 0.12);
  transition: transform 0.3s ease, border-color 0.3s, box-shadow 0.3s;
}
.gal__shot img { display: block; width: 100%; height: auto; transition: transform 0.5s ease; }
.gal__shot:hover { transform: translateY(-4px); border-color: var(--ruby); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 22px rgba(193, 18, 31, 0.25); }
.gal__shot:hover img { transform: scale(1.04); }
.gal__shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem 0.9rem 0.7rem;
  background: linear-gradient(180deg, transparent, rgba(6, 5, 4, 0.85));
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cream-dim);
}
.gal__shot figcaption b { color: var(--ruby-hot); margin-right: 0.5em; }
.gal__light {
  position: fixed; inset: 0; z-index: 260;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  background: rgba(6, 5, 4, 0.95); padding: 1.2rem;
  opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;
  cursor: zoom-out;
}
.gal__light.is-open { opacity: 1; visibility: visible; }
.gal__light img { max-width: min(92vw, 70rem); max-height: 80vh; border-radius: 10px; }
.gal__light p { text-align: center; }
.gal__light b { display: block; font-family: var(--display); font-size: 1.1rem; letter-spacing: 0.06em; text-transform: uppercase; }
.gal__light span { color: var(--cream-dim); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; }

/* ============ Docket 516: the evidence room ============ */
.dkt { padding: clamp(2.5rem, 5vw, 4rem) clamp(1.2rem, 4vw, 3rem); max-width: 74rem; margin: 0 auto; }
.dkt__hero { padding-top: clamp(7rem, 12vw, 9rem); }
.dkt__subtitle { font-size: 0.84rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ruby-hot); margin-top: 0.8rem; }
.dkt__summary { margin-top: 1rem; color: var(--cream-dim); font-size: 1rem; line-height: 1.65; max-width: 60ch; }
.dkt__jump { margin-top: 1.6rem; justify-content: flex-start; }
.dkt__note { margin: 0.8rem 0 1rem; font-size: 0.84rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-dim); }
.dkt__toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.4rem; }
.dkt__toolbar input, .dkt__toolbar select {
  background: var(--ink-2); color: var(--cream);
  border: 1px solid rgba(244, 239, 230, 0.2); border-radius: 8px;
  font-family: var(--body); font-size: 0.9rem;
  padding: 0.55em 0.9em; min-width: 0;
}
.dkt__toolbar input { flex: 2 1 12rem; }
.dkt__toolbar select { flex: 1 1 9rem; }
.dkt__toolbar input:focus, .dkt__toolbar select:focus { outline: none; border-color: var(--ruby); }
.dkt__group { margin-bottom: 1.2rem; border: 1px solid rgba(244, 239, 230, 0.1); border-radius: 14px; background: rgba(20, 16, 14, 0.55); }
.dkt__group summary {
  cursor: pointer; list-style: none; padding: 0.9rem 1.2rem;
  font-family: var(--display); font-size: 1.1rem; letter-spacing: 0.06em; text-transform: uppercase;
  display: flex; align-items: center; gap: 0.8rem;
}
.dkt__group summary::-webkit-details-marker { display: none; }
.dkt__group summary::before { content: "▸"; color: var(--ruby-hot); transition: transform 0.25s; }
.dkt__group[open] summary::before { transform: rotate(90deg); }
.dkt__count {
  font-family: var(--body); font-size: 0.78rem; letter-spacing: 0.2em;
  border: 1px solid var(--ruby); border-radius: 100px; padding: 0.25em 0.8em; color: var(--ruby-hot);
}
.dkt__catdesc {
  padding: 0 1.2rem 0.9rem; margin-top: -0.2rem;
  color: var(--cream-dim); font-size: 0.9rem; line-height: 1.6; max-width: 70ch;
  border-left: 2px solid var(--ruby); margin-left: 1.2rem; padding-left: 0.9rem;
}
#dktCatDesc { margin: 0 0 1rem; padding: 0 0 0 0.9rem; }
.dkt__cards { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); padding: 0 1.2rem 1.2rem; }

/* the tab rail: one click sorts the room */
.dkt__tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.2rem 0 1rem; }
.dkt__sorts { display: flex; gap: 0.4rem; align-items: center; }
.dkt__tab {
  background: var(--ink-2); color: var(--cream-dim); cursor: pointer;
  border: 1px solid rgba(244, 239, 230, 0.18); border-radius: 100px;
  font-family: var(--body); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.5em 1em;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.dkt__tab i { font-style: normal; color: var(--ruby-hot); margin-left: 0.35em; }
.dkt__tab:hover { color: var(--cream); border-color: var(--ruby); }
.dkt__tab.is-on { background: var(--ruby); border-color: var(--ruby); color: var(--cream); }
.dkt__tab.is-on i { color: var(--cream); }
.dkt__tab.is-parsing { animation: loadFlash 1.2s steps(2) infinite; }
@media (prefers-reduced-motion: reduce) { .dkt__tab.is-parsing { animation: none; } }

/* compact case-file cards: the whole card is the click */
.dkt__cards--flat { padding: 0; grid-template-columns: repeat(auto-fill, minmax(min(12.5rem, 100%), 1fr)); gap: 0.7rem; }
.dkt__card--sm { display: block; color: inherit; padding: 0.8rem 0.9rem; }
.dkt__card--sm h3 {
  font-size: 0.9rem; line-height: 1.35; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.dkt__card--sm .dkt__badge { font-size: 0.72rem; padding: 0.25em 0.75em; margin-bottom: 0.45rem; }
.dkt__card--sm .dkt__meta { font-size: 0.72rem; margin-top: 0.4rem; }
.dkt__srclink {
  display: inline-block; margin-top: 0.45rem; cursor: pointer;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ruby-hot); border-bottom: 1px dashed var(--ruby);
}
.dkt__srclink:hover { color: var(--cream); }
.dkt > .dkt__cards { padding: 0; }
.dkt__card {
  position: relative; overflow: hidden;
  border: 1px solid rgba(244, 239, 230, 0.14); border-radius: 12px;
  background: var(--ink-2); padding: 1rem 1.1rem;
  transition: transform 0.25s ease, border-color 0.25s, box-shadow 0.25s;
}
.dkt__card:hover {
  transform: translateY(-4px); border-color: var(--ruby);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 22px rgba(193, 18, 31, 0.25);
}
/* the red scanline sweeping the case file on hover */
.dkt__card::after {
  content: ""; position: absolute; left: 0; right: 0; top: -20%; height: 12%;
  background: linear-gradient(180deg, transparent, rgba(229, 56, 59, 0.22), transparent);
  opacity: 0; pointer-events: none;
}
.dkt__card:hover::after { opacity: 1; animation: dktScan 1.1s linear infinite; }
@keyframes dktScan { from { top: -20%; } to { top: 108%; } }
@media (prefers-reduced-motion: reduce) { .dkt__card:hover::after { animation: none; opacity: 0; } }
.dkt__badge {
  display: inline-block; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ruby-hot); border: 1px solid var(--ruby); border-radius: 100px;
  padding: 0.3em 0.9em; margin-bottom: 0.55rem;
}
.dkt__card h3 { font-size: 0.98rem; line-height: 1.35; }
.dkt__sub { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-dim); margin-top: 0.3rem; }
.dkt__meta { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-dim); margin-top: 0.35rem; }
.dkt__desc { font-size: 0.9rem; color: var(--cream-dim); line-height: 1.55; margin-top: 0.55rem; }
.dkt__acts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.dkt__btn {
  font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
  border-radius: 100px; padding: 0.5em 1.1em;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.dkt__btn--official { border: 1px solid var(--ruby); color: var(--cream); }
.dkt__btn--official:hover { background: var(--ruby); }
.dkt__btn--local { border: 1px solid rgba(244, 239, 230, 0.3); color: var(--cream-dim); }
.dkt__btn--local:hover { border-color: var(--cream); color: var(--cream); }
.dkt__exp {
  border: 1px solid rgba(244, 239, 230, 0.14); border-radius: 12px;
  background: var(--ink-2); padding: 1.1rem 1.2rem;
}
.dkt__exp h3 { font-size: 0.92rem; color: var(--ruby-hot); margin-bottom: 0.5rem; }
.dkt__exp p { font-size: 0.9rem; color: var(--cream-dim); line-height: 1.6; }
.dkt__timeline { list-style: none; margin: 1.4rem 0; border-left: 2px solid var(--ruby); }
.dkt__timeline li { padding: 0.7rem 0 0.7rem 1.4rem; position: relative; cursor: default; }
.dkt__timeline li::before {
  content: ""; position: absolute; left: -7px; top: 1.15rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--ruby-hot);
}
.dkt__timeline b { font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.06em; color: var(--ruby-hot); display: block; }
.dkt__timeline span { color: var(--cream-dim); font-size: 0.9rem; }

/* the timeline rail at the top: sticky, and each node flashes as the parse reads its phase */
.dkt__rail {
  position: sticky; top: 3.4rem; z-index: 90;
  background: rgba(10, 8, 7, 0.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(244, 239, 230, 0.1);
  padding: 0.7rem clamp(0.6rem, 3vw, 2rem) 0.5rem;
  overflow-x: auto;
}
.dkt__tl { list-style: none; display: flex; align-items: flex-start; min-width: max-content; margin: 0 auto; max-width: 74rem; }
.dkt__tl li {
  position: relative; flex: 1 0 auto; min-width: 5rem;
  padding: 0.7rem 0.7rem 0.15rem; text-align: center; cursor: pointer;
}
.dkt__tl li::before {
  content: ""; position: absolute; top: 1.1rem; left: -50%; width: 100%; height: 2px;
  background: rgba(244, 239, 230, 0.18); z-index: 0;
}
.dkt__tl li:first-child::before { display: none; }
.dkt__tldot {
  position: relative; z-index: 1; display: block;
  width: 12px; height: 12px; margin: 0 auto 0.5rem;
  border-radius: 50%; background: var(--ink); border: 2px solid var(--ruby);
  transition: background 0.25s, box-shadow 0.25s;
}
.dkt__tl b { display: block; font-family: var(--display); font-size: 0.84rem; letter-spacing: 0.05em; color: var(--ruby-hot); line-height: 1.1; }
.dkt__tl em { display: block; font-style: normal; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-dim); margin-top: 0.2rem; }
.dkt__tl li:hover .dkt__tldot { background: var(--ruby); }
.dkt__tl li:hover b { color: var(--cream); }
.dkt__tl li.is-parsing .dkt__tldot {
  background: var(--ruby-hot);
  box-shadow: 0 0 0 4px rgba(229, 56, 59, 0.25), 0 0 16px rgba(229, 56, 59, 0.95);
  animation: tlFlash 0.85s ease-in-out infinite;
}
.dkt__tl li.is-parsing b { color: var(--cream); }
.dkt__tl li.is-parsing::before, .dkt__tl li.is-parsing + li::before { background: var(--ruby); }
@keyframes tlFlash { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.55); } }
.dkt__railhint { text-align: center; margin-top: 0.4rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244, 239, 230, 0.7); }
@media (prefers-reduced-motion: reduce) { .dkt__tl li.is-parsing .dkt__tldot { animation: none; } }
@media (max-width: 560px) { .dkt__rail { top: 3rem; } .dkt__railhint { display: none; } }

/* the 516R Release: the song that parses the room */
.dkt__release {
  margin-top: 1.8rem; padding: 1.1rem 1.3rem;
  border: 1px solid rgba(229, 56, 59, 0.4); border-radius: 14px;
  background: rgba(193, 18, 31, 0.08);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem;
}
.dkt__release .songhero__play { flex: none; }
.dkt__credit { flex: 1 1 20rem; color: var(--cream-dim); font-size: 0.9rem; line-height: 1.6; }
.dkt__credit b { color: var(--ruby-hot); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.84rem; }
.dkt__now {
  position: fixed; left: clamp(0.8rem, 3vw, 2rem); bottom: clamp(0.8rem, 3vw, 2rem); z-index: 120;
  background: rgba(10, 8, 7, 0.94); border: 1px solid var(--ruby); border-radius: 10px;
  padding: 0.6rem 0.9rem; max-width: min(24rem, calc(100vw - 1.6rem));
  font-size: 0.84rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 18px rgba(193, 18, 31, 0.3);
}
.dkt__now[hidden] { display: none; }
.dkt__now b { color: var(--ruby-hot); }
.dkt__now span { display: block; margin-top: 0.25rem; color: var(--cream-dim); font-size: 0.78rem; }
.dkt__bar {
  display: block; margin-top: 0.4rem;
  font-family: var(--display); font-style: normal;
  font-size: 0.95rem; letter-spacing: 0.05em; line-height: 1.25;
  color: var(--ruby-hot); text-transform: none;
  animation: dktBarIn 0.3s ease;
}
@keyframes dktBarIn { from { color: var(--cream); opacity: 0.4; } to { color: var(--ruby-hot); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dkt__bar { animation: none; } }
.dkt__group.is-parsing { border-color: var(--ruby); box-shadow: 0 0 24px rgba(193, 18, 31, 0.3); }
.dkt__group.is-parsing summary { color: var(--ruby-hot); }
.dkt__group.is-parsing summary::after {
  content: "● PARSING"; margin-left: auto;
  font-family: var(--body); font-size: 0.78rem; letter-spacing: 0.24em; color: var(--ruby-hot);
  animation: loadFlash 1.2s steps(2) infinite;
}
@media (prefers-reduced-motion: reduce) { .dkt__group.is-parsing summary::after { animation: none; } }

/* ============================================================
   THE ECOSYSTEM — brand hub (ecosystem.html) + brand pages (brand.html)
   ============================================================ */

/* ---- ecosystem hub ---- */
.ecohero {
  padding: clamp(6rem, 14vh, 10rem) clamp(1.2rem, 5vw, 4rem) clamp(2rem, 6vh, 4rem);
  max-width: 62rem;
}
.ecohero__title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.8rem, 9vw, 6.5rem); line-height: 0.9; margin: 0.4rem 0 1.2rem;
}
.ecohero__lede, .brandhero__lede {
  font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--cream-dim); max-width: 52ch;
}
.ecoseg {
  padding: clamp(2.4rem, 6vh, 4.5rem) clamp(1.2rem, 5vw, 4rem);
  border-top: 1px solid rgba(244, 239, 230, 0.08);
}
.ecoseg__head { max-width: 60rem; margin-bottom: clamp(1.6rem, 4vh, 2.6rem); }
.ecoseg__label {
  font-size: 0.84rem; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--ruby-hot); margin-bottom: 0.6rem;
}
.ecoseg__title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2rem, 5vw, 3.4rem); line-height: 0.95;
}
.ecoseg__blurb { color: var(--cream-dim); max-width: 56ch; margin-top: 0.8rem; }
.ecogrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.8rem);
}
.ecocard {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--ink-2); border: 1px solid rgba(244, 239, 230, 0.1);
  border-radius: 14px; overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.35s, box-shadow 0.35s;
}
.ecocard:hover {
  transform: translateY(-5px); border-color: rgba(229, 56, 59, 0.6);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(229, 56, 59, 0.15);
}
.ecocard__media {
  position: relative; aspect-ratio: 16 / 9; background: #1a1210 center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
}
.ecocard__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 8, 7, 0.15) 0%, rgba(10, 8, 7, 0.75) 100%);
}
.ecocard__logo {
  position: relative; z-index: 1; max-height: 46%; max-width: 62%;
  object-fit: contain; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.6));
}
.ecocard__mmark {
  position: relative; z-index: 1; font-family: var(--display); font-size: 3.2rem;
  color: var(--cream); opacity: 0.85;
}
.ecocard__text { padding: 1rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.ecocard__text h3 { font-family: var(--display); font-weight: 400; font-size: 1.5rem; letter-spacing: 0.01em; }
.ecocard__text p { color: var(--cream-dim); font-size: 0.92rem; line-height: 1.45; flex: 1; }
.ecocard__go { color: var(--ruby-hot); font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; }

/* ---- individual brand page ---- */
.brandhero { position: relative; }
.brandhero__sticky {
  position: relative; min-height: 82vh; display: flex; align-items: flex-end;
  overflow: hidden;
}
.brandhero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: #140e0c center/cover no-repeat; z-index: 0;
}
.brandhero__sticky .scrim--deep { z-index: 1; }
.brandhero__inner {
  position: relative; z-index: 2; width: 100%;
  padding: clamp(2rem, 8vh, 5rem) clamp(1.2rem, 5vw, 4rem);
  max-width: 66rem;
}
.brandhero--index .brandhero__inner, .brandpage .brandhero__inner:only-child { padding-top: clamp(6rem, 14vh, 9rem); }
.kicker--seg {
  font-size: 0.84rem; letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--ruby-hot); margin-bottom: 1rem;
}
.brandhero__logo {
  max-height: 74px; max-width: 60%; object-fit: contain; margin-bottom: 1rem;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.6));
}
.brandhero__title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.6rem, 9vw, 6rem); line-height: 0.9; margin-bottom: 0.7rem;
}
.brandhero__tag {
  font-size: clamp(1.05rem, 2vw, 1.45rem); color: var(--cream);
  max-width: 44ch; line-height: 1.35;
}
.brandfacts {
  display: flex; flex-wrap: wrap; gap: clamp(1rem, 3vw, 2.6rem);
  margin-top: clamp(1.4rem, 3vh, 2.2rem);
}
.brandfacts dt {
  font-size: 0.78rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--cream-dim); margin-bottom: 0.25rem;
}
.brandfacts dd { font-family: var(--display); font-weight: 400; font-size: 1.35rem; }
.brandbody {
  padding: clamp(2.4rem, 7vh, 5rem) clamp(1.2rem, 5vw, 4rem) clamp(4rem, 10vh, 7rem);
  max-width: 62rem;
}
.brandbody__summary {
  font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.6;
  color: var(--cream); max-width: 60ch; margin-bottom: clamp(1.8rem, 5vh, 3rem);
}
.brandhi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.6rem); margin-bottom: clamp(1.8rem, 5vh, 3rem);
}
.brandhi__card {
  background: var(--ink-2); border: 1px solid rgba(244, 239, 230, 0.1);
  border-radius: 12px; padding: 1.3rem 1.4rem;
}
.brandhi__card h3 {
  font-family: var(--display); font-weight: 400; font-size: 1.35rem;
  margin-bottom: 0.5rem; color: var(--ruby-hot);
}
.brandhi__card p { color: var(--cream-dim); line-height: 1.5; font-size: 0.98rem; }
.brandlinks { flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.6rem; }
.brandbody .song-gate { margin-top: 0.4rem; }
.brandbody__back { margin-top: 2rem; }
.brandbody__back a { color: var(--cream-dim); text-decoration: none; letter-spacing: 0.04em; }
.brandbody__back a:hover { color: var(--ruby-hot); }

@media (max-width: 600px) {
  .brandhero__sticky { min-height: 74vh; }
  .ecocard__media { aspect-ratio: 3 / 2; }
}

/* ============================================================
   HIRE — the sales landing room (hire.html)
   ============================================================ */
.hirepage .bexp { padding-bottom: clamp(5rem, 12vh, 8rem); }

/* recognition strip under the hero */
.hire__trust {
  display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem;
}
.hire__pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.42rem 0.85rem; border-radius: 999px;
  border: 1px solid rgba(244, 239, 230, 0.16); background: rgba(244, 239, 230, 0.04);
  font-size: 0.84rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-dim);
}
.hire__pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ruby-hot); box-shadow: 0 0 10px rgba(229, 56, 59, 0.8);
}

/* credibility stat bar */
.hire__stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(0.8rem, 2vw, 1.4rem); margin: 2.4rem 0 0;
}
.hire__stat {
  border: 1px solid rgba(244, 239, 230, 0.1); border-radius: 12px;
  padding: 1.1rem 1.2rem; background: var(--ink-2);
}
.hire__stat b {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1; color: var(--cream);
}
.hire__stat small { display: block; margin-top: 0.4rem; color: var(--cream-dim); font-size: 0.9rem; line-height: 1.4; }

/* engagement packages */
.hire__pkgs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.6rem); margin-top: 0.6rem;
}
.hire__pkg {
  display: flex; flex-direction: column; gap: 0.7rem;
  border: 1px solid rgba(244, 239, 230, 0.12); border-radius: 14px;
  padding: 1.5rem 1.5rem 1.6rem; background: var(--ink-2); position: relative;
}
.hire__pkg--feature { border-color: rgba(229, 56, 59, 0.55); box-shadow: 0 0 0 1px rgba(229, 56, 59, 0.15), 0 20px 50px rgba(0,0,0,0.4); }
.hire__pkg--feature::after {
  content: "Most booked"; position: absolute; top: -0.75rem; left: 1.5rem;
  background: var(--ruby); color: #fff; font-size: 0.78rem; letter-spacing: 0.18em;
  text-transform: uppercase; padding: 0.28rem 0.7rem; border-radius: 999px;
}
.hire__pkg h3 { font-family: var(--display); font-weight: 400; font-size: 1.5rem; }
.hire__pkg .hire__price { font-size: 0.9rem; color: var(--ruby-hot); letter-spacing: 0.06em; }
.hire__pkg ul { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.hire__pkg li { padding-left: 1.3rem; position: relative; color: var(--cream-dim); font-size: 0.92rem; line-height: 1.45; }
.hire__pkg li::before { content: "\2713"; position: absolute; left: 0; color: var(--ruby-hot); }
.hire__pkg .btn { margin-top: 0.4rem; text-align: center; }

/* FAQ */
.hire__faq { display: flex; flex-direction: column; gap: 0.6rem; }
.hire__faq details {
  border: 1px solid rgba(244, 239, 230, 0.1); border-radius: 10px;
  background: var(--ink-2); padding: 0 1.2rem;
}
.hire__faq summary {
  cursor: pointer; list-style: none; padding: 1rem 0; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.hire__faq summary::-webkit-details-marker { display: none; }
.hire__faq summary::after { content: "+"; color: var(--ruby-hot); font-size: 1.3rem; line-height: 1; transition: transform 0.25s; }
.hire__faq details[open] summary::after { transform: rotate(45deg); }
.hire__faq p { padding: 0 0 1.1rem; color: var(--cream-dim); line-height: 1.55; }

/* sticky mobile book bar */
.hire__sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: none; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding: 0.7rem clamp(1rem, 4vw, 1.4rem);
  background: rgba(10, 8, 7, 0.92); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(244, 239, 230, 0.12);
}
.hire__sticky span { font-size: 0.9rem; color: var(--cream-dim); }
.hire__sticky .btn { padding: 0.7rem 1.2rem; white-space: nowrap; }
@media (max-width: 720px) {
  .hire__sticky { display: flex; }
  .hirepage main { padding-bottom: 4.5rem; }
}

/* ============================================================
   FOUNDING OFFER — offer.html + the 360 pop-up CTA on the home loadout
   ============================================================ */
.offer__deal {
  border: 1px solid rgba(229, 56, 59, 0.5); border-radius: 16px;
  background: linear-gradient(160deg, rgba(30, 14, 14, 0.9), var(--ink-2));
  box-shadow: 0 0 0 1px rgba(229, 56, 59, 0.12), 0 24px 60px rgba(0, 0, 0, 0.5);
  padding: clamp(1.6rem, 4vw, 2.6rem); margin-top: 1.6rem;
}
.offer__price {
  font-family: var(--display); font-weight: 400; line-height: 0.95;
  font-size: clamp(2.6rem, 8vw, 4.6rem);
}
.offer__price span { color: var(--ruby-hot); }
.offer__price small { display: block; font-family: var(--body); font-size: 0.9rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-dim); margin-top: 0.5rem; }
/* annual / monthly billing toggle */
.offer__toggle {
  display: inline-flex; margin: 0 0 1.4rem; padding: 0.3rem;
  border: 1px solid rgba(244, 239, 230, 0.16); border-radius: 999px;
  background: rgba(10, 8, 7, 0.65);
}
.offer__bill {
  border: none; cursor: pointer; border-radius: 999px;
  padding: 0.55rem 1.2rem; background: transparent; color: var(--cream-dim);
  font-family: var(--body); font-weight: 700; font-size: 0.9rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}
.offer__bill em {
  font-style: normal; font-size: 0.78rem; letter-spacing: 0.08em;
  padding: 0.16rem 0.5rem; border-radius: 999px;
  background: rgba(229, 56, 59, 0.18); color: var(--ruby-hot);
  border: 1px solid rgba(229, 56, 59, 0.45); white-space: nowrap;
}
.offer__bill.is-on { background: var(--ruby); color: #fff; box-shadow: 0 6px 22px rgba(229, 56, 59, 0.4); }
.offer__bill.is-on em { background: rgba(255, 255, 255, 0.16); color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.offer__bill:focus-visible { outline: 2px solid var(--ruby-hot); outline-offset: 2px; }

/* the weekly shoot system, hour by hour */
.offer__week { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; margin-top: 1.3rem; }
.offer__week > div {
  border: 1px solid rgba(244, 239, 230, 0.12); border-radius: 12px;
  padding: 0.95rem 0.9rem; background: rgba(10, 8, 7, 0.5);
}
.offer__week b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.7rem; color: var(--ruby-hot); line-height: 1; }
.offer__week small { display: block; color: var(--cream-dim); line-height: 1.45; margin-top: 0.4rem; font-size: 0.84rem; letter-spacing: 0.04em; }

.offer__terms { list-style: none; margin: 1.4rem 0 0; display: flex; flex-direction: column; gap: 0.6rem; }
.offer__terms li { padding-left: 1.5rem; position: relative; line-height: 1.5; }
.offer__terms li::before { content: "\2713"; position: absolute; left: 0; color: var(--ruby-hot); font-weight: 700; }
.offer__terms b { color: var(--cream); }

/* scarcity meter */
.offer__spots { display: flex; align-items: center; gap: 0.9rem; margin-top: 1.6rem; flex-wrap: wrap; }
.offer__dots { display: flex; gap: 0.55rem; }
.offer__dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(244, 239, 230, 0.3); }
.offer__dot--open {
  border-color: var(--ruby-hot); background: rgba(229, 56, 59, 0.12);
  box-shadow: 0 0 14px rgba(229, 56, 59, 0.55); animation: offerPulse 1.8s ease-in-out infinite;
}
.offer__dot--taken { border-color: rgba(244, 239, 230, 0.25); background: rgba(244, 239, 230, 0.22); position: relative; }
.offer__dot--taken::after {
  content: "\2713"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 0.84rem; color: var(--ink); font-weight: 700;
}
@keyframes offerPulse { 0%, 100% { box-shadow: 0 0 10px rgba(229, 56, 59, 0.4); } 50% { box-shadow: 0 0 20px rgba(229, 56, 59, 0.85); } }
.offer__spotsnum { font-family: var(--display); font-weight: 400; font-size: 1.5rem; }
.offer__spotsnum span { color: var(--ruby-hot); }
.offer__note { color: var(--cream-dim); font-size: 0.9rem; letter-spacing: 0.06em; margin-top: 1.4rem; }

/* who it's for */
.offer__who { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.6rem; }
.offer__who span {
  padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid rgba(244, 239, 230, 0.14);
  font-size: 0.84rem; color: var(--cream-dim);
}

/* ---- the 360 pop-up on the home loadout section ---- */
.lo-offer {
  position: absolute; left: 50%; bottom: clamp(5.5rem, 12vh, 8rem); z-index: 6;
  transform: translate(-50%, 18px); transform-origin: center;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.4rem; border-radius: 999px;
  background: rgba(10, 8, 7, 0.72); backdrop-filter: blur(8px);
  border: 1px solid rgba(229, 56, 59, 0.6); box-shadow: 0 0 0 1px rgba(229, 56, 59, 0.15), 0 16px 40px rgba(0,0,0,0.5);
  color: var(--cream); text-decoration: none; font-size: 0.95rem;
  opacity: 0; pointer-events: none; transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2,0.8,0.2,1);
  white-space: nowrap; max-width: 92vw;
}
.lo-offer b { color: var(--ruby-hot); }
.lo-offer.is-shown { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); animation: loOfferPop 0.6s cubic-bezier(0.2,0.9,0.2,1), loOfferFlagrant 0.8s ease-in-out 0.6s infinite; }
@keyframes loOfferFlagrant {
  0%, 100% { border-color: rgba(229,56,59,0.55); box-shadow: 0 0 0 1px rgba(229,56,59,0.15), 0 16px 40px rgba(0,0,0,0.5); }
  50% { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.45), 0 0 40px rgba(229,56,59,0.95), 0 16px 40px rgba(0,0,0,0.55); }
}
.lo-offer.is-shown b { animation: loOfferTextFlash 0.8s steps(2, end) infinite; }
@keyframes loOfferTextFlash { 0%, 100% { color: var(--ruby-hot); text-shadow: 0 0 0 rgba(229,56,59,0); } 50% { color: #fff; text-shadow: 0 0 14px rgba(229,56,59,0.95); } }
.lo-offer__spark { width: 8px; height: 8px; border-radius: 50%; background: var(--ruby-hot); box-shadow: 0 0 12px rgba(229,56,59,0.9); animation: offerPulse 1.4s ease-in-out infinite; }
@keyframes loOfferPop { 0% { transform: translate(-50%, 22px) scale(0.92); } 60% { transform: translate(-50%, -4px) scale(1.03); } 100% { transform: translate(-50%, 0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .lo-offer.is-shown { animation: none; }
  .offer__dot--open { animation: none; }
}
@media (max-width: 560px) { .lo-offer { font-size: 0.9rem; padding: 0.7rem 1rem; white-space: normal; text-align: center; } }

/* ---- the hero orbit's 360 readout: locks on 360° and flashes when achieved ---- */
.hud__deg.is-360 {
  color: var(--ruby-hot);
  animation: deg360Flash 0.62s steps(1, end) infinite;
}
@keyframes deg360Flash {
  0%   { color: var(--ruby-hot); text-shadow: 0 0 26px rgba(229, 56, 59, 0.95); opacity: 1; }
  50%  { color: var(--cream);    text-shadow: 0 0 8px rgba(244, 239, 230, 0.4); opacity: 0.5; }
  100% { color: var(--ruby-hot); text-shadow: 0 0 26px rgba(229, 56, 59, 0.95); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .hud__deg.is-360 { animation: none; color: var(--ruby-hot); } }

/* ---- "Scroll slow !" — loud, flagrant, impossible to miss ---- */
.hud__reel {
  color: #fff; font-weight: 700; transform-origin: right center;
  animation: reelFlash 0.7s steps(1, end) infinite, reelPulse 1.05s ease-in-out infinite;
  will-change: transform, color;
}
@keyframes reelFlash {
  0%   { color: #fff;            text-shadow: 0 0 6px rgba(255,255,255,0.6), 0 0 20px rgba(229,56,59,0.75); }
  50%  { color: var(--ruby-hot); text-shadow: 0 0 12px rgba(229,56,59,0.95), 0 0 30px rgba(229,56,59,0.85), 0 0 46px rgba(229,56,59,0.55); }
  100% { color: #fff;            text-shadow: 0 0 6px rgba(255,255,255,0.6), 0 0 20px rgba(229,56,59,0.75); }
}
@keyframes reelPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
.hud__reel .hud__arrow {
  font-size: 1.35em; font-weight: 700;
  animation: reelBounce 0.55s cubic-bezier(0.3, 0, 0.25, 1) infinite;
}
@keyframes reelBounce {
  0%, 100% { transform: translateY(-5px); }
  50%      { transform: translateY(7px); }
}
@media (prefers-reduced-motion: reduce) {
  .hud__reel, .hud__reel .hud__arrow { animation: none; color: var(--ruby-hot); }
}

/* ---- IP page: the ownership record ---- */
.iprec { display: flex; flex-direction: column; border: 1px solid rgba(244, 239, 230, 0.1); border-radius: 12px; overflow: hidden; }
.iprec__row {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.9rem 1.2rem; border-bottom: 1px solid rgba(244, 239, 230, 0.07);
  background: var(--ink-2);
}
.iprec__row:last-child { border-bottom: 0; }
.iprec__k { color: var(--cream); font-size: 0.95rem; }
.iprec__v { color: var(--cream-dim); font-family: var(--display); letter-spacing: 0.06em; font-size: 1.05rem; white-space: nowrap; }
.iprec__v--live { color: var(--ruby-hot); }
.iprec__group { font-family: var(--display); font-weight: 400; font-size: 1.4rem; text-transform: uppercase; letter-spacing: 0.04em; margin: 1.6rem 0 0.7rem; color: var(--ruby-hot); }
.iprec__group:first-of-type { margin-top: 0.4rem; }
.iprec + .iprec__group { margin-top: 1.8rem; }

/* interview: the talk-your-answer hint */
.chat__michint { font-size: 0.9rem; color: var(--cream-dim); margin: 0.5rem 0 0; transition: color 0.3s; }
.chat__michint b { color: var(--cream); }
.chat__michint.is-flash { color: var(--ruby-hot); animation: reelPulse 0.5s ease-in-out 2; }

/* ============================================================
   SENIOR-READABLE SUBTEXT — bigger, thicker, higher contrast.
   The description/subtext was reading too thin and small.
   ============================================================ */
small { font-size: 1rem; font-weight: 500; }
.bexp__card small, .ecocard__text p, .brandhi__card p, .hire__stat small,
.hire__pkg li, .hire__faq p, .command__pitch, .offer__terms li, .offer__note,
.offer__who span, .iprec__k, .chat__michint, .bexp__panel p, .site-foot__note,
.work__answer, .ecoseg__blurb, .hire__faq summary, .brandfacts dt,
.songblock__tag, .offer__spotsnum {
  font-size: 1.14rem; font-weight: 500; line-height: 1.62;
}
.bio__body, .brandbody__summary, .songhero__sub { font-weight: 500; }
.bexp__card small, .ecocard__text p, .brandhi__card p, .hire__pkg li {
  color: var(--cream-dim);
}

/* ============================================================
   POLISH — custom cursor, film-cut transitions, finish
   ============================================================ */
/* --- custom cursor (desktop pointer only; js/polish.js drives it) --- */
.has-cursor, .has-cursor * { cursor: none !important; }
.has-cursor input, .has-cursor textarea, .has-cursor [contenteditable="true"] { cursor: text !important; }
.cur-ring, .cur-dot {
  position: fixed; top: 0; left: 0; z-index: 99999; pointer-events: none;
  border-radius: 50%; mix-blend-mode: difference; will-change: transform;
}
.cur-ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.5px solid #fff;
  transition: width .25s cubic-bezier(.2,.8,.2,1), height .25s cubic-bezier(.2,.8,.2,1),
    margin .25s cubic-bezier(.2,.8,.2,1), background .25s, opacity .3s;
}
.cur-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; transition: opacity .3s; }
.cur-hot .cur-ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: rgba(255,255,255,0.14); }
.cur-down .cur-ring { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
.cur-gone .cur-ring, .cur-gone .cur-dot { opacity: 0; }

/* --- film-cut page transition veil --- */
.pt-veil {
  position: fixed; inset: 0; z-index: 99998; background: var(--ink);
  transform: translateY(100%); pointer-events: none;
}
html.pt-out .pt-veil { transform: translateY(0); transition: transform .48s cubic-bezier(.7,0,.3,1); }

/* --- styled scrollbar --- */
* { scrollbar-width: thin; scrollbar-color: var(--ruby) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--ruby), var(--ruby-hot)); border-radius: 11px; border: 3px solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background: var(--ruby-hot); }

/* --- crisp focus ring --- */
:focus-visible { outline: 2px solid var(--ruby-hot); outline-offset: 3px; border-radius: 3px; }

/* ---- landscape phones: headline moves to the RIGHT column, panels keep the left,
       so the pinned frames never stack on themselves in short viewports ---- */
@media (orientation: landscape) and (max-height: 560px) {
  .command__head {
    left: auto; right: clamp(1.2rem, 4vw, 3rem);
    top: clamp(4.8rem, 26vh, 6.5rem);
    max-width: 42vw; text-align: right;
  }
  .command__head .kicker { justify-content: flex-end; }
  .command__head .section-title { font-size: clamp(1.5rem, 11vh, 2.6rem); }
  .command__head .work__answer { display: none; }
  .command__panels { right: auto; left: clamp(1.2rem, 4vw, 3rem); width: min(52vw, 44rem); max-width: none; bottom: clamp(2.2rem, 10vh, 3.6rem); min-height: 0; }
  .command__panel { max-width: 100%; }
  .command__title { font-size: clamp(1.2rem, 9vh, 1.9rem); }
  .command__pitch { font-size: clamp(0.8rem, 3.8vh, 0.95rem); line-height: 1.4; }
  /* the Scroll Slow frame: height-based type so SLOW never swallows the panel */
  .antiscroll__title { text-align: right; }
  .antiscroll__l1 { font-size: clamp(1.1rem, 9vh, 1.9rem); }
  .antiscroll__l2 { font-size: clamp(1.6rem, 15vh, 3rem); transform-origin: right center; }
  .antiscroll__l3 { font-size: clamp(1.3rem, 12vh, 2.4rem); }
  .antiabout { gap: 0.55rem; }
  .antiabout__points span { font-size: clamp(0.95rem, 6.5vh, 1.4rem); }
  .antiabout__phone { width: clamp(2.2rem, 12vh, 3rem); height: clamp(2.6rem, 15vh, 3.6rem); }
  .antiabout__sound { font-size: clamp(0.7rem, 3.6vh, 0.85rem); }
  .antiabout__enter-ic { width: clamp(3rem, 18vh, 4.2rem); height: clamp(3rem, 18vh, 4.2rem); }
  .antiabout__enter-txt { font-size: clamp(0.95rem, 6vh, 1.4rem); }
}

/* ---- mobile: stop the command-section header and cards from stacking ---- */
@media (max-width: 640px) {
  .command__head { top: clamp(3.6rem, 8.5vh, 4.8rem); max-width: 92vw; }
  .command__head .section-title { font-size: clamp(1.7rem, 7.5vw, 2.3rem); }
  .command__head .work__answer { display: none; }
  .command__head .kicker { margin-bottom: 0.4rem; }
  .command__panels { bottom: clamp(3.2rem, 8vh, 4.4rem); min-height: 0; }
  .command__title { font-size: clamp(1.45rem, 6.2vw, 1.95rem); margin-top: 0.35rem; }
  .command__pitch { font-size: 0.92rem; line-height: 1.42; margin-top: 0.45rem; }
  .command__meta { gap: 0.55rem; }
  .command__tag { font-size: 0.72rem; }
  .eu-ctas { gap: 0.38rem; margin-top: 0.6rem; }
  .eu-ctas a { font-size: 0.78rem; padding: 0.3em 0.65em; }
  .mbadge-set { margin-top: 0.55rem; }
}

/* ---- per-panel psychology-marker chips (song lyric pages) ---- */
.songblock__markers { display: flex; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; }
.psy-chip {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; padding: 0; border-radius: 50%;
  background: rgba(229, 56, 59, 0.12); border: 1.5px solid rgba(229, 56, 59, 0.5);
  color: var(--cream); cursor: pointer; position: relative; line-height: 0;
  animation: chipFlash 1.9s ease-in-out infinite;
  transition: background 0.25s, transform 0.2s;
}
.psy-chip::after { content: none !important; }
.psy-chip .psy__ic { width: 1.55em; height: 1.55em; margin: 0; animation: none; }
.psy-chip:hover, .psy-chip:focus-visible { background: rgba(229, 56, 59, 0.3); transform: translateY(-2px); }
.psy-chip:nth-child(2) { animation-delay: 0.5s; }
.psy-chip:nth-child(3) { animation-delay: 1s; }
@keyframes chipFlash {
  0%, 100% { box-shadow: 0 0 0 rgba(229, 56, 59, 0); border-color: rgba(229, 56, 59, 0.35); }
  50% { box-shadow: 0 0 18px rgba(229, 56, 59, 0.6); border-color: var(--ruby-hot); }
}
@media (prefers-reduced-motion: reduce) { .psy-chip { animation: none; } }

/* ---- floating pause: stop the music from anywhere ---- */
.float-pause {
  position: fixed; z-index: 150;
  right: clamp(1rem, 4vw, 2rem); top: 38%; bottom: auto;
  height: 3.3rem; padding: 0 1.1rem 0 0.95rem; border: none; border-radius: 999px;
  background: var(--ruby); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--body); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.08em;
  box-shadow: 0 10px 34px rgba(0,0,0,0.5), 0 0 0 1px rgba(229,56,59,0.4);
  animation: floatPausePulse 2.6s ease-in-out infinite;
  transition: background 0.2s, transform 0.2s;
}
.float-pause[hidden] { display: none; }
.float-pause svg { width: 1.25rem; height: 1.25rem; fill: currentColor; flex: none; }
.float-pause:hover { background: var(--ruby-hot); transform: translateY(-2px); }
@keyframes floatPausePulse {
  0%, 100% { box-shadow: 0 10px 34px rgba(0,0,0,0.5), 0 0 0 1px rgba(229,56,59,0.3); }
  50% { box-shadow: 0 10px 34px rgba(0,0,0,0.5), 0 0 24px rgba(229,56,59,0.55); }
}
@media (max-width: 560px) { .float-pause__label { display: none; } .float-pause { padding: 0; width: 3.3rem; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .float-pause { animation: none; } }
/* inside the Vaunt 360 lock the pause swaps sides and dresses in Vaunt orange,
   clearing the right rail where Back-to-top / Motion / Land live */
html.vr-locked .float-pause {
  right: auto; left: clamp(1rem, 4vw, 2rem);
  background: linear-gradient(120deg, #b23305, var(--vaunt));
  box-shadow: 0 10px 34px rgba(0,0,0,0.5), 0 0 0 1px rgba(248,76,10,0.45);
  animation: floatPausePulseVaunt 2.6s ease-in-out infinite;
}
html.vr-locked .float-pause:hover { background: var(--vaunt); }
@keyframes floatPausePulseVaunt {
  0%, 100% { box-shadow: 0 10px 34px rgba(0,0,0,0.5), 0 0 0 1px rgba(248,76,10,0.35); }
  50% { box-shadow: 0 10px 34px rgba(0,0,0,0.5), 0 0 24px rgba(248,76,10,0.6); }
}
@media (prefers-reduced-motion: reduce) { html.vr-locked .float-pause { animation: none; } }

/* ---- song gates pulse so people notice and tap "listen" ---- */
.song-gate { animation: gatePulse 2.6s ease-in-out infinite; }
@keyframes gatePulse {
  0%, 100% { border-color: rgba(244, 239, 230, 0.22); box-shadow: 0 0 0 rgba(229, 56, 59, 0); color: var(--cream-dim); }
  50% { border-color: var(--ruby-hot); box-shadow: 0 0 18px rgba(229, 56, 59, 0.45); color: var(--cream); }
}

/* ---- floating pause: spin + flash while the visitor scrolls ---- */
.float-pause--spin { animation: floatPauseFlash 0.42s steps(2, end) infinite; }
.float-pause--spin svg { animation: floatPauseSpin 0.6s linear infinite; }
@keyframes floatPauseSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes floatPauseFlash {
  0%, 100% { background: var(--ruby); box-shadow: 0 10px 34px rgba(0,0,0,0.5), 0 0 0 rgba(229,56,59,0); }
  50% { background: var(--ruby-hot); box-shadow: 0 10px 34px rgba(0,0,0,0.5), 0 0 30px rgba(229,56,59,0.95); }
}
@media (prefers-reduced-motion: reduce) {
  .song-gate, .float-pause--spin, .float-pause--spin svg { animation: none; }
}

/* ---- huge, flashy studio-booking buttons (Resources section) ---- */
.book-huge {
  display: inline-flex; align-items: center; gap: 0.4em; margin-top: 0.9rem;
  padding: 0.7em 1.3em; border-radius: 16px; position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--ruby), var(--ruby-hot));
  color: #fff !important; text-decoration: none; border: 2px solid rgba(255,255,255,0.25);
  font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: 1;
  font-size: clamp(1.4rem, 4.2vw, 2.6rem); letter-spacing: 0.02em;
  box-shadow: 0 12px 44px rgba(229,56,59,0.5);
  animation: bookHugePulse 1.35s ease-in-out infinite;
  will-change: transform;
}
.book-huge__arrow { display: inline-block; animation: bookHugeArrow 1s ease-in-out infinite; }
.book-huge::after {
  content: ""; position: absolute; top: 0; left: -70%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-18deg); animation: bookHugeSweep 1.9s linear infinite; pointer-events: none;
}
.book-huge:hover { animation-duration: 0.7s; transform: scale(1.03); }
@keyframes bookHugePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 12px 44px rgba(229,56,59,0.4); border-color: rgba(255,255,255,0.2); }
  50% { transform: scale(1.05); box-shadow: 0 14px 60px rgba(229,56,59,0.9), 0 0 34px rgba(229,56,59,0.7); border-color: #fff; }
}
@keyframes bookHugeArrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@keyframes bookHugeSweep { 0% { left: -70%; } 55%, 100% { left: 135%; } }

/* ---- Service Network frame: tags ride the right edge, buttons and seals sized down ---- */
#loadout .command__panel { width: 100%; }
/* the tag shares the title's line on the right, so the whole panel pulls up */
#loadout .command__meta { position: absolute; top: 0.35em; right: 0; margin: 0; justify-content: flex-end; }
#loadout .command__title { margin-top: 0; }
#loadout .book-huge {
  font-family: inherit; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.14em;
  padding: 0.45em 1em; border-radius: 6px; border: none; margin-top: 0.55rem; gap: 0.35em;
  background: var(--ruby); box-shadow: 0 0 18px rgba(229, 56, 59, 0.55);
  animation: fxJolt 3.4s linear infinite;
}
#loadout .book-huge::after { content: none; }
#loadout .book-huge__arrow { animation: none; }
#loadout .book-huge:hover { background: var(--ruby-hot); transform: none; }
#loadout .mbadge-set { margin-top: 0.7rem; gap: 0.4rem 0.55rem; }
#loadout .mbadge-set .mbadge-chip--org { width: 4.6rem; }
#loadout .mbadge-set .mbadge-chip--org .mbadge { width: 2em; }
#loadout .mbadge-set .mbadge-chip--org small { font-size: 0.72rem; }
@media (prefers-reduced-motion: reduce) {
  .book-huge, .book-huge__arrow, .book-huge::after { animation: none; }
  .lo-offer.is-shown, .lo-offer.is-shown b { animation: none; }
}

/* iOS Safari: use the dynamic viewport so bottom-anchored UI never hides
   behind the browser toolbar (100vh counts that hidden area; 100dvh doesn't) */
.hero__sticky, .command__sticky, .loadout__sticky { height: 100dvh; }

/* ============ THE STUDIO CARD — the end-credit line under the 360.
   The sales pitch used to shout here; now it reads like a title card. ============ */
.sitenote { padding: clamp(3.2rem, 10vh, 5.5rem) 1.4rem; }
/* THE INTERRUPT — small tile, loud as hell. Marching red frame,
   bold Anton type, a shine sweep, a blinking cue, and a red scan
   that fires every time it scrolls back into view. */
.sitenote__inner {
  position: relative; overflow: hidden;
  max-width: 40rem; margin: 0 auto; text-align: center;
  padding: 1.8rem 1rem;
  background:
    repeating-linear-gradient(90deg, var(--ruby-hot) 0 12px, transparent 12px 26px) left top / 26px 3px repeat-x,
    repeating-linear-gradient(90deg, var(--ruby-hot) 0 12px, transparent 12px 26px) left bottom / 26px 3px repeat-x;
  animation: snMarch 0.8s linear infinite;
}
@keyframes snMarch { to { background-position: 26px top, 26px bottom; } }
.sitenote__inner::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 34%, rgba(229, 56, 59, 0.32) 50%, transparent 66%);
  transform: translateX(-130%);
}
.sitenote__inner.is-hit::after { animation: snScan 0.95s ease 1; }
@keyframes snScan { to { transform: translateX(130%); } }
.sitenote__mark {
  position: relative; z-index: 1;
  font-family: var(--body); font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cream);
}
.sitenote__mark::before {
  content: "\25CF"; color: var(--ruby-hot); margin-right: 0.55em;
  animation: snBlink 1s steps(1, end) infinite;
}
@keyframes snBlink { 50% { opacity: 0.15; } }
.sitenote__line {
  position: relative; z-index: 1; margin: 0.7rem 0 0;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.35rem, 5.6vw, 1.95rem); line-height: 0.98; letter-spacing: 0.012em;
  text-transform: uppercase;
  background-image: linear-gradient(100deg, var(--cream) 42%, var(--ruby-hot) 50%, var(--cream) 58%);
  background-size: 260% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: snShine 3s linear infinite;
}
@keyframes snShine { to { background-position: -260% 0; } }
.sitenote__sub {
  display: block; margin-top: 0.45rem;
  font-family: var(--body); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.24em;
  color: var(--ruby-hot); -webkit-text-fill-color: var(--ruby-hot);
}
.sitenote__invite {
  position: relative; z-index: 1; margin: 0.85rem 0 0;
  font-family: var(--body); font-weight: 700; font-size: 0.9rem; color: var(--cream-dim);
}
@media (prefers-reduced-motion: reduce) {
  .sitenote__inner, .sitenote__mark::before, .sitenote__line, .sitenote__inner.is-hit::after { animation: none; }
  .sitenote__line { -webkit-text-fill-color: var(--cream); color: var(--cream); background: none; }
}
.sitenote__doors { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; }
.btn--sm { font-size: 0.74rem; letter-spacing: 0.18em; padding: 0.9em 1.7em; }

/* ============ app-style bottom tab bar ============ */
/* visitors said the old bar was damn near invisible — it's bigger now,
   runs a deep-red gradient, and carries a soft red glow so the doors
   into the apps read from across the room */
/* THE DOCK — a floating capsule, not a slab: dark glass hovering off the
   bottom edge, icon coins inside, and the page you're standing in sits in
   a filled gold coin. Depth comes from fill, blur, and shadow — no borders. */
:root { --appbar-h: 4.6rem; }
body.has-appbar { padding-bottom: calc(var(--appbar-h) + 1.4rem + env(safe-area-inset-bottom)); }
.appbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(0.85rem + env(safe-area-inset-bottom));
  z-index: 200; width: auto;
  display: flex; align-items: center; gap: 0.3rem;
  padding: 0.45rem;
  border-radius: 100px;
  background: linear-gradient(180deg, rgba(34, 28, 23, 0.82), rgba(16, 13, 11, 0.86));
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.appbar__tab {
  position: relative; display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%; flex: none;
  text-decoration: none; color: var(--cream);
  transition: color 0.2s, transform 0.2s, background 0.25s;
}
/* the names live on for screen readers and the wing slots; the coins speak */
.appbar__tab > span {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.appbar__tab svg { width: 1.5rem; height: 1.5rem; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.appbar__m { width: 1.7rem; height: 1.7rem; object-fit: contain; }
.appbar__tab:active { transform: scale(0.92); }
.appbar__tab:hover { color: #e5383b; }
/* the coin: where you are (and, mid-morph, the wing you opened) */
.appbar__tab.is-here, .appbar__tab.is-active {
  background: var(--metal);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 26px -8px rgba(229,56,59, 0.6);
}
/* the center emblem's coin: a soft, translucent white disc — not the red one */
.appbar__tab[data-appnav="home"].is-here,
.appbar__tab[data-appnav="home"].is-active {
  background: rgba(255, 255, 255, 0.15);
  color: var(--cream);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 20px -8px rgba(0, 0, 0, 0.3);
}
/* wing slots carry their names — new rooms deserve labels */
.appbar__tab--slot {
  width: auto; min-width: 72px; height: 54px; border-radius: 100px;
  padding: 0 0.95rem; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13);
}
.appbar__tab--slot > span {
  position: static; width: auto; height: auto; clip: auto; clip-path: none;
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.appbar__tab--slot svg { width: 1.2rem; height: 1.2rem; }
/* Spaces answers in its own color — bright sky blue rides with the gold */
.appbar__tab[data-appnav="spaces"]:hover { color: #45b6ff; }

/* clear the bar: lift bottom-anchored immersive content + page chrome above it */
.antiabout { bottom: calc(clamp(2rem, 7vh, 4rem) + var(--appbar-h)); }
.finale { padding-bottom: calc(6rem + var(--appbar-h)); }
.site-foot { padding-bottom: calc(2.5rem + var(--appbar-h)); }
.float-pause { bottom: auto; }

/* identity marker card: the flip (inversion) */
.psycard__ichead .psy__ic { transition: transform 0.3s ease; }
.psycard__ichead .psy__ic.is-flipped { transform: scaleX(-1); }
.psycard__body--dim { color: var(--cream-dim); font-size: 0.92em; margin-top: 0.5rem; }

/* markers attached inline to the lyric they belong to, flashing red/blue like
   police lights, the sprite flipping between its two poles */
/* a marked bar and its chips read as ONE underlined unit */
.songblock__line.has-marks {
  text-decoration: underline;
  text-decoration-color: rgba(229, 56, 59, 0.65);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.24em;
}
.lyric-marks { display: inline-flex; gap: 0.18em; vertical-align: middle; margin-left: 0.4em;
  border-bottom: 2px solid rgba(229, 56, 59, 0.65); padding-bottom: 0.14em; }
.lyric-marks .psy-chip {
  width: 1.9em; height: 1.9em; padding: 0; border: none; background: none; border-radius: 4px;
  animation: psyPolice 0.66s steps(1, end) infinite;
}
.lyric-marks .psy-chip:nth-child(2) { animation-delay: 0.33s; }
.lyric-marks .psy-chip:nth-child(3) { animation-delay: 0.16s; }
.lyric-marks .psy-chip:hover { transform: none; background: none; }
.lyric-marks .psy-chip .psy__ic { width: 100%; height: 100%; animation: none; }
@keyframes psyPolice {
  0%, 49.9% { color: #2f6bff; transform: scaleX(1); filter: drop-shadow(0 0 5px rgba(47,107,255,0.8)); }
  50%, 100% { color: #ff3535; transform: scaleX(-1); filter: drop-shadow(0 0 5px rgba(255,53,53,0.85)); }
}
@media (prefers-reduced-motion: reduce) { .lyric-marks .psy-chip { animation: none; color: var(--ruby-hot); } }

/* ============================================================
   GET THE APP — one-tap install, no app store.
   The pill rides the hero; the bands sit mid-experience and at
   the door. Installed (standalone) visitors never see the ask.
   ============================================================ */
html.is-installed .getapp, html.is-installed .getapp-pill { display: none !important; }
.getapp-pill {
  margin-top: 1.1rem; border: 1px solid rgba(244, 239, 230, 0.3); cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.7em 1.4em; border-radius: 100px;
  background: rgba(10, 8, 7, 0.55); backdrop-filter: blur(8px);
  color: var(--cream); font: inherit; font-size: 0.84rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  animation: getappGlow 2.4s ease-in-out infinite;
  transition: border-color 0.25s, background 0.25s, transform 0.2s;
}
.getapp-pill:hover { border-color: var(--ruby-hot); background: rgba(193, 18, 31, 0.3); transform: translateY(-2px); }
.getapp-pill svg { width: 1.1rem; height: 1.1rem; stroke: var(--ruby-hot); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes getappGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(229, 56, 59, 0); }
  50% { box-shadow: 0 0 22px rgba(229, 56, 59, 0.5); }
}
.getapp {
  padding: clamp(3.5rem, 10vh, 6rem) clamp(1.2rem, 5vw, 3.5rem);
  text-align: center; position: relative; overflow: hidden;
  background: radial-gradient(90% 120% at 50% 0%, rgba(60, 14, 14, 0.55), transparent 70%);
}
.getapp--last { border-top: 1px solid rgba(244, 239, 230, 0.1); }
.getapp__inner { max-width: 34rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.getapp__icon { width: 64px; height: 64px; border-radius: 15px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(244, 239, 230, 0.14);
  animation: getappBob 3s ease-in-out infinite; }
@keyframes getappBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.getapp__h { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: 0.95;
  font-size: clamp(1.9rem, 8vw, 3.2rem); }
.getapp__sub { color: var(--cream-dim); font-size: 0.95rem; line-height: 1.6; max-width: 44ch; }
.getapp__sub b { color: var(--cream); }
.getapp__btn {
  margin-top: 0.5rem; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 1.05em 2.2em; border-radius: 100px;
  background: linear-gradient(120deg, var(--ruby), var(--ruby-hot)); color: #fff;
  font-family: var(--display); font-size: clamp(1rem, 3.2vw, 1.3rem);
  letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 0 14px 44px rgba(229, 56, 59, 0.45);
  animation: wantBtnPulse 2.2s ease-in-out infinite;
  transition: transform 0.25s;
}
.getapp__btn:hover { transform: scale(1.04); }
.getapp__btn svg { width: 1.2em; height: 1.2em; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .getapp-pill, .getapp__icon, .getapp__btn { animation: none; } }

/* the coach sheet: iOS (and anyone without the native prompt) */
.getapp-coach {
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: end center;
  background: rgba(10, 8, 7, 0.75); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.getapp-coach.is-on { opacity: 1; pointer-events: auto; }
.getapp-coach__card {
  width: min(30rem, calc(100% - 1.6rem));
  margin-bottom: calc(1rem + env(safe-area-inset-bottom));
  border-radius: 20px; border: 1px solid rgba(244, 239, 230, 0.16);
  background: var(--ink-2); padding: 1.6rem 1.4rem;
  text-align: center; transform: translateY(20px); transition: transform 0.3s;
}
.getapp-coach.is-on .getapp-coach__card { transform: translateY(0); }
.getapp-coach__card img { width: 56px; height: 56px; border-radius: 13px; margin-bottom: 0.6rem; }
.getapp-coach__card b { display: block; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.35rem; margin-bottom: 0.7rem; }
.getapp-coach__card p { display: flex; align-items: center; justify-content: center; gap: 0.5em; color: var(--cream-dim); font-size: 0.92rem; line-height: 1.5; margin: 0.35rem 0; flex-wrap: wrap; }
.getapp-coach__card p b { display: inline; font-family: var(--body); font-size: inherit; text-transform: none; color: var(--cream); margin: 0; }
.getapp-coach__card p span { flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--ruby); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.84rem; font-weight: 700; }
.getapp-coach__card p svg { width: 1.25rem; height: 1.25rem; stroke: var(--ruby-hot); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.getapp-coach__note { font-size: 0.84rem !important; color: var(--cream-dim); margin-top: 0.7rem !important; }
.getapp-coach__card button {
  margin-top: 1rem; border: none; cursor: pointer; border-radius: 100px;
  padding: 0.8em 2.4em; background: linear-gradient(120deg, var(--ruby), var(--ruby-hot));
  color: #fff; font: inherit; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.9rem;
}

/* ---- support the mission: the donation link rides the hero, unmissable ---- */
.support-pill {
  margin-top: 0.6rem; display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.7em 1.4em; border-radius: 100px; text-decoration: none;
  background: linear-gradient(120deg, var(--ruby), var(--ruby-hot)); color: #fff;
  font-size: 0.84rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: 0 10px 34px rgba(229, 56, 59, 0.45);
  animation: wantBtnPulse 2.4s ease-in-out infinite;
  transition: transform 0.2s;
}
.support-pill:hover { transform: translateY(-2px) scale(1.02); }
.support-pill svg { width: 1.05rem; height: 1.05rem; fill: #fff; }
@media (prefers-reduced-motion: reduce) { .support-pill { animation: none; } }

/* the open door: a quiet second entrance under the hero pills */
.hero__door {
  display: inline-block; margin-top: 0.7rem; text-decoration: none;
  color: rgba(244, 239, 230, 0.7); font-size: 0.82rem; letter-spacing: 0.02em;
  border-bottom: 1px dashed rgba(244, 239, 230, 0.25); padding-bottom: 0.1rem;
  transition: color 0.2s;
}
.hero__door b { color: var(--cream); }
.hero__door:hover { color: var(--cream); }

/* ---- the autopilot: exit card + the appbar signal dot ---- */
.exitov {
  position: fixed; inset: 0; z-index: 420; display: grid; place-items: center;
  background: rgba(10, 8, 7, 0.78); backdrop-filter: blur(6px);
  animation: exitovIn 0.25s ease-out both;
}
@keyframes exitovIn { from { opacity: 0; } to { opacity: 1; } }
.exitov__card {
  width: min(26rem, calc(100% - 2rem)); text-align: center;
  border: 1px solid rgba(229, 56, 59, 0.5); border-radius: 20px;
  background: linear-gradient(160deg, rgba(30, 14, 14, 0.95), var(--ink-2));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); padding: 2rem 1.6rem 1.8rem;
}
.exitov__voice { font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ruby-hot); font-weight: 700; }
.exitov__card h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.5rem, 6vw, 2.1rem); line-height: 1; margin: 0.6rem 0 0.4rem; }
.exitov__sub { color: var(--cream-dim); font-size: 0.9rem; line-height: 1.55; }
.exitov__acts { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.2rem; }
@media (prefers-reduced-motion: reduce) { .exitov { animation: none; } }

.appbar__tab.has-signal { position: relative; }
.appbar__tab.has-signal::after {
  content: ""; position: absolute; top: 6px; right: 22%;
  width: 7px; height: 7px; border-radius: 50%; background: var(--ruby-hot);
  box-shadow: 0 0 8px rgba(229, 56, 59, 0.9);
  animation: offerPulse 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .appbar__tab.has-signal::after { animation: none; } }

/* ---- the Fly with Vaunt pill: between the Brand Collabs head and the slow-hand ask ---- */
.work__flypill {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: clamp(7.5rem, 17vh, 10rem); z-index: 8;
  opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
}
.work__flypill.is-shown { opacity: 1; pointer-events: auto; }

/* the coach shows the REAL share sheet — the ring marks the row to tap */
.getapp-coach__shot { display: block; position: relative; margin-top: 0.7rem; border-radius: 12px; overflow: hidden; }
.getapp-coach__shot img { display: block; width: 100%; height: auto; }
.getapp-coach__shot i {
  position: absolute; left: 2%; right: 2%; top: 47%; bottom: 5%;
  border: 3px solid var(--ruby-hot); border-radius: 12px;
  box-shadow: 0 0 0 4px rgba(229, 56, 59, 0.25), 0 0 18px rgba(229, 56, 59, 0.55);
  animation: coachRing 1.4s ease-in-out infinite;
}
@keyframes coachRing {
  0%, 100% { box-shadow: 0 0 0 3px rgba(229, 56, 59, 0.2), 0 0 12px rgba(229, 56, 59, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(229, 56, 59, 0.35), 0 0 26px rgba(229, 56, 59, 0.8); }
}
@media (prefers-reduced-motion: reduce) { .getapp-coach__shot i { animation: none; } }

/* ---- the app trail: pages opened from The App keep the thread ---- */
.app-crumb {
  position: fixed; top: calc(0.8rem + env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%); z-index: 210;
  padding: 0.45em 1.1em; border-radius: 100px; text-decoration: none;
  background: rgba(10, 8, 7, 0.75); backdrop-filter: blur(8px);
  border: 1px solid rgba(229, 56, 59, 0.5); color: var(--cream);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.app-crumb:hover { background: rgba(193, 18, 31, 0.4); }

/* ---- the M tab: the mark itself is the way home ---- */
.appbar__m { width: 1.75rem; height: 1.75rem; object-fit: contain; display: block; }
/* daytime only: the dock's center emblem swaps its white M for black so
   it reads on the light bar — red slashes stay red. This location only. */
html[data-theme="light"] .appbar__m { content: url("../assets/img/m-mark-dark.png"); }

/* ---- WE · Whip Equipped: the rides wing. The mark is its own black
       app tile, so it rides bare with an ember ring on the dark bar. ---- */
.appbar__tab--we .appbar__m,
.appbar__tab[data-appnav="we"] .appbar__m {
  width: 1.9rem; height: 1.9rem; border-radius: 8px;
  box-shadow: 0 0 12px rgba(255, 92, 46, 0.35), 0 0 0 1px rgba(244, 239, 230, 0.18);
}
.appbar__tab[data-appnav="we"]:hover,
.appbar__tab[data-appnav="we"].is-active { color: #ff5c2e; }
.appbar__tab[data-appnav="we"].is-active .appbar__m {
  box-shadow: 0 0 16px rgba(255, 92, 46, 0.65), 0 0 0 1px rgba(244, 239, 230, 0.25);
}

/* ---- THE MORPHING DOCK: the bar becomes each wing's own menu ---- */
.dk-ic { font-size: 1.3rem; line-height: 1.75rem; display: block; }
.appbar--morph .appbar__tab { animation: dockIn 0.28s cubic-bezier(0.2, 0.9, 0.2, 1) backwards; }
.appbar--morph .appbar__tab:nth-child(2) { animation-delay: 0.04s; }
.appbar--morph .appbar__tab:nth-child(3) { animation-delay: 0.08s; }
.appbar--morph .appbar__tab:nth-child(4) { animation-delay: 0.12s; }
.appbar--morph .appbar__tab:nth-child(5) { animation-delay: 0.16s; }
@keyframes dockIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.appbar__tab--wing { color: #e5383b; }
@media (prefers-reduced-motion: reduce) { .appbar--morph .appbar__tab { animation: none; } }

/* ---- THE OFFER STAGE: one way on stage at a time ---- */
.offer-hero { margin: 1.6rem 0 0; border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(232, 200, 119, 0.35); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5); }
.offer-hero img { display: block; width: 100%; }
button.hire__pill { font: inherit; cursor: pointer; }
.ostage { max-width: 34rem; }
.ostage__card { animation: dockIn 0.35s cubic-bezier(0.2, 0.9, 0.2, 1); }
.ostage__nav { display: flex; align-items: center; gap: 1rem; margin-top: 0.9rem; }
.ostage__dots { display: flex; gap: 0.4rem; }
.ostage__dots i { width: 1.6rem; height: 4px; border-radius: 4px; background: rgba(244, 239, 230, 0.18); }
.ostage__dots i.is-lit { background: #e5383b; }

/* ---- THE LENS: documents pop up in place ---- */
.lens { position: fixed; inset: 0; z-index: 320; display: grid; place-items: center; padding: 1.2rem; }
.lens__bg { position: absolute; inset: 0; background: rgba(5, 4, 3, 0.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lens__card { position: relative; max-width: min(92vw, 34rem); max-height: 88dvh; display: flex; flex-direction: column;
  border-radius: 18px; overflow: hidden; border: 1px solid rgba(232, 200, 119, 0.5);
  background: #14100d; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7); animation: dockIn 0.3s cubic-bezier(0.2, 0.9, 0.2, 1); }
.lens__card img { display: block; width: 100%; min-height: 0; object-fit: contain; overflow: auto; background: #f4efe6; }
.lens__card figcaption { display: flex; align-items: baseline; gap: 0.8rem; justify-content: space-between;
  padding: 0.75rem 1rem; font-size: 0.86rem; color: var(--cream-dim); }
.lens__card figcaption a { color: #e5383b; font-weight: 800; text-decoration: none; white-space: nowrap; }
.lens__x { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; width: 2.1rem; height: 2.1rem;
  border-radius: 50%; border: 0; cursor: pointer; background: rgba(10, 8, 7, 0.85); color: #f4efe6;
  font-size: 0.95rem; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); }

/* ---- THE SOUND EXCEPTION: playing music turns the tab into pause ---- */
.appbar__tab { position: relative; }
.appbar__tab.is-sound svg, .appbar__tab.is-sound .dk-ic { opacity: 0.25; }
.appbar__tab.is-sound::before { content: "⏸"; position: absolute; top: 0.35rem; left: 50%;
  transform: translateX(-50%); font-size: 1.15rem; line-height: 1.75rem; color: #e5383b;
  text-shadow: 0 0 12px rgba(229, 56, 59, 0.6); }

/* ---- THE PEEK: one tap looks — the card that explains a door ---- */
.dk-peek { position: fixed; left: 50%; transform: translateX(-50%); z-index: 205;
  bottom: calc(var(--appbar-h, 4.4rem) + env(safe-area-inset-bottom) + 0.9rem);
  width: min(100% - 1.6rem, 26rem); }
.dk-peek__card { border: 0; border-radius: 22px;
  background: rgba(20, 16, 13, 0.88); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2);
  padding: 1.05rem 1.1rem 1.1rem; box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(244, 239, 230, 0.08);
  animation: dockIn 0.26s cubic-bezier(0.2, 0.9, 0.2, 1); }
.dk-peek__top { display: flex; gap: 0.7rem; align-items: flex-start; }
.dk-peek__ic { font-size: 1.6rem; line-height: 1.2; }
.dk-peek__top b { display: block; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.15rem; }
.dk-peek__top small { display: block; color: var(--cream-dim); font-size: 0.86rem; line-height: 1.55; margin-top: 0.2rem; }
.dk-peek__acts { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.8rem; }
.dk-peek__go { font: inherit; font-weight: 900; letter-spacing: 0.03em; border: 0; cursor: pointer;
  background: linear-gradient(180deg, #e5383b, #e5383b); color: #0a0807; border-radius: 100px;
  padding: 0.6em 1.3em; flex: 1; min-width: 9rem; }
.dk-peek__alt { font: inherit; font-weight: 700; border: 1px solid rgba(244, 239, 230, 0.3); cursor: pointer;
  background: none; color: var(--cream); border-radius: 100px; padding: 0.6em 1.1em; }
.dk-peek__full { flex: none; align-self: flex-start; color: #e5383b; font-size: 0.78rem; font-weight: 800;
  text-decoration: none; letter-spacing: 0.06em; text-transform: uppercase; }
.dk-w { margin-top: 0.7rem; }
.dk-w__in { width: 100%; box-sizing: border-box; background: rgba(244, 239, 230, 0.06); color: var(--cream);
  border: 1px solid rgba(244, 239, 230, 0.22); border-radius: 10px; padding: 0.65rem 0.8rem; font: inherit;
  font-size: 0.95rem; margin-top: 0.45rem; }
.dk-w__in:focus { outline: none; border-color: #e5383b; }
.dk-w__out { color: var(--cream-dim); font-size: 0.9rem; line-height: 1.55; margin-top: 0.6rem; min-height: 1.2em; }
.dk-w__row { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.5rem 0; font-size: 0.92rem;
  border-top: 1px dashed rgba(244, 239, 230, 0.14); }
.dk-w__row:first-child { border-top: 0; }
.dk-w__row small { color: var(--cream-dim); }
.dk-w__row a { margin-left: auto; color: #ff5c2e; font-weight: 800; text-decoration: none; }

/* ---- THE DOCK WALK: the first-boot lesson; the bar stays live above it ---- */
.dockwalk { position: fixed; inset: 0; z-index: 199; background: rgba(5, 4, 3, 0.88);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 1rem 1rem calc(var(--appbar-h, 4.4rem) + env(safe-area-inset-bottom) + 2.2rem); }
.dockwalk__card { max-width: 26rem; width: 100%; border: 1px solid rgba(232, 200, 119, 0.4);
  border-radius: 18px; background: rgba(18, 14, 11, 0.96); padding: 1.2rem 1.25rem 1.3rem;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6); animation: dockIn 0.35s cubic-bezier(0.2, 0.9, 0.2, 1);
  color: #f4efe6; }
/* the skip button rides the card's dark bg, not the page's theme */
.dockwalk__card .dk-peek__alt { color: #f4efe6; border-color: rgba(244, 239, 230, 0.42); }
.dockwalk__k { font-size: 0.74rem; letter-spacing: 0.26em; text-transform: uppercase; color: #e5383b; font-weight: 800; }
/* The card paints its OWN near-black background, so its ink can never be
   inherited from the page — in light theme that inherited ink is dark and
   the whole lesson goes invisible. Every colour here is stated outright. */
.dockwalk__card h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.5rem; margin-top: 0.35rem;
  color: #f4efe6; }
.dockwalk__card p:not(.dockwalk__k) { color: rgba(244, 239, 230, 0.78); line-height: 1.65; font-size: 0.95rem; margin-top: 0.4rem; }
.dockwalk__dots { display: flex; gap: 0.4rem; margin-top: 0.9rem; }
.dockwalk__dots i { width: 1.6rem; height: 4px; border-radius: 4px; background: rgba(244, 239, 230, 0.18); }
.dockwalk__dots i.is-lit { background: #e5383b; }
.dockwalk__btn { margin-top: 1rem; font: inherit; font-weight: 900; letter-spacing: 0.04em; border: 0; cursor: pointer;
  background: linear-gradient(180deg, #e5383b, #e5383b); color: #0a0807; border-radius: 100px; padding: 0.75em 1.6em; }

/* ---- the tab prompt: sound lives in the center tab now ---- */
.antiabout__tabprompt { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; margin-top: 1.4rem; text-align: center; }
.antiabout__tabprompt-txt { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: clamp(1.05rem, 3.6vw, 1.5rem); line-height: 1.25; color: var(--cream); }
.antiabout__tabprompt-txt b { color: var(--ruby-hot); }
.antiabout__tabprompt-txt small { display: block; font-family: var(--body); font-size: 0.78rem;
  letter-spacing: 0.18em; color: var(--cream-dim); margin-top: 0.35rem; }
.antiabout__tabprompt-arrow { width: 30px; height: 30px; stroke: var(--ruby-hot); fill: none; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 10px rgba(229, 56, 59, 0.8));
  animation: npbeakDip 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .antiabout__tabprompt-arrow { animation: none; } }

/* ---- the footer, tightened: columns instead of a mile of links ---- */
.site-foot { padding-bottom: calc(var(--appbar-h, 3.7rem) + env(safe-area-inset-bottom) + 1.2rem); }
.site-foot__links {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.35rem 1.1rem; max-width: 44rem; margin-left: auto; margin-right: auto;
  /* as a flex item this grid sized to max-content — every column on one
     row — and quietly stretched the whole page 282px past the phone's
     edge. A definite basis keeps auto-fill inside the viewport. */
  flex: 1 1 100%; width: 100%; min-width: 0;
}
.site-foot__links a { font-size: 0.78rem !important; letter-spacing: 0.06em; line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- the way back: every room has a door out ---- */
.wayback {
  position: fixed; left: clamp(0.8rem, 3vw, 1.4rem);
  bottom: calc(var(--appbar-h, 3.7rem) + env(safe-area-inset-bottom) + 1rem);
  z-index: 190; width: 2.9rem; height: 2.9rem; border-radius: 50%;
  display: grid; place-items: center; text-decoration: none;
  background: rgba(10, 8, 7, 0.72); backdrop-filter: blur(10px);
  border: 1px solid rgba(244, 239, 230, 0.25);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
  transition: border-color 0.25s, transform 0.2s;
}
.wayback:hover { border-color: var(--ruby-hot); transform: translateX(-2px); }
.wayback svg { width: 1.3rem; height: 1.3rem; stroke: var(--cream); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* the VR lock owns the left rail — the back button steps up out of the pause button's spot */
html.vr-locked .wayback { bottom: calc(var(--appbar-h, 3.7rem) + env(safe-area-inset-bottom) + 4.6rem); }

/* ============ THE SIGNATURE CUT — McCluster M Split ============
   The chosen face: the favicon spelled out, every letter sliced once
   at the shard angle. --sig is the signature voice; platform pages
   opt their headlines and money numerals into it. */
@font-face {
  font-family: "McCluster M";
  src: url("../assets/fonts/mccluster/McClusterM-Split.woff") format("woff");
  font-display: swap;
}
:root { --sig: "Anton", Impact, "Arial Narrow", sans-serif; }
.brand__rest, .site-foot__brand { font-family: var(--sig); letter-spacing: 0.03em; }

/* ============ THE MICRO PRINT — McCluster Shard Condensed ============
   The smallest type on the platform wears the modular cut from the
   first family — the BOLD one. Weight-800 slabs at label size: the
   fine print reads like a stamped plate, not a whisper. */
@font-face {
  font-family: "McCluster Micro";
  src: url("../assets/fonts/mccluster/McClusterShard-Condensed.woff") format("woff");
  font-display: swap;
}
:root { --micro: var(--body, sans-serif); }
.kicker { font-family: var(--micro); font-weight: 800; font-size: 0.74rem; letter-spacing: 0.3em; }
.appbar__tab span { font-family: var(--micro); font-size: 0.78rem; letter-spacing: 0.08em; }
.ta__status, .cr__tag { font-family: var(--micro); }
.mk__k { font-family: var(--micro); font-size: 0.78rem; letter-spacing: 0.2em; }

/* ============ THE CLIENT FLOOR — live builds with receipts ============ */
.clientfloor { padding: clamp(4rem, 10vh, 7rem) clamp(1.2rem, 4vw, 3rem); max-width: 72rem; margin: 0 auto; }
.clientfloor__title { font-family: var(--sig); text-transform: uppercase; text-align: center;
  font-size: clamp(2.6rem, 9vw, 5rem); line-height: 0.98; margin-top: 0.5rem; }
.clientfloor__sub { text-align: center; color: var(--cream-dim); max-width: 46ch; margin: 1rem auto 0; line-height: 1.65; }
.clientfloor__sub strong { color: var(--cream); }
.clientfloor__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: 1.1rem; margin-top: 2.2rem; }
.clientcard { display: block; text-decoration: none; color: var(--cream); border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(244, 239, 230, 0.14); background: rgba(20, 16, 14, 0.6);
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.2, 1), border-color 0.3s; }
.clientcard:hover { transform: translateY(-6px); border-color: var(--cc, var(--ruby-hot)); }
.clientcard__shot { position: relative; display: block; aspect-ratio: 8 / 5; overflow: hidden;
  border-bottom: 3px solid var(--cc, var(--ruby-hot)); }
.clientcard__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top;
  transition: transform 0.5s ease; }
.clientcard:hover .clientcard__shot img { transform: scale(1.04); }
.clientcard__live { position: absolute; top: 0.7rem; right: 0.7rem; font-family: var(--micro);
  font-size: 0.78rem; letter-spacing: 0.16em; color: #2fbf71; background: rgba(10, 8, 7, 0.8);
  border: 1px solid rgba(47, 191, 113, 0.6); border-radius: 100px; padding: 0.4em 0.9em; }
.clientcard__body { display: block; padding: 1.1rem 1.2rem 1.3rem; }
.clientcard__body b { font-size: 1.08rem; }
.clientcard__body small { display: block; color: var(--cream-dim); font-size: 0.9rem; line-height: 1.55; margin-top: 0.35rem; }
.clientcard__tag { display: inline-block; margin-top: 0.8rem; font-family: var(--micro); font-size: 0.78rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--cc, var(--ruby-hot));
  border: 1px solid color-mix(in srgb, var(--cc, #e5383b) 55%, transparent); border-radius: 100px; padding: 0.45em 1em; }
.clientfloor__note { text-align: center; color: var(--cream-dim); font-size: 0.9rem; margin-top: 1rem; }

/* ============ THE SIDEWAYS SEAL ============
   The page scrolls one way. No element — footer grid, kinetic type,
   fly pill, anything future — may ever pan the viewport horizontally.
   clip forbids the scroll without creating a scroll container, so
   position: sticky inside the films keeps working. */
html, body { overflow-x: clip; overscroll-behavior-x: none; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }

/* ---- the M-Verified lockup: the badge as its own object, the word beside it ----
   One classy unit, sprinkled wherever the network invites someone in.
   Tint it per badge with --badge-c (performer #8b5cf6, venue, etc). */
.mv { display: inline-flex; align-items: center; gap: 0.9rem; text-decoration: none; color: inherit;
  margin-top: 1.1rem; max-width: 34rem; }
.mv__seal { flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(10, 8, 7, 0.78); border: 2px solid var(--badge-c, #8b5cf6);
  box-shadow: 0 0 14px color-mix(in srgb, var(--badge-c, #8b5cf6) 55%, transparent), inset 0 0 10px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.3s; }
.mv__seal img { width: 54%; }
.mv__txt small { display: block; font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--badge-c, #8b5cf6); font-weight: 800; }
.mv__txt b { display: block; font-size: 0.9rem; line-height: 1.5; font-weight: 600; color: var(--cream); }
.mv:hover .mv__seal { box-shadow: 0 0 24px color-mix(in srgb, var(--badge-c, #8b5cf6) 85%, transparent),
  inset 0 0 10px rgba(0, 0, 0, 0.5); }

/* ---- Please Set Me Free: the game layer ----
   Civic points, streaks, levels, and the ride — the poll plays like a
   record and scores like a run. */
.psmf__play { display: flex; align-items: center; gap: 1rem; margin: 1.7rem auto 0; cursor: pointer;
  border: 1px solid rgba(229, 56, 59, 0.6); color: var(--cream); font: inherit; border-radius: 100px;
  background: linear-gradient(140deg, rgba(193, 18, 31, 0.4), rgba(20, 16, 14, 0.85));
  padding: 0.7rem 1.9rem 0.7rem 0.7rem; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s, box-shadow 0.3s; }
.psmf__play:hover { transform: translateY(-2px); box-shadow: 0 20px 56px rgba(0, 0, 0, 0.6), 0 0 30px rgba(229, 56, 59, 0.3); }
.psmf__play-ic { position: relative; flex: none; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--ruby), var(--ruby-hot)); }
.psmf__play-ic::after { content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(229, 56, 59, 0.55); animation: psmfPulse 1.8s ease-out infinite; }
.psmf__play.is-on .psmf__play-ic::after { animation: none; opacity: 0; }
@keyframes psmfPulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.55); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .psmf__play-ic::after { animation: none; } }
.psmf__play-ic svg { width: 44%; fill: currentColor; }
.psmf__play-tx { text-align: left; }
.psmf__play-tx b { display: block; font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: 1.35rem; letter-spacing: 0.04em; line-height: 1; }
.psmf__play-tx small { display: block; color: var(--cream-dim); font-size: 0.78rem; letter-spacing: 0.16em;
  text-transform: uppercase; margin-top: 0.3rem; }

.psmf__hud { position: fixed; top: calc(0.7rem + env(safe-area-inset-top)); right: 0.8rem; z-index: 150;
  display: none; align-items: center; gap: 0.7rem; border: 1px solid rgba(244, 239, 230, 0.16);
  background: rgba(12, 9, 8, 0.9); backdrop-filter: blur(12px); border-radius: 100px;
  padding: 0.4rem 0.95rem 0.4rem 0.45rem; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
.psmf__hud.is-live { display: flex; }
.psmf__hud.is-flash { animation: psmfFlash 0.7s; }
@keyframes psmfFlash { 30% { border-color: var(--ruby-hot); box-shadow: 0 0 26px rgba(229, 56, 59, 0.7); } }
.psmf__ring { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; grid-auto-flow: column; align-items: baseline;
  background: conic-gradient(var(--ruby-hot) calc(var(--p, 0) * 1%), rgba(244, 239, 230, 0.14) 0); }
.psmf__ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #14100e; }
.psmf__ring b { position: relative; font-size: 0.9rem; }
.psmf__ring small { position: relative; font-size: 0.72rem; color: var(--cream-dim); }
.psmf__hud-mid b { display: block; font-size: 0.84rem; letter-spacing: 0.08em; text-transform: uppercase; }
.psmf__hud-mid small { display: block; color: var(--cream-dim); font-size: 0.78rem; margin-top: 0.1rem; }
.psmf__streak { font-size: 0.9rem; font-weight: 800; color: #ffb057; }

.poll__bar { position: relative; }
.poll__bar.is-riding { color: #fff; background: rgba(193, 18, 31, 0.22); border-color: var(--ruby-hot);
  box-shadow: 0 0 24px rgba(229, 56, 59, 0.25); }
.psmf__pop { position: absolute; right: 0.6rem; top: -0.6rem; font-style: normal; font-size: 0.84rem;
  font-weight: 800; color: #ffd98a; pointer-events: none; animation: psmfPop 1.3s ease-out forwards; }
@keyframes psmfPop { 0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-18px); } }
.poll__bar.is-riding.is-score::after { content: "TAP · SCORE IT"; position: absolute; right: 0.7rem; top: 50%;
  transform: translateY(-50%); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; color: #ffd98a;
  border: 1px solid rgba(216, 186, 124, 0.55); border-radius: 100px; padding: 0.3em 0.8em;
  background: rgba(10, 8, 7, 0.75); animation: psmfInvite 1.2s ease-in-out infinite alternate; }
@keyframes psmfInvite { from { opacity: 0.65; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .poll__bar.is-riding.is-score::after { animation: none; } }

/* ============ NATIVE FEEL — the page is an app, not a document ============
   No pinch zoom, no double-tap zoom, no 300ms tap delay, and no iOS
   input-focus auto-zoom (which needs 16px+ fields to stay away). The
   viewport meta handles Android; touch-action + the polish.js gesture
   guard handle iOS Safari, which ignores user-scalable by design. */
html { touch-action: pan-x pan-y; }
a, button, input, select, textarea, summary, label, [role="button"] { touch-action: manipulation; }
@media (pointer: coarse) {
  input, select, textarea { font-size: max(16px, 1em); }
}

/* ============ THE DOOR — one sign-in, everywhere ============
   Every "get in" moment on the platform wears this exact face:
   one big unmistakable button for the instant account, one honest
   alternative for the email key. High contrast, 16px+ inputs,
   words a stranger can read from arm's length. */
.door { display: flex; flex-direction: column; gap: 0.65rem; width: 100%; max-width: 430px; }
.door__lede { margin: 0; color: var(--cream-dim); font-size: 0.88rem; line-height: 1.55; }
.door__in { width: 100%; background: rgba(10, 8, 7, 0.75); border: 1px solid rgba(244, 239, 230, 0.3);
  border-radius: 12px; color: var(--cream); font: inherit; font-size: max(16px, 1rem);
  padding: 0.85em 1em; margin: 0; }
.door__in::placeholder { color: rgba(244, 239, 230, 0.7); }
.door__in:focus { outline: none; border-color: var(--ruby-hot); }
.door__go { display: block; width: 100%; border: 0; border-radius: 12px; cursor: pointer; font: inherit;
  font-weight: 800; font-size: 0.98rem; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 1.05em 1.2em; color: #fff; background: linear-gradient(120deg, var(--ruby), var(--ruby-hot));
  box-shadow: 0 8px 26px rgba(229, 56, 59, 0.35); text-align: center;
  transition: transform 0.08s, box-shadow 0.2s; -webkit-tap-highlight-color: transparent; }
.door__go:active { transform: scale(0.985); }
.door__alt { display: block; width: 100%; border: 1px solid rgba(244, 239, 230, 0.5); border-radius: 12px;
  cursor: pointer; font: inherit; font-weight: 700; font-size: 0.92rem; padding: 0.95em 1.2em;
  color: var(--cream); background: rgba(244, 239, 230, 0.07); text-align: center;
  transition: transform 0.08s, background 0.15s; -webkit-tap-highlight-color: transparent; }
.door__alt:active { transform: scale(0.985); background: rgba(244, 239, 230, 0.14); }
.door__or { margin: 0.1rem 0; text-align: center; color: rgba(244, 239, 230, 0.7);
  font-size: 0.84rem; letter-spacing: 0.2em; text-transform: uppercase; }
.door__row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.door__row .door__in { flex: 1; min-width: 170px; width: auto; }
.door__row .door__alt { flex: none; width: auto; }
.door__msg { margin: 0; min-height: 1.2em; color: var(--cream); font-size: 0.9rem; }
.door__fine { margin: 0; color: rgba(244, 239, 230, 0.7); font-size: 0.84rem; line-height: 1.55; }

/* ============================================================
   MODERN UPLIFT — a light, shared finishing layer.
   Appended last so it refines the whole app at once (every page
   imports this file) without touching the rules above. Adds
   tactile press feedback, softer depth, glassier surfaces, and
   one consistent form treatment across all 80 pages. Every motion
   is disabled under reduced-motion.
   ============================================================ */

/* smoother everywhere; kill the mobile tap flash */
html { scroll-behavior: smooth; }
* { -webkit-tap-highlight-color: transparent; }
img, video { image-rendering: auto; }

/* buttons: tactile press + a little lift on the primary */
.btn { position: relative; isolation: isolate; }
.btn:active { transform: translateY(1px) scale(0.985); }
.btn--ruby {
  background: linear-gradient(180deg, var(--ruby-hot), var(--ruby) 62%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.14) inset, 0 10px 30px rgba(193,18,31,0.32);
}
.btn--ruby:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 16px 44px rgba(229,56,59,0.5); }
.btn--ghost { backdrop-filter: blur(6px); }

/* one modern form treatment, app-wide — inputs pick up a real focus
   ring and a soft fill instead of raw browser chrome */
input, select, textarea {
  border-radius: 12px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
input:focus, select:focus, textarea:focus,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: rgba(229,56,59,0.7);
  box-shadow: 0 0 0 3px rgba(229,56,59,0.18);
}

/* card-like surfaces: hover depth on the shared card primitive */
.mp__card { transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), border-color 0.28s, box-shadow 0.28s; }
.mp__card:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0,0,0,0.4); }

/* dock tabs: gentle lift on hover to feel alive */
.appbar__tab:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:active, .btn--ruby:hover, .mp__card:hover, .appbar__tab:hover { transform: none; }
}

/* THE CARD CALL — a member without an E⤴ Card sees this pulse wherever
   they stand: the card is the key to everything, get it ASAP. */
@keyframes mccCardCall {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 200, 119, 0); }
  50% { box-shadow: 0 0 24px rgba(232, 200, 119, 0.85); border-color: #e5383b; }
}
.card-call { border: 1.5px solid rgba(232, 200, 119, 0.55); border-radius: 14px;
  animation: mccCardCall 1.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .card-call { animation: none; border-color: #e5383b; } }

/* THE CLOSER — an abandoned move gets one gentle tap back, on every page */
.closer-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px));
  z-index: 96; display: flex; align-items: center; gap: 0.6rem; max-width: min(92vw, 30rem);
  border: 1.5px solid rgba(232, 200, 119, 0.6); border-radius: 100px; background: rgba(14, 11, 9, 0.96);
  padding: 0.55rem 0.6rem 0.55rem 1rem; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 18px rgba(232, 200, 119, 0.25);
  animation: mccCardCall 2.2s ease-in-out infinite; }
.closer-bar a { color: #e5383b; font-weight: 800; font-size: 0.9rem; text-decoration: none; line-height: 1.35; }
.closer-bar button { flex: none; border: 0; background: none; color: rgba(244, 239, 230, 0.7); font-size: 0.9rem;
  cursor: pointer; padding: 0.3em 0.5em; }
@media (prefers-reduced-motion: reduce) { .closer-bar { animation: none; } }

/* NEXT DOOR — the block keeps going: the neighbors' desks ride the
   penthouse floor, straight off the nightly tape. Dark until real. */
.street { position: relative; padding: clamp(4rem, 10vh, 7rem) clamp(1rem, 4vw, 2rem); }
.street__inner { max-width: 34rem; margin: 0 auto; text-align: center; }
.street__title { font-family: var(--sig); text-transform: uppercase; line-height: 0.9;
  font-size: clamp(3rem, 14vw, 5rem); margin-top: 0.6rem; }
.street__sub { color: var(--cream-dim); line-height: 1.65; margin-top: 0.8rem; font-size: 0.95rem; }
.street__sub b { color: var(--cream); }
.street__rail { display: grid; gap: 0.8rem; margin-top: 1.6rem; text-align: left; }
.street__card { border: 1px solid rgba(244, 239, 230, 0.14); border-radius: 16px;
  background: rgba(18, 14, 11, 0.85); padding: 1rem 1.1rem;
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.2, 1), border-color 0.25s; }
.street__card:hover { transform: translateY(-2px); border-color: rgba(232, 200, 119, 0.45); }
.street__row { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.street__row + .street__row { margin-top: 0.35rem; }
.street__name { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.15rem; }
.street__tick { color: #e5383b; font-weight: 800; font-size: 0.86rem; letter-spacing: 0.08em; }
.street__px { font-variant-numeric: tabular-nums; color: #00c805; font-size: 1.05rem; }
.street__chg { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 0.84rem; }
.street__cred { margin-left: auto; font-variant-numeric: tabular-nums; color: #2fbf71; font-weight: 800; font-size: 0.9rem; }
.street__cred small { color: var(--cream-dim); font-weight: 400; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }
.street__acts { display: flex; gap: 0.6rem; margin-top: 0.8rem; }
.street__go, .street__trade { flex: 1; text-align: center; text-decoration: none; font-weight: 800; font-size: 0.92rem;
  border-radius: 100px; padding: 0.6em 1em; border: 1px solid rgba(244, 239, 230, 0.22); color: var(--cream); }
.street__go { background: linear-gradient(180deg, #e5383b, #a4161a); border-color: transparent; color: #fff; }
.street__trade { color: #00c805; border-color: rgba(0, 200, 5, 0.45); }
.street__all { margin-top: 1.3rem; }
.street__all a { color: #e5383b; font-weight: 800; text-decoration: none; }

/* THE FOLD — long copy waits behind one honest tap; the fast reader
   never pays for the slow reader's detail */
.fold__btn { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  color: var(--cream); font: inherit; font-weight: 800; font-size: 0.92rem; padding: 0.55em 0; }
.fold__btn::after { content: " ⌄"; color: var(--cream-dim); font-weight: 400; }
.fold.is-open .fold__btn::after { content: " ⌃"; }
.fold__body { display: none; }
.fold.is-open .fold__body { display: block; }

/* THE TL;DR CARD — the whole paper in three lines + the honest clock */
.tldr { border: 1.5px solid rgba(232, 200, 119, 0.5); border-radius: 14px; background: rgba(20, 16, 12, 0.85);
  padding: 1rem 1.1rem; margin: 1.2rem 0; }
.tldr__k { color: #e5383b; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 800; }
.tldr ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.tldr li { color: var(--cream-dim); line-height: 1.6; font-size: 0.92rem; margin-top: 0.25rem; }
.tldr li b { color: var(--cream); }

/* ============ THE LEAD SHEET — twenty seconds to the desk ============ */
.leadsheet { position: fixed; inset: 0; z-index: 260; display: grid; place-items: end center;
  background: rgba(5, 4, 3, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 0 0.6rem calc(0.8rem + env(safe-area-inset-bottom, 0px)); }
.leadsheet__card { width: min(26rem, 100%); border-radius: 24px; padding: 1.25rem 1.2rem 1.1rem;
  background: linear-gradient(180deg, rgba(32, 26, 21, 0.96), rgba(14, 11, 9, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 24px 60px -16px rgba(0, 0, 0, 0.9);
  display: flex; flex-direction: column; gap: 0.55rem;
  font-family: "Manrope", system-ui, sans-serif; animation: dockIn 0.28s cubic-bezier(0.2, 0.9, 0.2, 1); }
.leadsheet__card > b { font-size: 1.35rem; font-weight: 800; color: var(--cream); }
.leadsheet__card > small { font-size: 0.84rem; font-weight: 600; color: var(--cream-dim); line-height: 1.5; margin-bottom: 0.2rem; }
.leadsheet__card input, .leadsheet__card select, .leadsheet__card textarea {
  width: 100%; border: 0; border-radius: 14px; padding: 0.8rem 0.95rem; resize: none;
  background: rgba(255, 255, 255, 0.09); color: var(--cream);
  font-family: inherit; font-size: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.leadsheet__card select { -webkit-appearance: none; appearance: none; }
.leadsheet__go { -webkit-appearance: none; appearance: none; border: 0; cursor: pointer; touch-action: manipulation;
  text-decoration: none; text-align: center; margin-top: 0.2rem; padding: 0.9rem 1rem; border-radius: 100px;
  background: var(--metal); color: #fff; font-family: inherit; font-weight: 800; font-size: 0.98rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.leadsheet__go:disabled { opacity: 0.6; }
.leadsheet__no { -webkit-appearance: none; appearance: none; border: 0; cursor: pointer; touch-action: manipulation;
  background: none; color: var(--cream-dim); font-family: inherit; font-weight: 700; font-size: 0.82rem; padding: 0.4rem; }
.leadsheet__err { font-size: 0.8rem; color: var(--ruby-hot); }
html[data-theme="light"] .leadsheet__card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(243, 238, 229, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 24px 60px -16px rgba(26, 20, 13, 0.4); }
html[data-theme="light"] .leadsheet__card input,
html[data-theme="light"] .leadsheet__card select,
html[data-theme="light"] .leadsheet__card textarea {
  background: rgba(26, 20, 13, 0.06); color: var(--cream); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); }