/* =========================================================
   Palliser Grid — Global Stylesheet
   Prairie Modern · Editorial Serif × Institutional Sans
   ========================================================= */

:root {
  /* Palette — warmer near-black with bistre undertone */
  --amber: #FEB101;
  --amber-600: #E89E00;
  --amber-rust: #C65A00;
  --amber-dim: #8F6410;

  --bg: #16161A;            /* slightly warmer than pure neutral */
  --bg-2: #1C1C20;
  --paper: #1F1E1C;         /* warm paper-dark for editorial blocks */
  --surface: #2A2A2D;
  --surface-2: #232326;
  --surface-paper: #24221F;
  --border: #3A3A3E;
  --border-soft: #2A2A2D;
  --border-warm: #32302C;
  --hairline: rgba(254, 177, 1, 0.18);

  --snow: #F5F4F0;          /* warmer snow — paper white */
  --cloud: #E2E0DA;
  --silver: #9B9A94;
  --silver-dim: #6A6965;

  /* Spacing */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --s-32: 128px; --s-40: 160px;

  /* Type — tech-forward geometric sans (Stripe / Linear / Vercel direction) */
  --font-sans: 'Inter Tight', 'Inter', 'Helvetica Neue', Helvetica, system-ui, sans-serif;
  --font-display: 'Inter Tight', 'Inter', 'Helvetica Neue', Helvetica, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 22px;
  --text-xl: 28px;
  --text-2xl: 40px;
  --text-3xl: 56px;
  --text-hero: clamp(52px, 7.8vw, 108px);

  --radius: 3px;
  --radius-lg: 6px;

  --max-w: 1240px;
  --max-w-narrow: 880px;
  --max-w-editorial: 720px;

  --t-base: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-slow: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  background: var(--bg);
  color: var(--snow);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.65;
  font-feature-settings: "ss01", "cv11", "calt";
  overflow-x: hidden;
  position: relative;
}

/* Subtle paper grain on the whole body — the ledger/homestead deed feel */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  z-index: 1;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.85  0 0 0 0 0.5  0 0 0 0.95 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

img { max-width: 100%; display: block; }

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

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* =========================================================
   Type system — editorial serif for prose, sans for UI
   ========================================================= */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--snow);
  line-height: 1.04;
  letter-spacing: -0.028em;
  font-variation-settings: normal;
  font-style: normal;
}
h1 {
  font-size: var(--text-hero);
  letter-spacing: -0.045em;
  line-height: 0.95;
  font-weight: 600;
}
h2 {
  font-size: clamp(32px, 4.2vw, 64px);
  letter-spacing: -0.038em;
  line-height: 1.0;
  font-weight: 600;
}
h3 {
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: -0.022em;
  line-height: 1.2;
  font-weight: 600;
}
h4 {
  font-size: var(--text-md);
  letter-spacing: -0.012em;
  line-height: 1.3;
  font-weight: 600;
}

p { color: var(--cloud); letter-spacing: -0.008em; }

/* Neutralize ALL italics site-wide — modern tech sans has no italic moments */
em, .italic,
h1 em, h2 em, h3 em, h4 em,
.section-title em, .hero-title em {
  font-style: normal;
  font-variation-settings: normal;
}

/* Amber emphasis replaces italic — color is the emphasis, not slant */
h1 em, h2 em, h3 em,
.section-title em, .hero-title em {
  color: var(--amber);
  font-style: normal;
  font-weight: inherit;
}

::selection { background: var(--amber); color: #111; }

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

/* =========================================================
   Utilities
   ========================================================= */

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--s-6); position: relative; }
.container-narrow { max-width: var(--max-w-narrow); margin: 0 auto; padding: 0 var(--s-6); }
.container-editorial { max-width: var(--max-w-editorial); margin: 0 auto; padding: 0 var(--s-6); }

/* Eyebrow — monospace-adjacent numeral, tracked sans label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--amber);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  line-height: 1;
}
.eyebrow-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--amber);
  font-style: normal;
  font-feature-settings: "lnum", "tnum";
  text-transform: none;
  padding-right: var(--s-3);
  border-right: 1px solid var(--hairline);
}

.amber-bar {
  display: inline-block;
  width: 44px; height: 1px;
  background: var(--amber);
  margin-bottom: var(--s-5);
  vertical-align: middle;
}

/* Section title — geometric sans with amber tick */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  letter-spacing: -0.038em;
  line-height: 1.02;
  font-weight: 600;
  margin-bottom: var(--s-4);
  max-width: 22ch;
}
.section-title::after {
  content: '';
  display: block;
  width: 40px; height: 1px;
  background: var(--amber);
  margin-top: var(--s-6);
}

