/* ============================================================
   JOHN R CLARK JR. — DESIGN SYSTEM
   Deep navy-black canvas, cream + restrained teal accents.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Anton";
  src: url("/assets/fonts/anton-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Great Vibes"; /* reserved EXCLUSIVELY for the name mark */
  src: url("/assets/fonts/greatvibes-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --navy: #0B1628;
  --navy-2: #15243B;
  --navy-3: #1d3050;
  --cream: #F4F0E8;
  --cream-dim: rgba(244, 240, 232, 0.62);
  --teal: #1BA5C4;
  /* teal darkened for text on cream — the bright teal only hits ~2.5:1
     on #F4F0E8 and fails AA; this holds the brand hue at ~5.2:1 */
  --teal-deep: #0E6E85;
  --teal-glow: rgba(27, 165, 196, 0.45);
  --display: "Anton", "Arial Narrow", sans-serif;
  --body: "Inter", -apple-system, "Helvetica Neue", sans-serif;
  --script: "Great Vibes", cursive;
  --gutter: clamp(20px, 5vw, 96px);
  --nav-h: 76px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* "rise"  */
  --ease-glide: cubic-bezier(0.30, 0.86, 0.24, 1);
  --ease-settle: cubic-bezier(0.77, 0, 0.18, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
html, body { overflow-x: clip; }
body {
  background: var(--navy);
  color: var(--cream);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--teal); color: var(--navy); }

.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 300;
  background: var(--cream); color: var(--navy);
  padding: 10px 18px; border-radius: 4px; font-weight: 600;
  transition: top 0.2s var(--ease-glide);
}
.skip-link:focus { top: 12px; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
  border-radius: 2px;
}

.kicker {
  font-size: 12px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--teal); font-weight: 600; margin-bottom: 18px;
}
.section-title {
  font-family: var(--display);
  font-size: clamp(34px, 5.4vw, 78px);
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-weight: 400;
}

/* ============================================================
   LOADER
   ============================================================ */
.loader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--navy);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 28px;
  transition: opacity 0.7s var(--ease-out), visibility 0.7s;
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__sig { width: min(66vw, 460px); }
.loader__sig svg { width: 100%; height: auto; overflow: visible; }
.loader__sig .sig-glyph {
  opacity: 0;
  transform: translateY(6px);
}
.loader.is-writing .sig-glyph {
  animation: sigWrite 0.45s var(--ease-out) forwards;
  animation-delay: calc(var(--d, 0) * 0.12s);
}
@keyframes sigWrite {
  to { opacity: 1; transform: translateY(0); }
}
.loader__bar {
  width: min(46vw, 300px); height: 1px;
  background: rgba(244, 240, 232, 0.15);
  overflow: hidden;
}
.loader__bar span {
  display: block; height: 100%; width: 0%;
  background: var(--teal);
  transition: width 0.25s var(--ease-glide);
}
.loader__pct {
  font-size: 11px; letter-spacing: 0.4em; color: var(--cream-dim);
}

