/* ============================================================
   VEZ DIGITAL — styles.css
   Clean monochrome · Animated paths · Refined typography
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* surface — unified deep black, no silver/platinum surfaces anywhere */
  --bg-0: #050505;
  --bg-1: #0C0C0C;
  --bg-2: #131313;
  --bg-3: #1A1A1A;

  /* text — pure white, no warm/cool cast */
  --text-hi: #FFFFFF;
  --text-mid: #B5B5B5;
  --text-lo: #6B6B6B;
  --text-faint: #2E2E2E;

  /* accent — electric lime (only one accent on the entire site) */
  --accent: #E5FF00;
  --accent-soft: rgba(229, 255, 0, 0.12);
  --accent-glow: rgba(229, 255, 0, 0.45);

  /* borders */
  --border: rgba(255, 255, 255, 0.08);
  --border-hi: rgba(255, 255, 255, 0.14);
  --border-hot: rgba(255, 255, 255, 0.4);
  --border-accent: rgba(229, 255, 0, 0.55);

  /* subtle interactive tints */
  --hint: rgba(255, 255, 255, 0.65);

  /* layout */
  --container: 1280px;
  --container-narrow: 960px;
  --gutter: clamp(20px, 4vw, 56px);
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* timing */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.64, 0, 0.78, 0);
  --ease-snap: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  color-scheme: dark;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body {
  font-family: 'Inter Tight', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-hi);
  background: var(--bg-0);
  font-feature-settings: "ss01", "cv11";
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
  letter-spacing: -0.003em;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
:focus-visible {
  outline: 2px solid var(--text-hi);
  outline-offset: 4px;
  border-radius: 6px;
}
::selection { background: var(--text-hi); color: var(--bg-0); }

/* ---------- Typography ----------
   Display style: Clash Display 400 (Regular) — thin and refined,
   matching the April-30 reference image. No bolds anywhere on
   display copy. Yellow accent is reserved for emphasis words via
   .accent / <em>. text-wrap: pretty prevents orphans (no single
   character on its own line) and balances visual rhythm. */
h1, h2, h3, h4 {
  font-family: 'Clash Display', 'Inter Tight', sans-serif;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--text-hi);
  /* Modern orphan/break behavior — keep multi-word phrases tight,
     never strand a single character on the last line. */
  text-wrap: pretty;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
h1 { font-size: clamp(52px, 9.5vw, 128px); text-transform: uppercase; letter-spacing: -0.035em; font-weight: 500; }
h2 { font-size: clamp(36px, 5.6vw, 80px); }
h3 { font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -0.02em; font-weight: 500; }
h4 { font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-mid); }
p {
  color: var(--text-mid);
  text-wrap: pretty;
  hyphens: none;
}

/* Yellow emphasis — single accent on the entire site. Use <em class="accent">
   ELEVATE.</em> or wrap any inline element with .accent. */
.accent,
em.accent,
.text-accent {
  color: var(--accent);
  font-style: normal;
}

/* Hero/heading period — slightly forward-spaced cap so the period reads as
   a deliberate punctuation beat, not an accidental dot. */
.lead-dot { color: var(--accent); }

/* Gradient text utility — kept inert as solid white (was silver gradient). */
.grad-text {
  background: none;
  color: var(--text-hi);
}

/* Grain overlay removed for scroll perf; kept class name so any legacy
   reference doesn't break. */
.grain { display: none !important; }

/* ============================================================
   .vz-mark · the VZ chrome wordmark
   ------------------------------------------------------------
   The source PNG is a fully-rendered chrome VZ with baked depth,
   bevels, and rim lighting (vez-photoroom.png → vz-logo.webp).
   We display it directly so the user's render shows as-is — no
   alpha mask, no synthetic gradient on top.
   A single ::before pseudo-element layers a moving highlight
   sweep, masked to the same silhouette so the highlight stays
   inside the letterform. Reads as a polished platinum surface
   that catches light every few seconds.
   --vz-logo (set in main.js for fallback) doubles as the mask
   source, so a single URL drives both the visible logo and the
   highlight mask.
   ============================================================ */
.vz-mark {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  pointer-events: none;
  background-image: var(--vz-logo, url('assets/vz-logo.webp'));
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 4px 14px rgba(180, 200, 230, 0.22));
}

/* Moving highlight sweep — masked to the logo silhouette so the
   sheen never bleeds outside the letters. */
.vz-mark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 32%,
    rgba(255, 255, 255, 0.7) 48%,
    rgba(255, 255, 255, 0.25) 53%,
    transparent 70%
  );
  background-size: 260% 100%;
  background-repeat: no-repeat;
  background-position: 220% 50%;
  -webkit-mask-image: var(--vz-logo, url('assets/vz-logo.webp'));
          mask-image: var(--vz-logo, url('assets/vz-logo.webp'));
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  mix-blend-mode: overlay;
  opacity: 0.85;
  animation: vzMarkSheen 7s linear infinite;
  pointer-events: none;
  will-change: background-position;
}

@keyframes vzMarkSheen {
  0%   { background-position: 220% 50%; }
  100% { background-position: -80% 50%; }
}

/* Reduced-motion: stop the sweep, hold the highlight at rest. */
@media (prefers-reduced-motion: reduce) {
  .vz-mark::before { animation: none; background-position: 50% 50%; }
  .vz-mark--orbit { animation: none; }
  .vz-mark--footer { animation: none; }
}

/* ============================================================
   ENTRY GATE (spiral canvas + Enter button)
   ============================================================ */
.entry {
  position: fixed;
  inset: 0;
  z-index: 9999;
  /* Pure black base. All visible life comes from the WebGL shader on
     top — the silver aurora reads cleanly against pitch black. */
  background: #000;
  overflow: hidden;
  transition: opacity 600ms var(--ease-out), filter 600ms var(--ease-out);
  will-change: opacity;
}
/* Pre-hide the gate on subsequent visits in the same session. The
   inline <head> script reads sessionStorage and sets the flag before
   any CSS evaluation, so the gate never paints when it shouldn't. */
html.has-entered .entry { display: none !important; }
.entry.is-gone {
  opacity: 0;
  filter: blur(8px);
  pointer-events: none;
}
.entry__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}
.entry__canvas canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ============================================================
   Entry wordmark — clean VEZ DIGITAL
   Two words, stacked. Each letter rises with a staggered delay.
   ============================================================ */
.entry__wordmark {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.4vh, 18px);
  text-align: center;
}

.entry__wordmark-word {
  display: flex;
  font-family: 'Clash Display', 'Inter Tight', sans-serif;
  font-weight: 500;
  color: #fff;
  line-height: 0.9;
  letter-spacing: 0.28em;
  /* The second word (DIGITAL) is slightly lighter + smaller for
     a refined typographic hierarchy. */
  font-size: clamp(44px, 8vw, 108px);
}
.entry__wordmark-word:nth-child(2) {
  font-weight: 300;
  font-size: clamp(14px, 1.6vw, 22px);
  letter-spacing: 0.54em;
  padding-left: 0.54em; /* optically recentre because of the letter-spacing tail */
  color: rgba(255, 255, 255, 0.78);
}

.entry__letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em);
  filter: blur(10px);
  transition:
    opacity 640ms var(--ease-out),
    transform 700ms var(--ease-spring),
    filter 640ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
  text-shadow:
    0 0 28px rgba(225, 228, 235, 0.18),
    0 0 1px rgba(255, 255, 255, 0.8);
  will-change: transform, opacity, filter;
}

.entry__wordmark.is-revealed .entry__letter {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Subtle idle breathing once the reveal settles — platinum, not cyan */
.entry__wordmark.is-revealed {
  animation: wordmarkBreath 5s ease-in-out 1400ms infinite;
}
@keyframes wordmarkBreath {
  0%, 100% { filter: drop-shadow(0 0 18px rgba(225, 228, 235, 0.14)); }
  50%      { filter: drop-shadow(0 0 28px rgba(245, 247, 250, 0.24)); }
}

.entry__btn {
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -50%);
  color: #fff;
  background: transparent;
  border: 0;
  padding: 18px 36px;
  font-family: 'Inter Tight', 'Clash Display', sans-serif;
  font-weight: 200;
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  /* Opacity + pointer-events are driven by JS pre-reveal. */
  transition: letter-spacing 700ms var(--ease-out),
              opacity 180ms linear,
              text-shadow 500ms var(--ease-out);
  z-index: 2;
  outline: none;
  pointer-events: none;
  /* Subtle glow once barely visible */
  text-shadow: 0 0 16px rgba(129, 140, 248, 0.0);
}
.entry__btn.is-ready {
  pointer-events: auto;
  animation: entryBtnPulse 2.8s ease-in-out infinite;
  text-shadow: 0 0 24px rgba(129, 140, 248, 0.45);
}
.entry__btn:hover { letter-spacing: 0.34em; }
.entry__btn:focus-visible {
  outline: 1px solid rgba(255,255,255,0.6);
  outline-offset: 16px;
  border-radius: 2px;
}
@keyframes entryBtnPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.entry__hint {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 5vh, 56px);
  transform: translateX(-50%);
  color: rgba(255,255,255,0.42);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0;
  animation: entryHintIn 700ms var(--ease-out) 600ms forwards;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}
@keyframes entryHintIn { to { opacity: 1; } }

/* ============================================================
   Entry LOADER — shows after Enter is clicked, counts up to 100%
   while main.js finishes setting up (ScrollTrigger, video decode,
   window.load, etc). This gives the page time to settle so the
   hero scroll-scrub is frame-accurate when the gate finally fades.
   ============================================================ */
.entry__loader {
  position: absolute;
  left: 50%;
  bottom: 22%;
  transform: translate(-50%, 20px);
  width: min(420px, 62vw);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 480ms var(--ease-out),
    transform 520ms var(--ease-spring);
}
.entry.is-loading .entry__loader {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* When loading starts, step back the button/wordmark/hint so the
   loader is the centerpiece. Wordmark stays dim, not hidden —
   gives the user something to read while they wait. */
.entry.is-loading .entry__btn,
.entry.is-loading .entry__hint {
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease-out);
}
.entry.is-loading .entry__wordmark {
  opacity: 0.35;
  transition: opacity 520ms var(--ease-out);
}

.entry__loader-bar {
  position: relative;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  border-radius: 999px;
}
.entry__loader-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, #ffffff 100%);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  box-shadow: 0 0 18px rgba(225, 230, 240, 0.4);
}

.entry__loader-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 14px;
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  font-variant-numeric: tabular-nums;
}
.entry__loader-label { color: rgba(255, 255, 255, 0.55); }
.entry__loader-num {
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.14em;
  min-width: 4ch;
  text-align: right;
}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor-ring, .cursor-dot {
  position: fixed;
  top: 0; left: 0;
  border-radius: 999px;
  pointer-events: none;
  /* 10001 so the cursor sits on top of the entry gate (z-index 9999). */
  z-index: 10001;
  opacity: 0;
  transition: opacity 300ms, transform 200ms var(--ease-out), width 200ms, height 200ms, border-color 200ms;
  will-change: transform;
}
.cursor-ring {
  width: 32px; height: 32px;
  border: 1px solid rgba(255,255,255,0.4);
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
.cursor-dot {
  width: 4px; height: 4px;
  background: var(--text-hi);
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
.cursor-ring.is-big { width: 72px; height: 72px; border-color: rgba(255,255,255,0.6); }
.cursor-ring.is-click { transform: translate(-50%, -50%) scale(0.7); }
@media (hover: hover) and (pointer: fine) {
  body.cursor-ready .cursor-ring,
  body.cursor-ready .cursor-dot { opacity: 1; }
  body.cursor-ready, body.cursor-ready * { cursor: none; }
}

/* ============================================================
   BUTTONS / CTAs (glass-pill from component)
   ============================================================ */
.cta-wrap { display: inline-block; }
.cta-border {
  display: inline-block;
  padding: 1px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04) 60%, rgba(0,0,0,0.2));
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  overflow: hidden;
  position: relative;
  transition: transform 300ms var(--ease-out), box-shadow 300ms;
}
.cta-border::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.22) 40%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 900ms var(--ease-out);
  pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: overlay;
}
.cta-border:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(0,0,0,0.55); }
.cta-border:hover::before { transform: translateX(120%); }
.cta-border:active { transform: translateY(0); transition-duration: 80ms; }
.cta-border--ghost { background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(0,0,0,0.15)); }
.cta-border:focus-within { box-shadow: 0 0 0 3px rgba(255,255,255,0.18), 0 18px 44px rgba(0,0,0,0.55); }

.cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 30px;
  border-radius: 19px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  background: var(--bg-0);
  color: var(--text-hi);
  border: 1px solid rgba(255,255,255,0.08);
  transition: background 200ms, color 200ms, transform 240ms var(--ease-out);
  min-height: 52px;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}
.cta:hover { background: #000000; }
.cta:active { transform: scale(0.985); transition-duration: 80ms; }
.cta--ghost { background: transparent; }
.cta__label { opacity: 0.92; transition: opacity 200ms; }
.cta:hover .cta__label { opacity: 1; }
.cta__arrow {
  display: inline-flex;
  opacity: 0.7;
  transform: translateX(0);
  transition: transform 320ms var(--ease-out), opacity 300ms;
  font-size: 1.05em;
}
.cta:hover .cta__arrow { transform: translateX(6px); opacity: 1; }
.cta:disabled { opacity: 0.55; cursor: not-allowed; }
.cta:disabled:hover { background: var(--bg-0); transform: none; }

/* Yellow-accent CTA variant — used in hero and key conversion points.
   Pure black bg, yellow-bordered, yellow arrow. On hover the entire
   button flips to yellow with black text — a hard, confident swap. */
.cta--accent {
  border-color: var(--border-accent);
  box-shadow: 0 0 0 1px rgba(229, 255, 0, 0.18) inset, 0 14px 40px rgba(0,0,0,0.6);
}
.cta--accent .cta__arrow { color: var(--accent); opacity: 1; }
.cta--accent:hover {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}
.cta--accent:hover .cta__arrow { color: #000; }
.cta--accent:hover .cta__label { color: #000; }

/* Simple primary button (nav) */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  min-height: 40px;
  transition: background 200ms, border-color 200ms, transform 220ms var(--ease-out), box-shadow 220ms;
  white-space: nowrap;
  border: 1px solid var(--border-hi);
  color: var(--text-hi);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
}
.btn:hover {
  background: var(--text-hi);
  color: var(--bg-0);
  border-color: var(--text-hi);
  box-shadow: 0 10px 24px rgba(0,0,0,0.4);
}
.btn:active { transform: scale(0.97); transition-duration: 80ms; }
.btn__icon { transition: transform 220ms var(--ease-out); display: inline-flex; }
.btn:hover .btn__icon { transform: translateX(3px); }

/* Premium nav-CTA — subtle inner-rim highlight + ambient ring on hover.
   The button itself is .btn .nav__cta; we enhance only the .nav__cta combo
   so other .btn instances stay flat-clean. */
.nav__cta {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border-color: rgba(255,255,255,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 1px 0 rgba(0,0,0,0.4);
}
.nav__cta::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.18), transparent 70%);
  opacity: 0;
  filter: blur(10px);
  transition: opacity 320ms var(--ease-out);
  pointer-events: none;
  z-index: -1;
}
.nav__cta:hover::after { opacity: 0.7; }

/* aria-current="page" treatment for nav links — subtle dot indicator */
.nav__links a[aria-current="page"],
.nav__mobile a[aria-current="page"] {
  color: var(--text-hi);
  position: relative;
}
.nav__links a[aria-current="page"]::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-hi);
  box-shadow: 0 0 8px rgba(255,255,255,0.55);
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px 0;
  transition: padding 340ms var(--ease-out), background 340ms, backdrop-filter 340ms, border-color 340ms, box-shadow 340ms;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  padding: 12px 0;
  /* Premium glass — soft blur + saturate boost makes the background read
     as glass, not opaque panel. A faint inner-top highlight + bottom
     hairline define the surface. */
  background: linear-gradient(
    180deg,
    rgba(14,14,14,0.78) 0%,
    rgba(10,10,10,0.74) 100%
  );
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(255,255,255,0.06);
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset, 0 12px 32px -16px rgba(0,0,0,0.6);
}
.nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-family: 'Clash Display', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: opacity 200ms;
}
/* The chrome wordmark is retired — clean text wordmark only. */
.nav__brand .vz-mark--nav { display: none !important; }
.nav__wordmark {
  color: var(--text-hi);
  position: relative;
}
/* Yellow dot after the wordmark — the punctuation signature carried
   from the hero through the whole site. */
.nav__wordmark::after {
  content: '.';
  color: var(--accent);
  margin-left: 0.04em;
}
.nav__links {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.nav__links a {
  font-size: 14px;
  color: var(--text-mid);
  position: relative;
  padding: 8px 14px;
  border-radius: 10px;
  transition: color 200ms, background 200ms;
}
.nav__links a:hover { color: var(--text-hi); background: rgba(255,255,255,0.04); }
.nav__cta { margin-left: 4px; }
.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  margin-left: auto;
}
.nav__toggle span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--text-hi);
  margin: 5px auto;
  transition: transform 220ms var(--ease-out), opacity 220ms;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav__mobile {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 16px var(--gutter) 28px;
  background: rgba(10,10,10,0.96);
  backdrop-filter: blur(24px);
  border-top: 1px solid var(--border);
}
.nav__mobile a {
  padding: 14px 0;
  font-size: 22px;
  font-family: 'Clash Display', sans-serif;
  letter-spacing: -0.02em;
}

/* ============================================================
   HERO · FULL-BLEED CINEMATIC SCROLL-SCRUB
   The section is 100vh. GSAP ScrollTrigger pins .hero__pin and
   reserves the scroll distance needed to scrub the full video,
   then releases cleanly into the .intro section below.
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  /* Explicit sizing on the pin target — ScrollTrigger needs a concrete
     height to build the pin spacer correctly. */
  height: 100vh;
  height: 100svh;
  background: #000;
  --scrub-p: 0;            /* 0 → 1, updated by ScrollTrigger */
  /* No overflow:hidden here — that breaks pinType:transform. The
     inner .hero__pin does the video clipping instead. */
}

.hero__pin {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}

/* The video IS the hero. Full-bleed, cover-fit, statically graded.
   Critical: NO per-frame filter/transform on the <video> element —
   that forces the GPU to re-run the filter pipeline on every scrub
   tick and kills smoothness. Ambient "come-alive" effects are moved
   to the .hero__grade overlay (cheap opacity change on a div). */
.hero__video {
  /* The hero video element was removed. This selector is kept inert in case
     the rebuild reintroduces a video on the same class. */
  display: none;
}

/* ============================================================
   HERO · v4 · scroll-scrubbed full-bleed video
   ------------------------------------------------------------
   The hero is just the video. ScrollTrigger pins the section and
   scrubs video.currentTime against scroll position; once the
   line completes, the pin releases and the next section appears.
   The video is uniformly zoomed ~6 % so the Veo watermark in
   the corner is cropped out of frame.
   ============================================================ */

/* Old hero internals — neutralised on the v4 hero. */
.hero--v4 .hero__static-bg,
.hero--v4 .hero__grade,
.hero--v4 .hero__topmeta,
.hero--v4 .hero__footmeta,
.hero--v4 .hero__text,
.hero--v4 .hero__mark,
.hero--v4 .hero__hint,
.hero--v4 .hero__progress,
.hero--v4 .hero__pulse,
.hero--v4 .hero__spotlight,
.hero--v4 .hero__watermark-logo { display: none !important; }

.hero--v4 {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  background: #000;
  /* overflow:hidden REMOVED — breaks pinType:transform per the
     comment on the parent .hero rule. The inner .hero__pin
     handles canvas clipping instead. */
}
.hero--v4 .hero__pin {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.hero-v4__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: #000;
  pointer-events: none;
  user-select: none;
  /* Slight uniform zoom — crops the corner so the Veo watermark
     stays out of the visible frame. 1.06 = ~3 % inset on every edge. */
  transform: scale(1.06);
  transform-origin: center 50%;
  /* The tiny saturate/contrast bump matches the previous hero feel. */
  filter: saturate(1) contrast(1.05);
}

/* Frame-sequence hero canvas — replaces the laggy scroll-scrubbed <video>.
   60 WebP frames preload, ScrollTrigger paints the right frame per
   progress tick. transform: scale(1.06) keeps the Veo watermark crop.
   Filter + will-change retired — they were causing per-paint GPU work
   that contributed to scroll jitter. */
.hero-v4__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
  pointer-events: none;
  user-select: none;
  transform: scale(1.06);
  transform-origin: center 50%;
}

/* Hero v4 · text overlay — anchored to the bottom-left so the type
   doesn't sit over the yeti silhouette in the canvas. The yeti +
   loading-ring occupy the upper-center; the overlay claims the
   bottom band where the floor area is darker negative space. */
.hero-v4__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(40px, 6vh, 88px) clamp(20px, 6vw, 88px) clamp(56px, 8vh, 110px);
  pointer-events: none;
  /* Stronger bottom-darken so the CTA + sub copy stay readable
     against the floor of the canvas. */
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 38%,
    rgba(0,0,0,0.45) 72%,
    rgba(0,0,0,0.78) 100%
  );
}
.hero-v4__overlay > * { pointer-events: auto; }

.hero-v4__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-mid);
  margin-bottom: clamp(20px, 3vh, 36px);
  width: fit-content;
}
.hero-v4__kicker-dot {
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(229, 255, 0, 0.18), 0 0 16px var(--accent-glow);
  animation: heroV4Pulse 2.4s ease-in-out infinite;
}
@keyframes heroV4Pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 4px rgba(229, 255, 0, 0.18), 0 0 16px var(--accent-glow); }
  50%      { opacity: 0.8; box-shadow: 0 0 0 6px rgba(229, 255, 0, 0.10), 0 0 24px rgba(229, 255, 0, 0.65); }
}

.hero-v4__lede {
  font-family: 'Clash Display', 'Inter Tight', sans-serif;
  font-weight: 400;
  /* Sized to fit the bottom-left overlay without intruding on the
     yeti silhouette. ~96px max keeps the lede within the dark
     floor band. */
  font-size: clamp(40px, 6.4vw, 96px);
  line-height: 1.0;
  letter-spacing: -0.028em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  /* 14ch keeps the column under ~50% viewport width, so the type
     stays clear of the central figure. */
  max-width: 14ch;
  text-wrap: pretty;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
.hero-v4__line {
  display: block;
  /* No nowrap — the new sentences are too long to force a single
     line on every viewport. Word-break: keep-all (on the parent)
     guarantees that whole words still stay together when wrapping. */
  /* Initial reveal — subtle rise per line, staggered. */
  transform: translateY(110%);
  opacity: 0;
  animation: heroV4LineRise 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-v4__line:nth-child(1) { animation-delay: 200ms; }
.hero-v4__line:nth-child(2) { animation-delay: 380ms; }
.hero-v4__line--accent { color: var(--accent); }
/* Em.accent inside the lede stays the brand yellow even with the
   global heading override above. */
.hero-v4__lede em.accent {
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
  font-style: normal;
  background: none !important;
}

.hero-v4__dot {
  /* Dots are always yellow — the punctuation rhythm is the visual
     signature carried through every section heading. */
  color: var(--accent);
  margin-left: 0.04em;
}
.hero-v4__line--accent .hero-v4__dot { color: var(--accent); }

@keyframes heroV4LineRise {
  to { transform: translateY(0); opacity: 1; }
}

.hero-v4__sub {
  margin: clamp(24px, 3.4vh, 38px) 0 0;
  max-width: 52ch;
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  letter-spacing: -0.005em;
  opacity: 0;
  animation: heroV4LineRise 900ms cubic-bezier(0.22, 1, 0.36, 1) 720ms forwards;
}
.hero-v4__sub--2 {
  margin-top: clamp(8px, 1vh, 14px);
  color: rgba(255, 255, 255, 0.66);
  animation-delay: 820ms;
}

.hero-v4__cta {
  margin-top: clamp(22px, 3vh, 36px);
  opacity: 0;
  transform: translateY(20px);
  animation: heroV4LineRise 900ms cubic-bezier(0.22, 1, 0.36, 1) 880ms forwards;
}

/* ============================================================
   MOBILE · single source of truth for ≤ 720px
   - Yeti scrub canvas off · hero is text-only on a black surface
   - Hero kicker hidden ("Mascot-led brand studio" pop-in removed)
   - Hero pin/scrub is also disabled in main.js → native scroll
   - Origin: desktop particle look stays, cursor/touch repel disabled
     in main.js (interactive:false). No CSS changes here.
   - Salamander contact video off
   - Case-study rollout banner stays hidden on mobile (default)
   - wmd-phone block pushed clearly below the cards
   - About-meta strip flips to label / value rows for clean alignment
   ============================================================ */
@media (max-width: 720px) {
  /* ── Hero ───────────────────────────────────────────────── */
  .hero-v4__canvas { display: none !important; }
  .hero-v4__kicker { display: none !important; }

  .hero-v4__overlay {
    background: #0A0A0A;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(96px, 18vh, 160px) 24px clamp(64px, 12vh, 100px);
  }
  .hero-v4__lede { font-size: clamp(54px, 14vw, 96px); }

  /* ── Origin · keep the desktop "particle dots" look, just disable
        the cursor/touch repel (handled in main.js via interactive:false).
        No CSS overrides here — desktop styles apply, including idle
        wobble. The stage just stops reacting to swipe input. ───── */

  /* ── Contact · kill the salamander video, keep the dark stage ── */
  #contactVideo       { display: none !important; }
  .contact__stage     { background: #0A0A0A; }

  /* ── Case study · rollout banner stays HIDDEN on mobile (revert).
        Desktop default already hides it; nothing to override here. ─ */

  /* ── "What makes it work" · phone-mockup block pushed clearly below
        the cards. The earlier @media (max-width: 980px) rule sets a
        margin shorthand that resets margin-top to 0 — we use shorthand
        + !important here so the source-order conflict is resolved. */
  .wmd-phone {
    margin: clamp(80px, 14vh, 160px) auto clamp(32px, 4vh, 48px) !important;
  }
  .wmd-phone__caption { margin-bottom: 4px; }

  /* ── About-hero metric strip · row layout, baseline-aligned ── */
  .about-meta {
    flex-direction: column;
    gap: 14px 0;
    width: 100%;
    max-width: 360px;
  }
  .about-meta__cell {
    flex-direction: row;
    align-items: center;
    gap: 18px;
    width: 100%;
  }
  .about-meta__key {
    flex-shrink: 0;
    min-width: 72px;
  }
  .about-meta__val { line-height: 1.2; }
}

/* Reduced motion: all line risers snap straight to final state. */
@media (prefers-reduced-motion: reduce) {
  .hero-v4__line, .hero-v4__sub, .hero-v4__cta {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .hero-v4__kicker-dot { animation: none !important; }
}

/* Visually-hidden utility — preserves the page's H1 for SEO/A11y while
   the visible composition is purely the video. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Color grading / readability layer.
   Stacked gradients — never an obvious box:
   - right-side darken to anchor the VEZ DIGITAL wordmark
   - cinematic letterbox darken top + bottom
   - gentle mood darken */
.hero__grade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Only the thin cinema letterbox bars remain — a whisper of top/bottom
     darkening for mood. The right-side darken + radial-vignette panels
     are gone: the scrub-driven glow on VEZ DIGITAL carries the readability
     now, and the extra shadow was showing as a visible background panel. */
  background:
    linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0) 14%),
    linear-gradient(180deg, rgba(0,0,0,0) 82%, rgba(0,0,0,0.45) 100%);
  opacity: calc(1 - var(--scrub-p) * 0.15);
  will-change: opacity;
}

/* ---- Editorial meta strips (top-right + bottom-left) ---- */
.hero__topmeta {
  position: absolute;
  top: calc(20px + env(safe-area-inset-top));
  right: var(--gutter);
  padding-top: 78px;         /* clear the fixed nav */
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 14px rgba(0,0,0,0.55);
}
.hero__topmeta-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ff5151;
  box-shadow: 0 0 10px rgba(255,81,81,0.7);
  animation: heroDotPulse 1.6s ease-in-out infinite;
}
@keyframes heroDotPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}
.hero__footmeta {
  position: absolute;
  bottom: 26px;
  left: var(--gutter);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  text-shadow: 0 1px 14px rgba(0,0,0,0.5);
}
.hero__footmeta-slash { color: rgba(255,255,255,0.35); }