.text-silver { color: var(--silver); }
.text-cloud { color: var(--cloud); }
.text-amber { color: var(--amber); }

.tabular {
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.01em;
}

.lead {
  font-size: var(--text-md);
  color: var(--cloud);
  line-height: 1.55;
  max-width: 640px;
}

.smallcaps {
  font-variant: small-caps;
  letter-spacing: 0.08em;
  font-weight: 500;
}

/* Marginal rule — survey-line aesthetic */
.rule-survey {
  display: block;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border-warm) 18%, var(--border-warm) 82%, transparent);
  margin: var(--s-16) 0;
}

/* Sections */
section { position: relative; }
.section { padding: clamp(var(--s-20), 9vw, var(--s-32)) 0; }
.section-sm { padding: clamp(var(--s-12), 6vw, var(--s-20)) 0; }

.divider {
  height: 1px;
  background: var(--border-soft);
}

/* Skip link */
.skip-link {
  position: absolute; top: -100px; left: 16px;
  background: var(--amber); color: #000;
  padding: var(--s-3) var(--s-5);
  font-weight: 600; font-size: var(--text-sm);
  border-radius: var(--radius);
  z-index: 999;
  transition: top 0.2s var(--t-base);
}
.skip-link:focus { top: 16px; }

/* =========================================================
   Navigation — refined, warmer, hairline
   ========================================================= */

.site-header {
  position: sticky; top: 0; z-index: 80;
  background: rgba(22, 22, 26, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--t-base), background 0.3s var(--t-base);
}
.site-header.is-scrolled {
  border-bottom-color: var(--border-soft);
  background: rgba(22, 22, 26, 0.94);
}
.nav {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--s-5) var(--s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}
.nav-brand { display: flex; align-items: center; gap: var(--s-3); color: var(--snow); }
.nav-brand .logo-mark {
  flex: 0 0 auto;
  color: var(--snow);
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-brand:hover .logo-mark { transform: scale(1.04); }
.nav-brand .logo-mark rect[fill="#FEB101"] { transition: fill 220ms cubic-bezier(0.16, 1, 0.3, 1); }
.nav-brand .wordmark {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--snow);
  white-space: nowrap;
}
.nav-brand .wordmark-serif {
  font-family: var(--font-display);
  font-style: normal;
  font-variation-settings: normal;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--silver);
  text-transform: none;
  margin-left: 4px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  list-style: none;
}
.nav-links a {
  font-size: 13px;
  color: var(--cloud);
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 0.2s var(--t-base);
  position: relative;
  padding: 6px 0;
}
.nav-links a:hover { color: var(--snow); }
.nav-links a.active { color: var(--amber); }
.nav-links a.active::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--amber);
}
.nav-cta { display: inline-flex; align-items: center; gap: var(--s-2); }
.nav-hamburger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border-radius: var(--radius);
}
.nav-hamburger span {
  position: relative;
  width: 22px; height: 1.5px;
  background: var(--snow);
  transition: transform 0.3s var(--t-base), opacity 0.2s;
}
.nav-hamburger span::before,
.nav-hamburger span::after {
  content: ''; position: absolute; left: 0;
  width: 22px; height: 1.5px;
  background: var(--snow);
  transition: transform 0.3s var(--t-base), top 0.3s var(--t-base);
}
.nav-hamburger span::before { top: -7px; }
.nav-hamburger span::after { top: 7px; }
.nav-hamburger.is-open span { background: transparent; }
.nav-hamburger.is-open span::before { top: 0; transform: rotate(45deg); }
.nav-hamburger.is-open span::after { top: 0; transform: rotate(-45deg); }

/* Mobile drawer */
.nav-drawer {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 70;
  display: none;
  flex-direction: column;
  padding: 88px var(--s-6) var(--s-10);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--t-base), transform 0.35s var(--t-base);
}
.nav-drawer.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nav-drawer ul { list-style: none; display: flex; flex-direction: column; gap: var(--s-4); }
.nav-drawer a {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  font-variation-settings: normal;
  letter-spacing: -0.02em;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border-soft);
  display: block;
}
.nav-drawer a.active { color: var(--amber); }
.nav-drawer .btn { margin-top: var(--s-8); align-self: flex-start; }

@media (max-width: 960px) {
  .nav-links, .nav-cta { display: none !important; }
  .nav-hamburger { display: inline-flex; }
  .nav-drawer { display: flex; }
}

