/* ============================================================================
   GRID & SUBSTANCE — Component / block styles
   Built ONLY on tokens.css. Swiss / International Typographic Style.
   Strict modular grid, neutral grotesque, flush-left ragged-right, red as
   functional accent only.
   ============================================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-grotesque);
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--motion-base) var(--ease-standard),
              color var(--motion-base) var(--ease-standard);
}

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

/* ---- Typographic primitives ------------------------------------------------ */
h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  text-wrap: balance;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }

.display   { font-size: var(--fs-700); font-weight: var(--fw-black); line-height: var(--lh-solid); letter-spacing: -0.025em; }
.display-xl{ font-size: var(--fs-800); font-weight: var(--fw-black); line-height: var(--lh-solid); letter-spacing: -0.03em; }
.head-1    { font-size: var(--fs-600); font-weight: var(--fw-black); }
.head-2    { font-size: var(--fs-500); }
.head-3    { font-size: var(--fs-400); }
.head-4    { font-size: var(--fs-300); }
.lead      { font-size: var(--fs-200); line-height: var(--lh-snug); color: var(--text-secondary); max-width: 52ch; }
.body      { font-size: var(--fs-100); color: var(--text-secondary); max-width: var(--measure-text); }
.small     { font-size: var(--fs-75); }
.mono      { font-family: var(--font-mono); }

/* Eyebrow / index label — the Swiss meta system */
.eyebrow {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-75);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow::before {
  content: "";
  width: 18px; height: 0;
  border-top: var(--bw-rule) solid var(--accent);
  transform: translateY(-3px);
}
.eyebrow--num { color: var(--accent-text); }

.index-num {
  font-family: var(--font-mono);
  font-size: var(--fs-75);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-caps);
  color: var(--accent-text);
}

/* ---- Layout grid ----------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--measure-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.section { padding-block: var(--space-9); }
.section--tight { padding-block: var(--space-7); }

.grid12 {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gutter);
}
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-12 { grid-column: span 12; }

@media (max-width: 860px) {
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9 { grid-column: span 12; }
  .container { padding-inline: var(--space-5); }
}

/* Section header — the recurring titling unit (number + rule + title) */
.section-head { margin-bottom: var(--space-7); }
.section-head .head-2 { max-width: 22ch; margin-top: var(--space-3); }
.section-head .lead { margin-top: var(--space-4); }
.rule-top { border-top: var(--bw-rule) solid var(--rule-strong); padding-top: var(--space-3); }
.hr { height: 0; border: 0; border-top: var(--bw-hair) solid var(--rule); margin: 0; }
.hr--strong { border-top-width: var(--bw-rule); border-top-color: var(--rule-strong); }

/* ---- Image treatment ------------------------------------------------------- */
.figure { position: relative; overflow: hidden; background: var(--bg-sunken); border: var(--bw-hair) solid var(--img-frame); }
.figure img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-grade); }
.figure::after { content: ""; position: absolute; inset: 0; background: var(--img-overlay); pointer-events: none; }
.figure--16x9 { aspect-ratio: 16 / 9; }
.figure--3x2  { aspect-ratio: 3 / 2; }
.figure--4x3  { aspect-ratio: 4 / 3; }
.figure--tall { aspect-ratio: 3 / 4; }
.figure .figure-tag {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-mono); font-size: var(--fs-50);
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
}

