/* ==========================================================================
   Traffic Stop Bootcamp — Journey 2 Justice Learning LLC
   Single stylesheet. No build step, no framework.

   Structure:
     1. Tokens          — colours, type, spacing (edit here first)
     2. Reset & base
     3. Typography
     4. Layout helpers
     5. Components      — buttons, forms, cards, tick rule
     6. Header & footer
     7. Page sections
     8. Motion & responsive
   ========================================================================== */


/* 1. TOKENS ================================================================ */

:root {
  /* Palette — drawn from roadway signage: guide-sign green, reflective
     sheeting, hazard amber. Change these six values to re-skin the site. */
  --ink:          #0E1C24;   /* deepest text + dark bands */
  --ink-soft:     #3C4E57;   /* secondary text */
  --ink-faint:    #6B7C84;   /* captions, meta */

  --sign:         #0B5B45;   /* brand anchor — guide-sign green */
  --sign-deep:    #073E30;   /* pressed / hover state */
  --sign-tint:    #E4EDE8;   /* pale wash behind quiet blocks */

  --hazard:       #E6A93B;   /* hazard amber — ticks + focus only */
  --hazard-deep:  #C98A1C;

  --sheeting:     #EDF1EE;   /* page ground — pale reflective sheeting */
  --mist:         #D6DDD8;   /* hairlines and borders */
  --white:        #FFFFFF;

  /* Type
     Newsreader carries the headlines — an editorial serif with real optical
     sizing and a working italic, set at light weights so it reads composed
     rather than shouted. Instrument Sans handles body and interface. Mono is
     reserved for measured things only: time codes and module numbers. */
  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --body:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale — fluid, clamps at both ends so nothing breaks on small phones */
  --step--1: clamp(0.8rem, 0.775rem + 0.12vw, 0.875rem);
  --step-0:  clamp(0.975rem, 0.95rem + 0.13vw, 1.05rem);
  --step-1:  clamp(1.15rem, 1.09rem + 0.3vw, 1.32rem);
  --step-2:  clamp(1.45rem, 1.31rem + 0.68vw, 1.9rem);
  --step-3:  clamp(1.8rem, 1.55rem + 1.2vw, 2.5rem);
  --step-4:  clamp(2.15rem, 1.72rem + 1.95vw, 3.25rem);

  /* Rhythm */
  --gutter:  clamp(1.25rem, 4vw, 3rem);
  --measure: 68ch;
  --shell:   1180px;
  --radius:  6px;         /* signage corners are tight, never pill-shaped */

  --shadow-card: 0 1px 2px rgba(14, 28, 36, 0.05),
                 0 12px 32px -18px rgba(14, 28, 36, 0.35);
}


/* 2. RESET & BASE ========================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--sheeting);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

img, svg, video, iframe { display: block; max-width: 100%; }
img, video { height: auto; }

/* Visible keyboard focus everywhere — amber reads clearly on both grounds. */
:focus-visible {
  outline: 3px solid var(--hazard);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--hazard); color: var(--ink); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--ink); color: var(--white);
  padding: 0.7rem 1.2rem;
  font-family: var(--body); font-size: var(--step--1); font-weight: 500;
  text-decoration: none;
}
.skip-link:focus { transform: translate(-50%, 0); }


/* 3. TYPOGRAPHY ============================================================ */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 450;
  font-optical-sizing: auto;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); line-height: 1.08; letter-spacing: -0.022em; }
h2 { font-size: var(--step-3); letter-spacing: -0.018em; }
h3 { font-size: var(--step-1); font-weight: 500; letter-spacing: -0.008em; }

/* Headline italic is the emphasis device — Newsreader's italic is a true cut,
   so it carries weight without needing bold. */
h1 em, h2 em { font-style: italic; font-weight: 400; }

p { margin: 0 0 1.05em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--sign); text-underline-offset: 0.18em; }
a:hover { color: var(--sign-deep); }

strong { font-weight: 600; }