/* =========================================================
   Buttons
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 14px 22px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius);
  transition: transform 0.2s var(--t-base), background 0.2s var(--t-base),
              color 0.2s var(--t-base), border-color 0.2s var(--t-base),
              box-shadow 0.2s var(--t-base);
  line-height: 1;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--amber);
  color: #111;
  border: 1px solid var(--amber);
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 0 0 0 rgba(254,177,1,0.0);
}
.btn-primary:hover {
  background: var(--amber-600);
  border-color: var(--amber-600);
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 8px 22px -8px rgba(254,177,1,0.45);
}

.btn-outline {
  background: transparent;
  color: var(--amber);
  border: 1px solid var(--amber);
}
.btn-outline:hover { background: rgba(254, 177, 1, 0.08); }

.btn-ghost {
  background: transparent;
  color: var(--snow);
  border: 1px solid var(--border);
}
.btn-ghost:hover { border-color: var(--snow); }

.btn-sm { padding: 10px 16px; font-size: var(--text-xs); }

.arrow-link {
  color: var(--amber);
  font-weight: 600;
  font-size: var(--text-sm);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.01em;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--t-base);
}
.arrow-link::after {
  content: '→';
  transition: transform 0.2s var(--t-base);
  font-family: var(--font-sans);
}
.arrow-link:hover { border-bottom-color: var(--amber); }
.arrow-link:hover::after { transform: translateX(3px); }

/* =========================================================
   Hero — editorial dark
   ========================================================= */

.hero {
  position: relative;
  min-height: 94vh;
  display: flex;
  align-items: center;
  padding: var(--s-24) 0 var(--s-16);
  overflow: hidden;
  isolation: isolate;
}
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  background-image:
    radial-gradient(ellipse at 75% 95%, rgba(254, 177, 1, 0.22), transparent 55%),
    radial-gradient(ellipse at 5% 5%, rgba(198, 90, 0, 0.09), transparent 45%),
    linear-gradient(180deg, rgba(18,18,20,0.45) 0%, rgba(18,18,20,0.72) 55%, rgba(18,18,20,0.97) 100%);
}
.hero-bg-image {
  position: absolute; inset: 0; z-index: -3;
  background-size: cover;
  background-position: center 42%;
  filter: brightness(0.62) saturate(1.2) contrast(1.08);
  animation: heroDrift 40s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.04) translateY(0); }
  to { transform: scale(1.08) translateY(-1.5%); }
}
.hero-grid-overlay {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: linear-gradient(to bottom, black 0%, black 65%, transparent 100%);
}
.hero-noise {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Editorial dateline above the hero — subtle left-top corner mark */
.hero-dateline {
  position: absolute;
  top: calc(var(--s-24) - 8px);
  left: var(--s-6);
  max-width: 340px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.hero-dateline::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--amber);
}

.hero-inner { position: relative; width: 100%; }

.hero h1 {
  margin-bottom: var(--s-6);
  max-width: 14ch;
}
.hero h1 em {
  font-style: normal;
  color: var(--amber);
  font-variation-settings: normal;
}
.hero .lead {
  margin-bottom: var(--s-10);
  font-size: 19px;
  line-height: 1.55;
  max-width: 560px;
}
.hero-eyebrow-row {
  display: flex; align-items: center; gap: var(--s-4);
  margin-bottom: var(--s-8);
}
.hero-eyebrow-row::before {
  content: '';
  width: 40px; height: 1px;
  background: var(--amber);
}
.hero-cta-row { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* Hero counters — editorial stat shelf */
.hero-counters {
  margin-top: clamp(var(--s-16), 8vw, var(--s-24));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  padding-top: var(--s-6);
  border-top: 1px solid var(--border-warm);
}
.hero-counters::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 80px; height: 1px;
  background: var(--amber);
}
.counter {
  padding: var(--s-8) var(--s-6) var(--s-6) 0;
  position: relative;
  border-right: 1px solid var(--border-warm);
}
.counter:last-child { border-right: none; }
.counter:not(:first-child) { padding-left: var(--s-6); }
.counter-value {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 400;
  font-variation-settings: normal;
  letter-spacing: -0.028em;
  color: var(--snow);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.counter-value .unit {
  font-size: 0.38em;
  color: var(--amber);
  font-weight: 500;
  letter-spacing: 0.04em;
  font-family: var(--font-sans);
  text-transform: uppercase;
}
.counter-label {
  margin-top: var(--s-3);
  font-size: 11px;
  color: var(--silver);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  line-height: 1.4;
  font-family: var(--font-sans);
  font-weight: 500;
}
@media (max-width: 800px) {
  .hero-counters { grid-template-columns: repeat(2, 1fr); }
  .counter:nth-child(2) { border-right: none; }
  .counter:nth-child(3), .counter:nth-child(4) {
    border-top: 1px solid var(--border-warm);
    padding-top: var(--s-5);
    margin-top: var(--s-3);
  }
}
@media (max-width: 440px) {
  .hero-counters { grid-template-columns: 1fr; }
  .counter { border-right: none; border-bottom: 1px solid var(--border-warm); padding: var(--s-5) 0; }
  .counter:last-child { border-bottom: none; }
}

/* =========================================================
   Cards
   ========================================================= */

.card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border-soft);
  padding: var(--s-8);
  border-radius: var(--radius-lg);
  position: relative;
  transition: border-color 0.3s var(--t-base), transform 0.3s var(--t-base),
              background 0.3s var(--t-base);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.card:hover {
  border-color: var(--border);
  background: linear-gradient(180deg, #2D2D30 0%, var(--surface-2) 100%);
}

.card-accent-top { position: relative; }
.card-accent-top::before {
  content: '';
  position: absolute;
  top: 0; left: var(--s-8);
  width: 40px; height: 1px;
  background: var(--amber);
}
.card h3 { margin-bottom: var(--s-4); padding-top: var(--s-5); }

.card-quote {
  border-left: 2px solid var(--amber);
  background: var(--surface-paper);
  padding: var(--s-8) var(--s-10);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  position: relative;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-8);
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}
@media (max-width: 960px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; }
}

