/* ============================================================
   CLEAN SEED CAPITAL — DESIGN SYSTEM V1
   ============================================================ */

/* ---- TOKENS ------------------------------------------------ */
:root {
  /* Surfaces */
  --canvas: #ffffff;
  --canvas-inverse: #0a0a0a;
  --canvas-charcoal: #18181b;
  --canvas-subtle: #f7f7f8;

  /* Text */
  --text-primary: #0a0a0a;
  --text-secondary: #5a5a5c;
  --text-muted: #8e8e93;
  --text-inverse: #ffffff;

  /* Borders */
  --hairline: #e5e5e7;
  --hairline-strong: #d1d1d6;
  --hairline-dark: #2a2a2a;

  /* Accent */
  --accent-deep: #3b9546;
  --accent-bright: #7ac142;

  /* Feedback */
  --error: #c0392b;

  /* Type */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1440px;
  --gutter: 24px;

  /* Spacing scale — V2 promoted: tokens unified with home page so sub-pages
     inherit the same vertical rhythm. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 120px;
  --s-11: 160px;
  --s-12: 160px;
  --s-13: 200px;

  /* Hairline alt for dark surfaces */
  --hairline-dark-2: rgba(255, 255, 255, 0.16);

  /* Motion */
  --ease-out: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-reveal: 400ms;
  --dur-reveal-dark: 520ms;
}

/* ---- RESET ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--canvas);
  font-feature-settings: 'ss01', 'cv11';
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; }
figure { margin: 0; }

/* ---- TYPOGRAPHY ------------------------------------------- */
.h1-display {
  font-size: 72px;
  line-height: 1.05;
  letter-spacing: -0.022em;
  font-weight: 600;
  margin: 0;
}
h1, .h1 {
  font-size: 56px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0;
}
h2, .h2 {
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 600;
  margin: 0;
}
h3, .h3 {
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 600;
  margin: 0;
}
h4, .h4 {
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  font-weight: 600;
  margin: 0;
}
.body-lg {
  font-size: 20px;
  line-height: 1.55;
  font-weight: 400;
}
.body {
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
}
.body-sm {
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
}
.label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--text-muted);
}
.caption {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
}
.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0;
}
.muted { color: var(--text-muted); }
.secondary { color: var(--text-secondary); }

/* ---- TYPOGRAPHY V2 — editorial display register --------------
   Promoted from index.html to give sub-pages the same typographic
   ambition as the home page. Existing h1/.h1, h2/.h2, etc. remain
   for legacy markup; .t-display / .t-mega / .t-quote give sub-page
   heroes the editorial scale of the homepage. */
.t-mega {
  font-size: 176px;
  line-height: 0.92;
  letter-spacing: -0.048em;
  font-weight: 700;
  margin: 0;
}
.t-display {
  font-size: 112px;
  line-height: 0.98;
  letter-spacing: -0.036em;
  font-weight: 700;
  margin: 0;
}
.t-quote {
  font-size: 68px;
  line-height: 1.12;
  letter-spacing: -0.024em;
  font-weight: 600;
  margin: 0;
}
.t-h1 {
  font-size: 64px;
  line-height: 1.04;
  letter-spacing: -0.026em;
  font-weight: 700;
  margin: 0;
}
.t-h2 {
  font-size: 48px;
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 600;
  margin: 0;
}
.t-h3 {
  font-size: 28px;
  line-height: 1.22;
  letter-spacing: -0.014em;
  font-weight: 600;
  margin: 0;
}
.t-h4 {
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.008em;
  font-weight: 600;
  margin: 0;
}
.t-body-xl {
  font-size: 26px;
  line-height: 1.42;
  color: var(--text-primary);
  font-weight: 400;
  letter-spacing: -0.012em;
}
.t-body-lg { font-size: 20px; line-height: 1.55; color: var(--text-secondary); font-weight: 400; }
.t-body    { font-size: 17px; line-height: 1.65; color: var(--text-secondary); }
.t-cap     { font-size: 13px; line-height: 1.5; color: var(--text-muted); }
@media (max-width: 1279px) {
  .t-mega    { font-size: 132px; }
  .t-display { font-size: 88px; }
  .t-quote   { font-size: 56px; }
  .t-h1      { font-size: 54px; }
  .t-h2      { font-size: 42px; }
}
@media (max-width: 1023px) {
  .t-mega    { font-size: 88px; }
  .t-display { font-size: 64px; }
  .t-quote   { font-size: 44px; }
  .t-h1      { font-size: 44px; }
  .t-h2      { font-size: 34px; }
  .t-h3      { font-size: 24px; }
  .t-body-xl { font-size: 22px; }
  .t-body-lg { font-size: 18px; }
}
@media (max-width: 639px) {
  .t-mega    { font-size: 56px; line-height: 0.96; }
  .t-display { font-size: 44px; line-height: 1.02; }
  .t-quote   { font-size: 32px; line-height: 1.12; }
  .t-h1      { font-size: 36px; }
  .t-h2      { font-size: 28px; }
  .t-h3      { font-size: 22px; }
  .t-body-xl { font-size: 19px; }
  .t-body-lg { font-size: 17px; }
  .t-body    { font-size: 16px; }
}

/* ---- SURFACE ROTATION V2 — unified with index ---------------
   .surf--dark and .surf--subtle replicate the home page's surface
   token system so sub-pages can rotate dark/subtle/white in lock-step
   with the home page brand voice. */
