/* =========================================================================
   TougeNation 2026 — Sponsorship Proposal
   "Route card, not magazine."
   Design tokens + component styles.
   ========================================================================= */

/* ----- Tokens ----- */
:root {
  /* Color */
  --c-paper: #FFFFFF;
  --c-ink: #0E0E10;
  --c-graphite: #1A1A1D;
  --c-rule: #1A1A1D;
  --c-red: #D12020;
  --c-tan: #F2F0EA;
  --c-mute: #6B6B70;
  --c-faint: #B8B8BC;

  /* Type */
  --f-display: "Orbitron", "Archivo Narrow", "Inter Tight", system-ui, sans-serif;
  --f-body: "forma-djr-micro", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

  /* Orbitron reads ~25% larger than the old Archivo Narrow, so every
     display-font size is multiplied by this. Tune one number to rescale
     all headlines together (1 = no scaling). */
  --f-display-scale: 0.75;

  /* Scale (modular, anchored on body 16px) */
  --t-xs: 0.75rem;     /* 12 */
  --t-sm: 0.875rem;    /* 14 */
  --t-base: 1rem;      /* 16 */
  --t-md: 1.125rem;    /* 18 */
  --t-lg: 1.5rem;      /* 24 */
  --t-xl: 2rem;        /* 32 */
  --t-2xl: 2.75rem;    /* 44 */
  --t-3xl: 3.75rem;    /* 60 */
  --t-4xl: 5rem;       /* 80 */
  --t-5xl: 7rem;       /* 112 — hero only */

  /* Spacing */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Page geometry */
  --page-max: 1200px;
  --page-gutter: clamp(1.25rem, 4vw, 3rem);
  --band-h: 56px;

  /* Other */
  --rule-w: 1px;
  --rule-w-heavy: 2px;
  --radius: 0; /* sharp by design */
  --transition: 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* reveal/cascade easing */
}

/* ----- Reset (light) ----- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--t-base);
  font-weight: 300;            /* Forma DJR Micro Light is the default body weight */
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The body default is Light (300). <strong>/<b> default to `font-weight:
   bolder`, which from 300 only steps up to Regular (400) — i.e. NOT bold.
   Force real Bold (700) so emphasis stays emphatic against the Light body.
   Kit ships 700, so this is a true bold cut, not synthesized. */
strong,
b {
  font-weight: 700;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition);
}
a:hover {
  color: var(--c-red);
}
:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 3px;
}

/* ----- Persistent top band (signature element) ----- */
.band {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--band-h);
  background: var(--c-paper);
  border-bottom: var(--rule-w) solid var(--c-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--page-gutter);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}
.band__mark {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--t-sm);
}
.band__mark-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--c-red);
  border-radius: 50%;
}
.band__title {
  color: var(--c-graphite);
}
.band__index {
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}
.band__index .band__sep {
  color: var(--c-faint);
  margin: 0 0.25em;
}
.band__index .band__current {
  color: var(--c-red);
  font-weight: 700;
}

/* ----- Page frame ----- */
.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

/* ----- Section (a single page-spread of the deck) ----- */
.section {
  padding: var(--s-9) 0;
  border-bottom: var(--rule-w) solid var(--c-faint);
  position: relative;
  scroll-margin-top: var(--band-h);
}
.section:last-of-type {
  border-bottom: 0;
}
.section__head {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--s-5);
  align-items: baseline;
  margin-bottom: var(--s-7);
}
.section__num {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--c-red);
  padding-top: 0.4em;
}
.section__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 5vw, var(--t-3xl));
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}
.section__lede {
  font-family: var(--f-body);
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--c-graphite);
  max-width: 60ch;
  margin: var(--s-4) 0 0;
}

