/* ════════════════════════════════════════════════════════════════════
   ROHIT AGARWAL — PORTFOLIO
   Built to the 72 STREET BRAND SYSTEM (see brand-guidelines.md).
   FLAT & SOLID · exact palette · two typefaces · green-underline device.
   Headlines: Go Bold (ALL CAPS) · Body/UI: Montserrat.
   No glassmorphism, no glow, no gradients, no grain — by brand mandate.
   ════════════════════════════════════════════════════════════════════ */

/* Go Bold display face — LICENSED (§4.1). cdnfonts load is a stand-in;
   self-host the licensed master in production. */
@import url('https://fonts.cdnfonts.com/css/gobold');

/* ──────────────────────────  1 · TOKENS (§3.4, §4.7)  ────────────── */
:root {
  /* Primary palette — EXACT. §3.1. Never #000000. */
  --72-yellow: #fdd405;
  --72-black:  #121315;
  --72-white:  #ffffff;
  --72-green:  #0e9e37;

  /* Muted text = white at opacity (no grey hex — §3.4). */
  --muted:   rgba(255, 255, 255, 0.62);
  --muted-2: rgba(255, 255, 255, 0.42);

  /* Keylines = white/yellow at opacity (derived, not a grey ramp). */
  --line:      rgba(255, 255, 255, 0.14);
  --line-soft: rgba(255, 255, 255, 0.08);
  --keyline:   var(--72-yellow);

  /* Glassmorphism */
  --glass-bg:     rgba(255, 255, 255, 0.045);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-blur:   blur(16px) saturate(135%);
  --glass-hi:     inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --glass-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.9);

  /* Type — exactly two families (§4.1). */
  --font-display: 'Gobold', 'Montserrat', 'Helvetica Neue', Arial, sans-serif; /* Go Bold */
  --font-body:    'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  /* Fluid scale (headlines large; body ~16px; nothing below 12px — §4.5). */
  --fs-hero-name:  clamp(3rem, 9.5vw, 8.5rem);
  --fs-title-xl:   clamp(2rem, 4.6vw, 4rem);
  --fs-title:      clamp(1.8rem, 3.6vw, 3.1rem);
  --fs-statement:  clamp(1.2rem, 2vw, 1.7rem);
  --fs-quote:      clamp(1.25rem, 2.2vw, 1.85rem);
  --fs-body:       clamp(1rem, 0.95rem + 0.2vw, 1.08rem);
  --fs-label:      0.74rem;                    /* labels ≥ 12px floor */

  /* Rhythm */
  --margin:      clamp(1.25rem, 4.5vw, 4.5rem);
  --section-pad: clamp(5rem, 12vh, 9rem);
  --content:     1320px;
  --radius:      8px;                          /* brand card radius (§12.5) */

  /* Motion */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-swap: cubic-bezier(0.76, 0, 0.24, 1);
}

/* ──────────────────────────  2 · RESET / BASE  ───────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--72-black); overflow-x: clip; }  /* never expose #000 on overscroll; clip (not hidden) kills sideways scroll from decorative overflow at ANY zoom without creating a scroll container, so sticky/pins keep working */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--72-black);
  color: var(--72-white);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  overflow-x: clip;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
em { font-style: normal; }
strong { font-weight: 600; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--72-yellow); color: var(--72-black); } /* black on yellow (§3.5) */

:focus-visible { outline: 2px solid var(--72-yellow); outline-offset: 3px; }  /* §12.9 */

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--72-black); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--72-yellow); }

/* ──────────────────────────  2.5 · ANIMATED BACKDROP  ────────────────
   Fixed layer behind everything (z-index below content). Brand-black base
   with three blurred colour auras; parallax.js drifts them on scroll so the
   background subtly shifts as you move down the page. Sections are made
   transparent (§10) so this shows through; nav / contact / footer stay opaque. */
.bg-fx {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  background: var(--72-black);
}
.bg-aura {
  position: absolute; border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
/* Yellow aura, top-right — the dominant brand colour, near the hero portrait. */
.bg-aura--y  { width: 46vw; height: 46vw; top: -12vw; right: -8vw;  background: rgba(253, 212, 5, 0.10); }
/* Green aura, mid-left — 72 Street's own colour, anchoring the venture band. */
.bg-aura--g  { width: 52vw; height: 52vw; top: 46%;   left: -14vw;  background: rgba(14, 158, 55, 0.09); }
/* Second faint yellow, lower-right — keeps the tail of the page from going dead. */
.bg-aura--y2 { width: 40vw; height: 40vw; bottom: -10vw; right: -6vw; background: rgba(253, 212, 5, 0.07); }

@media (prefers-reduced-motion: reduce) { .bg-aura { filter: blur(110px); } }
@media (max-width: 640px) { .bg-aura { filter: blur(60px); } }

/* Content sits above the backdrop. The fixed chrome (nav / cursor / progress /
   indicator) already carries its own higher z-index further down; main just
   needs to clear the z-0 backdrop. */
main, .contact { position: relative; z-index: 1; }

/* ══════════════════════  2.7 · CINEMATIC 3D INTRO  ══════════════════════
   Scroll-driven WebGL intro (hero3d.js). Full-viewport stage; hero3d.js pins
   it and drives the camera push-in, whiteout veil, and wordmark reveal.
   Hidden entirely when WebGL is unavailable or motion is reduced, so the site
   just starts at the hero. */
/* Fixed full-viewport overlay (not a pinned section) — driven by the scroll of
   .cinema-spacer, then faded out where the hero begins. z-index sits below the
   nav/dots but above page content. */
.cinema { position: fixed; inset: 0; z-index: 5; overflow: hidden; background: #070b09; will-change: opacity; pointer-events: none; }
/* Fast-scroll guard (hero3d.js): fully hide the overlay once past the intro so a
   partially-faded scrub state can never dim the page. visibility beats inline opacity. */
.cinema.is-hidden { visibility: hidden; opacity: 0; }
.cinema-spacer { height: 165vh; }
html.no-webgl .cinema-spacer { display: none; }
@media (prefers-reduced-motion: reduce) { .cinema-spacer { display: none; } }
.cinema-stage { position: absolute; inset: 0; z-index: 1; }
.cinema-stage canvas { display: block; }
/* Legibility scrim — darkens the top & bottom bands (where the copy sits) while
   leaving the portrait's mid-frame clear. Sits above the canvas, below the copy. */
.cinema-stage::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(7,11,9,0.72) 0%, rgba(7,11,9,0) 26%, rgba(7,11,9,0) 66%, rgba(7,11,9,0.78) 100%);
}

/* whiteout veil — hero3d.js ramps its opacity as the camera blooms in */
.cinema-veil { position: absolute; inset: 0; z-index: 3; background: #f2fff7; opacity: 0; pointer-events: none; }

/* overlaid copy: eyebrow + headline pinned to the top, tag to the bottom, so
   the 3D portrait reads through the middle (like the reference composition) */
.cinema-copy {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center;
  padding: clamp(4.5rem, 11vh, 7rem) 1.5rem clamp(3rem, 8vh, 5rem);
  pointer-events: none;
}
.cinema-eyebrow { color: var(--72-yellow); margin-bottom: clamp(1rem, 2.5vh, 1.6rem); }
.cinema-head {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2rem, 5.6vw, 4.8rem); line-height: 0.98; letter-spacing: 0.01em; color: #fff;
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.6);
}
.cinema-head span { display: block; }
.cinema-tag { color: rgba(255, 255, 255, 0.72); letter-spacing: 0.34em; }

/* name wordmark — dark, revealed on top of the whiteout at the end */
.cinema-word {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em;
  font-size: clamp(2.4rem, 9vw, 8rem); color: var(--72-black);
  opacity: 0; pointer-events: none; padding: 0 1rem; text-align: center;
}
.cinema-scroll { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); z-index: 2; color: rgba(255, 255, 255, 0.6); }

/* Fallbacks: no WebGL or reduced motion → drop the intro, start at the hero. */
html.no-webgl .cinema { display: none; }
@media (prefers-reduced-motion: reduce) { .cinema { display: none; } }

/* ══════════════════════  2.8 · CHAPTER TITLE CARDS  ══════════════════════
   Cinematic "Chapter N" portals that introduce each section (chapters.js pins
   them and reveals the title on scroll, then fades open into the content).
   Background stays transparent so the animated backdrop shows through. */
.chapter {
  position: relative; z-index: 10;         /* beats sibling section content (some has z-index:2) so the pinned card covers it */
  height: 100vh; display: grid; place-items: center;
  overflow: hidden; text-align: center; isolation: isolate;
  /* Solid (near-black) so the pinned card fully covers the section behind it —
     a transparent card lets the previous section bleed through during the pin.
     A faint radial keeps it from feeling dead-flat. */
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(14, 158, 55, 0.10), transparent 60%),
    #070b09;
}
.chapter-ghost {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(15rem, 42vw, 42rem); line-height: 1; color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.055);
  pointer-events: none; user-select: none; z-index: 0;
}
.chapter-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(0.9rem, 2.2vh, 1.5rem); padding: 0 1.5rem;
}
.chapter-num { color: var(--72-green); letter-spacing: 0.32em; }
.chapter-title {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.8rem, 10vw, 8rem); line-height: 0.96; letter-spacing: 0.01em; color: #fff;
}
.chapter-label { color: var(--muted); letter-spacing: 0.34em; }
.chapter-cta {
  display: inline-flex; align-items: center; gap: 0.8rem; margin-top: 0.4rem;
  padding: 0.85rem 1.7rem; border-radius: 999px;
  background: var(--72-green); color: #fff;
  font-family: var(--font-body); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  transition: transform 0.3s var(--ease-out), background-color 0.3s ease;
}
.chapter-cta:hover { background: #0bb540; }
.chapter-cta .cta-ring {
  display: grid; place-items: center; width: 1.7em; height: 1.7em;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.55); transition: transform 0.35s var(--ease-out);
}
.chapter-cta:hover .cta-ring { transform: translateY(3px); }

/* Right-edge chapter pagination dots (chapters.js builds + drives them). */
.chapter-dots {
  position: fixed; right: clamp(1rem, 2vw, 2.2rem); top: 50%; transform: translateY(-50%);
  z-index: 600; display: flex; flex-direction: column; gap: 0.85rem; pointer-events: auto;
}
.chapter-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); transition: background-color 0.3s ease, transform 0.3s ease; }
.chapter-dot:hover { background: rgba(255, 255, 255, 0.5); }
.chapter-dot.is-active { background: var(--72-green); transform: scale(1.5); }
@media (max-width: 860px) { .chapter-dots { display: none; } }

/* Reduced-motion: chapters are static, readable cards (no pin, full height auto). */
@media (prefers-reduced-motion: reduce) {
  .chapter { height: auto; padding: clamp(4rem, 12vh, 8rem) 1.5rem; }
  .chapter-ghost { display: none; }
}

/* ──────────────────────────  3 · UTILITIES  ──────────────────────── */
/* Labels / meta / numbers — Montserrat Semibold, uppercase, letter-spaced.
   (Kept the class name `.mono` so markup needn't change; it is NOT monospace —
   the brand allows only two typefaces, so this is the secondary, §4.1.) */