/* =========================================================
   Split layouts
   ========================================================= */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s-8), 5vw, var(--s-16));
  align-items: center;
}
.split.reverse > :first-child { order: 2; }
.split-img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  filter: saturate(1.05);
}
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split.reverse > :first-child { order: 0; }
}

/* =========================================================
   Feature list
   ========================================================= */

.feature-list { display: flex; flex-direction: column; gap: var(--s-8); margin-top: var(--s-10); }
.feature-item h4 {
  display: inline-block;
  position: relative;
  padding-bottom: 6px;
  margin-bottom: var(--s-3);
}
.feature-item h4::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 32px; height: 1px;
  background: var(--amber);
}
.feature-item p { color: var(--cloud); }

/* =========================================================
   Chips
   ========================================================= */

.chip-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 10px 14px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--surface-paper);
  font-size: var(--text-sm);
  color: var(--cloud);
  font-weight: 500;
  font-family: var(--font-sans);
}
.chip .dot { width: 6px; height: 6px; background: var(--amber); border-radius: 50%; }

/* =========================================================
   Tri-toggle tabs
   ========================================================= */

.tabs {
  display: inline-flex;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 99px;
  gap: 4px;
  flex-wrap: wrap;
}
.tab-btn {
  padding: 10px 22px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--cloud);
  border-radius: 99px;
  transition: background 0.25s var(--t-base), color 0.25s var(--t-base);
  white-space: nowrap;
}
.tab-btn.active { background: var(--amber); color: #111; }
.tab-panels { margin-top: var(--s-10); min-height: 280px; }
.tab-panel { display: none; }
.tab-panel.active {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--s-10);
  align-items: start;
  animation: fadeUp 0.45s var(--t-base);
}
.tab-panel ul { list-style: none; display: flex; flex-direction: column; gap: var(--s-4); }
.tab-panel li {
  padding-left: 24px;
  position: relative;
  color: var(--cloud);
  font-size: var(--text-md);
  line-height: 1.55;
}
.tab-panel li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.7em;
  width: 12px; height: 1px;
  background: var(--amber);
}
.tab-panel h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: normal;
}
@media (max-width: 800px) { .tab-panel.active { grid-template-columns: 1fr; } }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   Phase timeline — home
   ========================================================= */

.phase-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.phase-card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border-soft);
  padding: var(--s-8);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  gap: var(--s-4);
  transition: border-color 0.3s var(--t-base), transform 0.3s var(--t-base);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.phase-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 0%, rgba(254,177,1,0.05), transparent 55%);
  opacity: 0;
  transition: opacity 0.3s var(--t-base);
  pointer-events: none;
}
.phase-card:hover { border-color: var(--border); }
.phase-card:hover::after { opacity: 1; }
.phase-card .phase-num {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--amber);
  letter-spacing: 0.04em;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: normal;
  font-variant-numeric: lining-nums tabular-nums;
}
.phase-card h3 {
  font-size: 24px;
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: normal;
}
.phase-card .phase-summary { color: var(--cloud); }
.phase-expand {
  max-height: 0; overflow: hidden;
  transition: max-height 0.5s var(--t-base), margin 0.4s var(--t-base);
}
.phase-card.is-open .phase-expand { max-height: 700px; margin-top: var(--s-4); }
.phase-expand ul {
  list-style: none;
  display: flex; flex-direction: column;
  gap: 10px;
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-soft);
}
.phase-expand li {
  padding-left: 18px; position: relative; color: var(--cloud); font-size: var(--text-sm);
}
.phase-expand li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 1px; background: var(--amber);
}
.phase-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--amber);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: auto;
  font-family: var(--font-sans);
}
.phase-toggle .icon {
  display: inline-block;
  width: 14px; height: 14px;
  transition: transform 0.3s var(--t-base);
}
.phase-card.is-open .phase-toggle .icon { transform: rotate(45deg); }

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