/* Eyebrow — the small label that names a section's job. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--body);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sign);
  margin: 0 0 1rem;
}
.eyebrow::before {
  content: "";
  width: 1.6rem; height: 2px;
  background: var(--hazard);
  flex: none;
}
.eyebrow--light { color: rgba(255, 255, 255, 0.72); }

.lede {
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.004em;
  color: var(--ink-soft);
}

.meta {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}


/* 4. LAYOUT ================================================================ */

.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

.section { padding-block: clamp(3.25rem, 6.5vw, 5.25rem); }
.section--tight { padding-block: clamp(2.25rem, 4vw, 3.25rem); }

.section--dark {
  background: var(--ink);
  color: var(--white);
}
.section--dark h2, .section--dark h3 { color: var(--white); }
.section--dark p { color: rgba(255, 255, 255, 0.76); }
.section--dark a { color: var(--hazard); }

.section--tint { background: var(--sign-tint); }

.section__head { max-width: 58ch; margin-bottom: clamp(1.8rem, 3.2vw, 2.75rem); }


/* 5. COMPONENTS ============================================================ */

/* --- Tick rule ------------------------------------------------------------
   The site's recurring motif: a measured strip of marks, like the ticks on a
   mile marker. Used under the header, above dark bands, and beside modules. */
.tick-rule {
  height: 6px;
  background-image: repeating-linear-gradient(
    to right,
    var(--hazard) 0 2px,
    transparent 2px 16px
  );
  opacity: 0.7;
}
.tick-rule--dense {
  background-image: repeating-linear-gradient(
    to right,
    var(--sign) 0 2px,
    transparent 2px 9px
  );
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--body);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.002em;
  text-decoration: none;
  padding: 0.82rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.18s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--sign);
  color: var(--white);
  border-color: var(--sign);
}
.btn--primary:hover { background: var(--sign-deep); border-color: var(--sign-deep); color: var(--white); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--mist);
}
.btn--ghost:hover { border-color: var(--sign); color: var(--sign); }

.btn--onDark {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.32);
}
.btn--onDark:hover { border-color: var(--hazard); color: var(--hazard); }

.btn--block { width: 100%; }

/* --- Forms --------------------------------------------------------------- */
.field { margin-bottom: 0.85rem; }

.field label {
  display: block;
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: -0.002em;
  color: var(--ink-soft);
  margin-bottom: 0.38rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  padding: 0.72rem 0.85rem;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.field textarea { min-height: 9.5rem; resize: vertical; line-height: 1.55; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #B8C4BC; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--sign);
  box-shadow: 0 0 0 3px rgba(11, 91, 69, 0.14);
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233C4E57' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.4rem;
}

.form-note {
  font-size: var(--step--1);
  color: var(--ink-faint);
  margin-top: 0.9rem;
}

/* Honeypot — kept out of view but not hidden from the form itself. */
.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.form-status {
  display: none;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--sign);
  background: var(--sign-tint);
  font-size: var(--step--1);
  color: var(--ink);
}
.form-status[data-state="error"] { border-left-color: var(--hazard-deep); background: #FBF1DF; }
.form-status[data-state="sending"] { border-left-color: var(--ink-faint); background: #E7EBE8; }
.form-status.is-shown { display: block; }

/* --- Cards --------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 2.6vw, 1.9rem);
}

.grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* --- Guide-sign frame -----------------------------------------------------
   Highway signs carry a white keyline inset from the edge. Reused on the
   logo mark and on the highlights video so the two read as one system. */
.sign-frame {
  position: relative;
  background: var(--sign);
  border-radius: 6px;
  padding: 10px;
}
.sign-frame::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 3px;
  pointer-events: none;
}
.sign-frame > * { border-radius: 2px; }


/* 6. HEADER & FOOTER ======================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(237, 241, 238, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--mist);
}
.site-header .tick-rule { height: 3px; opacity: 0.55; }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 104px;
  padding-block: 0.8rem;
}

/* Logo slot — swap the <img> inside for the client's file, nothing else. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.7rem, 1.2vw, 1.05rem);
  text-decoration: none;
  color: var(--ink);
}
.brand__mark { width: clamp(52px, 5vw, 68px); height: auto; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--display);
  font-size: clamp(1.45rem, 1.05rem + 1.15vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.022em;
}
.brand__org {
  font-family: var(--body);
  font-size: clamp(0.66rem, 0.6rem + 0.16vw, 0.76rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 0.34rem;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 1.9rem); }

.nav__link {
  font-family: var(--body);
  font-size: 0.9rem;
  font-weight: 450;
  letter-spacing: -0.002em;
  text-decoration: none;
  color: var(--ink-soft);
  padding-block: 0.35rem;
  border-bottom: 1.5px solid transparent;
  transition: color 0.16s ease, border-color 0.16s ease;
}
.nav__link:hover { color: var(--sign); }
.nav__link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--hazard); }

.nav__lock { display: inline-flex; align-items: center; gap: 0.35rem; }
.nav__lock svg { width: 11px; height: 11px; opacity: 0.6; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle svg { width: 20px; height: 14px; }

/* Footer */
.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.72);
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 2rem;
  font-size: var(--step--1);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: 2.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.site-footer .brand__name { font-size: 1.3rem; letter-spacing: -0.018em; }