/* ----- Cover ----- */
.cover {
  min-height: calc(100vh - var(--band-h));
  display: grid;
  grid-template-rows: 1fr auto;
  padding: var(--s-8) 0;
  position: relative;
}
.cover__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  align-content: center;
}
.cover__eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-graphite);
}
.cover__eyebrow .cover__eyebrow-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--c-red);
  border-radius: 50%;
  margin: 0 0.6em 0.1em 0;
  vertical-align: middle;
}
.cover__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(3rem, 9vw, var(--t-5xl));
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0;
}
.cover__title em {
  font-style: normal;
  color: var(--c-red);
  display: inline-block;
  transition: transform 0.15s var(--ease-out);
  transform-origin: left center;
}
.cover__title em:hover {
  transform: scale(1.04);
}
.cover__sub {
  font-family: var(--f-body);
  font-size: var(--t-lg);
  line-height: 1.4;
  color: var(--c-graphite);
  max-width: 38ch;
  margin: 0;
}
.cover__hero-stat {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  border-top: var(--rule-w-heavy) solid var(--c-ink);
  padding-top: var(--s-5);
  margin-top: var(--s-5);
}
.cover__hero-num {
  font-family: var(--f-mono);
  font-size: clamp(2.5rem, 7vw, var(--t-3xl));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
.cover__hero-label {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--t-sm);
  letter-spacing: 0.1em;
  color: var(--c-graphite);
}
.cover__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-4) var(--s-6);
  border-top: var(--rule-w) solid var(--c-ink);
  padding-top: var(--s-5);
  margin-top: var(--s-6);
  font-family: var(--f-mono);
  font-size: var(--t-sm);
}
.cover__meta-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.cover__meta-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--t-xs);
  color: var(--c-mute);
}
.cover__meta-value {
  font-weight: 500;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
.cover__cta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: var(--s-2);
}
.cover__cta::before {
  content: "↓";
  display: inline-block;
  color: var(--c-red);
  font-weight: 700;
}

/* ----- Section skip-nav (cover) -----
   Evenly distributed number links, one per visible section. flex:1 1 0
   makes every link an equal-width column regardless of count, so the
   row stays balanced if sections are added/hidden. */
.cover__nav {
  display: flex;
  width: 100%;
  border-top: var(--rule-w) solid var(--c-ink);
  padding-top: var(--s-4);
  margin-top: var(--s-5);
}
.cover__nav-link {
  flex: 1 1 0;
  text-align: center;
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--c-graphite);
  text-decoration: none;
  padding: var(--s-2) 0;
  transition: color 0.15s ease, transform 0.2s var(--ease-out);
  transform-origin: center bottom;
}
.cover__nav-link:hover,
.cover__nav-link:focus-visible {
  color: var(--c-red);
  transform: scale(1.25);
}

/* ----- "Touge" definition block ----- */
.definition {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--s-7);
  align-items: start;
}
.definition__term {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(4rem, 12vw, var(--t-5xl));
  line-height: 0.85;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.definition__term::after {
  content: ".";
  color: var(--c-red);
}
.definition__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.definition__body p {
  margin: 0;
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--c-ink);
  max-width: 60ch;
}
.definition__body p em {
  color: var(--c-red);
  font-style: normal;
  font-weight: 500;
}
.definition__pull {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-lg);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  border-left: 3px solid var(--c-red);
  padding-left: var(--s-4);
  margin-top: var(--s-3);
}

/* ----- Growth arc ----- */
.arc {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
.arc__row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--s-5);
  align-items: start;
  /* Top padding is 2px more than the bottom to visually
     match, because the border-top eats 1px of the top
     padding while there's no border on the bottom of
     non-last rows. */
  padding: calc(var(--s-4) + 12px) 0 var(--s-4);
  border-top: var(--rule-w) solid var(--c-ink);
}
.arc__row:last-child {
  border-bottom: var(--rule-w) solid var(--c-ink);
  /* The 2026 label is a single line, so the last row ends
     much earlier than the rows above. Extra bottom padding
     gives the same visual breathing room as the rows whose
     labels wrap to 2 lines. */
  padding-bottom: calc(var(--s-4) * 3.25);
}
/* The TougeNation 2026 row gets the dark-teal treatment so it reads as a
   distinct highlight box. Full-width band (no horizontal padding) keeps
   its year/number columns aligned with the rows above; the existing
   border-top and last-child border-bottom frame it as a box. The row's
   text is already light (graphite/ink/lime), so it stays readable on teal
   without recoloring. */
.arc__row--tan {
  background: var(--c-tan);
}
.arc__year {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--c-graphite);
  /* Manually center the year text in the row's vertical
     space (matches the visual center of the attendee
     number, which is the row's anchor element). */
  padding-top: 1.4em;
  /* Nudge the year column right a hair off the left edge. */
  padding-left: var(--s-2);
}
.arc__year .arc__year-eyebrow {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-graphite);
  line-height: 1;
  /* Tighter than the default eyebrow spacing so the year
     underneath lands at roughly the same Y as the other
     rows' year numbers (which have no eyebrow). */
  margin-bottom: 2px;
}
.arc__year .arc__year-num {
  display: block;
  font-size: var(--t-md);
  color: var(--c-ink);
  margin-top: 0;
  line-height: 1;
}
/* Year cells WITHOUT an eyebrow (rows 2022-2025) start
   too high in the cell because there's no label above
   the year. Push the year down by ~13px so it lands at
   the same Y as 2026's year (which sits below the
   "TougeNation" eyebrow). The 2026 row is excluded
   automatically because it has .arc__year-eyebrow. */