/* ---- Text layer (VEZ DIGITAL — premium metallic sheen) ---- */
.hero__text {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 clamp(24px, 6vw, 104px);
  pointer-events: none;
  /* no per-frame transform — keep the text compositor stable */
}

.hero__mark {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(2px, 0.4vh, 8px);
  margin: 0;
  font-family: 'Clash Display', 'Inter Tight', sans-serif;
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.055em;
  text-align: right;
  color: #fff;
  max-width: min(92%, 960px);
  /* No text-shadow: a drop-shadow on transparent-filled chrome text
     reads as a dark halo ("rand") around the letters when the video
     behind is bright. Readability is protected by the right-side
     .hero__grade darkening instead. */
}
.hero__mark-row {
  display: block;
  /* No overflow:hidden. It used to clip the initial letter-rise but
     that animation finishes during the entry gate + loader phase (≥2s
     before the hero is visible). With overflow:hidden here, the word's
     scrub-driven drop-shadow was clipped at the row box edges and read
     as a rectangular "shadow box" behind the text. */
}
.hero__mark-row--2 { margin-top: clamp(4px, 0.4vh, 10px); }

/* Solid white display word — the chrome gradient was retired. Yellow
   accent on emphasis words is applied via .accent class on the inline
   span, so here we keep the body of the wordmark pure white. */
.hero__mark-word {
  display: inline-block;
  position: relative;
  font-size: clamp(78px, 14vw, 232px);
  color: #fff;
  /* Subtle scrub-driven glow stays — reads as a clean white aura that
     intensifies on scroll, no metallic tint. */
  filter:
    drop-shadow(
      0 0
      calc(0px + var(--scrub-p, 0) * 36px)
      rgba(255, 255, 255, calc(0.05 + var(--scrub-p, 0) * 0.25))
    );
  /* Initial letter-reveal */
  transform: translateY(112%);
  opacity: 0;
  animation: heroMarkRise 1100ms cubic-bezier(0.22, 1, 0.36, 1) 200ms forwards;
  will-change: transform, opacity, filter;
}
.hero__mark-word--2 {
  font-size: clamp(44px, 9vw, 150px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
  /* DIGITAL glows at ~70% of VEZ's intensity — stays secondary. */
  filter:
    contrast(calc(1.02 + var(--scrub-p, 0) * 0.03))
    brightness(calc(1 + var(--scrub-p, 0) * 0.07))
    drop-shadow(
      0 0
      calc(6px + var(--scrub-p, 0) * 28px)
      rgba(220, 230, 245, calc(0.08 + var(--scrub-p, 0) * 0.30))
    );
  animation-delay: 360ms;
}
@keyframes heroMarkRise {
  to { transform: translateY(0); opacity: 1; }
}
/* heroMarkBreath removed — the idle timer-based glow was the
   "intermittent" look the user saw. Glow is now 100% scrub-coupled
   via the .hero__mark-word filter chain reading var(--scrub-p). */

/* The moving luxury highlight — a bright stripe that sweeps diagonally
   through the letterforms every ~8s. Rendered as a pseudo-element that
   content-mirrors the word so it stays strictly inside the glyphs. */
.hero__mark-word::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    100deg,
    rgba(255,255,255,0) 34%,
    rgba(255,255,255,0.9) 48%,
    rgba(255,255,255,0.2) 52%,
    rgba(255,255,255,0) 68%
  );
  background-size: 240% 100%;
  background-position: 200% 50%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: heroMarkSheen 7.5s cubic-bezier(0.33, 1, 0.68, 1) infinite;
}
.hero__mark-word--2::before {
  animation-duration: 8.4s;
  animation-delay: 1.3s;
}
@keyframes heroMarkSheen {
  0%   { background-position: 200% 50%; }
  35%  { background-position: -80% 50%; }
  100% { background-position: -80% 50%; }
}

/* ---- Scroll hint — fades as the scrub progresses ---- */
.hero__hint {
  position: absolute;
  left: 50%;
  bottom: 58px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.8);
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0,0,0,0.55);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
  pointer-events: none;
  opacity: calc(1 - min(var(--scrub-p) * 3, 1));  /* fades out in the first third */
}
.hero__hint-line {
  width: 1px;
  height: 46px;
  background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0));
  animation: heroHintLine 2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes heroHintLine {
  0%, 100% { transform: scaleY(0.35); opacity: 0.3; }
  50%      { transform: scaleY(1);    opacity: 1; }
}

/* Hairline scrub progress — absolutely last visual element, no chrome */
.hero__progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  z-index: 6;
  pointer-events: none;
  background: rgba(255,255,255,0.06);
}
.hero__progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.5) 0%, #fff 100%);
  transform-origin: left center;
  box-shadow: 0 0 16px rgba(220, 230, 255, 0.45);
  transition: width 90ms linear;
}

/* When scrub is active, dim the meta strips so they don't compete */
.hero[data-scrub-active="true"] .hero__topmeta,
.hero[data-scrub-active="true"] .hero__footmeta { opacity: 0.7; }
.hero__topmeta, .hero__footmeta { transition: opacity 400ms var(--ease-out); }

/* Legacy FloatingPaths are hidden in the new hero — the video is the
   visual. Kept in DOM + CSS for any code paths that still reference
   #pathsA/#pathsB; they draw into a hidden layer. */
.paths {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  color: var(--text-hi);
  opacity: 0;
  visibility: hidden;
}
.paths__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.paths__svg path { stroke: currentColor; fill: none; }

/* Spotlight / watermark from prior layouts are unused; kept no-op. */
.hero__spotlight, .hero__watermark-logo { display: none; }

/* ---- Hero eyebrow pulse dot (shared with .intro) ---- */
.hero__pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-hi);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(250,250,250,0.5); }
  50%      { opacity: 0.4; transform: scale(0.85); box-shadow: 0 0 0 6px rgba(250,250,250,0); }
}

/* ============================================================
   HERO · Responsive
   ============================================================ */
@media (max-width: 960px) {
  .hero__text {
    justify-content: flex-start;
    padding: 0 clamp(20px, 7vw, 48px);
    align-items: flex-end;
    padding-bottom: 22vh;
  }
  .hero__mark { align-items: flex-start; text-align: left; }
  .hero__mark-word  { font-size: clamp(66px, 18vw, 148px); }
  .hero__mark-word--2 { font-size: clamp(34px, 10vw, 76px); }
  .hero__topmeta { padding-top: 68px; }
  .hero__footmeta { font-size: 9px; letter-spacing: 0.28em; }
}
@media (max-width: 560px) {
  .hero__video { object-position: center 45%; }
}

/* ============================================================
   CAPABILITIES · Editorial silver/black services grid
   Centered headline + subline, three-column divided grid of blocks,
   closing tagline + CTA. Heavily inspired by Apple / Vercel "what
   we do" pages — hairline dividers, refined typography, restrained.
   ============================================================ */
.cap {
  position: relative;
  /* Full-viewport section so the video background spans the entire
     page while the user is on it. Content inside is centered via flex
     and the padding gives breathing room without breaking the full-bleed. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(80px, 10vh, 130px) 0;
  background: var(--bg-0);
  border-top: 1px solid var(--border);
  overflow: hidden;
  isolation: isolate;
}
/* Thin silver divider at the very top edge — editorial touch. */
.cap::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: clamp(240px, 40%, 520px);
  height: 1px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0) 100%);
  transform: translateX(-50%);
  pointer-events: none;
}
.cap__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 2;  /* sits above the full-bleed reel background */
  width: 100%;
}

/* ---- Head (eyebrow + headline + subline) ---- */
.cap__head {
  max-width: 980px;
  margin: 0 auto clamp(40px, 6vh, 64px);
  text-align: center;
}
.cap__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-pill);
  background: rgba(10, 10, 14, 0.55);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text-hi);
  margin-bottom: clamp(28px, 4vh, 42px);
}
.cap__title {
  font-family: 'Clash Display', 'Inter Tight', sans-serif;
  font-size: clamp(34px, 4.4vw, 60px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0 0 clamp(24px, 3vh, 36px);
  color: var(--text-hi);
  text-wrap: balance;
}
.cap__title em,
.cap__title .accent {
  color: var(--accent);
  font-style: normal;
}
.cap__sub {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.62;
  color: var(--text-mid);
  max-width: 68ch;
  margin: 0 auto;
}

/* ---- Reel · full-bleed video BEHIND the entire section content.
   The section content (head + grid + foot) layers on top via
   .cap__inner z-index. Video is object-fit: cover, so on any aspect
   ratio the characters on the sides stay visible (cropping is all
   vertical middle, where the video is dark space). ---- */
.cap__reel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 0;
  pointer-events: none;
}
.cap__reel-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}
.cap__reel-video {
  /* Cap-reel video element was removed. Selector kept inert. */
  display: none;
}

/* Static cap backdrop · placeholder for the rebuild. */
.cap__reel-static-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 18% 30%, rgba(120,140,180,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 82% 70%, rgba(255,255,255,0.04) 0%, transparent 60%),
    linear-gradient(160deg, #0c0c0c 0%, #060606 60%, #0a0a0a 100%);
}
.cap__reel-static-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.014) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  opacity: 0.5;
}
/* Readability grade — strong enough that overlay text stays crisp on
   top of any video frame, subtle enough that the gorilla + elk still
   read through. Top/bottom letterbox darken + a mid-field darken
   focused behind the headline and grid. */
.cap__reel-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* headline zone darken (top-middle) */
    radial-gradient(90% 55% at 50% 30%, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 60%),
    /* grid zone darken (middle-lower) */
    radial-gradient(90% 70% at 50% 72%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 65%),
    /* cinema letterbox top + bottom */
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 18%),
    linear-gradient(180deg, rgba(0,0,0,0) 78%, rgba(0,0,0,0.65) 100%),
    /* global dim so the characters read as ambient rather than loud */
    rgba(0, 0, 0, 0.25);
}

/* Text safety net over the video */
.cap__title,
.cap__sub,
.cap__tagline {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

/* ---- Three-block grid with hairline dividers ---- */
.cap__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 2px;
  /* Higher opacity + backdrop blur so the grid reads as a proper
     glass panel over the full-bleed video — chrome highlights on
     top, dim smoked-glass base beneath. */
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 62%, rgba(255,255,255,0.04) 100%),
    rgba(10, 10, 14, 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
          backdrop-filter: blur(18px) saturate(130%);
  isolation: isolate;
  perspective: 1200px;
}
.cap__block {
  position: relative;
  padding: clamp(32px, 3.6vw, 56px);
  border-right: 1px solid var(--border);
  background: rgba(255, 255, 255, 0);
  /* Hover coordinates (set by JS). Fallback keeps the spotlight centered. */
  --mx: 50%;
  --my: 50%;
  transform: translateY(0) scale(1);
  transform-origin: center center;
  transform-style: preserve-3d;
  opacity: 1;
  transition:
    transform 520ms var(--ease-spring),
    background 380ms var(--ease-out),
    box-shadow 520ms var(--ease-out),
    opacity 380ms var(--ease-out),
    z-index 0ms 440ms;
  will-change: transform;
}
.cap__block:last-child { border-right: 0; }

/* Cursor-follow spotlight inside the block — premium touch. JS sets
   --mx/--my; falls back to center when no cursor. Invisible until hover. */
.cap__block::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    360px circle at var(--mx) var(--my),
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.02) 30%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 360ms var(--ease-out);
  z-index: 0;
}
/* Subtle hover edge-glow — accents the scaled-up block */
.cap__block::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0);
  transition: box-shadow 420ms var(--ease-out);
  z-index: 1;
}
/* Keep actual content above the spotlight layer */
.cap__block > * { position: relative; z-index: 2; }

/* Only the hovered block reacts — the other two stay at full size
   and full opacity, as requested. */
.cap__block:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-14px) scale(1.18);
  z-index: 10;
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.65),
    0 0 120px rgba(200, 220, 255, 0.12);
  transition:
    transform 520ms var(--ease-spring),
    background 380ms var(--ease-out),
    box-shadow 520ms var(--ease-out),
    z-index 0ms 0ms;
}
.cap__block:hover::before { opacity: 1; }
.cap__block:hover::after  { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }

/* Mobile: gentler scale — blocks stack 1-col and 1.18 can clip against
   the viewport width. */
@media (max-width: 900px) {
  .cap__block:hover { transform: translateY(-8px) scale(1.08); }
}

/* Staggered block entrance — the reveal observer adds .is-in when the
   grid enters viewport; each block is delayed a beat longer than the
   previous so they tumble in sequentially, not all at once. */
.cap__block[data-reveal]:nth-child(1) { transition-delay: 0ms; }
.cap__block[data-reveal]:nth-child(2) { transition-delay: 140ms; }
.cap__block[data-reveal]:nth-child(3) { transition-delay: 280ms; }

/* ---- Icon: chrome plate, reacts on block hover ---- */
.cap__icon {
  width: 40px;
  height: 40px;
  margin-bottom: clamp(22px, 3vh, 30px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-hi);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
  transition:
    transform 480ms var(--ease-spring),
    border-color 380ms var(--ease-out),
    background 380ms var(--ease-out),
    box-shadow 380ms var(--ease-out);
}
.cap__icon svg {
  width: 20px;
  height: 20px;
  display: block;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.4));
  transition: transform 520ms var(--ease-spring);
}
.cap__block:hover .cap__icon {
  transform: translateY(-2px) scale(1.12) rotate(-3deg);
  border-color: rgba(255,255,255,0.42);
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 100%);
  box-shadow:
    0 0 0 4px rgba(255,255,255,0.02),
    0 12px 26px rgba(0,0,0,0.5),
    0 0 24px rgba(220, 235, 255, 0.2);
}
.cap__block:hover .cap__icon svg {
  transform: scale(1.08) rotate(6deg);
}

/* ---- Title ---- */
.cap__block-title {
  font-family: 'Clash Display', 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 1.4vw, 24px);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text-hi);
  margin: 0 0 clamp(12px, 1.6vh, 16px);
  transition: transform 420ms var(--ease-spring), letter-spacing 420ms var(--ease-out);
}
.cap__block:hover .cap__block-title {
  transform: translateX(3px);
  letter-spacing: 0;
}

.cap__block-body {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: clamp(13px, 0.95vw, 15px);
  line-height: 1.62;
  color: var(--text-mid);
  margin: 0;
  max-width: 36ch;
  transition: color 320ms var(--ease-out);
}
.cap__block:hover .cap__block-body {
  color: var(--text-hi);
}

/* ---- Ghost number ---- */
.cap__block-num {
  position: absolute;
  top: clamp(22px, 2.4vh, 28px);
  right: clamp(22px, 2.4vw, 28px);
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.34em;
  color: var(--text-lo);
  font-variant-numeric: tabular-nums;
  transition:
    color 420ms var(--ease-out),
    letter-spacing 420ms var(--ease-out),
    transform 420ms var(--ease-out);
}
.cap__block:hover .cap__block-num {
  color: #fff;
  letter-spacing: 0.5em;
  transform: translateX(-2px);
}

/* ---- Foot (bottom tagline + CTA) ---- */
.cap__foot {
  margin-top: clamp(36px, 5vh, 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3vh, 32px);
  text-align: center;
}
.cap__tagline {
  font-family: 'Clash Display', 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--text-hi);
  max-width: 62ch;
  margin: 0;
  text-wrap: balance;
}
.cap__cta { margin: 0; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .cap__grid { grid-template-columns: 1fr; }
  .cap__block { border-right: 0; border-bottom: 1px solid var(--border); }
  .cap__block:last-child { border-bottom: 0; }
}
@media (max-width: 560px) {
  .cap__title { font-size: clamp(30px, 8vw, 44px); }
}

/* ============================================================
   ZOOM PARALLAX · scroll-driven reference zoom
   A sticky stage holds seven image panels in a collage layout.
   As the user scrolls through the 300vh container, every panel
   scales up (different factors per index), creating a dramatic
   zoom-into-one-image reveal. Hovering a panel additionally
   zooms IT with the cursor as origin — so the zoom happens
   exactly where the mouse is, not always in the middle.
   ============================================================ */
.zparallax {
  position: relative;
  background: var(--bg-0);
  border-top: 1px solid var(--border);
  isolation: isolate;
}
.zparallax__head {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(80px, 12vh, 140px) var(--gutter) clamp(40px, 6vh, 64px);
  text-align: center;
  position: relative;
  z-index: 2;
}
.zparallax__title {
  font-family: 'Clash Display', 'Inter Tight', sans-serif;
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin: 0 0 clamp(14px, 2vh, 22px);
  background: linear-gradient(180deg, var(--text-hi) 0%, rgba(250,250,250,0.78) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.zparallax__sub {
  font-size: clamp(14px, 1.2vw, 17px);
  color: var(--text-mid);
  max-width: 56ch;
  margin: 0 auto;
  line-height: 1.55;
}

/* The stage is a single-viewport canvas holding all 7 items as a
   composed collage. No scroll-zoom — the previous scroll-driven
   scaling pushed six of the seven images off-screen at max scroll,
   leaving only the central one visible. Now the collage stays put;
   hover is what zooms individual images. */
.zparallax__stage {
  position: relative;
  width: 100%;
  /* Stage extended to 130vh so the 11-image collage breathes —
     two portraits + nine landscapes laid out organically across
     four loose tiers without crowding. */
  height: 130vh;
  height: 130svh;
  overflow: hidden;
  background: #000;
}

/* Each item is a full-stage absolute layer. No scale transform —
   items aren't zoomed as a group anymore. Pointer-events off so
   only the actual image box captures the cursor. */
.zparallax__item {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Image boxes: anchor via top/left + true-centering translate.
   Each box's size matches its source image's aspect ratio exactly
   via `aspect-ratio` — no crop, no letterbox. Apple-Liquid-Glass
   overlay via ::before (specular sheen) + ::after (pillow rim). */
.zparallax__box {
  --hv: 1;
  --mx: 50%;
  --my: 50%;
  position: absolute;
  overflow: hidden;
  pointer-events: auto;
  cursor: zoom-in;
  transform: translate(-50%, -50%) scale(var(--hv));
  transform-origin: var(--mx) var(--my);
  transition:
    transform 520ms var(--ease-spring),
    box-shadow 420ms var(--ease-out);
  will-change: transform;
  isolation: isolate;
  border-radius: clamp(28px, 2.6vw, 48px);          /* slightly chunkier pillow */
  /* Enhanced liquid-glass · deeper drop, thicker rim light,
     bigger ambient halo, more pronounced inset bevel. */
  box-shadow:
    0 42px 100px rgba(0, 0, 0, 0.78),
    0 16px 36px rgba(0, 0, 0, 0.52),
    0 0 80px rgba(220, 230, 255, 0.07),
    0 0 0 1.5px rgba(255, 255, 255, 0.28),
    inset 0 3px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35),
    inset 2.5px 0 0 rgba(255, 255, 255, 0.22),
    inset -2.5px 0 0 rgba(255, 255, 255, 0.16);
}
.zparallax__box:hover {
  --hv: 1.22;
  z-index: 10;
  /* On hover · add an electric-lime accent halo so the active
     piece feels lit-up, on-brand. */
  box-shadow:
    0 50px 120px rgba(0, 0, 0, 0.82),
    0 18px 40px rgba(0, 0, 0, 0.58),
    0 0 120px rgba(229, 255, 0, 0.18),
    0 0 0 1.5px rgba(229, 255, 0, 0.4),
    inset 0 3px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35),
    inset 2.5px 0 0 rgba(255, 255, 255, 0.28),
    inset -2.5px 0 0 rgba(255, 255, 255, 0.20);
}

/* Image keeps full punchy colour; filter saturate compensates any
   tiny wash the overlays might cause. */
.zparallax__box img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  filter: saturate(1.08);
}

/* Layer 1 — crown specular + secondary bottom specular + diagonal sheen.
   Screen-blended so whites ADD brightness to highlights without
   muddying the underlying colour. */
.zparallax__box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background:
    /* crown highlight — the signature top "liquid" peak */
    radial-gradient(ellipse 82% 46% at 50% -5%,
      rgba(255, 255, 255, 0.62) 0%,
      rgba(255, 255, 255, 0.26) 24%,
      rgba(255, 255, 255, 0.08) 48%,
      rgba(255, 255, 255, 0) 72%),
    /* secondary bottom-rim specular — soft glass belly reflection */
    radial-gradient(ellipse 60% 22% at 50% 106%,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.06) 40%,
      transparent 70%),
    /* diagonal sweep for subtle polish */
    linear-gradient(145deg,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.06) 20%,
      rgba(255, 255, 255, 0) 50%,
      rgba(255, 255, 255, 0) 72%,
      rgba(255, 255, 255, 0.14) 100%);
  mix-blend-mode: screen;
}

/* Layer 2 — edge REFRACTION ring + pillow rim.
   backdrop-filter blurs + brightens the image ONLY at the rim (via a
   radial mask — centre stays sharp, edge gets the frosted-glass
   distortion). This is the signature Apple Liquid Glass telltale.
   Enhanced: stronger blur, wider refraction band, more pronounced
   inset rim lights. */
.zparallax__box::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  -webkit-backdrop-filter: blur(10px) brightness(1.08) saturate(1.22);
          backdrop-filter: blur(10px) brightness(1.08) saturate(1.22);
  -webkit-mask-image: radial-gradient(ellipse at center,
    transparent 52%,
    rgba(0, 0, 0, 0.4) 70%,
    rgba(0, 0, 0, 0.85) 88%,
    black 100%);
          mask-image: radial-gradient(ellipse at center,
    transparent 52%,
    rgba(0, 0, 0, 0.4) 70%,
    rgba(0, 0, 0, 0.85) 88%,
    black 100%);
  box-shadow:
    inset 0 0 0 2.5px rgba(255, 255, 255, 0.26),
    inset 0 12px 26px rgba(255, 255, 255, 0.16),
    inset 0 -18px 34px rgba(0, 0, 0, 0.30),
    inset 0 0 44px rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------
   11-slot collage layout · 9 landscape (16:9) + 2 portrait (4:5).
   Organic, magazine-style composition across four loose tiers —
   high/upper-mid/lower-mid/bottom — with deliberate height shift
   so items NEVER align in rigid rows. Sizes vary from 14vw
   (small accents) to 26vw (large features); portraits are 14-16vw
   wide and act as vertical anchors that break the horizontal rhythm.
   -------------------------------------------------------------- */
.zparallax__item .zparallax__box { aspect-ratio: 1.78; }
.zparallax__item--portrait .zparallax__box { aspect-ratio: 0.8; }

/* TIER A · top band, ~10-26% */
.zparallax__item--0  .zparallax__box { top: 14%; left: 18%; width: 24vw; }       /* large feature, left-anchored */
.zparallax__item--1  .zparallax__box { top: 22%; left: 50%; width: 18vw; }       /* medium, sits lower in tier */

/* TIER B · upper-mid, ~28-46% (with portrait piercing top + bottom) */
.zparallax__item--2  .zparallax__box { top: 26%; left: 80%; width: 14vw; }       /* PORTRAIT · right edge top */
.zparallax__item--3  .zparallax__box { top: 50%; left: 14%; width: 16vw; }       /* PORTRAIT · left edge mid */
.zparallax__item--4  .zparallax__box { top: 42%; left: 42%; width: 26vw; }       /* LARGE feature center */