.site-footer h4 {
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 0.9rem;
  font-family: var(--body);
  font-weight: 500;
}
.site-footer a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.site-footer a:hover { color: var(--hazard); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem;
  padding-top: 1.4rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
}
.footer__brand-line { max-width: 42ch; color: rgba(255, 255, 255, 0.62); }


/* 7. PAGE SECTIONS ========================================================= */

/* --- Hero: catch line beside the lead form -------------------------------
   Two columns that don't sit at the same height: the copy starts higher and
   breathes, the form sits slightly lower and tighter. The wash behind them is
   the only atmosphere on the page — a low, cool light off the top edge.     */
.hero {
  position: relative;
  padding-block: clamp(2.5rem, 4.5vw, 3.75rem) clamp(2.5rem, 4.5vw, 3.75rem);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -40% 0 auto 0;
  height: 130%;
  background:
    radial-gradient(60% 55% at 22% 40%, rgba(11, 91, 69, 0.10), transparent 68%),
    radial-gradient(45% 45% at 88% 18%, rgba(230, 169, 59, 0.11), transparent 70%);
  pointer-events: none;
}
.hero > .shell { position: relative; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

/* No max-width here — the grid track is the measure. Capping the copy
   narrower than its own column is what opened a dead gutter beside it. */
.hero__lead { padding-top: 0; }

.hero h1 {
  font-size: clamp(2.7rem, 1.9rem + 3.4vw, 4.5rem);
  line-height: 1;
  margin-bottom: 0.9rem;
}

/* The section mark is the program's own vernacular — it reads as statute,
   which is exactly what "know your rights" is about. */
.hero__tagline {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  max-width: 24ch;
  margin: 0 0 1.35rem;
  font-family: var(--display);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--sign);
}
.hero__tagline::before {
  content: "\00a7";
  flex: none;
  font-size: 1.15em;
  line-height: 1;
  color: var(--hazard-deep);
  transform: translateY(0.06em);
}
.hero h1 em {
  color: var(--sign);
  /* A hazard-amber rule under the phrase that names the program. */
  background-image: linear-gradient(var(--hazard), var(--hazard));
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 92%;
  padding-bottom: 0.06em;
}

.hero .lede { max-width: 44ch; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.7rem; }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 2.2rem;
  border-top: 1px solid var(--mist);
}
.hero__stat {
  padding: 0.95rem 1.1rem 0 0;
  border-right: 1px solid var(--mist);
  position: relative;
}
.hero__stat + .hero__stat { padding-left: 1.1rem; }
.hero__stat + .hero__stat::before { left: 1.1rem; }
.hero__stat:last-child { border-right: 0; padding-right: 0; }
/* The tick motif, repeated: each figure hangs off a mark on the rule. */
.hero__stat::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 2px; height: 11px;
  background: var(--hazard);
}
.hero__stat dt {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.25rem;
}
.hero__stat dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 450;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

/* The programme still, shown whole — no cropping, so the full frame reads.
   Sits at the foot of the copy column, sized to that column rather than the
   page, so it stays inside the hero instead of pushing past the fold. */