.arc__year:not(:has(.arc__year-eyebrow)) .arc__year-num {
  margin-top: 13px;
}
.arc__year-num--red {
  color: var(--c-red);
}
.arc__body {
  display: grid;
  /* The number stack is a fixed 200px so every row's
     label column starts at the same X, regardless of how
     wide the number is. The number is right-aligned within
     the column so '100' (3 chars) and '20,000+' (7 chars)
     both end at the same X. */
  grid-template-columns: 200px 1fr;
  gap: calc(var(--s-5) * 4);
  align-items: start;
}
/* Stacks the "Attendees" unit label below the number.
   Both are right-aligned so the text edge lines up.
   Small gap (1px) and a slight negative top margin on
   the unit to bring it close to the number without
   colliding with it. */
.arc__num-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.arc__unit {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.05em;
  color: var(--c-graphite);
  text-align: right;
  text-transform: uppercase;
  margin-top: -1.3em;
  line-height: 1;
}
.arc__num {
  font-family: var(--f-mono);
  font-size: clamp(1.75rem, 4vw, var(--t-2xl));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-align: right;
}
.arc__num--red {
  color: var(--c-red);
}
.arc__label {
  font-family: var(--f-body);
  font-size: var(--t-base);
  color: var(--c-graphite);
  line-height: 1.4;
  /* Push the description down so it visually starts
     below the attendee number rather than aligned with
     its top edge. ~1.5rem ≈ two lines at --t-base. */
  padding-top: 1.5rem;
}

/* ----- Stat grid ----- */
.statgrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: var(--rule-w) solid var(--c-ink);
  border-radius: 0;
  margin-top: var(--s-6);
}
/* 2-up variant for a single proof point (e.g. 12+ events / 4 years).
   Media queries override this for ≤900px (→ 2-col stays) and ≤600px (→ 1-col). */
.statgrid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.statgrid__cell {
  padding: var(--s-5) var(--s-4);
  border-right: var(--rule-w) solid var(--c-ink);
  background: var(--c-paper);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.statgrid__cell:last-child {
  border-right: 0;
}
.statgrid__cell--tan {
  background: var(--c-tan);
}
.statgrid__num {
  font-family: var(--f-mono);
  font-size: clamp(1.5rem, 3vw, var(--t-xl));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.01em;
}
.statgrid__num--red {
  color: var(--c-red);
}
.statgrid__label {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  color: var(--c-graphite);
  line-height: 1.2;
}

/* ----- Founders ----- */
.founders {
  display: grid;
  /* minmax(0, 1fr) — without the 0 min, a 1fr track's min-size is auto
     (min-content). The longest founder name ("Skyler Ashton") is kept on
     one line by white-space: nowrap below, and when its min-content
     exceeds the equal 1fr share it forces that column wider — which is
     what made Skyler's box wider than Caleb's and Noah's. minmax(0, 1fr)
     zeroes the floor so all three tracks stay exactly equal. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: var(--rule-w) solid var(--c-ink);
  margin-top: var(--s-6);
}
.founder {
  padding: var(--s-6);
  display: grid;
  /* Layout:
     row 1: portrait | name + role
     row 2: bio (spans both columns → full card width) */
  grid-template-columns: 100px 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--s-5);
  row-gap: var(--s-4);
  align-items: start;
  border-right: var(--rule-w) solid var(--c-ink);
}
/* The name+role header sits next to the portrait in row 1. */
.founder__header {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
/* The bio breaks out to its own row, full-width. */
.founder__bio {
  grid-column: 1 / -1;
  grid-row: 2;
}
.founder:last-child {
  border-right: 0;
}
.founder__portrait {
  width: 100px;
  height: 100px;
  background: var(--c-tan);
  border: var(--rule-w) solid var(--c-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  color: var(--c-mute);
  text-align: center;
  line-height: 1.2;
}
.founder__name {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-lg);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
  margin: 0;
  /* Names may wrap. The founder cards now use minmax(0, 1fr)
     columns (see .founders), so each card is exactly the same
     width regardless of content. If a name wraps to two lines
     it only adds height inside that one card — it no longer
     pushes the column wider, so the three boxes stay even. */
  overflow-wrap: anywhere;
}
.founder__role {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-red);
  line-height: 1.2;
  margin: 0;
}
.founder__bio {
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--c-graphite);
  margin: 0;
}