/* TIER C · lower-mid, ~52-68% */
.zparallax__item--5  .zparallax__box { top: 46%; left: 76%; width: 22vw; }       /* medium right of feature */
.zparallax__item--6  .zparallax__box { top: 70%; left: 30%; width: 20vw; }       /* medium-left lower */
.zparallax__item--7  .zparallax__box { top: 66%; left: 60%; width: 18vw; }       /* medium center-right */

/* TIER D · bottom, ~78-92% */
.zparallax__item--8  .zparallax__box { top: 80%; left: 12%; width: 22vw; }       /* big bottom-left anchor */
.zparallax__item--9  .zparallax__box { top: 88%; left: 50%; width: 26vw; }       /* LARGE bottom-center finale */
.zparallax__item--10 .zparallax__box { top: 82%; left: 84%; width: 20vw; }       /* medium bottom-right */

/* Mobile · 2 columns × asymmetric stagger, portraits inline. */
@media (max-width: 768px) {
  .zparallax__item--0  .zparallax__box { top: 6%;  left: 28%; width: 50vw; }
  .zparallax__item--1  .zparallax__box { top: 14%; left: 78%; width: 38vw; }
  .zparallax__item--2  .zparallax__box { top: 22%; left: 26%; width: 36vw; }      /* portrait */
  .zparallax__item--3  .zparallax__box { top: 30%; left: 76%; width: 38vw; }      /* portrait */
  .zparallax__item--4  .zparallax__box { top: 42%; left: 30%; width: 50vw; }
  .zparallax__item--5  .zparallax__box { top: 50%; left: 78%; width: 40vw; }
  .zparallax__item--6  .zparallax__box { top: 60%; left: 26%; width: 44vw; }
  .zparallax__item--7  .zparallax__box { top: 68%; left: 74%; width: 38vw; }
  .zparallax__item--8  .zparallax__box { top: 78%; left: 28%; width: 46vw; }
  .zparallax__item--9  .zparallax__box { top: 88%; left: 60%; width: 50vw; }
  .zparallax__item--10 .zparallax__box { top: 95%; left: 22%; width: 38vw; }
}
@media (prefers-reduced-motion: reduce) {
  /* Gentler hover zoom under reduced-motion */
  .zparallax__box:hover { --hv: 1.08; }
}

/* ============================================================
   LETTER-SPLIT (for data-letter-split)
   ============================================================ */
/* Block-level fade-in for headings — replaces the per-letter
   animation that was breaking words mid-line. Words now wrap as
   whole units (text-wrap: pretty + overflow-wrap: normal). */
[data-letter-split] {
  display: block;
  transform: translateY(28px);
  opacity: 0;
  filter: blur(8px);
  transition:
    transform 900ms var(--ease-spring),
    opacity 700ms var(--ease-out),
    filter 600ms var(--ease-out);
  will-change: transform, opacity, filter;
}
[data-letter-split].is-in {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
}
/* Legacy .letter spans are gone — these rules are kept inert in case
   any cached HTML still has them. */
[data-letter-split] .letter { display: inline; transition: none; }
[data-letter-split] .letter--space { display: inline; width: auto; }

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: translateY(0); }

/* ============================================================
   TICKER
   ============================================================ */
.ticker {
  padding: 48px 0;
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-0);
  position: relative;
}
.ticker::before, .ticker::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(90deg, var(--bg-0), transparent); }
.ticker::after { right: 0; background: linear-gradient(270deg, var(--bg-0), transparent); }
.ticker__row { display: flex; overflow: hidden; }
.ticker__track {
  display: flex;
  align-items: center;
  gap: 48px;
  padding-right: 48px;
  animation: tickerLeft 38s linear infinite;
  flex-shrink: 0;
}
.ticker__row[data-direction="right"] .ticker__track { animation-name: tickerRight; }
.ticker__track span {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 500;
  color: var(--text-lo);
  white-space: nowrap;
  letter-spacing: -0.02em;
  transition: color 300ms;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__track span:not([aria-hidden]):hover { color: var(--text-hi); }
@keyframes tickerLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes tickerRight {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

/* ============================================================
   SECTION HEAD
   ============================================================ */
.section-head {
  max-width: var(--container-narrow);
  margin: 0 auto 72px;
  padding: 0 var(--gutter);
  text-align: center;
}
.section-head__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-mid);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 28px;
  font-weight: 500;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
.section-head__kicker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5fde9b;
  box-shadow: 0 0 0 0 rgba(95, 222, 155, 0.5);
  animation: workPillPulse 2400ms ease-out infinite;
}
.section-head__title {
  margin-bottom: 24px;
  background: linear-gradient(180deg, var(--text-hi), rgba(250,250,250,0.75));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-head__sub {
  font-size: clamp(16px, 1.3vw, 19px);
  max-width: 620px;
  color: var(--text-mid);
  margin: 0 auto;
}

/* ============================================================
   GLOW CARDS — pointer-driven spotlight + animated border
   ports the GlowCard / spotlight-card component to native CSS
   ============================================================ */
.glow {
  --base: 220;
  --spread: 200;
  --radius: 20;
  --border: 1.5;
  --backdrop: rgba(255,255,255,0.025);
  --backup-border: rgba(255,255,255,0.08);
  --size: 300;
  --outer: 1;
  --saturation: 90;
  --lightness: 68;
  --bg-spot-opacity: 0.16;
  --border-spot-opacity: 0.9;
  --border-light-opacity: 0.85;
  --border-size: calc(var(--border, 1.5) * 1px);
  --spotlight-size: calc(var(--size, 300) * 1px);
  --hue: calc(var(--base) + (var(--xp, 0.5) * var(--spread, 200)));

  background-image: radial-gradient(
    var(--spotlight-size) var(--spotlight-size) at
    calc(var(--x, 0) * 1px)
    calc(var(--y, 0) * 1px),
    hsl(var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%) / var(--bg-spot-opacity)),
    transparent
  );
  background-color: var(--backdrop);
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  background-position: 50% 50%;
  background-attachment: fixed;
  border: var(--border-size) solid var(--backup-border);
  border-radius: calc(var(--radius) * 1px);
  position: relative;
  touch-action: none;
  isolation: isolate;
}
.glow::before,
.glow::after {
  pointer-events: none;
  content: "";
  position: absolute;
  inset: calc(var(--border-size) * -1);
  border: var(--border-size) solid transparent;
  border-radius: calc(var(--radius) * 1px);
  background-attachment: fixed;
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
          mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  -webkit-mask-clip: padding-box, border-box;
          mask-clip: padding-box, border-box;
  -webkit-mask-composite: xor;
          mask-composite: intersect;
  z-index: 2;
}
.glow::before {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75) at
    calc(var(--x, 0) * 1px)
    calc(var(--y, 0) * 1px),
    hsl(var(--hue) 100% 70% / var(--border-spot-opacity)),
    transparent 100%
  );
  filter: brightness(1.8);
}
.glow::after {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.5) calc(var(--spotlight-size) * 0.5) at
    calc(var(--x, 0) * 1px)
    calc(var(--y, 0) * 1px),
    hsl(0 100% 100% / var(--border-light-opacity)),
    transparent 100%
  );
}

/* ============================================================
   SERVICES
   ============================================================ */
.services {
  padding: clamp(96px, 12vw, 160px) 0;
  position: relative;
}
.services__grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.card {
  position: relative;
  padding: 40px 32px 36px;
  transition: transform 300ms var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.card > * { position: relative; z-index: 3; }
.card__num {
  font-family: 'Clash Display', sans-serif;
  font-size: 12px;
  color: var(--text-mid);
  letter-spacing: 0.24em;
  font-weight: 500;
}
.card h3 { color: var(--text-hi); margin-top: 4px; }
.card p { font-size: 15px; color: var(--text-mid); margin-top: -4px; }
.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
}
.card__tags li {
  font-size: 11.5px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-mid);
  letter-spacing: 0.03em;
  transition: border-color 220ms, color 220ms, background 220ms;
}
.card:hover .card__tags li {
  border-color: var(--border-hi);
  color: var(--text-hi);
  background: rgba(255,255,255,0.03);
}
.card__shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms;
  background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,0.06), transparent 45%);
}
.card:hover .card__shine { opacity: 1; }
/* Subtle premium lift on card hover — replaces the "scroll back" effect of
   pure transform with a refined, spring-eased translation + crisper border. */
.card { will-change: auto; }
.card:hover { transform: translateY(-3px); }
.card:hover h3 { color: var(--text-hi); }

/* ============================================================
   WORK
   ============================================================ */
.work {
  padding: clamp(96px, 12vw, 160px) 0;
  background: var(--bg-0);
  position: relative;
}
.work__grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.work__item {
  display: flex;
  flex-direction: column;
  transition: transform 300ms var(--ease-out);
  position: relative;
}
.work__item > * { position: relative; z-index: 3; }
.work__poster {
  aspect-ratio: 16/10;
  position: relative;
  overflow: hidden;
  border-top-left-radius: calc(20px - 1.5px);
  border-top-right-radius: calc(20px - 1.5px);
  background:
    radial-gradient(ellipse at 30% 20%, hsla(var(--hue), 40%, 30%, 0.55), transparent 60%),
    radial-gradient(ellipse at 80% 80%, hsla(var(--hue), 40%, 28%, 0.45), transparent 60%),
    linear-gradient(135deg, #151515, #0A0A0A);
}
.work__poster::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  opacity: 0.6;
  transition: opacity 400ms;
}
.work__poster::after {
  content: '▶';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 28px;
  color: rgba(255,255,255,0.45);
  transition: color 300ms, transform 400ms var(--ease-out);
}
.work__item:hover .work__poster::after {
  color: var(--text-hi);
  transform: scale(1.18);
}
.work__item:hover .work__poster::before { opacity: 0.2; }
/* swipe overlay (easter egg) */
.work__item::after {
  content: 'View case';
  position: absolute;
  top: 50%; left: 50%;
  padding: 10px 20px;
  background: var(--text-hi);
  color: var(--bg-0);
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  transition: opacity 260ms, transform 300ms var(--ease-out);
  pointer-events: none;
  z-index: 3;
}
.work__item.is-swiped::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.work__meta {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.work__tag {
  font-size: 11px;
  color: var(--text-lo);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.work__meta h3 { margin-top: 2px; color: var(--text-hi); }
.work__meta p { font-size: 14px; color: var(--text-mid); }

/* ============================================================
   WORK · v2 · Premium editorial grid
   ------------------------------------------------------------
   Featured-card spans full width on desktop and gets a richer
   poster gradient + glow border. Soon-cards are the same shape
   but slightly muted. The CTA card replaces the 4th item with a
   conversion entry-point that leads to the brief form.
   ============================================================ */

/* Featured item spans the full row on >=1024px so SnusYeti reads
   editorial-prominent. Falls back to single-column at the same
   breakpoints as the rest of the grid below. */
.work__item--featured { grid-column: span 2; }
.work__item--featured .work__poster {
  aspect-ratio: 24/9;
  background:
    radial-gradient(ellipse at 25% 25%, hsla(var(--hue), 60%, 38%, 0.55), transparent 60%),
    radial-gradient(ellipse at 75% 75%, hsla(var(--hue), 60%, 28%, 0.55), transparent 60%),
    linear-gradient(135deg, #1a1a1a 0%, #0A0A0A 50%, #161616 100%);
}
.work__item--featured .work__meta { padding: 28px 32px 32px; }
.work__item--featured .work__meta h3 { font-size: clamp(24px, 2.6vw, 34px); }
.work__item--featured .work__meta p { font-size: 16px; max-width: 720px; }

/* Soon variant — slightly desaturated poster + dotted-border vibe. */
.work__item--soon .work__poster {
  background:
    radial-gradient(ellipse at 50% 30%, hsla(var(--hue), 18%, 22%, 0.6), transparent 65%),
    linear-gradient(160deg, #131313, #0A0A0A);
}
.work__item--soon .work__poster::after {
  content: '';      /* hide the play-arrow on non-video cards */
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 8px, transparent 8px 18px);
}
.work__item--soon .work__meta h3 { color: var(--text-mid); }

/* CTA-card — last slot of the grid: conversion entry. */
.work__item--cta {
  position: relative;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04) 60%, rgba(0,0,0,0.2));
  overflow: hidden;
  transition: transform 300ms var(--ease-out), box-shadow 300ms;
}
.work__item--cta::before {
  /* sweeping highlight on hover, mirrors .cta-border */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.16) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 1100ms var(--ease-out);
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
  mix-blend-mode: overlay;
}
.work__item--cta:hover { transform: translateY(-4px); box-shadow: 0 22px 60px rgba(0,0,0,0.55); }
.work__item--cta:hover::before { transform: translateX(130%); }
.work__poster--cta {
  aspect-ratio: 16/10;
  border-radius: calc(20px - 1px) calc(20px - 1px) 0 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.10), transparent 65%),
    linear-gradient(180deg, #1a1a1a 0%, #0A0A0A 100%);
  position: relative;
}
.work__poster--cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.16) 0, rgba(255,255,255,0) 22%),
              repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 4px);
}
.work__item--cta .work__meta {
  background: var(--bg-0);
  border-radius: 0 0 calc(20px - 1px) calc(20px - 1px);
  padding: 24px 28px 30px;
}
.work__cta-arrow {
  margin-top: 14px;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-hi);
  transition: transform 300ms var(--ease-out);
}
.work__item--cta:hover .work__cta-arrow { transform: translateX(4px); }
/* invisible link layer covers the whole CTA card */
.work__item-link {
  position: absolute;
  inset: 0;
  z-index: 5;
  text-decoration: none;
}

/* PILLS · top-left badge for live/in-production state */
.work__pill {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(10,10,10,0.7);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-hi);
}
.work__pill--ghost {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: var(--text-mid);
}
.work__pill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #5fde9b;
  box-shadow: 0 0 0 0 rgba(95, 222, 155, 0.5);
  animation: workPillPulse 2400ms ease-out infinite;
}
@keyframes workPillPulse {
  0%   { box-shadow: 0 0 0 0 rgba(95, 222, 155, 0.45); }
  70%  { box-shadow: 0 0 0 10px rgba(95, 222, 155, 0); }
  100% { box-shadow: 0 0 0 0 rgba(95, 222, 155, 0); }
}

/* On smaller viewports the featured card collapses back to single column */
@media (max-width: 768px) {
  .work__item--featured { grid-column: span 1; }
  .work__item--featured .work__poster { aspect-ratio: 16/10; }
}

/* ============================================================
   HOW WE WORK · three connected stages
   Premium silver/black editorial · chrome numerals · liquid-glass
   stage cards · ambient drift lines in the background · subtle
   interactive easter eggs (ripple on numeral triple-click,
   scramble on kicker triple-click).
   ============================================================ */
.hww {
  position: relative;
  padding: clamp(56px, 9vh, 96px) 0 clamp(64px, 10vh, 110px);
  background: var(--bg-0);
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid var(--border);
  /* Anchor-target offset: keeps the section header from sliding under
     the fixed glass nav when arriving via #process from another page. */
  scroll-margin-top: 88px;
}

/* Ambient · slow vertical silver drift-lines + a drifting platinum orb.
   Sits at z-index 0, pure decoration. */
/* ---- Holographic ambient layer (mirrors .origin effect suite) ---- */
.hww__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
/* Dot grid with soft radial mask + slow drift */
.hww__grid {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1.4px);
  background-size: 32px 32px;
  background-position: 16px 16px;
  mask-image: radial-gradient(
    ellipse 70% 80% at 50% 50%,
    black 0%, black 35%, transparent 85%);
  -webkit-mask-image: radial-gradient(
    ellipse 70% 80% at 50% 50%,
    black 0%, black 35%, transparent 85%);
  opacity: 0.6;
  animation: originGridDrift 18s linear infinite;
}
/* Four diagonal light rays (reuses origin keyframe) */
.hww__rays {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hww__ray {
  position: absolute;
  width: 1px;
  height: 60%;
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.28) 30%,
    rgba(255,255,255,0.52) 50%,
    rgba(255,255,255,0.28) 70%,
    rgba(255,255,255,0) 100%);
  filter: blur(0.5px);
  opacity: 0.5;
}
.hww__ray--1 { top: -10%; left: 14%;  transform: rotate( 18deg); animation: originRayPulse 7s ease-in-out infinite; }
.hww__ray--2 { top: -10%; right: 14%; transform: rotate(-18deg); animation: originRayPulse 7s ease-in-out infinite 1.7s; }
.hww__ray--3 { bottom: -10%; left: 22%;  transform: rotate(-16deg); animation: originRayPulse 7s ease-in-out infinite 3.4s; }
.hww__ray--4 { bottom: -10%; right: 22%; transform: rotate( 16deg); animation: originRayPulse 7s ease-in-out infinite 5.1s; }

/* Scan sweep — slower here (longer section, so the pass reads as
   an ambient feature rather than a strobe). */
.hww__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: -8%;
  height: 14%;
  background: linear-gradient(180deg,
    rgba(255,255,255,0)  0%,
    rgba(255,255,255,0.035) 40%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.035) 60%,
    rgba(255,255,255,0)  100%);
  mix-blend-mode: screen;
  animation: hwwScan 14s cubic-bezier(0.65,0,0.35,1) infinite;
}
@keyframes hwwScan {
  0%   { transform: translateY(-20%); opacity: 0; }
  20%  { opacity: 0.8; }
  100% { transform: translateY(820%); opacity: 0; }
}

/* Floating sparks */
.hww__sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hww__spark {
  position: absolute;
  bottom: -10px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle,
    #ffffff 0%,
    rgba(255,255,255,0.5) 50%,
    transparent 100%);
  box-shadow: 0 0 10px rgba(255,255,255,0.7);
  opacity: 0;
  animation: originSparkRise var(--dur, 12s) linear infinite;
  animation-delay: calc(var(--i) * -1.6s);
}
.hww__spark:nth-child(1) { left: 10%; --dur: 13s; --drift:  12px; }
.hww__spark:nth-child(2) { left: 22%; --dur: 10s; --drift: -18px; width: 2px; height: 2px; }
.hww__spark:nth-child(3) { left: 35%; --dur: 14s; --drift:  22px; }
.hww__spark:nth-child(4) { left: 47%; --dur: 11s; --drift:  -8px; width: 4px; height: 4px; }
.hww__spark:nth-child(5) { left: 58%; --dur: 15s; --drift:  14px; }
.hww__spark:nth-child(6) { left: 70%; --dur: 12s; --drift: -22px; width: 2px; height: 2px; }
.hww__spark:nth-child(7) { left: 82%; --dur: 13s; --drift:  10px; width: 3px; height: 3px; }
.hww__spark:nth-child(8) { left: 92%; --dur: 10.5s; --drift: -14px; }

/* Soft radial orb centered under the stages — gives depth behind
   the glass cards without competing with the grid. */
.hww__orb-glow {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(820px, 80vw);
  height: min(820px, 80vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at center,
    rgba(200, 220, 255, 0.12) 0%,
    rgba(160, 180, 220, 0.06) 22%,
    transparent 60%);
  filter: blur(32px);
  animation: hwwOrbDrift 32s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes hwwOrbDrift {
  0%   { transform: translate(-58%, -54%) scale(1);   }
  100% { transform: translate(-42%, -46%) scale(1.08); }
}

.hww__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---- Head ---- */
.hww__head {
  max-width: 900px;
  margin: 0 auto clamp(32px, 5vh, 56px);
  text-align: center;
}
.hww__kicker {
  /* Native button reset so the kicker still reads as a label. */
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text-mid);
  cursor: pointer;
  transition: color 240ms var(--ease-out), border-color 240ms var(--ease-out);
  margin-bottom: clamp(20px, 3vh, 32px);
}
.hww__kicker:hover,
.hww__kicker:focus-visible { color: var(--text-hi); border-color: var(--border-hi); outline: none; }

.hww__title {
  font-family: 'Clash Display', 'Inter Tight', sans-serif;
  font-size: clamp(36px, 5.4vw, 72px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.028em;
  margin: 0 0 clamp(22px, 3vh, 32px);
  text-wrap: balance;
  background-image: linear-gradient(180deg,
    #ffffff 0%,
    #ebecef 36%,
    #b8bbc1 74%,
    #7c8086 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.hww__sub {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.62;
  color: var(--text-mid);
  max-width: 64ch;
  margin: 0 auto;
}

/* ---- Stages list ---- */
.hww__stages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(18px, 2.6vh, 28px);
}
.hww__stage {
  --stage-mx: 50%;
  --stage-my: 50%;
  position: relative;
  display: grid;
  /* Three columns: rail · numeral · body.
     Numeral is auto-sized to its own content, body takes the rest. */
  grid-template-columns: 32px auto minmax(0, 1fr);
  column-gap: clamp(24px, 4vw, 56px);
  row-gap: 0;
  align-items: start;
  padding: clamp(28px, 4vh, 42px) clamp(28px, 4vw, 56px);
  border-radius: clamp(20px, 2vw, 32px);
  isolation: isolate;
  /* Liquid-glass card — matches the zparallax box treatment so the
     site speaks one visual language. */
  background:
    linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.03) 100%),
    rgba(14, 14, 18, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
          backdrop-filter: blur(14px) saturate(130%);
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  transition:
    transform 520ms var(--ease-spring),
    box-shadow 520ms var(--ease-out);
  overflow: hidden;
}
/* Cursor-follow spotlight inside each stage */
.hww__stage::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    420px circle at var(--stage-mx) var(--stage-my),
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 30%,
    transparent 60%);
  opacity: 0;
  transition: opacity 360ms var(--ease-out);
}
.hww__stage > * { position: relative; z-index: 1; }
.hww__stage:hover {
  transform: translateY(-4px);
  box-shadow:
    0 34px 70px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28);
}
.hww__stage:hover::before { opacity: 1; }

/* Stagger entrance so stages land one after another */
.hww__stage[data-reveal]:nth-child(1) { transition-delay: 0ms; }
.hww__stage[data-reveal]:nth-child(2) { transition-delay: 160ms; }
.hww__stage[data-reveal]:nth-child(3) { transition-delay: 320ms; }

/* ---- Left rail with the progression dot ---- */
.hww__stage-rail {
  position: relative;
  width: 32px;
  display: flex;
  align-items: flex-start;
  padding-top: clamp(12px, 2vh, 20px);
}
.hww__stage-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.08),
    0 0 18px rgba(220, 230, 255, 0.55);
  animation: hwwDotPulse 3.2s ease-in-out infinite;
}
@keyframes hwwDotPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255,255,255,0.08), 0 0 18px rgba(220,230,255,0.55); }
  50%      { box-shadow: 0 0 0 5px rgba(255,255,255,0.14), 0 0 32px rgba(230,240,255,0.80); }
}
.hww__stage-rail-line {
  position: absolute;
  top: calc(clamp(12px, 2vh, 20px) + 14px);
  bottom: -48px;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.08) 100%);
}
.hww__stage-rail-line--last { display: none; }

/* ---- Chrome numeral — sits in its own middle column (col 2) ---- */
.hww__stage-num {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  position: relative;
  display: inline-block;
  /* Small padding protects the chrome-text's right edge from being
     clipped by the column's auto-sized box (large negative-tracking
     glyphs can overshoot their advance width on some renders). */
  padding: 0 0.12em 0 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: 'Clash Display', 'Inter Tight', sans-serif;
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.035em;
  font-size: clamp(60px, 8.4vw, 124px);
  margin: 0;
  width: max-content;
  isolation: isolate;
  transition: transform 180ms var(--ease-out);
}
.hww__stage-num:active { transform: scale(0.985); }
.hww__stage-num:focus-visible { outline: 2px solid rgba(255,255,255,0.45); outline-offset: 8px; border-radius: 4px; }

.hww__stage-num-txt {
  position: relative;
  display: inline-block;
  color: var(--text-hi);
  /* Yellow-accent stage numeral — clean white, no chrome. */
}
.hww__stage[aria-current="true"] .hww__stage-num-txt,
.hww__stage:hover .hww__stage-num-txt { color: var(--accent); }
/* Moving sheen sweep across the numeral (continuous, matches the
   VZ marks elsewhere on the site). */
.hww__stage-num-sheen {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: block;
  background: linear-gradient(100deg,
    transparent 34%,
    rgba(255, 255, 255, 0.95) 48%,
    rgba(255, 255, 255, 0.18) 52%,
    transparent 68%);
  background-size: 240% 100%;
  background-position: 200% 50%;
  mix-blend-mode: screen;
  /* Clipped to the same character shape via an SVG-free trick:
     render the same text as background-clip:text so the sheen rides
     the letterforms only. */
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'/>");
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'/>");
  /* Fallback: the sheen shows over the whole numeral box when the
     SVG mask isn't applied (harmless — screen blend keeps it subtle). */
  opacity: 0;
}
/* We use a pseudo-element instead for the sheen — the clean text-clip
   approach. This overrides the sibling span above with the correct
   mask technique. */
.hww__stage-num::after {
  content: attr(data-sheen, '00');
  /* (See JS: we mirror data-text from the inner span onto the button.) */
  display: none;
}
/* Sheen sweep retired — the chrome look is gone. Numerals are clean
   white and pick up yellow on hover/active. */