.surf--subtle { background: var(--canvas-subtle); }
.surf--dark {
  background: var(--canvas-inverse);
  color: var(--text-inverse);
}
.surf--dark h1, .surf--dark h2, .surf--dark h3, .surf--dark h4,
.surf--dark .t-h1, .surf--dark .t-h2, .surf--dark .t-h3, .surf--dark .t-h4,
.surf--dark .t-display, .surf--dark .t-mega, .surf--dark .t-quote {
  color: var(--text-inverse);
}
.surf--dark .t-body-xl { color: var(--text-inverse); }
.surf--dark .t-body-lg,
.surf--dark .t-body,
.surf--dark .body-lg,
.surf--dark .body { color: #b5b5ba; }
.surf--dark .eyebrow,
.surf--dark .label { color: #9a9a9f; }
.surf--dark ::selection { background: var(--text-inverse); color: var(--text-primary); }

/* Section bridge — one-line italic connective tissue between sections */
.section-bridge {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 20px;
  line-height: 1.45;
  color: var(--text-secondary);
  margin: 0 0 var(--s-7) 0;
  max-width: 52ch;
  letter-spacing: -0.006em;
}
.surf--dark .section-bridge { color: rgba(255,255,255,0.72); }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

@media (max-width: 1023px) {
  .h1-display { font-size: 52px; }
  h1, .h1 { font-size: 44px; }
  h2, .h2 { font-size: 34px; }
  h3, .h3 { font-size: 24px; }
  h4, .h4 { font-size: 19px; }
}
@media (max-width: 639px) {
  .h1-display { font-size: 44px; line-height: 1.08; }
  h1, .h1 { font-size: 38px; }
  h2, .h2 { font-size: 30px; }
  h3, .h3 { font-size: 22px; }
  .body-lg { font-size: 18px; }
  .body { font-size: 16px; }
  .body-sm { font-size: 14px; }
}

/* ---- LAYOUT ------------------------------------------------ */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--s-8);
}
.container-wide {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--s-8);
}
@media (max-width: 1023px) {
  .container, .container-wide { padding: 0 var(--s-7); }
}
@media (max-width: 639px) {
  .container, .container-wide { padding: 0 var(--s-5); }
}

.section {
  padding: var(--s-10) 0;
}
@media (max-width: 1023px) {
  .section { padding: var(--s-9) 0; }
}
@media (max-width: 639px) {
  .section { padding: var(--s-8) 0; }
}
.section--subtle { background: var(--canvas-subtle); }
.section--dark {
  background: var(--canvas-inverse);
  color: var(--text-inverse);
}
.section--dark .label { color: #9a9a9f; }
.section--dark .secondary { color: #b5b5ba; }
.section--dark .muted { color: #8e8e93; }

.section-header {
  max-width: 800px;
  margin-bottom: var(--s-8);
}
.section-header .label { margin-bottom: var(--s-4); display: block; }
.section-header h2 { margin-bottom: var(--s-4); }
.section-header .body-lg { color: var(--text-secondary); max-width: 65ch; }
.section--dark .section-header .body-lg { color: #b5b5ba; }

/* Grid utilities */
.grid { display: grid; gap: var(--s-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---- NAVIGATION -------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 72px;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: height var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              backdrop-filter var(--dur-base) var(--ease-out);
}
.nav.is-scrolled {
  height: 64px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--hairline);
}
.nav__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--s-8);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-7);
}
@media (max-width: 1023px) {
  .nav__inner { padding: 0 var(--s-7); gap: var(--s-5); }
}
@media (max-width: 639px) {
  .nav__inner { padding: 0 var(--s-5); }
}
.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.nav__logo svg { width: 28px; height: 28px; }
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}
.nav__links a {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  padding: 4px 0;
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--accent-deep);
  transform: translateY(2px);
  opacity: 0;
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
}
.nav__links a:hover::after,
.nav__links a.is-active::after {
  opacity: 1;
  transform: translateY(0);
}
.nav__utility {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
.nav__utility a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color 150ms var(--ease-out);
}
.nav__utility a:hover { color: var(--text-primary); }
.nav__search {
  width: 18px; height: 18px;
  color: var(--text-secondary);
}
@media (max-width: 1023px) {
  .nav__links { display: none; }
  .nav__utility a:not(:last-child) { display: none; }
}

.nav-spacer { height: 72px; }

/* ---- BUTTONS ----------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 48px;
  padding: 0 var(--s-5);
  border-radius: 9999px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  transition: background-color 150ms var(--ease-out),
              color 150ms var(--ease-out),
              transform 80ms var(--ease-out);
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
}
.btn:active { transform: scale(0.98); }
.btn:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
}
/* Apple-style diagonal sheen sweep — applied to background-filled
   button variants (primary, accent, inverse). Skips .btn-link which
   has no fill surface. Children sit above the sheen via z-index. */
.btn--primary > *,
.btn--accent > *,
.btn--inverse > * { position: relative; z-index: 2; }
.btn--primary::after,
.btn--accent::after,
.btn--inverse::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  transition: left 720ms cubic-bezier(0.22, 1, 0.36, 1);
}
.btn--primary::after,
.btn--accent::after {
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(255,255,255,0.20) 50%,
    transparent 100%);
}
/* Inverse button sits on light surface — sheen uses an accent tint
   instead of white so it reads against the inverted palette. */
.btn--inverse::after {
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(122,193,66,0.22) 50%,
    transparent 100%);
}
.btn--primary:hover::after,
.btn--accent:hover::after,
.btn--inverse:hover::after { left: 130%; }
@media (prefers-reduced-motion: reduce) {
  .btn--primary::after,
  .btn--accent::after,
  .btn--inverse::after { display: none; }
}

.btn--primary {
  background: var(--text-primary);
  color: var(--text-inverse);
}
.btn--primary:hover { background: #1a1a1a; }
.btn--accent {
  background: var(--accent-deep);
  color: var(--text-inverse);
}
.btn--accent:hover { background: #318238; }
.btn--inverse {
  background: var(--text-inverse);
  color: var(--text-primary);
}
.btn--inverse:hover { background: #f0f0f0; }

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  position: relative;
  padding-bottom: 2px;
}
.btn-link .arrow {
  display: inline-block;
  transition: transform 200ms var(--ease-out);
}
.btn-link:hover .arrow { transform: translateX(4px); }
.btn-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  opacity: 0;
  transition: opacity 150ms var(--ease-out);
}
.btn-link:hover::after { opacity: 1; }
.section--dark .btn-link { color: var(--text-inverse); }

@media (max-width: 639px) {
  .btn { height: 44px; font-size: 14px; }
}

.cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
}

/* ---- HERO -------------------------------------------------- */
.hero {
  padding: var(--s-11) 0 var(--s-10);
  position: relative;
}
@media (max-width: 1023px) {
  .hero { padding: var(--s-10) 0 var(--s-9); }
}