/* ----- Pillars (track-record section) -----
   Three-up bordered grid, same border language as .founders / .statgrid.
   One cell can carry the tan accent via .pillar--tan. */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: var(--rule-w) solid var(--c-ink);
  margin-top: var(--s-6);
}
.pillar {
  padding: var(--s-6);
  border-right: var(--rule-w) solid var(--c-ink);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.pillar:last-child {
  border-right: 0;
}
.pillar--tan {
  background: var(--c-tan);
}
.pillar__label {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-red);
  margin: 0;
}
.pillar__body {
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--c-ink);
  margin: 0;
}

/* ----- Three experiences ----- */
.experiences {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: var(--rule-w) solid var(--c-ink);
  margin-top: var(--s-6);
}
.exp {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border-bottom: var(--rule-w) solid var(--c-ink);
  align-items: stretch;
}
.exp:last-child {
  border-bottom: 0;
}
.exp__no {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--c-red);
  padding: var(--s-5) var(--s-4) var(--s-3);
  border-bottom: var(--rule-w) solid var(--c-ink);
  background: var(--c-tan);
}
.exp__head {
  padding: var(--s-5) var(--s-4);
  border-bottom: var(--rule-w) solid var(--c-ink);
  border-right: var(--rule-w) solid var(--c-ink);
}
.exp__name {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-xl);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1;
}
.exp__when {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-graphite);
  margin-top: var(--s-2);
}
.exp__body {
  padding: var(--s-5) var(--s-4);
  /* No right border — the body is the last column in
     row 1, so its right edge is the card's right edge.
     A border there was creating a double vertical line
     next to the number/6-routes cell. */
}
.exp__num {
  font-family: var(--f-mono);
  font-size: var(--t-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  display: block;
  margin-bottom: var(--s-2);
}
.exp__desc {
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--c-graphite);
  margin: 0;
}
.exp__sponsor {
  padding: var(--s-5) var(--s-4);
  background: var(--c-paper);
}
.exp__sponsor-label {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-graphite);
  margin: 0 0 var(--s-3);
}
.exp__sponsor ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.exp__sponsor li {
  font-size: var(--t-sm);
  line-height: 1.4;
  padding-left: var(--s-3);
  position: relative;
  color: var(--c-ink);
}
.exp__sponsor li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-red);
  font-family: var(--f-mono);
  font-size: 0.85em;
}
/* "See more content" link — sits bottom-right of each Two Days box, as the
   last item in the sponsor block. Placeholder href for now. */
.exp__more {
  display: block;
  margin-top: var(--s-5);
  text-align: right;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-red);
  text-decoration-color: color-mix(in srgb, var(--c-red) 50%, transparent);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.exp__more:hover,
.exp__more:focus-visible {
  color: var(--c-ink);
  text-decoration-color: var(--c-red);
}

/* ----- Tier table ----- */
.tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: var(--rule-w) solid var(--c-ink);
  margin-top: var(--s-6);
}
.tier {
  display: grid;
  grid-template-columns: 240px 1fr;
  border-bottom: var(--rule-w) solid var(--c-ink);
}
.tier:last-child {
  border-bottom: 0;
}
.tier--headlining {
  background: var(--c-tan);
}
.tier__head {
  padding: var(--s-5);
  border-right: var(--rule-w) solid var(--c-ink);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  justify-content: space-between;
}
.tier__name {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.75rem;   /* was var(--t-xl) (32px); a hair smaller so the titles read as labels, not headlines */
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
  margin: 0;
  transition: transform 0.15s var(--ease-out);
  transform-origin: left center;
}
.tier__name:hover {
  transform: scale(1.04);
}
.tier__name--red {
  color: var(--c-red);
}
.tier__price {
  font-family: var(--f-mono);
  font-size: clamp(1.75rem, 4vw, var(--t-2xl));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
}
.tier__price-label {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-graphite);
  margin-top: var(--s-1);
}
/* Value-framing note, displayed once below the tier grid
   (not inside the Headlining card itself) so the same
   rationale is visible alongside the other two tiers. */
.tier__value-note {
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--c-graphite);
  margin: var(--s-5) 0 0;
  max-width: 60ch;
}
.tier__value-note strong {
  font-family: var(--f-mono);
  color: var(--c-red);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.tier__body {
  padding: var(--s-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
.tier__col h4 {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-graphite);
  margin: 0 0 var(--s-3);
  font-weight: 700;
}
.tier__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.tier__col li {
  font-size: var(--t-sm);
  line-height: 1.4;
  padding-left: var(--s-3);
  position: relative;
}
.tier__col li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-red);
  font-family: var(--f-mono);
  font-size: 0.85em;
}