.mono {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Green-underline emphasis device (§4.6) — a true solid green underline under an
   important word (no gradient anywhere); the word keeps its own colour. */
.text-grad {
  text-decoration: underline;
  text-decoration-color: var(--72-green);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.12em;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

/* ── Line-art icon family (§9.4) — thin stroke, currentColor.
   Exactly one sub-path (.i-accent) fills brand yellow on hover/focus of the
   interactive ancestor: a SMALL partial accent, never a full flood. ── */
.ico { display: block; width: 100%; height: 100%; }
.ico .i-accent { fill: transparent; transition: fill 0.22s ease; }
.row-ico { display: block; width: clamp(26px, 2.4vw, 34px); height: clamp(26px, 2.4vw, 34px); color: var(--72-white); }
.slot-ico { display: block; width: 30px; height: 30px; color: var(--72-white); }
.scroll-ico { display: block; width: 22px; height: 22px; color: var(--muted); }
.quote-ico { display: block; width: 30px; height: 30px; color: var(--72-yellow); margin-bottom: 0.9rem; }
/* fire the accent from the interactive ancestor (keyboard focus lights it too) */
.orbit-card:hover .i-accent, .orbit-card:focus-within .i-accent,
.principle:hover .i-accent, .principle:focus-within .i-accent,
.hero-scroll:hover .i-accent { fill: var(--72-yellow); }
@media (prefers-reduced-motion: reduce) { .ico .i-accent { transition: none; } }

/* Line-mask wrappers (JS animates .ln-in / .split-ln-in). */
.ln { display: block; overflow: hidden; padding-block: 0.08em; margin-block: -0.08em; }
.ln-in { display: block; }
.split-ln { display: block; overflow: hidden; padding-block: 0.12em; margin-block: -0.12em; }
.split-ln-in { display: block; }

.skip-link {
  position: fixed; top: 0.75rem; left: 0.75rem; z-index: 1100;
  padding: 0.6rem 1.1rem;
  background: var(--72-yellow); color: var(--72-black);   /* black on yellow */
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase;
  transform: translateY(-300%); transition: transform 0.3s var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* ════════════════════════════════════════════════════════════════════
   4 · CARD (§12.5) — flat brand black, thin YELLOW keyline, radius 8px.
   No glass, no glow, no gradient. The keyline IS the brand signature.
   ════════════════════════════════════════════════════════════════════ */
.card {
  position: relative;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  box-shadow: var(--glass-hi);
  color: var(--72-white);
  transition: border-color 0.35s var(--ease-out), transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.card:hover {
  border-color: var(--72-yellow);
  transform: translateY(-4px);
  box-shadow: var(--glass-hi), var(--glass-shadow);
}

/* Tilted cards hand transform to GSAP (interactions.js): it writes an inline
   matrix every frame, so a CSS transition on transform would double-smooth the
   tilt and make it lag the pointer. The :hover lift is folded into the tilt
   tween instead — everything else still transitions in CSS. */
.card[data-card] {
  transition: border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

/* ──────────────────────────  5 · FIXED CHROME  ───────────────────── */
/* Thin yellow scroll progress (flat, no glow). */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 1010; pointer-events: none; background: var(--line-soft); }
.progress span { display: block; height: 100%; background: var(--72-yellow); transform-origin: 0 50%; transform: scaleX(0); }

/* Live section indicator — fixed lower-left readout of where you are.
   Built by interactions.js; driven by scroll.js. Yellow number, white name,
   green rule between them (the brand's one accent device). */
.section-indicator {
  position: fixed; left: var(--margin); bottom: clamp(1.2rem, 3vh, 2rem); z-index: 690;
  display: flex; align-items: center; gap: 0.7rem;
  pointer-events: none; mix-blend-mode: normal;
}
.section-indicator #indicator-num { color: var(--72-yellow); font-size: 0.7rem; }
.section-indicator .indicator-rule { width: 1.6rem; height: 2px; background: var(--72-green); }
.section-indicator #indicator-name { color: var(--72-white); font-size: 0.62rem; }
@media (max-width: 860px) { .section-indicator { display: none; } }

/* Cursor dot — a tiny green dot that trails the pointer (cursor.js/initCursorDot).
   Sits over the untouched system cursor; green so it reads on both the dark page
   and the yellow contact footer. Hidden on coarse pointers / reduced motion. */
.pointer-dot {
  position: fixed; top: 0; left: 0; z-index: 1050;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--72-green);
  box-shadow: 0 0 9px 1px rgba(14, 158, 55, 0.5);
  pointer-events: none; will-change: transform;
}
@media (hover: none), (pointer: coarse) { .pointer-dot { display: none; } }
@media (prefers-reduced-motion: reduce) { .pointer-dot { display: none; } }

/* ──────────────────────────  6 · NAV  ──────────────────────────── */
/* Always a SOLID black band (never transparent) so tall hero content can
   never bleed through the fixed header. */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 700;
  display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.5rem);
  padding: 0.9rem var(--margin);
  background: var(--72-black);
  border-bottom: 1px solid var(--line-soft);
  transition: border-color 0.25s ease, padding 0.3s ease;
}
/* Once scrolled it just compresses a touch and firms the divider. */
.site-nav.is-scrolled { border-bottom-color: var(--line); padding-block: 0.7rem; }
.nav-logo {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.15rem; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
}
.nav-logo-dot { color: var(--72-yellow); }

/* Nav labels: secondary Semibold, not Go Bold (§12.2). */
.nav-links { display: flex; gap: clamp(0.9rem, 2vw, 2rem); margin-inline: auto; }
.nav-link {
  position: relative; font-family: var(--font-body); font-weight: 600;
  font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--72-white); padding-block: 0.2rem; transition: color 0.3s ease;
}
.nav-link { color: var(--muted); }
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px;
  background: var(--72-green); transform: scaleX(0); transform-origin: 100% 50%;  /* the one green underline device (§4.6) */
  transition: transform 0.4s var(--ease-swap);
}
.nav-link:hover, .nav-link:focus-visible, .nav-link.is-active { color: var(--72-white); }
.nav-link.is-active { color: var(--72-yellow); }           /* active yellow (§12.2 [OBSERVED]) */
.nav-link:hover::after, .nav-link:focus-visible::after, .nav-link.is-active::after { transform: scaleX(1); transform-origin: 0 50%; }

.nav-meta { color: var(--muted); white-space: nowrap; font-weight: 500; }

/* Nav CTA — outlined on dark (secondary button pattern, §12.4). */
.nav-cta {
  display: inline-block; padding: 0.6rem 1.3rem;
  border: 1px solid rgba(255,255,255,0.4); border-radius: 999px;
  color: var(--72-white); white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.nav-cta:hover, .nav-cta:focus-visible { background: var(--72-yellow); border-color: var(--72-yellow); color: var(--72-black); }

/* Text-swap hover (label slides up, duplicate slides in). */
.swap .swap-box { position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
.swap .swap-box span { display: block; transition: transform 0.5s var(--ease-swap); }
.swap .swap-box span:last-child { position: absolute; inset: 0; transform: translateY(105%); }
.swap:hover .swap-box span:first-child, .swap:focus-visible .swap-box span:first-child { transform: translateY(-105%); }

/* ── Nav hover: SHIMMER-WAVE — the label fills yellow with a bright shine band
   sweeping across it (a shimmering wave), instead of the plain slide-swap. ── */
/* cancel the slide-swap for nav links (both copies) so only the shimmering
   first span shows — otherwise the plain duplicate slides up and covers it */
.nav-link.swap:hover .swap-box span:first-child,
.nav-link.swap:focus-visible .swap-box span:first-child { transform: none; }
.nav-link.swap:hover .swap-box span:last-child,
.nav-link.swap:focus-visible .swap-box span:last-child { transform: translateY(105%); }
.nav-link:hover .swap-box span:first-child,
.nav-link:focus-visible .swap-box span:first-child {
  /* saturated yellow base with a NARROW brighter-yellow streak that sweeps across
     = shimmer wave. Wide background-size keeps the streak thin so the label reads
     clearly yellow, with the shine passing through. Never white. */
  background-image: linear-gradient(105deg,
    var(--72-yellow) 0%, var(--72-yellow) 44%,
    #fff2a0 49%, #ffe86b 50%, #fff2a0 51%,
    var(--72-yellow) 56%, var(--72-yellow) 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: nav-shimmer 1.3s linear infinite;
}
@keyframes nav-shimmer {
  from { background-position: 150% 0; }
  to   { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-link:hover .swap-box span:first-child { animation: none; background: none; -webkit-text-fill-color: var(--72-yellow); color: var(--72-yellow); }
}
.swap:hover .swap-box span:last-child, .swap:focus-visible .swap-box span:last-child { transform: translateY(0); }

/* Burger */
.menu-btn { display: none; width: 44px; height: 44px; margin-left: auto; position: relative; z-index: 760; }
.menu-btn span { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--72-white); transition: transform 0.4s var(--ease-swap), background-color 0.3s; }
.menu-btn span:first-child { top: 17px; }
.menu-btn span:last-child { bottom: 17px; }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); background: var(--72-yellow); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); background: var(--72-yellow); }

.menu-overlay {
  position: fixed; inset: 0; z-index: 720; background: var(--72-black);
  display: flex; flex-direction: column; justify-content: center; gap: 1.4rem;
  padding: 6rem var(--margin) 3rem;
  transform: translateY(-102%); transition: transform 0.65s var(--ease-swap); visibility: hidden;
}
.menu-overlay.is-open { transform: translateY(0); visibility: visible; }
.menu-link {
  display: flex; align-items: baseline; gap: 1.2rem;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.8rem, 8vw, 3rem); line-height: 1.25; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--72-white); transition: color 0.25s ease, transform 0.35s var(--ease-out);
}
.menu-link:hover, .menu-link:focus-visible { color: var(--72-yellow); transform: translateX(0.5rem); }
.menu-num { color: var(--72-yellow); font-size: 0.8rem; }
.menu-meta { color: var(--muted); margin-top: auto; }

@media (max-width: 1080px) { .nav-links { display: none; } .menu-btn { display: block; } }
@media (max-width: 1280px) { .nav-meta { display: none; } }
@media (max-width: 560px)  { .nav-cta { display: none; } }

/* ──────────────────────────  7 · BUTTONS (§12.4)  ────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 0.8rem;
  padding: 0.95rem 1.8rem; border-radius: 999px;
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  will-change: transform;
}
/* Primary CTA — yellow fill, BLACK label (never white on yellow, §3.5). */
.btn--solid { background: var(--72-yellow); color: var(--72-black); border: 1px solid var(--72-yellow); }
.btn--solid:hover, .btn--solid:focus-visible { background: var(--72-white); border-color: var(--72-white); }
/* Secondary — transparent, white text, white keyline. */
.btn--ghost { border: 1px solid rgba(255,255,255,0.4); color: var(--72-white); }
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--72-yellow); color: var(--72-yellow); }
.btn-arrow { transition: transform 0.3s var(--ease-out); }
.btn:hover .btn-arrow { transform: translate(2px, -2px); }