/* ---- HERO SIGNATURE — abstract motif anchored to sub-page heroes ---
   Single quiet visual signature per sub-page, positioned beneath the
   hero copy at the right. SVG-based so it stays sharp, mono-toned,
   and draws on reveal via stroke-dashoffset. */
.hero__signature {
  position: absolute;
  left: var(--s-7);
  bottom: var(--s-7);
  width: 180px;
  height: 180px;
  pointer-events: none;
  opacity: 0.55;
}
.hero__signature svg { width: 100%; height: 100%; display: block; }
.hero__signature .sig-line,
.hero__signature .sig-stroke {
  fill: none;
  stroke: var(--accent-deep);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.hero__signature .sig-stroke--bright { stroke: var(--accent-bright); }
.hero__signature .sig-fill { fill: var(--accent-deep); }
.hero__signature .sig-muted { stroke: var(--hairline-strong); opacity: 0.6; }
/* Draw-in animation triggers when hero reveals */
.hero__signature [data-sig-draw] {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 1400ms cubic-bezier(0.22, 1, 0.36, 1) 320ms;
}
[data-reveal].hero__signature.is-visible [data-sig-draw],
.hero__rail[data-reveal].is-visible ~ .hero__signature [data-sig-draw],
.hero .hero__signature [data-sig-draw] { stroke-dashoffset: 0; }
@media (max-width: 1023px) {
  .hero__signature { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__signature [data-sig-draw] { stroke-dashoffset: 0; transition: none; }
}

/* ---- HERO RAIL — decorative right-side mark + draw-in rule -- */
/* A vertical mono pagination chip + a hairline that draws downward
   on reveal. Sits absolutely against the right edge of the hero
   container. Hidden at <1024px. */
.hero__rail {
  position: absolute;
  top: 0;
  bottom: 0;
  right: var(--s-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  pointer-events: none;
  z-index: 0;
}
.hero__rail-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}
.section--dark .hero__rail-label { color: rgba(255,255,255,0.55); }
.hero__rail-rule {
  width: 1px;
  height: 160px;
  background: var(--hairline);
  transform-origin: top center;
}
.section--dark .hero__rail-rule { background: rgba(255,255,255,0.18); }
[data-reveal] .hero__rail-rule {
  transform: scaleY(0);
  transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1) 400ms;
}
[data-reveal].is-visible .hero__rail-rule {
  transform: scaleY(1);
}
.hero__rail-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-deep);
  opacity: 0.7;
}
.section--dark .hero__rail-dot { background: var(--accent-bright); opacity: 0.85; }
@media (max-width: 1023px) {
  .hero__rail { display: none; }
}
@media (max-width: 639px) {
  .hero { padding: var(--s-9) 0 var(--s-8); }
}
.hero__label { display: block; margin-bottom: var(--s-5); }
.hero__headline { margin-bottom: var(--s-5); max-width: 18ch; }
.hero__subhead {
  font-size: 24px;
  line-height: 1.4;
  color: var(--text-secondary);
  margin-bottom: var(--s-5);
  max-width: 48ch;
}
.hero__copy {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 62ch;
  margin-bottom: var(--s-7);
}
.hero__ctas { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
@media (max-width: 639px) {
  .hero__subhead { font-size: 20px; }
  .hero__copy { font-size: 16px; }
}

/* ---- CARDS ------------------------------------------------- */
.card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: var(--s-6);
  transition: border-color 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.card:hover {
  border-color: var(--hairline-strong);
  transform: translateY(-2px);
}
.card__label { display: block; margin-bottom: var(--s-3); }
.card__title { margin-bottom: var(--s-3); }
.card__body { color: var(--text-secondary); }

.card--elevated {
  border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  border-radius: 16px;
  padding: var(--s-7);
  transition: box-shadow 180ms var(--ease-out);
}
.card--elevated:hover {
  transform: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.08);
}

/* ---- 3-LAYER DIAGRAM -------------------------------------- */
.layer-diagram {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
  background: var(--canvas);
}
.layer {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--s-7);
  padding: var(--s-7) var(--s-7);
  border-bottom: 1px solid var(--hairline);
  align-items: start;
}
.layer:last-child { border-bottom: none; }
.layer__index {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-deep);
  padding-top: 4px;
}
.layer__content .label { display: block; margin-bottom: var(--s-3); }
.layer__content h4 { margin-bottom: var(--s-3); }
.layer__content p { color: var(--text-secondary); margin: 0; }
@media (max-width: 639px) {
  .layer { padding: var(--s-6) var(--s-5); grid-template-columns: 1fr; row-gap: var(--s-3); }
}

/* ---- LIVE SIGNALS ----------------------------------------- */
.signals {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding: var(--s-7) 0;
}
.signal {
  padding: 0 var(--s-6);
  border-left: 1px solid var(--hairline-dark);
}
.signal:first-child { border-left: none; padding-left: 0; }
.signal__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8e8e93;
  margin-bottom: var(--s-4);
}
.signal__value {
  font-family: var(--font-mono);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.signal__dot {
  width: 6px; height: 6px;
  background: var(--accent-deep);
  border-radius: 50%;
  animation: pulse 1800ms ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.4; }
}
.signals__footer {
  margin-top: var(--s-4);
  font-size: 13px;
  color: #8e8e93;
}
@media (max-width: 1023px) {
  .signals { grid-template-columns: repeat(2, 1fr); row-gap: var(--s-6); }
  .signal { border-left: none; padding: 0; }
  .signal__value { font-size: 32px; }
}
@media (max-width: 639px) {
  .signals { grid-template-columns: 1fr; }
  .signal__value { font-size: 28px; }
}