/* Triple-click ripple — added/removed by JS */
.hww__stage-num-ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  opacity: 0;
  pointer-events: none;
}
.hww__stage-num.is-ripple .hww__stage-num-ripple {
  animation: hwwRipple 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes hwwRipple {
  0%   { transform: scale(0.4); opacity: 0.9; border-width: 2.5px; }
  70%  { transform: scale(6);   opacity: 0.15; border-width: 1px; }
  100% { transform: scale(8);   opacity: 0;    border-width: 1px; }
}
/* Easter-egg reveal after triple-click: the stage body briefly
   intensifies its text + rail */
.hww__stage-num.is-ripple ~ .hww__stage-body .hww__stage-hint {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Stage body: title + copy + hidden hint · column 3 (right of numeral) ---- */
.hww__stage-body {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  /* Small top pad so the title's cap-height aligns optically with the
     numeral's top (the numeral is much larger, so a few pixels down
     matches their visual tops). */
  padding-top: clamp(10px, 1.5vh, 22px);
  min-width: 0;
}
.hww__stage-title {
  font-family: 'Clash Display', 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: clamp(22px, 2.2vw, 34px);
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--text-hi);
  margin: 0 0 clamp(12px, 1.8vh, 18px);
}
.hww__stage-copy {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.65;
  color: var(--text-mid);
  max-width: 64ch;
  margin: 0;
  transition: color 320ms var(--ease-out);
}
.hww__stage:hover .hww__stage-copy { color: var(--text-hi); }
.hww__stage-hint {
  display: inline-block;
  margin-top: clamp(12px, 1.8vh, 18px);
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-lo);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-spring);
}
/* Hint appears after holding hover for 900ms, via JS adding .is-lingered */
.hww__stage.is-lingered .hww__stage-hint {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Closing line ---- */
.hww__close {
  margin-top: clamp(40px, 6vh, 72px);
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.hww__close-rule {
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.45) 50%,
    rgba(255,255,255,0) 100%);
  margin: 0 auto clamp(28px, 4vh, 40px);
}
.hww__closing {
  font-family: 'Clash Display', 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--text-hi);
  margin: 0;
  text-wrap: balance;
}
.hww__closing em {
  font-style: normal;
  color: var(--accent);
  position: relative;
}
.hww__closing em::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms var(--ease-spring);
}
.hww__closing em:hover::after { transform: scaleX(1); }

/* Responsive */
@media (max-width: 768px) {
  /* Stack numeral above body on mobile — not enough room for 3 columns. */
  .hww__stage {
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 18px;
    row-gap: 14px;
    padding: 28px 22px;
  }
  .hww__stage-rail { width: 24px; }
  .hww__stage-num {
    grid-column: 2;
    grid-row: 1;
    font-size: clamp(56px, 16vw, 88px);
  }
  .hww__stage-body {
    grid-column: 2;
    grid-row: 2;
    padding-top: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hww__grid,
  .hww__ray,
  .hww__scan,
  .hww__spark,
  .hww__orb-glow,
  .hww__stage-dot,
  .hww__stage-num-txt::after { animation: none; }
}

/* ============================================================
   STATS + QUOTE
   ============================================================ */
.stats {
  padding: clamp(96px, 12vw, 160px) 0;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 80px;
}
.stat {
  padding: 40px 32px;
  transition: transform 300ms var(--ease-out);
  position: relative;
}
.stat > * { position: relative; z-index: 3; }
.stat__num {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(48px, 6.2vw, 92px);
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(180deg, var(--text-hi), rgba(250,250,250,0.5));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.04em;
  margin-bottom: 18px;
}
.stat p { font-size: 15px; color: var(--text-mid); }

/* ============================================================
   MEGASTAT · single-card showstopper closer
   One huge number in the studio's accent yellow.
   Layered animation: rotating conic-gradient border, sweeping
   beam, pulsing halo, blinking status dot, scrolling grid.
   ============================================================ */
.stats--showstopper {
  padding: clamp(80px, 11vw, 160px) var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
}
.megastat {
  position: relative;
  isolation: isolate;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 120px) clamp(28px, 5vw, 88px);
  border-radius: 28px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(229,255,0,0.12), transparent 60%),
    radial-gradient(80% 100% at 0% 100%, rgba(229,255,0,0.06), transparent 50%),
    linear-gradient(180deg, #0f0f0f 0%, #060606 100%);
  border: 1px solid rgba(229,255,0,0.22);
  box-shadow:
    0 0 0 1px rgba(229,255,0,0.05),
    0 32px 96px -32px rgba(229,255,0,0.42),
    0 0 120px -40px rgba(229,255,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
  text-align: center;
  transition: transform 480ms var(--ease-out), box-shadow 480ms;
}
.megastat:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(229,255,0,0.08),
    0 40px 120px -32px rgba(229,255,0,0.55),
    0 0 160px -40px rgba(229,255,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Rotating conic-gradient border — masked to a 1px ring */
.megastat::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 60deg,
    rgba(229,255,0,0.95) 92deg,
    rgba(229,255,0,0.25) 120deg,
    transparent 200deg,
    transparent 250deg,
    rgba(229,255,0,0.7) 290deg,
    transparent 320deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: megastat-spin 9s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes megastat-spin {
  to { transform: rotate(360deg); }
}

/* Soft inner halo that breathes */
.megastat__halo {
  position: absolute;
  inset: 18% 18%;
  background: radial-gradient(closest-side, rgba(229,255,0,0.22), transparent 70%);
  filter: blur(48px);
  animation: megastat-pulse 4.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes megastat-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.10); }
}

/* Faint dot grid background, masked to centre */
.megastat__grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(229,255,0,0.10) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
  animation: megastat-drift 24s linear infinite;
}
@keyframes megastat-drift {
  to { background-position: 22px 22px; }
}

/* Diagonal sweeping beam */
.megastat__beam {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(229,255,0,0.14) 47%,
    rgba(229,255,0,0.40) 50%,
    rgba(229,255,0,0.14) 53%,
    transparent 70%
  );
  transform: translateX(-110%);
  animation: megastat-beam 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.8s;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}
@keyframes megastat-beam {
  0%   { transform: translateX(-110%); opacity: 0; }
  20%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translateX(110%); opacity: 0; }
}

/* Sci-fi corner brackets */
.megastat__corner {
  position: absolute;
  width: 28px; height: 28px;
  border: 2px solid var(--accent);
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(229,255,0,0.5));
}
.megastat__corner--tl { top: 18px; left: 18px;  border-right: none; border-bottom: none; border-top-left-radius: 8px; }
.megastat__corner--tr { top: 18px; right: 18px; border-left:  none; border-bottom: none; border-top-right-radius: 8px; }
.megastat__corner--bl { bottom: 18px; left: 18px;  border-right: none; border-top: none; border-bottom-left-radius: 8px; }
.megastat__corner--br { bottom: 18px; right: 18px; border-left:  none; border-top: none; border-bottom-right-radius: 8px; }

/* Inner content stack */
.megastat__inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
}

/* Kicker pill */
.megastat__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid rgba(229,255,0,0.32);
  border-radius: 999px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(229,255,0,0.05);
  box-shadow: 0 0 24px -8px rgba(229,255,0,0.5);
}
.megastat__kicker-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: megastat-blink 1.6s ease-in-out infinite;
}
@keyframes megastat-blink {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.85); }
}

/* The hero number — yellow gradient, glow halo */
.megastat__num {
  font-family: 'Clash Display', sans-serif;
  font-weight: 700;
  font-size: clamp(112px, 20vw, 280px);
  line-height: 0.88;
  letter-spacing: -0.055em;
  margin: 4px 0 4px;
  background: linear-gradient(180deg,
    #FFFFFF 0%,
    var(--accent) 55%,
    rgba(229,255,0,0.55) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 12px 48px rgba(229,255,0,0.4));
  position: relative;
}
/* Subtle scan-line over the number for that "live readout" feel */
.megastat__num::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 3px,
    rgba(0,0,0,0.08) 3px,
    rgba(0,0,0,0.08) 4px
  );
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
  pointer-events: none;
  mix-blend-mode: overlay;
}

.megastat__label {
  max-width: 56ch;
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.55;
  color: var(--text-mid);
}
.megastat__label .accent { color: var(--accent); font-style: normal; font-weight: 500; }

/* Readout strip · live dashboard feel */
.megastat__readout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: clamp(20px, 2.4vw, 36px);
  padding-top: clamp(20px, 2.4vw, 32px);
  border-top: 1px dashed rgba(229,255,0,0.22);
  width: 100%;
  max-width: 760px;
}
.megastat__readout-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.megastat__rk,
.megastat__rv {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.megastat__rk { color: rgba(255,255,255,0.4); }
.megastat__rv { color: var(--text-hi); display: inline-flex; align-items: center; gap: 7px; }
.megastat__pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: megastat-blink 1.4s ease-in-out infinite;
}

@media (max-width: 720px) {
  .megastat { padding: 56px 24px; border-radius: 22px; }
  .megastat__readout { grid-template-columns: 1fr; gap: 14px; }
  .megastat__corner { width: 22px; height: 22px; }
  .megastat__num { font-size: clamp(88px, 24vw, 140px); }
}

@media (prefers-reduced-motion: reduce) {
  .megastat::before,
  .megastat__beam,
  .megastat__halo,
  .megastat__grid-bg,
  .megastat__kicker-dot,
  .megastat__pulse {
    animation: none !important;
  }
}

.quote {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(48px, 7vw, 96px) var(--gutter);
  position: relative;
}
/* Editorial mark — large serif quote glyph behind the blockquote.
   Decorative only; aria-hidden via :before convention. */
.quote::before {
  content: '\201C';            /* curly opening double quote */
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Instrument Serif', 'Clash Display', serif;
  font-style: italic;
  font-size: clamp(96px, 12vw, 180px);
  line-height: 1;
  color: rgba(255,255,255,0.06);
  letter-spacing: -0.05em;
  pointer-events: none;
}
.quote blockquote {
  font-family: 'Instrument Serif', 'Clash Display', serif;
  font-style: italic;
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.18;
  font-weight: 400;
  color: var(--text-hi);
  margin-bottom: 32px;
  letter-spacing: -0.012em;
  position: relative;
  z-index: 2;
}
.quote figcaption {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  padding-top: 18px;
  position: relative;
}
.quote figcaption::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 1px;
  background: var(--border-hi);
}
.quote figcaption strong {
  font-family: 'Clash Display', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-hi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.quote figcaption span {
  font-size: 12px;
  color: var(--text-mid);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ============================================================
   ORIGIN
   ============================================================ */
/* ============================================================
   ORIGIN · holographic identity moment
   ------------------------------------------------------------
   Centre-stage: a particle-built VZ logo on canvas (sampled in
   JS, animated in rAF, cursor-reactive, additive 'lighter' blend
   for natural glow clusters). Around it: corner brackets, a scan
   sweep, holographic dot grid, four diagonal light rays, faint
   floating sparks. Beneath: VEZ DIGITAL wordmark in the same
   weight/spacing as the entry gate, then the brand leitsatz.
   ============================================================ */
.origin {
  position: relative;
  isolation: isolate;
  background: var(--bg-0);
  padding: clamp(120px, 16vh, 200px) 0 clamp(120px, 16vh, 200px);
  overflow: hidden;
  border-top: 1px solid var(--border);
}

/* ----- Ambient backdrop ----- */
.origin__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
/* Holographic dot grid — fades softly toward the edges */
.origin__grid {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1.4px);
  background-size: 32px 32px;
  background-position: 16px 16px;
  mask-image: radial-gradient(
    ellipse 65% 70% at 50% 50%,
    black 0%, black 35%, transparent 80%);
  -webkit-mask-image: radial-gradient(
    ellipse 65% 70% at 50% 50%,
    black 0%, black 35%, transparent 80%);
  opacity: 0.7;
  animation: originGridDrift 18s linear infinite;
}
@keyframes originGridDrift {
  0%   { background-position: 16px 16px; }
  100% { background-position: 48px 48px; }
}
/* Four corner light rays — slim diagonal beams */
.origin__rays {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.origin__ray {
  position: absolute;
  width: 1px;
  height: 60%;
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.32) 30%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0.32) 70%,
    rgba(255,255,255,0) 100%);
  filter: blur(0.5px);
  opacity: 0.55;
}
.origin__ray--1 { top: -10%; left: 10%;  transform: rotate( 22deg); animation: originRayPulse 7s ease-in-out infinite; }
.origin__ray--2 { top: -10%; right: 10%; transform: rotate(-22deg); animation: originRayPulse 7s ease-in-out infinite 1.7s; }
.origin__ray--3 { bottom: -10%; left: 18%;  transform: rotate(-18deg); animation: originRayPulse 7s ease-in-out infinite 3.4s; }
.origin__ray--4 { bottom: -10%; right: 18%; transform: rotate( 18deg); animation: originRayPulse 7s ease-in-out infinite 5.1s; }
@keyframes originRayPulse {
  0%, 100% { opacity: 0.18; }
  50%      { opacity: 0.62; }
}
/* Horizontal scan sweep — passes across once every ~9 sec */
.origin__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: -8%;
  height: 18%;
  background: linear-gradient(180deg,
    rgba(255,255,255,0)  0%,
    rgba(255,255,255,0.04) 40%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 60%,
    rgba(255,255,255,0)  100%);
  mix-blend-mode: screen;
  animation: originScan 9s cubic-bezier(0.65,0,0.35,1) infinite;
}
@keyframes originScan {
  0%   { transform: translateY(-20%); opacity: 0; }
  20%  { opacity: 0.8; }
  100% { transform: translateY(620%); opacity: 0; }
}

/* Floating sparks — small white dots drifting up */
.origin__sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.origin__spark {
  position: absolute;
  bottom: -10px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle,
    #ffffff 0%,
    rgba(255,255,255,0.5) 50%,
    transparent 100%);
  box-shadow: 0 0 10px rgba(255,255,255,0.7);
  opacity: 0;
  animation: originSparkRise var(--dur, 11s) linear infinite;
  animation-delay: calc(var(--i) * -1.4s);
}
.origin__spark:nth-child(1) { left: 14%; --dur: 12s; --drift:  10px; }
.origin__spark:nth-child(2) { left: 26%; --dur: 9s;  --drift: -16px; width: 2px; height: 2px; }
.origin__spark:nth-child(3) { left: 38%; --dur: 13s; --drift:  20px; }
.origin__spark:nth-child(4) { left: 48%; --dur: 10s; --drift:  -8px; width: 4px; height: 4px; }
.origin__spark:nth-child(5) { left: 60%; --dur: 14s; --drift:  14px; }
.origin__spark:nth-child(6) { left: 72%; --dur: 11s; --drift: -22px; width: 2px; height: 2px; }
.origin__spark:nth-child(7) { left: 82%; --dur: 12s; --drift:  10px; width: 3px; height: 3px; }
.origin__spark:nth-child(8) { left: 92%; --dur: 9.5s; --drift: -12px; }
@keyframes originSparkRise {
  0%   { transform: translate(0, 0) scale(0.6);   opacity: 0; }
  10%  { opacity: 0.85; }
  85%  { opacity: 0.55; }
  100% { transform: translate(var(--drift, 0), -90vh) scale(1); opacity: 0; }
}

/* ----- Inner column ----- */
.origin__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(28px, 4vh, 52px);
}

/* ----- Eyebrow ----- */
.origin__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-mid);
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.origin__kicker-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 10px rgba(255,255,255,0.7);
  animation: csPulse 2.6s ease-in-out infinite;
}
.origin__kicker-slash { opacity: 0.4; }

/* ----- Particle stage ----- */
.origin__stage {
  position: relative;
  width: clamp(280px, 38vw, 480px);
  aspect-ratio: 1 / 1;
  margin: 8px 0;
}

.origin__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Drop-shadow gives the entire particle field a soft halo */
  filter: drop-shadow(0 0 36px rgba(220, 235, 255, 0.25));
}

/* Soft radial halo behind the particle field */
.origin__stage-halo {
  position: absolute;
  inset: -10%;
  background: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    rgba(220, 235, 255, 0.18) 0%,
    rgba(150, 180, 220, 0.06) 40%,
    rgba(255,255,255,0) 75%);
  filter: blur(14px);
  z-index: 0;
  pointer-events: none;
  animation: originHaloBreath 5s ease-in-out infinite;
}
@keyframes originHaloBreath {
  0%, 100% { opacity: 0.7;  transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.04); }
}

/* Chrome corner brackets — frame the stage like an HUD readout */
.origin__bracket {
  position: absolute;
  width: clamp(28px, 3vw, 44px);
  height: clamp(28px, 3vw, 44px);
  pointer-events: none;
  z-index: 3;
}
.origin__bracket--tl {
  top: -8px; left: -8px;
  border-top: 1.5px solid rgba(255,255,255,0.55);
  border-left: 1.5px solid rgba(255,255,255,0.55);
  border-top-left-radius: 4px;
}
.origin__bracket--tr {
  top: -8px; right: -8px;
  border-top: 1.5px solid rgba(255,255,255,0.55);
  border-right: 1.5px solid rgba(255,255,255,0.55);
  border-top-right-radius: 4px;
}
.origin__bracket--bl {
  bottom: -8px; left: -8px;
  border-bottom: 1.5px solid rgba(255,255,255,0.55);
  border-left: 1.5px solid rgba(255,255,255,0.55);
  border-bottom-left-radius: 4px;
}
.origin__bracket--br {
  bottom: -8px; right: -8px;
  border-bottom: 1.5px solid rgba(255,255,255,0.55);
  border-right: 1.5px solid rgba(255,255,255,0.55);
  border-bottom-right-radius: 4px;
}

/* HUD-style labels in the stage corners */
.origin__stage-label {
  position: absolute;
  font-family: 'Inter Tight', system-ui, monospace;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  pointer-events: none;
  z-index: 3;
}
.origin__stage-label--l { left: 0;  bottom: -22px; }
.origin__stage-label--r { right: 0; bottom: -22px; text-align: right; }

/* Center crosshair — only visible when cursor leaves stage */
.origin__crosshair {
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 14px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  opacity: 0.18;
  background:
    linear-gradient(90deg, transparent 0 6px, rgba(255,255,255,0.5) 6px 8px, transparent 8px 14px),
    linear-gradient(0deg,  transparent 0 6px, rgba(255,255,255,0.5) 6px 8px, transparent 8px 14px);
}

/* ----- Wordmark (mirrors the entry gate) ----- */
.origin__wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.2vh, 16px);
  margin: clamp(28px, 4vh, 44px) 0 0;
  font-family: 'Clash Display', 'Inter Tight', sans-serif;
  line-height: 0.9;
  color: #fff;
}
.origin__word {
  display: flex;
  font-weight: 500;
  letter-spacing: 0.28em;
  font-size: clamp(40px, 7vw, 88px);
  text-shadow:
    0 0 28px rgba(225, 228, 235, 0.18),
    0 0 1px rgba(255, 255, 255, 0.85);
}
.origin__word--sub {
  font-weight: 300;
  font-size: clamp(13px, 1.5vw, 20px);
  letter-spacing: 0.54em;
  padding-left: 0.54em;
  color: rgba(255, 255, 255, 0.78);
}
.origin__letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  filter: blur(8px);
  transition:
    opacity 720ms var(--ease-out),
    transform 800ms var(--ease-spring),
    filter 700ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.origin__wordmark.is-in .origin__letter {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.origin__wordmark.is-in {
  animation: originWordmarkBreath 5s ease-in-out 1600ms infinite;
}
@keyframes originWordmarkBreath {
  0%, 100% { filter: drop-shadow(0 0 18px rgba(225, 228, 235, 0.16)); }
  50%      { filter: drop-shadow(0 0 32px rgba(245, 247, 250, 0.30)); }
}

/* ----- Tagline (leitsatz) ----- */
.origin__tagline {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 20px);
  letter-spacing: -0.005em;
  line-height: 1.55;
  color: var(--text-mid);
  max-width: 60ch;
  margin: 0 auto;
}

/* ----- CTA ----- */
.origin__cta {
  margin-top: clamp(8px, 1.6vh, 18px);
}

/* ----- Reveal alignment ----- */
/* The hero-style data-letter-split treats the tagline as a single
   text node. We override its default rise so it animates in soft
   without conflicting with the wordmark's own letter staggers. */
.origin__tagline[data-letter-split] .letter {
  transition-delay: calc(var(--i, 0) * 18ms + 200ms);
}

/* ----- Responsive ----- */
@media (max-width: 720px) {
  .origin__stage {
    width: clamp(240px, 70vw, 360px);
  }
  .origin__word { letter-spacing: 0.22em; }
  .origin__word--sub { letter-spacing: 0.42em; padding-left: 0.42em; }
}

/* ============================================================
   CONTACT
   ============================================================ */
/* ============================================================
   CONTACT · full-bleed salamander video + glass-card form
   ------------------------------------------------------------
   Structure mirrors the other cinematic section (hero video
   scrub): an absolute video layer fills the whole section,
   overlays handle grading + a subtle HUD dot-grid, and the copy
   + form sit in front inside a chrome-bracketed glass panel.
   The video plays up to ~2.0 s (pointing-at frame), freezes,
   and only resumes once the user focuses the first field —
   wired in main.js (setupContactVideo).
   ============================================================ */
.contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(100px, 14vh, 180px) 0 clamp(100px, 14vh, 160px);
  background: #050607;
  border-top: 1px solid var(--border);
  min-height: 100vh;
  min-height: 100svh;
  /* Anchor offset: keeps the section header clear of the fixed glass
     nav when arriving via #contact from another page. */
  scroll-margin-top: 88px;
}

/* ----- Full-bleed video + grading overlays ----- */
.contact__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.contact__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Keep the salamander readable against the dark site bg but
     avoid clipping shadows; slight saturate + contrast push. */
  filter: saturate(1.04) contrast(1.05) brightness(0.98);
  user-select: none;
}
/* Colour-grading + readability layer: a darker right-side wash
   behind the form, a subtle vignette, and a gentle global darken
   so the video reads as "ambient" not dominant. */
.contact__grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* right-side panel darken — makes the form legible */
    linear-gradient(100deg,
      rgba(5, 7, 10, 0.10) 0%,
      rgba(5, 7, 10, 0.35) 45%,
      rgba(5, 7, 10, 0.85) 72%,
      rgba(5, 7, 10, 0.92) 100%),
    /* top/bottom cinematic bars */
    linear-gradient(180deg,
      rgba(5, 7, 10, 0.55) 0%,
      rgba(5, 7, 10, 0) 12%,
      rgba(5, 7, 10, 0) 88%,
      rgba(5, 7, 10, 0.65) 100%),
    /* gentle overall mood darken */
    rgba(5, 7, 10, 0.18);
}
/* Subtle HUD dot-grid layered between the video and the copy */
.contact__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.4px);
  background-size: 34px 34px;
  background-position: 17px 17px;
  mask-image: radial-gradient(
    ellipse 65% 70% at 58% 50%,
    transparent 0%, transparent 30%, black 80%);
  -webkit-mask-image: radial-gradient(
    ellipse 65% 70% at 58% 50%,
    transparent 0%, transparent 30%, black 80%);
  opacity: 0.6;
}

/* ----- Inner column (on top of the stage) ----- */
.contact__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  min-height: 70vh;
}

/* ----- Header (top-left) ----- */
.contact__head {
  max-width: 52ch;
  text-align: left;
  margin-bottom: 0;
}
.contact__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-mid);
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  margin-bottom: clamp(20px, 3vh, 30px);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.contact__kicker-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 10px rgba(255,255,255,0.7);
  animation: csPulse 2.6s ease-in-out infinite;
}
.contact__title {
  font-family: 'Clash Display', 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 0 0 clamp(16px, 2.4vh, 24px);
  background: linear-gradient(180deg,
    #ffffff 0%, rgba(250,250,250,0.78) 55%, rgba(250,250,250,0.6) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.contact__lede {
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--text-mid);
  max-width: 46ch;
  line-height: 1.65;
  margin: 0;
}

/* ----- Trust strip · 3 reassurance pills directly under the contact lede. ----- */
.contact__trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 18px;
  padding: 0;
}
.contact__trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-mid);
  background: rgba(255,255,255,0.025);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 220ms, color 220ms, background 220ms;
}
.contact__trust-pill:hover {
  border-color: var(--border-hi);
  color: var(--text-hi);
  background: rgba(255,255,255,0.05);
}
.contact__trust-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5fde9b;
  box-shadow: 0 0 0 0 rgba(95,222,155,0.5);
  animation: workPillPulse 2400ms ease-out infinite;
}
.contact__trust-pill:nth-child(2) .contact__trust-pill-dot { animation-delay: 800ms; }
.contact__trust-pill:nth-child(3) .contact__trust-pill-dot { animation-delay: 1600ms; }

/* ----- Form-Submit micro-trust line ----- */
.form__micro {
  margin-top: 14px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-lo);
  letter-spacing: 0.01em;
  font-style: italic;
  font-family: 'Instrument Serif', 'Inter Tight', serif;
}

/* ----- Glass panel wrapping the form (top-right, over the
   right-hand darkened wash where the keyboard/monitor appear). ----- */
.contact__panel {
  position: relative;
  /* Pinned to column 2 so the form stays right while the left
     column shows the mascot/salamander backdrop unobstructed. */
  grid-column: 2;
  padding: clamp(24px, 3.2vw, 44px);
  border-radius: clamp(20px, 2vw, 28px);
  border: 1px solid var(--border-hi);
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%,
      rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg,
      rgba(18,20,24,0.75) 0%,
      rgba(10,12,14,0.6) 100%);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  box-shadow:
    0 40px 80px rgba(0,0,0,0.55),
    0 8px 24px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.08);
  isolation: isolate;
}

/* Chrome corner brackets on the panel — same HUD language as the
   identity stage and rollout banner. */