/* Deferred / annual-partnership box — the TougeNation Partner tier, held
   back from the current 2026 push. Sits in its own bordered box below the
   two active tiers and the value-note. Rendered as a plain tier (no tan
   headlining highlight) so it reads as a secondary option, not the focus. */
.tiers--deferred {
  margin-top: var(--s-7);
}
.tier__deferred-eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-graphite);
  margin: var(--s-7) 0 var(--s-3);
}

/* ----- Designations ----- */
.designations {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: var(--rule-w) solid var(--c-ink);
  margin-top: var(--s-6);
}
.des {
  padding: var(--s-5) var(--s-4);
  border-right: var(--rule-w) solid var(--c-ink);
  border-bottom: var(--rule-w) solid var(--c-ink);
  background: var(--c-paper);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.des:nth-child(3n) {
  border-right: 0;
}
.des:nth-last-child(-n+3) {
  border-bottom: 0;
}
.des--taken {
  background: var(--c-tan);
  position: relative;
  /* Grey out the text inside a held cell so the title
     reads as "claimed" rather than "available." Lowering
     opacity stacks the grey effect on top of the
     already-muted color. The HELD badge stays red for
     emphasis and is un-greyed. */
  color: var(--c-mute);
  opacity: 0.55;
}
.des--taken::before {
  /* Low-opacity grey wash over the tan background so
     the held cell reads as muted rather than warm.
     Sits behind the HELD badge and the cell text. */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-mute);
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}
.des--taken .des__title,
.des--taken .des__cat {
  color: var(--c-mute);
  opacity: 1; /* opacity already inherited; do not double */
  /* Raised above the ::before grey overlay so the text
     is readable. */
  position: relative;
  z-index: 1;
}
/* The "Category" label is rendered once above the grid
   (not repeated inside every tile), so the visual
   hierarchy is: eyebrow label → grid of titles. Matches
   the "Growth" subhead style used in the Who We Are
   section: display face, 800, uppercase, --t-md. */
.designations__eyebrow {
  font-family: var(--f-display);
  font-size: var(--t-md);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-ink);
  /* Large top margin drops the label well below the
     section lede; small bottom margin keeps it visually
     attached to the grid below (the grid itself doesn't
     move). */
  margin: var(--s-7) 0 var(--s-2);
}
.des--taken::after {
  content: "HELD";
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  color: var(--c-red);
  border: 1px solid var(--c-red);
  padding: 2px 6px;
  font-weight: 700;
  /* The parent .des--taken is at opacity 0.55 to mute
     its title; the HELD badge must stay at full opacity
     so the red emphasis reads. Also raised above the
     ::before grey overlay so the badge isn't dimmed. */
  opacity: 1;
  z-index: 1;
}
.des__cat {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-graphite);
  margin: 0;
}
.des__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-md);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
  margin: 0;
}

/* ----- Closing / CTA ----- */
.closing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: start;
}
.closing__main h2 {
  font-family: var(--f-display);
  font-weight: 800;
  /* Same size scale as .tier__name so the closing
     headline and the tier labels feel like a matched
     pair. */
  font-size: var(--t-xl);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-4);
}
.closing__main p {
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--c-ink);
  margin: 0 0 var(--s-4);
  max-width: 50ch;
}
.closing__sign {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-md);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: var(--s-5) 0 0;
}
.closing__sign small {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  color: var(--c-graphite);
  margin-top: var(--s-1);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}
.closing__answer {
  display: inline-block;
  transition: transform 0.15s var(--ease-out);
  transform-origin: left center;
}
.closing__answer:hover {
  transform: scale(1.04);
}
.closing__card {
  background: var(--c-ink);
  color: var(--c-paper);
  padding: var(--s-6);
  border: var(--rule-w) solid var(--c-ink);
}
.closing__card h3 {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--c-paper);
  margin: 0 0 var(--s-4);
  font-weight: 700;
}
.closing__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-1);
  padding: var(--s-3) 0;
  border-top: var(--rule-w) solid rgba(255, 255, 255, 0.18);
}
.closing__row:last-child {
  border-bottom: var(--rule-w) solid rgba(255, 255, 255, 0.18);
}
.closing__label {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.55);
}
.closing__value {
  font-family: var(--f-mono);
  font-size: var(--t-md);
  font-weight: 500;
  color: var(--c-paper);
  font-variant-numeric: tabular-nums;
}
.closing__value a {
  color: var(--c-paper);
  text-decoration-color: var(--c-paper);
}