/* ---- TIER FEATURE ------------------------------------------ */
.tier {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-9);
  align-items: center;
}
.tier--reverse .tier__content { order: 2; }
.tier__media {
  aspect-ratio: 4 / 3;
  background: var(--canvas-subtle) center / cover no-repeat;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.section--dark .tier__media {
  background-color: #141414;
  border-color: var(--hairline-dark);
  color: #7a7a7f;
}
.tier__media--max {
  background-image: url('imagery/SmartSeederMAXHero.jpg');
  background-position: center 60%;
}
.tier__media--minimax {
  background-image: url('imagery/minimax-field.jpg');
  background-position: center center;
}
.tier__label { display: block; margin-bottom: var(--s-4); }
.tier__title { margin-bottom: var(--s-3); }
.tier__subhead {
  font-size: 20px;
  color: var(--text-secondary);
  margin-bottom: var(--s-5);
}
.section--dark .tier__subhead { color: #b5b5ba; }
.tier__body { color: var(--text-secondary); margin-bottom: var(--s-6); }
.section--dark .tier__body { color: #b5b5ba; }
.tier__role .label { display: block; margin-bottom: var(--s-3); }
.tier__role p { color: var(--text-secondary); margin: 0; }
.section--dark .tier__role p { color: #b5b5ba; }
@media (max-width: 1023px) {
  .tier { grid-template-columns: 1fr; gap: var(--s-7); }
  .tier--reverse .tier__content { order: 0; }
}

/* ---- THREE-COLUMN VALUE BLOCK ------------------------------ */
.value-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-7);
}
.value-col { border-top: 1px solid var(--hairline); padding-top: var(--s-5); }
.value-col .label { display: block; margin-bottom: var(--s-3); }
.value-col h4 { margin-bottom: var(--s-3); }
.value-col p { color: var(--text-secondary); margin: 0; }
@media (max-width: 1023px) { .value-columns { grid-template-columns: 1fr; gap: var(--s-6); } }

/* ---- NEWS CARDS ------------------------------------------- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
@media (max-width: 1023px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .news-grid { grid-template-columns: 1fr; } }
.news-card {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  transition: border-color 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.news-card:hover { border-color: var(--hairline-strong); transform: translateY(-2px); }
.news-card__meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.news-card__tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.news-card__tag--press { color: var(--accent-deep); }
.news-card__tag--corporate { color: var(--text-primary); }
.news-card__tag--deployment { color: var(--text-secondary); }
.news-card__date { font-size: 13px; color: var(--text-muted); font-family: var(--font-mono); }
.news-card__title { margin-bottom: var(--s-3); }
.news-card__dek { font-size: 15px; color: var(--text-secondary); margin-bottom: var(--s-5); flex: 1; }

/* ---- NEWS INDEX LIST (full width rows) --------------------- */
.news-list { display: flex; flex-direction: column; position: relative; }
/* Sticky year anchor — Apple Newsroom style scrubber. JS in motion.js
   updates --news-year via [data-news-current-year] attribute on the
   container; the floating display reads that value. */
.news-year-anchor {
  position: sticky;
  top: 96px;
  z-index: 5;
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-5) 0 var(--s-3);
  margin-bottom: var(--s-4);
  background: linear-gradient(to bottom, var(--canvas) 70%, rgba(255,255,255,0));
  pointer-events: none;
}
.news-year-anchor__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.news-year-anchor__year {
  font-family: var(--font-sans);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent-bright);
  line-height: 1;
  display: inline-block;
  transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.news-year-anchor[data-changing] .news-year-anchor__year {
  opacity: 0;
  transform: translateY(-6px);
}
.news-year-anchor__rule {
  flex: 1;
  height: 1px;
  background: var(--hairline);
  align-self: center;
  margin-bottom: 12px;
}
@media (max-width: 1023px) {
  .news-year-anchor { top: 72px; }
  .news-year-anchor__year { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .news-year-anchor__year { transition: none; }
}
.news-item {
  padding: var(--s-7) 0;
  border-bottom: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: var(--s-6);
  align-items: start;
}
.news-item:last-child { border-bottom: none; }
.news-item__meta { display: flex; flex-direction: column; gap: var(--s-2); }
.news-item__tag { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.news-item__tag--press { color: var(--accent-deep); }
.news-item__tag--corporate { color: var(--text-primary); }
.news-item__tag--deployment { color: var(--text-secondary); }
.news-item__date { font-size: 13px; color: var(--text-muted); font-family: var(--font-mono); }
.news-item__title { margin-bottom: var(--s-3); }
.news-item__dek { color: var(--text-secondary); margin: 0; }
@media (max-width: 1023px) {
  .news-item { grid-template-columns: 1fr; gap: var(--s-3); }
}
@media (max-width: 639px) {
  /* Keep meta row sticky-left of the title rather than stacked above */
  .news-item__meta { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--s-3); }
  .news-item__tag { font-size: 10.5px; letter-spacing: 0.12em; }
  .news-item__date { font-size: 12px; }
}

/* ---- FILINGS TABLE ---------------------------------------- */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.table thead th {
  text-align: left;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--hairline);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.table tbody td {
  padding: var(--s-5);
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
  transition: background-color 150ms var(--ease-out);
}
.table tbody tr:hover td { background: #fafafa; }
.table .doc-title { font-weight: 500; color: var(--text-primary); }
.table .doc-date { font-family: var(--font-mono); color: var(--text-secondary); font-size: 14px; }
.table .doc-format { text-align: right; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.table .doc-format .arrow-down { display: inline-block; margin-left: 6px; transition: color 150ms var(--ease-out); }
.table tbody tr:hover .arrow-down { color: var(--accent-bright); }
@media (max-width: 639px) {
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { border-bottom: 1px solid var(--hairline); padding: var(--s-4) 0; }
  .table tbody td { border: none; padding: 2px 0; }
  .table .doc-format { text-align: left; margin-top: 6px; }
}

/* ---- TIMELINE --------------------------------------------- */
.timeline {
  position: relative;
  padding: var(--s-6) 0;
}
.timeline__axis {
  position: absolute;
  left: 0; right: 0;
  top: 40px;
  height: 1px;
  background: var(--hairline);
}
.timeline__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-4);
  position: relative;
}
.timeline__item { position: relative; padding-top: 60px; }
.timeline__node {
  position: absolute;
  top: 32px;
  left: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--canvas);
  border: 2px solid var(--text-primary);
}
.timeline__node--done { background: var(--text-primary); }
.timeline__label { display: block; margin-bottom: 4px; font-size: 11px; }
.timeline__title { font-size: 15px; font-weight: 500; }
@media (max-width: 1023px) {
  .timeline__axis { left: 8px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .timeline__list { grid-template-columns: 1fr; gap: var(--s-6); }
  .timeline__item { padding-top: 0; padding-left: 32px; }
  .timeline__node { top: 0; left: 0; }
}

/* ---- FORM ------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: var(--s-5); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
@media (max-width: 639px) { .form-row { grid-template-columns: 1fr; } }
.field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-2);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  color: var(--text-primary);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  padding: 12px 0 10px;
  transition: border-bottom-color 220ms var(--ease-out);
  position: relative;
}
.field { position: relative; }
.field::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent-deep);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.field:focus-within::after { transform: scaleX(1); }
.field textarea { min-height: 120px; resize: vertical; padding: 12px 0; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--accent-bright);
}
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  .field::after { transition: none; }
}
.field__hint {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: var(--s-2);
}
.form__note {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  padding: var(--s-4);
  background: var(--canvas-subtle);
  border-radius: 8px;
}

/* ---- INVESTOR PILLARS ------------------------------------- */
.pillar { border-top: 1px solid var(--hairline); padding-top: var(--s-5); }
.pillar h4 { margin-bottom: var(--s-3); }
.pillar p { color: var(--text-secondary); margin: 0; }

/* ---- STOCK STRIP ------------------------------------------ */
.stock-strip {
  border-top: 1px solid var(--hairline-dark);
  border-bottom: 1px solid var(--hairline-dark);
  padding: var(--s-5) 0;
  color: #b5b5ba;
  font-size: 14px;
}
.stock-strip strong { color: var(--text-inverse); font-weight: 500; letter-spacing: 0.02em; }

/* ---- ROUTING CARDS (Contact) ------------------------------ */
.route-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
}
@media (max-width: 639px) { .route-grid { grid-template-columns: 1fr; } }
.route {
  padding: var(--s-7);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  transition: border-color 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.route:hover { border-color: var(--hairline-strong); transform: translateY(-2px); }
.route h4 { margin-bottom: var(--s-3); }
.route p { color: var(--text-secondary); margin-bottom: var(--s-5); }
.route .mono { display: block; font-size: 14px; color: var(--text-primary); margin-bottom: var(--s-4); }

/* ---- FOOTER ----------------------------------------------- */
.footer {
  background: var(--canvas-inverse);
  color: var(--text-inverse);
  padding: var(--s-10) 0 var(--s-7);
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-7);
  margin-bottom: var(--s-9);
}
@media (max-width: 1023px) { .footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } }
@media (max-width: 639px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__col h5 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8e8e93;
  margin: 0 0 var(--s-5);
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.footer__col a {
  font-size: 14px;
  color: #d1d1d6;
  transition: color 150ms var(--ease-out);
}
.footer__col a:hover { color: var(--text-inverse); }
.footer__contact-line { font-size: 14px; color: #d1d1d6; }
.footer__legal {
  padding-top: var(--s-6);
  border-top: 1px solid var(--hairline-dark);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-size: 12px;
  color: #8e8e93;
  line-height: 1.6;
}
.footer__legal-row { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.footer__legal-row a { color: #b5b5ba; transition: color 150ms var(--ease-out); }
.footer__legal-row a:hover { color: var(--text-inverse); }

/* ---- SUBNAV ----------------------------------------------- */
.subnav {
  position: sticky;
  top: 64px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--hairline);
  z-index: 80;
}
.subnav__inner {
  display: flex;
  gap: var(--s-6);
  padding: var(--s-4) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.subnav__inner a {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  padding: 4px 0;
  position: relative;
  transition: color 150ms var(--ease-out);
}
.subnav__inner a:hover { color: var(--text-primary); }

/* ---- ARCHITECTURE RADIAL DIAGRAM -------------------------- */
.arch-diagram {
  background: var(--canvas-subtle);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: var(--s-9) var(--s-7);
  text-align: center;
}
.arch-diagram__center {
  display: inline-block;
  padding: var(--s-4) var(--s-6);
  border: 1.5px solid var(--accent-deep);
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent-deep);
  margin-bottom: var(--s-8);
  background: var(--canvas);
}
.arch-diagram__connections {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  position: relative;
}
.arch-diagram__node .label { display: block; margin-bottom: var(--s-2); }
.arch-diagram__node p { color: var(--text-secondary); margin: 0; font-size: 14px; }
@media (max-width: 639px) { .arch-diagram__connections { grid-template-columns: 1fr; } }

/* ---- PROGRESSION (MAX → MINI-MAX → ECOSYSTEM) -------------- */
.progression {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-8) 0;
}
.progression__node {
  padding: var(--s-6);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  text-align: center;
}
.progression__node .label { display: block; margin-bottom: var(--s-2); }
.progression__node h4 { margin-bottom: var(--s-2); }
.progression__node p { font-size: 14px; color: var(--text-secondary); margin: 0; }
.progression__arrow {
  color: var(--accent-bright);
  font-size: 20px;
}
@media (max-width: 1023px) {
  .progression { grid-template-columns: 1fr; }
  .progression__arrow { transform: rotate(90deg); justify-self: center; }
}

/* ---- REGIONAL MAP (simple list rendering) ----------------- */
.map-block {
  background: var(--canvas-subtle);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: var(--s-8);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--s-7);
  align-items: start;
}
.map-surface {
  aspect-ratio: 16/9;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.map-legend h5 { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--s-3); }
.map-legend ul { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: flex; flex-direction: column; gap: 6px; }
.map-legend li { font-size: 15px; color: var(--text-primary); display: flex; align-items: center; gap: var(--s-3); }
.map-legend li::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-deep);
}
.map-legend .pending li::before { background: var(--hairline-strong); }
@media (max-width: 1023px) { .map-block { grid-template-columns: 1fr; } }