/* =========================================================
   Phase rail — phases page
   ========================================================= */

.phase-rail {
  position: relative;
  padding-left: var(--s-10);
  display: flex;
  flex-direction: column;
  gap: var(--s-20);
}
.phase-rail::before {
  content: '';
  position: absolute;
  left: 14px; top: 16px; bottom: 16px;
  width: 1px;
  background: linear-gradient(var(--amber), var(--amber-rust) 50%, var(--border));
}
.phase-rail > article { position: relative; }
.phase-rail > article::before {
  content: '';
  position: absolute;
  left: -38px; top: 10px;
  width: 12px; height: 12px;
  background: var(--bg);
  border: 2px solid var(--amber);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--bg);
}
.phase-rail .phase-num {
  font-family: var(--font-display);
  color: var(--amber);
  font-size: var(--text-sm);
  font-weight: 500;
  font-style: normal;
  font-variation-settings: normal;
  letter-spacing: 0.06em;
  margin-bottom: var(--s-3);
  font-variant-numeric: lining-nums;
}
.phase-rail h2 { margin-bottom: var(--s-5); }

.stat-callout {
  background: var(--surface-paper);
  border: 1px solid var(--border-soft);
  border-top: 1px solid var(--amber);
  border-radius: var(--radius-lg);
  padding: var(--s-8);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  margin: var(--s-8) 0;
}
.stat-callout .stat-value {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 400;
  font-variation-settings: normal;
  color: var(--snow);
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.1;
}
.stat-callout .stat-label {
  font-size: 11px;
  color: var(--silver);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-top: 8px;
  font-family: var(--font-sans);
  font-weight: 500;
}
@media (max-width: 700px) {
  .stat-callout { grid-template-columns: 1fr; }
  .phase-rail { padding-left: var(--s-8); }
  .phase-rail > article::before { left: -30px; }
}

/* =========================================================
   Tables
   ========================================================= */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}
table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
table.data-table th,
table.data-table td {
  text-align: left;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft);
  font-variant-numeric: lining-nums tabular-nums;
}
table.data-table th {
  background: var(--surface-paper);
  color: var(--silver);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.16em;
  font-weight: 600;
  font-family: var(--font-sans);
}
table.data-table tr:last-child td { border-bottom: none; }
table.data-table tbody tr:hover { background: rgba(255,255,255,0.015); }
table.data-table td:first-child { color: var(--snow); font-weight: 500; }
table.data-table tr.table-total td { border-top: 1px solid rgba(254,177,1,0.35); color: var(--snow); padding-top: 18px; }
table.data-table tr.table-total:hover { background: transparent; }

/* =========================================================
   Press cards
   ========================================================= */

.press-list { display: flex; flex-direction: column; gap: var(--s-3); }
.press-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  transition: border-color 0.3s var(--t-base), transform 0.3s var(--t-base);
}
.press-card:hover { border-color: var(--amber); }
.press-card .outlet {
  color: var(--silver);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-family: var(--font-sans);
}
.press-card .date { color: var(--silver-dim); font-size: 11px; margin-left: var(--s-3); }
.press-card h3 {
  font-size: 22px;
  margin-top: var(--s-2);
  line-height: 1.25;
  font-family: var(--font-display);
  font-variation-settings: normal;
}
.press-card .arrow {
  color: var(--amber); font-size: 24px; font-weight: 300;
  transition: transform 0.25s var(--t-base);
  font-family: var(--font-sans);
}
.press-card:hover .arrow { transform: translateX(4px); }

/* =========================================================
   Partners tombstones
   ========================================================= */

.partner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.partner-tomb {
  border: 1px solid var(--border-soft);
  background: var(--surface);
  padding: var(--s-8);
  border-radius: var(--radius-lg);
  min-height: 180px;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: border-color 0.3s var(--t-base);
}
.partner-tomb:hover { border-color: var(--border); }
.partner-tomb .eyebrow { font-size: 10px; }
.partner-tomb h3 {
  font-size: 22px;
  letter-spacing: -0.015em;
  font-family: var(--font-display);
  font-variation-settings: normal;
}
.partner-tomb p { font-size: var(--text-sm); color: var(--silver); }
@media (max-width: 860px) { .partner-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .partner-grid { grid-template-columns: 1fr; } }