/* ============================================================
   CURSOR + GRAIN
   ============================================================ */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 250;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--cream);
  pointer-events: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  transition: width 0.25s var(--ease-out), height 0.25s var(--ease-out), opacity 0.3s var(--ease-glide);
  opacity: 0;
}
.cursor.is-active { opacity: 1; }
.cursor.is-hover { width: 46px; height: 46px; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

.grain {
  position: fixed; inset: -100px; z-index: 90;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 0.9s steps(4) infinite;
}
@keyframes grainShift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-32px, 18px); }
  50% { transform: translate(22px, -26px); }
  75% { transform: translate(-14px, -12px); }
  100% { transform: translate(0, 0); }
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  transition: background 0.4s var(--ease-glide), backdrop-filter 0.4s var(--ease-glide), box-shadow 0.4s var(--ease-glide);
}
.nav.is-scrolled {
  background: rgba(11, 22, 40, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(244, 240, 232, 0.07);
}
.nav__logo { width: 178px; flex: 0 0 auto; }
.nav__logo svg { width: 100%; height: auto; }
.nav__logo .sig-glyph { opacity: 1; }
.nav__links { display: flex; gap: clamp(18px, 3vw, 44px); }
.nav__links a {
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cream-dim);
  transition: color 0.25s var(--ease-glide);
  position: relative;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 1px; background: var(--teal);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s var(--ease-out);
}
.nav__links a:hover { color: var(--cream); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__burger {
  display: none;
  width: 44px; height: 44px;
  flex-direction: column; align-items: center; justify-content: center; gap: 7px;
}
.nav__burger span {
  display: block; width: 24px; height: 2px; background: var(--cream);
  transition: transform 0.35s var(--ease-out);
}
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(11, 22, 40, 0.96);
  backdrop-filter: blur(18px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s var(--ease-glide), visibility 0.4s var(--ease-glide);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu nav { display: flex; flex-direction: column; align-items: center; gap: 34px; }
.mobile-menu nav a:not(.btn) {
  font-family: var(--display);
  font-size: 34px; text-transform: uppercase; letter-spacing: 0.04em;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 34px;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  border-radius: 999px;
  position: relative;
  transition: transform 0.3s var(--ease-out), background 0.3s var(--ease-glide), color 0.3s var(--ease-glide), border-color 0.3s var(--ease-glide), box-shadow 0.3s var(--ease-glide);
  will-change: transform;
  white-space: nowrap;
}
.btn--primary {
  background: var(--cream); color: var(--navy);
}
.btn--primary:hover {
  box-shadow: 0 0 0 1px var(--cream), 0 8px 40px rgba(244, 240, 232, 0.25);
}
.btn--ghost {
  border: 1px solid rgba(244, 240, 232, 0.35); color: var(--cream);
}
.btn--ghost:hover { border-color: var(--teal); color: var(--cream); box-shadow: 0 0 24px rgba(27, 165, 196, 0.2); }
.btn--small { padding: 12px 24px; font-size: 11px; }
.btn--large { padding: 20px 44px; font-size: 14px; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; }
.hero__pin {
  position: relative;
  height: 100vh; height: 100svh;
  overflow: clip;
}
.hero__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
}
.hero__cutout {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 3;
  pointer-events: none;
}
.hero__title-wrap {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 2; /* between canvas and cutout: text passes BEHIND John */
  pointer-events: none;
  padding-bottom: clamp(90px, 16vh, 200px); /* keep clear of the copy block */
}
.hero__title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  line-height: 0.92;
  font-size: clamp(64px, 13.5vw, 220px);
  letter-spacing: 0.02em;
  color: var(--cream);
}
.hero__line { display: block; white-space: nowrap; }
.hero__line .char { display: inline-block; will-change: transform, opacity; }
/* At rest the whole title sits BEHIND John (cutout above). Once the
   orbit takes over the cutout dissolves and the same letters ride in
   FRONT of him — depth in both directions with one text layer. */

.hero__copy {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(84px, 13vh, 140px);
  z-index: 5;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 0 var(--gutter);
}
.hero__positioning {
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hero__sub {
  margin-top: 8px;
  font-size: clamp(13px, 1.3vw, 16px);
  color: var(--cream-dim);
  max-width: 560px;
}
.hero__ctas { display: flex; gap: 16px; margin-top: 26px; flex-wrap: wrap; justify-content: center; }

.hero__scrollcue {
  position: absolute; bottom: 22px; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--cream-dim);
}
.hero__scrollcue-line {
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, var(--teal), transparent);
  animation: cueDrop 1.8s var(--ease-out) infinite;
  transform-origin: top;
}
@keyframes cueDrop {
  0% { transform: scaleY(0); opacity: 0; }
  35% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(10px); opacity: 0; }
}

/* ============================================================
   STATS
   ============================================================ */
/* The stats are the proof beat — they need to read as their own chapter,
   not a continuation of the hero. Two separator treatments; pick with
   <html data-sep="ledger|seam">. */
.stats {
  position: relative;
  padding: clamp(80px, 12vh, 150px) var(--gutter);
  isolation: isolate;
}
.stats__inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 4vw, 60px);
  max-width: 1400px; margin: 0 auto;
}
.stat { text-align: left; position: relative; padding-left: 22px; }
.stat::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 1px;
}
.stat__value {
  font-family: var(--display);
  font-size: clamp(44px, 5.6vw, 92px);
  line-height: 1;
  letter-spacing: 0.01em;
}
.stat__label {
  margin-top: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.24em;
}
.stat__sublabel { margin-top: 6px; font-size: 13px; max-width: 240px; }

