/* ==========================================================================
   MONARCHY — Design System v2
   Intense dark · refined structure · one grammar for every page.
   Base #0A0A0C · surface #131317 · bone #F4F1EA · brand #FC5000
   ========================================================================== */

:root {
  /* Near-blacks warmed a hair off pure black — reads richer, less "void" */
  --ink: #0b0b0d;
  --ink-2: #131315;
  --ink-3: #1b1b1f;
  --bone: #f5f2ec;
  --bone-70: rgba(245, 242, 236, 0.68);
  --bone-55: rgba(245, 242, 236, 0.5);
  --bone-35: rgba(245, 242, 236, 0.32);
  --line: rgba(245, 242, 236, 0.09);
  --line-strong: rgba(245, 242, 236, 0.16);
  --brand: #fc5000;
  --brand-soft: #ff8a3d;
  --brand-solid: #e64500;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: var(--display);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --w: 84rem;
  --r: 1rem;
  --r-sm: 0.6rem;
}
:where(html) { font-optical-sizing: auto; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--bone); border-radius: 2px; }

/* ---------- grain — the film layer on every page ---------- */
.grain { position: relative; }
.grain::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  /* Pin brand on the header so case-page :root --brand (Wanted coral, etc.) cannot recolor the CTA. */
  --brand: #fc5000;
  --brand-solid: #e64500;
  --brand-soft: #ff8a3d;
  background: rgba(10, 10, 12, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-in {
  max-width: var(--w); margin: 0 auto; padding: 0 1.5rem;
  height: 4.5rem;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  gap: 1rem;
}
.nav-logo { justify-self: start; }
.nav-links { justify-self: center; }
.nav-logo img { height: 1.7rem; width: auto; }
.nav-links { display: flex; align-items: center; gap: 1.28rem; list-style: none; }
.nav-links a {
  font-size: 0.95rem; font-weight: 500; color: var(--bone-55);
  transition: color 0.15s ease; white-space: nowrap;
}
.nav-links a:hover { color: var(--bone); }
.nav-links a.active { color: var(--bone); font-weight: 600; }
.nav-links a.active::after {
  content: ""; display: block; height: 2px; margin-top: 2px;
  background: var(--brand); border-radius: 2px;
}
.nav-links .has-sub { position: relative; }
.nav-links .has-sub > a {
  display: inline-flex; align-items: center; gap: .32rem;
}
.nav-links .has-sub > a::before {
  content: "";
  order: 2;
  width: 0; height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: .55;
  margin-top: 1px;
}
.nav-links .nav-sub {
  display: none;
  position: absolute;
  top: calc(100% + .2rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 15.5rem;
  padding: .45rem 0 .35rem;
  margin: 0;
  list-style: none;
  background: #161618;
  border: 1px solid rgba(244,241,234,.16);
  border-radius: .55rem;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.6);
  z-index: 60;
}
.nav-links .nav-sub::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: .55rem;
}
.nav-links .has-sub:hover .nav-sub,
.nav-links .has-sub:focus-within .nav-sub { display: block; }
.nav-links .nav-sub a {
  display: block;
  padding: .48rem 1rem;
  font-size: .9rem;
  font-weight: 500;
  color: #d8d2c8 !important;
}
.nav-links .nav-sub a:hover { color: #f4f1ea !important; }
.nav-links .nav-sub a.active::after { display: none; }
html[data-theme="light"] .nav-links .nav-sub {
  background: #fff;
  border: 1px solid rgba(26,26,26,.12);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.18);
}
html[data-theme="light"] .nav-links .nav-sub a { color: #1a1a1a !important; }
html[data-theme="light"] .nav-links .nav-sub a:hover { color: #0a0a0c !important; background: rgba(26,26,26,.05); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--brand, #fc5000); color: #fff; font-weight: 600; font-size: 0.88rem; letter-spacing: -0.01em;
  padding: 0.58rem 1.15rem; border-radius: var(--r-sm); transition: background 0.18s ease; white-space: nowrap;
}
.nav-cta:hover { background: var(--brand-solid); }
.nav-burger { display: none; background: none; border: 0; color: var(--bone); cursor: pointer; padding: 0.5rem; }
.nav-mobile { display: none; }

.nav-cta { flex: none; }
.nav-in > div:last-of-type { display: flex; align-items: center; gap: .65rem; flex: none; justify-self: end; margin-left: 0; }
@media (max-width: 1240px) {
  .nav-links { display: none; }
  .nav-burger { display: block; }
  .nav-mobile.open {
    display: block; position: fixed; top: 4.5rem; left: 0; right: 0; z-index: 49;
    background: rgba(10, 10, 12, 0.97); border-bottom: 1px solid var(--line); padding: 1.5rem;
  }
  .nav-mobile ul { list-style: none; display: flex; flex-direction: column; gap: 1.1rem; }
  .nav-mobile a { font-size: 1.1rem; font-weight: 500; color: var(--bone-70); }
  .nav-mobile a.active { color: var(--bone); }
  .nav-mobile .nav-cta { display: inline-flex; margin-top: .4rem; width: fit-content; }
}

/* ==========================================================================
   SECTION GRAMMAR — every section on every page uses this skeleton
   ========================================================================== */
.sec { padding: 8.5rem 1.5rem; position: relative; }
.sec-tight { padding: 5rem 1.5rem; }
.sec-in { max-width: var(--w); margin: 0 auto; position: relative; }
.sec-alt { background: var(--ink-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.65rem;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand-soft);
  margin-bottom: 1.5rem;
}
.eyebrow::before { content: ""; width: 1.6rem; height: 1px; background: currentColor; opacity: 0.7; }

/* SF Pro Display — Apple product-page weight, tight tracking. */
.h-display {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.7rem, 5.6vw, 5rem); line-height: 1.05; letter-spacing: -0.035em;
  max-width: 20ch;
}
.h-section {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.08; letter-spacing: -0.03em;
  max-width: 24ch;
}
.h-card { font-family: var(--display); font-weight: 600; font-size: 1.7rem; line-height: 1.15; letter-spacing: -0.022em; }