/* =========================================================
   Forms
   ========================================================= */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  max-width: 640px;
  align-items: stretch;
}
.form > button[type="submit"] { align-self: flex-start; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--silver);
  font-weight: 600;
  font-family: var(--font-sans);
}
.field input,
.field select,
.field textarea {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  color: var(--snow);
  font: inherit;
  padding: 13px 14px;
  transition: border-color 0.2s var(--t-base), background 0.2s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--amber);
  outline: none;
  background: #27272A;
}
.field-inline { display: flex; gap: 10px; align-items: flex-start; }
.field-inline input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--amber);
  margin-top: 2px;
}
.field-inline label {
  font-size: var(--text-sm);
  text-transform: none;
  letter-spacing: 0;
  color: var(--cloud);
}
.form-status {
  font-size: var(--text-sm);
  color: var(--amber);
  min-height: 1.4em;
  font-style: normal;
  font-family: var(--font-display);
  font-variation-settings: normal;
}

/* newsletter */
.newsletter {
  display: flex;
  gap: var(--s-2);
  max-width: 380px;
  margin-top: var(--s-4);
}
.newsletter input {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 11px 14px;
  color: var(--snow);
  font-size: var(--text-sm);
}
.newsletter input:focus { outline: none; border-color: var(--amber); }
.newsletter button {
  background: var(--amber);
  color: #111;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0 18px;
  border-radius: var(--radius);
  transition: background 0.2s var(--t-base);
}
.newsletter button:hover { background: var(--amber-600); }

/* =========================================================
   Footer
   ========================================================= */

.site-footer {
  background: #111113;
  border-top: 1px solid var(--border-soft);
  padding: var(--s-20) 0 var(--s-10);
  color: var(--silver);
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--hairline) 15%, var(--hairline) 85%, transparent);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr;
  gap: var(--s-10);
  align-items: start;
}
.footer-brand .wordmark {
  color: var(--snow);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: var(--s-3);
  display: block;
  font-family: var(--font-sans);
}
.footer-brand p { font-size: var(--text-sm); margin-top: var(--s-4); max-width: 30ch; color: var(--silver); }
.footer h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--snow);
  font-family: var(--font-sans);
  font-weight: 600;
  margin-bottom: var(--s-5);
}
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer a { color: var(--cloud); font-size: var(--text-sm); transition: color 0.2s; }
.footer a:hover { color: var(--amber); }
.footer-bottom {
  margin-top: var(--s-16);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  gap: var(--s-6);
  align-items: center;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--silver-dim);
  letter-spacing: 0.08em;
}
.footer-fineprint {
  max-width: 100%;
  margin-top: var(--s-4);
  font-size: 11px;
  color: var(--silver-dim);
  line-height: 1.6;
  font-style: normal;
  font-family: var(--font-display);
  font-variation-settings: normal;
}
@media (max-width: 960px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-10); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* Founder's mark — small roundel for the footer and founder page */
.founder-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px; height: 74px;
  border: 1px solid var(--border);
  border-radius: 50%;
  position: relative;
  color: var(--amber);
  font-family: var(--font-sans);
  letter-spacing: 0.18em;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  flex-direction: column;
  gap: 2px;
  background: var(--surface-paper);
}
.founder-seal::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid var(--border-warm);
  border-radius: 50%;
}
.founder-seal .seal-year {
  font-family: var(--font-display);
  font-style: normal;
  font-variation-settings: normal;
  font-size: 15px;
  color: var(--snow);
  letter-spacing: 0;
  position: relative;
  z-index: 1;
}
.founder-seal .seal-label {
  font-size: 7px;
  color: var(--silver);
  position: relative;
  z-index: 1;
}

/* =========================================================
   Press strip
   ========================================================= */

.press-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.press-strip .quote {
  padding: var(--s-6);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.press-strip .outlet {
  color: var(--amber);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  margin-bottom: var(--s-3);
  font-family: var(--font-sans);
}
.press-strip .excerpt {
  color: var(--cloud);
  font-size: 16px;
  line-height: 1.5;
  font-family: var(--font-display);
  font-variation-settings: normal;
  font-style: normal;
}
@media (max-width: 860px) { .press-strip { grid-template-columns: 1fr; } }

/* =========================================================
   Scroll reveal
   ========================================================= */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--t-slow), transform 0.8s var(--t-slow);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* =========================================================
   Page hero — interior
   ========================================================= */

.page-hero {
  padding: clamp(var(--s-20), 12vw, 160px) 0 var(--s-16);
  position: relative;
  border-bottom: 1px solid var(--border-soft);
  isolation: isolate;
  overflow: hidden;
}
.page-hero h1 {
  font-size: clamp(42px, 6.8vw, 88px);
  letter-spacing: -0.028em;
  max-width: 18ch;
  margin-bottom: var(--s-6);
  line-height: 1;
}
.page-hero h1 em {
  font-style: normal;
  color: var(--amber);
  font-variation-settings: normal;
}
.page-hero .lead { max-width: 700px; font-size: 18px; }
.page-hero-bg {
  position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(ellipse at 85% 100%, rgba(254, 177, 1, 0.18), transparent 55%);
}
.page-hero-grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}