/* ---- Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-grotesque);
  font-size: var(--fs-75); font-weight: var(--fw-bold);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: var(--bw-rule) solid transparent;
  border-radius: var(--btn-radius);
  cursor: pointer; line-height: 1;
  transition: background var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard),
              transform var(--motion-fast) var(--ease-standard);
}
.btn:active { transform: translateY(1px); }
.btn .btn-arrow { transition: transform var(--motion-base) var(--ease-standard); }
.btn:hover .btn-arrow { transform: translateX(3px); }

.btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn--solid { background: var(--text-primary); color: var(--bg-surface); border-color: var(--text-primary); }
.btn--solid:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--outline { background: transparent; color: var(--text-primary); border-color: var(--rule-strong); }
.btn--outline:hover { border-color: var(--accent); color: var(--accent-text); }
.btn--ghost { background: transparent; color: var(--text-primary); border-color: transparent; padding-inline: 0; }
.btn--ghost:hover { color: var(--accent-text); }
.btn--lg { font-size: var(--fs-100); padding: var(--space-4) var(--space-6); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.btn--on-dark { color: var(--color-white); border-color: var(--color-ink-300); background: rgba(10,11,12,0.28); }
.btn--on-dark.btn--outline:hover { border-color: var(--accent); color: var(--color-white); background: rgba(10,11,12,0.38); }

/* ---- Tags / badges / chips ------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: var(--font-mono); font-size: var(--fs-50);
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border: var(--bw-hair) solid var(--rule); color: var(--text-muted);
  border-radius: var(--radius-0);
}
.tag--accent { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.tag--dot::before { content: ""; width: 6px; height: 6px; background: var(--accent); border-radius: 0; }
.badge {
  display: inline-flex; align-items: center;
  font-size: var(--fs-50); font-weight: var(--fw-bold);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--accent-text); border: var(--bw-rule) solid var(--accent);
  padding: 2px var(--space-2);
}
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-75); font-weight: var(--fw-medium);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-sunken); border: var(--bw-hair) solid var(--rule);
  color: var(--text-secondary); border-radius: var(--radius-pill);
}
.divider { height: 0; border: 0; border-top: var(--bw-hair) solid var(--rule); }

/* ============================================================================
   BLOCKS
   ============================================================================ */

/* ---- NAV ------------------------------------------------------------------- */
.nav {
  border-bottom: var(--bw-hair) solid var(--rule);
  background: var(--bg-surface);
}
.nav-inner {
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6);
}
.brandmark { display: flex; align-items: center; gap: var(--space-3); }
.brandmark .glyph {
  width: 26px; height: 26px; flex: none;
}
.brandmark .wordmark {
  font-weight: var(--fw-black); font-size: var(--fs-100);
  letter-spacing: -0.01em; line-height: 1; text-transform: uppercase;
}
.brandmark .wordmark small {
  display: block; font-family: var(--font-mono);
  font-size: var(--fs-50); font-weight: var(--fw-regular);
  letter-spacing: var(--tr-caps); color: var(--text-muted);
  text-transform: uppercase; margin-top: 2px;
}
.nav-links { display: flex; align-items: center; gap: var(--space-6); }
.nav-links a {
  font-size: var(--fs-75); font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--text-secondary); padding-block: var(--space-2);
  border-bottom: var(--bw-rule) solid transparent;
  transition: color var(--motion-fast), border-color var(--motion-fast);
}
.nav-links a:hover { color: var(--text-primary); border-bottom-color: var(--accent); }
.nav-cta { display: flex; align-items: center; gap: var(--space-4); }
@media (max-width: 860px) { .nav-links { display: none; } }

/* ---- HERO: image-led ------------------------------------------------------- */
.hero-img { position: relative; background: var(--bg-sunken); overflow: hidden; }
.hero-img .figure { border: 0; aspect-ratio: 16 / 9; }
.hero-img .figure::after {
  background: linear-gradient(90deg,
    rgba(10,11,12,0.92) 0%, rgba(10,11,12,0.78) 38%,
    rgba(10,11,12,0.30) 70%, rgba(10,11,12,0.12) 100%);
}
.hero-img .hero-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center;
}
.hero-img .hero-grid {
  width: 100%; max-width: var(--measure-max);
  margin-inline: auto; padding-inline: var(--space-6);
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--grid-gutter);
}
.hero-copy { grid-column: span 7; color: var(--color-paper); }
.hero-copy .eyebrow { color: var(--color-ink-300); }
.hero-copy .eyebrow::before { border-top-color: var(--accent); }
.hero-copy .display, .hero-copy .display-xl { color: var(--color-white); margin-top: var(--space-4); }
.hero-copy .lead { color: var(--color-ink-200); margin-top: var(--space-5); max-width: 46ch; }
.hero-copy .hero-actions { margin-top: var(--space-6); display: flex; gap: var(--space-4); flex-wrap: wrap; }
.hero-meta {
  position: absolute; right: var(--space-6); bottom: var(--space-6); z-index: 2;
  text-align: right; color: var(--color-ink-300);
  font-family: var(--font-mono); font-size: var(--fs-50);
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  border-right: var(--bw-rule) solid var(--accent); padding-right: var(--space-3);
}
@media (max-width: 860px) {
  .hero-copy { grid-column: span 12; }
  .hero-img .figure { aspect-ratio: 4 / 5; }
  .hero-meta { display: none; }
}

