/* ============================================================
   FKTP / Fire Knowledge to Practice
   Industrial field manual aesthetic
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Cool concrete palette */
  --ink:          #0d0d0c;
  --ink-soft:     #1f1f1d;
  --paper:        #e6e6e3;
  --paper-bright: #f1f1ee;
  --paper-deep:   #d8d8d5;
  --ash:          #5a5854;
  --ash-light:    #8c8a85;
  --rule:         #c2c0bb;
  --rule-soft:    #d1cfca;
  --smoke:        #0a0a09;
  --smoke-deep:   #050504;
  --smoke-rule:   #2a2826;
  --ember:        #F70303;
  --ember-bright: #ff2929;
  --ember-glow:   rgba(247, 3, 3, 0.22);
  --gold:         #CCA737;
  --gold-bright:  #DABC43;
  --gold-deep:    #A4781F;
  --gold-glow:    rgba(204, 167, 55, 0.22);

  --font-display: "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --max-w:        1320px;
  --content-w:    66ch;

  --gutter:       clamp(20px, 4vw, 40px);
  --section-y:    clamp(72px, 12vw, 144px);

  --ease:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quick:   cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }

::selection { background: var(--ember); color: var(--paper-bright); }

/* No italic styling anywhere; em is repurposed to lighter weight + ash color */
em, i {
  font-style: normal;
  font-weight: 300;
  color: var(--ash);
}

/* ---------- Layout primitives ---------- */
.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
}

.section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  position: relative;
}

.section--tight {
  padding-top: clamp(48px, 8vw, 96px);
  padding-bottom: clamp(48px, 8vw, 96px);
}

/* ---------- Typography ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ash);
}

.body-copy {
  max-width: var(--content-w);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.body-copy p + p { margin-top: 1.2em; }

.body-copy a {
  color: var(--ember);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 0.3s var(--ease);
}

.body-copy a:hover { color: var(--ember-bright); }

/* ---------- Section frame ---------- */
.section-frame {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: clamp(48px, 7vw, 80px);
}

.section-frame__top {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.section-frame__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ember);
  white-space: nowrap;
}

.section-frame__rule {
  flex: 1;
  height: 1px;
  background: var(--ember);
  opacity: 0.55;
}

.section-frame__label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash);
  white-space: nowrap;
}

.section-frame--dark .section-frame__num { color: var(--ember-bright); }
.section-frame--dark .section-frame__rule { background: var(--ember-bright); opacity: 0.5; }
.section-frame--dark .section-frame__label { color: var(--ash-light); }

/* ---------- Header / nav ---------- */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  /* Padding matches .site-header--light / --dark so the bar height is
     identical across every page. */
  padding: 24px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--paper-bright);
  /* Near-clear glass: nearly invisible tint, just enough blur to read as
     a plate (not a tint), with hairline edges giving it physical weight.
     The hero photo shows through almost entirely — the bar is implied
     more by its edges and blur than by any opaque fill. */
  background: rgba(20, 18, 16, 0.04);
  backdrop-filter: blur(14px) saturate(0.95);
  -webkit-backdrop-filter: blur(14px) saturate(0.95);
  border-bottom: 1px solid rgba(250, 249, 244, 0.05);
  box-shadow:
    0 1px 0 rgba(250, 249, 244, 0.05) inset,
    0 -1px 0 rgba(0, 0, 0, 0.10) inset;
}

.site-header--light {
  position: relative;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-top: 24px;
  padding-bottom: 24px;
  background: var(--paper);
}

.site-header--dark {
  position: relative;
  color: var(--paper-bright);
  border-bottom: 1px solid var(--smoke-rule);
  padding-top: 24px;
  padding-bottom: 24px;
  background: var(--ink);
}

.brand-mark {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Full F.I.R.E. wordmark lockup */
.brand-mark { transition: transform 0.16s var(--ease-quick); }
.brand-mark:active { transform: scale(0.97); }

.brand-mark__wordmark {
  height: 56px;
  width: auto;
  display: block;
  flex-shrink: 0;
}


@media (max-width: 640px) {
  .brand-mark__wordmark { height: 44px; }
}

.nav {
  display: flex;
  align-items: center;
  gap: 36px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav a {
  position: relative;
  color: inherit;
  opacity: 0.78;
  transition: opacity 0.2s var(--ease), transform 0.16s var(--ease-quick);
  padding-bottom: 4px;
  display: inline-block;
}

.nav a:hover { opacity: 1; }
.nav a.is-active { opacity: 1; }
.nav a:active { transform: scale(0.96); }

.nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--ember);
}

.nav__toggle {
  display: none;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100dvh;
  background: var(--smoke);
  color: var(--paper-bright);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Photo plate behind the hero */
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: grayscale(0.55) contrast(1.05) brightness(0.55) saturate(0.8);
  transform: scale(1.02);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Anchor the headline side in deep shadow; let the right side breathe so the
     photo's silhouette becomes part of the composition. */
  background:
    linear-gradient(95deg, rgba(10, 10, 9, 0.82) 0%, rgba(10, 10, 9, 0.55) 38%, rgba(10, 10, 9, 0.12) 72%, rgba(10, 10, 9, 0) 100%),
    linear-gradient(180deg, rgba(10, 10, 9, 0) 55%, rgba(10, 10, 9, 0.55) 100%);
  pointer-events: none;
}

/* Hero ::after intentionally absent: photo carries texture; grid overlay was noise */

.hero__inner {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: end;
  padding: clamp(140px, 14vw, 180px) var(--gutter) clamp(64px, 8vw, 96px);
  /* No max-width — let the grid span the full viewport so eyebrow
     anchors near the left edge and the meta block anchors near the
     right. The cluster's own typographic widths (.hero__main, .hero__sub)
     are still capped, so the readable content doesn't change. */
  width: 100%;
  position: relative;
  z-index: 3;
}

.hero__main { position: relative; }

@media (max-width: 900px) {
  .hero__inner {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

.thermal-bar {
  position: relative;
  z-index: 3;
}

.hero__lead {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash-light);
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero__lead span[aria-hidden="true"] { color: var(--gold); }

.hero__lead::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 2px;
  background: var(--ember);
}

/* Hero headline: heavy sans, weight contrast for connectors, no italics */
.hero-headline {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 0.92;
  display: flex;
  flex-direction: column;
  gap: 0.04em;
  text-transform: none;
}

.hero-headline__small {
  font-family: var(--font-body);
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 300;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ash-light);
  margin-left: 0.18em;
  line-height: 1;
}