/* Accent = one confident solid warm orange. No gradient on type — it muddies. */
.accent { color: var(--brand); }
.accent-grad {
  background: linear-gradient(96deg, var(--brand-soft), var(--brand) 55%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.lede { font-size: 1.1rem; line-height: 1.72; color: var(--bone-70); max-width: 50ch; margin-top: 1.6rem; }
.mono-note { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-35); }

.sec-head { margin-bottom: 4rem; }
.sec-head.split { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }

/* ---------- ghost chapter numeral ---------- */
.ghost {
  position: absolute; top: -2rem; right: 0; z-index: 0;
  font-family: var(--display); font-weight: 600; font-size: clamp(7rem, 14vw, 12rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(245, 242, 236, 0.06);
  pointer-events: none; user-select: none;
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--brand); color: #fff; font-weight: 600; font-size: 0.98rem; letter-spacing: -0.01em;
  padding: 0.9rem 1.7rem; border-radius: var(--r-sm); border: 0; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,0.14) inset, 0 8px 24px -12px rgba(252,80,0,0.6);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.btn:hover { background: var(--brand-solid); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.14) inset, 0 12px 30px -12px rgba(252,80,0,0.7); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--line-strong); color: var(--bone); font-weight: 600; font-size: 0.98rem; letter-spacing: -0.01em;
  padding: 0.9rem 1.7rem; border-radius: var(--r-sm); background: transparent;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.btn-ghost:hover { border-color: var(--bone-55); background: rgba(245, 242, 236, 0.05); }
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; color: var(--bone); font-size: 0.98rem;
  border-bottom: 1px solid var(--brand); padding-bottom: 2px; transition: gap 0.18s ease, color 0.18s ease;
}
.link-arrow:hover { gap: 0.75rem; color: var(--brand-soft); }

/* ---------- cards ---------- */
.card {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 2.1rem; transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.card:hover { border-color: var(--line-strong); background: var(--ink-3); transform: translateY(-2px); }
.card-img {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; transition: border-color 0.25s ease, transform 0.25s ease;
}
.card-img:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.card-img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform 0.5s cubic-bezier(0.2,0.7,0.2,1); }
.card-img:hover img { transform: scale(1.03); }
.card-img .card-meta { padding: 1.5rem 1.75rem 1.75rem; }

/* ---------- grids ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.grid-split { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.grid-split-wide { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 4rem; align-items: center; }
@media (max-width: 1000px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-split, .grid-split-wide { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .sec { padding: 4.5rem 1.25rem; }
}

/* ---------- stat blocks — the trophy numbers ---------- */
.stat { border-left: 1px solid var(--line-strong); padding-left: 1.5rem; }
.stat-value {
  font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: clamp(2.4rem, 4vw, 3.5rem); line-height: 1; letter-spacing: -0.03em;
}
.stat-value.xl { font-size: clamp(3.4rem, 7vw, 6rem); }
.stat-label { margin-top: 0.85rem; font-weight: 600; font-size: 0.92rem; letter-spacing: -0.01em; }
.stat-detail { margin-top: 0.25rem; font-size: 0.84rem; color: var(--bone-55); }

/* ---------- chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 0.42rem 0.95rem; color: var(--bone-70); white-space: nowrap;
}
.chip-brand { border-color: rgba(252, 80, 0, 0.45); color: var(--brand-soft); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }

/* ---------- belief strip (the ◆ marquee from the AD site) ---------- */
.belief { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.1rem 0; background: var(--ink); }
.belief-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.belief-track span {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--bone-55); white-space: nowrap; padding-right: 1rem;
}
.belief-track i { color: var(--brand); font-style: normal; padding: 0 1rem; }

/* ---------- press marquee ---------- */
.press-band { padding: 2.8rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; background: var(--ink); }
.press-label { text-align: center; margin: 0 auto 1.6rem; max-width: 46ch; letter-spacing: 0.16em; }
.press-track { display: flex; align-items: center; gap: 5rem; width: max-content; animation: marquee 40s linear infinite; }
.press-track img { height: 1.5rem; width: auto; opacity: 0.55; filter: grayscale(1) brightness(2.4); transition: opacity 0.3s, filter 0.3s; }
.press-band:hover .press-track img { opacity: 0.75; }
html[data-theme="light"] .press-track img { filter: grayscale(1) brightness(0.18); opacity: 0.62; }
html[data-theme="light"] .press-band:hover .press-track img { opacity: 0.82; }
.hero-wall > .press-band {
  grid-row: 2;
  position: relative; left: auto; right: auto; bottom: auto;
  z-index: 4;
  padding: 0.45rem 1.5rem 0.55rem;
  border: 0;
  border-top: 1px solid var(--line);
  background: var(--ink);
}
.hero-wall > .press-band .press-label { margin: 0 auto 0.4rem; font-size: 0.58rem; opacity: 0.7; }
.hero-wall > .press-band .press-track { gap: 3.4rem; animation-duration: 36s; }
.hero-wall > .press-band .press-track img { height: 1rem; flex: none; }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes press-shift {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--press-shift, 50%))); }
}
.marquee-pause:hover .belief-track, .marquee-pause:hover .press-track { animation-play-state: paused; }

/* ---------- quote slab ---------- */
.quote-slab { font-family: var(--display); font-weight: 600; font-size: clamp(1.9rem, 4vw, 3.3rem); line-height: 1.12; letter-spacing: -0.03em; max-width: 24ch; }
.quote-attr { margin-top: 2rem; }