/* ---- HERO: type-led -------------------------------------------------------- */
.hero-type { background: var(--bg-canvas); border-bottom: var(--bw-rule) solid var(--rule-strong); }
.hero-type .display-xl { max-width: 16ch; }
.hero-type .hero-type-foot {
  margin-top: var(--space-8);
  display: grid; grid-template-columns: repeat(12,1fr); gap: var(--grid-gutter);
  border-top: var(--bw-hair) solid var(--rule); padding-top: var(--space-5);
}
.hero-type-stat { grid-column: span 3; }
.hero-type-stat .n { font-size: var(--fs-400); font-weight: var(--fw-black); display: block; }
.hero-type-stat .l { font-family: var(--font-mono); font-size: var(--fs-50); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--text-muted); }
@media (max-width: 860px) { .hero-type-stat { grid-column: span 6; margin-top: var(--space-4); } }

/* ---- HERO: split ----------------------------------------------------------- */
.hero-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 70vh; }
.hero-split .pane-copy {
  background: var(--bg-fill); color: var(--color-paper);
  padding: var(--space-9) var(--space-8);
  display: flex; flex-direction: column; justify-content: center;
}
.hero-split .pane-copy .eyebrow { color: var(--color-ink-400); }
.hero-split .pane-copy .display { color: var(--color-white); margin-top: var(--space-4); }
.hero-split .pane-copy .lead { color: var(--color-ink-200); margin-top: var(--space-5); }
.hero-split .pane-copy .hero-actions { margin-top: var(--space-6); display: flex; gap: var(--space-4); flex-wrap: wrap; }
.hero-split .pane-img { position: relative; }
.hero-split .pane-img .figure { border: 0; height: 100%; aspect-ratio: auto; }
@media (max-width: 860px) {
  .hero-split { grid-template-columns: 1fr; min-height: 0; }
  .hero-split .pane-img .figure { aspect-ratio: 4 / 3; }
  .hero-split .pane-copy { padding: var(--space-7) var(--space-5); }
}

/* ---- PRINCIPLES ------------------------------------------------------------ */
.principles { }
.principle-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 0; border-top: var(--bw-rule) solid var(--rule-strong); }
.principle {
  grid-column: span 3; padding: var(--space-6) var(--space-5) var(--space-7);
  border-right: var(--bw-hair) solid var(--rule);
  border-bottom: var(--bw-hair) solid var(--rule);
}
.principle:nth-child(4n) { border-right: 0; }
.principle .index-num { display: block; margin-bottom: var(--space-5); }
.principle h3 { font-size: var(--fs-300); margin-bottom: var(--space-3); }
.principle p { color: var(--text-secondary); font-size: var(--fs-75); line-height: 1.5; }
.principle .kicker {
  display: block; font-family: var(--font-mono); font-size: var(--fs-50);
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--accent-text); margin-bottom: var(--space-4);
}
@media (max-width: 860px) {
  .principle { grid-column: span 6; border-right: var(--bw-hair) solid var(--rule); }
  .principle:nth-child(2n) { border-right: 0; }
}

/* principles with anchor image */
.principles-split { display: grid; grid-template-columns: repeat(12,1fr); gap: var(--grid-gutter); align-items: start; }
.principles-split .anchor { grid-column: span 5; position: sticky; top: var(--space-6); }
.principles-split .stack { grid-column: span 7; }
.principles-split .principle-row {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-5);
  padding: var(--space-5) 0; border-top: var(--bw-hair) solid var(--rule);
}
.principles-split .principle-row:first-child { border-top: var(--bw-rule) solid var(--rule-strong); }
.principles-split .principle-row h3 { font-size: var(--fs-300); margin-bottom: var(--space-2); }
.principles-split .principle-row p { color: var(--text-secondary); font-size: var(--fs-75); }
@media (max-width: 860px) {
  .principles-split .anchor, .principles-split .stack { grid-column: span 12; position: static; }
}