.hero-headline__big {
  font-size: clamp(60px, 8.5vw, 128px);
  letter-spacing: -0.05em;
  line-height: 0.86;
  text-transform: uppercase;
  color: var(--paper-bright);
}

/* Treat the period as a deliberate baseline-aligned mark, not a giant block.
   Bottom edge sits on the type baseline so it lines up with the bottom of E. */
.hero-headline__period {
  display: inline-block;
  width: 0.18em;
  height: 0.18em;
  background: var(--ember);
  vertical-align: baseline;
  margin-left: 0.06em;
}

/* Hero CTA — subtle, mono-styled scroll cue */
.hero__cta {
  margin-top: clamp(28px, 3.5vw, 40px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-bright);
  padding: 14px 22px 14px 24px;
  border: 1px solid rgba(250, 249, 244, 0.35);
  border-radius: 999px;
  background: rgba(10, 10, 9, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.25s var(--ease-quick), border-color 0.25s var(--ease-quick), transform 0.16s var(--ease-quick);
  align-self: flex-start;
  width: max-content;
}

.hero__cta:hover {
  background: var(--ember);
  border-color: var(--ember);
}

.hero__cta:active {
  transform: scale(0.97);
}

/* Photo credit — small, quiet attribution. Whole element is dimmed
   via opacity on the parent so it sits like a watermark instead of a
   labeled caption. Bottom-right of the hero, mono. */
.hero__credit {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(12px, 1.5vw, 18px);
  z-index: 4;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  color: var(--ash-light);
  opacity: 0.7;
}

.hero__credit-sep { opacity: 0.55; }

@media (max-width: 720px) {
  .hero__credit { font-size: 8.5px; gap: 5px; }
}

.hero__cta-arrow {
  transition: transform 0.4s var(--ease-quick);
  display: inline-block;
  font-size: 14px;
}

.hero__cta:hover .hero__cta-arrow {
  transform: translateY(3px);
}

.hero__sub {
  margin-top: clamp(32px, 4vw, 48px);
  max-width: 52ch;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.5;
  color: var(--paper-deep);
  font-weight: 400;
}

/* Hero metadata — a slim mono caption rail, not a competing display-font block.
   Each row is label / value on a single line so the eye can scan it like
   documentary credits rather than read it as headlined facts. */
.hero__meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  padding-left: 28px;
  padding-bottom: 6px;
  align-self: end;
  max-width: 320px;
  justify-self: end;
}

.hero__meta::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 1px;
  background: rgba(250, 249, 244, 0.18);
}

.hero__meta-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 16px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.35;
}

.hero__meta-label {
  color: var(--ash-light);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero__meta-value {
  color: var(--paper-bright);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.hero__meta-dim {
  color: var(--paper-deep);
  font-weight: 400;
}

.hero__meta-dash {
  color: var(--gold);
  margin: 0 2px;
}

@media (max-width: 900px) {
  .hero__meta {
    justify-self: start;
    max-width: none;
    width: 100%;
    margin-top: 16px;
  }
}

/* Thermal bar */
.thermal-bar {
  position: relative;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(247, 3, 3, 0.0) 5%,
    rgba(247, 3, 3, 0.4) 25%,
    rgba(255, 41, 41, 0.85) 50%,
    rgba(247, 3, 3, 0.4) 75%,
    rgba(247, 3, 3, 0.0) 95%,
    transparent 100%
  );
  background-size: 220% 100%;
  background-position: 0% 50%;
  animation: thermal 60s linear infinite;
  z-index: 1;
}

@keyframes thermal {
  0%   { background-position: 0% 50%; }
  100% { background-position: 220% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .thermal-bar { animation: none; }
}

/* ---------- Page header (non-home pages) ---------- */
.page-hero {
  background: var(--paper-bright);
  border-bottom: 1px solid var(--rule);
  padding: clamp(80px, 12vw, 160px) 0 clamp(56px, 8vw, 96px);
  position: relative;
  overflow: hidden;
}

.page-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}

.page-hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  hyphens: auto;
}

.page-hero__title em {
  color: var(--ash);
  font-weight: 300;
}

.page-hero__title-period { color: var(--ember); }

.page-hero__aside {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ash);
  display: grid;
  gap: 0;
  padding-bottom: 8px;
}

.page-hero__aside-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--rule);
  padding: 14px 0;
}

.page-hero__aside-row:last-child { border-bottom: 1px solid var(--rule); }

.page-hero__aside-row span:last-child {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Curriculum cards ---------- */
.curriculum {
  background: var(--paper);
  position: relative;
  /* Section padding scales with both width AND height. On taller viewports
     the gap above/below grows; on shorter ones (e.g. laptop screens, lower
     resolutions) it tightens so both cards still fit on screen. */
  padding-top: clamp(40px, 5vh + 1vw, 96px);
  padding-bottom: clamp(40px, 5vh + 1vw, 96px);
}

.curriculum .section-frame { margin-bottom: clamp(28px, 3vh + 1vw, 64px); }

.curriculum__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: stretch;
}

/* Stack the two paths on tablet/phone — below 880px the cards don't have
   enough horizontal room to breathe side-by-side. */
@media (max-width: 880px) {
  .curriculum__grid { grid-template-columns: 1fr; }
}

.cur-card {
  position: relative;
  background: var(--paper-bright);
  border: 1px solid var(--rule);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cur-card__plate { flex-shrink: 0; }
.cur-card__body { flex: 1 1 auto; }

.cur-card:hover {
  transform: translateY(-3px);
  border-color: var(--ink);
  box-shadow: 0 24px 48px -20px rgba(13, 13, 12, 0.18);
}


/* Photo plate at top of card */
.cur-card__plate {
  position: relative;
  /* Default aspect-ratio for narrow viewports / portrait. On wider screens
     a max-height cap keeps the plate from dominating the card vertically. */
  aspect-ratio: 16 / 9;
  max-height: 30vh;
  overflow: hidden;
  background: var(--ink);
  border-bottom: 1px solid var(--ink);
}

.cur-card__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.7) contrast(1.06) brightness(0.9) saturate(0.9);
  transition: filter 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.cur-card:hover .cur-card__plate img {
  filter: grayscale(0.4) contrast(1.1) brightness(1) saturate(1);
  transform: scale(1.03);
}