/* ----- Footer ----- */
.foot {
  border-top: var(--rule-w-heavy) solid var(--c-ink);
  padding: var(--s-5) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-graphite);
  flex-wrap: wrap;
  gap: var(--s-3);
}
.foot__mark {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--c-ink);
  font-size: var(--t-sm);
}
.foot__mark-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--c-red);
  border-radius: 50%;
  margin-right: 0.5em;
  vertical-align: middle;
}

/* =========================================================================
   MOTION — scroll reveal, count-up, hover lift/glow, cover cascade,
   scroll-progress bar, band glitch. Vanilla; no deps.
   Gated behind html.js so the page is fully visible without JS. The global
   reduced-motion killswitch (next block) disables the transitions but
   leaves content visible: .is-visible / .cover.is-in set opacity:1 as a
   static property, so reduced-motion users see content appear instantly.
   ========================================================================= */

/* ---- Scroll reveal (fade-up on enter) ---- */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
html.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---- Staggered children inside a grid/row ---- */
html.js [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
html.js [data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}
html.js [data-reveal-stagger].is-visible > *:nth-child(1)  { transition-delay: 0ms; }
html.js [data-reveal-stagger].is-visible > *:nth-child(2)  { transition-delay: 60ms; }
html.js [data-reveal-stagger].is-visible > *:nth-child(3)  { transition-delay: 120ms; }
html.js [data-reveal-stagger].is-visible > *:nth-child(4)  { transition-delay: 180ms; }
html.js [data-reveal-stagger].is-visible > *:nth-child(5)  { transition-delay: 240ms; }
html.js [data-reveal-stagger].is-visible > *:nth-child(6)  { transition-delay: 300ms; }
html.js [data-reveal-stagger].is-visible > *:nth-child(7)  { transition-delay: 360ms; }
html.js [data-reveal-stagger].is-visible > *:nth-child(8)  { transition-delay: 420ms; }
html.js [data-reveal-stagger].is-visible > *:nth-child(9)  { transition-delay: 480ms; }
html.js [data-reveal-stagger].is-visible > *:nth-child(10) { transition-delay: 540ms; }
html.js [data-reveal-stagger].is-visible > *:nth-child(11) { transition-delay: 600ms; }
html.js [data-reveal-stagger].is-visible > *:nth-child(12) { transition-delay: 660ms; }

/* ---- Cover load-in cascade (plays once the vault reveals the deck) ----
   --cover-i is assigned per element in DOM order by JS, so the cascade
   stays in sequence regardless of nesting. */
html.js [data-cover] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  transition-delay: calc(var(--cover-i, 0) * 80ms);
}
html.js .cover.is-in [data-cover] {
  opacity: 1;
  transform: none;
}

/* ---- Hover scale (stat cells only) ----
   Per the scope decision, the scale-up hover is limited to the stat cells:
   the "2025 in numbers" grid and the operators "12+" / "4 yrs" boxes (each
   its own box). Cards (tiers, founders, pillars, exp, closing) no longer
   scale on hover. !important beats the reveal rule
   (html.js [data-reveal-stagger] > *) which otherwise overrides the hover
   transform and its transition. Opacity stays in the transition so the
   reveal fade is preserved while transform is snappy at 0.15s. */
.statgrid__cell {
  transition: opacity 0.6s var(--ease-out), transform 0.15s var(--ease-out) !important;
}
.statgrid__cell:hover {
  transform: scale(1.03) !important;
  position: relative;
  z-index: 2;
}

/* ---- Cursor spotlight (item 5). A small, brand-tinted disc that follows
   the cursor and brightens the content near it. Cheap to animate: JS
   moves it via transform (compositor-only), so no per-frame repaint of
   the page. Below the sticky band (z-50) and progress bar (z-60) so those
   stay crisp. Off under reduced-motion (JS never creates it). ---- */
.cursor-spotlight {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 280px;
  margin: -140px 0 0 -140px;     /* center the disc on the cursor point */
  border-radius: 50%;
  pointer-events: none;
  z-index: 40;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--c-red) 18%, transparent) 0%,
    color-mix(in srgb, var(--c-red) 8%, transparent) 35%,
    transparent 65%);
  will-change: transform;
  /* transform: translate3d(mx,my,0) set per frame by JS */
}