/* wave belongs to the seam variant only */
.stats__wave { display: none; }

/* ---------- VARIANT: LEDGER (default) ----------------------------
   A cream proof band between two dark cinematic sections. The numbers
   read like a printed fact sheet, and the return to navy for THE STORY
   feels like the film resuming. Edges fade into the navy on both sides
   so the band sits in the film rather than being pasted onto it. */
[data-sep="ledger"] .stats { background: var(--cream); }
[data-sep="ledger"] .stats::before,
[data-sep="ledger"] .stats::after {
  content: ""; position: absolute; z-index: 1;
  left: 0; right: 0; height: clamp(70px, 9vh, 130px);
  pointer-events: none;
}
[data-sep="ledger"] .stats::before {
  top: 0;
  background: linear-gradient(to bottom, var(--navy), rgba(11, 22, 40, 0));
}
[data-sep="ledger"] .stats::after {
  bottom: 0;
  background: linear-gradient(to top, var(--navy), rgba(11, 22, 40, 0));
}
/* inverted type: #15243B per the design system's light-section rule */
[data-sep="ledger"] .stat__value { color: var(--navy-2); }
[data-sep="ledger"] .stat__label { color: var(--teal-deep); }
[data-sep="ledger"] .stat__sublabel { color: rgba(21, 36, 59, 0.72); }
[data-sep="ledger"] .stat::before {
  background: linear-gradient(to bottom, var(--teal-deep), rgba(14, 110, 133, 0));
}

/* ---------- VARIANT: SEAM ----------------------------------------
   Stays in the dark. The band lifts onto its own surface and a hairline
   wave draws left→right across the boundary as you scroll. */
[data-sep="seam"] .stats {
  background: var(--navy-2);
  border-top: 1px solid rgba(244, 240, 232, 0.07);
  padding-bottom: clamp(110px, 15vh, 190px);
}
[data-sep="seam"] .stat__value { color: var(--cream); }
[data-sep="seam"] .stat__label { color: var(--teal); }
[data-sep="seam"] .stat__sublabel { color: var(--cream-dim); }
[data-sep="seam"] .stat::before {
  background: linear-gradient(to bottom, var(--teal), transparent);
}
[data-sep="seam"] .stats__wave {
  display: block;
  position: absolute; z-index: 3;
  left: 0; right: 0; bottom: -1px;
  height: clamp(56px, 7vw, 80px);
  pointer-events: none;
  /* the surface change resolves into the void beneath the wave */
  background: linear-gradient(to bottom, rgba(21, 36, 59, 0), var(--navy) 78%);
}
[data-sep="seam"] .stats__wave svg { width: 100%; height: 100%; overflow: visible; }
[data-sep="seam"] #seamPath { filter: drop-shadow(0 0 6px rgba(27, 165, 196, 0.45)); }
[data-sep="seam"] #seamNode { filter: drop-shadow(0 0 8px rgba(27, 165, 196, 0.9)); }

/* ============================================================
   PILLARS
   ============================================================ */
.pillars { position: relative; }
.pillars__pin {
  position: relative;
  height: 100vh; height: 100svh;
  overflow: clip;
  display: flex; align-items: center;
}
.pillars__media { position: absolute; inset: 0; background: var(--navy); }
.city-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.city2d {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.city2d__d rect { vector-effect: non-scaling-stroke; }
/* the city is already dark — only ground the copy zone */
.pillars__scrim--city {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(11, 22, 40, 0.72) 0%, rgba(11, 22, 40, 0.28) 44%, transparent 72%),
    linear-gradient(to top, rgba(11, 22, 40, 0.82), transparent 38%);
}
.pillars__intro {
  position: absolute;
  left: var(--gutter); right: var(--gutter);
  top: 20vh;
  z-index: 2;
  max-width: 760px;
}
.pillar {
  position: absolute;
  left: var(--gutter);
  bottom: 14vh;
  z-index: 2;
  max-width: 560px;
  opacity: 0;
  visibility: hidden;
}
.pillar__num {
  font-family: var(--display);
  font-size: clamp(60px, 8vw, 120px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 240, 232, 0.35);
}
.pillar__title {
  font-family: var(--display);
  font-size: clamp(34px, 4.4vw, 64px);
  text-transform: uppercase;
  margin-top: 6px;
  letter-spacing: 0.02em;
}
.pillar__title::after {
  content: ""; display: block;
  width: 74px; height: 3px; margin-top: 12px;
  background: var(--teal);
  box-shadow: 0 0 18px var(--teal-glow);
}
.pillar__text { margin-top: 16px; color: var(--cream-dim); font-size: clamp(14px, 1.35vw, 17px); max-width: 470px; }