.cur-card__plate figcaption {
  display: none;
  position: absolute;
  bottom: 14px;
  left: 14px;
  padding: 6px 12px;
  background: rgba(13, 13, 12, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-bright);
  z-index: 1;
  white-space: nowrap;
}

.cur-card__body {
  /* Padding scales with viewport width so the cards stay substantial on
     larger screens but tighten on smaller ones. */
  padding: clamp(28px, 3.6vw, 48px);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.cur-card__body::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}

.cur-card--secondary .cur-card__body::after {
  background: var(--ember);
}

.cur-card:hover .cur-card__body::after {
  transform: translateY(0);
}

.cur-card:hover .cur-card__title,
.cur-card:hover .cur-card__title em,
.cur-card:hover .cur-card__desc,
.cur-card:hover .cur-card__index { color: var(--paper-bright); }

.cur-card:hover .cur-card__index::after { background: rgba(250, 249, 244, 0.4); }

.cur-card--secondary {
  background: var(--paper-deep);
}

/* Path-specific accent rule above the title */
.cur-card .cur-card__index {
  position: relative;
}

.cur-card .cur-card__index::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  width: 56px;
  height: 3px;
  background: var(--ember);
}

.cur-card--secondary .cur-card__index::before {
  background: var(--ash);
}

.cur-card:hover .cur-card__cta { background: var(--ember); }
.cur-card--secondary:hover .cur-card__cta { background: var(--ink); color: var(--paper-bright); }
.cur-card:hover .cur-card__cta-arrow { transform: translateX(4px); }

.cur-card__index {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: clamp(20px, 2.4vw, 32px);
  display: flex;
  align-items: center;
  gap: 14px;
  transition: color 0.4s var(--ease);
}

.cur-card__index::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
  max-width: 60%;
  transition: background 0.4s var(--ease);
}

.cur-card__title {
  font-family: var(--font-display);
  font-weight: 900;
  /* Fluid title size: scales with viewport width up to a substantial 56px
     max on big screens, stays readable on small ones. */
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin-bottom: clamp(18px, 2vw, 28px);
  color: var(--ink);
  transition: color 0.4s var(--ease);
}

.cur-card__title em {
  color: var(--ash);
  font-weight: 300;
  transition: color 0.4s var(--ease);
}


.cur-card__desc {
  font-size: clamp(14.5px, 1.1vw, 16px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 44ch;
  margin-bottom: clamp(24px, 3.5vw, 48px);
  transition: color 0.4s var(--ease);
}

.cur-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  align-self: flex-start;
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-bright);
  background: var(--ink);
  padding: 14px 22px;
  border-radius: 999px;
  transition: background 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}

.cur-card__cta:active {
  transform: translateY(1px);
}

.cur-card__cta-arrow {
  font-family: var(--font-mono);
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Modules section ---------- */
.modules {
  background: var(--paper-bright);
  position: relative;
}

.modules__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.modules__copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.modules__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--ink);
}

.modules__title em {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--ash);
  font-style: normal;
}

.modules__desc {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 50ch;
}

.modules__list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 6px 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.modules__list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: baseline;
}

.modules__list li:nth-child(odd) {
  border-right: 1px solid var(--rule);
  padding-right: 16px;
}

.modules__list li:nth-child(even) {
  padding-left: 20px;
}

.modules__list span:first-child {
  color: var(--ember);
  font-weight: 600;
}

.modules__disclaimer {
  font-size: 12px;
  color: var(--ash);
  max-width: 56ch;
  margin-top: 4px;
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0.005em;
}

.modules__media {
  position: relative;
  margin: 0;
}

.modules__media img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- About (default light theme / used on subpages) ---------- */
.about {
  background: var(--paper-bright);
  position: relative;
}

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

/* Dark variant / used on home page with Forward Avenue backdrop */
.about--dark {
  background: var(--smoke);
  color: var(--paper-bright);
  overflow: hidden;
  isolation: isolate;
}

.about--dark .about__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.about--dark .about__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: grayscale(0.35) contrast(1.08) brightness(0.55) saturate(0.9);
}

.about--dark .about__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 10, 9, 0.45) 0%, rgba(10, 10, 9, 0.18) 30%, rgba(10, 10, 9, 0.18) 65%, rgba(10, 10, 9, 0.78) 100%),
    linear-gradient(90deg, rgba(10, 10, 9, 0.55) 0%, rgba(10, 10, 9, 0.0) 55%);
  pointer-events: none;
}

.about--dark > .wrap {
  position: relative;
  z-index: 1;
}

.about__rail {
  position: sticky;
  top: 80px;
  display: grid;
  gap: 24px;
  align-self: start;
}

.about__rail-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(80px, 12vw, 160px);
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: var(--ember);
}

.about__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: clamp(28px, 3.5vw, 40px);
  overflow-wrap: break-word;
}

.about__title em {
  color: var(--ash);
  font-weight: 300;
}

.about--dark .about__title { color: var(--paper-bright); }
.about--dark .about__title em { color: var(--ash-light); }
.about--dark .about__rail-quote {
  color: var(--paper-bright);
  border-top-color: var(--ember-bright);
}
.about--dark .about__rail-meta { color: var(--ash-light); }

/* ---------- Figure plate (full-width photo between sections) ---------- */
.figure-plate {
  background: var(--smoke);
  border-top: 1px solid var(--smoke-rule);
  border-bottom: 1px solid var(--smoke-rule);
  position: relative;
  overflow: hidden;
}

.figure-plate__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.figure-plate__media {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--smoke-deep);
}

.figure-plate__media--aerial {
  aspect-ratio: 27 / 9;
}

/* Feature variant / for transparent assets that need to sit centered/contained */
.figure-plate__media--feature {
  aspect-ratio: 21 / 9;
  background: var(--smoke);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 4vw, 56px);
}

.figure-plate__media--feature img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  filter: none;
}

/* Multi-image methods grid (replaces single-image plate) */
.figure-plate__methods {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--smoke-rule);
}

.figure-plate__method {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--smoke-deep);
}