/* ---- LINEAGE / STORY ------------------------------------------------------- */
.lineage { background: var(--bg-canvas); }
.lineage-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: var(--grid-gutter); align-items: center; }
.lineage .media { grid-column: span 7; }
.lineage .copy { grid-column: span 5; }
.lineage .copy .head-2 { margin: var(--space-3) 0 var(--space-5); }
.lineage-line {
  margin-top: var(--space-6); border-top: var(--bw-hair) solid var(--rule);
}
.lineage-line dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3) var(--space-5); margin: var(--space-4) 0 0; }
.lineage-line dt { font-family: var(--font-mono); font-size: var(--fs-50); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--accent-text); white-space: nowrap; padding-top: 3px; }
.lineage-line dd { margin: 0; font-size: var(--fs-75); color: var(--text-secondary); }
@media (max-width: 860px) { .lineage .media, .lineage .copy { grid-column: span 12; } }

/* ---- TRACK CARDS ----------------------------------------------------------- */
.track-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: var(--grid-gutter); }
.track-card {
  grid-column: span 4; background: var(--card-bg);
  border: var(--bw-hair) solid var(--rule);
  display: flex; flex-direction: column;
  transition: border-color var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard);
}
.track-card:hover { border-color: var(--accent); }
.track-card .figure { border: 0; border-bottom: var(--bw-rule) solid var(--accent); }
.track-card .tc-body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.track-card .tc-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.track-card h3 { font-size: var(--fs-300); }
.track-card .tc-body p { color: var(--text-secondary); font-size: var(--fs-75); margin-top: var(--space-3); }
.track-card .tc-foot { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--bw-hair) solid var(--rule); display: flex; align-items: center; justify-content: space-between; }
.track-card .tc-foot .index-num { color: var(--text-faint); }
@media (max-width: 860px) { .track-card { grid-column: span 12; } }

/* ---- TRACK FEATURE / HEADER (re-skinnable) --------------------------------- */
.track-feature { display: grid; grid-template-columns: repeat(12,1fr); gap: var(--grid-gutter); align-items: stretch; border: var(--bw-rule) solid var(--accent); }
.track-feature .media { grid-column: span 6; }
.track-feature .media .figure { border: 0; height: 100%; aspect-ratio: auto; min-height: 320px; }
.track-feature .panel { grid-column: span 6; padding: var(--space-7); display: flex; flex-direction: column; justify-content: center; }
.track-feature .panel .badge { align-self: flex-start; margin-bottom: var(--space-4); }
.track-feature .panel .head-3 { margin-bottom: var(--space-4); }
.track-feature .panel ul { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.track-feature .panel li { padding: var(--space-3) 0; border-top: var(--bw-hair) solid var(--rule); display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); font-size: var(--fs-75); color: var(--text-secondary); }
.track-feature .panel li .index-num { padding-top: 2px; }
@media (max-width: 860px) {
  .track-feature .media, .track-feature .panel { grid-column: span 12; }
  .track-feature .media .figure { min-height: 0; aspect-ratio: 16 / 9; }
}

/* ---- PROGRESSION (static marketing illustration) --------------------------- */
.progression { background: var(--bg-canvas); }
.prog-track {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter); margin-top: var(--space-7);
}
.prog-track::before {
  content: ""; position: absolute; top: 22px; left: 0; right: 0; height: 0;
  border-top: var(--bw-rule) solid var(--rule); z-index: 0;
}
.prog-step { position: relative; z-index: 1; }
.prog-node {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--bg-surface); border: var(--bw-rule) solid var(--rule-strong);
  font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: var(--fs-100);
  margin-bottom: var(--space-5);
}
.prog-step:last-child .prog-node { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.prog-step .stage {
  font-family: var(--font-mono); font-size: var(--fs-50); letter-spacing: var(--tr-caps);
  text-transform: uppercase; color: var(--accent-text);
}
.prog-step h3 { font-size: var(--fs-300); margin: var(--space-2) 0 var(--space-4); }
.prog-step .unlocks { list-style: none; padding: 0; margin: 0; border-top: var(--bw-hair) solid var(--rule); }
.prog-step .unlocks li { padding: var(--space-3) 0; border-bottom: var(--bw-hair) solid var(--rule-faint); font-size: var(--fs-75); color: var(--text-secondary); display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); }
.prog-step .unlocks li::before { content: ""; width: 8px; height: 8px; margin-top: 7px; background: var(--accent); }
.prog-legend { margin-top: var(--space-6); display: flex; gap: var(--space-6); flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--fs-50); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--text-muted); }
@media (max-width: 860px) {
  .prog-track { grid-template-columns: 1fr; }
  .prog-track::before { top: 0; bottom: 0; left: 22px; right: auto; width: 0; height: auto; border-top: 0; border-left: var(--bw-rule) solid var(--rule); }
  .prog-step { padding-left: var(--space-7); }
  .prog-step .prog-node { position: absolute; left: 0; }
}