/* — Direction-aware fill hover (hero CTAs) — a brand colour sweeps in from the edge
     the cursor enters (interactions.js drives the clip-path), carrying an inverted
     copy of the label; it retracts toward the edge you leave from. When JS enhances
     a button it gets .has-fill (neutralising the base :hover); no-JS/reduced/touch
     keep the original simple hover. — */
.hero-ctas .btn { position: relative; overflow: hidden; }
.hero-ctas .btn--solid.has-fill:hover, .hero-ctas .btn--solid.has-fill:focus-visible { background: var(--72-yellow); border-color: var(--72-yellow); color: var(--72-black); }
.hero-ctas .btn--ghost.has-fill:hover, .hero-ctas .btn--ghost.has-fill:focus-visible { background: transparent; border-color: rgba(255, 255, 255, 0.4); color: var(--72-white); }
.hero-ctas .btn--solid.has-fill.is-fill { border-color: var(--72-black); }
.hero-ctas .btn--ghost.has-fill.is-fill { border-color: var(--72-yellow); }

.btn-fill {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  display: flex; align-items: center; justify-content: center; gap: 0.8rem;
  padding: 0.95rem 1.8rem; white-space: nowrap;
  clip-path: inset(0 100% 0 0);   /* hidden by default; JS reveals from the entry edge */
  will-change: clip-path;
}
.btn-fill .btn-ico { display: grid; place-items: center; width: 1.15em; height: 1.15em; }
.btn-fill .btn-ico .ico { width: 100%; height: 100%; }
.btn-fill .btn-arrow { transition: transform 0.3s var(--ease-out); }
.hero-ctas .btn:hover .btn-fill .btn-arrow { transform: translate(2px, -2px); }
.btn--solid .btn-fill { background: var(--72-black); color: var(--72-yellow); }
.btn--ghost .btn-fill { background: var(--72-yellow); color: var(--72-black); }

/* ──────────────────────────  8 · HERO  ───────────────────────────── */
.hero {
  position: relative; min-height: 100svh;
  padding: clamp(5rem, 8.5vh, 6.5rem) var(--margin) clamp(3rem, 6vh, 4rem);
  display: flex; flex-direction: column; justify-content: center; gap: clamp(2rem, 5vh, 4rem);
  overflow: hidden; background: transparent;   /* backdrop auras show through (§2.5) */
  isolation: isolate;   /* contain the hero's z-index:2 children so they don't leak over a pinned chapter */
}

/* Minimal copy on the left; the portrait is an absolute bleed on the right. */
.hero-grid {
  position: relative; z-index: 2; width: 100%; max-width: var(--content); margin-inline: auto;
}
.hero-copy { position: relative; z-index: 2; max-width: 38rem; }

/* ── Decorative backdrop: concentric rings + sparkles (drift on scroll) ── */
.hero-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-rings {
  position: absolute; top: 50%; right: 6%; transform: translateY(-50%);
  width: min(72vw, 940px); height: min(72vw, 940px); border-radius: 50%;
  background: repeating-radial-gradient(circle at center, transparent 0 47px, rgba(255, 255, 255, 0.05) 47px 48px);
  -webkit-mask-image: radial-gradient(circle at center, #000 30%, transparent 70%);
  mask-image: radial-gradient(circle at center, #000 30%, transparent 70%);
}
.hero-spark { position: absolute; display: block; fill: rgba(255, 255, 255, 0.4); }
.hero-spark--1 { width: 26px; top: 24%; left: 46%; fill: rgba(255, 255, 255, 0.28); }
.hero-spark--2 { width: 16px; top: 70%; left: 34%; fill: rgba(255, 255, 255, 0.22); }
.hero-spark--3 { width: 34px; bottom: 9%; right: 5%; fill: var(--72-yellow); opacity: 0.85; }

.hero-eyebrow { display: inline-flex; align-items: center; gap: 0.9rem; color: var(--72-yellow); margin-bottom: clamp(1rem, 2.5vh, 1.6rem); }
.eyebrow-rule { width: 2.4rem; height: 2px; background: var(--72-yellow); }

.hero-name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.8rem, 6vw, 5.4rem); line-height: 0.96; letter-spacing: 0.02em; text-transform: uppercase;
  margin-bottom: clamp(1.1rem, 2.8vh, 1.8rem);
}
.hero-name .ln + .ln { margin-top: 0.16em; }                                  /* a little vertical gap: Rohit / Agarwal */
.name-yellow { color: var(--72-yellow); }
.hero-name .name-yellow { text-shadow: 0 0 42px rgba(253, 212, 5, 0.32); }    /* subtle glow on the yellow surname */

.hero-statement {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.7rem); line-height: 1.16; letter-spacing: 0.01em; text-transform: uppercase;
  margin-bottom: clamp(1rem, 2.5vh, 1.5rem);
}

/* Shimmer-wave on hover ([data-shimmer]; shimmer.js). A 3D context + relaxed
   line-mask are added only while hovering so the character wave isn't clipped. */
[data-shimmer] .sw-char { display: inline-block; will-change: transform; }
[data-shimmer].is-shimmer { perspective: 520px; }
[data-shimmer].is-shimmer .ln { overflow: visible; }
[data-shimmer].is-shimmer .ln,
[data-shimmer].is-shimmer .ln-in,
[data-shimmer].is-shimmer .sw-char { transform-style: preserve-3d; }

.hero-sub { max-width: 40ch; color: var(--muted); margin-bottom: 1.6rem; }

.hero-tags { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 1.8rem; color: var(--muted); }
.hero-tags li { padding: 0.4rem 0.95rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.66rem; transition: border-color 0.3s ease, color 0.3s ease; }
.hero-tags li:hover { border-color: var(--72-yellow); color: var(--72-yellow); }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.btn-ico { display: grid; place-items: center; width: 1.15em; height: 1.15em; }
.btn-ico .ico { width: 100%; height: 100%; }

/* — Portrait, framed and right-aligned to the section's content edge (matches
   the nav / stats bar), rather than bleeding off the viewport — */
.hero-visual {
  position: absolute; z-index: 1;
  right: max(var(--margin), calc((100vw - var(--content)) / 2));   /* aligns with content right edge */
  top: 50%; margin-top: calc(-0.5 * min(62vh, 610px));             /* vertically centred to match the copy */
  height: min(62vh, 610px);
  width: min(42vw, 560px);
}
.hero-portrait {
  position: absolute; inset: 0;
  border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(253, 212, 5, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
              0 40px 80px -30px rgba(0, 0, 0, 0.85),
              0 0 100px -24px rgba(253, 212, 5, 0.3);   /* soft yellow glow */
}
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 16%; transform: scale(1); transition: transform 0.9s var(--ease-out); }
.hero-portrait:hover img { transform: scale(1.04); }

.hero-badge {
  position: absolute; z-index: 3; left: 0; bottom: 2%;
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.85rem 1.2rem 0.85rem 0.85rem;
  border-radius: 14px;
}
.badge-ico {
  display: grid; place-items: center; flex-shrink: 0;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  color: var(--72-yellow); border: 1px solid rgba(253, 212, 5, 0.45);
  background: rgba(253, 212, 5, 0.08);
}
.badge-ico .ico { width: 1.35rem; height: 1.35rem; }
.badge-ico .i-accent { fill: var(--72-yellow); }   /* badge medal is lit by default */
.badge-role { font-family: var(--font-display); font-weight: 400; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.02em; }
.badge-org { color: var(--72-yellow); font-size: 0.62rem; margin-top: 0.15rem; }

/* — Stats: one wide glass bar, four cells with circular icons — */
.hero-stats {
  position: relative; z-index: 2; width: 100%; max-width: var(--content); margin-inline: auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(11, 15, 13, 0.9);   /* near-opaque so the bleeding portrait doesn't show through */
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: var(--glass-hi), var(--glass-shadow);
  overflow: hidden;
}
.stat {
  display: flex; align-items: center; gap: clamp(0.7rem, 1.2vw, 1.1rem);
  padding: clamp(1.1rem, 2.2vh, 1.6rem) clamp(1rem, 1.6vw, 1.7rem);
  border-left: 1px solid var(--line-soft);
  transition: background-color 0.3s ease;
}
.stat:first-child { border-left: 0; }
.stat:hover { background: rgba(255, 255, 255, 0.03); }
.stat-ico {
  display: grid; place-items: center; flex-shrink: 0;
  width: 2.8rem; height: 2.8rem; border-radius: 50%;
  color: var(--72-white); border: 1px solid var(--glass-border); background: rgba(255, 255, 255, 0.03);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.stat-ico .ico { width: 1.4rem; height: 1.4rem; }
.stat:hover .stat-ico { color: var(--72-yellow); border-color: var(--72-yellow); }
.stat-label { color: var(--muted); font-size: 0.58rem; margin-bottom: 0.25rem; }
.stat-num { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.4rem); line-height: 1; }
.stat-plus { color: var(--72-yellow); }
.stat-sub { color: var(--muted-2); font-size: 0.68rem; margin-top: 0.3rem; }

/* — 3D KPI boxes: heroBoxes.js renders box.glb over the bar; the DOM cells stay
     in place (opacity 0) as the accessible text + no-WebGL/reduced/mobile fallback. — */
/* The 3D boxes render over both the hero AND the About stats bar ([data-kpi-3d]). */
.hero-stats.is-3d, .about-stats.is-3d {
  position: relative;
  background: transparent; border-color: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  overflow: visible; min-height: clamp(178px, 21vh, 208px);
}
.hero-stats.is-3d .stat, .about-stats.is-3d .astat { opacity: 0; pointer-events: none; }
.hero-boxes { position: absolute; inset: 0; z-index: 3; }
.hero-boxes canvas { display: block; width: 100% !important; height: 100% !important; }
/* Reduced motion: hide the canvas AND restore the glass bar + DOM cards even if
   .is-3d lingers (e.g. Reduce-Motion toggled after load) so the KPIs never blank. */
@media (prefers-reduced-motion: reduce) {
  .hero-boxes { display: none; }
  .hero-stats.is-3d, .about-stats.is-3d {
    border-color: var(--glass-border); box-shadow: var(--glass-hi), var(--glass-shadow);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    overflow: hidden; min-height: 0;
  }
  .hero-stats.is-3d { background: rgba(11, 15, 13, 0.9); }
  .about-stats.is-3d { background: var(--glass-bg); }
  .hero-stats.is-3d .stat, .about-stats.is-3d .astat { opacity: 1; pointer-events: auto; }
}

@media (max-width: 980px) {
  /* stack: portrait becomes a normal contained block above the copy */
  .hero { text-align: left; }
  .hero-copy { max-width: none; }
  .hero-visual { position: relative; top: auto; right: auto; transform: none;
    width: min(78vw, 380px); height: auto; aspect-ratio: 4 / 5; margin: 0 auto clamp(1.5rem, 4vh, 2.5rem); order: -1; }
  .hero-grid { order: 1; }
  .hero-decor { opacity: 0.5; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3), .stat:nth-child(4) { border-top: 1px solid var(--line-soft); }
  .stat:nth-child(odd) { border-left: 0; }
}
@media (max-width: 560px) {
  .hero-name { font-size: clamp(2.6rem, 13vw, 3.6rem); }
  .hero-stats { grid-template-columns: 1fr; }
  .stat { border-left: 0; border-top: 1px solid var(--line-soft); }
  .stat:first-child { border-top: 0; }
}
/* Short landscape viewports: tighten so the hero fits. */
@media (min-width: 980px) and (max-height: 820px) {
  .hero { padding-top: clamp(4.5rem, 9vh, 6rem); gap: clamp(1.2rem, 3vh, 2rem); }
  .hero-name { font-size: clamp(2.6rem, 5vw, 4.2rem); margin-bottom: 0.8rem; }
  .hero-statement { margin-bottom: 0.8rem; }
  .hero-sub { margin-bottom: 1.1rem; }
  .hero-tags { margin-bottom: 1.1rem; }
  .hero-visual { width: min(100%, 380px); }
  .stat { padding-block: clamp(0.8rem, 2vh, 1.2rem); }
  .stat-num { font-size: clamp(1.4rem, 3.6vh, 2rem); }
}