.figure-plate__method img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.85) contrast(1.05) brightness(0.88) saturate(0.85);
  transition: filter 0.6s var(--ease), transform 0.6s var(--ease);
}

.figure-plate__method:hover img {
  filter: grayscale(0.5) contrast(1.05) brightness(1) saturate(1);
  transform: scale(1.04);
}

.figure-plate__method-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 10px;
  background: rgba(10, 10, 9, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember-bright);
  white-space: nowrap;
}

.figure-plate__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.85) contrast(1.05) brightness(0.95) saturate(0.85);
  transition: filter 1.2s var(--ease), transform 1.2s var(--ease);
}

.figure-plate__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(10, 10, 9, 0.15) 0%, rgba(10, 10, 9, 0) 30%, rgba(10, 10, 9, 0.15) 100%);
  pointer-events: none;
}

.figure-plate__inner.is-visible .figure-plate__media img {
  filter: grayscale(0.55) contrast(1.05) brightness(1) saturate(1);
}

.figure-plate__caption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 24px;
  padding: 16px var(--gutter);
  border-top: 1px solid var(--smoke-rule);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash-light);
  align-items: center;
}

.figure-plate__caption > :first-child {
  color: var(--ember-bright);
  font-weight: 600;
}

.figure-plate__caption > :nth-child(2) {
  color: var(--paper-deep);
  text-align: center;
}

.figure-plate__caption > :last-child {
  color: var(--ash-light);
  text-align: right;
}

.about__rail-quote {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.15;
  color: var(--ink);
  border-top: 2px solid var(--ink);
  padding-top: 20px;
  max-width: 22ch;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

.about__rail-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
}

.about__copy {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 64ch;
  font-weight: 400;
}

/* Two-column body for editorial-style sections */
.about__copy--columns {
  max-width: none;
  column-count: 2;
  column-gap: clamp(40px, 5vw, 72px);
  column-rule: 1px solid var(--rule);
}

.about--dark .about__copy--columns { column-rule-color: var(--smoke-rule); }

.about__copy--columns p {
  break-inside: avoid;
  margin-top: 0;
}

.about__copy--columns p:first-of-type {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  border-left: none;
  padding-left: 0;
  margin-bottom: 1.4em;
  color: inherit;
}

@media (max-width: 880px) {
  .about__copy--columns { column-count: 1; }
}

/* Section frame inside dark about (home only) */
.about--dark .section-frame__num { color: var(--ember-bright); }
.about--dark .section-frame__rule { background: var(--ember-bright); opacity: 0.55; }
.about--dark .section-frame__label { color: var(--ash-light); }
.about--dark .about__copy { color: var(--paper-deep); }

.about__copy p {
  margin-bottom: 1.4em;
}

.about__copy p:first-of-type {
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.005em;
  border-left: 3px solid var(--ash);
  padding-left: 24px;
  margin-bottom: 2em;
}

.about__copy strong {
  color: var(--ink);
  font-weight: 600;
}

.about--dark .about__copy p:first-of-type {
  color: var(--paper-bright);
  /* Remove the 3px transparent border that was inherited from light mode —
     it shifts the absolute ::before reference origin by 3px and breaks
     alignment with the red bar on the origin callout above. */
  border-left: 0;
  padding-left: 27px; /* 3 (bar) + 24 (text gap), matches the callout's spacing */
  position: relative;
}

/* Vertical gradient bar echoing the wordmark's metallic gold —
   dark at both ends with a bright highlight band in the middle so the
   bar reads as solid metal, not as a fade-out. */
.about--dark .about__copy p:first-of-type::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    180deg,
    #8B6315 0%,
    #B5974A 22%,
    #CCA737 42%,
    #DABC43 50%,
    #CCA737 58%,
    #B5974A 78%,
    #8B6315 100%
  );
}

.about--dark .about__copy strong {
  color: var(--paper-bright);
}

/* 2007 origin callout (default light).
   Bar rendered via ::before so it shares the exact same mechanism as the
   gold metallic bar on the body copy below — guarantees pixel-perfect
   horizontal alignment between the two accents. Padding-left = 3 (bar) + 24 (text gap). */
.about__origin {
  margin-bottom: clamp(36px, 5vw, 56px);
  padding: 22px 28px 24px 27px;
  background: var(--paper-deep);
  display: grid;
  gap: 14px;
  position: relative;
}

.about__origin::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--ember);
}

.about__origin-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember);
}

.about__origin-body {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(19px, 2vw, 22px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-transform: none;
}

/* Dark theme override for origin callout */
.about--dark .about__origin {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 24px 28px 26px 27px;
}

.about--dark .about__origin::before {
  background: var(--ember-bright);
}

.about--dark .about__origin-label { color: var(--ember-bright); }
.about--dark .about__origin-body { color: var(--paper-bright); }

/* NFPA 1700 closing line (default light) */
.about__nfpa {
  margin-top: clamp(36px, 5vw, 48px);
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.55;
  color: var(--ash);
  max-width: 60ch;
  text-transform: none;
}

.about__nfpa strong {
  color: var(--ink);
  font-weight: 600;
}

.about--dark .about__nfpa {
  border-top-color: var(--smoke-rule);
  color: var(--ash-light);
}

.about--dark .about__nfpa strong { color: var(--ember-bright); }

/* ---------- Stats banner ---------- */
.stats {
  background: var(--smoke);
  color: var(--paper-bright);
  border-top: 1px solid var(--smoke-rule);
  border-bottom: 1px solid var(--smoke-rule);
  padding: clamp(56px, 8vw, 96px) 0;
  position: relative;
  overflow: hidden;
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  z-index: 1;
}

.stat {
  position: relative;
  padding: 8px clamp(20px, 3vw, 40px);
  display: grid;
  gap: 16px;
}

.stat + .stat { border-left: 1px solid var(--smoke-rule); }

.stat__value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(48px, 7vw, 92px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--paper-bright);
  font-variant-numeric: tabular-nums;
}

.stat__value-prefix {
  color: var(--ember);
  margin-right: 0.04em;
  font-weight: 900;
}

.stat__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash-light);
  max-width: 18ch;
  line-height: 1.45;
}

/* ---------- Contact ---------- */
.contact {
  background: var(--paper);
  position: relative;
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: end;
}

.contact__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  hyphens: auto;
}

.contact__title em {
  color: var(--ash);
  font-weight: 300;
}