/* ---- FOOTPRINT / STATS ----------------------------------------------------- */
.footprint { background: var(--bg-fill); color: var(--color-paper); }
.footprint .eyebrow { color: var(--color-ink-400); }
.stat-strip { display: grid; grid-template-columns: repeat(12,1fr); gap: 0; border-top: var(--bw-rule) solid var(--color-ink-700); margin-top: var(--space-5); }
.stat {
  grid-column: span 3; padding: var(--space-6) var(--space-5);
  border-right: var(--bw-hair) solid var(--color-ink-800);
}
.stat:last-child { border-right: 0; }
.stat .n { font-size: var(--fs-600); font-weight: var(--fw-black); line-height: 1; color: var(--color-white); letter-spacing: -0.03em; }
.stat .n .accent { color: var(--accent); }
.stat .l { display: block; margin-top: var(--space-3); font-family: var(--font-mono); font-size: var(--fs-50); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--color-ink-400); }
.country-row { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.country-row .chip { background: transparent; border-color: var(--color-ink-700); color: var(--color-ink-200); border-radius: 0; }
@media (max-width: 860px) { .stat { grid-column: span 6; border-bottom: var(--bw-hair) solid var(--color-ink-800); } }

/* ---- QUOTE / ENDORSEMENT --------------------------------------------------- */
.quote-block { display: grid; grid-template-columns: repeat(12,1fr); gap: var(--grid-gutter); }
.quote-block .mark { grid-column: span 1; font-size: var(--fs-700); font-weight: var(--fw-black); color: var(--accent); line-height: 0.8; }
.quote-block blockquote { grid-column: span 8; margin: 0; }
.quote-block blockquote q { quotes: none; }
.quote-block blockquote q::before, .quote-block blockquote q::after { content: ""; }
.quote-block .qt { font-size: var(--fs-400); font-weight: var(--fw-medium); line-height: 1.25; letter-spacing: var(--tr-tight); }
.quote-block .cite { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--bw-hair) solid var(--rule); display: flex; gap: var(--space-3); align-items: baseline; }
.quote-block .cite .who { font-weight: var(--fw-bold); font-size: var(--fs-75); letter-spacing: var(--tr-label); text-transform: uppercase; }
.quote-block .cite .role { font-family: var(--font-mono); font-size: var(--fs-50); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--text-muted); }
@media (max-width: 860px) { .quote-block .mark { grid-column: span 12; } .quote-block blockquote { grid-column: span 12; } }

/* ---- CTA BAND -------------------------------------------------------------- */
.cta-band { background: var(--bg-fill); color: var(--color-paper); position: relative; overflow: hidden; }
/* The footer's full-width red top-rule already marks this band's bottom edge.
   A separate left accent bar collided with it at the corner (a broken "L"),
   so the CTA band is left clean — the footer rule is the single deliberate accent. */
.cta-inner { display: grid; grid-template-columns: repeat(12,1fr); gap: var(--grid-gutter); align-items: center; }
.cta-inner .lead-col { grid-column: span 8; }
.cta-inner .eyebrow { color: var(--color-ink-400); }
.cta-inner .head-1 { color: var(--color-white); margin-top: var(--space-4); max-width: 18ch; }
.cta-inner .act-col { grid-column: span 4; display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; justify-content: center; }
.cta-inner .act-col .body { color: var(--color-ink-300); }
@media (max-width: 860px) { .cta-inner .lead-col, .cta-inner .act-col { grid-column: span 12; } }