/* ─────────────────────────  10 · SECTIONS (shared)  ──────────────── */
section, .contact { position: relative; }
.about, .expertise, .venture, .career, .recognition, .principles { padding: var(--section-pad) var(--margin); background: transparent; isolation: isolate; }  /* backdrop shows through (§2.5); isolate contains the .sec-ghost watermark */

/* ── Merged chapter opener: a giant faint chapter-number watermark behind each
   section's heading (chapters.js reveals it on scroll-in). Replaces the old
   standalone "Chapter N" title screens — one cinematic opening per section. ── */
.sec-ghost {
  position: absolute; z-index: -1; pointer-events: none; user-select: none;
  top: clamp(0.6rem, 2.5vh, 2.6rem); left: clamp(-1rem, -0.5vw, 0.5rem);
  font-family: var(--font-display); font-weight: 400; line-height: 0.78;
  font-size: clamp(8.5rem, 23vw, 25rem); letter-spacing: 0.01em;
  color: transparent; -webkit-text-stroke: 1.4px rgba(255, 255, 255, 0.06);
}
@media (max-width: 760px) {
  .sec-ghost { font-size: clamp(7rem, 34vw, 13rem); left: -0.3rem; -webkit-text-stroke-width: 1px; }
}
/* drawn accent rule above each section eyebrow — a page-turn flourish (chapters.js) */
.sec-rule {
  display: block; width: clamp(48px, 6vw, 88px); height: 2px; border-radius: 2px;
  margin-bottom: clamp(0.85rem, 2vh, 1.35rem);
  background: linear-gradient(90deg, var(--72-green), rgba(14, 158, 55, 0));
}
.venture .sec-rule { margin-top: 0.2rem; }
/* where the drawn rule leads the eyebrow, drop the eyebrow's inline tick (no double line) */
.sec-rule + .section-label::before { display: none; }

.section-head, .about-grid, .xp-stack, .venture-grid, .career-head, .recognition-list, .principles-list,
.venture > .section-label, .venture > .section-title { max-width: var(--content); margin-inline: auto; }

.section-head { margin-bottom: clamp(2.6rem, 6vh, 4.5rem); }
.section-head--split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; }
@media (max-width: 900px) { .section-head--split { grid-template-columns: 1fr; align-items: start; } }

/* Section label — mono→Montserrat, yellow number, with a short green rule (device). */
.section-label { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--72-yellow); margin-bottom: clamp(1rem, 2.5vh, 1.6rem); }
.section-label::before { content: ''; width: 1.6rem; height: 2px; background: var(--72-green); }

.section-title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-title); line-height: 1.04; letter-spacing: 0.01em; text-transform: uppercase; }
.section-title--xl { font-size: var(--fs-title-xl); }
.section-intro { color: var(--muted); max-width: 36em; }

/* ─────────────────────────  11 · ABOUT  ──────────────────────────── */
.about > * { max-width: var(--content); margin-inline: auto; }

/* Header row: copy left, portrait right */
.about-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; margin-bottom: clamp(2.5rem, 6vh, 4.5rem); perspective: 1500px; }
.about-head .section-title { margin-top: 1rem; }
.about-intro { color: var(--muted); max-width: 40ch; margin-top: clamp(1.2rem, 3vh, 2rem); font-size: 1.05rem; }
.about-intro .hl { color: var(--72-yellow); font-style: normal; }
.about-watch { margin-top: clamp(1.4rem, 3vh, 2rem); gap: 0.7rem; }
.watch-ico { display: grid; place-items: center; width: 1.3rem; height: 1.3rem; color: var(--72-yellow); }
.watch-ico svg { width: 100%; height: 100%; }

/* ── About portrait: B&W in a double GOLD frame that tilts in 3D on scroll ──
   (ref: about_transition.mp4). Outer gold outline + a gap + the inner portrait
   with its own thin gold edge; parallax.js rotates the whole card as you scroll. */
.about-portrait {
  position: relative;
  max-width: 440px; margin-left: auto;                 /* slightly smaller, aligned to the content edge */
  padding: clamp(0.7rem, 1.1vw, 1rem);
  border-radius: 20px;
  border: 1px solid rgba(253, 212, 5, 0.5);
  background: linear-gradient(158deg, #15150d, #0b0c0a);
  box-shadow: 0 0 0 1px rgba(253, 212, 5, 0.08),
              0 44px 80px -34px rgba(0, 0, 0, 0.85),
              0 0 90px -28px rgba(253, 212, 5, 0.32);   /* soft gold glow */
  transform-style: preserve-3d; will-change: transform;
}
.about-portrait img {
  display: block; width: 100%; aspect-ratio: 4 / 4.1; object-fit: cover; object-position: center 6%;
  border-radius: 12px; border: 1px solid rgba(253, 212, 5, 0.28);
  filter: grayscale(1) contrast(1.04); transition: filter 0.6s var(--ease-out);
}
.about-portrait:hover img { filter: grayscale(0); }

/* Stats strip — glass bar, icon on top, centred */
.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: 18px; box-shadow: var(--glass-hi), var(--glass-shadow); overflow: hidden; margin-bottom: clamp(3rem, 8vh, 5.5rem); }
.astat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.3rem; padding: clamp(1.4rem, 3vh, 2.2rem) 1rem; border-left: 1px solid var(--line-soft); transition: background-color 0.3s ease; }
.astat:first-child { border-left: 0; }
.astat:hover { background: rgba(255, 255, 255, 0.03); }
.astat-ico { color: var(--72-yellow); width: 1.9rem; height: 1.9rem; margin-bottom: 0.5rem; }
.astat-ico .ico { width: 100%; height: 100%; }
.astat-ico .i-accent { fill: var(--72-yellow); }
.astat-num { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1; }
.astat-label { color: var(--72-white); font-size: 0.62rem; margin-top: 0.4rem; }
.astat-sub { color: var(--muted-2); font-size: 0.72rem; }

/* ── About KPI cards: solid 3D cuboid FLIP cards (CSS 3D → the text is real DOM,
      pixel-crisp at any DPI). Yellow front with black text + green "+", green back,
      shaded depth walls; a slight resting tilt, and hovering flips the whole card a
      full turn (kpiFlip.js owns the .astat-box transform). ── */