.contact__details {
  display: grid;
  gap: 0;
}

.contact-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px;
  align-items: baseline;
  border-top: 1px solid var(--rule);
  padding: 22px 0;
}

.contact-row:last-child { border-bottom: 1px solid var(--rule); }

.contact-row__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
}

.contact-row__value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-transform: uppercase;
  /* Allow long unbreakable strings (emails, addresses) to wrap so they
     don't force the grid track to overflow its column. */
  min-width: 0;
  overflow-wrap: anywhere;
}

.contact-row__value a {
  border-bottom: 2px solid var(--ink);
  padding-bottom: 2px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.contact-row__value a:hover {
  color: var(--ember);
  border-bottom-color: var(--ember);
}

/* ---------- Buttons (registration etc) ---------- */
.btn-stack {
  display: grid;
  gap: 16px;
}

.btn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  background: var(--paper-bright);
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 32px clamp(24px, 3vw, 40px);
  text-align: left;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.15s var(--ease), border-color 0.3s var(--ease);
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateX(-101%);
  transition: transform 0.5s var(--ease);
  z-index: 0;
}

.btn > * { position: relative; z-index: 1; }

.btn:hover { color: var(--paper-bright); }
.btn:hover::after { transform: translateX(0); }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--ink);
  color: var(--paper-bright);
}

/* Match the External button's slide-in mechanic — ember overlay sweeps in
   from the left on hover, instead of a static fade. */
.btn--primary::after {
  background: var(--ember);
  transform: translateX(-101%);
  opacity: 1;
}

.btn--primary:hover::after { transform: translateX(0); }

.btn--ember {
  background: var(--ember);
  border-color: var(--ember);
  color: var(--paper-bright);
}

.btn__main {
  display: grid;
  gap: 8px;
}

.btn__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.btn__title em {
  font-weight: 300;
}

.btn__sub {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.78;
}

.btn--primary .btn__sub { opacity: 0.7; }

.btn__arrow {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  transition: transform 0.4s var(--ease);
  line-height: 1;
}

.btn:hover .btn__arrow { transform: translateX(8px); }

/* Smaller arrow link */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 4px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), gap 0.3s var(--ease);
}

.link-arrow:hover {
  color: var(--ember);
  border-color: var(--ember);
  gap: 14px;
}

/* ---------- Note callout ---------- */
.note {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-top: 40px;
  align-items: start;
}

.note__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember);
  padding-top: 4px;
}

.note__body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.note__body a {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
  font-weight: 500;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.note__body a:hover {
  color: var(--ember);
  border-color: var(--ember);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--smoke-deep);
  color: var(--paper-deep);
  /* Tight, symmetric vertical padding — content sits centered in the
     dark block without the heavy negative space the longer footer needed. */
  padding: clamp(36px, 4.5vw, 60px) 0;
  border-top: 1px solid var(--smoke-rule);
}

/* Footer top: lockup hugs the LEFT edge, nav columns hug the RIGHT edge.
   Both are top-aligned so the foot-col labels sit at the same y as the
   crest + "FROM KNOWLEDGE TO PRACTICE" wordmark — visually anchored. */
.site-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(40px, 6vw, 96px);
}

.site-footer__lockup {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 20px);
  /* Allow the lockup to shrink so the mark sentence wraps naturally
     instead of overflowing the footer. */
  min-width: 0;
  flex: 1 1 auto;
}

/* Crest + wordmark form a horizontal lockup. Centered against the wordmark only,
   not the full block, so vertical alignment stays balanced at every viewport. */
.site-footer__crest-mark {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 36px);
}

.site-footer__crest {
  width: clamp(100px, 13vw, 200px);
  height: auto;
  flex-shrink: 0;
  opacity: 0.88;
  filter: brightness(0.95);
}

/* Footer mark: Latin + red backslash + English flow as a single sentence.
   Sized small enough that each phrase fits on one line, with the wrap
   point falling between Latin and "\ English" — never mid-phrase. */
.site-footer__mark {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 clamp(10px, 1.2vw, 16px);
  /* max-width forces the wrap to fall after Latin, even at very wide
     viewports where the whole sentence would otherwise fit on one line. */
  max-width: 28ch;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.site-footer__mark-latin { color: var(--paper-bright); }
.site-footer__mark-en    { color: var(--ash-light); }

/* Nav columns size to their content and sit on the right edge of the row.
   Two foot-cols laid out as a tight pair so they read as a balanced block
   against the lockup's mass on the left. */
.site-footer__nav {
  display: grid;
  grid-template-columns: auto auto;
  gap: clamp(40px, 5vw, 80px);
  flex-shrink: 0;
  padding-top: 6px;          /* nudge down so labels align with crest top edge */
}

.foot-col {
  display: grid;
  gap: 12px;
}

.foot-col__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash-light);
  margin-bottom: 8px;
}