/* ---- CLOSE SECTION (centered close) ----------------------- */
.close {
  text-align: center;
  padding: var(--s-10) 0;
}
.close h2 { max-width: 20ch; margin: 0 auto var(--s-7); }

/* ---- TWO-COL (content + supporting) ----------------------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-9);
  align-items: start;
}
@media (max-width: 1023px) { .two-col { grid-template-columns: 1fr; gap: var(--s-6); } }
.two-col p { color: var(--text-secondary); }

/* ---- SCROLL REVEAL STATES --------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-reveal) var(--ease-entrance),
              transform var(--dur-reveal) var(--ease-entrance);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
.section--dark [data-reveal] {
  transition: opacity var(--dur-reveal-dark) var(--ease-entrance),
              transform var(--dur-reveal-dark) var(--ease-entrance);
  transform: translateY(4px);
}
.section--dark [data-reveal].is-visible { transform: translateY(0); }

/* ---- REVEAL DELAY STAGGER (SASA-style) -------------------- */
/* Layer onto any [data-reveal] to push its transition-delay forward.
   Works in increments of 80ms — same cadence SASA uses for cascading reveals.
   Use cases: tier cards, licensing cards, region stat grids, capital priorities. */
[data-reveal].reveal-delay-1 { transition-delay: 80ms; }
[data-reveal].reveal-delay-2 { transition-delay: 160ms; }
[data-reveal].reveal-delay-3 { transition-delay: 240ms; }
[data-reveal].reveal-delay-4 { transition-delay: 320ms; }
[data-reveal].reveal-delay-5 { transition-delay: 400ms; }
[data-reveal].reveal-delay-6 { transition-delay: 480ms; }