.about-stats.kpi-flip {
  background: transparent; border-color: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible;
  gap: clamp(1rem, 2.4vw, 2.2rem); padding: clamp(1rem, 3vh, 2rem) 0;
}
.kpi-flip .astat { display: block; border: 0; padding: 0; perspective: 900px; }
.kpi-flip .astat-box {
  --d: 22px;
  position: relative; width: min(100%, 234px); margin-inline: auto; aspect-ratio: 1.5 / 1;
  transform-style: preserve-3d; will-change: transform;   /* transform owned by kpiFlip.js */
}
.kpi-flip .astat-face { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; backface-visibility: hidden; }
.kpi-flip .astat-front {
  background: var(--72-yellow);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.08rem;
  text-align: center; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.kpi-flip .astat-back { transform: rotateY(180deg) translateZ(var(--d)); background: var(--72-green); }
/* extruded depth walls */
.kpi-flip .astat-wall { position: absolute; }
.kpi-flip .astat-wall--l { top: 0; left: 0; width: var(--d); height: 100%; transform-origin: left center; transform: rotateY(90deg); background: #cfa400; }
.kpi-flip .astat-wall--r { top: 0; right: 0; width: var(--d); height: 100%; transform-origin: right center; transform: rotateY(-90deg); background: #cfa400; }
.kpi-flip .astat-wall--t { top: 0; left: 0; width: 100%; height: var(--d); transform-origin: top center; transform: rotateX(-90deg); background: #f2c81a; }
.kpi-flip .astat-wall--b { bottom: 0; left: 0; width: 100%; height: var(--d); transform-origin: bottom center; transform: rotateX(90deg); background: #9c7c00; }
/* front text — DOM, crisp, black-on-yellow with a green plus */
.kpi-flip .astat-front .astat-num { color: #121315; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.5rem); line-height: 1; margin: 0; }
.kpi-flip .astat-front .stat-plus { color: var(--72-green); }
.kpi-flip .astat-front .astat-label { color: #121315; font-weight: 700; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 0.5rem; }
.kpi-flip .astat-front .astat-sub { color: rgba(18, 19, 21, 0.6); font-size: 0.64rem; margin-top: 0.2rem; line-height: 1.3; max-width: 90%; }
/* reduced motion → flat, front-facing card (no 3D, no flip) */
@media (prefers-reduced-motion: reduce) {
  .kpi-flip .astat-box { transform: none !important; }
  .kpi-flip .astat-wall, .kpi-flip .astat-back { display: none; }
}

/* The Journey — horizontal timeline */
/* ── The Journey — a vertical, scroll-drawn storytelling spine ──
   A glowing green→yellow line draws top→bottom as you scroll; each milestone's
   node lights up and its big ghost-number + one-liner meet at the line. No boxes:
   the line, the numbers and the copy carry the story. (aboutStory.js drives it.) */
.journey { position: relative; margin: clamp(2.6rem, 7vh, 4.6rem) 0; }
.journey-eyebrow { color: var(--muted-2); letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.66rem; margin-bottom: clamp(1.3rem, 3vh, 2.2rem); padding-left: var(--jn-pad, clamp(2.8rem, 5.5vw, 4.4rem)); }
.journey-track { --jn-x: clamp(0.9rem, 1.8vw, 1.4rem); --jn-pad: clamp(2.8rem, 5.5vw, 4.4rem);
  position: relative; list-style: none; margin: 0; padding: 0 0 0 var(--jn-pad); }
/* the spine draws top→bottom as you scroll */
.journey-track::before {
  content: ''; position: absolute; left: var(--jn-x); top: 0.6rem; bottom: 0.6rem; width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, var(--72-green), var(--72-yellow) 52%, var(--72-green));
  transform: scaleY(var(--draw, 1)); transform-origin: top center;
  box-shadow: 0 0 16px -1px rgba(14, 158, 55, 0.6);
}
.jn {
  position: relative; display: grid; align-items: center;
  grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(1rem, 2.2vw, 1.8rem);
  padding: clamp(1.2rem, 3.2vh, 2.3rem) 0;
}
/* short connector from the node (on the line) across to the copy. The line lives
   on the track; .jn content is inset by --jn-pad, so node/connector are pulled
   back by that inset to sit on the line. */
.jn::after {
  content: ''; position: absolute; top: 50%; left: calc(var(--jn-x) - var(--jn-pad));
  width: calc(var(--jn-pad) - var(--jn-x) - 0.6rem); height: 1px; transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(253, 212, 5, 0.5), rgba(253, 212, 5, 0));
}
.jn-node {
  position: absolute; left: calc(var(--jn-x) - var(--jn-pad)); top: 50%; z-index: 1;
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--72-yellow);
  box-shadow: 0 0 0 4px var(--72-black), 0 0 18px 3px rgba(253, 212, 5, 0.7);
}
.jn-index {
  font-family: var(--font-display); font-weight: 400; line-height: 0.78;
  font-size: clamp(2.8rem, 5.2vw, 4.8rem); color: transparent;
  -webkit-text-stroke: 1.4px rgba(255, 255, 255, 0.17);
}
.jn-head { color: var(--72-yellow); font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.05rem, 1.8vw, 1.5rem); letter-spacing: 0.02em; line-height: 1.05; margin-bottom: 0.42rem; }
.jn-desc { color: var(--muted); font-size: clamp(0.92rem, 1.15vw, 1.05rem); line-height: 1.4; max-width: 44ch; }

/* Bottom: details table + beliefs */
.about-bottom { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(1.2rem, 2.5vw, 2rem); align-items: start; }
.about-meta { padding: 0.4rem 1.4rem; }
.meta-row { display: grid; grid-template-columns: minmax(110px, 0.5fr) 1fr; align-items: baseline; gap: 1rem; padding-block: 0.95rem; border-bottom: 1px solid var(--line-soft); }
.meta-row:last-child { border-bottom: 0; }
.meta-row dt { color: var(--muted); }
.meta-row dd { font-weight: 600; }

.beliefs { padding: clamp(1.6rem, 3vw, 2.4rem); }
.beliefs-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.2rem, 2vw, 1.6rem); text-transform: uppercase; letter-spacing: 0.02em; padding-bottom: 0.5rem; margin-bottom: clamp(1.4rem, 3vh, 2rem); border-bottom: 2px solid var(--72-yellow); display: inline-block; }
.beliefs-list { display: flex; flex-direction: column; gap: clamp(1.2rem, 2.5vh, 1.8rem); }
.belief { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.belief-ico { display: grid; place-items: center; flex-shrink: 0; width: 2.8rem; height: 2.8rem; border-radius: 12px; color: var(--72-yellow); border: 1px solid rgba(253, 212, 5, 0.35); background: rgba(253, 212, 5, 0.06); transition: border-color 0.3s ease, background-color 0.3s ease; }
.belief-ico .ico { width: 1.5rem; height: 1.5rem; }
.belief-ico .i-accent { fill: var(--72-yellow); stroke: none; }
.belief:hover .belief-ico { border-color: var(--72-yellow); background: rgba(253, 212, 5, 0.12); }
.belief-text h4 { font-family: var(--font-body); font-weight: 700; font-size: 1rem; margin-bottom: 0.3rem; }
.belief-text p { color: var(--muted); font-size: 0.92rem; }

@media (max-width: 980px) {
  .about-head { grid-template-columns: 1fr; }
  .about-portrait { order: -1; max-width: 420px; margin-inline: auto; }
  .about-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .about-stats { grid-template-columns: repeat(2, 1fr); }
  .astat:nth-child(odd) { border-left: 0; }
  .astat:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  .journey-track { --jn-pad: clamp(2.4rem, 12vw, 3.4rem); --jn-x: clamp(0.7rem, 3vw, 1.1rem); }
  .jn { column-gap: clamp(0.7rem, 3vw, 1.2rem); padding: clamp(1.1rem, 3vh, 1.8rem) 0; }
  .jn-index { font-size: clamp(2.4rem, 11vw, 3.4rem); }
}

/* ─────────────────────────  12 · EXPERTISE — sticky stacking cards  ────────
   Six full-width cards that STACK: each pins near the top (position:sticky) and
   the next scrolls up over it. The one on top of the stack (.is-front) lights
   up in brand yellow; cards it has covered (.is-back) scale down and dim so the
   pile reads as depth. State classes are driven by scroll in
   js/modules/expertiseStack.js. Cards are opaque so a front card fully hides
   the ones behind it, leaving only a thin top-edge peek.
   ref: layout_card.mp4 — "each card pops to the front, previous goes to back".  */
.xp-stack {
  --xp-top: clamp(88px, 12vh, 118px);   /* nav-clear sticky line (JS reads this) */
  --xp-step: 14px;                       /* per-card stack offset → the peek     */
  position: relative;
}
.xp-card {
  position: sticky;
  top: calc(var(--xp-top) + var(--i) * var(--xp-step));
  display: flex; flex-direction: column;
  justify-content: center; gap: clamp(1.4rem, 4vh, 2.4rem);
  min-height: clamp(280px, 44vh, 360px);
  margin-bottom: clamp(1.6rem, 5vh, 2.6rem);   /* scroll runway between cards */
  padding: clamp(1.6rem, 4vw, 2.8rem) clamp(1.6rem, 4.5vw, 3rem);
  background: #16181c;                          /* opaque — covers cards behind */
  border: 1px solid var(--line);
  border-radius: 22px;
  transform-origin: 50% 0;                       /* scale toward the pinned top edge */
  box-shadow: 0 30px 70px -46px rgba(0, 0, 0, 0.9);
  transition: transform 0.55s var(--ease-out), opacity 0.55s var(--ease-out),
              border-color 0.5s ease, background-color 0.5s ease, box-shadow 0.5s ease;
  will-change: transform;
}
.xp-card:last-child { margin-bottom: 0; }

/* top row: index counter + category pill */
.xp-card-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.xp-num {
  font-weight: 700; font-size: clamp(1.05rem, 2vw, 1.55rem); letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85); transition: color 0.45s ease;
}
.xp-num em { margin-left: 0.55rem; font-size: 0.52em; font-weight: 600; letter-spacing: 0.22em; color: var(--muted-2); }
.xp-tag {
  color: var(--muted); border: 1px solid var(--line); border-radius: 999px;
  padding: 0.42rem 1.05rem; font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; white-space: nowrap;
  transition: color 0.45s ease, border-color 0.45s ease, background-color 0.45s ease;
}

/* main row: icon tile + title/desc */
.xp-card-main { display: flex; align-items: flex-start; gap: clamp(1.2rem, 3vw, 2.4rem); }
.xp-ico {
  flex: none; display: grid; place-items: center;
  width: clamp(54px, 6.5vw, 78px); height: clamp(54px, 6.5vw, 78px);
  border-radius: 20px; background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line); color: var(--72-white);
  transition: background-color 0.45s ease, border-color 0.45s ease, color 0.45s ease;
}
.xp-ico .ico { width: 46%; height: 46%; }
.xp-title {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.5rem, 3.4vw, 2.9rem); line-height: 1.02; letter-spacing: 0.005em;
}
.xp-desc { margin-top: 0.85rem; max-width: 60ch; color: var(--muted); font-size: clamp(0.98rem, 1.3vw, 1.14rem); }

/* — FRONT: the popped-out card gets an advanced highlight — a gradient surface
   plus a slowly-rotating yellow↔green gradient glow-ring drawn just outside its
   border, so the active card clearly stands apart from the pile. — */
@property --xp-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.xp-card.is-front {
  background:
    radial-gradient(135% 130% at 0% 0%, rgba(253, 212, 5, 0.11), transparent 45%),
    radial-gradient(120% 130% at 100% 100%, rgba(14, 158, 55, 0.10), transparent 46%),
    linear-gradient(152deg, #1c1b13, #15160f 56%, #10130f);
  border-color: transparent;
  box-shadow: 0 46px 94px -48px rgba(0, 0, 0, 0.95),
              0 0 74px -22px rgba(253, 212, 5, 0.32),
              0 0 62px -30px rgba(14, 158, 55, 0.32);
}
.xp-card.is-front::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  padding: 2px;   /* ring thickness — masked so only the border shows */
  background: conic-gradient(from var(--xp-ang, 0deg),
    #fdd405, #17b64a, #fdd405, #17b64a, #fdd405);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
  animation: xp-ring-spin 7s linear infinite;
}
@keyframes xp-ring-spin { to { --xp-ang: 360deg; } }
@media (prefers-reduced-motion: reduce) { .xp-card.is-front::before { animation: none; } }
.xp-card.is-front .xp-num { color: var(--72-yellow); }
.xp-card.is-front .xp-tag { color: var(--72-yellow); border-color: rgba(253, 212, 5, 0.5); background: rgba(253, 212, 5, 0.08); }
.xp-card.is-front .xp-ico { background: rgba(253, 212, 5, 0.12); border-color: rgba(253, 212, 5, 0.42); }
.xp-card.is-front .i-accent { fill: var(--72-yellow); }
.xp-card.is-front .xp-desc { color: rgba(255, 255, 255, 0.78); }

/* — BACK: cards the front has covered recede into the pile — */
.xp-card.is-back { transform: scale(0.955); opacity: 0.5; }

@media (max-width: 720px) {
  .xp-card-main { flex-direction: column; gap: 1.1rem; }
  .xp-card { min-height: clamp(260px, 52vh, 340px); }
}

/* Reduced motion: no stacking — render as a plain, readable vertical list. */
@media (prefers-reduced-motion: reduce) {
  .xp-card { position: relative; top: auto; transform: none; opacity: 1; transition: none; }
}

/* ───────────────────  13 · 72 STREET AI — THE ADDRESS  ──────────────────────
   The tagline "Wealth Has a New Address" made literal: an interactive green-glass
   TOWER that builds itself floor-by-floor as you scroll. Non-pinned (position:
   sticky stage, the expertiseStack idiom → no pin-spacers). GSAP writes only CSS
   vars — per-floor --set (0=deep/far/blurred, 1=seated/sharp) and the stage's
   --ry-base/--rx/--drag-ry — and CSS composes every transform, so nothing can
   double-own a matrix. Blur lives on the leaf .floor-face (never the preserve-3d
   .floor) so the finished extrusion stays truly 3D. GREEN is the lead colour;
   the rooftop beacon is the section's only yellow. Brand glow/glass waived. */
.venture > * { max-width: var(--content); margin-inline: auto; }
.venture-label { color: var(--72-green); }
.venture-label::before { background: var(--72-green); }
.venture-tagline { display: block; color: var(--72-yellow); font-family: var(--font-body); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.8rem; margin: 0.8rem 0 1.3rem; }
.grad-green { color: var(--72-green); text-decoration: underline; text-decoration-color: var(--72-green); text-decoration-thickness: 0.07em; text-underline-offset: 0.12em; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; }

/* screen-reader / no-JS directory */
.build-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* — non-pinned sticky stage — */
.venture-build { position: relative; height: 210vh; }
.build-sticky { position: sticky; top: 0; min-height: 100vh; display: grid; grid-template-columns: 0.92fr 1.08fr; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); }

/* left narrative rail */
.build-rail .section-title { margin-top: 0.3rem; }
.rail-now { margin-top: clamp(1.3rem, 3vh, 2.1rem); min-height: 1.3em; color: var(--muted-2); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; transition: color 0.4s ease; }
.rail-now.is-live { color: var(--72-green); }
/* Visible by default (no-JS shows the CTA); JS adds .is-armed to hide it until
   the tower tops out. visibility:hidden also drops the CTA out of the tab order. */