.foot-col a {
  color: var(--paper-deep);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  width: fit-content;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.foot-col a:hover {
  color: var(--ember-bright);
  border-bottom-color: var(--ember-bright);
}

.text-ember { color: var(--ember); }

/* ---------- Reveal motion ---------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero .reveal { transition-duration: 0.8s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero__inner {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 56px;
    padding-top: 140px;
  }

  .hero__meta {
    padding-left: 0;
    border-top: 1px solid var(--smoke-rule);
    padding-top: 32px;
  }

  .hero__meta::before { display: none; }

  .page-hero__inner,
  .curriculum__grid,
  .about__grid,
  .contact__grid {
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
  }

  /* Footer top is flex, not grid — stack the lockup over the nav */
  .site-footer__top {
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
  }
  .site-footer__nav { padding-top: 0; }

  .about__rail {
    position: relative;
    top: 0;
  }

  .cur-card--secondary { margin-top: 0; }

  .stats__grid { grid-template-columns: 1fr 1fr; }

  .stat:nth-child(2) { border-left: 1px solid var(--smoke-rule); }
  .stat:nth-child(3) {
    border-left: none;
    border-top: 1px solid var(--smoke-rule);
    padding-top: 32px;
    margin-top: 32px;
  }
  .stat:nth-child(4) {
    border-top: 1px solid var(--smoke-rule);
    padding-top: 32px;
    margin-top: 32px;
  }

  .figure-plate__media { aspect-ratio: 16 / 10; }
  .figure-plate__caption {
    grid-template-columns: 1fr;
    gap: 8px;
    text-align: left;
  }
  .figure-plate__caption > :nth-child(2),
  .figure-plate__caption > :last-child {
    text-align: left;
  }

  .figure-plate__methods { grid-template-columns: repeat(2, 1fr); }

  .modules__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .modules__list { grid-template-columns: 1fr; }
  .modules__list li:nth-child(odd) {
    border-right: none;
    padding-right: 0;
  }
  .modules__list li:nth-child(even) { padding-left: 0; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }

  .nav { display: none; }
  .nav.is-open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    background: var(--smoke-deep);
    padding: 24px var(--gutter);
    gap: 18px;
    border-top: 1px solid var(--smoke-rule);
  }

  .site-header--light .nav.is-open {
    background: var(--paper-bright);
    border-top: 1px solid var(--rule);
  }

  .nav__toggle { display: inline-flex; align-items: center; gap: 10px; }
  .nav__toggle-bar {
    display: inline-block;
    width: 22px;
    height: 2px;
    background: currentColor;
    position: relative;
  }
  .nav__toggle-bar::before,
  .nav__toggle-bar::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: currentColor;
  }
  .nav__toggle-bar::before { top: -7px; }
  .nav__toggle-bar::after  { top:  7px; }

  .hero__inner { padding-top: 130px; padding-bottom: 64px; }
  .hero-headline__small { font-size: 18px; }
  .hero-headline__big { font-size: clamp(56px, 17vw, 96px); }

  .hero__meta { grid-template-columns: 1fr; gap: 28px; }

  .stats__grid { grid-template-columns: 1fr; gap: 0; }

  .stat { padding: 24px var(--gutter); }
  .stat + .stat,
  .stat:nth-child(2),
  .stat:nth-child(3),
  .stat:nth-child(4) {
    border-left: none;
    border-top: 1px solid var(--smoke-rule);
    margin-top: 0;
    padding-top: 24px;
  }
  .stat__value { font-size: clamp(56px, 18vw, 80px); }

  .contact-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .note { grid-template-columns: 1fr; gap: 12px; }

  .btn { grid-template-columns: 1fr; gap: 16px; padding: 24px; }
  .btn__arrow { justify-self: end; }

  .figure-plate__methods { grid-template-columns: 1fr; }
  .figure-plate__method { aspect-ratio: 4 / 3; }

  .about__copy p:first-of-type {
    font-size: 19px;
    padding-left: 18px;
  }
}

/* ---------- Partners & Sponsors page ----------
   Editorial roster of every contributing institution. Each numbered
   section gets its own frame; long lists collapse to multi-column at
   desktop widths and single-column on mobile. */

.partners-intro {
  padding-top: clamp(48px, 6vw, 96px);
  padding-bottom: clamp(36px, 4.5vw, 56px);
}

.partners__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin: clamp(20px, 2.5vw, 32px) 0 clamp(20px, 2.4vw, 30px);
  color: var(--ink);
  max-width: 14ch;
}

.partners__title em {
  color: var(--ash);
  font-weight: 300;
  font-style: normal;
}

.partners__lede {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 64ch;
  margin: 0 0 clamp(16px, 1.8vw, 22px);
}

.partners__lede strong {
  color: var(--ink);
  font-weight: 600;
}

.partners__lede--note {
  font-style: italic;
  font-size: clamp(13.5px, 1.05vw, 15px);
  color: var(--ash);
  max-width: 64ch;
}

.partners__sub-lede {
  font-size: clamp(14.5px, 1.15vw, 16px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 64ch;
  margin: 0 0 clamp(20px, 2.5vw, 28px);
}

.partners-section {
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--rule);
}

.partners-section .section-frame { margin-bottom: clamp(24px, 3vw, 40px); }

/* Single-column list — used for sections where most rows have a meta
   descriptor on the right (Lead Agency, $1.2 M Grant, etc.). */
.partners-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.partners-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: baseline;
  padding: clamp(14px, 1.6vw, 20px) 0;
  border-bottom: 1px solid var(--rule);
  break-inside: avoid;
}

.partners-name {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.3;
}

.partners-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember);
  white-space: nowrap;
}

/* Multi-column variant for dense roster sections (research bodies,
   academic, network, industry, countries). CSS columns auto-balance the
   row count between left and right; break-inside: avoid keeps each row
   intact. Falls back to single column under 720px. */
@media (min-width: 720px) {
  .partners-list--cols {
    columns: 2;
    column-gap: clamp(40px, 5vw, 80px);
  }
}

/* Country list — names only, no meta, slightly tighter rows */
.partners-list--countries li { padding: 12px 0; }
   Compact horizontal marquee: source logos with article titles underneath,
   auto-scrolling left. Pauses on hover so visitors can read and click. */

/* Tighten the section's vertical rhythm — the marquee + also-covered row
   are visually compact, so the default 96px bottom padding leaves a dead
   gap before the next section. */
.press.section--tight {
  padding-bottom: clamp(20px, 2.4vw, 32px);
}

/* When Contact directly follows Press, trim its 144px top padding —
   without this the section frames sit 200px apart with nothing in
   between, which reads as dead space. */
.press + .contact {
  padding-top: clamp(36px, 4vw, 56px);
}

.press__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -0.022em;
  text-transform: uppercase;
  margin: clamp(18px, 2vw, 26px) 0 clamp(20px, 2.5vw, 32px);
  color: var(--ink);
}

.press__title em {
  color: var(--ash);
  font-weight: 300;
  font-style: normal;
}

/* Marquee container — scrolls horizontally. The auto-scroll is driven by
   JS (see script.js → initPressMarquee) so the same scrollLeft can handle
   both the automatic motion AND the user's manual horizontal scroll +
   touch pan. Edges fade out with a CSS mask so cards don't pop in/out. */