/* ---- PHOTO + CAPTION ------------------------------------------------------- */
.photo-cap { display: grid; grid-template-columns: repeat(12,1fr); gap: var(--grid-gutter); }
.photo-cap .media { grid-column: span 8; }
.photo-cap .cap { grid-column: span 4; display: flex; flex-direction: column; justify-content: flex-end; }
.photo-cap .cap .index-num { margin-bottom: var(--space-3); }
.photo-cap .cap p { font-size: var(--fs-75); color: var(--text-secondary); }
.photo-cap .cap .credit { margin-top: var(--space-4); font-family: var(--font-mono); font-size: var(--fs-50); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--text-faint); }
@media (max-width: 860px) { .photo-cap .media, .photo-cap .cap { grid-column: span 12; } }

/* ---- FAQ / ACCORDION ------------------------------------------------------- */
.faq-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: var(--grid-gutter); }
.faq-grid .faq-intro { grid-column: span 4; }
.faq-grid .faq-list { grid-column: span 8; border-top: var(--bw-rule) solid var(--rule-strong); }
.faq-item { border-bottom: var(--bw-hair) solid var(--rule); }
.faq-q {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: baseline;
  padding: var(--space-5) 0; color: var(--text-primary); font-family: var(--font-grotesque);
}
.faq-q .index-num { color: var(--text-faint); }
.faq-q .q-text { font-size: var(--fs-200); font-weight: var(--fw-medium); letter-spacing: var(--tr-tight); }
.faq-q .sign { font-family: var(--font-mono); font-size: var(--fs-300); color: var(--accent); line-height: 1; transition: transform var(--motion-base) var(--ease-standard); }
.faq-item[open] .faq-q .sign { transform: rotate(45deg); }
.faq-a { padding: 0 0 var(--space-5) calc(var(--fs-75) + var(--space-4) + 2ch); }
.faq-a p { font-size: var(--fs-75); color: var(--text-secondary); max-width: 60ch; }
/* native <details> styling */
details.faq-item summary { list-style: none; }
details.faq-item summary::-webkit-details-marker { display: none; }
@media (max-width: 860px) { .faq-grid .faq-intro, .faq-grid .faq-list { grid-column: span 12; } .faq-a { padding-left: 0; } }

/* ---- CONTENT + MEDIA SPLIT ------------------------------------------------- */
.media-split { display: grid; grid-template-columns: repeat(12,1fr); gap: var(--grid-gutter); align-items: center; }
.media-split.reverse .copy { order: 2; }
.media-split .copy { grid-column: span 5; }
.media-split .media { grid-column: span 7; }
.media-split .copy .head-3 { margin: var(--space-3) 0 var(--space-4); }
.media-split .copy ul { list-style: none; padding: 0; margin: var(--space-5) 0 0; }
.media-split .copy li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); padding: var(--space-3) 0; border-top: var(--bw-hair) solid var(--rule); font-size: var(--fs-75); color: var(--text-secondary); }
.media-split .copy li .tick { color: var(--accent); font-weight: var(--fw-bold); }
@media (max-width: 860px) { .media-split .copy, .media-split .media { grid-column: span 12; } .media-split.reverse .copy { order: 0; } }

/* ---- FOOTER ---------------------------------------------------------------- */
.footer { background: var(--bg-fill); color: var(--color-ink-300); border-top: var(--bw-heavy) solid var(--accent); }
.footer-top { display: grid; grid-template-columns: repeat(12,1fr); gap: var(--grid-gutter); padding-block: var(--space-8) var(--space-7); }
.footer .brandmark .wordmark { color: var(--color-white); }
.footer .fcol { grid-column: span 2; }
.footer .fcol--brand { grid-column: span 4; }
.footer .fcol h4 { font-family: var(--font-mono); font-size: var(--fs-50); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--color-ink-500); margin-bottom: var(--space-4); }
.footer .fcol ul { list-style: none; margin: 0; padding: 0; }
.footer .fcol li { margin-bottom: var(--space-3); }
.footer .fcol a { font-size: var(--fs-75); color: var(--color-ink-300); transition: color var(--motion-fast); }
.footer .fcol a:hover { color: var(--color-white); }
.footer .fcol--brand p { font-size: var(--fs-75); color: var(--color-ink-400); max-width: 36ch; margin-top: var(--space-4); }
.footer-bottom { border-top: var(--bw-hair) solid var(--color-ink-800); padding-block: var(--space-5); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--fs-50); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--color-ink-500); }
@media (max-width: 860px) { .footer .fcol, .footer .fcol--brand { grid-column: span 6; } }