/* ---- STAT BREATHING (subtle pulse on accent stats) -------- */
/* Gentle scale + brightness pulse on accent values. Caller adds .stat-breathe.
   Stagger via inline style="animation-delay: Xms" so pulses cascade rather
   than fire in unison. Caps at 4.8s cycle so it never feels frantic. */
@keyframes statBreathe {
  0%, 100% { transform: scale(1);    filter: brightness(1);    }
  50%      { transform: scale(1.025); filter: brightness(1.08); }
}
.stat-breathe {
  animation: statBreathe 4.8s ease-in-out infinite;
  display: inline-block;
  transform-origin: center center;
  will-change: transform, filter;
}

/* ---- SHIMMER SWEEP (horizontal rail) ---------------------- */
/* Bright sliver that sweeps across a horizontal rule, indicating
   "energy flowing" through a structural moment. Use sparingly —
   the punchline rule between Sections 06 and 07, the SASA hero rule. */
@keyframes shimmerSweep {
  0%   { transform: translateX(-110%); opacity: 0; }
  10%  { opacity: 0.95; }
  90%  { opacity: 0.95; }
  100% { transform: translateX(110%); opacity: 0; }
}
.shimmer-rail {
  position: relative;
  overflow: hidden;
}
.shimmer-rail::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 22%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.85) 50%,
    rgba(255,255,255,0) 100%);
  mix-blend-mode: overlay;
  animation: shimmerSweep 5.6s ease-in-out infinite;
  pointer-events: none;
}
/* Light-mode variant — uses accent green sliver on white rails */
.shimmer-rail--accent::before {
  background: linear-gradient(90deg,
    rgba(59,149,70,0) 0%,
    rgba(59,149,70,0.55) 50%,
    rgba(59,149,70,0) 100%);
  mix-blend-mode: multiply;
}

/* ---- SECT-IDX NUM PULSE-GLOW (one-shot on reveal) --------- */
/* When a numbered section enters viewport, the green index num
   gets a brief pulse-glow then settles. Not infinite — fires once
   per scroll-in. Combined with the existing rule-draw for a tight
   "section booting up" feel. */
@keyframes sectIdxGlow {
  0%   { text-shadow: 0 0 0 currentColor; transform: scale(1); }
  35%  { text-shadow: 0 0 18px currentColor; transform: scale(1.08); }
  100% { text-shadow: 0 0 0 currentColor; transform: scale(1); }
}
[data-reveal] .sect-idx__num {
  display: inline-block;
  transform-origin: center center;
}
[data-reveal].is-visible .sect-idx__num {
  animation: sectIdxGlow 1400ms cubic-bezier(0.16, 1, 0.3, 1) 300ms 1;
}

/* ---- NAV LINK UNDERLINE REVEAL (SASA cubic bezier) -------- */
/* Tightens the existing nav link hover into the SASA pattern:
   left-origin scaleX with sharper cubic. */
.nav__links a {
  position: relative;
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 350ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.nav__links a:hover::after,
.nav__links a.is-active::after {
  transform: scaleX(1);
}

/* ---- KEN BURNS (subtle, scoped) ---------------------------- */
/* Slow scale + drift loop for atmospheric imagery. Used outside the homepage hero,
   which already runs its own ken-burns timing. Variants control intensity:
   --kb-large: technology page banners (more drift, longer cycle)
   --kb-subtle: studio shots like the MINI-MAX hero (minimal drift) */

@keyframes kbDrift {
  0%   { transform: scale(1.00) translate3d(0, 0, 0); }
  50%  { transform: scale(1.06) translate3d(-1.2%, -0.6%, 0); }
  100% { transform: scale(1.00) translate3d(0, 0, 0); }
}
@keyframes kbDriftSubtle {
  0%   { transform: scale(1.00) translate3d(0, 0, 0); }
  50%  { transform: scale(1.035) translate3d(-0.6%, -0.3%, 0); }
  100% { transform: scale(1.00) translate3d(0, 0, 0); }
}

.kb {
  animation: kbDrift 38s ease-in-out infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}
.kb--subtle {
  animation: kbDriftSubtle 32s ease-in-out infinite;
}

/* ---- COUNTER (count-up) ----------------------------------- */
/* Counters animate via JS on scroll-enter. The CSS here just ensures
   the element doesn't visually flicker during initial render — the
   tabular-nums prevents width jitter as digits change. */
[data-counter] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ---- SECTION-INDEX RULE DRAW ------------------------------ */
/* The hairline trailing each numbered section index draws in
   left-to-right when its parent [data-reveal] becomes visible. */
.sect-idx__rule {
  position: relative;
  overflow: hidden;
}
[data-reveal] .sect-idx__rule {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 720ms cubic-bezier(0.16, 1, 0.3, 1) 200ms;
}
[data-reveal].is-visible .sect-idx__rule {
  transform: scaleX(1);
}

/* ---- SECT-IDX SHIMMER ACCENT (auto-fires after rule draws) -- */
/* Once the section index rule has drawn left-to-right, a soft green
   sliver sweeps across it on a slow infinite loop — the "accent of
   awesome" at every numbered section boundary. Dark sections use the
   white sliver instead (better contrast against deep canvas). */
.sect-idx__rule::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 28%;
  background: linear-gradient(90deg,
    rgba(59,149,70,0) 0%,
    rgba(59,149,70,0.65) 50%,
    rgba(59,149,70,0) 100%);
  mix-blend-mode: multiply;
  opacity: 0;
  transform: translateX(-110%);
  pointer-events: none;
}
[data-reveal].is-visible .sect-idx__rule::after {
  animation: shimmerSweep 6.4s ease-in-out 920ms infinite;
  opacity: 1;
}
.section--dark .sect-idx__rule::after {
  background: linear-gradient(90deg,
    rgba(122,193,66,0) 0%,
    rgba(122,193,66,0.55) 50%,
    rgba(122,193,66,0) 100%);
  mix-blend-mode: screen;
}