.press-marquee {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  padding: clamp(6px, 1vw, 10px) 0 clamp(28px, 3vw, 36px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  /* Hide native scrollbar without disabling scroll */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Smooth touch scrolling on iOS */
  -webkit-overflow-scrolling: touch;
  /* Tell browsers we'll be moving scrollLeft a lot */
  scroll-behavior: auto;
  cursor: grab;
}
.press-marquee::-webkit-scrollbar { display: none; }
.press-marquee:active { cursor: grabbing; }

.press-marquee__track {
  display: flex;
  width: max-content;
  gap: 0; /* card vertical rules act as the gap */
}

@media (prefers-reduced-motion: reduce) {
  /* JS reads this and disables the rAF loop; manual scroll still works */
  .press-marquee { scroll-behavior: smooth; }
}

/* ----- Cards ----- */
.press-card {
  flex-shrink: 0;
  width: clamp(240px, 22vw, 300px);
  display: grid;
  grid-template-rows: 64px auto;
  gap: 18px;
  padding: 8px clamp(20px, 2vw, 32px);
  text-decoration: none;
  color: var(--ink);
  border-left: 1px solid var(--rule);
  /* Specific properties only */
  transition: color 0.24s var(--ease-quick);
}

.press-card:hover { color: var(--ember); }
.press-card:active { transform: scale(0.99); }
.press-card:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 4px;
}

.press-card__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
}

.press-card__logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  /* Slight opacity at rest signals "passive list" — hover reveals full
     intensity. Logos already lean red/black which sits inside the FKTP
     palette, so we don't desaturate. */
  opacity: 0.82;
  transition: opacity 0.28s var(--ease-quick);
}

.press-card:hover .press-card__logo { opacity: 1; }

.press-card__title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.001em;
  color: var(--ink-soft);
  text-align: center;
  /* Clamp to 3 lines so cards stay roughly the same height */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.press-card:hover .press-card__title { color: var(--ember); }

/* ----- "Also covered" — quiet text-only attributions, full-width 2-col ----- */
.press-also {
  padding-top: clamp(20px, 2vw, 28px);
  border-top: 1px solid var(--rule);
  margin-top: clamp(8px, 1vw, 12px);
}

.press-also__label {
  display: block;
  margin-bottom: clamp(14px, 1.4vw, 18px);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember);
}

.press-also__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.5vw, 36px);
}

@media (max-width: 720px) {
  .press-also__list {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.press-also__link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 4px 0;
  transition: color 0.22s var(--ease-quick);
}

.press-also__link:hover { color: var(--ember); }

.press-also__pub {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  transition: color 0.22s var(--ease-quick);
}

.press-also__link:hover .press-also__pub { color: var(--ember); }

.press-also__sep {
  color: var(--rule);
  font-family: var(--font-mono);
  font-size: 12px;
}

.press-also__title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: inherit;
}

/* ---------- "What You Unlock" section (full-curriculum-access page §01.1)
   Editorial inventory layout: title + lede, then a tabular module list,
   per-module note strip, and a credentials/signals row. Replaces the
   previous "Two paths" body copy block + "What Full Access Includes"
   block, condensed and front-loaded so the visitor sees concrete value
   before the form. */

.full-access-unlock {
  /* Match the curriculum page's `.course` padding-top so the gap from
     header bottom to the first red rule is identical across both pages. */
  padding-top: clamp(48px, 6vw, 96px);
  /* Tight bottom padding — the credentials strip has its own heavy bottom
     rule, so additional section padding below would create dead space
     before the next section. */
  padding-bottom: clamp(28px, 3.5vw, 48px);
}

/* Intro is now a 2-col split: title + lede on the left, the fanned modules
   image on the right. Stacks on narrow viewports. The standalone figure
   plate that used to sit below the section has been folded into here as
   editorial proof beside the title. */
.fa-unlock__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  margin: clamp(24px, 3vw, 36px) 0 clamp(36px, 4.5vw, 56px);
}

.fa-unlock__intro-text {
  display: grid;
  gap: clamp(16px, 1.8vw, 22px);
  max-width: 50ch;
}

.fa-unlock__intro-media {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fa-unlock__intro-media img {
  width: 100%;
  height: auto;
  display: block;
  /* Slight rotation + drop shadow gives the fanned documents physical
     presence without leaning into stock-photo sheen. */
  filter: drop-shadow(0 12px 24px rgba(13, 13, 12, 0.18));
}

@media (max-width: 880px) {
  .fa-unlock__intro {
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 36px);
  }
  .fa-unlock__intro-text { max-width: none; }
}

.fa-unlock__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

.fa-unlock__title em {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--ash);
  font-style: normal;
}

.fa-unlock__lede {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* Inventory: 6 modules in a 2-column tabular grid with hairline rules.
   Module code on the left in ember, name on the right in ink-soft. */
.fa-unlock__inventory {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0 0 clamp(24px, 3vw, 32px);
  padding: 0;
  border-top: 1px solid var(--rule);
}

.fa-unlock__inventory li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: baseline;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fa-unlock__inventory li:nth-child(odd) {
  border-right: 1px solid var(--rule);
  padding-right: 20px;
}

.fa-unlock__inventory li:nth-child(even) { padding-left: 24px; }

.fa-unlock__code {
  color: var(--ember);
  font-weight: 600;
  letter-spacing: 0.1em;
}

.fa-unlock__name { color: var(--ink-soft); }

@media (max-width: 720px) {
  .fa-unlock__inventory { grid-template-columns: 1fr; }
  .fa-unlock__inventory li:nth-child(odd) {
    border-right: 0;
    padding-right: 0;
  }
  .fa-unlock__inventory li:nth-child(even) { padding-left: 0; }
}

/* Per-module note: one quiet inline strip declaring what comes with each
   module — keeps the inventory itself sparse and lets this line carry the
   "× 4 deliverables per row" detail. */
.fa-unlock__per-module {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px clamp(14px, 1.6vw, 22px);
  margin: 0 0 clamp(40px, 5vw, 60px);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ash);
}

.fa-unlock__per-module-label {
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember);
}

/* Credentials strip — quiet supporting context.
   4 cells in a horizontal row with hairline rules. No numbered tags, no
   heavy black borders, smaller and softer values. Reads as a credit reel
   beneath the main content rather than a featured panel. */
.fa-unlock__signals {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.fa-unlock__signals li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(18px, 2vw, 24px) clamp(16px, 1.8vw, 22px);
  border-right: 1px solid var(--rule);
}

.fa-unlock__signals li:last-child  { border-right: 0; padding-right: 0; }
.fa-unlock__signals li:first-child { padding-left: 0; }

.fa-unlock__signal-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember);
}

.fa-unlock__signal-value {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.4;
  letter-spacing: 0.005em;
  color: var(--ink-soft);
}