/* ============================================================================
   SHOWCASE chrome (index.html styleguide only — not part of the site kit)
   ============================================================================ */
.sg-topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg-surface); border-bottom: var(--bw-rule) solid var(--rule-strong);
}
.sg-topbar .nav-inner { height: 56px; }
.sg-meta { font-family: var(--font-mono); font-size: var(--fs-50); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--text-muted); }
.theme-toggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--fs-50); letter-spacing: var(--tr-label);
  text-transform: uppercase; cursor: pointer;
  background: var(--bg-sunken); color: var(--text-primary);
  border: var(--bw-hair) solid var(--rule); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-0);
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle .dot { width: 8px; height: 8px; background: var(--accent); }

.sg-section { border-top: var(--bw-hair) solid var(--rule); }
.sg-section-head {
  display: grid; grid-template-columns: repeat(12,1fr); gap: var(--grid-gutter);
  padding-block: var(--space-7) var(--space-5);
}
.sg-section-head .sg-id { grid-column: span 2; }
.sg-section-head .sg-title { grid-column: span 7; }
.sg-section-head .sg-note { grid-column: span 3; }
.sg-section-head .sg-id .index-num { font-size: var(--fs-200); }
.sg-section-head h2 { font-size: var(--fs-500); }
.sg-section-head .sg-note p { font-size: var(--fs-75); color: var(--text-muted); }
@media (max-width: 860px) { .sg-section-head .sg-id, .sg-section-head .sg-title, .sg-section-head .sg-note { grid-column: span 12; } }

/* Paired light/dark demo frames */
.demo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-bottom: var(--space-7); }
.demo-frame { border: var(--bw-hair) solid var(--rule); overflow: hidden; }
.demo-frame > .demo-label {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: var(--fs-50); letter-spacing: var(--tr-caps);
  text-transform: uppercase; padding: var(--space-2) var(--space-3);
  border-bottom: var(--bw-hair) solid var(--rule);
}
.demo-stage { padding: var(--space-5); }
.demo-stage.flush { padding: 0; }
.demo-frame[data-theme] { background: var(--bg-canvas); color: var(--text-primary); }
.demo-frame[data-theme] .demo-label { background: var(--bg-sunken); color: var(--text-muted); border-color: var(--rule); }
@media (max-width: 1080px) { .demo-pair { grid-template-columns: 1fr; } }

.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: var(--space-3); }
.swatch { border: var(--bw-hair) solid var(--rule); }
.swatch .chip-color { height: 56px; border-bottom: var(--bw-hair) solid var(--rule); }
.swatch .chip-meta { padding: var(--space-2) var(--space-3); }
.swatch .chip-meta .nm { font-family: var(--font-mono); font-size: var(--fs-50); display: block; }
.swatch .chip-meta .vl { font-family: var(--font-mono); font-size: var(--fs-50); color: var(--text-muted); }

.scale-row { display: grid; grid-template-columns: 90px 1fr; gap: var(--space-5); align-items: baseline; padding: var(--space-3) 0; border-top: var(--bw-hair) solid var(--rule); }
.scale-row .lab { font-family: var(--font-mono); font-size: var(--fs-50); color: var(--text-muted); letter-spacing: var(--tr-label); }
.scale-row .spec { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.space-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) 0; }
.space-bar { height: 14px; background: var(--accent); }
.space-row .lab { font-family: var(--font-mono); font-size: var(--fs-50); color: var(--text-muted); min-width: 130px; }

.spec-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: var(--space-4); }
.spec-tile { border: var(--bw-hair) solid var(--rule); padding: var(--space-4); }
.spec-tile .demo-box { height: 48px; background: var(--bg-sunken); border: var(--bw-hair) solid var(--rule); margin-bottom: var(--space-3); }
.spec-tile .lab { font-family: var(--font-mono); font-size: var(--fs-50); color: var(--text-muted); display: block; }

.specimen-stack > * + * { margin-top: var(--space-3); }
.token-list { font-family: var(--font-mono); font-size: var(--fs-75); color: var(--text-secondary); }
.token-list code { color: var(--accent-text); }

.inline-list { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }