/* ==========================================================================
   304 Angel Fund — site styles
   Palette sampled from the official logo: navy #2A3F55, sand #CEC3A7,
   steel #405C79. The legacy site shipped Divi's default blue and never used
   these.
   ========================================================================== */

/* ── tokens ─────────────────────────────────────────────────────────────── */

:root {
  /* Navy scale, darkest to lightest. */
  --ink-900: #0b121b;
  --ink-850: #0e1723;
  --ink-800: #101a26;
  --ink-700: #16222f;
  --ink-600: #1d2e3f;
  --ink-500: #2a3f55; /* brand navy */
  --ink-400: #405c79; /* brand steel */
  --ink-300: #5f7a94;
  --ink-200: #8ba0b4;

  /* Sand scale. */
  --sand-700: #a1957a;
  --sand-600: #b8ad91;
  --sand-500: #cec3a7; /* brand sand */
  --sand-400: #dbd2bd;
  --sand-300: #e7e0d0;
  --gold: #c99a4b;

  --paper: #f7f5f0;
  --paper-2: #efebe2;
  --paper-3: #e4dfd3;

  /* Semantic roles. */
  --bg: var(--paper);
  --fg: var(--ink-900);
  --fg-muted: #56636f;
  --rule: rgba(11, 18, 27, 0.1);

  --font-display: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fluid type scale. */
  --t-hero: clamp(2.85rem, 1.2rem + 6.6vw, 7rem);
  --t-h2: clamp(2rem, 1.1rem + 3.1vw, 3.75rem);
  --t-h3: clamp(1.16rem, 1rem + 0.55vw, 1.5rem);
  --t-lede: clamp(1.03rem, 0.95rem + 0.42vw, 1.28rem);
  --t-body: clamp(0.97rem, 0.93rem + 0.18vw, 1.06rem);
  --t-small: 0.85rem;
  --t-micro: 0.72rem;

  --shell: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-y: clamp(4.5rem, 9vw, 9.5rem);

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;

  --shadow-sm: 0 1px 2px rgba(11, 18, 27, 0.06), 0 4px 14px rgba(11, 18, 27, 0.05);
  --shadow-md: 0 2px 6px rgba(11, 18, 27, 0.07), 0 18px 44px rgba(11, 18, 27, 0.09);
  --shadow-lg: 0 4px 12px rgba(11, 18, 27, 0.09), 0 34px 80px rgba(11, 18, 27, 0.14);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.55s;

  --header-h: 74px;
}

/* ── reset ──────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Keeps a hyphenated phrase from breaking at its hyphen, which reads as a typo. */
.nowrap { white-space: nowrap; }

/* The UA rule for [hidden] is display:none at the lowest possible specificity,
   so any component rule that sets display silently defeats it. Restate it. */
[hidden] { display: none !important; }

.sr-only {
  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;
}

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  padding: 0.7rem 1.1rem; border-radius: var(--r-sm);
  background: var(--ink-900); color: var(--sand-400);
  font-size: var(--t-small); font-weight: 600;
  transform: translateY(-160%);
  transition: transform 0.25s var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ── layout primitives ──────────────────────────────────────────────────── */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-y);
  overflow: clip;
}

.section-light { background: var(--paper); color: var(--ink-900); }

.section-dark {
  background: var(--ink-900);
  color: var(--paper);
  --fg-muted: #9aa9b8;
  --rule: rgba(206, 195, 167, 0.16);
}

/* Hairline between adjacent light sections keeps the rhythm without a heavy border. */
.section-light + .section-light { border-top: 1px solid var(--rule); }

.section-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section-head-center { margin-inline: auto; text-align: center; }

.section-title { font-size: var(--t-h2); margin-bottom: 1rem; }
.section-title em { font-style: italic; color: var(--sand-600); }

.section-lede {
  font-size: var(--t-lede);
  color: var(--fg-muted);
  line-height: 1.6;
  max-width: 58ch;
}
.section-head-center .section-lede { margin-inline: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin: 0 0 1.1rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sand-700);
}
.section-dark .eyebrow { color: var(--sand-500); }

.eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(201, 154, 75, 0.18);
}

/* ── buttons ────────────────────────────────────────────────────────────── */

.btn {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  --btn-border: transparent;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.72rem 1.35rem;
  border: 1px solid var(--btn-border);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease),
              background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.btn svg { transition: transform 0.35s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px) scale(0.99); }

.btn-lg { padding: 0.95rem 1.75rem; font-size: 0.95rem; }
.btn-block { width: 100%; }

.btn-primary {
  --btn-bg: var(--sand-500);
  --btn-fg: var(--ink-900);
  --btn-border: var(--sand-500);
  box-shadow: 0 1px 2px rgba(11, 18, 27, 0.16), 0 10px 26px rgba(206, 195, 167, 0.22);
}
.btn-primary:hover {
  --btn-bg: var(--sand-300);
  --btn-border: var(--sand-300);
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(11, 18, 27, 0.2), 0 18px 40px rgba(206, 195, 167, 0.3);
}

.btn-outline {
  --btn-fg: var(--paper);
  --btn-border: rgba(206, 195, 167, 0.4);
  backdrop-filter: blur(6px);
  background: rgba(11, 18, 27, 0.28);
}
.btn-outline:hover {
  --btn-border: var(--sand-500);
  background: rgba(206, 195, 167, 0.12);
  transform: translateY(-2px);
}

.btn-ghost { --btn-fg: inherit; opacity: 0.82; }
.btn-ghost:hover { opacity: 1; }

/* ── header ─────────────────────────────────────────────────────────────── */

.scroll-progress {
  position: fixed; inset: 0 0 auto; z-index: 120;
  height: 2px; background: transparent; pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--sand-600), var(--gold));
  transition: width 0.12s linear;
}

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 110;
  transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease),
              border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(11, 18, 27, 0.82);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: rgba(206, 195, 167, 0.14);
  box-shadow: 0 12px 40px rgba(11, 18, 27, 0.28);
}

.header-inner {
  display: flex; align-items: center; gap: 1.5rem;
  height: var(--header-h);
}

.brand { flex-shrink: 0; display: flex; align-items: center; }
.brand-mark {
  width: auto; height: 30px;
  /* The wordmark PNG is dark navy; invert-free brightening keeps it legible on
     the dark header without shipping a second asset. */
  filter: brightness(0) saturate(100%) invert(88%) sepia(13%) saturate(390%) hue-rotate(4deg) brightness(94%) contrast(88%);
  transition: opacity 0.3s var(--ease);
}
.brand:hover .brand-mark { opacity: 0.82; }

.primary-nav {
  position: relative;
  display: none; align-items: center; gap: 0.35rem;
  margin-inline: auto;
}
.primary-nav a {
  position: relative; z-index: 1;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  font-size: var(--t-small);
  font-weight: 500;
  color: rgba(247, 245, 240, 0.72);
  transition: color 0.3s var(--ease);
}
.primary-nav a:hover { color: var(--paper); }
.primary-nav a.is-active { color: var(--ink-900); }

.nav-indicator {
  position: absolute; z-index: 0; top: 50%; left: 0;
  height: 34px; width: 0;
  border-radius: 999px;
  background: var(--sand-500);
  transform: translateY(-50%);
  opacity: 0;
  transition: transform 0.45s var(--ease-out), width 0.45s var(--ease-out), opacity 0.3s var(--ease);
}

.header-actions { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }
.header-login { display: none; color: rgba(247, 245, 240, 0.78); }
.header-login:hover { color: var(--paper); }

.menu-toggle {
  display: grid; place-content: center; gap: 5px;
  width: 42px; height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(206, 195, 167, 0.28);
}
.menu-toggle span {
  display: block; width: 17px; height: 1.5px;
  background: var(--sand-400);
  transition: transform 0.35s var(--ease-out), opacity 0.25s var(--ease);
}
.menu-toggle[aria-expanded='true'] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-toggle[aria-expanded='true'] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.mobile-menu {
  padding: 1rem var(--gutter) 2rem;
  background: rgba(11, 18, 27, 0.97);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(206, 195, 167, 0.14);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu nav { display: grid; gap: 0.15rem; margin-bottom: 1.25rem; }
.mobile-menu nav a {
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(206, 195, 167, 0.1);
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--paper);
}
.mobile-menu-actions { display: grid; gap: 0.6rem; }
.mobile-menu-actions .btn-ghost {
  border-color: rgba(206, 195, 167, 0.3);
  border-style: solid;
  color: var(--sand-400);
}

@media (min-width: 900px) {
  .primary-nav { display: flex; }
  .header-login { display: inline-flex; }
  .menu-toggle { display: none; }
}

/* ── hero ───────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: min(100svh, 940px);
  display: flex; flex-direction: column; justify-content: center;
  padding-block: calc(var(--header-h) + 4rem) 6rem;
  background: var(--ink-900);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
}

/* A real West Virginia dawn behind the drawn ridgelines.
 *
 * The photograph occupies a band at the top rather than the whole hero. The
 * ridgelines are opaque from roughly 43% down, so anything below that is never
 * seen — and sizing the band to the part that shows keeps `cover` from having
 * to crop a 2.85:1 panorama into a portrait box on a phone, which would zoom
 * past the vista entirely. Narrow viewports get their own frame for the same
 * reason: the wide plate has no portrait crop worth looking at. */
/* The photograph is the hero. It occupies a band across the top and dissolves
 * into the section's navy toward the bottom, where the CTAs and figures sit.
 * The band is sized to the photo's own 2.85:1 shape so `cover` never has to
 * zoom past the vista; below it is flat navy, so the dissolve has to land on
 * exactly --ink-900 or a seam shows. */
.hero-photo {
  position: absolute; inset: 0 0 auto; z-index: -2;
  height: 64%;
  background: url('/assets/img/photos/wv-hero.jpg') center top / cover no-repeat;
}
.hero-photo::after {
  content: ''; position: absolute; inset: auto 0 0; height: 62%;
  background: linear-gradient(180deg,
    rgba(11, 18, 27, 0) 0%,
    rgba(11, 18, 27, 0.5) 55%,
    var(--ink-900) 100%);
}
@media (max-width: 700px) {
  .hero-photo {
    height: 48%;
    background-image: url('/assets/img/photos/wv-hero-narrow.jpg');
  }
}

/* The veil used to be a blanket wash, which was free when the plate behind it
 * was an abstract dark ridgeline. Over a photograph it just buries the picture:
 * at 0.86 across the top there was nothing left to see. So it protects the text
 * column instead of the frame — dark down the left where the headline sits,
 * opening up across the right where the sun and the fog are.
 *
 * The two brand-tinted radials that used to sit here are gone. They existed to
 * put some color temperature into a flat navy plate, and the photograph now
 * supplies more than they ever did. */
.hero-veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(96deg,
      rgba(11, 18, 27, 0.92) 0%,
      rgba(11, 18, 27, 0.8) 28%,
      rgba(11, 18, 27, 0.46) 56%,
      rgba(11, 18, 27, 0.14) 78%,
      rgba(11, 18, 27, 0.04) 100%),
    linear-gradient(180deg,
      rgba(11, 18, 27, 0.55) 0%,
      rgba(11, 18, 27, 0.1) 24%,
      rgba(11, 18, 27, 0.08) 58%,
      rgba(11, 18, 27, 0.5) 100%);
}
/* Below the breakpoint the copy runs the full width, so there is no clear side
   to open up — the scrim goes vertical and the photograph reads above the type
   rather than beside it. */
@media (max-width: 860px) {
  .hero-veil {
    background: linear-gradient(180deg,
      rgba(11, 18, 27, 0.66) 0%,
      rgba(11, 18, 27, 0.4) 22%,
      rgba(11, 18, 27, 0.76) 42%,
      rgba(11, 18, 27, 0.9) 58%,
      rgba(11, 18, 27, 0.84) 100%);
  }
}

.hero-inner { position: relative; z-index: 1; }

/* A step lighter than the section eyebrows, which sit on flat ground. This one
   sits on a photograph, and brand sand measured 3.6:1 against the bright haze
   on a phone — under the floor for text this small. */
.hero-eyebrow { color: var(--sand-300); }

.hero-title {
  max-width: 15ch;
  margin-bottom: 1.5rem;
  font-size: var(--t-hero);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.hero-title .word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.hero-title .word > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 0.95s var(--ease-out) var(--d, 0ms);
}
.hero.is-ready .hero-title .word > span { transform: translateY(0); }
/* Emphasize the payoff word without a color that fights the CTA. */
.hero-title .word:last-child > span { font-style: italic; color: var(--sand-400); }

.hero-lede {
  max-width: 46ch;
  margin-bottom: 2.5rem;
  font-size: var(--t-lede);
  color: rgba(247, 245, 240, 0.78);
}
.hero-aside {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--t-small);
  color: rgba(247, 245, 240, 0.45);
  font-style: italic;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: clamp(3rem, 7vw, 5.5rem); }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem 1rem;
  margin: 0;
  padding-top: 1.9rem;
  border-top: 1px solid rgba(206, 195, 167, 0.18);
  max-width: 720px;
}
.hero-stats dt {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(206, 195, 167, 0.72);
  margin-bottom: 0.25rem;
}
.hero-stats dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.2rem + 2vw, 2.9rem);
  font-weight: 300;
  line-height: 1;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 700px) { .hero-stats { grid-template-columns: repeat(4, 1fr); } }

.scroll-cue {
  position: absolute; z-index: 2; left: 50%; bottom: 1.75rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(206, 195, 167, 0.6);
  transition: color 0.3s var(--ease);
}
.scroll-cue:hover { color: var(--sand-400); }
.scroll-cue-line {
  position: relative;
  width: 1px; height: 44px;
  background: rgba(206, 195, 167, 0.24);
  overflow: hidden;
}
.scroll-cue-line::after {
  content: ''; position: absolute; inset: 0 auto auto 0;
  width: 100%; height: 40%;
  background: var(--sand-400);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(280%); }
}

/* ── ticker ─────────────────────────────────────────────────────────────── */

.ticker {
  padding-block: 1.1rem;
  background: var(--ink-800);
  border-block: 1px solid rgba(206, 195, 167, 0.12);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track {
  display: flex; align-items: center; gap: 2.2rem;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.ticker-track span {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(206, 195, 167, 0.66);
  white-space: nowrap;
}
.ticker-track i { color: var(--gold); font-size: 0.5rem; font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── cards + spotlight ──────────────────────────────────────────────────── */

.card {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease), border-color 0.4s var(--ease);
}
.section-dark .card { background: var(--ink-800); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(206, 195, 167, 0.5); }

/* Pointer-tracked wash; --mx/--my are written by site.js. */
[data-spotlight]::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(201, 154, 75, 0.11), transparent 62%);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
}
[data-spotlight]:hover::before { opacity: 1; }

/* ── pillars ────────────────────────────────────────────────────────────── */

.pillars {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.pillar { display: flex; flex-direction: column; }
.pillar-num {
  display: block;
  margin-bottom: 1.4rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  color: var(--gold);
}
.pillar h3 { font-size: var(--t-h3); margin-bottom: 0.8rem; }
.pillar p { color: var(--fg-muted); }

/* ── numbers ────────────────────────────────────────────────────────────── */

.topo-wash {
  position: absolute; inset: 0;
  background: url('/assets/img/topo.svg') center / 780px repeat;
  opacity: 0.05;
  pointer-events: none;
}

/* ── photographic section backgrounds ───────────────────────────────────── */

.has-photo { isolation: isolate; }

/*
 * Secondary text has to be lighter over a photograph than over flat navy. At
 * the section's muted gray it measured ~3.1:1 against the brightest sky in the
 * bridge frame, under the 4.5:1 floor; this clears it with margin.
 */
.section-dark.has-photo { --fg-muted: #d2dbe3; }

.photo-bg {
  position: absolute; inset: 0; z-index: -2;
  background-image: var(--photo);
  background-size: cover;
  background-position: center;
}

/*
 * Scrim tuned by measurement, not by feel: the text sitting on it needs 4.5:1,
 * and the photograph is here for its color, so the middle band stays light.
 * Heavy top and bottom stops blend into the adjacent dark sections.
 */
.photo-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(11, 18, 27, 0.97) 0%,
      rgba(11, 18, 27, 0.74) 14%,
      rgba(11, 18, 27, 0.52) 42%,
      rgba(11, 18, 27, 0.6) 68%,
      rgba(11, 18, 27, 0.97) 100%);
}
/* A soft vignette behind the copy keeps text readable wherever the photograph
   happens to be bright. Aimed per section, because the stat grid is centered and
   the process timeline is a left-hand column — one shared blob misses both.
   The timeline lands in the scrim's own lightest band (0.52 at 42%), where the
   step headings measured 4.04:1 against the sky over the bridge. */
.photo-scrim::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(70% 46% at 50% 62%, rgba(11, 18, 27, 0.62), transparent 72%);
}
.process .photo-scrim::after {
  background: radial-gradient(76% 62% at 34% 56%, rgba(11, 18, 27, 0.66), transparent 76%);
}

.numbers .shell { position: relative; }

.mead {
  max-width: 60ch;
  margin: 0 auto clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}
.mead p {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 0.95rem + 1.1vw, 1.75rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.45;
  color: rgba(247, 245, 240, 0.9);
}
.mead cite {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sand-500);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(206, 195, 167, 0.16);
  border: 1px solid rgba(206, 195, 167, 0.16);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (min-width: 760px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }

.stat {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: clamp(1.8rem, 4vw, 2.8rem) 1rem;
  background: var(--ink-900);
  transition: background-color 0.45s var(--ease);
}
.stat:hover { background: var(--ink-800); }
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.6rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--sand-400);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(247, 245, 240, 0.6);
  text-align: center;
}
.stat-footnote {
  margin-top: 1.4rem;
  font-size: var(--t-small);
  color: rgba(247, 245, 240, 0.45);
  text-align: center;
}

/* ── filmstrip ──────────────────────────────────────────────────────────── */

.filmstrip {
  display: grid;
  gap: 0.75rem;
  border-radius: var(--r-xl);
}

.panel {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 190px;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--ink-700);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
  transition: flex-grow 0.7s var(--ease-out), min-height 0.6s var(--ease-out), box-shadow 0.5s var(--ease);
}
.panel:hover { box-shadow: var(--shadow-md); }

.panel-hit { position: absolute; inset: 0; z-index: 3; width: 100%; }

.panel-plate {
  position: absolute; inset: 0; z-index: -1;
  background-image: var(--plate);
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  transition: transform 1.1s var(--ease-out), opacity 0.6s var(--ease);
  opacity: 0.85;
}
.panel.is-open .panel-plate { transform: scale(1); opacity: 1; }
/* Ambient wash only. The scrim that actually protects the text lives on
   .panel-body — see the note there. */
.panel::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(11, 18, 27, 0.08) 0%,
    rgba(11, 18, 27, 0.3) 100%);
}

/* The scrim has to be measured from the text, not from the panel.
 *
 * It used to be a percentage gradient on .panel, which works only while the
 * panel is a predictable height: on desktop the text lands inside the dark
 * 74–100% band. On a phone the panel grows to fit the open thesis, so the
 * title rides up to around the halfway mark where the gradient is barely a
 * third opaque — the Industrial and High-growth headings measured 2.1:1 and
 * 2.2:1 against their photographs, under even the 3:1 large-text floor.
 *
 * Anchoring the gradient to .panel-body, which is sized by its own content and
 * pinned to the bottom, makes the dark band track the text at any height. */
.panel-body {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  margin-top: auto;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  padding-top: 4.5rem;
  background: linear-gradient(180deg,
    rgba(11, 18, 27, 0) 0%,
    rgba(11, 18, 27, 0.58) 32%,
    rgba(11, 18, 27, 0.9) 62%,
    rgba(11, 18, 27, 0.96) 100%);
}
/* Each thesis carries its own accent, set inline as --accent, so the three
   panels read as distinct without three different layouts. */
.panel-index {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  color: var(--accent, var(--gold));
  margin-bottom: 0.7rem;
}
.panel::before {
  content: ''; position: absolute; z-index: 2; inset: 0 0 auto;
  height: 3px;
  background: var(--accent, var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out);
}
.panel.is-open::before { transform: scaleX(1); }
.panel-title {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem);
  margin-bottom: 0.7rem;
}
.panel-copy {
  max-width: 46ch;
  color: rgba(247, 245, 240, 0.78);
  font-size: var(--t-small);
  line-height: 1.62;
  opacity: 0;
  max-height: 0;
  transform: translateY(8px);
  transition: opacity 0.45s var(--ease) 0.1s, transform 0.5s var(--ease-out) 0.1s, max-height 0.6s var(--ease-out);
  overflow: hidden;
}
.panel.is-open .panel-copy { opacity: 1; max-height: 24em; transform: translateY(0); }

@media (min-width: 940px) {
  .filmstrip { display: flex; min-height: 500px; }
  .panel { flex: 1 1 0; min-height: auto; }
  .panel.is-open { flex-grow: 2.8; }
  /* A collapsed panel is narrow — shrink its title so it stops wrapping badly. */
  .panel:not(.is-open) .panel-title { font-size: 1.22rem; }
  .panel:not(.is-open) .panel-body { padding-inline: 1.4rem; }
}

/* ── portfolio ──────────────────────────────────────────────────────────── */

.portfolio-grid {
  display: grid;
  gap: clamp(0.9rem, 1.8vw, 1.35rem);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.company {
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 2.4vw, 1.9rem);
}

.company-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1rem; }
.tag {
  padding: 0.18rem 0.55rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
}
/* The lead tag carries the thesis it sits under, in that thesis's accent. */
.tag-tech { border-color: rgba(62, 142, 138, 0.45); color: #2f7a76; background: rgba(62, 142, 138, 0.07); }
.tag-industrial { border-color: rgba(196, 111, 68, 0.45); color: #a85c34; background: rgba(196, 111, 68, 0.07); }
.tag-main { border-color: rgba(184, 138, 62, 0.5); color: #94702f; background: rgba(184, 138, 62, 0.08); }
.tag-media { border-color: rgba(110, 116, 168, 0.45); color: #5b5f92; background: rgba(110, 116, 168, 0.07); }

/* Every company mark sits in the same rounded, centered box between the tag
   row and the name, so the grid scans as one aligned system even though the
   marks themselves range from wide wordmarks to square icons. */
.company-logo-box {
  display: grid; place-items: center;
  height: 88px;
  margin-bottom: 1.1rem;
  padding: 0.9rem 1.2rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper);
}
/* Every mark is contained in the same 220x52 rect — explicit box plus
   object-fit, so small intrinsic sizes scale UP as well as down. (Shelfmark's
   SVG is 78x22 intrinsically and rendered at that size when the rule only
   capped maxima; and a percentage max-height resolves against an indefinite
   height here, silently becoming auto, which let square marks burst the box.) */
.company-logo {
  width: 100%;
  max-width: 220px;
  height: 52px;
  object-fit: contain;
}

.company h3 { font-size: 1.3rem; margin-bottom: 0.6rem; }
.company-copy { color: var(--fg-muted); font-size: var(--t-small); line-height: 1.62; }

.company-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 26px;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  /* These read as captions until they look like links: a link blue, an
     underline, and the external-link glyph that follows. 5.86:1 on the card. */
  color: #2e6294;
  text-decoration: underline;
  text-decoration-color: rgba(46, 98, 148, 0.4);
  text-underline-offset: 3px;
  transition: color 0.3s var(--ease), text-decoration-color 0.3s var(--ease);
}
.company-link:hover { color: var(--ink-900); text-decoration-color: currentColor; }
/* Marks the jump to another site, and sits after the label rather than before
   it, so the leading icon stays the "what kind of destination" cue. */
.company-link .ext-icon { flex: none; opacity: 0.75; transition: transform 0.3s var(--ease-out); }
.company-link:hover .ext-icon { transform: translate(1px, -1px); opacity: 1; }

/* The icon leads the label now, so the old translateX would have slid it into
 * the text. A small lift reads as the same affordance without the collision. */
.link-icon { flex: none; transition: transform 0.35s var(--ease-out); }
.company-link:hover .link-icon { transform: translateY(-2px); }

/* The Green Door has no website, so that card carries two social links instead
 * of one. The row takes over the spacing a lone .company-link sets on itself. */
.company-links {
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem;
  margin-top: auto; padding-top: 1.1rem;
}
.company-links .company-link { margin-top: 0; padding-top: 0; }

/* ── process timeline ───────────────────────────────────────────────────── */

.process .shell { position: relative; }

.timeline { position: relative; padding-left: 2.75rem; max-width: 780px; }

/* The track spans the full timeline because a div honors top+bottom; the fill
   is a scaleY transform rather than a height, so scrolling animates on the
   compositor instead of triggering layout on every frame. */
.timeline-rail {
  position: absolute; top: 12px; bottom: 12px; left: 0;
  width: 2px;
  border-radius: 999px;
  background: rgba(206, 195, 167, 0.18);
  overflow: hidden;
}
.rail-fill {
  display: block;
  width: 100%; height: 100%;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.25s linear;
}

.step { position: relative; padding-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.step:last-child { padding-bottom: 0; }

.step-dot {
  position: absolute; left: -2.75rem; top: 6px;
  width: 13px; height: 13px;
  margin-left: -4.5px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: var(--ink-900);
  transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease-out);
}
.step.is-visible .step-dot {
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(201, 154, 75, 0.16);
  transform: scale(1.1);
}

.step-index {
  display: block;
  margin-bottom: 0.55rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sand-500);
}
.step-body h3 { font-size: var(--t-h3); margin-bottom: 0.6rem; }
.step-body p { color: rgba(247, 245, 240, 0.7); max-width: 56ch; }

/* ── apply ──────────────────────────────────────────────────────────────── */

.apply-card {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding: clamp(1.9rem, 4vw, 3.5rem);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, #fff 0%, var(--paper-2) 100%);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  position: relative;
}
@media (min-width: 900px) { .apply-card { grid-template-columns: 1.05fr 0.95fr; align-items: center; } }

.apply-card .section-title { margin-bottom: 0.85rem; }
.apply-points { display: grid; gap: 0.6rem; margin-top: 1.6rem; }
.apply-points li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--t-small);
  color: var(--fg-muted);
}
.apply-points li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
}

.apply-actions { display: grid; gap: 1.1rem; align-content: center; }

/* The FundOps homepage in a small browser frame, so the handoff destination is
   recognizable before anyone clicks. */
/* A real link to the same place as the CTA below — it looked pressable, so it
   should press. It stays visually quieter than the CTA: no shadow at rest, and
   it lifts only half as far on hover. aria-hidden + tabindex="-1" keep it out
   of the accessibility tree, since the CTA right below is the same
   destination and a screen reader should hear it once. */
.apply-partner {
  display: block;
  margin: 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #fff;
  transition: transform 0.35s var(--ease-out), border-color 0.35s var(--ease),
              box-shadow 0.35s var(--ease);
}
.apply-partner:hover { transform: translateY(-2px); border-color: var(--sand-600); box-shadow: var(--shadow-sm); }
.apply-partner-chrome {
  display: flex; gap: 5px;
  padding: 0.55rem 0.8rem;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
}
.apply-partner-chrome i {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(11, 18, 27, 0.14);
}
.apply-partner > img { display: block; width: 100%; height: auto; }
.apply-partner-foot { color: var(--fg-muted); }
.apply-partner-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding: 0.7rem 0.9rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-micro);
  color: var(--fg-muted);
}
.apply-partner-logo { width: auto; height: 20px; }

/* One action now that the video round is gone, so it carries the column on its
   own and is sized accordingly. */
.apply-primary, .apply-secondary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 2.1rem 2rem;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease),
              background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.apply-primary {
  background: var(--ink-900);
  color: var(--paper);
  box-shadow: var(--shadow-sm);
}
/* The screenshot above competes for the eye, so the real CTA breathes: a slow
   sand halo that says "this is the button". It stops on hover — once the
   pointer is here the prompt has done its job — and never runs at all under
   prefers-reduced-motion, where the shadow alone carries the emphasis. */
@keyframes apply-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(206, 195, 167, 0), var(--shadow-sm); }
  50%      { box-shadow: 0 0 0 10px rgba(206, 195, 167, 0.28), var(--shadow-md); }
}
.apply-primary { animation: apply-pulse 2.8s var(--ease) 1.2s infinite; }
.apply-primary:hover, .apply-primary:focus-visible { animation-play-state: paused; }
.apply-primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); background: var(--ink-700); }
.apply-primary svg { color: var(--sand-400); }

.apply-secondary {
  background: #fff;
  border-color: var(--rule);
  color: var(--ink-900);
}
.apply-secondary:hover { transform: translateY(-3px); border-color: var(--sand-600); box-shadow: var(--shadow-sm); }

.apply-primary-label, .apply-secondary-label { display: grid; gap: 0.3rem; }
.apply-primary-label strong, .apply-secondary-label strong { font-size: 1.18rem; font-weight: 600; }
.apply-primary-label small { color: rgba(247, 245, 240, 0.6); font-size: var(--t-micro); }
.apply-secondary-label small { color: var(--fg-muted); font-size: var(--t-micro); }
.apply-primary svg, .apply-secondary svg { flex-shrink: 0; transition: transform 0.35s var(--ease-out); }
.apply-primary:hover svg, .apply-secondary:hover svg { transform: translateX(4px); }

/* ── carousel ───────────────────────────────────────────────────────────── */

.carousel { max-width: 860px; margin-inline: auto; }
.carousel-viewport { position: relative; }

.carousel-track { display: grid; }
.quote {
  grid-area: 1 / 1;
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease), transform 0.65s var(--ease-out);
  pointer-events: none;
}
.quote.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }

.quote p {
  font-family: var(--font-display);
  font-size: clamp(1.18rem, 0.95rem + 1.15vw, 1.85rem);
  font-weight: 300;
  line-height: 1.45;
  color: rgba(247, 245, 240, 0.92);
}
/* An oversized opening mark above the quote reads cleaner than inline marks
   glued to the first and last words. */
.carousel-viewport::before {
  content: '“';
  display: block;
  margin-bottom: -0.35em;
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--sand-600);
  opacity: 0.4;
  text-align: center;
}

.quote footer { margin-top: 1.6rem; display: grid; gap: 0.15rem; }
.quote footer strong { font-size: var(--t-small); font-weight: 600; color: var(--sand-400); }
.quote footer span {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 245, 240, 0.45);
}

.carousel-controls {
  display: flex; align-items: center; justify-content: center; gap: 1.25rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.carousel-btn {
  display: grid; place-content: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(206, 195, 167, 0.26);
  color: var(--sand-400);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), transform 0.3s var(--ease-out);
}
.carousel-btn:hover { border-color: var(--sand-500); background: rgba(206, 195, 167, 0.1); transform: scale(1.06); }