@media (max-width: 880px) {
  .fa-unlock__signals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fa-unlock__signals li { border-right: 0; }
  .fa-unlock__signals li:nth-child(odd) { border-right: 1px solid var(--rule); }
  .fa-unlock__signals li:nth-child(1),
  .fa-unlock__signals li:nth-child(2) { border-bottom: 1px solid var(--rule); }
  .fa-unlock__signals li:first-child  { padding-left: 0; }
  .fa-unlock__signals li:nth-child(2),
  .fa-unlock__signals li:nth-child(4) { padding-right: 0; }
}

@media (max-width: 540px) {
  .fa-unlock__signals { grid-template-columns: 1fr; }
  .fa-unlock__signals li {
    border-right: 0 !important;
    border-bottom: 1px solid var(--rule);
    padding: 16px 0;
  }
  .fa-unlock__signals li:last-child { border-bottom: 0; }
}

/* Closing alt strip — the "rather not register?" escape hatch placed
   AFTER the registration form. Tight section, single link. */
.full-access-close {
  padding: clamp(40px, 5vw, 64px) 0 clamp(56px, 7vw, 88px);
  border-top: 1px solid var(--rule);
}


/* ---------- Registration accordion (full-curriculum-access page) ---------- */

/* Stacked accordion — fills the wrap content width, no max-width cap. */
.register-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.6vw, 22px);
  margin: clamp(24px, 3vw, 40px) 0 clamp(20px, 3vw, 32px);
  width: 100%;
}

/* Ensure .btn used as a button (not anchor) gets the button defaults right */
.register-toggle__btn {
  cursor: pointer;
  text-align: left;
  font: inherit;
  width: 100%;
}

/* Chevron — replaces the original "→" arrow on these accordion buttons */
.register-toggle__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: currentColor;
  transition: transform 0.32s var(--ease-quick);
}

.register-toggle__chevron svg { display: block; }

.register-toggle__btn[aria-expanded="true"] .register-toggle__chevron {
  transform: rotate(180deg);
}

/* The panel uses the grid 0fr → 1fr trick to animate to/from auto height
   without needing JS to measure scrollHeight. */
.register-toggle__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--ease-quick);
  background: var(--paper-bright);
  border: 1px solid var(--rule);
  border-top: 0;
}

/* Primary panel mirrors the OFS button's ember tint */
.register-toggle:has(.register-toggle__btn.btn--primary) .register-toggle__panel {
  border-color: var(--ember);
}

.register-toggle.is-open .register-toggle__panel {
  grid-template-rows: 1fr;
}

.register-toggle__panel-inner {
  min-height: 0;
  overflow: hidden;
}

/* Inset the form inside the panel */
.register-toggle__panel-inner > form {
  padding: clamp(24px, 2.5vw, 36px);
  padding-top: clamp(20px, 2.2vw, 28px);
}

/* When closed, the panel border doesn't need to render — the button has its own */
.register-toggle:not(.is-open) .register-toggle__panel {
  border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .register-toggle__panel,
  .register-toggle__chevron { transition: none; }
}

.register-card__fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.reg-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Two-column grouping for the second row of fields (name + dept/station).
   Stacks on narrow viewports. */
.reg-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.6vw, 22px);
}

@media (max-width: 560px) {
  .reg-field-row { grid-template-columns: 1fr; }
}

.reg-field__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
}

.reg-field__input {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: 0;
  transition: border-color 0.18s var(--ease-quick), background 0.18s var(--ease-quick);
}

.reg-field__input::placeholder {
  color: var(--ash-light);
  font-weight: 300;
}

.reg-field__input:hover {
  border-color: var(--ash-light);
}

.reg-field__input:focus {
  outline: none;
  border-color: var(--ember);
  background: var(--paper-bright);
}

/* Only show invalid styling once the user has typed — don't yell on first sight */
.reg-field__input:not(:placeholder-shown):invalid {
  border-color: var(--ember);
}

.reg-field__hint {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ash-light);
}

/* Honeypot — visually + spatially removed but still focusable for AT users
   who shouldn't be filling it in either. aria-hidden in the HTML. */
.reg-field--honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

/* Turnstile widget — give it a min height so the form doesn't jump when it
   loads asynchronously */
.reg-turnstile {
  min-height: 65px;
  display: flex;
  align-items: center;
}

.register-card__submit {
  margin-top: 6px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-bright);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  transition:
    background 0.2s var(--ease-quick),
    border-color 0.2s var(--ease-quick),
    transform 0.16s var(--ease-quick);
}

.register-card__submit:hover {
  background: var(--ember);
  border-color: var(--ember);
}

.register-card__submit:active {
  transform: scale(0.98);
}

.register-card__submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.register-card__submit:disabled:hover {
  background: var(--ink);
  border-color: var(--ink);
}

.register-card__submit-arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease-quick);
}

.register-card__submit:hover .register-card__submit-arrow {
  transform: translateX(4px);
}

.register-card__error {
  margin-top: 4px;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ember);
  background: rgba(247, 3, 3, 0.06);
  border-left: 3px solid var(--ember);
}

/* Textarea variant of the input — used for the External "Reason for access"
   field. Same border / focus treatment as inputs, just with multi-line padding
   and resize affordance. */
.reg-field__textarea {
  min-height: 96px;
  padding: 12px 14px;
  line-height: 1.5;
  font-family: var(--font-body);
  resize: vertical;
}

/* Success state — replaces the form fields after a successful submit.
   Editorial card with eyebrow + display title + supporting copy. */
.register-card__success-card {
  padding: 32px;
  background: var(--paper-bright);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ember);
  animation: regSuccessIn 320ms cubic-bezier(0.23, 1, 0.32, 1);
}

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

.register-card__success-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 12px;
}

.register-card__success-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 16px;
}

.register-card__success-body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 14px;
}

.register-card__success-body--muted {
  color: var(--ash);
  font-size: 14px;
}

.register-card__success-hint {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ash-light);
}

.register-card__success-hint a {
  color: var(--ember);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.18s var(--ease-quick);
}

.register-card__success-hint a:hover {
  border-bottom-color: var(--ember);
}

@media (prefers-reduced-motion: reduce) {
  .register-card__success-card { animation: none; }
}

/* ---------- Utilities ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}