.contact__bracket {
  position: absolute;
  width: clamp(20px, 2vw, 32px);
  height: clamp(20px, 2vw, 32px);
  pointer-events: none;
  z-index: 2;
}
.contact__bracket--tl {
  top: 10px; left: 10px;
  border-top: 1.5px solid rgba(255,255,255,0.5);
  border-left: 1.5px solid rgba(255,255,255,0.5);
  border-top-left-radius: 6px;
}
.contact__bracket--tr {
  top: 10px; right: 10px;
  border-top: 1.5px solid rgba(255,255,255,0.5);
  border-right: 1.5px solid rgba(255,255,255,0.5);
  border-top-right-radius: 6px;
}
.contact__bracket--bl {
  bottom: 10px; left: 10px;
  border-bottom: 1.5px solid rgba(255,255,255,0.5);
  border-left: 1.5px solid rgba(255,255,255,0.5);
  border-bottom-left-radius: 6px;
}
.contact__bracket--br {
  bottom: 10px; right: 10px;
  border-bottom: 1.5px solid rgba(255,255,255,0.5);
  border-right: 1.5px solid rgba(255,255,255,0.5);
  border-bottom-right-radius: 6px;
}

/* Status badge — mirrors video state ("Idle" vs "Typing…") */
.contact__status {
  position: absolute;
  top: -14px;
  left: clamp(20px, 3vw, 40px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-mid);
  background: #0B0C10;
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-pill);
  z-index: 3;
}
.contact__status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(255,255,255,0.55);
  animation: csPulse 2.4s ease-in-out infinite;
}
.contact.is-typing .contact__status-text::after {
  content: '…';
}
.contact.is-typing .contact__status-text {
  color: var(--text-hi);
}

/* ----- Responsive: stack below tablet ----- */
@media (max-width: 980px) {
  .contact__inner {
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vh, 56px);
    min-height: 0;
  }
  /* On narrow viewports the right-column pin is dropped so the form
     spans the full width naturally. */
  .contact__panel { grid-column: 1; }
  .contact__head { max-width: 64ch; }
  /* Re-balance the grade so the bottom stays readable when copy
     and form stack vertically on narrow viewports. */
  .contact__grade {
    background:
      linear-gradient(180deg,
        rgba(5, 7, 10, 0.55) 0%,
        rgba(5, 7, 10, 0.20) 25%,
        rgba(5, 7, 10, 0.55) 60%,
        rgba(5, 7, 10, 0.90) 100%),
      rgba(5, 7, 10, 0.25);
  }
}

.form {
  display: grid;
  gap: 22px;
  padding: 44px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.field { display: grid; gap: 8px; }
.field label {
  font-size: 12px;
  color: var(--text-mid);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  min-height: 48px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-hi);
  font-size: 15px;
  transition: border-color 200ms, background 200ms, box-shadow 200ms;
  font-family: inherit;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--text-hi);
  background: var(--bg-3);
}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: #FF6B6B;
}
.field__error {
  color: #FF6B6B;
  font-size: 12px;
  min-height: 1em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.field__error:not(:empty)::before {
  content: '!';
  display: inline-grid;
  place-items: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #FF6B6B;
  color: var(--bg-0);
  font-weight: 700;
  font-size: 10px;
}
.form__ok {
  text-align: center;
  padding: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  color: var(--text-hi);
  font-weight: 500;
}
.form .cta-wrap { justify-self: start; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  padding: 96px 0 40px;
  background: var(--bg-0);
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.footer__hero {
  max-width: var(--container);
  margin: 0 auto 72px;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
}
/* Footer wordmark — chrome PNG retired. Big text wordmark instead. */
.footer__logo-wrap {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  margin: 0;
  flex-shrink: 0;
}
.footer__logo-wrap .vz-mark--footer { display: none !important; }
/* Footer text wordmark fallback — rendered via the existing span text
   when the chrome image is hidden. The actual mark text comes from JS
   replacing the visual; if not, we render a clean wordmark via ::before. */
.footer__logo-wrap::before {
  content: 'VEZ DIGITAL';
  font-family: 'Clash Display', 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 6vw, 80px);
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--text-hi);
  line-height: 1;
}
.footer__logo-wrap::after {
  content: '.';
  color: var(--accent);
  font-family: 'Clash Display', sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1;
  margin-left: 0.04em;
}
/* ----- Footer tagline · elegant italic with sheen sweep ----- */
.footer__tag {
  font-family: 'Instrument Serif', 'Georgia', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 12ch;
  text-align: left;
  color: var(--text-hi);
}
.footer__tag em,
.footer__tag .accent { color: var(--accent); font-style: italic; }
.footer__tag .letter-e {
  display: inline-block;
  /* Entry state: hidden, blurred, slightly dropped. */
  opacity: 0;
  filter: blur(8px);
  transform: translateY(22px);
  transition:
    opacity 1000ms cubic-bezier(0.22, 0.7, 0.18, 1),
    filter  1000ms cubic-bezier(0.22, 0.7, 0.18, 1),
    transform 1100ms cubic-bezier(0.22, 0.7, 0.18, 1);
  transition-delay: calc(var(--i, 0) * 70ms + 200ms);
  will-change: transform, opacity, filter;
}
.footer__tag .letter-e--space { width: 0.28em; }
.footer__tag.is-in .letter-e {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  /* After entry, hand off to a continuous float so the tagline
     never sits still — each letter breathes on its own phase. */
  animation: tagFloat 5.8s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 130ms + 1400ms);
}
@keyframes tagFloat {
  0%, 100% { transform: translateY(0)   rotate(0deg); }
  50%      { transform: translateY(-3px) rotate(-0.5deg); }
}

/* Stack vertically on narrow viewports */
@media (max-width: 640px) {
  .footer__hero { flex-direction: column; text-align: center; gap: 16px; }
  .footer__tag  { text-align: center; max-width: none; }
}
.footer__grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--border);
}
.footer__grid h4 { margin-bottom: 18px; }
.footer__grid ul { display: grid; gap: 10px; }
.footer__grid a {
  color: var(--text-mid);
  font-size: 14px;
  transition: color 200ms;
}
.footer__grid a:hover { color: var(--text-hi); }
.footer__grid address { font-style: normal; color: var(--text-mid); font-size: 14px; line-height: 1.8; }
.footer__grid address strong { color: var(--text-hi); font-weight: 600; letter-spacing: 0.04em; }
.footer__addr-aka { color: var(--text-low, rgba(255,255,255,0.45)); font-size: 12px; letter-spacing: 0.02em; }
.footer__social { display: flex; gap: 10px; }
.footer__social a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-mid);
  transition: all 220ms;
}
.footer__social a:hover {
  color: var(--text-hi);
  border-color: var(--border-hot);
  transform: translateY(-2px);
}
.footer__social svg { width: 18px; height: 18px; }
.footer__bottom {
  max-width: var(--container);
  margin: 32px auto 0;
  padding: 0 var(--gutter);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.footer__bottom small { color: var(--text-lo); font-size: 13px; }
.footer__ee {
  display: inline-block;
  color: var(--text-lo);
  font-size: 12px;
  letter-spacing: 0.15em;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  margin-left: 6px;
  transition: color 200ms, border-color 200ms;
}
.footer__ee:hover { color: var(--text-hi); border-color: var(--border-hi); }

/* ============================================================
   EASTER EGG LAYER + TOAST
   ============================================================ */
.ee-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8500;
  overflow: hidden;
}
.ee-confetti {
  position: absolute;
  width: 6px; height: 14px;
  background: var(--text-hi);
  opacity: 0.9;
  animation: confettiFall 3s var(--ease-out) forwards;
}
@keyframes confettiFall {
  0% { transform: translateY(-20vh) rotate(0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(120vh) rotate(720deg); opacity: 0; }
}
.ee-ripple {
  position: fixed;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--text-hi);
  transform: translate(-50%, -50%) scale(0);
  animation: ripple 900ms var(--ease-out) forwards;
  pointer-events: none;
  z-index: 8600;
  mix-blend-mode: difference;
}
@keyframes ripple {
  to { transform: translate(-50%, -50%) scale(10); opacity: 0; }
}
.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(20px);
  padding: 14px 24px;
  background: var(--text-hi);
  color: var(--bg-0);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 260ms, transform 400ms var(--ease-spring);
  z-index: 9500;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  letter-spacing: -0.005em;
}
.toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Inverted mode (konami easter egg) */
body.is-inverted {
  --bg-0: #FAFAFA;
  --bg-1: #F0F0F0;
  --bg-2: #E5E5E5;
  --bg-3: #D4D4D4;
  --text-hi: #0A0A0A;
  --text-mid: #525252;
  --text-lo: #A3A3A3;
  --text-faint: #D4D4D4;
  --border: rgba(0,0,0,0.08);
  --border-hi: rgba(0,0,0,0.14);
  --border-hot: rgba(0,0,0,0.4);
  transition: background 600ms var(--ease-out), color 600ms var(--ease-out);
}
body.is-inverted .cta { background: var(--bg-0); }
body.is-inverted .cursor-ring { border-color: rgba(0,0,0,0.4); }
body.is-inverted .cursor-dot { background: var(--text-hi); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .services__grid { grid-template-columns: 1fr 1fr; }
  .services__grid .card:nth-child(3) { grid-column: span 2; }
  .stats__grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --gutter: 20px; }
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: block; margin-left: auto; }
  .nav__mobile.is-open { display: flex; }
  .services__grid, .work__grid { grid-template-columns: 1fr; }
  .services__grid .card:nth-child(3) { grid-column: span 1; }
  .form { padding: 28px; }
  .form__row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__bottom { justify-content: center; text-align: center; }
  /* (legacy .intro__meta rules removed — section replaced by .cap) */
  .cursor-ring, .cursor-dot { display: none; }
  body.cursor-ready, body.cursor-ready * { cursor: auto !important; }
}

@media (max-width: 480px) {
  .cta { padding: 15px 24px; font-size: 15px; }
  .form { padding: 24px 20px; }

  /* Premium mobile typography — tighter rhythm, more confident scale.
     Headlines remain bold but get more breathing room around them. */
  h1 { letter-spacing: -0.04em; }
  h2 { letter-spacing: -0.038em; }
  h3 { letter-spacing: -0.022em; }
  body { font-size: 15.5px; line-height: 1.62; }
  p { letter-spacing: -0.002em; }

  /* CTAs reach for the thumb on small mobile — full-width within
     their wrap, but only on standalone CTA placements (not inside grids). */
  .cta-wrap:not(.work__cta-wrap) .cta-border,
  .cta-wrap:not(.work__cta-wrap) .cta { display: flex; width: 100%; justify-content: center; }

  /* Footer rhythm */
  .footer__bottom { gap: 8px; flex-direction: column; }
  .footer__bottom small { font-size: 12px; }

  /* Stats: stay full-width but reduce inner padding for density */
  .stat { padding: 28px 22px; }
  .stat__num { margin-bottom: 12px; }

  /* Work-cards on small mobile — tighter inner padding */
  .work__meta { padding: 20px 22px 24px; }
  .work__item--featured .work__meta { padding: 22px 22px 26px; }

  /* Quote block: dampen the giant decorative quote-mark */
  .quote::before { font-size: 92px; top: -10px; }
  .quote { padding-block: 56px; }

  /* Pills inside work-poster — smaller offsets */
  .work__pill { top: 12px; left: 12px; padding: 5px 10px; font-size: 10.5px; }
}


/* ============================================================
   CASE STUDY · SnusYeti
   ------------------------------------------------------------
   Editorial case-study block. The design contract here is
   STRUCTURAL separation of display numerals and body copy —
   each chapter uses a two-column CSS Grid, so the oversized
   numeral and the headline/paragraph live in their own cells.
   Collision is impossible by layout, not by padding.
   Visual language: black/silver chrome, one accent (a bright
   sheen dot), generous whitespace. Signature animations:
     · chrome vertical rail, dot tracks viewport-center
     · right-edge rollout totem banner (see .rollout below)
     · per-chapter reveal: numeral rise → tick draws → tag →
       headline letter-split → body fade
     · count-up stats with an under-number chrome rule that
       draws out as the count finishes
   ============================================================ */
.cs {
  position: relative;
  isolation: isolate;
  background: var(--bg-0);
  border-top: 1px solid var(--border);
  padding: clamp(120px, 18vh, 220px) 0 clamp(120px, 18vh, 200px);
  overflow: hidden;
}

/* Ambient gradient backdrop — very subtle top/bottom vignettes
   so the section reads as a distinct editorial beat without
   breaking the overall monochrome flow. */
.cs::before,
.cs::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 220px;
  pointer-events: none;
  z-index: 0;
}
.cs::before {
  top: 0;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.035) 0%,
    rgba(255,255,255,0) 100%);
}
.cs::after {
  bottom: 0;
  background: linear-gradient(0deg,
    rgba(255,255,255,0.02) 0%,
    rgba(255,255,255,0) 100%);
}

/* ---------- Chrome progress rail (left gutter) ---------- */
.cs__rail {
  position: absolute;
  top: clamp(80px, 10vh, 160px);
  bottom: clamp(80px, 10vh, 160px);
  left: clamp(18px, 2.4vw, 48px);
  width: 1px;
  z-index: 1;
  pointer-events: none;
}
.cs__rail-line,
.cs__rail-fill {
  position: absolute;
  left: 0;
  width: 1px;
}
.cs__rail-line {
  top: 0; bottom: 0;
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.10) 6%,
    rgba(255,255,255,0.14) 50%,
    rgba(255,255,255,0.10) 94%,
    rgba(255,255,255,0) 100%);
}
.cs__rail-fill {
  top: 0;
  height: 100%;
  /* Use scaleY (compositor-only) instead of animating height.
     Animating height triggers layout reflow on every scroll frame —
     scaleY is GPU-accelerated and doesn't touch layout. */
  transform-origin: top;
  transform: scaleY(var(--cs-p, 0));
  background: linear-gradient(180deg,
    rgba(255,255,255,0.6) 0%,
    rgba(255,255,255,0.9) 50%,
    rgba(255,255,255,0.6) 100%);
  box-shadow: 0 0 14px rgba(255,255,255,0.35);
  will-change: transform;
}
.cs__rail-dot {
  position: absolute;
  left: 50%;
  /* `top` % is parent-relative which is exactly what we want.
     On an absolute, out-of-flow element this triggers paint but
     not layout-reflow; will-change pre-promotes the layer so the
     compositor handles updates cheaply. */
  top: calc(var(--cs-p, 0) * 100%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 30% 28%,
      #ffffff 0%,
      rgba(255,255,255,0.9) 34%,
      rgba(200,205,215,0.55) 66%,
      rgba(80,80,80,0.15) 100%);
  box-shadow:
    0 0 18px rgba(255,255,255,0.55),
    0 0 6px rgba(255,255,255,0.9),
    inset 0 -1px 2px rgba(0,0,0,0.25);
  will-change: top;
}
.cs__rail-cap {
  position: absolute;
  left: 50%;
  width: 9px;
  height: 1px;
  background: rgba(255,255,255,0.35);
  transform: translateX(-50%);
}
.cs__rail-cap--top { top: 0; }
.cs__rail-cap--bot { bottom: 0; }

@media (max-width: 780px) {
  /* Rail stays visible on mobile — pushed hard against the left edge
     (was clamp 18-48px from left) so it reads as a portrait-mode
     scroll-progress indicator without competing with the content column. */
  .cs__rail {
    left: 6px;
    top: clamp(48px, 6vh, 96px);
    bottom: clamp(48px, 6vh, 96px);
  }
  .cs__rail-dot { width: 8px; height: 8px; }
}

/* ---------- Inner container ---------- */
.cs__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
/* At wide viewports, reserve gutter for the rollout banner so
   the enlarged strip never crowds the copy. Content shifts
   slightly left — reads as a deliberate editorial asymmetry. */
@media (min-width: 1100px) {
  #case-snusyeti .cs__inner {
    /* Reserve enough gutter for the enlarged rollout banner —
       must exceed (--rollout-w + right-offset) so copy never
       gets crowded by the strip on wide viewports. */
    padding-right: calc(var(--gutter) + clamp(230px, 19.5vw, 360px));
  }
}

/* ---------- HERO ---------- */
.cs__hero {
  max-width: 1020px;
  margin: 0 auto clamp(60px, 9vh, 120px);
  text-align: center;
}
.cs__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-mid);
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  margin-bottom: clamp(22px, 3vh, 34px);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cs__kicker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 10px rgba(255,255,255,0.7);
  animation: csPulse 2.6s ease-in-out infinite;
}
.cs__kicker-slash { opacity: 0.4; }
@keyframes csPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.82); }
}

.cs__title {
  font-family: 'Clash Display', 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 0 0 clamp(18px, 2.6vh, 30px);
  background: linear-gradient(180deg,
    #ffffff 0%,
    rgba(250,250,250,0.78) 55%,
    rgba(250,250,250,0.6) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.cs__lede {
  font-size: clamp(15px, 1.35vw, 19px);
  color: var(--text-mid);
  max-width: 62ch;
  margin: 0 auto;
  line-height: 1.62;
}

/* ---------- STATS ROW ---------- */
.cs__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 48px);
  margin: 0 auto clamp(80px, 14vh, 160px);
  padding-top: clamp(36px, 5vh, 64px);
  border-top: 1px solid var(--border-hi);
  position: relative;
}
/* Bright bookend accent on the left of the top rule */
.cs__stats::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: clamp(80px, 10vw, 160px);
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.85), rgba(255,255,255,0));
}

.cs__stat {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(10px, 1.4vw, 18px) 0 clamp(8px, 1vw, 14px);
}
.cs__stat-idx {
  display: block;
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-lo);
  margin-bottom: clamp(14px, 2vh, 24px);
}
.cs__stat-num {
  display: block;
  font-family: 'Clash Display', 'Inter Tight', sans-serif;
  font-weight: 700;
  /* Capped lower than the original — at wide viewports the rollout
     banner steals a chunk of inner content width, leaving each of
     the four stat columns ~190px. Numbers like "69.5K+" rendered
     at 78px overflowed their cell and bled into the next stat;
     56px keeps every count safely inside its column. */
  font-size: clamp(34px, 3.8vw, 56px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cs__stat-rule {
  display: block;
  height: 1px;
  width: 0;
  margin: clamp(14px, 2vw, 22px) 0 clamp(10px, 1.4vw, 16px);
  background: linear-gradient(90deg,
    var(--accent),
    rgba(229, 255, 0, 0.15));
  transition: width 1100ms var(--ease-out) 420ms;
}
.cs__stat.is-in .cs__stat-rule { width: 100%; }
.cs__stat-label {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-mid);
  line-height: 1.45;
}

@media (max-width: 980px) {
  .cs__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(28px, 4vw, 48px);
  }
}
@media (max-width: 560px) {
  .cs__stats { grid-template-columns: 1fr; }
}

/* ---------- CHAPTERS ---------- */
.cs__chapters {
  display: grid;
  gap: clamp(80px, 12vh, 160px);
  max-width: 1180px;
  margin: 0 auto;
}

/* THE ANTI-COLLISION GRID.
   The chapter splits into two columns: a fixed-width numeral
   column and a flexible copy column. A grid-gap separates them
   so the oversized numeral physically cannot reach the headline.
   min-width: 0 on the body column prevents grid overflow on long
   words (URLs, etc) from pushing into the numeral column. */
.cs__ch {
  position: relative;
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 96px);
  align-items: start;
}

/* Hairline between chapters (painted BEFORE each chapter except
   the first). Draws itself open as the chapter enters view. */
.cs__ch + .cs__ch::before {
  content: '';
  position: absolute;
  top: calc(-1 * clamp(40px, 6vh, 80px));
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.08) 14%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0.08) 86%,
    rgba(255,255,255,0) 100%);
  transform: scaleX(0.3);
  transform-origin: center;
  opacity: 0.3;
  transition: transform 1100ms var(--ease-out), opacity 700ms var(--ease-out);
}
.cs__ch.is-in + .cs__ch::before { transform: scaleX(1); opacity: 1; }

/* Numeral column */
.cs__ch-idx {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1.4vw, 16px);
}
.cs__ch-num {
  display: block;
  font-family: 'Clash Display', 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: clamp(64px, 7vw, 128px);
  line-height: 0.86;
  letter-spacing: -0.06em;
  color: var(--accent);
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition:
    opacity 900ms var(--ease-out),
    transform 1000ms var(--ease-spring),
    filter 700ms var(--ease-out);
}
.cs__ch.is-in .cs__ch-num {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.cs__ch-tick {
  display: block;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, var(--accent), rgba(229, 255, 0, 0));
  transition: width 1000ms var(--ease-out) 280ms;
}
.cs__ch.is-in .cs__ch-tick { width: 72px; }

.cs__ch-tag {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-mid);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 700ms var(--ease-out) 400ms,
    transform 700ms var(--ease-out) 400ms;
}
.cs__ch.is-in .cs__ch-tag { opacity: 1; transform: translateY(0); }

/* Body column */
.cs__ch-body {
  min-width: 0;
  padding-top: clamp(10px, 1.8vh, 24px);
}
.cs__ch-title {
  font-family: 'Clash Display', 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0 0 clamp(16px, 2.4vh, 26px);
  color: var(--text-hi);
}
.cs__ch-title em,
.cs__ch-title .accent { color: var(--accent); font-style: normal; }
.cs__ch-copy {
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--text-mid);
  line-height: 1.72;
  max-width: 64ch;
}

@media (max-width: 820px) {
  .cs__ch {
    grid-template-columns: 1fr;
    gap: clamp(18px, 3vh, 32px);
  }
  .cs__ch-idx {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  .cs__ch-num { font-size: clamp(56px, 14vw, 88px); }
  .cs__ch.is-in .cs__ch-tick { width: 48px; }
}

/* ---------- CTA ---------- */
.cs__cta {
  margin-top: clamp(100px, 14vh, 180px);
  display: flex;
  justify-content: center;
}
.cs__cta-frame {
  position: relative;
  max-width: 820px;
  width: 100%;
  padding: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 60px);
  border: 1px solid var(--border);
  border-radius: clamp(20px, 2vw, 28px);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,
      rgba(255,255,255,0.06) 0%,
      rgba(255,255,255,0) 60%),
    linear-gradient(180deg,
      rgba(22,22,24,0.55) 0%,
      rgba(10,10,10,0.25) 100%);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 40px 80px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.04) inset;
}
/* Chrome corner brackets */
.cs__cta-frame::before,
.cs__cta-frame::after {
  content: '';
  position: absolute;
  width: 44px;
  height: 44px;
  pointer-events: none;
  z-index: 1;
}
.cs__cta-frame::before {
  top: 14px; left: 14px;
  border-top: 1px solid rgba(255,255,255,0.4);
  border-left: 1px solid rgba(255,255,255,0.4);
  border-top-left-radius: 10px;
}
.cs__cta-frame::after {
  bottom: 14px; right: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  border-right: 1px solid rgba(255,255,255,0.4);
  border-bottom-right-radius: 10px;
}

.cs__cta-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-mid);
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  margin-bottom: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}
.cs__cta-title {
  font-family: 'Clash Display', 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
  background: linear-gradient(180deg,
    var(--text-hi) 0%,
    rgba(250,250,250,0.72) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.cs__cta-copy {
  font-size: clamp(15px, 1.15vw, 17px);
  color: var(--text-mid);
  max-width: 58ch;
  margin: 0 auto 28px;
  line-height: 1.65;
}
.cs__cta-btn { display: flex; justify-content: center; }

/* ============================================================
   ROLLOUT · vertical totem banner (branded side strip)
   ------------------------------------------------------------
   The image is a tall 1344×3168 totem (ratio 0.424). Instead of
   being laid into the content as a standard image, it hangs from
   a chrome rod like a premium editorial banner — rod → frame →
   tassel — with a rotated folio caption in the gutter.
   The native aspect is preserved via aspect-ratio; the frame
   never crops, stretches, or distorts.
   Placed with position: absolute against a section that spans
   full width; a sticky inner track keeps the banner glued to the
   viewport as the user scrolls through the host section, giving
   the "rolled out from the edge" feel. Variants: --cs (primary,
   tall, sticky) and --echo (smaller, static, for editorial
   repetition in later sections).
   ============================================================ */
.rollout {
  --rollout-w: clamp(104px, 9.4vw, 154px);
  --rollout-asp: 1344 / 3168;
  /* Hidden by default — needs gutter space to exist */
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: auto;
  z-index: 1;                 /* below .cs__inner (z-index: 2) */
  pointer-events: none;
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
}
.rollout.is-in { opacity: 1; }

.rollout__track {
  position: sticky;
  top: clamp(88px, 14vh, 156px);
  display: grid;
  grid-template-columns: var(--rollout-w) auto;
  column-gap: clamp(10px, 1.1vw, 18px);
  align-items: start;
  padding: 30px clamp(12px, 1.6vw, 28px) 36px 0;
}

/* ---------- Chrome hanger rod ---------- */
.rollout__rod {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  height: 0;
  justify-self: stretch;
}
.rollout__rod-bar {
  position: absolute;
  top: -20px;
  left: -9px;
  right: -9px;
  height: 4px;
  border-radius: 999px;
  background: #1A1A1A;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 -1px 0 rgba(0,0,0,0.6) inset,
    0 4px 10px rgba(0,0,0,0.55);
}
.rollout__rod-cap {
  position: absolute;
  top: -25px;
  width: 10px;
  height: 14px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow:
    0 0 12px var(--accent-glow),
    0 1px 3px rgba(0,0,0,0.55),
    0 0 0 0.5px rgba(0,0,0,0.4);
}
.rollout__rod-cap--l { left: -14px; }
.rollout__rod-cap--r { right: -14px; }
.rollout__rod-wire {
  position: absolute;
  top: -18px;
  width: 1px;
  height: 20px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.32) 0%,
    rgba(255,255,255,0) 100%);
}
.rollout__rod-wire--l { left: 12%; }
.rollout__rod-wire--r { right: 12%; }

/* ---------- Frame with image ---------- */
.rollout__frame {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  width: var(--rollout-w);
  aspect-ratio: var(--rollout-asp);
  margin: 0;
  border-radius: clamp(6px, 0.7vw, 10px);
  overflow: hidden;
  background: #070707;
  transform-origin: top center;
  isolation: isolate;
  box-shadow:
    0 34px 60px rgba(0,0,0,0.6),
    0 12px 24px rgba(0,0,0,0.42),
    0 0 0 1px rgba(255,255,255,0.22),
    inset 0 1px 0 rgba(255,255,255,0.38),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    inset 1px 0 0 rgba(255,255,255,0.14),
    inset -1px 0 0 rgba(255,255,255,0.08);
}
.rollout__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                       /* aspect matches → no crop */
  object-position: center;
  filter: saturate(0.96) contrast(1.04) brightness(0.94);
  user-select: none;
  pointer-events: none;
}
/* Animated diagonal sheen — subtle, infrequent */
.rollout__sheen {
  position: absolute;
  inset: -8% -30%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(135deg,
    transparent 40%,
    rgba(255,255,255,0.18) 50%,
    transparent 60%);
  mix-blend-mode: screen;
  transform: translateX(-140%);
  animation: rolloutSheen 9s cubic-bezier(0.65,0,0.35,1) infinite;
  animation-delay: 1.8s;
}
/* Glass-edge rim + top crown highlight */
.rollout__bevel {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 90% 42% at 50% 0%,
      rgba(255,255,255,0.22) 0%,
      rgba(255,255,255,0.05) 40%,
      rgba(255,255,255,0) 78%),
    radial-gradient(ellipse 70% 40% at 50% 100%,
      rgba(0,0,0,0.5) 0%,
      rgba(0,0,0,0) 72%);
  mix-blend-mode: overlay;
  opacity: 0.88;
}

/* ---------- Rotated editorial caption tag ---------- */
.rollout__tag {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: start;
  display: none;                           /* shown at wide breakpoints */
  flex-direction: row;
  gap: 14px;
  align-items: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-lo);
  white-space: nowrap;
  line-height: 1;
  padding: 12px 0;
  opacity: 0;
  transform: rotate(180deg) translateY(16px);
  transition: opacity 900ms var(--ease-out) 500ms, transform 900ms var(--ease-out) 500ms;
}
.rollout.is-in .rollout__tag {
  opacity: 1;
  transform: rotate(180deg) translateY(0);
}
.rollout__tag-slash { opacity: 0.4; }

/* ---------- Bottom tassel (dangle detail) ---------- */
.rollout__tassel {
  grid-column: 1;
  grid-row: 3;
  justify-self: center;
  position: relative;
  width: 1px;
  height: 22px;
  margin-top: 4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.38) 0%,
    rgba(255,255,255,0) 100%);
  opacity: 0;
  transition: opacity 700ms var(--ease-out) 800ms;
}
.rollout.is-in .rollout__tassel { opacity: 1; }
.rollout__tassel::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translate(-50%, 55%);
  background: radial-gradient(circle at 32% 30%,
    #ffffff 0%, #b2b7c0 52%, #3d424b 100%);
  box-shadow: 0 2px 5px rgba(0,0,0,0.55);
}

/* ---------- Unroll entrance animation ---------- */
.rollout.is-in .rollout__frame {
  animation: rolloutUnroll 1500ms var(--ease-spring) both;
}
@keyframes rolloutUnroll {
  0%   { transform: scaleY(0.04) translateY(-6px); opacity: 0; filter: blur(4px); }
  35%  { opacity: 1; }
  100% { transform: scaleY(1) translateY(0); opacity: 1; filter: blur(0); }
}
@keyframes rolloutSheen {
  0%, 72%  { transform: translateX(-140%); opacity: 0; }
  80%      { opacity: 0.6; }
  100%     { transform: translateX(160%); opacity: 0; }
}

/* ---------- Variants ---------- */

/* Primary (inside .cs) — scroll-driven UNROLL.
   Structure differs from the echo: no __track wrapper; a rod
   pinned at top; a strip whose height grows with --cs-p (the
   section-progress CSS var driven by the rail tracker). The
   strip uses background-repeat: repeat-y so the image tiles to
   fill the extended length — the banner reads as a continuous
   branded object that stretches through the entire case-study.
   A tassel hangs at the strip's bottom edge, riding the unroll. */
.rollout--cs {
  --rollout-w: clamp(200px, 17vw, 304px);
  --rollout-top: clamp(72px, 9vh, 132px);
  --rollout-bot: clamp(60px, 8vh, 120px);
  --rod-gap: 22px;
  --strip-top: calc(var(--rollout-top) + var(--rod-gap));
  --strip-max-h: calc(100% - var(--strip-top) - var(--rollout-bot));
  width: var(--rollout-w);
  right: clamp(14px, 1.8vw, 36px);
  /* Base .rollout handles display/position; these override a few
     inner rules that only apply to --echo via .rollout__track. */
}

/* Rod pinned at top */
.rollout--cs .rollout__rod {
  position: absolute;
  top: var(--rollout-top);
  left: 0;
  right: 0;
  height: 0;
}

/* Strip — scroll-driven unroll.
   The box stays at FULL available height (no per-frame layout
   reflow). A clip-path inset hides the bottom portion based on
   --cs-p — paint-only, GPU-friendly. The previous height-driven
   approach was the main scroll-jank source: every scroll frame
   re-laid out the box, repainted the tiled background, and re-
   rasterized the heavy box-shadow. clip-path skips all of that. */
.rollout--cs .rollout__strip {
  position: absolute;
  top: var(--strip-top);
  left: 0;
  right: 0;
  height: var(--strip-max-h);
  overflow: hidden;
  border-radius: clamp(6px, 0.7vw, 12px);
  background-image: url('assets/rollout-totems.webp');
  background-repeat: repeat-y;
  background-size: 100% auto;
  background-position: top center;
  filter:
    saturate(0.96) contrast(1.05) brightness(0.94)
    drop-shadow(0 30px 50px rgba(0,0,0,0.55));
  /* drop-shadow follows the clipped silhouette so the shadow
     "grows" with the visible portion. box-shadow keeps the inner
     bevel highlights since they sit INSIDE the box edge and read
     against the clip correctly. */
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.22),
    inset 0 1px 0 rgba(255,255,255,0.38),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    inset 1px 0 0 rgba(255,255,255,0.14),
    inset -1px 0 0 rgba(255,255,255,0.08);
  clip-path: inset(0 0 calc((1 - var(--cs-p, 0)) * 100%) 0 round clamp(6px, 0.7vw, 12px));
  isolation: isolate;
  transform-origin: top center;
  will-change: clip-path;
}

/* Strip bevel — crown highlight at top + soft bottom shadow */
.rollout__strip-bevel {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 90% 5% at 50% 0%,
      rgba(255,255,255,0.28) 0%,
      rgba(255,255,255,0.06) 60%,
      rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 60% 4% at 50% 100%,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0) 70%);
  mix-blend-mode: overlay;
  opacity: 0.85;
}

/* Strip sheen — a slow travelling highlight that rides down the
   revealed strip every 7s, reinforcing the "premium object" feel. */
.rollout__strip-sheen {
  position: absolute;
  left: -10%;
  right: -10%;
  height: 40%;
  top: -40%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,0.16) 50%,
    transparent 100%);
  mix-blend-mode: screen;
  animation: rolloutStripSheen 7s cubic-bezier(0.65,0,0.35,1) infinite;
  animation-delay: 1.6s;
}
@keyframes rolloutStripSheen {
  0%, 70%  { transform: translateY(-40%); opacity: 0; }
  80%      { opacity: 0.65; }
  100%     { transform: translateY(260%); opacity: 0; }
}

/* Tassel — rides the bottom edge of the unrolled strip */
.rollout--cs .rollout__tassel {
  position: absolute;
  left: 50%;
  /* `top` carries the unrolled-distance, expressed against the
     parent's height (--strip-max-h is a parent-relative calc).
     translate inside transform can't use parent-% so we keep top
     for positioning. On absolute elements `top` updates are paint-
     only — promoted to its own layer via will-change for cheap
     compositor updates. */
  top: calc(var(--strip-top) + var(--cs-p, 0) * var(--strip-max-h));
  transform: translate(-50%, 4px);
  margin-top: 0;
  width: 1px;
  height: 22px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.42) 0%,
    rgba(255,255,255,0) 100%);
  will-change: top;
}

/* Intro fade: opacity of strip + tassel ties to .is-in, height
   still reads from --cs-p regardless (so the unroll starts as
   soon as scroll progress begins, no wait for observer). */
.rollout--cs .rollout__strip,
.rollout--cs .rollout__tassel {
  opacity: 0;
  transition: opacity 650ms var(--ease-out) 120ms;
}
.rollout--cs.is-in .rollout__strip,
.rollout--cs.is-in .rollout__tassel {
  opacity: 1;
}

.rollout--echo {
  --rollout-w: clamp(82px, 7.2vw, 118px);
  /* Echoes are fixed at a specific top offset inside their host
     section — they don't follow scroll. The parent stays absolute
     so the right-edge anchor works, but height auto'd so it doesn't
     span the whole section. */
  top: clamp(60px, 8vh, 120px);
  bottom: auto;
  right: clamp(8px, 1.4vw, 28px);
}
.rollout--echo .rollout__track {
  position: relative;
  top: auto;
  padding: 26px clamp(6px, 1vw, 14px) 28px 0;
}
/* Per-instance offset refinements */
.rollout--echo-work    { top: clamp(80px, 10vh, 140px); }
.rollout--echo-contact { top: clamp(60px, 7vh, 100px); }
.rollout--echo .rollout__frame {
  box-shadow:
    0 22px 42px rgba(0,0,0,0.55),
    0 8px 18px rgba(0,0,0,0.38),
    0 0 0 1px rgba(255,255,255,0.18),
    inset 0 1px 0 rgba(255,255,255,0.32),
    inset 0 -1px 0 rgba(0,0,0,0.48);
}
.rollout--echo .rollout__rod-bar {
  height: 3px;
  top: -16px;
}
.rollout--echo .rollout__rod-cap {
  top: -20px;
  width: 8px;
  height: 11px;
}
.rollout--echo .rollout__rod-wire { top: -14px; height: 14px; }

/* ---------- Responsive gating ---------- */
/* Below this, the outer gutter does not have room for a banner
   without stepping on the content column. Hide entirely — the
   visual design already works without it at those widths. */
@media (min-width: 1100px) {
  .rollout--cs { display: block; }
}
@media (min-width: 1240px) {
  .rollout--echo { display: block; }
}
@media (min-width: 1400px) {
  .rollout__tag { display: inline-flex; }
}


/* ============================================================
   INTERIOR PAGES (about-us.html)
   ------------------------------------------------------------
   The home page has its own dramatic entry gate that owns the
   first paint. Interior pages (anything served standalone) skip
   that and need (a) breathing room under the fixed nav, and
   (b) their own page-hero treatment. The hero echoes the case-
   study language (kicker pill + display title + intro line)
   without competing with the home hero's scrub video.
   ============================================================ */
.page-interior {
  /* The fixed nav sits at top: 0; with padding 20px (or 12 when
     scrolled). Push initial content below it. */
  padding-top: clamp(80px, 9vh, 120px);
}

/* ----- About hero ----- */
.about-hero {
  position: relative;
  isolation: isolate;
  background: var(--bg-0);
  padding: clamp(80px, 12vh, 160px) 0 clamp(60px, 8vh, 100px);
  overflow: hidden;
}
.about-hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 220px;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0) 100%);
  z-index: 0;
}
.about-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}
.about-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-mid);
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  margin-bottom: clamp(22px, 3vh, 32px);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.about-hero__kicker-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 10px rgba(255,255,255,0.7);
  animation: csPulse 2.6s ease-in-out infinite;
}
.about-hero__kicker-slash { opacity: 0.4; }
.about-hero__title {
  font-family: 'Clash Display', 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: clamp(56px, 9vw, 132px);
  line-height: 0.96;
  letter-spacing: -0.045em;
  margin: 0 0 clamp(18px, 2.6vh, 30px);
  background: linear-gradient(180deg,
    #ffffff 0%,
    rgba(250,250,250,0.78) 55%,
    rgba(250,250,250,0.6) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.about-hero__lede {
  font-size: clamp(15px, 1.35vw, 19px);
  color: var(--text-mid);
  max-width: 60ch;
  margin: 0 auto;
  line-height: 1.62;
}
.about-hero__lede--bridge {
  margin-top: 14px;
  font-size: clamp(13px, 1.05vw, 15px);
  color: var(--text-low, rgba(255,255,255,0.55));
  letter-spacing: 0.01em;
}
.about-hero__lede--bridge strong { color: var(--text-hi); font-weight: 500; }
.about-hero__lede--bridge a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.18); }
.about-hero__lede--bridge a:hover { border-bottom-color: var(--accent); }
.about-hero__rule {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 240px;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.4) 50%,
    transparent 100%);
}

/* ----- About body · placeholder grid ----- */
.about-body {
  position: relative;
  background: var(--bg-0);
  padding: clamp(60px, 8vh, 120px) 0 clamp(120px, 16vh, 200px);
}
.about-body__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 36px);
}
.about-slot {
  position: relative;
  min-height: clamp(220px, 32vh, 320px);
  padding: clamp(24px, 3vw, 36px);
  border: 1px dashed var(--border-hi);
  border-radius: clamp(14px, 1.4vw, 22px);
  background: linear-gradient(180deg,
    rgba(255,255,255,0.02) 0%,
    rgba(255,255,255,0) 60%);
  display: flex;
  flex-direction: column;
  /* No justify-content: it conflicted with the margin-top:auto
     trick on .about-slot__label, sometimes letting the label
     drift away from the hint. Index sits at top, label is pushed
     to the bottom by margin-top:auto, hint follows label. */
  isolation: isolate;
  overflow: hidden;
}
.about-slot::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1.4px);
  background-size: 22px 22px;
  background-position: 11px 11px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%,
    black 0%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%,
    black 0%, black 30%, transparent 75%);
  opacity: 0.6;
  z-index: -1;
}
.about-slot__index {
  font-family: 'Clash Display', 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg,
    #ffffff 0%,
    rgba(250,250,250,0.42) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.about-slot__label {
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-hi);
  margin-top: auto;
}
.about-slot__hint {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-lo);
  margin-top: 8px;
}

@media (max-width: 900px) {
  .about-body__inner { grid-template-columns: 1fr; }
}

/* ============================================================
   CORNER LOGO · per-section particle VZ
   ------------------------------------------------------------
   Injected by JS into each major content section (except the
   hero and the big identity stage). Absolutely positioned at the
   host section's bottom-right — scrolls with its section, not
   pinned to the viewport. Each instance fades in once when its
   host enters the viewport. Uses the same particle engine as the
   big identity stage, just with tighter particle size, denser
   sampling, and a smaller repel radius.
   ============================================================ */
.corner-logo {
  position: absolute;
  right: clamp(14px, 2vw, 32px);
  bottom: clamp(14px, 2vw, 32px);
  width: clamp(72px, 8vw, 104px);
  height: clamp(72px, 8vw, 104px);
  z-index: 3;                       /* above section bg, below content flow */
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px) scale(0.92);
  transition:
    opacity 680ms var(--ease-out),
    transform 680ms var(--ease-spring);
  will-change: opacity, transform;
}
.corner-logo.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;             /* capture cursor once revealed */
}

.corner-logo__stage {
  position: relative;
  width: 100%;
  height: 100%;
}

.corner-logo__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 0 12px rgba(220, 235, 255, 0.3));
}

/* Soft halo behind the logo */
.corner-logo__halo {
  position: absolute;
  inset: -20%;
  background: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    rgba(220, 235, 255, 0.18) 0%,
    rgba(150, 180, 220, 0.05) 45%,
    rgba(255,255,255,0) 75%);
  filter: blur(10px);
  pointer-events: none;
  animation: cornerHaloBreath 4.6s ease-in-out infinite;
}
@keyframes cornerHaloBreath {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

/* Thin chrome ring around the logo — frames it as a brand mark */
.corner-logo__ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 0 14px rgba(255,255,255,0.08);
  pointer-events: none;
}
.corner-logo.is-in .corner-logo__ring {
  animation: cornerRingPulse 3.6s ease-in-out infinite;
}
@keyframes cornerRingPulse {
  0%, 100% { border-color: rgba(255,255,255,0.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 0 14px rgba(255,255,255,0.08); }
  50%      { border-color: rgba(255,255,255,0.30); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), 0 0 24px rgba(255,255,255,0.18); }
}

/* Four tiny corner brackets — miniature HUD */
.corner-logo__bracket {
  position: absolute;
  width: 8px;
  height: 8px;
  pointer-events: none;
}
.corner-logo__bracket--tl {
  top: -6px; left: -6px;
  border-top: 1px solid rgba(255,255,255,0.45);
  border-left: 1px solid rgba(255,255,255,0.45);
}
.corner-logo__bracket--tr {
  top: -6px; right: -6px;
  border-top: 1px solid rgba(255,255,255,0.45);
  border-right: 1px solid rgba(255,255,255,0.45);
}
.corner-logo__bracket--bl {
  bottom: -6px; left: -6px;
  border-bottom: 1px solid rgba(255,255,255,0.45);
  border-left: 1px solid rgba(255,255,255,0.45);
}
.corner-logo__bracket--br {
  bottom: -6px; right: -6px;
  border-bottom: 1px solid rgba(255,255,255,0.45);
  border-right: 1px solid rgba(255,255,255,0.45);
}

/* Hover — gentle scale nudge */
.corner-logo.is-in:hover {
  transform: translateY(-2px) scale(1.04);
}

/* Mobile: tuck further into the corner, slightly smaller */
@media (max-width: 640px) {
  .corner-logo {
    right: 10px;
    bottom: 10px;
    width: 58px;
    height: 58px;
  }
  .corner-logo__bracket { width: 6px; height: 6px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Entry shader + custom cursor intentionally NOT disabled under
     reduced-motion: they're part of the signature look, and the cursor
     is user-controlled (not ambient). The shader is GPU-light and
     doesn't cause reflow/repaint on page content. */
  [data-letter-split] .letter { opacity: 1; transform: none; }
  [data-elegant-split] .letter-e { opacity: 1; filter: none; transform: none; animation: none; }
  .footer__tag { animation: none; }
  [data-reveal] { opacity: 1; transform: none; }
  .paths { display: none; }
  /* Hero reduced-motion profile:
     - idle animations muted (letter-rise, metallic sheen, breath, hint-pulse)
     - scroll-scrub itself keeps working (user-initiated = not covered
       by reduced-motion) — so filter/transform respond to --scrub-p. */
  .hero__mark-word         { transform: none; opacity: 1; animation: none; }
  .hero__mark-word::before { animation: none; opacity: 0; }
  .hero__hint-line         { animation: none; }

  /* Case-study section: surface all transitions as instant, but
     keep the final state legible. Rail dot + fill stop following
     scroll (they are still useful as static indicators). */
  .cs__ch-num,
  .cs__ch-tick,
  .cs__ch-tag,
  .cs__stat-rule,
  .cs__rail-fill,
  .cs__rail-dot,
  .cs__ch + .cs__ch::before { transition: none; }
  .cs__ch-num { opacity: 1; transform: none; filter: none; }
  .cs__ch-tick { width: 72px; }
  .cs__ch-tag { opacity: 1; transform: none; }
  .cs__stat-rule { width: 100%; }
  .cs__kicker-dot { animation: none; }

  /* Corner logo — drop the breath + ring pulse, keep the logo
     static at its final state. */
  .corner-logo__halo,
  .corner-logo.is-in .corner-logo__ring { animation: none; }

  /* Rollout banner: resolve immediately, drop sheen + unroll. */
  .rollout, .rollout.is-in { opacity: 1; }
  .rollout.is-in .rollout__frame { animation: none; transform: none; }
  .rollout__sheen { animation: none; opacity: 0; }
  .rollout.is-in .rollout__tag { opacity: 1; transform: rotate(180deg); }
  .rollout.is-in .rollout__tassel { opacity: 1; }
}

/* ============================================================
   SKIP LINK · A11y — first focusable element. Off-screen by default,
   slides into view on keyboard focus. No layout shift; no impact on
   pointer users.
   ============================================================ */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10000;
  padding: 12px 18px;
  background: var(--text-hi);
  color: var(--bg-0);
  border-radius: var(--radius-pill);
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 220ms var(--ease-out);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--text-hi);
  outline-offset: 3px;
}

/* ============================================================
   FORM · invalid state for ARIA-driven validation feedback
   (fields gain aria-invalid="true" via JS; this surfaces it visually)
   ============================================================ */
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: rgba(255, 110, 110, 0.6);
  box-shadow: 0 0 0 3px rgba(255, 110, 110, 0.12);
}
.field__error:not(:empty) {
  display: block;
  margin-top: 6px;
  color: rgba(255, 160, 160, 0.92);
  font-size: 12px;
  letter-spacing: 0.01em;
}

/* ============================================================
   PERFORMANCE · content-visibility for off-screen heavy sections.
   Skips layout/paint work until they near the viewport. Each section
   gets a contain-intrinsic-size hint so CLS stays at zero before they
   are first rendered.
   ============================================================ */
@supports (content-visibility: auto) {
  /* Only sections that are NOT anchor targets (#work, #process, #contact, #top
     are excluded). Anchor-scrolled sections + content-visibility can cause
     scroll-jump glitches in some browsers. */
  .stats,
  .footer {
    content-visibility: auto;
    contain-intrinsic-size: 1px 700px;
  }
}

/* ============================================================
   ZPARALLAX · placeholder slots
   Empty drop-targets for images we'll add later. They keep the
   collage's geometric balance and are visually muted so they
   read as "reserved space", not as broken images.
   ============================================================ */
.zparallax__box--placeholder {
  /* Override the heavy glass-pillow shadow of the regular box. The dashed
     outline border is drawn directly on this element instead of via a
     pseudo-element — that avoids the cascade-conflict of inheriting from
     .zparallax__box's ::before / ::after rules. */
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.16),
    0 8px 24px rgba(0, 0, 0, 0.35) !important;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 8px, transparent 8px 18px),
    rgba(255, 255, 255, 0.018);
  display: grid;
  place-items: center;
  cursor: default;
  outline: 1.5px dashed rgba(255, 255, 255, 0.22);
  outline-offset: -8px;
}
/* Suppress the inherited heavy ::before / ::after rules of .zparallax__box
   on placeholders. content:none drops the pseudo-element entirely, which
   is cleaner than display:none + override gymnastics. */
.zparallax__box--placeholder::before,
.zparallax__box--placeholder::after {
  content: none !important;
}
.zparallax__box--placeholder:hover { --hv: 1.04; }
.zparallax__placeholder-glyph {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 200;
  color: rgba(255,255,255,0.4);
  line-height: 1;
  margin-bottom: 8px;
  z-index: 2;
  position: relative;
}
.zparallax__placeholder-label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  z-index: 2;
  position: relative;
}

/* ============================================================
   LIGHTBOX MODAL — opens when clicking Inspect on any reference frame
   ------------------------------------------------------------
   Closed by default via aria-hidden="true" → opacity 0 + pointer-events
   none. Toggled via JS. Click anywhere outside the figure or hit ESC
   to close. A backdrop-blur layer dims the page behind. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  background: rgba(6, 6, 6, 0.85);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
          backdrop-filter: blur(20px) saturate(120%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms var(--ease-out), visibility 320ms;
  padding: clamp(24px, 4vw, 48px);
}
.lightbox[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}
.lightbox::before {
  /* radial spotlight focusing the eye on the centered image */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, transparent 30%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
}
.lightbox__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.05);
  color: var(--text-hi);
  cursor: pointer;
  z-index: 5;
  transition: background 220ms, border-color 220ms, transform 220ms var(--ease-out);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.lightbox__close svg { width: 22px; height: 22px; }
.lightbox__close:hover {
  background: var(--text-hi);
  color: var(--bg-0);
  border-color: var(--text-hi);
  transform: rotate(90deg);
}
.lightbox__close:focus-visible {
  outline: 2px solid var(--text-hi);
  outline-offset: 4px;
}
.lightbox__bracket {
  position: absolute;
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.22);
  z-index: 2;
  pointer-events: none;
  transform: scale(0.8);
  opacity: 0;
  transition: opacity 480ms var(--ease-out) 200ms, transform 600ms var(--ease-out) 200ms;
}
.lightbox[aria-hidden="false"] .lightbox__bracket { opacity: 1; transform: scale(1); }
.lightbox__bracket--tl { top: 22px; left: 22px; border-right: 0; border-bottom: 0; }
.lightbox__bracket--tr { top: 22px; right: 22px; border-left: 0; border-bottom: 0; }
.lightbox__bracket--bl { bottom: 22px; left: 22px; border-right: 0; border-top: 0; }
.lightbox__bracket--br { bottom: 22px; right: 22px; border-left: 0; border-top: 0; }
.lightbox__figure {
  position: relative;
  z-index: 3;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  max-width: min(92vw, 1400px);
  max-height: 100%;
  transform: scale(0.94);
  opacity: 0;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1) 80ms,
              opacity 320ms var(--ease-out) 80ms;
}
.lightbox[aria-hidden="false"] .lightbox__figure { transform: scale(1); opacity: 1; }
.lightbox__img-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255,255,255,0.10);
  max-height: min(80vh, 900px);
}
.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: min(80vh, 900px);
  width: auto;
  height: auto;
  object-fit: contain;
  background: #050505;
}
.lightbox__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  font-family: 'Inter Tight', sans-serif;
}
.lightbox__caption-idx {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-lo);
}
.lightbox__caption-title {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--text-hi);
}
.lightbox__caption-tag {
  font-size: 11.5px;
  color: var(--text-mid);
  letter-spacing: 0.04em;
}

/* Body lock when lightbox is open — applied via JS */
body.lb-open { overflow: hidden; }

@media (max-width: 600px) {
  .lightbox { padding: 16px; }
  .lightbox__close { top: 14px; right: 14px; width: 44px; height: 44px; }
  .lightbox__bracket { width: 22px; height: 22px; }
  .lightbox__caption-title { font-size: 16px; }
}