/* =========================================================
   Map section
   ========================================================= */

.map-wrap {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--s-8);
}
.map-wrap svg { width: 100%; height: auto; display: block; }

/* =========================================================
   Pull quote
   ========================================================= */

.pull-quote {
  padding: var(--s-10) var(--s-8) var(--s-10) var(--s-10);
  background: var(--surface-paper);
  border-left: 2px solid var(--amber);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  position: relative;
}
.pull-quote::before {
  content: '“';
  position: absolute;
  top: 6px;
  left: var(--s-10);
  font-family: var(--font-display);
  font-size: 80px;
  line-height: 1;
  color: var(--amber);
  opacity: 0.25;
  font-variation-settings: normal;
  pointer-events: none;
}
.pull-quote p {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.32;
  color: var(--snow);
  letter-spacing: -0.015em;
  font-weight: 400;
  font-variation-settings: normal;
  position: relative;
  z-index: 1;
}
.pull-quote cite {
  display: block;
  margin-top: var(--s-5);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--amber);
  font-style: normal;
  font-family: var(--font-sans);
  font-weight: 600;
}

/* =========================================================
   Full-bleed image
   ========================================================= */

.full-bleed-image {
  width: 100%;
  aspect-ratio: 21 / 8;
  object-fit: cover;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
@media (max-width: 640px) { .full-bleed-image { aspect-ratio: 4 / 3; } }

/* =========================================================
   Editorial blocks — founder letter, long-form prose
   ========================================================= */

.editorial {
  font-family: var(--font-display);
  font-variation-settings: normal;
  font-size: 19px;
  line-height: 1.7;
  color: var(--cloud);
  letter-spacing: -0.002em;
}
.editorial p { color: var(--cloud); margin-bottom: var(--s-5); }
.editorial p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 5.2em;
  line-height: 0.85;
  float: left;
  color: var(--amber);
  padding: 0.05em 0.1em 0 0;
  margin-top: 0.08em;
  font-weight: 700;
  letter-spacing: -0.04em;
}
.editorial em {
  font-style: normal;
  color: var(--snow);
  font-variation-settings: normal;
}
.editorial strong {
  color: var(--snow);
  font-weight: 500;
  font-variation-settings: normal;
}
.editorial blockquote {
  border-left: 2px solid var(--amber);
  padding: var(--s-2) 0 var(--s-2) var(--s-6);
  margin: var(--s-8) 0;
  font-style: normal;
  color: var(--snow);
}

/* Signature at the end of a letter */
.editorial-sign {
  margin-top: var(--s-10);
  padding-top: var(--s-8);
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  gap: var(--s-6);
  flex-wrap: wrap;
}
.editorial-sign-name {
  font-family: var(--font-display);
  font-variation-settings: normal;
  font-style: normal;
  font-size: 24px;
  color: var(--snow);
}
.editorial-sign-role {
  font-family: var(--font-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--silver);
}

/* =========================================================
   Small utilities
   ========================================================= */

.mt-0 { margin-top: 0 !important; }
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.mt-10 { margin-top: var(--s-10); }
.mt-12 { margin-top: var(--s-12); }
.mt-16 { margin-top: var(--s-16); }
.mt-20 { margin-top: var(--s-20); }

.mb-6 { margin-bottom: var(--s-6); }
.mb-10 { margin-bottom: var(--s-10); }
.mb-16 { margin-bottom: var(--s-16); }

.text-center { text-align: center; }

.hide-mobile { }
@media (max-width: 640px) { .hide-mobile { display: none !important; } }

/* Icon tile */
.icon-tile {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--amber);
  margin-bottom: var(--s-5);
  background: var(--surface-paper);
}
.icon-tile svg { width: 22px; height: 22px; }

/* Print / safety */
:is(h1, h2, h3, h4, p) { overflow-wrap: anywhere; word-break: normal; }
:is(h1, h2, h3) { overflow-wrap: normal; }

/* Fraunces variable-font fallback adjustment (while font loads) */
@font-face {
  font-family: 'Fraunces Fallback';
  src: local('Georgia');
  ascent-override: 94%;
  descent-override: 22%;
  line-gap-override: 0%;
  size-adjust: 97%;
}

/* =========================================================
   CINEMATIC MOTION LAYER
   Supports GSAP-driven interactions in motion.js
   ========================================================= */