/* ---- REVEAL VARIANTS (per-section motion personalities) --- */
/* Layer onto [data-reveal] for different scroll-in characters.
   Use sparingly — pick ONE variant per section to keep contrast. */

/* Slow lift — headline / hero gravity. 1100ms instead of default ~400ms. */
[data-reveal].reveal-slow {
  transition: opacity 1100ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Slide-in from the left edge — pairs naturally with reveal-from-right. */
[data-reveal].reveal-from-left {
  transform: translateX(-12px);
  transition: opacity 750ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 750ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].reveal-from-left.is-visible { transform: translateX(0); }

[data-reveal].reveal-from-right {
  transform: translateX(12px);
  transition: opacity 750ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 750ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].reveal-from-right.is-visible { transform: translateX(0); }

/* Zoom-in — element starts very slightly larger and settles back. Subtle. */
[data-reveal].reveal-zoom {
  transform: scale(1.04);
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].reveal-zoom.is-visible { transform: scale(1); }

/* ---- WORD-STAGGER (per-word headline reveal) -------------- */
/* Markup: <h1 class="word-stagger"><span>Word</span> <span>Word</span></h1>
   Each <span class="word"> child fades+lifts in sequence (90ms apart).
   The .word-stagger element itself gets data-reveal so it triggers on scroll. */
.word-stagger .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].word-stagger.is-visible .word { opacity: 1; transform: translateY(0); }
[data-reveal].word-stagger.is-visible .word:nth-child(1)  { transition-delay:    0ms; }
[data-reveal].word-stagger.is-visible .word:nth-child(2)  { transition-delay:   90ms; }
[data-reveal].word-stagger.is-visible .word:nth-child(3)  { transition-delay:  180ms; }
[data-reveal].word-stagger.is-visible .word:nth-child(4)  { transition-delay:  270ms; }
[data-reveal].word-stagger.is-visible .word:nth-child(5)  { transition-delay:  360ms; }
[data-reveal].word-stagger.is-visible .word:nth-child(6)  { transition-delay:  450ms; }
[data-reveal].word-stagger.is-visible .word:nth-child(7)  { transition-delay:  540ms; }
[data-reveal].word-stagger.is-visible .word:nth-child(8)  { transition-delay:  630ms; }
[data-reveal].word-stagger.is-visible .word:nth-child(9)  { transition-delay:  720ms; }
[data-reveal].word-stagger.is-visible .word:nth-child(10) { transition-delay:  810ms; }

/* ---- WASH-SEQUENTIAL (patent map regional fade-in) -------- */
/* Replaces the old wash-pulse breathing. Each wash starts at opacity 0
   and one-shot fades to 0.55 in sequence as the section reveals.
   Caller adds .wash-sequential to .patent-map__washes container. */
@keyframes washFadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 0.55; transform: scale(1); }
}
.wash-sequential .patent-map__wash {
  opacity: 0;
  transform: scale(0.9);
}
[data-reveal].is-visible .wash-sequential .patent-map__wash,
.wash-sequential.is-visible .patent-map__wash {
  animation: washFadeIn 1400ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.wash-sequential .patent-map__wash:nth-child(1) { animation-delay:  300ms; }
.wash-sequential .patent-map__wash:nth-child(2) { animation-delay:  500ms; }
.wash-sequential .patent-map__wash:nth-child(3) { animation-delay:  700ms; }
.wash-sequential .patent-map__wash:nth-child(4) { animation-delay:  900ms; }
.wash-sequential .patent-map__wash:nth-child(5) { animation-delay: 1100ms; }
.wash-sequential .patent-map__wash:nth-child(6) { animation-delay: 1300ms; }
.wash-sequential .patent-map__wash:nth-child(7) { animation-delay: 1500ms; }

/* ---- THESIS BRIDGE CLAUSES (two-clause sequential reveal) - */
.thesis-bridge__clause {
  display: inline-block;
}

/* ---- HAIRLINE VERTICAL DRAW ------------------------------- */
/* For vertical rules (e.g. arch-anchor__rule beside the $30M stat).
   Caller adds .rule-draw-v on the rule element inside a [data-reveal] parent. */
.rule-draw-v {
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1000ms cubic-bezier(0.16, 1, 0.3, 1) 200ms;
}
[data-reveal].is-visible .rule-draw-v,
[data-reveal].is-visible.rule-draw-v {
  transform: scaleY(1);
}

/* ---- VIDEO FRAME VIGNETTE — dark gradient around video embeds ----
   Applied to any iframe in a .tech-video__frame or .doc-video wrapper.
   Creates an Apple TV+ trailer-style framing while still allowing
   the iframe to be interacted with. */
.tech-video__frame,
.doc-video {
  position: relative;
  isolation: isolate;
}
.tech-video__frame::before,
.tech-video__frame::after,
.doc-video::before,
.doc-video::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.tech-video__frame::before,
.doc-video::before {
  box-shadow: inset 0 0 80px 12px rgba(0,0,0,0.45);
  border-radius: inherit;
}
.tech-video__frame::after,
.doc-video::after {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: inherit;
}

/* ---- CLOSE-MARK UNFURL — line/dot/text/dot/line ornament ----
   Animates the two horizontal lines outward from the center dots on
   reveal, like a banner unfurling. Generic .close-mark utility. */
.close-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.close-mark__line {
  display: inline-block;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  width: 80px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1) 260ms;
}
.close-mark__line--left { transform-origin: right; }
.close-mark__line--right { transform-origin: left; }
.close-mark__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-deep);
}
.close-mark__text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
[data-reveal].is-visible .close-mark__line { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .close-mark__line { transform: scaleX(1); transition: none; }
}