/* ============================================================
   WORK
   ============================================================ */
.work { position: relative; padding: clamp(90px, 14vh, 170px) 0; }
.work__media { position: absolute; inset: 0; }
.work__video { width: 100%; height: 100%; object-fit: cover; }
.work__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(rgba(11, 22, 40, 0.93), rgba(11, 22, 40, 0.88) 30%, rgba(11, 22, 40, 0.95));
}
.work__inner { position: relative; z-index: 2; padding: 0 var(--gutter); max-width: 1440px; margin: 0 auto; }
.work__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(44px, 6vh, 80px);
  perspective: 1400px;
}
.card {
  position: relative;
  background: linear-gradient(160deg, rgba(21, 36, 59, 0.92), rgba(11, 22, 40, 0.96));
  border-radius: 18px;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow 0.4s var(--ease-glide);
}
.card:hover { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 60px rgba(27, 165, 196, 0.08); }
.card__border {
  position: absolute; inset: 0; border-radius: 18px;
  padding: 1px;
  background: conic-gradient(from var(--angle, 0deg), rgba(244,240,232,0.05), var(--teal-glow), rgba(244,240,232,0.05) 32%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.card__visual {
  height: clamp(240px, 30vw, 360px);
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(27, 165, 196, 0.12), transparent 70%),
    var(--navy-2);
  border-bottom: 1px solid rgba(244, 240, 232, 0.06);
  overflow: hidden;
}
.card__visual svg { width: min(86%, 560px); height: auto; max-height: 92%; overflow: visible; }
.card__map-nodes circle { fill: var(--navy); stroke: var(--cream); stroke-width: 1.4; }
.card__map-center { fill: var(--teal); }
.card__map-pulse {
  fill: none; stroke: var(--teal); stroke-width: 2;
  transform-origin: 280px 180px;
  animation: mapPulse 3s var(--ease-glide) infinite;
}
@keyframes mapPulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.6); opacity: 0; }
}
.card__map-labels text { font-family: var(--body); font-size: 11px; letter-spacing: 0.14em; opacity: 0.75; }
.card__map-labels .card__map-center-label {
  font-family: var(--display); font-size: 15px; opacity: 1; fill: var(--navy);
}
.card__pipe-flow { stroke-dasharray: 8 10; animation: pipeFlow 1.2s linear infinite; }
@keyframes pipeFlow { to { stroke-dashoffset: -18; } }
.card__pipe-person { fill: var(--cream); }
.card__pipe-person-label { font-size: 20px; }
.card__pipe-labels text { font-family: var(--body); font-size: 11px; letter-spacing: 0.14em; opacity: 0.75; }
.card__body { padding: clamp(24px, 3vw, 40px); }
.card__num { font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--teal); font-weight: 600; }
.card__title {
  font-family: var(--display);
  font-size: clamp(24px, 2.6vw, 38px);
  text-transform: uppercase;
  margin-top: 10px;
  line-height: 1.1;
  letter-spacing: 0.015em;
}
.card__text { margin-top: 14px; color: var(--cream-dim); font-size: 15px; }

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline { position: relative; background: var(--navy); }
.timeline__head {
  padding: clamp(90px, 14vh, 170px) var(--gutter) clamp(30px, 5vh, 60px);
  max-width: 1100px;
}
.timeline__note { margin-top: 16px; color: var(--cream-dim); }
.timeline__pin {
  position: relative;
  height: 100vh; height: 100svh;
  overflow: clip;
  display: flex; align-items: center;
}
.timeline__track {
  position: relative;
  display: flex;
  gap: clamp(60px, 7vw, 120px);
  padding: 0 8vw 0 var(--gutter);
  will-change: transform;
}
.timeline__track::before {
  content: "";
  position: absolute;
  left: 0; right: -60vw; top: 0;
  height: 1px;
  background: rgba(244, 240, 232, 0.12);
}
.chapter {
  position: relative;
  flex: 0 0 auto;
  width: clamp(240px, 24vw, 330px);
  padding-top: 54px;
}
.chapter__node {
  position: absolute;
  top: -7px; left: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--navy);
  border: 2px solid var(--cream);
  z-index: 2;
}
.chapter--ongoing .chapter__node { border-color: var(--teal); box-shadow: 0 0 16px var(--teal-glow); }
.chapter__seg {
  position: absolute;
  top: 0; left: 0; height: 1px;
  background: var(--cream);
  width: 0;
}
.chapter--ongoing .chapter__seg {
  background: linear-gradient(to right, var(--teal), rgba(27, 165, 196, 0.35));
  box-shadow: 0 0 12px var(--teal-glow);
}
.chapter--ongoing .chapter__seg::after {
  content: "";
  position: absolute; right: -3px; top: -2.5px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 14px var(--teal);
  animation: ongoingPulse 2s var(--ease-settle) infinite;
}
@keyframes ongoingPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.5); }
}
.chapter__index {
  font-family: var(--display);
  font-size: 15px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 240, 232, 0.4);
  letter-spacing: 0.06em;
}
.chapter--ongoing .chapter__index { -webkit-text-stroke: 1px var(--teal); }
.chapter__title {
  font-family: var(--display);
  font-size: clamp(20px, 1.9vw, 27px);
  text-transform: uppercase;
  line-height: 1.12;
  margin-top: 8px;
  letter-spacing: 0.02em;
}
.chapter__company { margin-top: 8px; font-size: 13px; color: var(--cream); font-weight: 600; }
.chapter__dates {
  margin-top: 4px; font-size: 12px; letter-spacing: 0.18em;
  color: var(--teal); font-weight: 600;
}
.chapter--done .chapter__dates { color: var(--cream-dim); }
.chapter__detail { margin-top: 10px; font-size: 13.5px; color: var(--cream-dim); }
.chapter--ongoing .chapter__title { text-shadow: 0 0 30px rgba(27, 165, 196, 0.35); }