.hero__figure {
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 0;
  max-width: 100%;
}
.hero__figure img {
  width: 100%;
  height: auto;              /* natural 1280 x 689 — never cropped */
  border-radius: 8px;
  border: 1px solid var(--mist);
  box-shadow: var(--shadow-card);
}

/* Lead form card */
.lead-card {
  background: var(--white);
  border: 1px solid var(--mist);
  border-radius: 8px;
  padding: clamp(1.4rem, 2.8vw, 1.9rem);
  box-shadow: var(--shadow-card);
}
.lead-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--mist);
}
.lead-card h2 {
  font-size: var(--step-1);
  margin-bottom: 0.25rem;
}
.lead-card__head p { font-size: var(--step--1); color: var(--ink-faint); margin: 0; }
.lead-card__step {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sign);
  white-space: nowrap;
  flex: none;
}

/* --- Highlights video ---------------------------------------------------- */
.video-band { background: var(--ink); }
.video-band .shell { position: relative; }

.video-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.2rem;
  margin-bottom: 1.8rem;
}
.video-head h2 { font-size: var(--step-2); max-width: 22ch; }

.video-shell { max-width: 940px; margin-inline: auto; }

/* 16:9 well. A poster image + <video> drops straight in; so does an iframe. */
.video-well {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0A1319;
  overflow: hidden;
}
.video-well > video,
.video-well > iframe,
.video-well > img { width: 100%; height: 100%; object-fit: cover; border: 0; }

/* Placeholder shown until the client's file is dropped in. */
.video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  padding: 1.5rem;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(11, 91, 69, 0.5), transparent 70%),
    #0A1319;
  color: rgba(255, 255, 255, 0.75);
}
.video-placeholder__play {
  width: 68px; height: 68px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.35);
  color: var(--white);
}
.video-placeholder__play svg { width: 20px; height: 22px; margin-left: 3px; }
.video-placeholder p {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.video-caption {
  margin-top: 1rem;
  font-size: var(--step--1);
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  max-width: none;
}

/* --- Signature: anatomy of a stop ---------------------------------------- */
.anatomy__track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 2px solid var(--ink);
}

.beat {
  position: relative;
  padding: 1.9rem 1.15rem 0.4rem 0;
  border-right: 1px solid var(--mist);
}
.beat:last-child { border-right: 0; }

/* The tick that anchors each beat to the rule above it. */
.beat::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 2px; height: 15px;
  background: var(--hazard);
}
.beat__time {
  display: block;
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--sign);
  margin-bottom: 0.45rem;
}
.beat__title {
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: -0.014em;
  line-height: 1.22;
  margin: 0 0 0.45rem;
}
.beat__text {
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: none;
}

/* --- Module preview (home) ----------------------------------------------- */
/* Not boxes — four columns hanging off one rule, so the row reads as a
   sequence rather than four separate tiles. */
.module-preview {
  position: relative;
  display: block;
  padding: 1.5rem 1.3rem 0.4rem 0;
  border-top: 1px solid #C9D6CE;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease;
}
.module-preview::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 2px; height: 13px;
  background: var(--hazard);
  transition: height 0.2s ease;
}
.module-preview:hover { border-color: var(--sign); }
.module-preview:hover::before { height: 22px; }
.module-preview:hover h3 { color: var(--sign); }

.module-preview__num {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--hazard-deep);
  margin-bottom: 0.5rem;
}
.module-preview h3 {
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: -0.014em;
  margin-bottom: 0.4rem;
  transition: color 0.2s ease;
}
.module-preview p { font-size: var(--step--1); line-height: 1.55; color: var(--ink-soft); margin: 0; max-width: none; }

/* --- Audience list ------------------------------------------------------- */
.audience {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.audience__row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(0.8rem, 2vw, 2rem);
  align-items: baseline;
  padding: 1.4rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.audience__idx {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--hazard);
}
.audience__name {
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 450;
  letter-spacing: -0.015em;
  color: var(--white);
  line-height: 1.2;
}
.audience__note { font-size: var(--step--1); color: rgba(255, 255, 255, 0.68); margin: 0; max-width: none; }


/* --- Pilot workshop ------------------------------------------------------
   The one offer on the page that costs nothing, so it gets the one piece of
   photography and a seal rather than another block of text. */