.build-outro { margin-top: clamp(1.4rem, 3.5vh, 2.4rem); }
.build-outro.is-armed { opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), visibility 0.6s; }
.build-outro.is-armed.is-in { opacity: 1; visibility: visible; transform: none; }
.build-ethos { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1rem, 1.5vw, 1.4rem); line-height: 1.22; max-width: 20em; margin-bottom: 1.3rem; }
.build-caption { margin-top: 1rem; color: var(--muted); font-size: 0.7rem; letter-spacing: 0.1em; }

/* right stage */
.build-stage { position: relative; display: flex; align-items: center; justify-content: center; }
.tower-stage {
  --ry-base: -25; --ry-idle: 0; --rx: -9; --drag-ry: 0;
  position: relative; width: 100%; height: 76vh; max-height: 700px;
  perspective: 1400px; perspective-origin: 50% 46%; transform-style: preserve-3d;
  transform: rotateX(calc(var(--rx) * 1deg)) rotateY(calc((var(--ry-base) + var(--ry-idle) + var(--drag-ry)) * 1deg));
  cursor: grab; touch-action: pan-y;
  -webkit-user-select: none; user-select: none;   /* grab-spin must not start a text selection */
}
.tower-stage.is-grab { cursor: grabbing; }
.tower { position: absolute; inset: 0; transform-style: preserve-3d; }

/* ground grid — a perspective floor plane the tower stands on */
.tower-grid {
  position: absolute; left: 50%; bottom: 12%; width: 500px; height: 500px; margin-left: -250px;
  transform: rotateX(84deg);
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(14, 158, 55, 0.20) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(14, 158, 55, 0.20) 39px 40px);
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 6%, transparent 60%);
  mask-image: radial-gradient(ellipse at 50% 45%, #000 6%, transparent 60%);
  pointer-events: none;
}

/* one floor = an extruded 3D volume; GSAP writes only --set, CSS derives all */
.floor {
  --set: 1; --i: 0; --fh: clamp(72px, 8vh, 92px); --d: 124px;   /* default 1 = visible for no-JS; JS seeds 0 then builds. --i inline 0..4, --d = depth */
  position: absolute; left: 50%; bottom: 15%;
  width: clamp(230px, 23vw, 320px); height: var(--fh);
  transform-style: preserve-3d; will-change: transform, opacity;
  transform:
    translateX(-50%)
    translateY(calc(var(--i) * (var(--fh) + 12px) * -1 + (1 - var(--set)) * 200px))
    translateZ(calc((1 - var(--set)) * -300px));
  opacity: var(--set);
}
.floor-face, .floor-side, .floor-top { position: absolute; inset: 0; backface-visibility: hidden; }
.floor-face {
  display: flex; flex-direction: row; align-items: center; gap: clamp(0.7rem, 1.1vw, 1rem);
  padding: 0 clamp(0.95rem, 1.5vw, 1.45rem);
  background: linear-gradient(150deg, rgba(14, 158, 55, 0.22), rgba(6, 40, 18, 0.10));
  border: 1px solid rgba(14, 158, 55, 0.42); border-radius: var(--radius);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-hi);
  filter: blur(calc((1 - var(--set)) * 8px));   /* blur on the LEAF face only → extrusion never flattens */
  transition: box-shadow 0.5s var(--ease-out), transform 0.4s var(--ease-out), border-color 0.5s ease, background 0.5s ease;
}
/* left glyph · centre copy · top-right index — a designed card, not a stacked label */
.floor-glyph {
  flex: 0 0 auto; display: grid; place-items: center;
  width: clamp(30px, 2.5vw, 40px); height: clamp(30px, 2.5vw, 40px);
  border-radius: 10px; color: var(--72-green);
  background: rgba(14, 158, 55, 0.12); border: 1px solid rgba(14, 158, 55, 0.34);
  transition: color 0.4s ease, background 0.4s ease, border-color 0.4s ease, transform 0.45s var(--ease-out);
}
.floor-glyph svg { width: 56%; height: 56%; display: block; }
.floor-copy { flex: 1 1 auto; min-width: 0; }
/* extrusion faces (proven career-cube setup): a lit left side wall + a lit top slab,
   gradient-shaded front→back so the volume reads as solid architecture. */
.floor-side { top: 0; left: 0; width: var(--d); height: 100%; transform-origin: left center; transform: rotateY(90deg);
  background: linear-gradient(90deg, rgba(14, 158, 55, 0.48), rgba(5, 44, 17, 0.82)); border-radius: 0 0 0 var(--radius); }
.floor-top  { top: 0; left: 0; width: 100%; height: var(--d); transform-origin: top center; transform: rotateX(-90deg);
  background: linear-gradient(180deg, rgba(24, 200, 80, 0.34), rgba(10, 120, 42, 0.12)); }
.floor.is-locked .floor-side { background: linear-gradient(90deg, rgba(24, 190, 78, 0.6), rgba(6, 54, 21, 0.85)); }

.floor-num  { position: absolute; top: 0.62rem; right: 0.9rem; font-family: var(--font-display); font-size: 0.74rem; letter-spacing: 0.08em; color: var(--muted-2); transition: color 0.4s ease; }
.floor-name { display: block; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(0.98rem, 1.35vw, 1.28rem); line-height: 1.02; letter-spacing: 0.01em; color: var(--72-white); }
.floor-line { color: var(--muted); font-size: clamp(0.66rem, 0.9vw, 0.76rem); line-height: 1.32; margin-top: 0.22rem; max-width: 32ch; }
.floor-sub  { color: var(--72-green); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 0.18rem; }
/* lobby = the building base: centred wordmark, no glyph/index row */
.floor--lobby .floor-face { flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.18rem; }
.floor--lobby .floor-name { font-size: clamp(1.05rem, 1.7vw, 1.5rem); }

/* lock-in ignition + hover/focus pop-forward */
.floor.is-locked .floor-face { box-shadow: var(--glass-hi), 0 0 34px -6px rgba(14, 158, 55, 0.8); border-color: rgba(14, 158, 55, 0.85); }
.floor.is-locked .floor-num { color: var(--72-yellow); }
.floor.is-locked .floor-glyph { color: #eafff2; background: rgba(14, 158, 55, 0.28); border-color: rgba(14, 158, 55, 0.66); }
.floor .floor-face:hover { transform: translateZ(42px); box-shadow: var(--glass-hi), 0 0 46px -4px rgba(14, 158, 55, 0.95); border-color: var(--72-green); background: linear-gradient(150deg, rgba(14, 158, 55, 0.30), rgba(6, 40, 18, 0.12)); }
.floor .floor-face:hover .floor-glyph { transform: scale(1.1) rotate(-3deg); background: rgba(14, 158, 55, 0.42); border-color: var(--72-green); color: #fff; }

/* rooftop beacon — a subtle brand-yellow "topped-out" light on the highest floor */
.beacon { position: absolute; top: -7px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--72-yellow); opacity: 0; transition: opacity 0.5s ease; }
.floor--roof.is-locked .beacon { opacity: 0.9; box-shadow: 0 0 12px 2px rgba(253, 212, 5, 0.6); animation: beacon-pulse 3.4s var(--ease-out) infinite; }
@keyframes beacon-pulse { 0%, 100% { box-shadow: 0 0 9px 1px rgba(253, 212, 5, 0.45); } 50% { box-shadow: 0 0 15px 3px rgba(253, 212, 5, 0.72); } }

/* elevator address gauge */
.addr-gauge { position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.7rem; font-family: var(--font-display); font-size: 0.72rem; z-index: 3; }
.addr-arrow { color: var(--72-green); font-size: 0.7rem; }
.addr-tick { color: var(--muted-2); transition: color 0.35s var(--ease-out), text-shadow 0.35s; }
.addr-tick.is-lit { color: var(--72-green); text-shadow: 0 0 10px rgba(14, 158, 55, 0.7); }

/* ── responsive: single readable column, gentle stacked fade-up, no 3D ──
   Boundary is 760.98px so it meets the JS desktop gate (min-width:761px) with no
   fractional-width gap where neither branch runs and the tower would stay blank. */
@media (max-width: 760.98px) {
  .venture-build { height: auto; }
  .build-sticky { position: static; min-height: 0; grid-template-columns: 1fr; gap: 1.8rem; }
  .tower-stage { perspective: none; transform: none; height: auto; max-height: none; display: flex; flex-direction: column; gap: 0.7rem; cursor: default; touch-action: auto; }
  .tower { position: static; }
  .tower-grid, .addr-gauge, .beacon { display: none; }   /* no floating rooftop dot in the flat fallback */
  .floor {
    position: relative; left: auto; bottom: auto; width: 100%; height: auto; min-height: 92px;
    transform-style: flat; transform: translateY(calc((1 - var(--set)) * 40px));
  }
  .floor-face { position: relative; inset: auto; filter: none; padding-top: 1.05rem; padding-bottom: 1.05rem; }
  .floor-side, .floor-top { display: none; }
  .floor .floor-face:hover { transform: translateY(-3px); border-color: var(--72-green); }
}

@media (prefers-reduced-motion: reduce) {
  .venture-build { height: auto; }
  .build-sticky { position: static; min-height: 0; grid-template-columns: 1fr; gap: 1.8rem; }
  .tower-stage { perspective: none; transform: none; height: auto; max-height: none; display: flex; flex-direction: column; gap: 0.6rem; }
  .tower { position: static; }
  .tower-grid, .addr-gauge, .beacon { display: none; }
  .floor { position: relative; left: auto; bottom: auto; width: 100%; height: auto; min-height: 84px; transform: none; opacity: 1; }
  .floor-face { position: relative; inset: auto; filter: none; }
  .floor-side, .floor-top { display: none; }
  .build-outro { opacity: 1; transform: none; }
  .rail-now { display: none; }
}

/* ─────────────────────  14 · CAREER — zigzag depth timeline  ─────────────────
   Seven roles as tilted 3D panels staggered in two interlocking columns. Each
   panel sits in its OWN perspective (per-card, so top/bottom cards aren't skewed
   by one shared vanishing point) and steps FORWARD out of depth as it scrolls
   into view: js/modules/careerZigzag.js scrubs a single CSS variable, --enter
   (0 = deep/far/blurred, 1 = home/sharp), and the whole 3D transform is a pure
   CSS expression that reads it — so GSAP never owns a transform matrix (no
   clearProps conflict is even possible). With --enter defaulting to 1, the cards
   render in a readable resting zigzag with no JS (progressive enhancement).
   A dotted SVG thread snakes behind the cards and inks itself in as you scroll;
   a floating pill counts the cubes forward. Brand glow/gradient waived here. */
.career { overflow: hidden; }
.career-head { padding-bottom: 0; }

/* stage = positioned wrapper: the thread sits behind, the grid in front */
.career-stage { position: relative; max-width: 1040px; margin: clamp(2.4rem, 6vh, 4.4rem) auto 0; }

/* snaking dotted connector, drawn behind the cards */
.career-thread { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; pointer-events: none; }
.career-thread path { fill: none; }
.thread-base { stroke: rgba(253, 212, 5, 0.24); stroke-width: 2; stroke-dasharray: 1.5 10; stroke-linecap: round; }
.thread-draw { stroke: var(--72-yellow); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(253, 212, 5, 0.5)); }
.thread-dot  { fill: var(--72-green); filter: drop-shadow(0 0 7px rgba(14, 158, 55, 0.9)); }