/* ---- the reward: five lines converge into John past TODAY ---- */
.chapter-reward {
  position: relative;
  flex: 0 0 auto;
  width: min(78vw, 1040px);
  height: min(72vh, 620px);
  align-self: center;
  margin-left: clamp(40px, 6vw, 110px);
}
.chapter-reward__lines {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
}
.chapter-reward__john {
  position: absolute;
  right: 0; bottom: 0;
  height: 96%;
  width: auto; max-width: none;
  object-fit: contain;
  object-position: bottom right;
  filter: drop-shadow(0 0 60px rgba(27, 165, 196, 0.18));
  pointer-events: none;
}
.chapter-reward__copy {
  position: absolute;
  left: 0; bottom: 14%;
  max-width: 46%;
}
.chapter-reward__title {
  font-family: var(--display);
  font-size: clamp(30px, 3.6vw, 58px);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: 0.015em;
}
.chapter-reward__title span { display: block; }
.chapter-reward__title span:last-child { color: var(--teal); text-shadow: 0 0 34px rgba(27, 165, 196, 0.4); }
.chapter-reward__sub {
  margin-top: 12px;
  color: var(--cream-dim);
  font-size: clamp(14px, 1.3vw, 17px);
  letter-spacing: 0.04em;
}

.timeline__present {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: clamp(70px, 8vw, 130px);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(to right, transparent, rgba(27, 165, 196, 0.1));
  border-left: 1px dashed rgba(27, 165, 196, 0.4);
  z-index: 3;
}
.timeline__present span {
  font-size: 11px; letter-spacing: 0.4em; font-weight: 600;
  color: var(--teal);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* ============================================================
   TAKEAWAY
   ============================================================ */
.takeaway {
  position: relative;
  padding: clamp(110px, 18vh, 220px) var(--gutter);
  text-align: center;
  overflow: clip;
}
.takeaway > .kicker, .takeaway__quote, .takeaway__sub {
  position: relative; z-index: 2;
  max-width: 1150px; margin-left: auto; margin-right: auto;
}
/* real photography, treated in code: navy/cream duotone via
   grayscale + overlay tint, vignette into the void, slow parallax */
.takeaway__photo {
  position: absolute; inset: -6% 0;
  z-index: 1;
  margin: 0;
}
.takeaway__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04) brightness(0.62) sepia(0.22) hue-rotate(178deg) saturate(0.9);
  will-change: transform;
}
.takeaway__photo-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 78% 66% at 50% 44%, rgba(11, 22, 40, 0.34) 0%, rgba(11, 22, 40, 0.86) 78%, var(--navy) 100%),
    linear-gradient(rgba(11, 22, 40, 0.42), rgba(11, 22, 40, 0.42));
}
.takeaway.has-photo .takeaway__quote p { text-shadow: 0 2px 34px rgba(11, 22, 40, 0.85); }
.takeaway__quote { position: relative; }
.takeaway__quote p {
  font-size: clamp(26px, 3.6vw, 52px);
  line-height: 1.28;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.takeaway__quote .word { display: inline-block; }
.takeaway__quote em {
  font-style: normal;
  color: var(--teal);
  position: relative;
}
.takeaway__underline {
  width: min(420px, 60vw);
  margin: 18px auto 0;
}
.takeaway__underline path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.takeaway__sub {
  margin-top: 34px;
  color: var(--cream-dim);
  font-size: clamp(14px, 1.4vw, 17px);
  letter-spacing: 0.06em;
}

/* ============================================================
   CONNECT
   ============================================================ */
.connect {
  position: relative;
  background:
    radial-gradient(ellipse 70% 55% at 50% 100%, rgba(27, 165, 196, 0.13), transparent),
    var(--navy);
  padding: clamp(110px, 16vh, 200px) var(--gutter);
  border-top: 1px solid rgba(244, 240, 232, 0.06);
}
.connect__inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.connect__title {
  font-family: var(--display);
  font-size: clamp(52px, 9.5vw, 160px);
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: 0.015em;
}
.connect__line { display: block; overflow: hidden; }
.connect__line em { font-style: normal; color: var(--teal); }
.connect__sub {
  margin: 30px auto 0;
  max-width: 640px;
  color: var(--cream-dim);
  font-size: clamp(15px, 1.5vw, 18px);
}
.connect__ctas {
  display: flex; gap: 18px; justify-content: center;
  margin-top: 44px; flex-wrap: wrap;
}

.connect__form {
  margin: 60px auto 0;
  max-width: 560px;
  text-align: left;
  background: var(--navy-2);
  border: 1px solid rgba(244, 240, 232, 0.08);
  border-radius: 18px;
  padding: clamp(24px, 4vw, 44px);
}
.connect__form-title { font-family: var(--display); font-size: 26px; text-transform: uppercase; }
.connect__form-sub { color: var(--cream-dim); font-size: 13px; margin-top: 6px; margin-bottom: 22px; }
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--cream-dim); font-weight: 600;
  margin-bottom: 8px;
}
.field input, .field textarea {
  width: 100%;
  background: rgba(11, 22, 40, 0.75);
  border: 1px solid rgba(244, 240, 232, 0.14);
  border-radius: 10px;
  color: var(--cream);
  padding: 14px 16px;
  font: inherit;
  transition: border-color 0.25s var(--ease-glide), box-shadow 0.25s var(--ease-glide);
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(27, 165, 196, 0.18);
}
.connect__form-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form-status { font-size: 13px; color: var(--teal); }
.form-status.is-error { color: #e06c6c; }

/* ============================================================
   MODAL
   ============================================================ */
.modal { position: fixed; inset: 0; z-index: 180; display: flex; align-items: center; justify-content: center; }
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 9, 18, 0.8);
  backdrop-filter: blur(8px);
}
.modal__panel {
  position: relative;
  width: min(640px, calc(100vw - 32px));
  max-height: min(86vh, 900px);
  overflow-y: auto;
  background: var(--navy-2);
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 20px;
  padding: clamp(24px, 4vw, 44px);
  animation: modalIn 0.45s var(--ease-out);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(26px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.modal__close {
  position: absolute; top: 14px; right: 18px;
  font-size: 30px; line-height: 1;
  color: var(--cream-dim);
  transition: color 0.2s var(--ease-glide), transform 0.3s var(--ease-out);
  width: 44px; height: 44px;
}
.modal__close:hover { color: var(--cream); transform: rotate(90deg); }
.modal__title { font-family: var(--display); font-size: clamp(24px, 3vw, 34px); text-transform: uppercase; }
.modal__sub { color: var(--cream-dim); margin: 10px 0 24px; }
.modal__calendly { margin-top: 18px; border-radius: 12px; overflow: hidden; background: var(--navy); }
.modal__calendly iframe { width: 100%; height: min(62vh, 660px); border: 0; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid rgba(244, 240, 232, 0.07);
  padding: clamp(60px, 9vh, 110px) var(--gutter) 40px;
  text-align: center;
}
.footer__sig { width: min(300px, 60vw); margin: 0 auto; }
.footer__sig svg { width: 100%; height: auto; }
.footer__sig .sig-glyph { opacity: 1; }
.footer__links {
  display: flex; gap: clamp(16px, 3vw, 38px);
  justify-content: center; flex-wrap: wrap;
  margin-top: 38px;
}
.footer__links a {
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cream-dim);
  transition: color 0.25s var(--ease-glide);
}
.footer__links a:hover { color: var(--teal); }
.footer__statement {
  margin-top: 40px;
  font-size: 15px;
  color: var(--cream);
  letter-spacing: 0.04em;
}
.footer__legal { margin-top: 14px; font-size: 12px; color: rgba(244, 240, 232, 0.4); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .stats__inner { grid-template-columns: repeat(2, 1fr); }
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
}
/* Timeline goes vertical below 768px — must match the JS isMobile
   breakpoint exactly, since the scroll engine branches on it too. */
@media (max-width: 767.98px) {
  .timeline__pin { height: auto; display: block; overflow: visible; }
  .timeline__track {
    flex-direction: column;
    gap: 46px;
    padding: 0 var(--gutter) 80px;
  }
  .timeline__track::before {
    left: calc(var(--gutter) + 6px); right: auto; top: 0; bottom: 0;
    width: 1px; height: auto;
  }
  .chapter { width: 100%; padding-top: 0; padding-left: 40px; }
  .chapter__node { top: 6px; left: 0; }
  .chapter__seg { display: none; }
  .chapter-reward {
    width: 100%;
    height: auto;
    min-height: 480px;
    margin: 30px 0 0;
  }
  .chapter-reward__john {
    height: 72%;
    left: 50%; right: auto;
    transform: translateX(-50%);
    object-position: bottom center;
  }
  .chapter-reward__copy {
    max-width: none;
    left: 0; right: 0; bottom: 0;
    text-align: center;
  }
  .timeline__present {
    position: static;
    width: auto; height: 60px;
    border-left: 0; border-top: 1px dashed rgba(27, 165, 196, 0.4);
    background: linear-gradient(to bottom, transparent, rgba(27, 165, 196, 0.08));
    margin: 0 var(--gutter);
  }
  .timeline__present span { writing-mode: horizontal-tb; }
}

@media (max-width: 640px) {
  .hero__title { font-size: clamp(52px, 16vw, 96px); }
  .hero__copy { bottom: clamp(64px, 10vh, 110px); }
  .hero__ctas .btn { padding: 14px 26px; font-size: 12px; }
  .stats__inner { grid-template-columns: 1fr; }
  .pillar { right: var(--gutter); max-width: none; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .grain { display: none; }
  .hero__scrollcue { display: none; }
  .pillar { opacity: 1 !important; visibility: visible !important; position: relative; left: auto; bottom: auto; margin: 40px var(--gutter); }
  .pillars__pin { height: auto; padding: 80px 0; display: block; }
  .pillars__intro { position: relative; top: auto; margin: 0 var(--gutter) 20px; }
  .pillars__media { position: absolute; }
  .timeline__pin { height: auto; display: block; overflow: visible; }
  .timeline__track { flex-wrap: wrap; padding-right: var(--gutter); }
  .timeline__present { display: none; }
  .hero__cutout { display: none; }
}

/* JS-driven helper states */
.no-scroll { overflow: hidden; }