/* ---- Section title per-letter hover "roll" (mirrors the reference site's
   header: each letter tumbles forward on the X axis when the cursor is
   over it, per-letter). The title still reveals with its .section__head;
   this only adds the hover micro-motion. perspective on the title gives
   the rotateX real depth. The reduced-motion killswitch disables the
   animation; the letters then sit still. ---- */
.section__title { perspective: 500px; }
.title-char {
  display: inline-block;
  transform-origin: 50% 50%;
}
.title-char:hover {
  animation: titleRoll 0.5s var(--ease-out) 1;
}
@keyframes titleRoll {
  0%   { transform: rotateX(0deg) translateY(0); }
  50%  { transform: rotateX(-180deg) translateY(-0.12em); }
  100% { transform: rotateX(-360deg) translateY(0); }
}

/* ---- CTA / closing link hover ---- */
.closing__value a {
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.closing__value a:hover {
  color: var(--c-red);
  text-decoration-color: var(--c-red);
}

/* ---- Scroll-progress bar (top edge, echoes the vault progress-fill) ----
   No width transition: during fast scroll a transition makes the bar lag
   and stutter as it chases each new width. Setting width directly per
   animation frame tracks the scroll exactly and reads smoother. */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--c-red);
  z-index: 60;               /* above the sticky band (z-50) */
  box-shadow: 0 0 9px color-mix(in srgb, var(--c-red) 45%, transparent);
  transform-origin: 0 0;     /* glitch scaleY grows downward, not off-screen up */
}

/* ---- Band glitch on section change ---- */
.band__current.is-glitching {
  animation: bandGlitch 0.3s steps(2, end) 1;
}
@keyframes bandGlitch {
  0%   { text-shadow: 0 0 0 transparent; transform: translateX(0); }
  25%  { text-shadow: -2px 0 var(--c-red), 2px 0 var(--c-red); transform: translateX(-2px); }
  50%  { text-shadow: 2px 0 var(--c-red), -2px 0 var(--c-red); transform: translateX(2px); }
  75%  { text-shadow: -1px 0 var(--c-red), 1px 0 var(--c-red); transform: translateX(-1px); }
  100% { text-shadow: 0 0 0 transparent; transform: translateX(0); }
}

/* ---- Scroll-progress bar glitch on section change (mirrors the band
   number glitch): a brief brightness + thickness pulse so the top edge
   "ticks" each time the active section changes. ---- */
.scroll-progress.is-glitching {
  animation: scrollGlitch 0.35s steps(2, end) 1;
}
@keyframes scrollGlitch {
  0%   { filter: none; transform: scaleY(1); box-shadow: 0 0 9px color-mix(in srgb, var(--c-red) 45%, transparent); }
  20%  { filter: brightness(1.9) saturate(1.4); transform: scaleY(2.5) translateX(-1px); box-shadow: 0 0 16px color-mix(in srgb, var(--c-red) 75%, transparent); }
  45%  { transform: scaleY(1) translateX(1px); }
  70%  { filter: brightness(1.4); transform: scaleY(2.5) translateX(-1px); box-shadow: 0 0 14px color-mix(in srgb, var(--c-red) 75%, transparent); }
  100% { filter: none; transform: scaleY(1); box-shadow: 0 0 9px color-mix(in srgb, var(--c-red) 45%, transparent); }
}

/* ----- Reduced motion -----
   The killswitch is scoped to :root:not(.force-motion) so a reviewer can
   preview the animations by visiting with ?motion=force (the early head
   script adds .force-motion to <html>) — their OS reduced-motion setting
   is ignored for this page session, but everyone else still gets the
   accessibility-safe static experience. */
@media (prefers-reduced-motion: reduce) {
  :root:not(.force-motion) *,
  :root:not(.force-motion) *::before,
  :root:not(.force-motion) *::after {
    animation: none !important;
    transition: none !important;
  }
  :root:not(.force-motion) {
    scroll-behavior: auto;
  }
}

/* ----- Print ----- */
@media print {
  .band {
    position: static;
  }
  .scroll-progress {
    display: none;
  }
  /* Reveal/cascade elements must print fully visible, not stuck at
     opacity:0 if JS never marked them visible before printing. */
  [data-reveal],
  [data-reveal-stagger] > *,
  [data-cover] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .section {
    page-break-inside: avoid;
    padding: var(--s-6) 0;
  }
  body {
    font-size: 11pt;
  }
  a {
    color: var(--c-ink);
    text-decoration: none;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: var(--c-mute);
  }
}