/* the interlocking two-column grid — deterministic overlap, content-independent */
.career-timeline {
  --u: clamp(46px, 5.2vw, 60px);
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(24, var(--u));
  column-gap: clamp(0.8rem, 2vw, 1.8rem);
}
/* each node carries its OWN perspective, grid placement and paint order — but NO
   transform (that lives on the face, keyed to --enter). */
.career-node {
  --tiltX: 5deg; --tiltY: 0deg; --z-far: -900px; --rest-z: 0px; --rest-scale: 1;
  position: relative; perspective: 1200px; z-index: var(--z, 1);
}
.career-node:nth-child(odd)  { grid-column: 1 / span 7; --tiltY: 9deg; }
.career-node:nth-child(even) { grid-column: 6 / span 7; --tiltY: -9deg; --rest-z: -34px; }
.career-node:nth-child(1) { grid-row: 1  / span 5; --z: 1; }
.career-node:nth-child(2) { grid-row: 4  / span 5; --z: 2; }
.career-node:nth-child(3) { grid-row: 7  / span 5; --z: 3; }
.career-node:nth-child(4) { grid-row: 10 / span 5; --z: 4; }
.career-node:nth-child(5) { grid-row: 13 / span 5; --z: 5; }
.career-node:nth-child(6) { grid-row: 16 / span 5; --z: 6; }
.career-node:nth-child(7) { grid-row: 19 / span 5; --z: 7; --rest-z: 12px; }

/* the tilted glassy panel — the ONLY transform owner (a pure CSS expression) */
.career-face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: clamp(1.3rem, 1.8vw, 1.95rem) clamp(1.4rem, 2vw, 2.2rem);
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(158deg, rgba(31, 35, 40, 0.9), rgba(15, 18, 21, 0.96));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-hi), 0 34px 66px -34px rgba(0, 0, 0, 0.95);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  transform-origin: center center;
  transform:
    translateZ(calc((1 - var(--enter, 1)) * var(--z-far) + var(--rest-z)))
    translateY(calc((1 - var(--enter, 1)) * 52px))
    scale(var(--rest-scale))
    rotateX(var(--tiltX)) rotateY(var(--tiltY));
  opacity: var(--enter, 1);
  filter: blur(calc((1 - var(--enter, 1)) * 11px));
  transition: box-shadow 0.5s var(--ease-out), border-color 0.45s ease;   /* NOT transform (that's --enter-owned) */
  will-change: transform, opacity, filter;
}
/* green↔yellow gradient glow-border + warm/green tint — faded in on the focused
   card; the ring slowly rotates on the main card (like the Expertise card) */
@property --cr-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.career-face::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--cr-ang, 0deg), #fdd405, #17b64a, #fdd405, #17b64a, #fdd405);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
  opacity: 0; transition: opacity 0.5s var(--ease-out);
}
.career-face::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(135% 125% at 0% 0%, rgba(253, 212, 5, 0.13), transparent 46%),
    radial-gradient(125% 130% at 100% 100%, rgba(14, 158, 55, 0.13), transparent 48%);
  opacity: 0; transition: opacity 0.55s var(--ease-out);
}

/* FOCUS — the card nearest the viewport centre reads as the "main" card:
   the gradient ring + tint fade in, a warm/green glow lifts it forward, and its
   content brightens. Moves down the timeline as you scroll (careerZigzag.js). */
.career-node.is-focus .career-face {
  box-shadow: var(--glass-hi),
              0 48px 94px -34px rgba(0, 0, 0, 1),
              0 0 66px -14px rgba(253, 212, 5, 0.30), 0 0 56px -20px rgba(14, 158, 55, 0.30);
}
.career-node.is-focus .career-face::after { opacity: 1; }
.career-node.is-focus .career-face::before { opacity: 1; animation: cr-ring-spin 8s linear infinite; }
@keyframes cr-ring-spin { to { --cr-ang: 360deg; } }
@media (prefers-reduced-motion: reduce) { .career-node.is-focus .career-face::before { animation: none; } }
.career-node.is-focus .career-name { color: #fff; }
.career-node.is-focus .career-ico { color: var(--72-yellow); }
.career-node.is-focus .career-wm { -webkit-text-stroke-color: rgba(253, 212, 5, 0.2); }
.career-node.is-focus .career-desc { color: rgba(255, 255, 255, 0.74); }

/* current role (the last, live one): a quiet persistent green accent — the
   "you are here / present" marker; the moving focus glow above is the star */
.career-node.is-current .career-face { border-color: rgba(14, 158, 55, 0.5); }
.career-node.is-current .career-yr { color: var(--72-green); }

/* hover polish — a gentle lift-glow (transform stays owned by --enter) */
@media (hover: hover) {
  .career-face:hover { box-shadow: var(--glass-hi), 0 46px 92px -32px rgba(0, 0, 0, 1), 0 0 54px -18px rgba(253, 212, 5, 0.26); border-color: rgba(253, 212, 5, 0.4); }
}

.career-wm { position: absolute; right: 0.1em; bottom: -0.14em; z-index: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(4rem, 8vw, 7rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.06); pointer-events: none; user-select: none; }
.career-face > :not(.career-wm) { position: relative; z-index: 1; }
.career-face-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.career-yr { color: var(--72-yellow); font-size: 0.62rem; letter-spacing: 0.06em; }
.career-ico { display: block; width: clamp(30px, 3vw, 38px); height: clamp(30px, 3vw, 38px); color: rgba(255, 255, 255, 0.5); flex: none; }
.career-node.is-current .career-ico { color: var(--72-yellow); }
.career-name { margin-top: clamp(0.9rem, 2vh, 1.3rem); font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.25rem, 1.9vw, 1.85rem); line-height: 1.03; }
.career-role { margin-top: 0.45rem; color: var(--72-yellow); font-size: 0.62rem; letter-spacing: 0.04em; }
.career-desc { margin-top: 0.7rem; color: var(--muted); font-size: clamp(0.8rem, 0.95vw, 0.92rem); line-height: 1.5; max-width: 42ch; }

/* floating scroll indicator (fixed; shown only while Career is in view) */
.career-pill {
  position: fixed; left: 50%; bottom: clamp(1rem, 3vh, 1.8rem); z-index: 80;
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.55rem 0.75rem 0.55rem 1rem; border-radius: 999px;
  background: rgba(18, 19, 21, 0.72);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  transform: translateX(-50%) translateY(150%); opacity: 0; pointer-events: none;
  transition: transform 0.55s var(--ease-out), opacity 0.4s ease;
}
.career-pill.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; }
.pill-ico { width: 18px; height: 18px; color: var(--72-yellow); flex: none; }
.pill-label { font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.pill-dots { display: flex; gap: 0.4rem; padding-right: 0.3rem; }
.pill-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); transition: background 0.3s var(--ease-out), transform 0.3s var(--ease-out), box-shadow 0.3s ease; }
.pill-dots i.is-lit { background: var(--72-yellow); transform: scale(1.3); }
.pill-dots i.is-current { background: var(--72-green); box-shadow: 0 0 8px rgba(14, 158, 55, 0.85); }

/* ── responsive collapse: single readable column, no 3D / overlap / thread ──
   Boundary is 760.98px (not 760px) so it meets the thread/pill JS gate at
   min-width:761px with no gap at any device-pixel ratio — otherwise a fractional
   width in (760,761) would show the 3D grid with no connector or pill. */
@media (max-width: 760.98px) {
  .career-stage { max-width: 560px; }
  .career-timeline { display: block; }
  .career-node { perspective: none; margin-top: 1.1rem; }
  .career-node:first-child { margin-top: 0; }
  .career-face {
    position: relative; inset: auto; min-height: 200px;
    transform: translateY(calc((1 - var(--enter, 1)) * 40px));
    filter: none;
  }
  .career-thread { display: none; }
}

/* ─────────────────────────  15 · RECOGNITION  ────────────────────── */
/* ── Award cards: full-bleed image + caption overlay (shared grid + orbit) ── */
.orbit { position: relative; max-width: var(--content); margin-inline: auto; }
.orbit-card { overflow: hidden; }                 /* clip the image to the card's radius */
.oc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.oc-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: clamp(1rem, 2vh, 1.5rem) clamp(0.9rem, 1.6vw, 1.3rem) clamp(0.9rem, 1.8vh, 1.2rem);
  background: linear-gradient(to top, rgba(5, 9, 7, 0.94) 12%, rgba(5, 9, 7, 0.78) 48%, transparent 100%);
}
.oc-title {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(0.9rem, 1.3vw, 1.05rem); line-height: 1.05; letter-spacing: 0.01em; color: var(--72-yellow);
}
.oc-desc { color: rgba(255, 255, 255, 0.82); font-size: 0.62rem; line-height: 1.42; margin-top: 0.45rem; }
.orbit-card:hover { border-color: var(--72-yellow); }

/* Landscape awards (bajaj, times) — show the WHOLE image, contained on a clean
   dark backing, rather than a tight portrait crop that zooms/clips them. The
   image sits in the upper area so the caption never covers the subject. */
.orbit-card.oc-fit { background: #0a0f0c; }
.orbit-card.oc-fit .oc-img { object-fit: contain; object-position: center 33%; padding: 0.55rem; }

/* ── Fallback: flat responsive grid (no-JS / touch / reduced-motion) ── */
.recognition-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.8rem, 1.5vw, 1.2rem); }
.orbit-card { position: relative; min-height: clamp(300px, 32vw, 380px); }   /* portrait image cards */
.orbit-axis, .orbit-hint { display: none; }
@media (max-width: 900px) { .recognition-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .recognition-list { grid-template-columns: 1fr; } .orbit-card { min-height: 340px; } }

/* ── Orbit mode: JS adds .is-orbit to .orbit (desktop + motion only) ──
   Cards are absolutely stacked at the stage centre; orbit.js writes each
   one's 3D transform every frame. Perspective on the list turns translateZ
   into real depth-scaling (near cards grow, far cards shrink + fade). */