.pilot {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--mist);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.pilot__badge {
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
  min-height: 260px;
  padding: clamp(1.8rem, 4vw, 2.6rem);
  background: var(--sign);
  /* The tick motif again, this time as a quiet texture behind the seal. */
  background-image:
    repeating-linear-gradient(to right, rgba(255,255,255,0.09) 0 2px, transparent 2px 18px);
  background-size: 100% 100%;
}
.pilot__seal {
  width: clamp(132px, 16vw, 178px);
  height: auto;
  filter: drop-shadow(0 6px 20px rgba(7, 62, 48, 0.5));
}

.pilot__body { padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.6rem, 3vw, 2.4rem) clamp(1.6rem, 3vw, 2.4rem) 0; }
.pilot__body h2 { font-size: var(--step-2); margin-bottom: 0.85rem; }

/* Repeats the hero's statute mark, so the two offers read as one voice. */
.pilot__offer {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin: 0 0 1.1rem;
  padding: 0.9rem 1.05rem;
  background: var(--sign-tint);
  border-left: 3px solid var(--sign);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--display);
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--ink);
  max-width: none;
}
.pilot__offer::before {
  content: "\00a7";
  flex: none;
  font-size: 1.15em;
  line-height: 1;
  color: var(--hazard-deep);
}

.pilot__points {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.pilot__points li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.pilot__points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 8px; height: 2px;
  background: var(--hazard);
}

/* --- Closing CTA --------------------------------------------------------- */
.cta-band {
  background: var(--sign);
  color: var(--white);
  border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.4rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.cta-band h2 { color: var(--white); font-size: var(--step-2); margin-bottom: 0.7rem; }
.cta-band p { color: rgba(255, 255, 255, 0.82); margin: 0; }
.cta-band .btn {
  background: var(--white);
  color: var(--sign-deep);
  border-color: var(--white);
  white-space: nowrap;
}
.cta-band .btn:hover { background: var(--hazard); border-color: var(--hazard); color: var(--ink); }


/* --- Modules page: gate -------------------------------------------------- */
.gate {
  min-height: 74vh;
  display: grid;
  place-items: center;
  padding-block: clamp(3rem, 8vw, 6rem);
}
.gate__card {
  width: min(100%, 460px);
  background: var(--white);
  border: 1px solid var(--mist);
  border-top: 4px solid var(--sign);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 4vw, 2.4rem);
  box-shadow: var(--shadow-card);
  text-align: left;
}
.gate__lock {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--sign-tint);
  border-radius: 50%;
  color: var(--sign);
  margin-bottom: 1.2rem;
}
.gate__lock svg { width: 20px; height: 20px; }
.gate__card h1 { font-size: var(--step-2); margin-bottom: 0.6rem; }
.gate__card > p { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 1.5rem; }
.gate__error {
  display: none;
  margin-top: 0.85rem;
  font-size: var(--step--1);
  color: #A33A21;
}
.gate__error.is-shown { display: block; }
.gate__help {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--mist);
  font-size: var(--step--1);
  color: var(--ink-faint);
}

/* Locked content stays out of the DOM flow until unlocked. */
[hidden] { display: none !important; }

/* Set by an inline script in modules.html so a returning, already-unlocked
   visitor never sees the gate flash before the script runs. */
html[data-gate="open"] .gate { display: none; }

/* --- Modules page: one row per module ------------------------------------ */
.module {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2.2rem, 5vw, 3.6rem);
  border-top: 1px solid var(--mist);
}
.module:first-of-type { border-top: 0; padding-top: clamp(1rem, 2vw, 1.5rem); }
.module:nth-child(even) .module__body { order: -1; }

.module__head {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.6vw, 1.25rem);
  margin-bottom: 1.1rem;
}

/* Module picture — a still from the module itself, sitting where a generic
   icon would. Swap the <img> src; the frame handles cropping. */
.module__pic {
  display: block;
  width: clamp(96px, 11vw, 132px);
  aspect-ratio: 4 / 3;
  flex: none;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--mist);
  background: var(--ink);
}
.module__pic img { width: 100%; height: 100%; object-fit: cover; }