/* ----- Responsive ----- */
@media (max-width: 900px) {
  .statgrid {
    grid-template-columns: repeat(2, 1fr);
  }
  .statgrid__cell {
    border-right: var(--rule-w) solid var(--c-ink);
    border-bottom: var(--rule-w) solid var(--c-ink);
  }
  .statgrid__cell:nth-child(2n) {
    border-right: 0;
  }
  .statgrid__cell:nth-last-child(-n+2) {
    border-bottom: 0;
  }
  .exp {
    grid-template-columns: 1fr;
  }
  .exp__head,
  .exp__body,
  .exp__no {
    border-right: 0;
    border-bottom: var(--rule-w) solid var(--c-ink);
  }
  .exp__no {
    border-bottom: var(--rule-w) solid var(--c-ink);
  }
  .founders {
    grid-template-columns: 1fr;
  }
  .founder {
    border-right: 0;
    border-bottom: var(--rule-w) solid var(--c-ink);
  }
  .founder:last-child {
    border-bottom: 0;
  }
  .pillars {
    grid-template-columns: 1fr;
  }
  .pillar {
    border-right: 0;
    border-bottom: var(--rule-w) solid var(--c-ink);
  }
  .pillar:last-child {
    border-bottom: 0;
  }
  .tier {
    grid-template-columns: 1fr;
  }
  .tier__head {
    border-right: 0;
    border-bottom: var(--rule-w) solid var(--c-ink);
  }
  .tier__body {
    grid-template-columns: 1fr;
  }
  .designations {
    grid-template-columns: repeat(2, 1fr);
  }
  .des {
    border-right: var(--rule-w) solid var(--c-ink);
    border-bottom: var(--rule-w) solid var(--c-ink);
  }
  .des:nth-child(2n) {
    border-right: 0;
  }
  .des:nth-child(3n) {
    border-right: var(--rule-w) solid var(--c-ink);
  }
  .des:nth-child(2n) {
    border-right: 0;
  }
  .des:nth-last-child(-n+2) {
    border-bottom: 0;
  }
  .des:nth-last-child(3) {
    border-bottom: var(--rule-w) solid var(--c-ink);
  }
  .closing {
    grid-template-columns: 1fr;
  }
  .definition {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .band__title {
    display: none;
  }
  .section__head {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }
  .section__num {
    padding-top: 0;
  }
  .statgrid {
    grid-template-columns: 1fr;
  }
  .statgrid__cell {
    border-right: 0;
  }
  .designations {
    grid-template-columns: 1fr;
  }
  .des {
    border-right: 0 !important;
    border-bottom: var(--rule-w) solid var(--c-ink);
  }
  .des:last-child {
    border-bottom: 0;
  }
}

/* ---------------------------------------------------------------------------
   Orbitron is geometric/wide, so it renders ~25% larger than the old
   Archivo Narrow at the same size. Shrink every display-font element by
   --f-display-scale (defined in :root above) so the headings keep their
   original visual weight. Same specificity as the originals, declared last
   so it wins the cascade; delete this block to revert. Weight/color/etc.
   are untouched — only size scales.
   --------------------------------------------------------------------------- */
.band__mark,
.cover__hero-label {
  font-size: calc(var(--t-sm) * var(--f-display-scale));
}
.section__title {
  font-size: calc(clamp(2.25rem, 5vw, var(--t-3xl)) * var(--f-display-scale));
}
.cover__title {
  font-size: calc(clamp(3rem, 9vw, var(--t-5xl)) * var(--f-display-scale));
}
.definition__term {
  font-size: calc(clamp(4rem, 12vw, var(--t-5xl)) * var(--f-display-scale));
}
.definition__pull,
.founder__name {
  font-size: calc(var(--t-lg) * var(--f-display-scale));
}
.arc__unit,
.statgrid__label {
  font-size: calc(var(--t-xs) * var(--f-display-scale));
}
.exp__name {
  font-size: calc(var(--t-xl) * var(--f-display-scale));
}

/* ---------------------------------------------------------------------------
   TEMPORARILY HIDDEN — "Category designations" section (08 — #designations).
   Markup is intact; only suppressed from view. To bring it back, delete this
   one rule.
   --------------------------------------------------------------------------- */
#designations {
  display: none;
}

/* TEMPORARILY HIDDEN — "2026 targets" section (05 — #targets).
   Markup is intact; only suppressed from view. To bring it back, delete
   this one rule. */
#targets {
  display: none;
}