/* Split text — per-word masking */
.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: baseline;
  line-height: inherit;
  padding: 0.08em 0;
  margin: -0.08em 0;
}
.word-inner {
  display: inline-block;
  will-change: transform, opacity;
  transform-origin: 50% 100%;
}

/* Eyebrow rule scale — animated via CSS var */
.eyebrow::before {
  transform: scaleX(var(--eb-rule-scale, 1));
  transform-origin: left center;
  transition: none;
}

/* Image mask wrapper (added by motion.js) */
.img-mask {
  display: block;
  overflow: hidden;
  position: relative;
  border-radius: inherit;
}
.img-mask > .full-bleed-image,
.img-mask > .split-img {
  width: 100%;
  will-change: transform;
}

/* Section sweep — amber hairline between sections */
.section,
.section-sm {
  position: relative;
}
.section-sweep {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(254, 177, 1, 0.28) 22%,
    rgba(254, 177, 1, 0.5) 50%,
    rgba(254, 177, 1, 0.28) 78%,
    transparent 100%);
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 1;
}

/* Cursor glow — amber radial that tracks mouse */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 520px;
  height: 520px;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(254, 177, 1, 0.09) 0%,
    rgba(254, 177, 1, 0.04) 30%,
    rgba(254, 177, 1, 0) 65%);
  z-index: 1;
  mix-blend-mode: screen;
  will-change: transform;
  opacity: 0.9;
}
@media (hover: none), (max-width: 900px) {
  .cursor-glow { display: none !important; }
}

/* Buttons get GPU hints for magnetic motion */
.btn-primary,
.btn-ghost,
.cta-large {
  will-change: transform;
}

/* Horizontal-pin phase rail — NEW variant */
.phase-rail-horizontal {
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: var(--near-black);
}
.phase-rail-horizontal .phase-rail-inner {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 var(--s-10);
}
.phase-track {
  display: flex;
  gap: var(--s-10);
  will-change: transform;
  align-items: stretch;
}
.phase-track > article {
  flex: 0 0 min(640px, 82vw);
  background: var(--surface-paper);
  border: 1px solid var(--border);
  padding: var(--s-8) var(--s-8) var(--s-10);
  border-radius: 14px;
  position: relative;
  overflow-y: auto;
  max-height: calc(100vh - 140px);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.phase-track > article h2 {
  font-size: clamp(28px, 3vw, 40px);
  margin: var(--s-4) 0 0;
}
.phase-track > article .lead {
  font-size: 16px;
  margin-top: var(--s-4);
}
.phase-track > article .stat-callout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-6);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.phase-track > article .stat-callout .stat-value {
  font-size: 22px;
}
.phase-track > article h4 {
  margin-top: var(--s-6);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--amber);
}
.phase-track > article ul {
  font-size: 14px !important;
  gap: 6px !important;
}
.phase-track > article::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.8s var(--ease-out);
}
.phase-track > article.is-active::before {
  transform: scaleX(1);
}
.phase-progress {
  position: absolute;
  bottom: var(--s-8);
  left: var(--s-10);
  right: var(--s-10);
  height: 2px;
  background: var(--border);
}
.phase-progress-bar {
  height: 100%;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
@media (max-width: 900px) {
  .phase-rail-horizontal {
    height: auto;
    padding: var(--s-8) 0;
  }
  .phase-rail-horizontal .phase-rail-inner {
    height: auto;
    padding: 0 var(--s-4);
  }
  .phase-track {
    flex-direction: column;
    gap: var(--s-6);
  }
  .phase-track > article {
    flex: 1 1 auto;
    max-height: none;
    overflow: visible;
    padding: var(--s-6);
  }
  .phase-track > article .stat-callout {
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }
  .phase-progress { display: none; }
}

/* Partner marquee */
.marquee {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  padding: var(--s-8) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.marquee-track {
  display: flex;
  gap: var(--s-10);
  width: max-content;
  will-change: transform;
}
.marquee-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-sans);
  font-size: 26px;
  font-style: normal;
  color: var(--snow);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.marquee-item::after {
  content: '·';
  color: var(--amber);
  margin-left: var(--s-8);
  font-size: 32px;
  opacity: 0.6;
}

/* Hide legacy .reveal opacity gating where cards group handles it */
/* (keeps backward compat — the motion.js runs first and sets them visible) */

/* Reduced motion — motion.js has its own gate, but hide decorative pieces too */
@media (prefers-reduced-motion: reduce) {
  .cursor-glow { display: none; }
  .section-sweep { display: none; }
  .word-inner { transform: none !important; opacity: 1 !important; }
  .img-mask { clip-path: none !important; }
  .marquee-track { animation: none !important; transform: none !important; }
}