/* When pinned, the whole section must fit one viewport — tighten its rhythm. */
.recognition.has-orbit { padding-top: clamp(4.5rem, 9vh, 6.5rem); padding-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.recognition.has-orbit .section-head { margin-bottom: clamp(0.8rem, 2vh, 1.6rem); }

.orbit.is-orbit .recognition-list {
  display: block; position: relative; z-index: 1;
  height: clamp(430px, 60vh, 640px);   /* fits cleanly in the pinned viewport with breathing room */
  margin-top: clamp(0.6rem, 2vh, 1.4rem);
  perspective: 1300px;
  transform-style: preserve-3d;
}
.orbit.is-orbit .orbit-card {
  position: absolute; top: 50%; left: 50%;
  width: clamp(184px, 15.5vw, 228px);
  height: clamp(206px, 25vh, 258px);
  min-height: 0; margin: 0;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  backface-visibility: hidden;
  /* orbit.js drives transform/opacity/filter inline every frame — a transform
     transition here would lag the scrub, so only colour transitions remain. */
  transition: border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
  box-shadow: 0 20px 44px -26px rgba(0, 0, 0, 0.92);   /* base lift off the backdrop */
  will-change: transform, opacity, filter;
}
/* the depth-nearest card is lit like the active coverflow card — sharp, framed,
   lifted off the DNA glow so it clearly pops forward */
.orbit.is-orbit .orbit-card.is-front {
  border-color: var(--72-yellow);
  box-shadow: 0 0 0 1px rgba(253, 212, 5, 0.6), 0 28px 72px -20px rgba(0, 0, 0, 0.98), 0 0 42px -6px rgba(14, 158, 55, 0.35);
}

/* The old straight spine is replaced by the winding DNA strands below. */
.orbit.is-orbit .orbit-axis { display: none; }

/* ── Green DNA-glow backdrop (orbit.js builds it): a soft radial glow + two
   faint winding strands with base-pair rungs, behind the orbiting cards. ── */
.orbit-backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: visible; }
.orbit-glow {
  position: absolute; left: 50%; top: 50%; width: 120%; height: 126%;
  transform: translate(-50%, -50%);
  background: radial-gradient(44% 48% at 50% 50%, rgba(14, 158, 55, 0.10), transparent 66%);
  filter: blur(10px);   /* faint static green wash — just enough to seat the bull, no pulse */
}
/* The brand DNA artwork, glowing down the centre. Screen blend adds its light onto
   the dark stage (dark ground contributes ~nothing → only the helix/particles glow);
   a soft radial mask melts the edges so there's no image rectangle. orbit.js nudges
   --dy for a gentle scroll parallax. */
.orbit-dna {
  position: absolute; left: 50%; top: 50%;
  width: clamp(320px, 40%, 500px); aspect-ratio: 1085 / 1450;   /* the bull's own ratio → no crop */
  transform: translate(-50%, calc(-50% + var(--dy, 0px)));
  background: url('../assets/bull-bg.jpg') center center / cover no-repeat;
  opacity: 0.42; pointer-events: none;   /* plain dimmed backdrop — no blend, minimal effect */
  -webkit-mask-image: radial-gradient(60% 64% at 50% 48%, #000 52%, transparent 90%);
  mask-image: radial-gradient(60% 64% at 50% 48%, #000 52%, transparent 90%);
}

/* Scroll hint pill, centred under the stage. */
.orbit.is-orbit .orbit-hint {
  display: inline-flex; align-items: center; gap: 0.6rem;
  position: absolute; left: 50%; bottom: -0.5rem; transform: translateX(-50%);
  padding: 0.55rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted);
  background: rgba(18, 19, 21, 0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 0.6rem; white-space: nowrap; z-index: 300;
}
.orbit.is-orbit .orbit-hint::before {
  content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--72-yellow);
}

/* ─────────────────────────  16 · PRINCIPLES (3D coverflow)  ──────── */
.coverflow { position: relative; max-width: var(--content); margin-inline: auto; }
.cf-stage { position: relative; height: clamp(420px, 56vh, 470px); perspective: 1300px; margin-inline: clamp(0.5rem, 2vw, 2.5rem); }

.cf-card {
  position: absolute; top: 50%; left: 50%;
  width: clamp(228px, 23vw, 286px); height: clamp(360px, 48vh, 404px);
  display: flex; flex-direction: column;
  padding: clamp(1.6rem, 3vh, 2.4rem) clamp(1.4rem, 2vw, 2rem);
  transform: translate(-50%, -50%);
  transform-origin: center center;
  transition: transform 0.62s cubic-bezier(0.34, 1.26, 0.62, 1), opacity 0.5s ease, box-shadow 0.55s ease, border-color 0.55s ease;
  will-change: transform, opacity; cursor: pointer;
  -webkit-user-select: none; user-select: none;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  /* clean semi-opaque surface (NO backdrop-filter — overlapping blurred cards
     composite muddily; this reads as premium frosted glass and stacks cleanly) */
  background: linear-gradient(158deg, rgba(40, 42, 47, 0.92), rgba(19, 20, 23, 0.94));
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 30px 60px -30px rgba(0, 0, 0, 0.92);
}
.cf-card.is-active {
  cursor: default;
  background: linear-gradient(158deg, rgba(46, 48, 53, 0.96), rgba(22, 23, 26, 0.97));
  border-color: var(--72-yellow);
  box-shadow: 0 0 0 1.5px var(--72-yellow), 0 0 34px -2px rgba(253, 212, 5, 0.5), 0 0 90px -10px rgba(253, 212, 5, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 34px 70px -28px rgba(0, 0, 0, 0.95);
}

/* Numbered green badge (ref: corousel_video.mp4) — the principle number in the
   brand-green disc, display face. The active card's number lifts to yellow. */
.cf-ico {
  display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%;
  color: var(--72-green); border: 1px solid rgba(14, 158, 55, 0.4); background: rgba(14, 158, 55, 0.09);
  margin-bottom: clamp(1.4rem, 3vh, 2.2rem);
  font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; letter-spacing: 0.02em;
  transition: color 0.4s ease, border-color 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease;
}
.cf-card.is-active .cf-ico {
  color: var(--72-yellow); border-color: rgba(253, 212, 5, 0.55); background: rgba(253, 212, 5, 0.10);
  box-shadow: 0 0 22px -6px rgba(253, 212, 5, 0.5);
}
.cf-num { color: var(--72-yellow); margin-bottom: 0.9rem; }
.cf-quote { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.16; letter-spacing: 0.01em; text-transform: uppercase; margin-bottom: 1rem; }
.cf-sub { color: var(--muted); font-size: 0.92rem; margin-top: auto; }
.cf-card:not(.is-active) .cf-sub { color: var(--muted-2); }

/* Arrows */
.cf-arrow { position: absolute; top: calc(50% - 1.5rem); z-index: 200; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--yellow-dim, rgba(253,212,5,0.4)); color: var(--72-yellow); background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.cf-arrow svg { width: 1.2rem; height: 1.2rem; }
.cf-arrow:hover { background: var(--72-yellow); color: var(--72-black); border-color: var(--72-yellow); }
.cf-prev { left: 0; }
.cf-next { right: 0; }

/* Dots */
/* Auto-play progress bar (principles.js) — fills over each interval so the
   carousel's continuous motion reads as intentional. */
.cf-progress { width: min(240px, 62%); height: 3px; margin: clamp(1.4rem, 3.5vh, 2.2rem) auto 0; border-radius: 99px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.cf-progress span { display: block; height: 100%; width: 100%; border-radius: 99px; background: var(--72-yellow); transform-origin: left center; transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) { .cf-progress { display: none; } }

.cf-dots { display: flex; justify-content: center; gap: 0.6rem; margin-top: clamp(1rem, 2.5vh, 1.6rem); }
.cf-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); transition: width 0.3s var(--ease-out), background-color 0.3s ease; }
.cf-dot.is-active { width: 26px; background: var(--72-yellow); }

@media (max-width: 620px) {
  .cf-stage { margin-inline: 0; }
  .cf-arrow { top: auto; bottom: -0.4rem; }
  .cf-prev { left: calc(50% - 5rem); }
  .cf-next { right: calc(50% - 5rem); }
  .cf-dots { margin-top: 4rem; }
}

/* ─────────────────────────  17 · CONTACT / FOOTER  ───────────────── */
/* Strong brand moment — SOLID YELLOW block, BLACK Go Bold (never white on yellow). */
.contact { background: var(--72-yellow); color: var(--72-black); padding: var(--section-pad) var(--margin) 0; overflow: hidden; }
.contact > * { max-width: var(--content); margin-inline: auto; }
.contact .section-label { color: var(--72-black); }
.contact .section-label::before { background: var(--72-black); }
/* "Let's work together" — a full-bleed horizontal ticker (marquee) */
.contact-title {
  font-family: var(--font-display); font-weight: 400; line-height: 0.98; text-transform: uppercase; color: var(--72-black);
  max-width: none; margin-inline: calc(var(--margin) * -1); margin-bottom: clamp(1.4rem, 3.5vh, 2.2rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.lwt { display: flex; width: max-content; animation: lwt-scroll 42s linear infinite; }
.contact-title:hover .lwt { animation-play-state: paused; }
.lwt-track { display: flex; flex: none; align-items: center; }
.lwt-word { display: inline-block; white-space: nowrap; font-size: clamp(2.4rem, 7vw, 6rem); padding: 0 clamp(1.4rem, 3.4vw, 3.4rem); }
@keyframes lwt-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .lwt { animation: none; } }
.contact-sub { color: rgba(18,19,21,0.75); max-width: 38em; margin-bottom: clamp(2.2rem, 5vh, 3.5rem); }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.5rem, 5vw, 4rem); margin-bottom: clamp(3.5rem, 9vh, 6rem); }
/* Email button: black fill, yellow label — the yellow-surface CTA pattern (§12.8). */
.email-btn { display: inline-flex; align-items: center; gap: 1.3rem; padding: 1.1rem 2rem; border-radius: 999px; background: var(--72-black); transition: transform 0.35s var(--ease-out); will-change: transform; }
.email-text { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.1rem, 2.4vw, 1.8rem); letter-spacing: 0.01em; text-transform: uppercase; color: var(--72-yellow); }
.email-ring { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; border: 1px solid rgba(253,212,5,0.5); color: var(--72-yellow); font-size: 0.9rem; transition: transform 0.45s var(--ease-out); }
.email-btn:hover .email-ring, .email-btn:focus-visible .email-ring { transform: rotate(-45deg); }
.contact-links { display: flex; flex-wrap: wrap; gap: clamp(1.2rem, 3vw, 2.5rem); }
.contact-link { font-family: var(--font-body); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(18,19,21,0.72); transition: color 0.3s ease; }
.contact-link:hover, .contact-link:focus-visible { color: var(--72-black); }

/* Footer bar sits on brand black beneath the yellow block. */
.footer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.4rem; max-width: none; background: var(--72-black); color: var(--72-white); margin-inline: calc(var(--margin) * -1); padding: 1.6rem var(--margin) 1.8rem; }
.footer-id { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.85rem; }
.footer-id strong { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.05rem; }
.footer-id span { color: var(--muted); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1.3rem; }
.footer-nav a { color: var(--muted); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; transition: color 0.3s ease; }
.footer-nav a:hover, .footer-nav a:focus-visible { color: var(--72-yellow); }
.footer-meta { color: var(--muted); font-size: 0.78rem; }
.footer-sep { margin-inline: 0.6em; color: var(--72-yellow); }
@media (max-width: 900px) { .footer-bar { flex-direction: column; align-items: flex-start; } }

/* ─────────────────────────  18 · REDUCED MOTION (§12.9)  ─────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  /* Career zigzag → plain, fully-readable single column (no 3D / scroll motion) */
  .career-timeline { display: block; }
  .career-node { perspective: none; margin-top: 1.1rem; }
  .career-node:first-child { margin-top: 0; }
  .career-face { position: relative; inset: auto; transform: none; opacity: 1; filter: none; min-height: 190px; }
  .career-thread, .career-pill { display: none; }
}