/* ---------- table — the ledger ---------- */
.ledger-table { width: 100%; border-collapse: collapse; border: 1px solid var(--line-strong); }
.ledger-table th {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bone-55); font-weight: 500; text-align: left;
  padding: 1rem 1.4rem; border-bottom: 1px solid var(--line-strong);
}
.ledger-table td { padding: 1.3rem 1.4rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.ledger-table tr:last-child td { border-bottom: 0; }
.ledger-table .num { font-family: var(--display); font-weight: 600; font-size: 1.45rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger-table .roi { color: var(--brand-soft); }
.ledger-table tr.total { background: var(--ink-3); }
.ledger-table .sub { font-size: 0.875rem; color: var(--bone-55); }
@media (max-width: 760px) { .ledger-table .hide-m { display: none; } }

/* ---------- timeline ---------- */
.timeline { position: relative; padding-left: 2.2rem; }
.timeline::before { content: ""; position: absolute; left: 0.35rem; top: 0.4rem; bottom: 0.4rem; width: 1px; background: var(--line-strong); }
.tl-item { position: relative; padding-bottom: 3.2rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -2.2rem; top: 0.45rem; width: 0.75rem; height: 0.75rem;
  border-radius: 50%; background: var(--ink); border: 2px solid var(--brand);
}
.tl-year { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.2em; color: var(--brand); text-transform: uppercase; }
.tl-title { font-family: var(--display); font-weight: 600; font-size: 1.45rem; margin: 0.4rem 0 0.5rem; letter-spacing: -0.02em; }
.tl-body { color: var(--bone-70); max-width: 56ch; }
.tl-body b, .tl-body strong { color: var(--bone); }

/* ---------- hero (shared construction) ---------- */
.hero { position: relative; min-height: 92vh; display: flex; align-items: flex-end; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; animation: drift 28s ease-in-out infinite alternate; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(90% 70% at 20% 45%, rgba(252, 80, 0, 0.14) 0%, transparent 60%),
    linear-gradient(to bottom, rgba(10, 10, 12, 0.5) 0%, rgba(10, 10, 12, 0.12) 32%, rgba(10, 10, 12, 0.55) 64%, rgba(10, 10, 12, 0.97) 100%);
}
.hero-in { position: relative; z-index: 1; max-width: var(--w); margin: 0 auto; padding: 8rem 1.5rem 5.5rem; width: 100%; }
.hero-sub { margin-top: 1.6rem; font-size: 1.15rem; line-height: 1.65; color: var(--bone-70); max-width: 46ch; }
.hero-sub b { color: var(--bone); }
.hero-ctas { margin-top: 2.4rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-page { min-height: 62vh; }

@keyframes drift { from { transform: scale(1); } to { transform: scale(1.055) translate(-0.8%, -0.6%); } }

/* ---------- reveals ---------- */
.rv { opacity: 1; transform: none; transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.2, 0.7, 0.3, 1); }
html.js .rv { opacity: 0; transform: translateY(20px); }
html.js .rv.on, .rv.on { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 0.08s; } .rv-d2 { transition-delay: 0.16s; } .rv-d3 { transition-delay: 0.24s; } .rv-d4 { transition-delay: 0.32s; }

/* ---------- team ---------- */
.team-card { text-align: left; }
.team-card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line); }
.team-name { margin-top: 1rem; font-family: var(--display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.02em; }
.team-role { font-size: 0.88rem; color: var(--bone-55); margin-top: 0.15rem; }

/* ---------- big CTA band ---------- */
.cta-band { text-align: center; padding: 8rem 1.5rem; position: relative; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(55% 70% at 50% 115%, rgba(252, 80, 0, 0.22) 0%, transparent 65%);
}
.cta-band > * { position: relative; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 4.5rem 1.5rem 2.5rem; background: var(--ink); }
.footer-in { max-width: var(--w); margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 3.5rem; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer h4 { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-35); margin-bottom: 1.1rem; font-weight: 500; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; }
.footer ul a { color: var(--bone-70); font-size: 0.95rem; transition: color 0.15s; }
.footer ul a:hover { color: var(--bone); }
.footer-logo img { height: 1.6rem; margin-bottom: 1.2rem; }
.footer-tag { color: var(--bone-55); font-size: 0.95rem; max-width: 34ch; line-height: 1.6; }
.footer-base {
  border-top: 1px solid var(--line); padding-top: 2rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* ==========================================================================
   THEME — light mode (the current monarchy.io register: white, warm, airy)
   Toggle swaps tokens; .on-dark islands keep cinematic dark over video.
   ========================================================================== */
html[data-theme="light"] {
  --ink: #ffffff;
  --ink-2: #f7f6f2;
  --ink-3: #edebe5;
  --bone: #1a1a1a;
  --bone-70: rgba(26, 26, 26, 0.74);
  --bone-55: rgba(26, 26, 26, 0.58);
  --bone-35: rgba(26, 26, 26, 0.4);
  --line: rgba(26, 26, 26, 0.1);
  --line-strong: rgba(26, 26, 26, 0.2);
}
html[data-theme="light"] .grain::after { opacity: 0.035; }
html[data-theme="light"] .nav { background: rgba(255, 255, 255, 0.85); }
html[data-theme="light"] .press-track img { filter: grayscale(1) opacity(0.75); }
html[data-theme="light"] .zoom-glow {
  background: radial-gradient(46% 46% at 50% 52%, rgba(252, 80, 0, calc(var(--p, 0) * 0.10)) 0%, transparent 70%);
}

/* Dark islands — video-backed scenes stay cinematic in both themes */
.on-dark {
  --bone: #f4f1ea;
  --bone-70: rgba(244, 241, 234, 0.72);
  --bone-55: rgba(244, 241, 234, 0.56);
  --bone-35: rgba(244, 241, 234, 0.36);
  --line: rgba(244, 241, 234, 0.1);
  --line-strong: rgba(244, 241, 234, 0.18);
  color: var(--bone);
}
html[data-theme="light"] .chapter .scene-pin { background: #0a0a0c; }

/* Theme toggle button */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: none; border: 1px solid var(--line-strong); color: var(--bone-70);
  cursor: pointer; transition: color 0.15s, border-color 0.15s;
}
.theme-toggle:hover { color: var(--bone); border-color: var(--bone-55); }
.theme-toggle .ic-moon { display: none; }
html[data-theme="light"] .theme-toggle .ic-sun { display: none; }
html[data-theme="light"] .theme-toggle .ic-moon { display: block; }

/* ==========================================================================
   HERO SHOWCASE — the work floats beside the words
   ========================================================================== */
.vhero-grid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 3rem; align-items: center; }
.hero-tiles { display: flex; flex-direction: column; gap: 1.1rem; }
.hero-tile {
  position: relative; border-radius: var(--r); overflow: hidden;
  border: 1px solid rgba(244, 241, 234, 0.16);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.85);
  background: #0a0a0c;
}
.hero-tile video { width: 100%; aspect-ratio: 16/8.4; object-fit: cover; display: block; }
.hero-tile .tile-tag {
  position: absolute; left: 0.9rem; bottom: 0.9rem; display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--mono); font-size: 0.63rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  background: rgba(10, 10, 12, 0.74); border: 1px solid rgba(244, 241, 234, 0.18);
  padding: 0.4rem 0.85rem; border-radius: 999px; color: rgba(244, 241, 234, 0.9);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero-tile .tile-tag b { color: var(--brand-soft); font-weight: 600; }
.hero-tile:nth-child(2) { transform: translateX(2.2rem); }
.hero-tile:nth-child(3) { transform: translateX(0.6rem); }
@media (max-width: 1000px) {
  .vhero-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .hero-tile:nth-child(2), .hero-tile:nth-child(3) { transform: none; }
  .hero-tile video { aspect-ratio: 16/7; }
}

/* ==========================================================================
   CASE IMPACT — brand-owned full-bleed studies
   ========================================================================== */