.module__num {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hazard-deep);
  display: block;
  margin-bottom: 0.3rem;
}
.module__title { font-size: var(--step-2); }
.module__body p { color: var(--ink-soft); }

.module__points {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  max-width: var(--measure);
}
.module__points li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.module__points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 8px; height: 2px;
  background: var(--hazard);
}

.module__media .video-well { border: 1px solid var(--mist); border-radius: var(--radius); }
.module__runtime {
  margin-top: 0.7rem;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --- Contact page -------------------------------------------------------- */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.contact-card {
  background: var(--white);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem);
}
.contact-card__name {
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.contact-card__role {
  font-size: var(--step--1);
  color: var(--sign);
  margin: 0.35rem 0 0;
}
.contact-card__org {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0.55rem 0 0;
}

.detail-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 1.4rem 0 0;
  border-top: 1px solid var(--mist);
  display: grid;
  gap: 1.05rem;
}
.detail-list dt {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.2rem;
}
.detail-list dd { margin: 0; font-size: var(--step-0); }
.detail-list dd a { text-decoration: none; }
.detail-list dd a:hover { text-decoration: underline; }

.response-note {
  margin-top: 1.5rem;
  padding: 1rem 1.1rem;
  background: var(--sign-tint);
  border-left: 3px solid var(--sign);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.response-note p { max-width: none; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.form-grid .field--wide { grid-column: 1 / -1; }


/* 8. MOTION & RESPONSIVE =================================================== */

/* One reveal, used sparingly — content lifts once as it enters. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

@media (max-width: 1000px) {
  .anatomy__track { grid-template-columns: repeat(3, 1fr); }
  .beat { padding-bottom: 1.6rem; }
  .beat:nth-child(3) { border-right: 0; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 940px) {
  .hero__grid,
  .contact__grid,
  .module { grid-template-columns: 1fr; }

  .module { gap: 1.6rem; }
  .module:nth-child(even) .module__body { order: 0; }
  .module__media { order: -1; }

  .cta-band { grid-template-columns: 1fr; }
  .cta-band .btn { justify-self: start; }

  .pilot { grid-template-columns: 1fr; }
  .pilot__badge { min-height: 200px; }
  .pilot__body { padding: clamp(1.4rem, 4vw, 2rem); }

  .audience__row { grid-template-columns: 2.5rem 1fr; }
  .audience__note { grid-column: 2 / -1; }

  /* Mobile nav: a simple disclosure panel, no overlay theatrics. */
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--mist);
    box-shadow: var(--shadow-card);
    padding: 0.5rem var(--gutter) 1.2rem;
  }
  .nav.is-open { display: flex; }
  .nav__link {
    padding-block: 0.85rem;
    border-bottom: 1px solid var(--mist);
    border-left: 2px solid transparent;
  }
  .nav__link[aria-current="page"] { border-bottom-color: var(--mist); border-left-color: var(--hazard); padding-left: 0.6rem; }
  .nav .btn { margin-top: 1rem; }
  .header__inner { position: relative; }
}

@media (max-width: 620px) {
  .anatomy__track { grid-template-columns: 1fr; border-top: 0; }
  .beat {
    border-right: 0;
    border-top: 2px solid var(--ink);
    padding: 1.5rem 0 1.3rem;
  }
  .grid--3, .grid--4 { grid-template-columns: 1fr; }

  .module__head { align-items: flex-start; }
  .module__pic { width: 84px; }
  .header__inner { min-height: 84px; }
  .form-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }

  /* Stats stack two-up rather than squeezing three columns into a phone. */
  .hero__stats { grid-template-columns: 1fr 1fr; border-top: 0; }
  .hero__stat,
  .hero__stat + .hero__stat {
    border-right: 0;
    border-top: 1px solid var(--mist);
    padding: 0.85rem 0.8rem 0 0;
  }
  .hero__stat + .hero__stat::before { left: 0; }
  .hero__stat:last-child { grid-column: 1 / -1; }
}

@media print {
  .site-header, .site-footer, .video-band, .btn { display: none; }
  body { background: #fff; }
}