/* ============================================================
   STUDIO REFERENCES · v2 · sci-fi reference wall
   ------------------------------------------------------------
   Enhances .zparallax with: section readout strip, corner brackets
   on each frame, hover-pill, slide-in caption, cursor-tracked
   shine, and an ambient drift on idle. The original zoom-on-hover
   stays untouched (existing JS).
   ============================================================ */
.zparallax__readout {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 22px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-family: 'Inter Tight', system-ui, sans-serif;
}
.zparallax__readout-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-size: 11.5px;
}
.zparallax__readout-key {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-lo);
}
.zparallax__readout-val {
  color: var(--text-hi);
  font-weight: 500;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 240ms;
}
.zparallax__readout-pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #5fde9b;
  box-shadow: 0 0 0 0 rgba(95, 222, 155, 0.5);
  animation: workPillPulse 2400ms ease-out infinite;
}

/* Sci-fi corner brackets per frame — appear on hover */
.zparallax__frame {
  position: absolute;
  z-index: 5;
  width: 28px; height: 28px;
  border: 1px solid rgba(255,255,255,0.55);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 320ms var(--ease-out), transform 380ms var(--ease-out);
}
.zparallax__frame--tl { top: 16px; left: 16px; border-right: 0; border-bottom: 0; }
.zparallax__frame--tr { top: 16px; right: 16px; border-left: 0; border-bottom: 0; }
.zparallax__frame--bl { bottom: 16px; left: 16px; border-right: 0; border-top: 0; }
.zparallax__frame--br { bottom: 16px; right: 16px; border-left: 0; border-top: 0; }
.zparallax__item:hover .zparallax__frame { opacity: 1; transform: scale(1); }

/* "Inspect" pill — top-right quick affordance */
.zparallax__pill {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 6;
  padding: 7px 13px;
  background: rgba(10,10,10,0.7);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-hi);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 280ms var(--ease-out), transform 320ms var(--ease-out);
  pointer-events: none;
}
.zparallax__item:hover .zparallax__pill { opacity: 1; transform: translateY(0); transition-delay: 80ms; }

/* Bottom caption strip — slides up from below on hover */
.zparallax__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  padding: 18px 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
  opacity: 0;
  transform: translateY(20%);
  transition: opacity 380ms var(--ease-out), transform 480ms var(--ease-out);
}
.zparallax__item:hover .zparallax__caption { opacity: 1; transform: translateY(0); }
.zparallax__caption-idx {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.zparallax__caption-title {
  font-family: 'Clash Display', sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--text-hi);
}
.zparallax__caption-tag {
  font-size: 11.5px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.04em;
}

/* ============================================================
   TICKER · v2 · dual-row counter-rotating with glow on hover
   ============================================================ */
.ticker--v2 { padding: clamp(50px, 7vw, 90px) 0; gap: 4px; display: flex; flex-direction: column; position: relative; }
.ticker--v2 .ticker__track { animation-duration: 38s; }
.ticker--v2 .ticker__row--bot .ticker__track { animation-duration: 46s; }
.ticker__word {
  font-family: 'Clash Display', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 56px);
  letter-spacing: -0.025em;
  color: var(--text-hi);
  padding: 0 24px;
  transition: color 280ms, text-shadow 280ms, transform 320ms var(--ease-out);
  cursor: default;
  display: inline-block;
}
.ticker__word--ghost {
  color: rgba(255,255,255,0.18);
  font-weight: 500;
  font-style: italic;
  font-family: 'Instrument Serif', 'Clash Display', serif;
  font-size: clamp(22px, 3.2vw, 44px);
  letter-spacing: -0.015em;
}
.ticker__word:hover {
  color: var(--text-hi);
  text-shadow: 0 0 28px rgba(255,255,255,0.45), 0 0 60px rgba(255,255,255,0.18);
  transform: scale(1.04);
}
.ticker__sep {
  display: inline-block;
  margin: 0 4px;
  color: rgba(255,255,255,0.22);
  font-size: 0.7em;
  vertical-align: middle;
}
.ticker__edge {
  position: absolute;
  top: 0; bottom: 0;
  width: 18%;
  z-index: 5;
  pointer-events: none;
}
.ticker__edge--l { left: 0;  background: linear-gradient(90deg, var(--bg-0), transparent); }
.ticker__edge--r { right: 0; background: linear-gradient(270deg, var(--bg-0), transparent); }

/* ============================================================
   STATS · v2 · slot-machine count-up + sparkline backdrop
   ------------------------------------------------------------
   The existing count-up handler in main.js still drives the
   numbers. We layer a subtle SVG-line-art sparkline behind each
   stat and a chrome under-rule that draws on reveal.
   ============================================================ */
.stat {
  /* Border + radius added on top of existing .stat (glow-class background
     stays intact — we only enhance frame + transitions). */
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  transition: transform 320ms var(--ease-out), border-color 320ms, box-shadow 320ms;
}
.stat::before {
  /* sparkline backdrop — abstract chart silhouette as decoration */
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  z-index: 0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(95,222,155,0.04) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='none'><polyline points='0,170 30,150 60,160 90,120 120,140 150,90 180,110 210,70 240,90 270,50 300,70 330,40 360,70 400,30' fill='none' stroke='rgba(255,255,255,0.10)' stroke-width='1.5' stroke-linejoin='round'/></svg>");
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.55;
  transition: opacity 360ms;
}
.stat::after {
  /* chrome under-rule that animates from 0 → full width on reveal */
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.55), rgba(95,222,155,0.4));
  transition: width 1100ms cubic-bezier(0.22, 1, 0.36, 1) 220ms;
}
.stat.is-in::after { width: 100%; }
.stat:hover { border-color: var(--border-hi); transform: translateY(-2px); box-shadow: 0 22px 44px -16px rgba(0,0,0,0.5); }
.stat:hover::before { opacity: 0.85; }
.stat__num {
  /* slot-machine roll prep — handled by main.js count-up which already updates
     textContent. We add a subtle vertical text-blur on the in-progress state. */
  display: inline-block;
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 2;
}
.stat p {
  position: relative;
  z-index: 2;
}

/* ============================================================
   SERVICES · v2 · hover-flip with backside details
   ------------------------------------------------------------
   The card flips 3D on hover, revealing a curated detail-list on
   the back side. Falls back to no-flip on touch (where 3D-flip
   is not a discoverable interaction).
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  .services__grid .card {
    transform-style: preserve-3d;
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
    perspective: 1400px;
  }
  /* Inject a back-face via ::after with editorial detail strip.
     We use existing card content for front, and synthesize a back
     based on the card data via CSS variables — but for simplicity
     we paint a "Selected outputs" panel that's the same on every
     card with subtle differences via nth-child. */
  .services__grid .card::after {
    content: 'Selected outputs · Strategy briefs · Format calendars · Character guidelines · Voice & lore deck · Rollout plan';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, #131313 0%, #0a0a0a 100%);
    border: 1px solid var(--border);
    color: var(--text-mid);
    padding: clamp(28px, 3vw, 38px);
    font-family: 'Inter Tight', sans-serif;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: -0.005em;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: rotateY(180deg);
    z-index: 4;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  }
  .services__grid .card:nth-child(2)::after {
    content: 'Selected outputs · Live action film · 2D / 3D animation · Motion design · Score & sound · Ready-to-publish edits';
  }
  .services__grid .card:nth-child(3)::after {
    content: 'Selected outputs · Paid social · Creator seeding · Brand-lift study · Community management · Performance refinement';
  }
  .services__grid .card > * { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
  .services__grid .card:hover { transform: rotateY(180deg); transition-duration: 800ms; box-shadow: 0 30px 60px -16px rgba(0,0,0,0.55); }
}

/* ============================================================
   CAPABILITIES · v2 · subtle icon idle-pulse + reveal-grow
   ------------------------------------------------------------
   The existing capability block already has a powerful hover-
   spotlight + scale, plus its own ::before/::after. We don't
   touch those — instead we add an idle micro-animation to the
   icon glyph, so the section reads as alive even before hover.
   ============================================================ */
.cap__block .cap__icon svg {
  animation: capIconIdle 6800ms ease-in-out infinite;
  transform-origin: center;
}
.cap__block:nth-child(2) .cap__icon svg { animation-delay: -2200ms; }
.cap__block:nth-child(3) .cap__icon svg { animation-delay: -4400ms; }
@keyframes capIconIdle {
  0%, 100% { transform: scale(1) rotate(0); opacity: 1; }
  50%      { transform: scale(1.04) rotate(2deg); opacity: 0.92; }
}
/* Section-level reveal: when the cap section is in viewport, fade in a
   1px chrome rule under the heading so the section feels "armed". */
.cap.is-in .cap__head::after,
.cap__head[data-cap-armed]::after {
  content: '';
  display: block;
  height: 1px;
  width: 100%;
  margin-top: 24px;
  background: linear-gradient(90deg, transparent, var(--border-hi), transparent);
}

/* ============================================================
   CURSOR AURORA · index.html (subtler than about-us)
   ============================================================ */
body:not(.page-interior) .aurora {
  /* on the homepage we keep the aurora more restrained because the
     site already has the entry-gate shader, the hero video, the
     particle origin canvas — adding a strong aurora would be noisy. */
  background: radial-gradient(
    560px circle at var(--aurora-x) var(--aurora-y),
    rgba(255,255,255,0.03) 0%,
    rgba(255,255,255,0.012) 30%,
    transparent 65%
  );
}

/* ============================================================
   PRINT — minimal, prevents broken default print rendering for the
   rare share-print case.
   ============================================================ */
@media print {
  .cursor-ring, .cursor-dot, .ee-layer, .toast,
  .entry, .skip-link, .nav__toggle { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
}

/* ============================================================
   ABOUT-US PAGE · Premium animation system
   ------------------------------------------------------------
   Contains:
     · .about-hero--v2          magnetic lattice canvas backdrop
     · .about-meta              sci-fi readout strip (HQ / Scale / …)
     · .about-body--v2          v2 slot grid (story / people / where)
     · .about-slot--story       spotlight torch reveal
     · .founder-card            magnetic 3D-tilt card + ambient ring
     · .about-map               canvas grid + pulsing Leipzig pin
     · .prog-rail               vertical scroll-progress rail
   All effects respect prefers-reduced-motion via the global block
   later in this file (we extend that block at the very bottom).
   ============================================================ */

/* ---------- Hero v2 ---------- */
.about-hero--v2 {
  position: relative;
  min-height: 86vh;
  padding: clamp(140px, 18vh, 220px) 0 clamp(80px, 12vh, 140px);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.03), transparent 60%),
    linear-gradient(180deg, var(--bg-0) 0%, #0c0c0c 100%);
}
.about-hero__lattice {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
}
.about-hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(10,10,10,0.55) 75%, var(--bg-0) 100%);
}
.about-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 36px);
}
.about-hero__title {
  font-size: clamp(68px, 12vw, 180px);
  letter-spacing: -0.045em;
  line-height: 0.96;
  text-transform: uppercase;
  /* CSS-only entry animation — runs on page load, no JS / IO dependency.
     Keeps the title guaranteed-visible even if any script fails. */
  animation: aboutTitleIn 1100ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
  background: linear-gradient(180deg, var(--text-hi) 0%, rgba(250,250,250,0.78) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes aboutTitleIn {
  0%   { opacity: 0; transform: translateY(28px); filter: blur(8px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .about-hero__title { animation: none; }
}
.about-hero__lede {
  max-width: 720px;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--text-mid);
}
.about-hero__rule {
  position: absolute;
  bottom: 0; left: var(--gutter); right: var(--gutter);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-hi) 30%, var(--border-hi) 70%, transparent);
  opacity: 0.6;
  z-index: 2;
}
.about-hero__hint {
  position: absolute;
  bottom: 18px;
  right: var(--gutter);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-lo);
}
.about-hero__hint-arrow {
  display: inline-flex;
  width: 22px; height: 22px;
  align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 11px;
  animation: aboutHintBob 2400ms var(--ease-out) infinite;
}
@keyframes aboutHintBob {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  50%      { transform: translateY(4px); opacity: 0.45; }
}

/* ---------- Sci-fi metric strip ---------- */
.about-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 36px;
  margin-top: clamp(20px, 3vw, 40px);
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-family: 'Inter Tight', system-ui, sans-serif;
}
.about-meta__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.about-meta__key {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-lo);
}
.about-meta__val {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-hi);
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.about-meta__pulse {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #5fde9b;
  box-shadow: 0 0 0 0 rgba(95, 222, 155, 0.5);
  animation: workPillPulse 2400ms ease-out infinite;
}

/* ---------- Body grid v2 ---------- */
.about-body--v2 {
  position: relative;
  padding: clamp(80px, 12vw, 160px) 0;
  background: var(--bg-0);
}
.about-body--v2 .about-slot {
  max-width: var(--container);
  margin: 0 auto clamp(80px, 10vw, 140px);
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.about-body--v2 .about-slot:last-child { margin-bottom: 0; }
.about-slot__head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.about-slot__index {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 700;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, var(--text-hi), rgba(250,250,250,0.32));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 0.9;
}
.about-slot__label {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-mid);
  font-weight: 500;
}

/* ---------- SLOT 01 · Spotlight torch ---------- */
.about-slot__torchwrap {
  position: relative;
  --torch-x: 50%;
  --torch-y: 50%;
  --torch-size: 360px;
  /* The mask uses the same coords as the torch element so mask + visual
     stay in sync. Outside the radius, copy is dimmed (opacity drops via
     the second mask layer that gets dim copy below). */
}
.about-slot__torch {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  width: var(--torch-size);
  height: var(--torch-size);
  margin-left: calc(-1 * var(--torch-size) / 2);
  margin-top: calc(-1 * var(--torch-size) / 2);
  border-radius: 50%;
  transform: translate(var(--torch-x), var(--torch-y));
  background:
    radial-gradient(circle, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.05) 28%, transparent 60%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 220ms var(--ease-out);
  z-index: 2;
  filter: blur(6px);
}
.about-slot__torchwrap.is-hover .about-slot__torch { opacity: 1; }
.about-slot__story {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: clamp(28px, 4vw, 48px) 0;
  max-width: 900px;
  z-index: 1;
  /* Default body text is dimmed; hovering lights the area within the
     torch via a CSS gradient mask combined with opacity. */
  color: var(--text-hi);
  transition: filter 220ms var(--ease-out);
}
.about-slot__story p {
  font-family: 'Instrument Serif', 'Clash Display', serif;
  font-size: clamp(22px, 2.6vw, 38px);
  line-height: 1.32;
  letter-spacing: -0.012em;
  font-weight: 400;
  color: rgba(250, 250, 250, 0.55);
  transition: color 220ms var(--ease-out);
}
.about-slot__story em {
  font-style: italic;
  color: var(--text-hi);
  background: linear-gradient(180deg, var(--text-hi), rgba(250,250,250,0.7));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.about-slot__story-mark {
  font-family: 'Clash Display', sans-serif !important;
  font-size: clamp(32px, 3.6vw, 56px) !important;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-hi) !important;
  margin-top: 18px;
  line-height: 1.05;
}
/* When torch is hovering, copy goes from dim to full white */
.about-slot__torchwrap.is-hover .about-slot__story p { color: rgba(250, 250, 250, 0.92); }

/* ---------- SLOT 02 · Founder cards ---------- */
.about-people {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 32px);
  perspective: 1200px;
}
.founder-card {
  position: relative;
  padding: 1px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04) 50%, rgba(0,0,0,0.2));
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 380ms var(--ease-out), box-shadow 380ms;
  isolation: isolate;
  cursor: pointer;
  will-change: transform;
}
.founder-card::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, #131313 0%, #0a0a0a 100%);
  z-index: 1;
}
.founder-card:hover {
  box-shadow: 0 28px 60px -12px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
}
.founder-card__corner {
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid var(--border-hi);
  z-index: 4;
  pointer-events: none;
  opacity: 0.55;
  transition: opacity 360ms var(--ease-out), border-color 360ms;
}
.founder-card__corner--tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.founder-card__corner--tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.founder-card__corner--bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.founder-card__corner--br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
.founder-card:hover .founder-card__corner { opacity: 1; border-color: rgba(255,255,255,0.45); }

.founder-card__avatar {
  position: relative;
  z-index: 2;
  margin: clamp(40px, 6vw, 64px) auto 0;
  width: clamp(140px, 18vw, 200px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: visible;
  transform: translateZ(40px);
}
.founder-card__aura {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.10), transparent 55%);
  filter: blur(20px);
  opacity: 0.7;
  z-index: 0;
  animation: founderAuraPulse 5400ms ease-in-out infinite;
}
@keyframes founderAuraPulse {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50%      { transform: scale(1.08); opacity: 0.9; }
}
.founder-card__ring {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.14);
  animation: founderRingSpin 22s linear infinite;
  z-index: 1;
}
@keyframes founderRingSpin {
  to { transform: rotate(360deg); }
}
.founder-card__glyph {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 14px 30px rgba(0,0,0,0.45);
  transition: transform 420ms var(--ease-out);
}
.founder-card:hover .founder-card__glyph { transform: scale(1.04); }

/* Photo variant — actual portraits replace the SS/AW monogram SVGs.
   Cover-fit so the head stays centered, slight desaturation at rest
   and a yellow ring on hover so the brand accent ties the cards into
   the rest of the site. */
.founder-card__photo {
  object-fit: cover;
  object-position: center top;
  background: #0e0e0e;
  filter: saturate(0.92) contrast(1.04);
  transition:
    transform 420ms var(--ease-out),
    filter 420ms var(--ease-out),
    box-shadow 420ms var(--ease-out);
}
.founder-card:hover .founder-card__photo {
  filter: saturate(1.05) contrast(1.06);
  box-shadow:
    inset 0 0 0 1px var(--border-accent),
    0 0 0 3px rgba(229, 255, 0, 0.18),
    0 18px 40px rgba(0,0,0,0.55),
    0 0 32px rgba(229, 255, 0, 0.22);
}

.founder-card__meta {
  position: relative;
  z-index: 2;
  padding: clamp(22px, 3vw, 32px) clamp(28px, 4vw, 40px) clamp(28px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
  transform: translateZ(20px);
}
.founder-card__role {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-mid);
}
.founder-card__name {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-hi);
}
.founder-card__bio {
  font-size: 14.5px;
  color: var(--text-mid);
  line-height: 1.55;
  max-width: 340px;
  margin: 0;
}
/* LinkedIn / social pill — sits below the bio, matches the card's
   dark-glass language; lifts to accent-yellow on hover. */
.founder-card__social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mid);
  background: rgba(255,255,255,0.02);
  transition:
    color 220ms var(--ease-out),
    border-color 220ms var(--ease-out),
    background 220ms var(--ease-out),
    transform 240ms var(--ease-out),
    box-shadow 240ms var(--ease-out);
  text-decoration: none;
}
.founder-card__social svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
  transition: transform 240ms var(--ease-out);
}
.founder-card__social:hover,
.founder-card__social:focus-visible {
  color: var(--accent);
  border-color: rgba(229, 255, 0, 0.55);
  background: rgba(229, 255, 0, 0.06);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -8px rgba(229, 255, 0, 0.45);
  outline: none;
}
.founder-card__social:hover svg,
.founder-card__social:focus-visible svg {
  transform: scale(1.08);
}
.founder-card__social-label {
  display: inline-block;
  line-height: 1;
}
.founder-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  justify-content: center;
}
.founder-card__tags li {
  font-size: 11px;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-mid);
  letter-spacing: 0.05em;
  transition: border-color 240ms, color 240ms, background 240ms;
}
.founder-card:hover .founder-card__tags li {
  border-color: var(--border-hi);
  color: var(--text-hi);
  background: rgba(255,255,255,0.03);
}
.founder-card__shine {
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.08), transparent 45%);
  opacity: 0;
  transition: opacity 300ms;
}
.founder-card:hover .founder-card__shine { opacity: 1; }

/* ---------- SLOT 03 · Coordinate map ---------- */
.about-map {
  position: relative;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.04), transparent 65%), #0c0c0c;
  aspect-ratio: 21/10;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 24px 60px -28px rgba(0,0,0,0.6);
}
.about-map__grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.7;
}
.about-map__crosshair {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
  z-index: 2;
  pointer-events: none;
}
.about-map__crosshair--h { left: 0; right: 0; top: 50%; height: 1px; }
.about-map__crosshair--v {
  top: 0; bottom: 0; left: 50%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.16), transparent);
}
.about-map__bracket {
  position: absolute;
  width: 22px; height: 22px;
  border: 1px solid rgba(255,255,255,0.28);
  z-index: 3;
}
.about-map__bracket--tl { top: 18px; left: 18px; border-right: 0; border-bottom: 0; }
.about-map__bracket--tr { top: 18px; right: 18px; border-left: 0; border-bottom: 0; }
.about-map__bracket--bl { bottom: 18px; left: 18px; border-right: 0; border-top: 0; }
.about-map__bracket--br { bottom: 18px; right: 18px; border-left: 0; border-top: 0; }
.about-map__pin {
  position: absolute;
  /* Leipzig's relative position on a centered 21/10 map (left: 50% lon-shift,
     top: 50% lat-shift). Tuned so the pin sits clearly above the readout. */
  top: 38%;
  left: 56%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: grid;
  place-items: center;
  width: 12px;
  height: 12px;
}
.about-map__pin-pulse {
  position: absolute;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: rgba(95, 222, 155, 0.4);
  animation: mapPinPulse 2200ms ease-out infinite;
}
.about-map__pin-pulse--2 { animation-delay: 1100ms; }
@keyframes mapPinPulse {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(7); opacity: 0; }
}
.about-map__pin-dot {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #5fde9b;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.5), 0 0 14px rgba(95, 222, 155, 0.5);
}
.about-map__pin-label {
  position: absolute;
  left: 18px;
  top: -4px;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  font-family: 'Inter Tight', system-ui, sans-serif;
}
.about-map__pin-label-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-hi);
  letter-spacing: -0.005em;
}
.about-map__pin-label-coord {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mid);
  margin-top: 2px;
}
.about-map__readout {
  position: absolute;
  left: 28px;
  bottom: 26px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 12.5px;
  background: rgba(10,10,10,0.5);
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.about-map__readout-row {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
}
.about-map__readout-key {
  width: 46px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mid);
}
.about-map__readout-val {
  color: var(--text-hi);
  font-weight: 500;
}
.about-map__readout-val a {
  color: var(--text-hi);
  border-bottom: 1px solid var(--border-hi);
  transition: border-color 200ms;
}
.about-map__readout-val a:hover { border-color: var(--text-hi); }

/* ---------- Vertical scroll-progress rail (right edge, premium) ---------- */
.prog-rail {
  position: fixed;
  top: 50%;
  right: 26px;
  transform: translateY(-50%);
  height: 50vh;
  width: 24px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  font-family: 'Inter Tight', system-ui, sans-serif;
}
.prog-rail__cap {
  width: 8px;
  height: 1px;
  background: var(--border-hi);
}
.prog-rail__line {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 50%;
  width: 1px;
  background: rgba(255,255,255,0.06);
  transform: translateX(-50%);
}
.prog-rail__fill {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 1px;
  height: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(95,222,155,0.55));
  transform: translateX(-50%);
  transition: height 80ms linear;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.18));
}
.prog-rail__dot {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-hi);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px rgba(255,255,255,0.4);
  transition: top 80ms linear;
}
.prog-rail__readout {
  position: absolute;
  top: calc(50% + 14px);
  left: 26px;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-mid);
  white-space: nowrap;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .about-people { grid-template-columns: 1fr; }
  .about-meta { gap: 18px 28px; }
  .prog-rail { display: none; }
  .about-map { aspect-ratio: 4/5; }
  .about-map__readout { left: 18px; right: 18px; bottom: 18px; }
  .about-map__pin { top: 32%; left: 60%; }
  .about-map__pin-label { left: 16px; }
}

@media (max-width: 480px) {
  .about-hero--v2 { min-height: 78vh; }
  .about-hero__hint { display: none; }
  .about-meta { flex-direction: column; gap: 14px; }
  .founder-card__avatar { margin-top: 36px; }
  .about-slot__story p { font-size: 20px; }
  .about-slot__story-mark { font-size: 28px !important; }
}

/* ============================================================
   MANIFESTO · 6-card principle grid
   ------------------------------------------------------------
   Each card has:
     · a giant ghosted index numeral
     · a small rune glyph (decorative)
     · the principle title (display font)
     · the body (sans, dimmed until hover)
     · a sweeping highlight that runs across the card on hover
   The cards inherit the global [data-tilt] handler from main.js,
   so they get a 3D tilt that reads as glass tilting toward the
   cursor.
   ============================================================ */