.case-impact {
  position: relative;
  overflow: clip;
  padding: 6.5rem 1.5rem 5.5rem;
  isolation: isolate;
}
.case-impact .sec-in { position: relative; z-index: 1; max-width: 84rem; }
.case-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3.5rem;
  align-items: center;
}
.case-grid.flip { grid-template-columns: 0.95fr 1.05fr; }
.case-film {
  position: relative;
  border-radius: 1.4rem;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 80px -28px rgba(0,0,0,.65);
}
.case-film video, .case-film img {
  width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block;
}
.case-kicker {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-top: 1.4rem;
}
.case-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 3rem;
  border-radius: 1.15rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
}
.case-stat { padding: 1.35rem 1.2rem; }
.case-stat .v {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.03em; line-height: 1;
}
.case-stat .l {
  margin-top: .55rem; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; opacity: .72;
}
.case-impact .h-section { max-width: 16ch; color: #fff; }
.case-impact .lede { color: rgba(255,255,255,.72); max-width: 42ch; }
.case-impact .eyebrow { color: inherit; }

/* Wanted Fertility — coral / ink / sky */
.case-wanted {
  background: #0B1B2B; color: #fff;
  --ink: #0B1B2B; --ink-2: #122334; --ink-3: #1a2e42;
  --bone: #ffffff; --bone-70: rgba(255,255,255,.72); --bone-55: rgba(255,255,255,.56); --bone-35: rgba(255,255,255,.36);
  --line: rgba(255,255,255,.12); --line-strong: rgba(255,255,255,.2);
}
.case-wanted::before, .case-wanted::after {
  content: ""; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(70px); z-index: 0;
}
.case-wanted::before {
  width: min(50vw, 520px); aspect-ratio: 1; left: -8%; top: -10%;
  background: rgba(255, 97, 150, .28);
}
.case-wanted::after {
  width: min(42vw, 440px); aspect-ratio: 1; right: -6%; bottom: -12%;
  background: rgba(162, 197, 233, .22);
}
.case-wanted .eyebrow { color: #FF6196; }
.case-wanted .accent { color: #FF6196; }
.case-wanted .case-stat { background: rgba(18, 35, 52, .82); }
.case-wanted .case-stat .v { color: #fff; }
.case-wanted .case-more { color: #A2C5E9; }

/* Cookie Stop — pink / cyan / cocoa */
.case-cookie {
  background: #120814; color: #fff;
  --ink: #120814; --ink-2: #1c0c1c; --ink-3: #2a1228;
  --bone: #ffffff; --bone-70: rgba(255,255,255,.72); --bone-55: rgba(255,255,255,.56); --bone-35: rgba(255,255,255,.36);
  --line: rgba(255,255,255,.12); --line-strong: rgba(255,255,255,.2);
}
.case-cookie::before, .case-cookie::after {
  content: ""; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(70px); z-index: 0;
}
.case-cookie::before {
  width: min(48vw, 500px); aspect-ratio: 1.2; left: -10%; bottom: -8%;
  background: rgba(102, 222, 255, .22);
}
.case-cookie::after {
  width: min(40vw, 420px); aspect-ratio: 1; right: -8%; top: -12%;
  background: rgba(255, 58, 175, .28);
}
.case-cookie .eyebrow { color: #FF3AAF; }
.case-cookie .accent { color: #FF3AAF; }
.case-cookie .case-kicker { color: #66DEFF; }
.case-cookie .case-stat { background: rgba(28, 12, 28, .8); }
.case-cookie .case-more { color: #66DEFF; }
.case-hosts { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.case-hosts span {
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
  padding: .42rem .95rem; font-size: .82rem; font-weight: 600;
  background: rgba(255,255,255,.05);
}

@media (max-width: 960px) {
  .case-grid, .case-grid.flip { grid-template-columns: 1fr; gap: 2rem; }
  .case-stats { grid-template-columns: repeat(2, 1fr); }
  .case-impact { padding: 4.5rem 1.25rem; }
}

/* The Floor — molten orange on near-black (never "call center") */
.case-floor {
  background: #140804; color: #fff;
  --ink: #140804; --ink-2: #1c0a04; --ink-3: #2a1008;
  --bone: #ffffff; --bone-70: rgba(255,255,255,.72); --bone-55: rgba(255,255,255,.56); --bone-35: rgba(255,255,255,.36);
  --line: rgba(255,255,255,.12); --line-strong: rgba(255,255,255,.2);
}
.case-floor::before, .case-floor::after {
  content: ""; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(70px); z-index: 0;
}
.case-floor::before {
  width: min(52vw, 540px); aspect-ratio: 1; left: -10%; top: -12%;
  background: rgba(252, 80, 0, .38);
}
.case-floor::after {
  width: min(40vw, 400px); aspect-ratio: 1; right: -8%; bottom: -14%;
  background: rgba(255, 180, 80, .16);
}
.case-floor .eyebrow { color: #FF8A3D; }
.case-floor .accent { color: #FC5000; }
.case-floor .case-stat { background: rgba(28, 10, 4, .82); }
.case-floor .case-more { color: #FF8A3D; }

/* AI X Factor Live — stage gold on midnight */
.case-xfactor {
  background: #07060f; color: #fff;
  --ink: #07060f; --ink-2: #100e20; --ink-3: #18162c;
  --bone: #ffffff; --bone-70: rgba(255,255,255,.72); --bone-55: rgba(255,255,255,.56); --bone-35: rgba(255,255,255,.36);
  --line: rgba(255,255,255,.12); --line-strong: rgba(255,255,255,.2);
}
.case-xfactor::before, .case-xfactor::after {
  content: ""; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(70px); z-index: 0;
}
.case-xfactor::before {
  width: min(48vw, 500px); aspect-ratio: 1; right: -8%; top: -10%;
  background: rgba(232, 184, 74, .28);
}
.case-xfactor::after {
  width: min(42vw, 420px); aspect-ratio: 1; left: -8%; bottom: -12%;
  background: rgba(90, 70, 220, .28);
}
.case-xfactor .eyebrow { color: #E8B84A; }
.case-xfactor .accent { color: #E8B84A; }
.case-xfactor .case-stat { background: rgba(16, 14, 32, .86); }
.case-xfactor .case-more { color: #E8B84A; }
.case-xfactor .case-kicker { color: #C4B8FF; }

/* ==========================================================================
   HERO WALL — live-site card structure, video tiles
   ========================================================================== */
.hero-wall {
  position: relative;
  height: 100vh; max-height: 64rem; overflow: hidden;
  padding: 4.15rem 0 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-columns: 1fr;
}
.hero-dots {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.hero-wall-in { position: relative; z-index: 1; }
.hero-ch-logo {
  display: block; height: 2.15rem; width: auto; max-width: 16rem;
  margin: 0 0 1.05rem; object-fit: contain; object-position: left center;
}
.hero-ch-logo.logo-aixf { height: 2.7rem; max-width: 16rem; }
.case-logo {
  display: block; height: 2.4rem; width: auto; max-width: 16rem;
  margin: 0 0 1.4rem; object-fit: contain; object-position: left center;
}
.case-logo.logo-aixf { height: 3.6rem; max-width: 18rem; }
.hero-wall-in {
  grid-row: 1;
  max-width: var(--w); margin: 0 auto; width: 100%;
  min-height: 0; height: 100%;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: 2rem;
  align-items: stretch;
}
.hero-wall-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%; min-height: 0;
  padding: 0 1.25rem 0 0;
  container-type: size;
  container-name: herocopy;
}
.hero-copy-live {
  height: auto;
  max-height: 100%;
  min-height: 0;
  width: 100%;
  display: block;
}
.hero-wall-copy .eyebrow { margin-bottom: 0.55rem; }
.hero-wall-copy .h-display {
  max-width: 13.5em;
  font-size: calc(clamp(2.05rem, 9.2cqh, 3.45rem) + 1pt);
  line-height: 1.04;
  letter-spacing: -0.038em;
}
.hero-wall-copy .lede {
  margin-top: 0.4rem;
  max-width: 38ch;
  font-size: calc(clamp(0.92rem, 2.35cqh, 1.05rem) + 1.5pt);
  line-height: 1.5;
}
.hero-wall-copy .lede-ai {
  display: block;
  margin: 0 0 .55rem;
  color: var(--bone);
  font-weight: 600;
  letter-spacing: -0.018em;
}
.hero-wall-copy .lede-ai .accent { color: var(--brand); }
.hero-wall-copy .hero-ctas {
  margin-top: 1rem;
  flex: none;
}
.hero-rotator {
  position: relative;
  display: block;
}
.hero-rotator .hero-line {
  position: absolute;
  left: 0; right: 0; top: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.32em);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}
.hero-rotator .hero-line.is-on {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .hero-rotator .hero-line { transition: none; transform: none; }
}
.hero-wall-cols {
  position: relative; overflow: hidden; display: flex; gap: 1rem;
  height: 100%; min-height: 0;
}
.hero-wall-media { height: 100%; min-height: 0; }
.hero-film {
  display: none; margin: 0; height: 100%;
  align-items: center; justify-content: center;
  position: relative;
}
.hero-film-stage {
  position: relative;
  width: 100%;
  max-height: 100%;
}
.hero-film video {
  display: block; width: 100%; height: auto; max-height: 100%;
  aspect-ratio: 16 / 9; object-fit: contain;
  border-radius: 1rem; background: #111;
}
.hero-film-ui {
  position: absolute;
  left: 50%; bottom: 0.85rem;
  transform: translateX(-50%);
  width: min(92%, 36rem);
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.4rem 0.65rem 0.4rem 0.5rem;
  background: rgba(10, 10, 12, 0.78);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  z-index: 3;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.hero-film.is-paused .hero-film-ui,
.hero-film:hover .hero-film-ui,
.hero-film:focus-within .hero-film-ui {
  opacity: 1;
  pointer-events: auto;
}
.hf-play, .hf-mute {
  flex: none;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  background: transparent; border: 0; color: inherit;
  cursor: pointer; border-radius: 50%;
}
.hf-play:hover, .hf-mute:hover { background: rgba(255,255,255,0.1); }
.hf-play .ic-pause, .hero-film.is-playing .hf-play .ic-play { display: none; }
.hero-film.is-playing .hf-play .ic-pause { display: block; }
.hf-mute .ic-vol, .hero-film.is-unmuted .hf-mute .ic-mute { display: none; }
.hero-film.is-unmuted .hf-mute .ic-vol { display: block; }
.hf-seek {
  flex: 1; height: 4px; accent-color: var(--brand, #FC5000);
  cursor: pointer;
}
.hero-wall[data-chapter="house"] .hero-film-ui { display: flex; }
.hero-wall[data-chapter="house"] .hero-film { display: flex; }
.hero-wall[data-chapter="house"] .hero-wall-cols { display: none !important; }

.hero-wall[data-chapter="ai"] .hero-film { display: none !important; }
.hero-wall[data-chapter="ai"] .hero-wall-cols { display: none !important; }
.hero-wall[data-chapter="ai"] .hero-wall-media {
  display: flex;
  align-items: center;
  padding: 1.7rem 0 2rem;
}
.hero-wall[data-chapter="ai"] .hero-ai {
  display: block;
  height: 100%;
  max-height: 100%;
  flex: 1 1 auto;
}
.hero-ai {
  display: none;
  position: relative;
  height: 100%;
  min-height: 0;
  border-radius: 1rem;
  overflow: hidden;
  background: #07080c;
  isolation: isolate;
  --mx: 0.5;
  --my: 0.5;
}
.hero-ai-net {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}
.hero-ai-cards {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding: 1.15rem 1.1rem;
  align-items: stretch;
  perspective: 1200px;
}
.ai-card {
  position: relative;
  margin: 0;
  border-radius: 0.95rem;
  overflow: hidden;
  cursor: pointer;
  background: #111;
  border: 1px solid rgba(255,255,255,0.08);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform .35s ease, border-color .25s ease, box-shadow .25s ease, filter .35s ease;
  box-shadow: 0 18px 40px -24px rgba(0,0,0,0.7);
}
.ai-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3/4;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.04);
  transition: transform .6s ease, filter .4s ease;
}
.ai-card-meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.4rem 0.9rem 0.85rem;
  background: linear-gradient(transparent, rgba(6,7,10,0.92) 70%);
  color: #fff;
}
.ai-card-name {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  font-weight: 600;
}
.ai-card-tag {
  margin: 0.2rem 0 0;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.72;
}
.ai-card.is-hot {
  border-color: rgba(var(--ai-rgb), 0.7);
  box-shadow: 0 0 0 1px rgba(var(--ai-rgb), 0.35), 0 22px 50px -18px rgba(var(--ai-rgb), 0.55);
  z-index: 3;
}
.ai-card.is-hot img { transform: scale(1.08); }
.hero-ai[data-hot] .ai-card:not(.is-hot) { filter: saturate(0.55) brightness(0.72); }
@media (max-width: 960px) {
  .hero-wall[data-chapter="ai"] .hero-ai { display: block; height: 28rem; margin-top: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-card, .ai-card img { transition: none; transform: none; }
}

.hero-wall-col { flex: 1; overflow: hidden; height: 100%; }
.hero-wall-track {
  display: flex; flex-direction: column; gap: 1rem; will-change: transform;
}
.hero-wall-track.down { animation: wall-down 50s linear infinite; }
.hero-wall-track.up { animation: wall-up 50s linear infinite; }
@keyframes wall-down { to { transform: translateY(-50%); } }
@keyframes wall-up { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.hero-wall-tile {
  width: 100%; aspect-ratio: 4/5; border-radius: 0.9rem; object-fit: cover; display: block;
  background: #111;
}
.hero-wall-fade-t, .hero-wall-fade-b {
  position: absolute; left: 0; right: 0; height: 12%; z-index: 2; pointer-events: none;
}
.hero-wall-fade-t { top: 0; background: linear-gradient(var(--ink), transparent); }
.hero-wall-fade-b { bottom: 0; background: linear-gradient(transparent, var(--ink)); }
@media (max-width: 960px) {
  .hero-wall { height: auto; max-height: none; overflow: visible; padding-bottom: 0; grid-template-rows: auto auto; }
  .hero-wall-in { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; }
  .hero-wall-cols { display: none; }
  .hero-wall[data-chapter="house"] .hero-film { height: auto; }
  .hero-wall[data-chapter="house"] .hero-film video { height: auto; max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-wall-track { animation: none !important; }
}


/* ==========================================================================
   ANDREA — founder, image-forward (tokens invert in light theme)
   ========================================================================== */
.andrea {
  padding: 5.5rem 1.5rem 4.5rem;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
}
.andrea-in {
  max-width: var(--w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2.6rem 3.5rem;
  align-items: center;
}
.andrea-portrait {
  margin: 0;
  border-radius: 1.35rem;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-2);
  box-shadow: 0 40px 80px -36px rgba(0,0,0,.55);
}
.andrea-portrait img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 58%;
  display: block;
}
.andrea-name { max-width: 14ch; }
.andrea-role {
  margin-top: .55rem;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand-soft);
}
.andrea-facts {
  list-style: none;
  margin: 2.1rem 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  max-width: 42ch;
}
.andrea-facts li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.05rem;
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--bone-70);
}
.andrea-facts li b { color: var(--bone); font-weight: 600; }
.andrea-line {
  margin: 2rem 0 1.85rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.45rem;
  letter-spacing: -0.025em;
  color: var(--bone-70);
}
.andrea-line b { color: var(--bone); }
.andrea-belief {
  margin: 1.15rem 0 1.6rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-55);
  max-width: 42ch;
  line-height: 1.7;
}
.andrea-belief i { color: var(--brand); font-style: normal; padding: 0 .45rem; }
.andrea-copy .btn { margin-top: .2rem; }
.andrea-pair {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 3.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.andrea-who {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}
.andrea-who-role {
  margin-top: .28rem;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand-soft);
}
.andrea-pair .andrea-facts { margin-top: 1.1rem; max-width: none; }
.andrea-line { display: none; }
@media (max-width: 960px) {
  .andrea { padding: 4.5rem 1.25rem; }
  .andrea-in { grid-template-columns: 1fr; gap: 1.8rem; }
  .andrea-portrait img { aspect-ratio: 3 / 2; max-height: none; }
  .andrea-pair { grid-template-columns: 1fr; gap: 2.2rem; }
}

/* ==========================================================================
   VOICES — 9:16 published testimonial clips (no invented quotes)
   ========================================================================== */
.voices {
  padding: 7.5rem 1.5rem 6.5rem;
  background: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.voices-head { margin-bottom: 3.2rem; }
.voices-note {
  margin-top: 1.35rem;
  max-width: 46ch;
  color: var(--bone-55);
  font-size: 1rem;
  line-height: 1.6;
}
.voices-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
.voice-card {
  position: relative;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0;
  min-height: 0;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .25s ease, transform .25s ease;
}
.voice-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
}
.voice-media {
  position: relative;
  aspect-ratio: 9 / 16;
  background: #111;
  overflow: hidden;
}
.voice-card video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #111;
}
.voice-hear {
  position: absolute;
  left: 50%;
  bottom: 1.05rem;
  transform: translateX(-50%);
  z-index: 2;
  padding: .32rem .72rem;
  border-radius: 999px;
  background: rgba(10, 10, 12, 0.78);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.voice-card:hover .voice-hear,
.voice-card:focus-within .voice-hear {
  opacity: 1;
}
.voice-card.is-unmuted .voice-hear { display: none; }
.voice-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 2.4rem .9rem .85rem;
  background: linear-gradient(to top, rgba(10,10,12,.88) 0%, rgba(10,10,12,.0) 100%);
  pointer-events: none;
}
.voice-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.022em;
  color: #f5f2ec;
}
.voice-practice {
  margin-top: .18rem;
  font-size: .8rem;
  color: rgba(245, 242, 236, 0.62);
}
@media (max-width: 1100px) {
  .voices-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .voices { padding: 4.5rem 1.25rem; }
  .voices-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   CASE wordmarks (no logo.avif on disk) + large Read the case CTA
   ========================================================================== */
.case-wordmark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .18rem;
  margin-bottom: 1.55rem;
}
.case-wordmark .wm-primary {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.85rem, 3vw, 2.55rem);
  letter-spacing: -0.045em;
  line-height: .95;
}
.case-wordmark .wm-sub {
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  opacity: .78;
}
.wm-wanted .wm-primary { color: #FF6196; letter-spacing: -0.055em; }
.wm-wanted .wm-sub { color: #A2C5E9; }
.wm-cookie .wm-primary { color: #FF3AAF; }
.wm-floor .wm-primary { color: #FF8A3D; }
.wm-xfactor .wm-primary { color: #E8B84A; }
.wm-xfactor .wm-sub { color: #C4B8FF; }

.case-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  padding: 1.15rem 2.15rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  border-radius: var(--r-sm);
  border: 0;
  color: #0a0a0c;
  background: #fff;
  box-shadow: 0 12px 32px -14px rgba(0,0,0,.5);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.case-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 16px 36px -14px rgba(0,0,0,.55);
}
.case-wanted .case-cta { background: #FF6196; color: #fff; }
.case-cookie .case-cta { background: #FF3AAF; color: #fff; }
.case-floor .case-cta { background: #FC5000; color: #fff; }
.case-xfactor .case-cta { background: #E8B84A; color: #0a0a0c; }

/* Light theme: JS swaps to monarchy-logo-horizontal-light.svg (wordmark #141416, wings #fc5000). No invert filter — it turned #fc5000 red. */
html[data-theme="light"] .nav-mobile.open {
  background: rgba(255,255,255,.97);
}
html[data-theme="light"] .andrea-portrait {
  box-shadow: 0 40px 80px -36px rgba(20,16,10,.18);
}


/* ==========================================================================
   ROOM — humans vs agents, immediately under the hero
   ========================================================================== */
.room {
  padding: 6.5rem 1.5rem 6rem;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
}
.room-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: start;
}
.room-humans { padding-right: 2.5rem; border-right: 1px solid var(--line); }
.room-agents { padding-left: 2.5rem; }
.room-col .h-section { max-width: 22ch; }
.room-col .lede { margin-top: 1.1rem; max-width: 48ch; }
.room-people {
  margin: 2.2rem 0 1.8rem;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.room-person {
  display: grid;
  grid-template-columns: 3.6rem 1fr;
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  transition: opacity .18s ease;
}
.room-person:hover { opacity: .78; }
.room-person img {
  width: 3.6rem; height: 3.6rem;
  object-fit: cover; object-position: 50% 18%;
  border-radius: 50%;
  border: 1px solid var(--line);
}
.room-mono {
  width: 3.6rem; height: 3.6rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--ink-2);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.04em;
  color: var(--brand);
}
.room-person h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.022em;
  color: var(--bone);
}
.room-person p {
  margin-top: .18rem;
  font-size: .86rem;
  color: var(--bone-55);
}
.agent-grid {
  margin: 2.2rem 0 1.4rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}
.agent-card {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  grid-template-rows: auto auto auto;
  column-gap: .7rem;
  row-gap: .1rem;
  align-items: center;
  text-align: left;
  padding: .75rem .8rem;
  border-radius: .75rem;
  border: 1px solid var(--line);
  background: var(--ink-2);
  color: inherit;
  cursor: pointer;
  font: inherit;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.agent-card:hover, .agent-card.is-on {
  border-color: var(--brand);
  background: var(--ink-3);
  transform: translateY(-1px);
}
.agent-ico {
  grid-row: 1 / span 3;
  width: 1.35rem; height: 1.35rem;
  color: var(--brand);
}
.agent-card-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: -0.02em;
  color: var(--bone);
}
.agent-card-nick {
  font-family: var(--display);
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: -0.01em;
  color: var(--brand);
}
.agent-card-tag {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-55);
}
.agent-ask {
  position: relative;
  margin-top: 1rem;
  padding: 1.25rem 1.2rem 1.3rem;
  border: 1px solid var(--line-strong);
  border-radius: 1rem;
  background: var(--ink-3);
}
.agent-ask[hidden] { display: none; }
.agent-ask-close {
  position: absolute; top: .7rem; right: .8rem;
  background: none; border: 0; color: var(--bone-55);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.agent-ask-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .7rem; }
.agent-ask-head .agent-ico { width: 1.5rem; height: 1.5rem; color: var(--brand); }
.agent-ask-name { font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.agent-ask-tag { font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-55); margin-top: .15rem; }
.agent-ask-intro { color: var(--bone-70); font-size: .95rem; max-width: 42ch; }
.agent-ask-qs { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0 .9rem; }
.agent-q {
  background: transparent; color: var(--bone);
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: .4rem .85rem; font-size: .82rem; cursor: pointer;
}
.agent-q:hover, .agent-q.is-on { border-color: var(--brand); color: var(--brand-soft); }
.agent-ask-a { color: var(--bone); font-size: .98rem; line-height: 1.55; max-width: 44ch; margin-bottom: 1.1rem; }
.agent-ask-cta { margin-top: .2rem; }
@media (max-width: 900px) {
  .room { padding: 4.5rem 1.25rem; }
  .room-grid { grid-template-columns: 1fr; gap: 3.2rem; }
  .room-humans, .room-agents { padding: 0; border: 0; }
  .agent-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .agent-grid { grid-template-columns: 1fr; }
}

/* Dental — porcelain / midnight (not Wanted coral) */
.case-dental {
  background: #071018;
  color: #fff;
  --ink: #071018; --ink-2: #0e1a24; --ink-3: #162430;
  --bone: #ffffff; --bone-70: rgba(255,255,255,.72); --bone-55: rgba(255,255,255,.56); --bone-35: rgba(255,255,255,.36);
  --line: rgba(232,226,212,.12); --line-strong: rgba(232,226,212,.22);
}
.case-dental::before, .case-dental::after {
  content: ""; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(70px); z-index: 0;
}
.case-dental::before {
  width: min(52vw, 540px); aspect-ratio: 1; left: -10%; top: -12%;
  background: rgba(168, 196, 200, .22);
}
.case-dental::after {
  width: min(42vw, 420px); aspect-ratio: 1; right: -8%; bottom: -14%;
  background: rgba(232, 226, 212, .12);
}
.case-dental .eyebrow { color: #A8C4C8; }
.case-dental .accent { color: #E8E2D4; }
.case-dental .h-section { color: #F4EFE6; }
.case-dental .lede { color: rgba(244,239,230,.72); }
.case-dental .case-stat { background: rgba(14, 26, 36, .82); }
.case-dental .case-stat .v { color: #F4EFE6; }
.wm-dental .wm-primary { color: #E8E2D4; }
.wm-dental .wm-sub { color: #A8C4C8; }
.case-dental .case-cta { background: #E8E2D4; color: #071018; }

/* Lion Culture — LP paper / gold / earth */
.case-lion {
  background: #FAF8F4;
  color: #322D22;
  --ink: #FAF8F4; --ink-2: #F1ECE2; --ink-3: #E3DCCE;
  --bone: #322D22; --bone-70: rgba(50,45,34,.74); --bone-55: rgba(50,45,34,.58); --bone-35: rgba(50,45,34,.4);
  --line: rgba(50,45,34,.12); --line-strong: rgba(50,45,34,.2);
}
.case-lion::before, .case-lion::after {
  content: ""; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(80px); z-index: 0;
}
.case-lion::before {
  width: min(48vw, 500px); aspect-ratio: 1; right: -10%; top: -16%;
  background: rgba(201, 152, 47, .22);
}
.case-lion::after {
  width: min(36vw, 360px); aspect-ratio: 1; left: -8%; bottom: -18%;
  background: rgba(50, 45, 34, .08);
}
.case-lion .eyebrow { color: #8A6415; }
.case-lion .accent { color: #C9982F; }
.case-lion .h-section { color: #322D22; }
.case-lion .lede { color: rgba(50,45,34,.72); }
.case-lion .case-hosts span {
  border-color: rgba(50,45,34,.18);
  background: rgba(201,152,47,.1);
  color: #322D22;
}
.wm-lion .wm-primary { color: #C9982F; }
.wm-lion .wm-sub { color: #8A6415; }
.case-lion .case-cta { background: #C9982F; color: #2A2318; }
.case-lion .case-film {
  box-shadow: 0 30px 80px -28px rgba(50,45,34,.35);
}


/* ==========================================================================
   HERO CHAPTERS — seven rotating walls, same skeleton
   ========================================================================== */
.hero-wall { position: relative; }
.hero-wall-copy { padding-left: 3.4rem; }
@media (max-width: 960px) { .hero-wall-copy { padding-left: 0; } }
.hero-ch { display: none; }
.hero-ch.is-on {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  padding-top: 0;
  height: auto;
  max-height: 100%;
  min-height: 0;
}
.hero-titles { flex: none; }
.hero-body {
  flex: none;
  padding-top: 0.35rem;
  display: flex;
  flex-direction: column;
}
.hero-body .lede { flex: none; }
.hero-body .hero-ctas { margin-top: 1rem; padding-top: 0; }
.hero-ch[hidden] { display: none !important; }
.hero-facts {
  margin-top: 1rem;
  max-width: 42ch;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--bone-55);
}
.hero-rail {
  z-index: 2;
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.hero-rail button {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: none;
  border: 0;
  padding: 0.28rem 0.35rem;
  color: var(--bone-55);
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.hero-rail .tick {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  border: 1.5px solid var(--bone-35);
  background: transparent;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.hero-rail .lab {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.hero-rail button:hover .lab,
.hero-rail button:focus-visible .lab,
.hero-rail button[aria-pressed="true"] .lab { opacity: 1; transform: none; }
.hero-rail button[aria-pressed="true"] { color: var(--hero-accent, var(--brand-soft)); }
.hero-rail button[aria-pressed="true"] .tick {
  background: var(--hero-accent, var(--brand));
  border-color: var(--hero-accent, var(--brand));
  transform: scale(1.15);
}
.hero-wall[data-chapter="house"] { --hero-accent: var(--brand); --hero-dot-rgb: 252, 80, 0; }
.hero-wall[data-chapter="wanted"] { --hero-accent: #FF6196; --hero-dot-rgb: 255, 97, 150; }
.hero-wall[data-chapter="lion"] { --hero-accent: #C9982F; --hero-dot-rgb: 201, 152, 47; }
.hero-wall[data-chapter="aixf"] { --hero-accent: #E8B84A; --hero-dot-rgb: 232, 184, 74; }
.hero-wall[data-chapter="floor"] { --hero-accent: #FF8A3D; --hero-dot-rgb: 252, 80, 0; }
.hero-wall[data-chapter="sales"] { --hero-accent: #FF8A3D; --hero-dot-rgb: 252, 80, 0; }
.hero-wall[data-chapter="ai"] { --hero-accent: #8B9CFF; --hero-dot-rgb: 139, 156, 255; }
.hero-wall[data-chapter="speaker"] { --hero-accent: #4A90E2; --hero-dot-rgb: 74, 144, 226; }
.hero-wall[data-chapter="dental"] { --hero-accent: #A8C4C8; --hero-dot-rgb: 168, 196, 200; }
.hero-wall .hero-ch .eyebrow { color: var(--hero-accent, var(--brand-soft)); }
.hero-wall .hero-ch .accent { color: var(--hero-accent, var(--brand)); }
.hero-wall[data-chapter="wanted"] .btn { background: #FF6196; box-shadow: 0 1px 0 rgba(255,255,255,0.14) inset, 0 8px 24px -12px rgba(255,97,150,0.55); }
.hero-wall[data-chapter="wanted"] .btn:hover { background: #e84f84; }
.hero-wall[data-chapter="lion"] .btn { background: #C9982F; color: #2A2318; box-shadow: 0 1px 0 rgba(255,255,255,0.14) inset, 0 8px 24px -12px rgba(201,152,47,0.5); }
.hero-wall[data-chapter="lion"] .btn:hover { background: #b38628; }
.hero-wall[data-chapter="aixf"] .btn { background: #E8B84A; color: #0a0a0c; box-shadow: 0 1px 0 rgba(255,255,255,0.14) inset, 0 8px 24px -12px rgba(232,184,74,0.5); }
.hero-wall[data-chapter="aixf"] .btn:hover { background: #d4a63d; }
.hero-wall[data-chapter="floor"] .btn { background: #FC5000; }
.hero-wall[data-chapter="sales"] .btn { background: #FC5000; }
.hero-wall[data-chapter="ai"] .btn { background: #8B9CFF; color: #07080c; }
.hero-wall[data-chapter="ai"] .btn:hover { background: #7a8cf0; }
.hero-wall[data-chapter="dental"] .btn { background: #E8E2D4; color: #071018; box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 8px 24px -12px rgba(232,226,212,0.35); }
.hero-wall[data-chapter="dental"] .btn:hover { background: #d8d2c4; }
.hero-wall[data-chapter="wanted"] .hero-wall-fade-t { background: linear-gradient(var(--ink), transparent); }
@media (max-width: 960px) {
  .hero-rail {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0.4rem 0 0.8rem;
    gap: 0.2rem 0.15rem;
  }
  .hero-rail .lab { opacity: 1; transform: none; font-size: 0.58rem; }
}
html[data-theme="light"] .hero-rail button { color: var(--bone-55); }
html[data-theme="light"] .hero-wall[data-chapter="dental"] { --hero-accent: #4a6a70; }
html[data-theme="light"] .hero-wall[data-chapter="dental"] .btn { background: #1a2a32; color: #E8E2D4; }
html[data-theme="light"] .hero-wall[data-chapter="lion"] .btn { color: #2A2318; }

/* ---------- enquiry / connect (copied from pages.css for homepage) ---------- */
#enquiry { scroll-margin-top: 5.5rem; }
.enquiry {
  display: grid; gap: 1.1rem;
  max-width: 36rem;
}
.enquiry label {
  display: flex; flex-direction: column; gap: .4rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--bone-55);
}
.enquiry input, .enquiry textarea {
  font-family: var(--sans); font-size: 1.02rem;
  color: var(--bone); background: var(--ink-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: .85rem 1rem; outline: none;
}
.enquiry textarea { min-height: 8.5rem; resize: vertical; }
.enquiry input:focus, .enquiry textarea:focus { border-color: var(--brand); }
.enquiry .btn { justify-self: start; margin-top: .4rem; }
.enquiry.sent .btn { pointer-events: none; opacity: .55; }
.enquiry-note {
  font-size: .92rem; color: var(--bone-70);
  border-left: 2px solid var(--brand); padding-left: 1rem;
}
.enquiry-note[hidden] { display: none; }
.connect-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3.5rem; align-items: stretch; }
.connect-film {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  background: #111;
  border: 1px solid var(--line);
  min-height: 28rem;
}
.connect-film video {
  width: 100%;
  height: 100%;
  min-height: 28rem;
  object-fit: cover;
  display: block;
}
@media (min-width: 901px) {
  .connect-film { position: sticky; top: 5.5rem; min-height: 100%; }
  .connect-film video { position: absolute; inset: 0; min-height: 0; }
}
@media (max-width: 900px) { .connect-grid { grid-template-columns: 1fr; gap: 2.5rem; } }