.carousel-dots { display: flex; gap: 0.5rem; }
/* The dot is a 3px bar, which is nowhere near a thumb. The button keeps a
   24px-tall hit area and paints the bar in its content box instead. */
.carousel-dots button {
  width: 30px; height: 24px;
  padding-block: 10.5px;
  background: rgba(206, 195, 167, 0.24);
  background-clip: content-box;
  border-radius: 999px;
  transition: background-color 0.35s var(--ease), width 0.35s var(--ease-out);
}
.carousel-dots button[aria-selected='true'] { background: var(--gold); background-clip: content-box; width: 46px; }

/* ── committee ──────────────────────────────────────────────────────────── */

/* Five members: an auto-fit grid strands the fifth on its own row, so the
   column count is stepped explicitly to always land on a full row. */
.members {
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.35rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 680px) { .members { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .members { grid-template-columns: repeat(5, 1fr); } }
.member { display: flex; flex-direction: column; text-align: left; }
/* Sized up from 66px now that real headshots are in — a photographed face needs
   the room, and the monogram fallback reads fine at either size. */
.member-avatar {
  position: relative;
  display: grid; place-content: center;
  width: 92px; height: 92px;
  margin-bottom: 1.2rem;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--ink-500), var(--ink-700));
  box-shadow: 0 2px 10px rgba(11, 18, 27, 0.14);
  overflow: hidden;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease);
}
.member:hover .member-avatar {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 20px rgba(11, 18, 27, 0.2);
}
.member-avatar span {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--sand-400);
}
/* Present only once a real headshot is dropped in; until then the monogram
   underneath shows through. */
.member-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.member h3 { font-size: 1.16rem; margin-bottom: 0.35rem; }
.member p { font-size: var(--t-small); color: var(--fg-muted); }

.member-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  /* Pinned to the bottom so the links line up across a row whose names wrap to
     different depths, which they do at every width below about 1080px. */
  margin-top: auto;
  padding-top: 0.85rem;
  min-height: calc(24px + 0.85rem);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-400);
  transition: color 0.25s var(--ease);
}
.member-link:hover { color: var(--gold); }

/* ── investors ──────────────────────────────────────────────────────────── */

/* A warm aurora behind the membership section so the page does not end on a
   flat navy — color without another photograph. */
.investors::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(64% 52% at 14% 12%, rgba(201, 154, 75, 0.16), transparent 66%),
    radial-gradient(58% 48% at 88% 78%, rgba(62, 142, 138, 0.15), transparent 64%),
    radial-gradient(78% 62% at 50% 108%, rgba(64, 92, 121, 0.28), transparent 70%);
  pointer-events: none;
}

.investors-grid {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}
/* One column since the form moved out. A single 62ch measure reads better here
   than a wide band of text with empty space where the form used to be. */
.investors-copy { max-width: 62ch; }
.investors-cta { margin-top: 2rem; }
.investors-fineprint { max-width: 54ch; margin-top: 1.1rem; }

.investors-steps { display: grid; gap: 1rem; margin-top: 2rem; }
.investors-steps li {
  display: flex; gap: 0.9rem; align-items: flex-start;
  font-size: var(--t-small);
  color: rgba(247, 245, 240, 0.76);
}
.investors-steps span {
  flex-shrink: 0;
  display: grid; place-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(206, 195, 167, 0.35);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--sand-400);
}
.investors-note {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(206, 195, 167, 0.16);
  font-size: var(--t-small);
  color: rgba(247, 245, 240, 0.5);
}

.lead-form {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid rgba(206, 195, 167, 0.18);
  border-radius: var(--r-lg);
  background: rgba(16, 26, 38, 0.72);
  backdrop-filter: blur(10px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}
.lead-form-title { font-size: 1.35rem; margin-bottom: 1.4rem; }

.field { margin-bottom: 1rem; }
.field label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(206, 195, 167, 0.86);
}
.field .optional { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: 0.5; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 0.72rem 0.9rem;
  border: 1px solid rgba(206, 195, 167, 0.22);
  border-radius: var(--r-sm);
  background: rgba(11, 18, 27, 0.6);
  color: var(--paper);
  font-size: 0.95rem;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(247, 245, 240, 0.3); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--sand-500);
  background: rgba(11, 18, 27, 0.85);
  box-shadow: 0 0 0 3px rgba(206, 195, 167, 0.14);
}
.field textarea { resize: vertical; min-height: 84px; }

/* Native select chrome ignores the surrounding design, so it is reset and given
   the same caret in both form variants. The SVG is inline rather than a file
   because the stroke has to follow the theme. */
.field select {
  appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23cec3a7' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 15px;
  cursor: pointer;
}
.lead-form-light .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2394702f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
}
.field.has-error input, .field.has-error textarea { border-color: #e08a7a; }

.checkbox {
  display: flex; gap: 0.65rem; align-items: flex-start;
  margin: 1.1rem 0 1.5rem;
  font-size: var(--t-small);
  color: rgba(247, 245, 240, 0.76);
  cursor: pointer;
}
.checkbox input {
  flex-shrink: 0;
  width: 21px; height: 21px;
  margin-top: 0.18rem;
  accent-color: var(--sand-500);
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status {
  min-height: 1.4em;
  margin-top: 0.9rem;
  font-size: var(--t-small);
  text-align: center;
}
.form-status.is-ok { color: #8fd0a8; }
.form-status.is-error { color: #e8a294; }

.form-fineprint {
  margin-top: 1rem;
  font-size: var(--t-micro);
  line-height: 1.55;
  color: rgba(247, 245, 240, 0.38);
}

/* ── contact ────────────────────────────────────────────────────────────── */

.contact-grid { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 0.8fr; } }

.contact-alt {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  color: var(--fg-muted);
}
.contact-alt a { border-bottom: 1px solid var(--rule); transition: color 0.25s var(--ease), border-color 0.25s var(--ease); }
.contact-alt a:hover { color: var(--gold); border-color: var(--gold); }

/* The investor form lives on a dark section; this one is on paper. */
.lead-form-light {
  background: #fff;
  border-color: var(--rule);
  backdrop-filter: none;
  box-shadow: var(--shadow-md);
}
.lead-form-light .lead-form-title { color: var(--ink-900); }
.lead-form-light .field label { color: var(--sand-700); }
.lead-form-light .field input,
.lead-form-light .field textarea,
.lead-form-light .field select {
  background: var(--paper);
  border-color: var(--rule);
  color: var(--ink-900);
}
.lead-form-light .field input:focus,
.lead-form-light .field textarea:focus,
.lead-form-light .field select:focus {
  background: #fff;
  border-color: var(--sand-600);
  box-shadow: 0 0 0 3px rgba(206, 195, 167, 0.3);
}
.lead-form-light .checkbox { color: var(--ink-700); }
.lead-form-light .form-fineprint { color: rgba(11, 18, 27, 0.5); }
.lead-form-light .form-status.is-ok { color: #1f7a4d; }
.lead-form-light .form-status.is-error { color: #b4472f; }

/* ── footer ─────────────────────────────────────────────────────────────── */

.site-footer {
  position: relative;
  padding-top: clamp(4rem, 8vw, 7rem);
  background: var(--ink-850);
  color: var(--paper);
  overflow: hidden;
}
.footer-ridge {
  position: absolute; inset: auto 0 0;
  height: 180px;
  background: url('/assets/img/ridge.svg') center bottom / cover no-repeat;
  opacity: 0.16;
  pointer-events: none;
}

.footer-inner {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}
@media (min-width: 820px) { .footer-inner { grid-template-columns: 1fr 1.35fr; } }

.footer-logo { width: 108px; height: auto; margin-bottom: 1.4rem; }
.footer-tagline {
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 300;
  line-height: 1.45;
  color: var(--sand-400);
}

.socials { display: flex; gap: 0.5rem; margin-top: 1.5rem; }
.socials a {
  display: grid; place-content: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(206, 195, 167, 0.24);
  border-radius: 50%;
  color: var(--sand-500);
  transition: border-color 0.28s var(--ease), background-color 0.28s var(--ease),
              color 0.28s var(--ease), transform 0.28s var(--ease-out);
}
.socials a:hover {
  border-color: var(--sand-500);
  background: rgba(206, 195, 167, 0.12);
  color: var(--sand-300);
  transform: translateY(-2px);
}

.footer-nav { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.footer-nav h4 {
  margin-bottom: 1rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sand-600);
}
.footer-nav a {
  display: block;
  padding: 0.3rem 0;
  font-size: var(--t-small);
  color: rgba(247, 245, 240, 0.68);
  transition: color 0.25s var(--ease), transform 0.25s var(--ease-out);
}
.footer-nav a:hover { color: var(--paper); transform: translateX(3px); }

.footer-legal {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem;
  justify-content: space-between; align-items: baseline;
  padding-block: 1.6rem 2.25rem;
  border-top: 1px solid rgba(206, 195, 167, 0.14);
  font-size: var(--t-micro);
  color: rgba(247, 245, 240, 0.42);
}
.footer-disclaimer { max-width: 62ch; }
.credit { display: block; margin-top: 0.5rem; opacity: 0.72; }
.credit a { border-bottom: 1px solid rgba(247, 245, 240, 0.22); }
.credit a:hover { color: var(--sand-400); border-color: var(--sand-600); }

/* ── scroll reveal ──────────────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease) var(--delay, 0ms), transform 0.9s var(--ease-out) var(--delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; will-change: auto; }

/* ── reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Anything that starts hidden for an entrance animation must be visible. */
  /* The CTA keeps its emphasis from the shadow, not the animation. */
  .apply-primary { animation: none; }
  .reveal { opacity: 1; transform: none; }
  .hero-title .word > span { transform: none; }
  .panel-copy { opacity: 1; max-height: none; transform: none; }
  .quote { opacity: 0; }
  .quote.is-active { opacity: 1; transform: none; }
  .ticker-track { animation: none; }
  .scroll-cue-line::after { animation: none; transform: translateY(0); }
}

/* ── print ──────────────────────────────────────────────────────────────── */

@media print {
  .site-header, .scroll-cue, .ticker, .scroll-progress, .carousel-controls, .lead-form { display: none !important; }
  body { background: #fff; color: #000; }
  .section-dark { background: #fff; color: #000; }
  .reveal { opacity: 1; transform: none; }
}