/* ---- CHANNELS ACCENT BAR (under stat values) ----
   Mini horizontal bars under channel stats. Reuses range-bar pattern. */
.channels__channel-bar {
  display: block;
  margin-top: var(--s-3);
  width: 100%;
  max-width: 200px;
  height: 2px;
  background: rgba(255,255,255,0.10);
  position: relative;
  overflow: hidden;
}
.channels__channel-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--accent-bright), var(--accent-deep));
  transform: scaleX(var(--bar-fill, 0));
  transform-origin: left center;
  transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1) 200ms;
}
[data-reveal].is-visible .channels__channel-bar::after { transform: scaleX(var(--bar-fill, 0)); }
@media (prefers-reduced-motion: reduce) {
  .channels__channel-bar::after { transition: none; }
}

/* ---- RANGE-STAT PRIMITIVE — reusable dual-counter + bar ----
   Factored out of the index §02 "2-20 ha" treatment for reuse.
   Markup:
     <span class="range-stat">
       <span data-scroll-scrub data-counter-to="2">0</span>
       <span class="range-stat__dash">—</span>
       <span data-scroll-scrub data-counter-to="20">0</span>
       <span class="range-stat__unit">ha</span>
     </span>
     <span class="range-stat__bar" aria-hidden="true"></span> */
.range-stat {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.range-stat > [data-scroll-scrub] {
  display: inline-block;
  min-width: 1.4ch;
  text-align: center;
}
.range-stat__dash {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--accent-bright);
  margin: 0 0.05em;
  display: inline-block;
  position: relative;
  top: -0.12em;
  transform-origin: center;
  transform: scaleX(calc(0.55 + var(--scrub-p, 0) * 0.55));
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.range-stat__unit {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--text-secondary);
  margin-left: 0.32em;
  letter-spacing: -0.012em;
}
.range-stat__bar {
  display: block;
  margin-top: var(--s-3);
  width: 100%;
  max-width: 240px;
  height: 3px;
  background: var(--hairline);
  position: relative;
  overflow: hidden;
}
.range-stat__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--accent-bright), var(--accent-deep));
  transform: scaleX(var(--scrub-p, 0));
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.section--dark .range-stat__bar { background: rgba(255,255,255,0.12); }
@media (prefers-reduced-motion: reduce) {
  .range-stat__dash { transform: scaleX(1); transition: none; }
  .range-stat__bar::after { transform: scaleX(1); transition: none; }
}

/* ---- STRIKE-THROUGH DRAW — line draws on reveal -----------
   Replaces static text-decoration on .discipline__strike. The strike
   line is an absolutely-positioned span that scaleX(0→1) on reveal. */
.discipline__strike {
  position: relative;
  display: inline-block;
}
.discipline__strike::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 52%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1) 280ms;
}
[data-reveal].is-visible .discipline__strike::after,
[data-reveal] .discipline__strike[data-strike-now]::after,
[data-reveal].is-visible .discipline__cell .discipline__strike::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .discipline__strike::after { transform: scaleX(1); transition: none; }
}

/* ---- MAGNETIC + TILT — cursor-tracked card transforms ---- */
/* Applied to cards with [data-magnetic data-tilt]. JS in motion.js
   sets --mx and --my (-1..1) on pointermove and eases back on leave.
   Subtle: 6px max translation, ±3° max rotation, perspective container. */
[data-magnetic][data-tilt] {
  --mx: 0;
  --my: 0;
  transform-style: preserve-3d;
  transform: perspective(1200px)
             translate3d(calc(var(--mx) * 5px), calc(var(--my) * 4px), 0)
             rotateX(calc(var(--my) * -2.4deg))
             rotateY(calc(var(--mx) * 2.8deg));
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
@media (hover: none) {
  [data-magnetic][data-tilt] { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-magnetic][data-tilt] { transform: none !important; }
}

/* ---- HAIRLINE HORIZONTAL DRAW (generic) ------------------- */
/* Generalization of the sect-idx rule draw — applicable anywhere
   you have a horizontal rule that should "open" the section. */
.rule-draw-h {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1) 100ms;
}
[data-reveal].is-visible .rule-draw-h,
[data-reveal].is-visible.rule-draw-h {
  transform: scaleX(1);
}

/* ---- REDUCED MOTION --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .signal__dot { animation: none; }
  .kb, .kb--subtle { animation: none; transform: none; }
  [data-reveal] .sect-idx__rule { transform: scaleX(1); }
  .stat-breathe { animation: none; transform: none; filter: none; }
  .shimmer-rail::before { animation: none; opacity: 0; }
  .sect-idx__rule::after { animation: none; opacity: 0; }
  [data-reveal].is-visible .sect-idx__num { animation: none; }
  [data-reveal].reveal-delay-1,
  [data-reveal].reveal-delay-2,
  [data-reveal].reveal-delay-3,
  [data-reveal].reveal-delay-4,
  [data-reveal].reveal-delay-5,
  [data-reveal].reveal-delay-6 { transition-delay: 0ms; }
  .nav__links a::after { transition: none; }
  [data-reveal].reveal-slow,
  [data-reveal].reveal-from-left,
  [data-reveal].reveal-from-right,
  [data-reveal].reveal-zoom { transition: none; transform: none; }
  .word-stagger .word { opacity: 1; transform: none; transition: none; }
  .wash-sequential .patent-map__wash { animation: none; opacity: 0.55; transform: none; }
  .rule-draw-v, .rule-draw-h { transform: none; transition: none; }
}

/* ---- UTILITIES -------------------------------------------- */
.center { text-align: center; }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }
.mb-7 { margin-bottom: var(--s-7); }
.mb-8 { margin-bottom: var(--s-8); }