.manifesto {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}
.manifesto__lede {
  font-family: 'Instrument Serif', 'Clash Display', serif;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--text-mid);
  max-width: 720px;
}
.manifesto__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
  perspective: 1200px;
}
.manifesto-card {
  position: relative;
  isolation: isolate;
  padding: clamp(28px, 3vw, 36px) clamp(28px, 3vw, 36px) clamp(32px, 3.5vw, 40px);
  border-radius: 22px;
  border: 1px solid var(--border);
  background:
    linear-gradient(155deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(180deg, #131313 0%, #0c0c0c 100%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 280px;
  transform-style: preserve-3d;
  transition: transform 380ms var(--ease-out), border-color 380ms, box-shadow 380ms;
  overflow: hidden;
  cursor: default;
  will-change: transform;
}
.manifesto-card:hover {
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 28px 60px -24px rgba(0,0,0,0.7);
}
.manifesto-card__num {
  position: absolute;
  top: -18px;
  right: -8px;
  font-family: 'Clash Display', sans-serif;
  font-weight: 700;
  font-size: clamp(96px, 11vw, 160px);
  line-height: 1;
  letter-spacing: -0.06em;
  color: rgba(255,255,255,0.022);
  z-index: 0;
  pointer-events: none;
  transition: color 360ms var(--ease-out);
}
.manifesto-card:hover .manifesto-card__num { color: rgba(255,255,255,0.05); }
.manifesto-card__rune {
  position: relative;
  z-index: 2;
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 18px;
  color: var(--text-hi);
  letter-spacing: 0.1em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0.7;
  transition: opacity 360ms;
}
.manifesto-card__rune::after {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--border-hi);
  transition: width 380ms var(--ease-out), background 380ms;
}
.manifesto-card:hover .manifesto-card__rune { opacity: 1; }
.manifesto-card:hover .manifesto-card__rune::after { width: 56px; background: var(--text-hi); }
.manifesto-card__title {
  position: relative;
  z-index: 2;
  font-family: 'Clash Display', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 1.9vw, 27px);
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: var(--text-hi);
  transform: translateZ(20px);
}
.manifesto-card__body {
  position: relative;
  z-index: 2;
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0;
  transition: color 360ms;
  transform: translateZ(10px);
}
.manifesto-card:hover .manifesto-card__body { color: var(--text-hi); }
.manifesto-card__sweep {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.06) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 1100ms var(--ease-out);
}
.manifesto-card:hover .manifesto-card__sweep { transform: translateX(130%); }

/* Manifesto responsive */
@media (max-width: 900px) {
  .manifesto__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .manifesto__grid { grid-template-columns: 1fr; }
  .manifesto-card { min-height: 220px; }
  .manifesto-card__num { font-size: 96px; top: -12px; }
}

/* ============================================================
   CURSOR AURORA · global, gentle radial tint that follows the
   pointer across the about page only. Sits below content via
   z-index but above background. Disabled on touch + reduced.
   ============================================================ */
.aurora {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  --aurora-x: 50%;
  --aurora-y: 30%;
  background: radial-gradient(
    480px circle at var(--aurora-x) var(--aurora-y),
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.02) 28%,
    transparent 60%
  );
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
}
.aurora.is-on { opacity: 1; }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .aurora { display: none !important; }
}

/* ---------- Reduced-motion overrides ---------- */
@media (prefers-reduced-motion: reduce) {
  .about-hero__hint-arrow,
  .about-meta__pulse,
  .founder-card__aura,
  .founder-card__ring,
  .about-map__pin-pulse,
  .manifesto-card__sweep { animation: none !important; }
  .manifesto-card__sweep { display: none; }
  .about-slot__torch { display: none; }
  .about-slot__story p { color: rgba(250, 250, 250, 0.85); }
  .prog-rail { display: none; }
}

/* ============================================================
   FINAL CLEAN PASS · April-30 design ref alignment
   ------------------------------------------------------------
   All silver / chrome / platinum / metallic / white-fade clip-text
   treatments are nuked here. Headings render as solid white;
   the only accent on the entire site is the yellow var(--accent),
   applied via <em> or .accent on the inline span.
   This block lives at the very end so it wins every cascade fight
   without us having to chase every legacy declaration above.
   ============================================================ */
.section-head__title,
.zparallax__title,
.zparallax__sub,
.hww__title,
.cs__title,
.cs__lede,
.cs__cta-title,
.about-hero__title,
.about-hero__lede,
.about-slot__title,
.about-slot__label,
.contact__title,
.contact__lede,
.cap__title,
.cs__ch-title {
  background-image: none !important;
  background: none !important;
  -webkit-text-fill-color: var(--text-hi) !important;
  color: var(--text-hi) !important;
}

/* ============================================================
   FINAL · WEIGHTS + WRAP behaviour
   ------------------------------------------------------------
   Force every display heading down to a refined 400/500 weight
   and apply text-wrap:pretty universally so single-character
   orphans never appear at the end of a heading.
   ============================================================ */
.hero-v4__lede,
.hero-v4__sub,
.hero-v4__kicker,
.cap__title,
.cap__sub,
.cap__tagline,
.zparallax__title,
.zparallax__sub,
.hww__title,
.hww__sub,
.hww__closing,
.cs__title,
.cs__lede,
.cs__cta-title,
.cs__cta-copy,
.cs__ch-title,
.cs__ch-copy,
.contact__title,
.contact__lede,
.about-hero__title,
.about-hero__lede,
.about-slot__title,
.section-head__title,
.section-head__sub,
.footer__tag,
h1, h2, h3, p {
  text-wrap: pretty;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* Display headings — refined 400 weight (was 700/600 in legacy CSS).
   400 matches the April-30 reference image's elegant, lighter feel. */
h1, h2, h3,
.hero-v4__lede,
.cap__title,
.zparallax__title,
.hww__title,
.cs__title,
.cs__cta-title,
.cs__ch-title,
.contact__title,
.about-hero__title,
.about-slot__title,
.section-head__title,
.hww__closing,
.cs__lede,
.cs__chap-title,
.about-hero__lede,
.contact__lede,
.zparallax__sub {
  font-weight: 400 !important;
  letter-spacing: -0.025em;
}

/* h1 stays a hair heavier (500) so the page-anchor feels grounded,
   but never bold. */
h1 { font-weight: 500 !important; letter-spacing: -0.03em; }

/* Eyebrows / kickers / labels — Inter Tight 400, low weight, wide
   letterspacing. No bolds anywhere. */
.cap__eyebrow,
.hww__kicker,
.section-head__kicker,
.cs__chap-num,
.about-slot__label,
h4 {
  font-weight: 400 !important;
  letter-spacing: 0.22em;
}

/* Numerals stay HEAVY (700) for editorial impact — they're the big
   "01 / 02 / 03" markers and need to read as definite anchors. The
   rest of the type stays light to keep the contrast clean. */
.cap__block-num,
.hww__stage-num-txt,
.cs__stat-num,
.cs__ch-num,
.cs__chap-num,
.zparallax__readout-val {
  font-weight: 700 !important;
  letter-spacing: -0.04em;
}

/* Nav wordmark refined — was 700 (heavy), drop to 500 for parity
   with the rest. */
.nav__brand,
.nav__wordmark,
.nav__wordmark::after,
.footer__logo-wrap::before,
.footer__logo-wrap::after {
  font-weight: 500 !important;
  letter-spacing: 0.14em;
}

/* CTA buttons — medium 500. */
.cta { font-weight: 500 !important; letter-spacing: 0.005em; }
.btn { font-weight: 400 !important; }

/* Body copy stays 400 (default). Strong tags use 500 (not bold) plus
   yellow accent. */
p strong, li strong { font-weight: 500 !important; }

/* Hero subline — keep airy, 300 if Clash supports it, otherwise 400. */
.hero-v4__sub { font-weight: 400 !important; }
.hero-v4__kicker { font-weight: 400 !important; }

/* Yellow accent span — always wins. */
.accent,
em.accent,
em,
.text-accent {
  color: var(--accent) !important;
  font-style: normal;
  background: none !important;
  -webkit-text-fill-color: var(--accent) !important;
}

/* Section eyebrows / kickers get a yellow dot to mirror the hero. */
.section-head__kicker-dot,
.hero__pulse {
  background: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(229, 255, 0, 0.18), 0 0 14px var(--accent-glow) !important;
}

/* Eyebrow / kicker text stays muted white-grey. */
.section-head__kicker,
.cap__eyebrow,
.hww__kicker {
  color: var(--text-mid);
}

/* CTA — subtle yellow ring on the default button so the brand accent
   is felt even on non-accent buttons. The accent variant goes harder. */
.cta__arrow { color: var(--accent); opacity: 1; }

/* Nav active link gets the accent. */
.nav__links a:hover,
.nav__links a.is-active { color: var(--accent) !important; }

/* All instances of <strong> in body copy pick up the accent — single
   convention, no class needed. */
p strong, li strong { color: var(--accent); font-weight: 600; }

/* ZParallax readout pulse → yellow */
.zparallax__readout-pulse { background: var(--accent) !important; }

/* Capability block hover state — yellow accent on numeral and icon. */
.cap__block:hover .cap__block-num { color: var(--accent) !important; }
.cap__block:hover .cap__icon { color: var(--accent); }

/* HWW closing emphasis already updated; safety belt here. */
.hww__closing em::after { background: var(--accent) !important; }

/* CS stat label dim grey, num yellow (already set), rule yellow. */
.cs__stat-label { color: var(--text-mid); letter-spacing: 0.16em; text-transform: uppercase; font-size: 11px; }

/* ============================================================
   UNIVERSAL SECTION KICKER PILL
   ------------------------------------------------------------
   All section headers below the hero use the same pill outline:
   "[01] — [Section Label]" with a yellow number, hairline divider
   and muted label text. Sequential numbering across the page.
   Applied as an additional class alongside any section-specific
   layout class (.section-head__kicker, .cs__kicker, etc.).
   ============================================================ */
.section-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-family: 'Inter Tight', sans-serif !important;
  font-size: clamp(10px, 0.78vw, 12px) !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.72) !important;
  font-weight: 400 !important;
  width: fit-content !important;
  padding: 10px 22px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.015) !important;
  margin: 0 0 clamp(20px, 3vh, 32px) !important;
  white-space: nowrap;
}
.section-pill__num {
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
  background: none !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  flex-shrink: 0;
}
.section-pill__rule {
  display: inline-block;
  width: 14px;
  height: 1px;
  background: rgba(255,255,255,0.45);
  flex-shrink: 0;
}
.section-pill__label {
  color: rgba(255,255,255,0.72) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.72) !important;
  background: none !important;
}

/* ============================================================
   WHAT MAKES IT WORK · single-viewport editorial w/ yeti
   ------------------------------------------------------------
   Reference: 02. Mai 2026. Section is sized to fit in ONE
   viewport (100vh). Yeti is the right column, text + cards
   are the left column. No animations — purely static composition.
   All decorative <img> elements are non-draggable and
   non-selectable (anti-copy CSS + draggable="false" attr).
   ============================================================ */
.wmd {
  position: relative;
  isolation: isolate;
  /* Min-height ensures the section feels full-screen, but content
     can grow taller if it needs more room — no more bottom cutoff. */
  min-height: 100vh;
  padding: clamp(70px, 9vh, 120px) 0 clamp(60px, 7vh, 100px);
  background: var(--bg-0);
  overflow: hidden;
}

/* Anti-copy / anti-drag for ALL images & svg pictograms. */
.wmd img,
.wmd svg {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

/* (Yeti image retired — the section now uses a phone-feed
   animation on the right instead.) */

/* Text column — LEFT side of the section, full-width container.
   Padding-left starts the text close to the page edge so the
   headline has enough room for both sentences on their own
   lines. Phone is right-anchored absolute. */
.wmd__content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 0 clamp(40px, 7vw, 120px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 2.4vh, 26px);
}
/* Default child width: enough horizontal room for the headline
   to fit each sentence on a single line, but capped so it never
   gets too close to the phone on the right. */
.wmd__content > * {
  max-width: min(740px, 58%);
  text-align: left;
}
.wmd__title { max-width: min(820px, 62%); }
.wmd__content .wmd__cards {
  max-width: min(680px, 56%);
  margin-top: clamp(14px, 2vh, 24px) !important;
}
.wmd__kicker { align-self: flex-start; }

/* ---- Kicker · pill badge "01 — What makes it work" ----
   Wrapped in a rounded-rectangle outline with hairline border,
   matching the reference exactly. */
.wmd__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(10px, 0.78vw, 12px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  font-weight: 400;
  margin: 0;
  width: fit-content;
  /* Pill outline */
  padding: 10px 22px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.015);
}
.wmd__kicker-num {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0.1em;
}
/* The kicker-rule reads as a tiny em-dash between number and label. */
.wmd__kicker-rule {
  display: inline-block;
  width: 14px;
  height: 1px;
  background: rgba(255,255,255,0.45);
  margin: 0 -2px;
}
.wmd__kicker-label { color: rgba(255,255,255,0.72); }

/* ---- Headline · sentence case, light Inter Tight, off-white tone ----
   Sized so both sentences ("The feed forgets content." /
   "It remembers behaviour.") fit each on a single line within
   the text column. */
.wmd__title {
  font-family: 'Inter Tight', 'Clash Display', sans-serif;
  font-weight: 300;
  font-size: clamp(32px, 4.4vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: #F5F2E8;
  margin: 0;
  text-wrap: pretty;
  hyphens: none;
  text-transform: none;
}
.wmd__title em.accent,
.wmd__title .accent {
  color: var(--accent) !important;
  font-style: normal;
  -webkit-text-fill-color: var(--accent) !important;
  background: none !important;
}
.wmd__line {
  display: block;
  text-wrap: pretty;
  word-break: keep-all;
}
.wmd__dot {
  color: var(--accent);
  margin-left: 0.04em;
}

/* ---- Subtext ---- */
.wmd__sub {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
  font-weight: 400;
  margin: 0;
  text-wrap: pretty;
}

/* ---- Cards row · 3 compact editorial cards (no glyph icons,
       sized to fit comfortably within the single viewport) ---- */
.wmd__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1vw, 16px);
  margin-top: clamp(20px, 2.6vh, 36px);
}
.wmd-card {
  position: relative;
  padding: clamp(18px, 1.6vw, 24px) clamp(16px, 1.3vw, 22px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0) 100%),
    rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  pointer-events: auto;
  /* Card body stays left-aligned even though the column is right-aligned
     — keeps the inner content readable as a normal block. */
  text-align: left;
  transition:
    border-color 320ms var(--ease-out),
    background 320ms;
}
.wmd-card:hover {
  border-color: rgba(229, 255, 0, 0.32);
  background:
    linear-gradient(180deg, rgba(229,255,0,0.04) 0%, rgba(255,255,255,0) 100%),
    rgba(10, 10, 10, 0.82);
}
.wmd-card__num {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  font-weight: 500;
  color: var(--accent);
  text-transform: uppercase;
  text-align: center;
}
.wmd-card__title {
  font-family: 'Clash Display', 'Inter Tight', sans-serif;
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.18;
  color: var(--text-hi);
  margin: 0;
}
.wmd-card__body {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(12px, 0.9vw, 13.5px);
  line-height: 1.55;
  color: rgba(255,255,255,0.62);
  margin: 0;
  text-wrap: pretty;
  hyphens: none;
}
/* Chips · plain text words separated by a middle-dot character.
   No images, no pills — clean text rhythm. */
.wmd-card__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding: 0;
  margin: auto 0 0;
}
.wmd-card__chips > span {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(11px, 0.85vw, 13px);
  letter-spacing: 0;
  color: rgba(255,255,255,0.7);
  font-weight: 400;
  white-space: nowrap;
  transition: color 280ms;
}
/* Decorative · separator dots (aria-hidden spans). */
.wmd-card__chips > span[aria-hidden="true"] {
  color: rgba(229, 255, 0, 0.55);
  font-weight: 500;
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1;
}
.wmd-card:hover .wmd-card__chips > span:not([aria-hidden]) {
  color: rgba(255, 255, 255, 0.92);
}

/* (Badge + corner-bracket pictograms removed per design refactor —
   the section keeps only the kicker, headline, sub, cards and yeti.
   Sparkle dots stay as subtle starlight accents.) */

/* Sparkles — scattered yellow dots, static (no pulse animation) */
.wmd__spark {
  position: absolute;
  z-index: 1;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow:
    0 0 6px rgba(229,255,0,0.55),
    0 0 14px rgba(229,255,0,0.28);
  pointer-events: none;
}
.wmd__spark--1 { top: 14%;  left: 5%;   }
.wmd__spark--2 { top: 32%;  left: 12%;  width: 2px; height: 2px; opacity: 0.6; }
.wmd__spark--3 { bottom: 22%; left: 6%;  }
.wmd__spark--4 { top: 18%;  right: 22%; width: 2px; height: 2px; opacity: 0.6; }
.wmd__spark--5 { bottom: 14%; right: 18%; }
.wmd__spark--6 { top: 60%;  left: 2%;   width: 2px; height: 2px; opacity: 0.55; }
.wmd__spark--7 { top: 42%;  right: 12%; width: 2px; height: 2px; opacity: 0.7; }
.wmd__spark--8 { bottom: 38%; right: 32%; width: 4px; height: 4px; }

/* =========================================================
   PHONE FEED · animation on the right side of the section
   ---------------------------------------------------------
   A stylised phone with a continuously-scrolling fake feed.
   Generic posts are dim grey placeholders. Branded posts
   (interrupting the pattern) carry the yellow accent and
   readable content. Demonstrates the section thesis: the
   feed forgets generic content; brand behaviour is what
   stays.
   ========================================================= */
.wmd-phone {
  position: absolute;
  top: 50%;
  right: clamp(80px, 10vw, 180px);
  transform: translateY(-50%);
  z-index: 2;
  width: clamp(300px, 30vw, 440px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  pointer-events: none;
}
.wmd-phone__device { pointer-events: auto; }
.wmd-phone__caption {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  font-weight: 400;
  white-space: nowrap;
}

/* ── Device · transparent wrapper for the profile-header PNG.
   The image already includes the iPhone frame, so we don't draw
   another frame around it. The aspect ratio matches the PNG so
   the image fills the box exactly with no black gutters. ──── */
.wmd-phone__device {
  position: relative;
  width: 100%;
  aspect-ratio: 941 / 1672;
  isolation: isolate;
}
.wmd-phone__shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .wmd-phone { width: clamp(240px, 28vw, 340px); right: clamp(48px, 6vw, 100px); }
  .wmd__content > * { max-width: min(480px, 52%); }
  .wmd__content .wmd__cards { max-width: min(520px, 56%); }
}
@media (max-width: 980px) {
  .wmd {
    height: auto;
    min-height: 0;
    max-height: none;
    padding: clamp(80px, 9vh, 110px) 0 clamp(56px, 7vh, 80px);
  }
  .wmd-phone {
    position: relative;
    inset: auto;
    transform: none;
    margin: 0 auto clamp(32px, 4vh, 48px);
    width: clamp(280px, 70vw, 380px);
  }
  .wmd__content {
    height: auto;
    justify-content: flex-start;
  }
  .wmd__content > * { max-width: 100%; }
  .wmd__content .wmd__cards { max-width: 100%; }
  .wmd__cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
@media (max-width: 560px) {
  .wmd__title { font-size: clamp(30px, 9vw, 52px); }
  .wmd-card { padding: 16px 14px; }
}


/* ZParallax disclaimer note — fineprint under the gallery, low-key. */
.zparallax__disclaimer {
  margin: clamp(40px, 5vh, 64px) auto 0;
  max-width: var(--container);
  padding: 0 var(--gutter);
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-lo);
  text-align: center;
  font-weight: 400;
}

/* ============================================================
   ABOUT-US PAGE · Final clean pass
   ------------------------------------------------------------
   Mirrors the index.html design language: thin display copy,
   single-accent yellow on emphasis words, fat editorial numerals
   on slot-indices + manifesto numbers. No silver, no chrome.
   ============================================================ */

/* About hero · big title with yellow period. The H1 itself stays
   500 (already set globally) for readability; the inline span we
   added in the markup carries the yellow. */
.about-hero__title {
  font-weight: 500 !important;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: pretty;
  hyphens: none;
}
.about-hero__title em.accent,
.about-hero__title .accent {
  color: var(--accent) !important;
  font-style: normal;
}

.about-hero__lede {
  font-weight: 400 !important;
  color: var(--text-mid) !important;
  text-wrap: pretty;
  hyphens: none;
}
.about-hero__lede em.accent { color: var(--accent) !important; font-style: normal; }

/* About meta strip — small caps key, value next to it. Pulse dot yellow. */
.about-meta__key { color: var(--text-lo) !important; font-weight: 400 !important; letter-spacing: 0.22em; text-transform: uppercase; font-size: 10.5px; }
.about-meta__val { color: var(--text-hi) !important; font-weight: 400 !important; }
.about-meta__pulse {
  background: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(229, 255, 0, 0.18), 0 0 12px var(--accent-glow) !important;
}

/* Hero kicker dot → yellow (was white). */
.about-hero__kicker-dot {
  background: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(229, 255, 0, 0.18), 0 0 12px var(--accent-glow) !important;
}
.about-hero__kicker { font-weight: 400 !important; color: var(--text-mid); }

/* Slot heads — center-stacked: the big yellow numeral sits ON TOP,
   centered, with the label beneath it. The slot body that follows
   stays left-aligned. */
.about-slot__head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  text-align: center;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: clamp(20px, 3vh, 32px) !important;
  margin-bottom: clamp(28px, 4vh, 44px) !important;
}
.about-slot__index {
  color: var(--accent) !important;
  font-weight: 700 !important;
  font-size: clamp(48px, 7vw, 96px) !important;
  letter-spacing: -0.05em !important;
  line-height: 0.9 !important;
  -webkit-text-fill-color: var(--accent) !important;
  background: none !important;
  display: block;
  /* Optisch zentrieren: negatives letter-spacing schiebt den optischen
     Mittelpunkt minimal nach rechts → padding-inline-end gleicht aus. */
  padding-inline-end: 0.05em;
}
.about-slot__label {
  font-weight: 400 !important;
  color: var(--text-mid) !important;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-size: 11px !important;
  display: block;
  /* Optisch zentrieren: das nachgestellte letter-spacing (0.32em) erzeugt
     trailing whitespace rechts → mit padding-inline-start ausgleichen,
     damit das Label senkrecht unter dem Index sitzt. */
  padding-inline-start: 0.32em;
}

/* Slot story copy — clean white, em.accent yellow, no silver fade. */
.about-slot__story p {
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.86) !important;
  background: none !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.86) !important;
  text-wrap: pretty;
  hyphens: none;
}
.about-slot__story em,
.about-slot__story em.accent {
  color: var(--accent) !important;
  font-style: italic;
  -webkit-text-fill-color: var(--accent) !important;
  background: none !important;
}
.about-slot__story-mark {
  font-weight: 500 !important;
  color: var(--text-hi) !important;
  background: none !important;
  -webkit-text-fill-color: var(--text-hi) !important;
}
.about-slot__story-mark em.accent { color: var(--accent) !important; }

/* Founder cards · clean typography */
.founder-card__role {
  color: var(--text-lo) !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 10.5px;
}
.founder-card__name {
  font-weight: 500 !important;
  letter-spacing: -0.025em;
  color: var(--text-hi) !important;
  background: none !important;
  -webkit-text-fill-color: var(--text-hi) !important;
}
.founder-card__bio {
  font-weight: 400 !important;
  color: var(--text-mid) !important;
  text-wrap: pretty;
  hyphens: none;
}
.founder-card__tags li {
  font-weight: 400 !important;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-lo) !important;
  border-color: var(--border-hi);
  transition: color 280ms var(--ease-out), border-color 280ms var(--ease-out);
}
.founder-card:hover .founder-card__tags li {
  color: var(--accent) !important;
  border-color: var(--border-accent) !important;
}

/* Manifesto */
.manifesto__lede {
  font-weight: 400 !important;
  color: var(--text-mid) !important;
  background: none !important;
  -webkit-text-fill-color: var(--text-mid) !important;
  text-align: center;
  margin: 0 auto clamp(40px, 6vh, 64px) !important;
  max-width: 50ch;
}
.manifesto__lede em.accent { color: var(--accent) !important; font-style: normal; }

/* Manifesto cards — full restructure. The legacy num was a giant
   absolute-positioned ghost watermark behind the title. We pull it
   out of position, shrink it to a real read-size, center it at the
   top of the card, and stack rune → title → body underneath. */
.manifesto-card {
  text-align: center !important;
  align-items: center !important;
  padding-top: clamp(36px, 4vw, 48px) !important;
}
.manifesto-card__num {
  position: static !important;
  top: auto !important;
  right: auto !important;
  font-weight: 700 !important;
  font-size: clamp(40px, 4vw, 64px) !important;
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
  background: none !important;
  letter-spacing: -0.04em !important;
  line-height: 0.95 !important;
  opacity: 1 !important;
  margin-bottom: clamp(8px, 1vh, 14px);
  display: block;
  z-index: 2;
  pointer-events: auto;
}
.manifesto-card:hover .manifesto-card__num { color: var(--accent) !important; opacity: 1 !important; }
.manifesto-card__rune {
  color: rgba(229, 255, 0, 0.55) !important;
  justify-content: center;
}
.manifesto-card__rune::after { display: none !important; }
.manifesto-card__title {
  font-weight: 500 !important;
  letter-spacing: -0.02em;
  color: var(--text-hi) !important;
  background: none !important;
  -webkit-text-fill-color: var(--text-hi) !important;
  text-wrap: pretty;
  hyphens: none;
  text-align: center;
}
.manifesto-card__title em.accent { color: var(--accent) !important; font-style: normal; }
.manifesto-card__body {
  font-weight: 400 !important;
  color: var(--text-mid) !important;
  text-wrap: pretty;
  hyphens: none;
  text-align: center;
  max-width: 38ch;
  margin: 0 auto !important;
}

/* About map · clean readout, yellow pin pulse */
.about-map__pin-dot {
  background: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(229, 255, 0, 0.22), 0 0 18px var(--accent-glow) !important;
}
.about-map__pin-pulse {
  border-color: var(--border-accent) !important;
}
.about-map__pin-label-name { color: var(--text-hi) !important; font-weight: 500 !important; }
.about-map__pin-label-coord { color: var(--text-lo) !important; font-weight: 400 !important; }
.about-map__readout-key { color: var(--text-lo) !important; font-weight: 400 !important; letter-spacing: 0.22em; text-transform: uppercase; }
.about-map__readout-val { color: var(--text-hi) !important; font-weight: 400 !important; }
.about-map__readout-val a { color: var(--accent) !important; border-color: var(--border-accent); }
.about-map__readout-val a:hover { border-color: var(--accent); }