/* ==========================================================================
   AI USER SAFETY — BRAND DESIGN SYSTEM
   --------------------------------------------------------------------------
   One tokenised system for the rebuilt pages. No build step, no CDN.

   Visual direction (redesign brief §19): calm, intelligent, human, practical,
   trustworthy. Serious enough for institutions, accessible enough for families
   and cautious first-time users. No fear motifs, no red alarm cues, no robots.

   Load order on a page:
     base.css → navigation.css → components.css → footer.css → responsive.css
     → brand.css   (brand.css last so it can refine shared chrome)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- Core palette -------------------------------------------------------
     Deep green carries authority and calm; gold carries warmth and human
     presence. Gold is deliberately never used for small text on light
     backgrounds — it cannot reach 4.5:1. Use --gold-ink for that instead. */
  --forest-900: #08221b;
  --forest-800: #0d2e25;
  --forest-700: #0f3b2f;
  --forest-600: #17503f;
  --forest-500: #256b54;
  --forest-300: #7ba896;
  --forest-100: #dfe9e4;
  --forest-50:  #eff5f2;

  --gold-600: #7a5511; /* AA on white — safe for small text */
  --gold-500: #96690f;
  --gold-400: #b8862b;
  --gold-300: #c79a3a; /* fills, rules, large display only */
  --gold-100: #f0e3c6;
  --gold-50:  #faf6ec;

  /* --- Surfaces --- */
  --paper: #ffffff;
  --cream: #faf7f1;
  --sand: #f4f1e9;
  --mist: #f2f6f4;

  /* --- Text --- */
  --ink: #0b2620;        /* 14.9:1 on white */
  --ink-2: #33534a;      /* 7.6:1 on white  */
  --ink-3: #5c7a70;      /* 4.6:1 on white  */
  --on-dark: #f4f8f6;
  --on-dark-2: #b9cfc6;  /* 7.2:1 on forest-700 */

  /* --- Lines --- */
  --line: #e3e9e6;
  --line-strong: #cdd8d3;
  --line-dark: rgba(255, 255, 255, 0.16);

  /* --- SAFE pillar roles -----------------------------------------------
     One continuous green→gold ramp, not four unrelated hues. Each pillar
     keeps the same colour everywhere it appears on the site. */
  --pillar-s: #12463a;
  --pillar-a: #2a6350;
  --pillar-f: #8a6d24;
  --pillar-e: #b8862b;
  --pillar-s-wash: #eaf2ef;
  --pillar-a-wash: #edf4f0;
  --pillar-f-wash: #f7f2e4;
  --pillar-e-wash: #faf4e8;

  /* --- Type --- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;

  --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --step-0:  clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1:  clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
  --step-2:  clamp(1.3125rem, 1.24rem + 0.36vw, 1.5rem);
  --step-3:  clamp(1.5rem, 1.38rem + 0.6vw, 1.875rem);
  --step-4:  clamp(1.875rem, 1.66rem + 1.05vw, 2.5rem);
  --step-5:  clamp(2.25rem, 1.9rem + 1.75vw, 3.25rem);

  /* --- Space --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* --- Shape & depth --- */
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --shade-1: 0 1px 2px rgba(11, 38, 32, 0.05);
  --shade-2: 0 4px 16px rgba(11, 38, 32, 0.07), 0 1px 3px rgba(11, 38, 32, 0.04);
  --shade-3: 0 14px 40px rgba(11, 38, 32, 0.1), 0 4px 12px rgba(11, 38, 32, 0.05);

  --measure: 68ch;
  --wrap: 1140px;
  --wrap-narrow: 780px;
}

/* --------------------------------------------------------------------------
   2. ACCESSIBILITY BASELINE
   -------------------------------------------------------------------------- */
.brand-scope :focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gold-400);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--forest-700);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

.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;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.wrap-narrow {
  width: 100%;
  max-width: var(--wrap-narrow);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
@media (min-width: 768px) {
  .wrap,
  .wrap-narrow {
    padding-inline: var(--sp-6);
  }
}

.band {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.band-tight {
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
}
.band-paper { background: var(--paper); }
.band-cream { background: var(--cream); }
.band-sand  { background: var(--sand); }
.band-mist  { background: var(--mist); }
.band-forest {
  background: var(--forest-700);
  color: var(--on-dark);
}
.band-forest-deep {
  background: linear-gradient(160deg, var(--forest-800) 0%, var(--forest-700) 55%, var(--forest-600) 100%);
  color: var(--on-dark);
}
.band-rule-top { border-top: 1px solid var(--line); }
.band-rule-bottom { border-bottom: 1px solid var(--line); }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

.grid { display: grid; gap: var(--sp-5); }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-2-wide { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-7); align-items: center; }
}
@media (min-width: 640px) and (max-width: 899px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY
   -------------------------------------------------------------------------- */
.brand-scope {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
}

.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: var(--sp-3);
}
.band-forest .eyebrow,
.band-forest-deep .eyebrow,
.eyebrow-light { color: var(--gold-300); }

.display {
  font-family: var(--font-display);
  font-size: var(--step-5);
  line-height: 1.1;
  letter-spacing: -0.022em;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
}
.h2 {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1.15;
  letter-spacing: -0.018em;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.h3 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.h4 {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.3;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.band-forest .display, .band-forest .h2, .band-forest .h3, .band-forest .h4,
.band-forest-deep .display, .band-forest-deep .h2, .band-forest-deep .h3, .band-forest-deep .h4 {
  color: var(--on-dark);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: var(--measure);
  margin: 0;
}
.band-forest .lede,
.band-forest-deep .lede { color: var(--on-dark-2); }

.prose { max-width: var(--measure); }
.prose p { color: var(--ink-2); margin: 0 0 var(--sp-4); }
.prose p:last-child { margin-bottom: 0; }
.band-forest .prose p,
.band-forest-deep .prose p { color: var(--on-dark-2); }

.small { font-size: var(--step--1); color: var(--ink-3); }
.band-forest .small,
.band-forest-deep .small { color: var(--on-dark-2); }

.section-head { max-width: var(--measure); margin-bottom: var(--sp-7); }
.section-head.centred { margin-inline: auto; text-align: center; }
.section-head .h2 + .lede { margin-top: var(--sp-4); }

/* Sub-tagline: the capability promise, carried at display weight beneath the
   institutional headline. */
.sub-tagline {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--gold-600);
  margin: 0;
  padding-left: var(--sp-4);
  border-left: 4px solid var(--gold-300);
}
.band-forest .sub-tagline,
.band-forest-deep .sub-tagline {
  color: var(--gold-300);
  border-left-color: var(--gold-400);
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px; /* comfortable tap target */
  padding: 0.8rem 1.5rem;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--forest-700);
  border-color: var(--forest-700);
  color: #fff;
  box-shadow: var(--shade-2);
}
.btn-primary:hover {
  background: var(--forest-600);
  border-color: var(--forest-600);
  box-shadow: var(--shade-3);
}

.btn-gold {
  background: var(--gold-300);
  border-color: var(--gold-300);
  color: var(--forest-900);
  box-shadow: var(--shade-2);
}
.btn-gold:hover {
  background: var(--gold-400);
  border-color: var(--gold-400);
  color: #fff;
}

.btn-outline {
  background: transparent;
  border-color: var(--forest-700);
  color: var(--forest-700);
}
.btn-outline:hover {
  background: var(--forest-700);
  color: #fff;
}

.btn-on-dark {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.btn-on-dark:hover {
  background: #fff;
  border-color: #fff;
  color: var(--forest-800);
}

.btn-sm { min-height: 40px; padding: 0.55rem 1.1rem; font-size: var(--step--1); }
.btn-block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* Quiet inline link that still reads as an action */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 650;
  color: var(--forest-600);
  text-decoration: none;
  border-bottom: 2px solid var(--gold-100);
  padding-bottom: 1px;
}
.link-arrow::after { content: "→"; transition: transform 0.18s ease; }
.link-arrow:hover { border-bottom-color: var(--gold-300); }
.link-arrow:hover::after { transform: translateX(3px); }
.band-forest .link-arrow,
.band-forest-deep .link-arrow {
  color: var(--gold-300);
  border-bottom-color: rgba(199, 154, 58, 0.4);
}

/* --------------------------------------------------------------------------
   6. CARDS
   -------------------------------------------------------------------------- */
.card-b {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--sp-5);
  box-shadow: var(--shade-1);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.card-b > * + * { margin-top: var(--sp-3); }
.card-b .h3 + p,
.card-b .h4 + p { margin-top: var(--sp-2); }
.card-b p { color: var(--ink-2); margin: 0; }
.card-b .card-foot {
  margin-top: auto;
  padding-top: var(--sp-4);
}
.card-b-hover:hover {
  box-shadow: var(--shade-3);
  transform: translateY(-3px);
  border-color: var(--forest-100);
}
.card-b-quiet {
  background: var(--forest-50);
  border-color: transparent;
  box-shadow: none;
}
.card-b-dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--line-dark);
  box-shadow: none;
}
.card-b-dark .h3,
.card-b-dark .h4 { color: var(--on-dark); }
.card-b-dark p { color: var(--on-dark-2); }

.card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-pill);
  background: var(--forest-50);
  color: var(--forest-600);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  flex: none;
}

.tag {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--gold-50);
  border: 1px solid var(--gold-100);
  color: var(--gold-600);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tag-green {
  background: var(--forest-50);
  border-color: var(--forest-100);
  color: var(--forest-600);
}

/* --------------------------------------------------------------------------
   7. SAFE PILLARS
   -------------------------------------------------------------------------- */
.pillar-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .pillar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pillar-grid { grid-template-columns: repeat(4, 1fr); } }

.pillar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--r);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--pillar, var(--forest-600));
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
a.pillar:hover { box-shadow: var(--shade-3); transform: translateY(-3px); }

.pillar-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  background: var(--pillar-wash, var(--forest-50));
  color: var(--pillar, var(--forest-600));
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 800;
  flex: none;
}
.pillar-name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}
.pillar p { color: var(--ink-2); margin: 0; }
.pillar-s { --pillar: var(--pillar-s); --pillar-wash: var(--pillar-s-wash); }
.pillar-a { --pillar: var(--pillar-a); --pillar-wash: var(--pillar-a-wash); }
.pillar-f { --pillar: var(--pillar-f); --pillar-wash: var(--pillar-f-wash); }
.pillar-e { --pillar: var(--pillar-e); --pillar-wash: var(--pillar-e-wash); }

.band-forest .pillar,
.band-forest-deep .pillar {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--line-dark);
  border-top-color: var(--pillar);
}
.band-forest .pillar-name,
.band-forest-deep .pillar-name { color: var(--on-dark); }
.band-forest .pillar p,
.band-forest-deep .pillar p { color: var(--on-dark-2); }
.band-forest .pillar-mark,
.band-forest-deep .pillar-mark {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* --------------------------------------------------------------------------
   8. BEHAVIOUR LIST — the five things a safe AI user knows how to do
   -------------------------------------------------------------------------- */
.behaviours {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
  counter-reset: behaviour;
}
@media (min-width: 720px) { .behaviours { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .behaviours { grid-template-columns: repeat(5, 1fr); } }

.behaviours li {
  counter-increment: behaviour;
  padding-top: var(--sp-4);
  border-top: 2px solid var(--gold-100);
}
.behaviours li::before {
  content: counter(behaviour, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 800;
  color: var(--gold-600);
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-2);
}
.behaviours strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: var(--sp-2);
}
.behaviours span { color: var(--ink-2); font-size: var(--step--1); line-height: 1.6; }

/* --------------------------------------------------------------------------
   9. TRANSFORMATION LADDER
   -------------------------------------------------------------------------- */
.ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 900px) {
  .ladder { grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); }
}
.ladder li {
  position: relative;
  padding: var(--sp-5) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--paper);
  border: 1px solid var(--line);
}
.ladder li[data-stage] { border-left: 4px solid var(--gold-100); }
.ladder li:nth-child(1) { border-left-color: var(--forest-100); }
.ladder li:nth-child(2) { border-left-color: var(--forest-300); }
.ladder li:nth-child(3) { border-left-color: var(--forest-500); }
.ladder li:nth-child(4) { border-left-color: var(--gold-400); }
.ladder li:nth-child(5) { border-left-color: var(--gold-300); }
.ladder .stage-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--ink);
  margin-bottom: var(--sp-2);
}
.ladder p { margin: 0; font-size: var(--step--1); color: var(--ink-2); }

/* --------------------------------------------------------------------------
   10. PATH CARDS — audience routing
   -------------------------------------------------------------------------- */
.path {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shade-1);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.path:hover { box-shadow: var(--shade-3); transform: translateY(-3px); }
.path .path-who {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.path .path-said {
  font-size: var(--step-0);
  color: var(--ink-2);
  font-style: italic;
  margin: 0;
  padding-left: var(--sp-4);
  border-left: 3px solid var(--gold-100);
}
.path .path-get { margin: 0; color: var(--ink-2); }
.path .card-foot { margin-top: auto; padding-top: var(--sp-4); }

/* --------------------------------------------------------------------------
   11. PROOF / STATS
   -------------------------------------------------------------------------- */
.proof-row {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) { .proof-row { grid-template-columns: repeat(4, 1fr); } }
.proof-item { text-align: center; }
.proof-figure {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 800;
  line-height: 1;
  color: var(--forest-600);
  letter-spacing: -0.02em;
}
.band-forest .proof-figure,
.band-forest-deep .proof-figure { color: var(--gold-300); }
.proof-label {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--step--1);
  color: var(--ink-3);
}
.band-forest .proof-label,
.band-forest-deep .proof-label { color: var(--on-dark-2); }

.quote-block {
  border-left: 4px solid var(--gold-300);
  padding-left: var(--sp-5);
  margin: 0;
}
.quote-block p {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 var(--sp-3);
}
.quote-block cite {
  font-style: normal;
  font-size: var(--step--1);
  color: var(--ink-3);
}
.band-forest .quote-block p,
.band-forest-deep .quote-block p { color: var(--on-dark); }
.band-forest .quote-block cite,
.band-forest-deep .quote-block cite { color: var(--on-dark-2); }

/* --------------------------------------------------------------------------
   12. CHECKLIST
   -------------------------------------------------------------------------- */
.checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}
.checks li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--sp-3);
  align-items: start;
  color: var(--ink-2);
}
.checks li::before {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.22rem;
  border-radius: var(--r-pill);
  background: var(--forest-50);
  border: 2px solid var(--forest-300);
  background-image: linear-gradient(45deg, transparent 44%, var(--forest-600) 44%, var(--forest-600) 56%, transparent 56%),
                    linear-gradient(-45deg, transparent 44%, var(--forest-600) 44%, var(--forest-600) 56%, transparent 56%);
  background-size: 0.5rem 0.5rem, 0.5rem 0.5rem;
  background-position: 0.24rem 0.34rem, 0.42rem 0.34rem;
  background-repeat: no-repeat;
}
.band-forest .checks li,
.band-forest-deep .checks li { color: var(--on-dark-2); }
.band-forest .checks li::before,
.band-forest-deep .checks li::before {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--gold-300);
  background-image: linear-gradient(45deg, transparent 44%, var(--gold-300) 44%, var(--gold-300) 56%, transparent 56%),
                    linear-gradient(-45deg, transparent 44%, var(--gold-300) 44%, var(--gold-300) 56%, transparent 56%);
}

/* --------------------------------------------------------------------------
   13. HERO
   -------------------------------------------------------------------------- */
.hero-b {
  position: relative;
  background:
    radial-gradient(1100px 520px at 82% -12%, var(--gold-50) 0%, transparent 62%),
    linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%);
  padding-block: clamp(3rem, 8vw, 6rem);
  border-bottom: 1px solid var(--line);
}
.hero-b .hero-inner {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}
@media (min-width: 960px) {
  .hero-b .hero-inner { grid-template-columns: 1.08fr 0.92fr; }
}
.hero-b .display { max-width: 18ch; }
.hero-b .sub-tagline { margin-top: var(--sp-5); }
.hero-b .lede { margin-top: var(--sp-5); }
.hero-b .btn-row { margin-top: var(--sp-6); }
.hero-note {
  margin-top: var(--sp-4);
  font-size: var(--step--1);
  color: var(--ink-3);
}

.hero-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--shade-3);
}
.hero-panel .h4 { margin-bottom: var(--sp-4); }

/* Compact page hero for interior pages */
.hero-page {
  background: linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--line);
}
.hero-page .display { max-width: 22ch; }
.hero-page .lede { margin-top: var(--sp-4); }
.hero-page .btn-row { margin-top: var(--sp-6); }
.hero-page-dark {
  background: linear-gradient(160deg, var(--forest-800) 0%, var(--forest-700) 100%);
  color: var(--on-dark);
  border-bottom: 0;
}

.crumbs {
  font-size: var(--step--1);
  color: var(--ink-3);
  margin-bottom: var(--sp-4);
}
.crumbs a { color: var(--forest-600); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.hero-page-dark .crumbs { color: var(--on-dark-2); }
.hero-page-dark .crumbs a { color: var(--gold-300); }

/* --------------------------------------------------------------------------
   14. CALLOUTS & DISCLOSURE
   -------------------------------------------------------------------------- */
.callout {
  background: var(--gold-50);
  border: 1px solid var(--gold-100);
  border-left: 4px solid var(--gold-300);
  border-radius: var(--r-sm);
  padding: var(--sp-5);
}
.callout .h4 { margin-bottom: var(--sp-2); }
.callout p { color: var(--ink-2); margin: 0; }
.callout p + p { margin-top: var(--sp-3); }

.callout-plain {
  background: var(--forest-50);
  border-color: var(--forest-100);
  border-left-color: var(--forest-500);
}

.disclosure {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-3);
  background: var(--sand);
  border-radius: var(--r-sm);
  padding: var(--sp-5);
}
.disclosure strong { color: var(--ink-2); }
.disclosure a { color: var(--forest-600); }

/* --------------------------------------------------------------------------
   15. MEDIA
   -------------------------------------------------------------------------- */
.media-frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shade-3);
  background: var(--sand);
}
.media-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   16. SHARED CHROME REFINEMENTS
   Small corrections to the existing header/footer so the rebuilt pages and
   the legacy pages read as one site.
   -------------------------------------------------------------------------- */
.site-header .btn-cta {
  border-radius: var(--r-pill);
}
.site-footer a:focus-visible {
  outline-color: var(--gold-300);
}

.footer-subtagline {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gold-300);
  margin-top: var(--sp-2);
}
.footer-provenance {
  display: block;
  margin-top: var(--sp-2);
  max-width: 62ch;
  opacity: 0.75;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   17. HERO QUICK ROUTER
   -------------------------------------------------------------------------- */
.router-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}
.router-list a {
  display: grid;
  gap: 0.2rem;
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--forest-50);
  border: 1px solid transparent;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.router-list a:hover {
  background: var(--gold-50);
  border-color: var(--gold-100);
  transform: translateX(3px);
}
.router-said {
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}
.router-go {
  font-size: var(--step--1);
  font-weight: 650;
  color: var(--gold-600);
}
.router-go::after { content: " →"; }

/* --------------------------------------------------------------------------
   18. COOKIE BANNER
   -------------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: var(--forest-800);
  color: var(--on-dark);
  border-top: 3px solid var(--gold-300);
  padding-block: var(--sp-4);
  transform: translateY(110%);
  transition: transform 0.3s ease;
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
  justify-content: space-between;
}
.cookie-inner .small { color: var(--on-dark-2); margin: 0; max-width: 70ch; }
.cookie-inner .small strong { color: var(--on-dark); }
.cookie-inner a { color: var(--gold-300); }
.cookie-banner .btn-outline {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.cookie-banner .btn-outline:hover { background: #fff; color: var(--forest-800); }
.cookie-banner .btn-primary {
  background: var(--gold-300);
  border-color: var(--gold-300);
  color: var(--forest-900);
}
.cookie-banner .btn-primary:hover { background: var(--gold-400); border-color: var(--gold-400); color: #fff; }
.cookie-banner .btn-row { flex: none; }

/* --------------------------------------------------------------------------
   19. LINKED CHECK LISTS
   -------------------------------------------------------------------------- */
.checks a {
  color: var(--forest-600);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-100);
}
.checks a:hover { border-bottom-color: var(--gold-300); }
.band-forest .checks a,
.band-forest-deep .checks a { color: var(--gold-300); border-bottom-color: rgba(199,154,58,0.35); }

/* --------------------------------------------------------------------------
   20. LONG INSTITUTIONAL HEADLINE
   The full positioning line runs 13 words. At full display size it takes six
   or seven lines and buries the sub-tagline and CTAs below the fold, so it
   gets its own slightly tighter scale.
   -------------------------------------------------------------------------- */
.display-long {
  font-size: clamp(1.875rem, 1.35rem + 2.1vw, 2.875rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  max-width: 24ch;
}

/* --------------------------------------------------------------------------
   21. PILLAR ACCENTS ON DARK BANDS
   The light-background ramp is too dark to read as an accent against forest,
   so the dark bands use a lifted version of the same green→gold ramp.
   -------------------------------------------------------------------------- */
.band-forest .pillar-s,
.band-forest-deep .pillar-s { --pillar: #6fa892; }
.band-forest .pillar-a,
.band-forest-deep .pillar-a { --pillar: #93bda6; }
.band-forest .pillar-f,
.band-forest-deep .pillar-f { --pillar: #d3b264; }
.band-forest .pillar-e,
.band-forest-deep .pillar-e { --pillar: var(--gold-300); }
.band-forest .pillar-mark,
.band-forest-deep .pillar-mark { color: var(--pillar); }

/* --------------------------------------------------------------------------
   22. COOKIE BANNER — compact on small screens
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .cookie-banner { padding-block: var(--sp-3); }
  .cookie-inner { gap: var(--sp-3); }
  .cookie-inner .small { font-size: 0.8125rem; line-height: 1.45; }
  .cookie-banner .btn-row { width: 100%; }
  .cookie-banner .btn-row .btn { flex: 1 1 auto; }
}

/* Footer brand mark reads too small against the new column widths. */
.site-footer .footer-logo { width: auto; height: 52px; max-width: 190px; }

/* --------------------------------------------------------------------------
   23. INLINE CONTENT LINKS
   Body links inside the rebuilt pages were falling back to the browser default
   blue. Buttons, arrow links and nav keep their own treatment.
   -------------------------------------------------------------------------- */
.brand-scope main a:not(.btn):not(.link-arrow):not(.pillar):not(.skip-link):not(.router-list a) {
  color: var(--forest-600);
  text-decoration: underline;
  text-decoration-color: var(--gold-300);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.brand-scope main a:not(.btn):not(.link-arrow):not(.pillar):not(.skip-link):hover {
  color: var(--forest-700);
  text-decoration-thickness: 2px;
}
.brand-scope main .band-forest a:not(.btn):not(.link-arrow):not(.pillar),
.brand-scope main .band-forest-deep a:not(.btn):not(.link-arrow):not(.pillar) {
  color: var(--gold-300);
  text-decoration-color: rgba(199, 154, 58, 0.6);
}
.brand-scope main .band-forest a:not(.btn):not(.link-arrow):not(.pillar):hover,
.brand-scope main .band-forest-deep a:not(.btn):not(.link-arrow):not(.pillar):hover {
  color: #fff;
}
.brand-scope main .router-list a { text-decoration: none; }

/* Chips must not stretch to the width of their flex column. */
.path > .tag,
.card-b > .tag { align-self: flex-start; }

/* --------------------------------------------------------------------------
   24. PILLAR DETAIL SECTIONS
   -------------------------------------------------------------------------- */
.pillar-section { scroll-margin-top: 90px; }
.pillar-head {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
  padding-left: var(--sp-5);
  border-left: 5px solid var(--pillar, var(--forest-600));
}
.pillar-head .pillar-mark {
  width: 3.5rem;
  height: 3.5rem;
  font-size: 1.75rem;
}
.pillar-head .h2 { margin-top: 0; }
.pillar-head .lede { margin-top: var(--sp-2); }
@media (max-width: 640px) {
  .pillar-head { flex-direction: column; gap: var(--sp-4); padding-left: var(--sp-4); }
}

/* Good / not-this example pairs */
.example {
  padding: var(--sp-5);
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--paper);
}
.example p { margin: var(--sp-2) 0 0; color: var(--ink-2); }
.example-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.example-good { border-left: 4px solid var(--forest-500); }
.example-good .example-label { color: var(--forest-600); }
.example-bad { border-left: 4px solid var(--gold-400); }
.example-bad .example-label { color: var(--gold-600); }

/* "Where it should not be your coach" list — same shape, different mark, so it
   reads as a boundary rather than a red warning. */
.checks-stop li::before {
  border-color: var(--gold-400);
  background-color: var(--gold-50);
  background-image: linear-gradient(90deg, transparent 42%, var(--gold-600) 42%, var(--gold-600) 58%, transparent 58%);
  background-size: 0.6rem 0.6rem;
  background-position: 0.28rem 0.28rem;
}

/* Brand sections dropped into legacy Tailwind pages carry .brand-scope on the
   section itself rather than on <body>, so the link treatment needs to apply
   there too. */
section.brand-scope a:not(.btn):not(.link-arrow):not(.pillar) {
  color: var(--forest-600);
  text-decoration: underline;
  text-decoration-color: var(--gold-300);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
section.brand-scope a:not(.btn):not(.link-arrow):not(.pillar):hover {
  color: var(--forest-700);
  text-decoration-thickness: 2px;
}

/* A button that has to sit inline among the footer's legal links. */
.link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-button:hover { text-decoration-thickness: 2px; }

/* ===========================================================================
   VISUAL SYSTEM — homepage visual anchors
   ---------------------------------------------------------------------------
   Added to break the "eyebrow + heading + lede + card grid" repetition that
   made the page read as flat. Nothing here changes copy, routes or behaviour;
   it only changes composition. Every value is derived from the tokens above.

   Deliberate rhythm the homepage now follows:
     hero photo -> editorial type -> icon cards -> stepped diagram ->
     framework diagram -> doors -> product shot -> photo -> portrait ->
     photo -> form -> type
   =========================================================================== */

/* --- Photography placeholders ---------------------------------------------
   Approved photographs are not in the repository yet (hero, workshop, founder
   portrait, community event, family learning). Rather than substitute
   unrelated stock, each slot reserves its exact aspect ratio so dropping the
   real file in causes zero layout shift.

   The slot is production-safe: nothing visitor-facing announces that a file is
   missing. It renders as a calm brand panel — a soft forest-to-sand wash under
   a low-contrast diagonal weave, hairline border, the same radius as .media —
   so it reads as an intentional tonal surface rather than a broken image. No
   dashed border: dashes read as "unfinished".

   The full asset spec (concept, ratio, pixel target, whether stock is
   acceptable, every page that reuses the file, and the exact <img> to paste
   in) lives in the HTML comment beside each figure, where the team can still
   see it and visitors cannot. Each figure is decorative and carries
   aria-hidden, so assistive tech skips it instead of announcing an empty
   figure. */
.media {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--sand);
}
.media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-ph {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  aspect-ratio: var(--ph-ratio, 4 / 5);
  background:
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(17, 80, 63, 0.032) 18px 36px),
    linear-gradient(155deg, var(--forest-50) 0%, var(--sand) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

/* The slot marker. A plain line-art image glyph — no text, no dimensions, no
   sourcing notes — so a visitor reads it as a tonal panel with a quiet mark
   while the team can still see at a glance exactly where each photograph
   lands. Drawn as a background data URI so the <figure> stays empty in the
   HTML and remains decorative. The asset name for each slot is on the figure
   as data-ph, and the full spec is in the comment directly above it. */
.media-ph:not(.media-ph-portrait)::after {
  content: "";
  width: clamp(38px, 16%, 64px);
  aspect-ratio: 1;
  opacity: 0.55;
  background: center / contain no-repeat
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="%237ba896" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="9" width="38" height="30" rx="5"/><circle cx="16.5" cy="19.5" r="3.5"/><path d="M5 32.5l10-8.5 7.5 6.5 6.5-5L43 34"/></svg>');
}
.band-forest .media-ph:not(.media-ph-portrait)::after,
.band-forest-deep .media-ph:not(.media-ph-portrait)::after {
  opacity: 0.5;
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="%23b9cfc6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="9" width="38" height="30" rx="5"/><circle cx="16.5" cy="19.5" r="3.5"/><path d="M5 32.5l10-8.5 7.5 6.5 6.5-5L43 34"/></svg>');
}
.band-forest .media-ph,
.band-forest-deep .media-ph {
  background:
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(255, 255, 255, 0.035) 18px 36px),
    linear-gradient(155deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-color: var(--line-dark);
}

/* Portrait slot — deliberately different from the tonal panels above.
   A monogram card on the brand forest ground, held until the real photograph
   of the founder is supplied. Never a stock portrait, never a generated
   likeness, and never a caption saying a picture is missing: the person is
   named in the copy beside it, so the mark carries no information of its own
   and is hidden from assistive tech. */
.media-ph-portrait {
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--forest-700) 0%, var(--forest-600) 100%);
  border-color: var(--forest-600);
}
.media-ph-portrait .ph-monogram {
  display: grid;
  place-items: center;
  width: 34%;
  max-width: 104px;
  aspect-ratio: 1;
  border-radius: var(--r-pill);
  background: var(--gold-300);
  color: var(--forest-800);
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1.15vw, 2.125rem);
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* --- Hero: three zones at wide widths -------------------------------------
   Headline, human anchor, and the audience router all stay visible. The
   router is the page's strongest conversion element and is never displaced.
   Source order is text -> media -> router, so on a phone the primary CTA is
   reached before the image. */
.hero-b .hero-inner { grid-template-areas: "text" "media" "panel"; }
.hero-b .hero-text { grid-area: text; }
.hero-b .hero-media { grid-area: media; }
@media (min-width: 960px) {
  /* Text spans both rows on the left so the primary CTA stays near the top of
     the hero; the human anchor and the router stack on the right. Measured:
     this keeps the CTA above the fold at 1440x900. */
  .hero-b .hero-inner {
    grid-template-columns: 1.06fr 0.94fr;
    grid-template-areas: "text media" "text panel";
    align-items: start;
    align-content: start;
    gap: var(--sp-5) var(--sp-7);
  }
}
.hero-b .hero-media { --ph-ratio: 3 / 2; max-width: 460px; }
@media (min-width: 960px) { .hero-b .hero-media { max-width: none; } }

/* --- Hero: full-bleed photograph, light treatment (homepage) --------------
   .hero-b--bleed makes the hero photograph the ground of the section instead
   of a framed picture beside the text, while keeping the hero light: there is
   no dark scrim and the copy keeps its existing dark ink and buttons.

   Below 960px the photograph is an edge-to-edge band under the text. It runs
   to both sides and the bottom of the section and dissolves into the cream at
   its top. Stacking is what keeps the headline off the person's face: at phone
   and tablet widths the text fills the width, so any crop behind it would put
   her face under the H1.

   From 960px the photograph fills the section behind the text. A light wash
   comes in from the left. It is opaque under the whole text column, which ends
   at about 50% of the width, and clear by 67%, where her face begins. So the
   copy sits on the hero's usual light background, including the two small
   --ink-3 lines, which drop below 4.5:1 over even a partly washed photograph,
   and her face is untouched.
   The image layer starts 30% in from the left because that strip is under
   the opaque part of the wash anyway. Its scale is set by the hero's height (the 452px-tall
   source has to cover it), about 1.8x at 1024-1440px.
   -------------------------------------------------------------------------- */
.hero-b--bleed {
  isolation: isolate;
  overflow: hidden;
}
.hero-b--bleed .hero-media {
  position: relative;
  max-width: none;
  aspect-ratio: 16 / 9;
  margin-inline: calc(-1 * var(--sp-5));
  margin-bottom: calc(-1 * clamp(3rem, 8vw, 6rem)); /* meet the hero's bottom edge */
  border-radius: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 24%);
}
.hero-b--bleed .hero-media img { object-position: 62% 22%; }
@media (max-width: 959.98px) {
  /* Drop the empty "panel" row: its row gap would leave a strip of background
     between the photograph and the bottom edge of the section. */
  .hero-b--bleed .hero-inner { grid-template-areas: "text" "media"; }
}
@media (min-width: 768px) {
  .hero-b--bleed .hero-media {
    aspect-ratio: 2 / 1;
    margin-inline: calc(-1 * var(--sp-6));
  }
}
@media (min-width: 960px) {
  .hero-b--bleed .hero-media {
    position: absolute;
    inset: 0 0 0 30%;
    z-index: 0;
    margin: 0;
    aspect-ratio: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .hero-b--bleed .hero-media img { object-position: 62% 25%; }
  /* The light wash is the hero's own background (cream to white, with the
     gold glow) laid over the photograph and faded out to the right. Because
     it inherits the exact layers .hero-b paints, the text sits on the same
     colours it has without the photograph, so no contrast changes. A flat
     cream wash would have dropped the --ink-3 lines to 4.39:1. */
  .hero-b--bleed::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: inherit;
    -webkit-mask-image: var(--hero-wash);
            mask-image: var(--hero-wash);
    --hero-wash: linear-gradient(to right,
      #000 0%,
      #000 52%,                    /* the text column ends at ~50% */
      rgba(0, 0, 0, 0.85) 57%,
      rgba(0, 0, 0, 0.4) 62%,
      transparent 67%);            /* her face starts at ~67% */
  }
  .hero-b--bleed .hero-text {
    position: relative;
    z-index: 2;
  }
}

/* --- Editorial argument block ---------------------------------------------
   Used where a section is making a case rather than listing features. Claims
   hang off a rule instead of sitting in boxes, so the section reads as prose
   with emphasis, not as another card grid. */
.editorial { display: grid; gap: var(--sp-7); }
@media (min-width: 1000px) { .editorial { grid-template-columns: 1.15fr 0.85fr; gap: var(--sp-8); } }
.claims { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-6); }
.claims li { padding-left: var(--sp-5); border-left: 3px solid var(--gold-300); }
.claims .claim-head {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.claims p { margin: var(--sp-2) 0 0; color: var(--ink-2); }

/* --- Behaviour icons ------------------------------------------------------
   Single-weight line marks, one ramp colour each, sized to aid scanning
   without competing with the text. No shields: the shield is the logo. */
.behaviours li { display: flex; flex-direction: column; }
/* .behaviours span sets the body colour, so this needs the extra class to win.
   gold-600 clears 3:1 against cream for non-text graphics. */
.behaviours .b-icon,
.b-icon {
  /* display is essential: outside the flex context of .behaviours li this span
     is inline, width/height are ignored, and the SVG expands to fill the
     column. */
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--sp-3);
  color: var(--gold-600);
  flex: none;
}
.b-icon svg { display: block; width: 100%; height: 100%; }

/* --- Journey: a rising stepped path ---------------------------------------
   Five stages that climb toward human authority. Not a funnel, not a pyramid,
   not a loop: the line goes up and ends on the person. */
@media (min-width: 900px) {
  .ladder { align-items: end; }
  .ladder li { margin-bottom: var(--rise, 0); }
  .ladder li:nth-child(2) { --rise: 1rem; }
  .ladder li:nth-child(3) { --rise: 2rem; }
  .ladder li:nth-child(4) { --rise: 3rem; }
  .ladder li:nth-child(5) { --rise: 4rem; }
}
.ladder li:last-child {
  background: var(--gold-50);
  border-color: var(--gold-400);
}
.ladder li:last-child .stage-name { color: var(--gold-600); }
.journey-base {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 2px solid var(--line-strong);
  font-size: var(--step--1);
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
}

/* --- SAFE framework diagram -----------------------------------------------
   One square divided into four, sharing a single green-to-gold ramp, so the
   four pillars read as one system rather than four unrelated topics. Built in
   SVG from brand tokens so it is reusable on every page that teaches SAFE. */
.safe-figure { margin: 0; display: grid; gap: var(--sp-4); justify-items: center; }
.safe-diagram { width: 100%; max-width: 340px; height: auto; display: block; }
/* The inline-content link rule in section 23 is highly specific; match it so
   the diagram's quadrant links are not underlined inside the SVG. */
.brand-scope main .safe-diagram a:not(.btn):not(.link-arrow):not(.pillar):not(.skip-link):not(.quad) {
  text-decoration: none;
  color: inherit;
}
.safe-diagram a:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 2px; }
.safe-diagram .quad { fill: var(--quad); transition: opacity 0.2s ease; }
.safe-diagram a:hover .quad,
.safe-diagram a:focus-visible .quad { opacity: 0.82; }
.safe-diagram .quad-letter {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  fill: var(--quad-ink);
}
.safe-diagram .quad-word {
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--quad-ink);
  opacity: 0.82;
}
.safe-diagram .hub {
  fill: var(--paper);
  stroke: var(--line-strong);
}
.safe-diagram .hub-text {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  fill: var(--ink);
}
.safe-diagram .q-s { --quad: var(--pillar-s); --quad-ink: #ffffff; }
.safe-diagram .q-a { --quad: var(--pillar-a); --quad-ink: #ffffff; }
.safe-diagram .q-f { --quad: var(--pillar-f); --quad-ink: #ffffff; }
.safe-diagram .q-e { --quad: var(--pillar-e); --quad-ink: #21180a; }
.band-forest-deep .safe-diagram .q-s { --quad: #3f8770; --quad-ink: #ffffff; }
.band-forest-deep .safe-diagram .q-a { --quad: #63a68e; --quad-ink: #0b2620; }
.band-forest-deep .safe-diagram .q-f { --quad: var(--gold-300); --quad-ink: #21180a; }
.band-forest-deep .safe-diagram .q-e { --quad: var(--gold-100); --quad-ink: #21180a; }
.band-forest-deep .safe-diagram .hub { fill: var(--forest-900); stroke: var(--line-dark); }
.band-forest-deep .safe-diagram .hub-text { fill: var(--on-dark); }
.safe-caption { font-size: var(--step--1); color: var(--ink-3); text-align: center; margin: 0; }
.band-forest-deep .safe-caption { color: var(--on-dark-2); }

/* Framework section: diagram beside the pillars rather than pillars alone. */
.framework-split { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 1000px) { .framework-split { grid-template-columns: 0.8fr 1.2fr; gap: var(--sp-8); } }

.door-1 { --door: var(--pillar-s); }
.door-2 { --door: var(--pillar-a); }
.door-3 { --door: var(--pillar-f); }
.door-4 { --door: var(--pillar-e); }

/* --- Split composition ----------------------------------------------------
   Asymmetric text/visual pairing, with a reversed variant so consecutive
   split sections do not mirror each other. */
.split { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 1000px) {
  .split { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-8); }
  .split-reverse > :first-child { order: 2; }
}
@media (min-width: 1000px) {
  .framework-split .pillar-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Editorial pull statement ---------------------------------------------
   A large-type moment used instead of another photograph. AIUSI publishes no
   outcome statistics, so this deliberately amplifies an existing claim rather
   than inventing figures to fill a "statistical" treatment. */
.pull-editorial {
  margin: 0 0 var(--sp-7);
  padding: var(--sp-6) 0;
  border-top: 3px solid var(--gold-300);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  max-width: 24ch;
}
.pull-editorial .pull-em { color: var(--gold-600); }
.band-forest .pull-editorial, .band-forest-deep .pull-editorial { color: var(--on-dark); }
.band-forest .pull-editorial .pull-em,
.band-forest-deep .pull-editorial .pull-em { color: var(--gold-300); }

/* --- AI Use Spectrum diagram ----------------------------------------------
   Original graphic, same language as the homepage capability progression: one
   continuous scale with named stops and labelled ends. The five hues are the
   page's own existing severity colours, not the brand ramp, because here the
   colour is carrying meaning (healthy to severe) rather than identity. The
   detail cards below it are unchanged. */
.spectrum { margin: 0 0 1.75rem; }
.spectrum-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 12px;
  border-radius: var(--r-pill);
  overflow: hidden;
}
.spectrum-bar span { display: block; background: var(--seg); }
.spectrum-scale {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-2);
}
.spectrum-scale li {
  position: relative;
  padding-top: var(--sp-3);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink-2);
  text-align: center;
}
.spectrum-scale li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: var(--sp-2);
  background: var(--line-strong);
}
@media (min-width: 640px) { .spectrum-scale li { font-size: 0.8rem; } }
.spectrum-ends {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  margin: var(--sp-3) 0 0;
  font-size: var(--step--1);
  color: var(--ink-3);
}

/* --- Concept triad ---------------------------------------------------------
   Three short ideas, scannable in a glance, standing in for a long argument. */
.concepts { display: grid; gap: var(--sp-6); }
@media (min-width: 760px) { .concepts { grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); } }
.concept-key {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-top: var(--sp-3);
}
.concept-line {
  margin: var(--sp-2) 0 0;
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--ink);
}

/* --- Journey, stripped to stage names --------------------------------------
   The five descriptions move into a disclosure below, so the diagram reads as
   a diagram rather than five paragraphs in boxes. */
.ladder.ladder-compact li { padding: var(--sp-4) var(--sp-4); }
.ladder.ladder-compact .stage-name { font-size: var(--step-1); }
.stage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.stage-list strong {
  font-family: var(--font-display);
  color: var(--ink);
  display: block;
}
.stage-list p { margin: var(--sp-1) 0 0; color: var(--ink-2); }

/* --- Next-step triad on the closing band ----------------------------------- */
.next-steps { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); text-align: left; }
@media (min-width: 760px) { .next-steps { grid-template-columns: repeat(3, 1fr); } }
.next-step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.next-step:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); }
/* The whole card is an <a>, so the section-23 inline-link rule underlines every
   line inside it. Match that rule's specificity to switch the underline off. */
.brand-scope main .next-step:not(.btn):not(.link-arrow):not(.pillar):not(.skip-link):not(.quad) {
  text-decoration: none;
}
.next-step:focus-visible { outline: 3px solid var(--gold-300); outline-offset: 3px; }
.next-step .ns-title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--on-dark);
}
.next-step .ns-note { font-size: var(--step--1); color: var(--on-dark-2); }
.next-step .ns-go { font-size: var(--step--1); font-weight: 700; color: var(--gold-300); margin-top: auto; }

/* Hero audience line, in place of the router panel that moves to section 3. */
.hero-audience {
  margin-top: var(--sp-5);
  font-size: var(--step--1);
  color: var(--ink-3);
  letter-spacing: 0.01em;
}

/* The institutional mission statement, restored beneath the hero H1. Set as a
   supporting subtitle, not a second heading: display face for kinship with the
   H1, but smaller and quieter than the lede that follows, so the hierarchy
   stays H1 -> mission -> lede. */
.hero-mission {
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-2);
  max-width: 34ch;
}
.band-forest .hero-mission,
.band-forest-deep .hero-mission { color: var(--on-dark-2); }

/* --- Audience route rows ---------------------------------------------------
   "What brings you here?" is the homepage's primary routing surface, so it is
   built as a list of large tappable rows rather than a card grid: one column
   on a phone, the whole row is the hit area, and the target stays well above
   the 44px minimum at every width.

   Each row deliberately keeps the .path class. js/analytics.js derives the
   homepage routing surface and the chosen path id from `.path` / `.path-who`,
   so reusing the hook keeps `path_select` firing without touching the
   analytics layer. Everything below resets the card presentation .path brings;
   these rules sit last in the file, so they win on equal specificity. */
.route-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}
@media (min-width: 900px) {
  .route-rows { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
}

.path.route-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  height: 100%;
  min-height: 72px;
  padding: var(--sp-4) var(--sp-5);
  border-left: 5px solid var(--door, var(--forest-500));
  text-decoration: none;
}
.path.route-row:hover {
  box-shadow: var(--shade-2);
  transform: translateY(-2px);
}
/* The whole row is an <a>, so the section-23 inline-link rule would underline
   every line inside it. Match that rule's specificity to switch it off. */
.brand-scope main .route-row:not(.btn):not(.link-arrow):not(.pillar):not(.skip-link):not(.quad) {
  text-decoration: none;
  color: inherit;
}
.path.route-row:focus-visible { outline: 3px solid var(--gold-400); outline-offset: 3px; }

.path.route-row .route-who {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}
.path.route-row .route-note {
  display: block;
  margin: var(--sp-1) 0 0;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-2);
}
.path.route-row .route-go {
  font-size: 1.25rem;
  line-height: 1;
  color: var(--gold-600);
  transition: transform 0.18s ease;
}
.path.route-row:hover .route-go { transform: translateX(3px); }

.route-fallback {
  margin: var(--sp-6) 0 0;
  font-size: var(--step-0);
  color: var(--ink-2);
}

/* --- Journey supporting line ----------------------------------------------- */
.journey-note {
  margin: var(--sp-6) 0 0;
  max-width: var(--measure);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink);
}

/* --- Dark interior hero: on-dark text ---------------------------------------
   .hero-page-dark set a forest background but never switched the text colours
   that .display, .h2, .eyebrow, .lede and .prose hard-code for light surfaces,
   so the headline computed to --ink (#0b2620) on --forest-800 (#0d2e25) —
   roughly 1.05:1, i.e. invisible. .band-forest-deep carries the equivalent
   rules already; this mirrors them for the interior page hero. Repairs
   /safe-ai-use-framework/ and /solutions/ as well as /why-this-matters/. */
.hero-page-dark .display,
.hero-page-dark .h2,
.hero-page-dark .h3,
.hero-page-dark .h4 { color: var(--on-dark); }
.hero-page-dark .eyebrow { color: var(--gold-300); }
.hero-page-dark .lede,
.hero-page-dark .prose p,
.hero-page-dark .small,
.hero-page-dark .hero-mission { color: var(--on-dark-2); }
.hero-page-dark .link-arrow { color: var(--gold-300); }

/* ===========================================================================
   MAILERLITE EMBEDS — native AIUSI presentation
   ---------------------------------------------------------------------------
   Two embedded forms are styled here, and ONLY these two:
     #subscribe .ml-embedded  -> homepage AI Safety Digest  (data-form HBVfaz)
     #register  .ml-embedded  -> event registration         (data-form 0hovDy)

   Scoped by section id on purpose. The same HBVfaz form is also embedded on
   /resources/, which is outside this pass and is deliberately left alone.

   Nothing here touches the embed. MailerLite injects its markup into our
   `.ml-embedded` div at runtime; the form id, fields, submit behaviour,
   subscriber logic and analytics are untouched. These are presentation rules
   over injected DOM.

   SPECIFICITY — the reason these selectors are long.
   MailerLite injects its own stylesheet at runtime, scoped like
     #mlb2-<id>.ml-form-embedContainer .ml-form-embedWrapper
     .ml-form-embedBody .ml-form-fieldRow input      -> (1,4,1), !important
   Because it is injected it also lands AFTER brand.css in source order, so a
   tie goes to MailerLite. !important alone does not win; only greater
   specificity does. Every rule below therefore carries the full container
   chain, reaching (1,6,1), and repeats !important to outrank MailerLite's own
   !important declarations. Measured against a fixture reproducing MailerLite's
   injected DOM and stylesheet — an under-specific first attempt lost outright,
   which is how the weights above were established rather than assumed.

   Class names are MailerLite's own and stable across its embedded forms.
   =========================================================================== */

/* --- AI Safety Digest (homepage) ------------------------------------------------------------- */
#subscribe.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  max-width: none !important;
  width: 100% !important;
}
#subscribe.band .ml-embedded .ml-form-embedContainer {
  box-sizing: border-box !important;
  width: 100% !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
}
#subscribe.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody {
  padding: var(--sp-6) !important;
  box-sizing: border-box !important;
}
@media (min-width: 640px) {
  #subscribe.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody { padding: var(--sp-7) !important; }
}

/* The digest form's own title/description slot is suppressed. The section
   already carries "The AI Safety Digest" as an h2 with its own lede, so
   whatever MailerLite renders here (by default "Newsletter" / "Signup to be
   the first to hear about exclusive deals") is redundant at best and off-brand
   at worst. Presentation only — the MailerLite configuration is untouched, and
   clearing that copy in MailerLite would make this rule a harmless no-op.

   display:none rather than a visually-hidden class on purpose: the copy is
   redundant for everyone. Hiding it from sight but leaving it for screen
   readers would mean assistive-tech users are the only people who still hear
   "exclusive deals".

   Scoped to #subscribe. #register keeps its content slot styled and visible —
   the registration form may legitimately use it. */
#subscribe.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent { display: none !important; }

/* Fields */
#subscribe.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow {
  margin-bottom: var(--sp-4) !important;
  float: none !important;
  width: 100% !important;
}
#subscribe.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow.ml-last-item { margin-bottom: 0 !important; }
#subscribe.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input,
#subscribe.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-field-group input,
#subscribe.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-field-group textarea,
#subscribe.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-field-group select {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 48px !important;
  padding: 0.75rem 1rem !important;
  font-family: var(--font-sans) !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  color: var(--ink) !important;
  background-color: var(--paper) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--r-sm) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
#subscribe.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::placeholder,
#subscribe.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-field-group textarea::placeholder {
  color: var(--ink-3) !important;
  opacity: 1 !important;
}
#subscribe.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:focus,
#subscribe.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-field-group input:focus,
#subscribe.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-field-group textarea:focus,
#subscribe.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-field-group select:focus {
  outline: 3px solid var(--gold-400) !important;
  outline-offset: 2px !important;
  border-color: var(--forest-500) !important;
  box-shadow: none !important;
}

/* Labels and checkbox rows (the registration form carries these) */
#subscribe.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody label {
  font-family: var(--font-sans) !important;
  font-size: var(--step--1) !important;
  color: var(--ink-2) !important;
  line-height: 1.5 !important;
  text-align: left !important;
}
#subscribe.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow { margin-bottom: var(--sp-4) !important; }
#subscribe.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--sp-3) !important;
}
#subscribe.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  flex: none !important;
  margin: 2px 0 0 !important;
  accent-color: var(--forest-600);
}

/* Submit: an AIUSI primary CTA */
#subscribe.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit {
  margin: var(--sp-5) 0 0 !important;
  float: none !important;
  width: 100% !important;
}
/* Appearance is shared by the real submit and by MailerLite's loading button,
   so the loading state still looks like an AIUSI control when it legitimately
   appears. Deliberately NO display property in this rule — see the next one. */
#subscribe.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
  text-align: center !important;
  width: 100% !important;
  height: auto !important;
  min-height: 52px !important;
  padding: 0.85rem 1.6rem !important;
  font-family: var(--font-display) !important;
  font-size: var(--step-0) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  color: #ffffff !important;
  background-color: var(--forest-700) !important;
  border: 1px solid var(--forest-700) !important;
  border-radius: var(--r-pill) !important;
  cursor: pointer !important;
  transition: background-color 0.18s ease, transform 0.18s ease !important;
}
/* Only the real submit button gets a display value.

   MailerLite ships TWO buttons inside .ml-form-embedSubmit: the real
   <button class="primary"> and a second <button class="loading"> holding the
   spinner, which it hides with an INLINE style="display:none;" and reveals on
   submit. An author !important declaration outranks a NORMAL inline style, so
   the earlier `display:inline-flex !important` on every button in this
   container overrode that inline display:none and forced the loading button
   visible — a second green pill with a spinning ring sitting under the real
   one, in both forms.

   Excluding .loading here hands control of its display back to MailerLite:
   none while idle, and whatever MailerLite sets once submission starts. The
   button keeps its AIUSI appearance from the rule above either way, and the
   spinner centres on the button's default text-align. */
#subscribe.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:not(.loading) {
  /* display is deliberately NOT !important. MailerLite swaps the two buttons
     during submit by writing inline styles, hiding this one and revealing the
     loading one. A normal inline style loses to an author !important, so an
     !important display here would keep the real button on screen through the
     whole submit and show two buttons at once. Left normal, this wins over the
     UA default while idle and yields correctly to MailerLite's inline
     display:none the moment a submission starts. */
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
}
#subscribe.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:not(.loading):hover {
  background-color: var(--forest-800) !important;
  border-color: var(--forest-800) !important;
  transform: translateY(-1px);
}
#subscribe.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:focus-visible {
  outline: 3px solid var(--gold-400) !important;
  outline-offset: 3px !important;
}
/* The loading button's look while MailerLite is showing it. No display, no
   transform: this rule must never be able to reveal it on its own. */
#subscribe.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.loading {
  background-color: var(--forest-600) !important;
  border-color: var(--forest-600) !important;
  cursor: default !important;
}

/* Success state */
#subscribe.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody { padding: var(--sp-7) var(--sp-6) !important; }
#subscribe.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent h4 {
  font-family: var(--font-display) !important;
  font-size: var(--step-2) !important;
  font-weight: 700 !important;
  color: var(--forest-700) !important;
  margin: 0 0 var(--sp-3) !important;
}
#subscribe.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p {
  font-family: var(--font-sans) !important;
  font-size: var(--step-0) !important;
  line-height: 1.6 !important;
  color: var(--ink-2) !important;
  margin: 0 !important;
}

/* --- Event registration ------------------------------------------------------------- */
#register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  max-width: none !important;
  width: 100% !important;
}
#register.band .ml-embedded .ml-form-embedContainer {
  box-sizing: border-box !important;
  width: 100% !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
}
#register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody {
  padding: var(--sp-6) !important;
  box-sizing: border-box !important;
}
@media (min-width: 640px) {
  #register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody { padding: var(--sp-7) !important; }
}

/* MailerLite's own heading/intro, when the form carries one: toned to sit
   under the section heading rather than compete with it. :empty collapses it
   so a form with no content configured leaves no ghost gap. */
#register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent { margin-bottom: var(--sp-5) !important; }
#register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent:empty { margin: 0 !important; }
#register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent h4 {
  font-family: var(--font-display) !important;
  font-size: var(--step-2) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--ink) !important;
  margin: 0 0 var(--sp-2) !important;
  text-align: left !important;
}
#register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p {
  font-family: var(--font-sans) !important;
  font-size: var(--step-0) !important;
  line-height: 1.6 !important;
  color: var(--ink-2) !important;
  margin: 0 !important;
  text-align: left !important;
}

/* Fields */
#register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow {
  margin-bottom: var(--sp-4) !important;
  float: none !important;
  width: 100% !important;
}
#register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow.ml-last-item { margin-bottom: 0 !important; }
#register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input,
#register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-field-group input,
#register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-field-group textarea,
#register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-field-group select {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 48px !important;
  padding: 0.75rem 1rem !important;
  font-family: var(--font-sans) !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  color: var(--ink) !important;
  background-color: var(--paper) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--r-sm) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
#register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::placeholder,
#register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-field-group textarea::placeholder {
  color: var(--ink-3) !important;
  opacity: 1 !important;
}
#register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:focus,
#register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-field-group input:focus,
#register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-field-group textarea:focus,
#register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-field-group select:focus {
  outline: 3px solid var(--gold-400) !important;
  outline-offset: 2px !important;
  border-color: var(--forest-500) !important;
  box-shadow: none !important;
}

/* Labels and checkbox rows (the registration form carries these) */
#register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody label {
  font-family: var(--font-sans) !important;
  font-size: var(--step--1) !important;
  color: var(--ink-2) !important;
  line-height: 1.5 !important;
  text-align: left !important;
}
#register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow { margin-bottom: var(--sp-4) !important; }
#register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--sp-3) !important;
}
#register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  flex: none !important;
  margin: 2px 0 0 !important;
  accent-color: var(--forest-600);
}

/* Submit: an AIUSI primary CTA */
#register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit {
  margin: var(--sp-5) 0 0 !important;
  float: none !important;
  width: 100% !important;
}
/* Appearance is shared by the real submit and by MailerLite's loading button,
   so the loading state still looks like an AIUSI control when it legitimately
   appears. Deliberately NO display property in this rule — see the next one. */
#register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
  text-align: center !important;
  width: 100% !important;
  height: auto !important;
  min-height: 52px !important;
  padding: 0.85rem 1.6rem !important;
  font-family: var(--font-display) !important;
  font-size: var(--step-0) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  color: #ffffff !important;
  background-color: var(--forest-700) !important;
  border: 1px solid var(--forest-700) !important;
  border-radius: var(--r-pill) !important;
  cursor: pointer !important;
  transition: background-color 0.18s ease, transform 0.18s ease !important;
}
/* Only the real submit button gets a display value.

   MailerLite ships TWO buttons inside .ml-form-embedSubmit: the real
   <button class="primary"> and a second <button class="loading"> holding the
   spinner, which it hides with an INLINE style="display:none;" and reveals on
   submit. An author !important declaration outranks a NORMAL inline style, so
   the earlier `display:inline-flex !important` on every button in this
   container overrode that inline display:none and forced the loading button
   visible — a second green pill with a spinning ring sitting under the real
   one, in both forms.

   Excluding .loading here hands control of its display back to MailerLite:
   none while idle, and whatever MailerLite sets once submission starts. The
   button keeps its AIUSI appearance from the rule above either way, and the
   spinner centres on the button's default text-align. */
#register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:not(.loading) {
  /* display is deliberately NOT !important. MailerLite swaps the two buttons
     during submit by writing inline styles, hiding this one and revealing the
     loading one. A normal inline style loses to an author !important, so an
     !important display here would keep the real button on screen through the
     whole submit and show two buttons at once. Left normal, this wins over the
     UA default while idle and yields correctly to MailerLite's inline
     display:none the moment a submission starts. */
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
}
#register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:not(.loading):hover {
  background-color: var(--forest-800) !important;
  border-color: var(--forest-800) !important;
  transform: translateY(-1px);
}
#register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:focus-visible {
  outline: 3px solid var(--gold-400) !important;
  outline-offset: 3px !important;
}
/* The loading button's look while MailerLite is showing it. No display, no
   transform: this rule must never be able to reveal it on its own. */
#register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.loading {
  background-color: var(--forest-600) !important;
  border-color: var(--forest-600) !important;
  cursor: default !important;
}

/* Success state */
#register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody { padding: var(--sp-7) var(--sp-6) !important; }
#register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent h4 {
  font-family: var(--font-display) !important;
  font-size: var(--step-2) !important;
  font-weight: 700 !important;
  color: var(--forest-700) !important;
  margin: 0 0 var(--sp-3) !important;
}
#register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p {
  font-family: var(--font-sans) !important;
  font-size: var(--step-0) !important;
  line-height: 1.6 !important;
  color: var(--ink-2) !important;
  margin: 0 !important;
}

/* --- Digest: the quiet sibling, on the white band -------------------------
   One field and a button, on a narrow measure, so it reads as a single
   considered action rather than a form to fill in. */
#subscribe .ml-embedded { margin-inline: auto; max-width: 560px; text-align: left; }
#subscribe.band .ml-embedded .ml-form-embedContainer {
  background-color: var(--mist) !important;
  border: 1px solid var(--forest-100) !important;
  box-shadow: none !important;
}

/* --- Registration: the weightier sibling, on the sand band ----------------
   Same system, different job. This is the conversion point for a real event
   and carries several fields, so it takes the paper surface, a gold rule at
   the head, and a wider measure. Related to the digest, not a copy of it. */
#register .ml-embedded { margin-inline: auto; max-width: 620px; text-align: left; }
#register.band .ml-embedded .ml-form-embedContainer {
  background-color: var(--paper) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shade-3) !important;
  /* The gold rule is painted as a background stripe rather than a thick
     border-top: a 4px border tapers visibly where it meets the 1px sides on a
     24px radius, whereas the stripe clips cleanly to the rounded corner. */
  background-image: linear-gradient(var(--gold-300), var(--gold-300)) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 4px !important;
  background-position: top left !important;
}

/* --- Digest supporting note ------------------------------------------------
   Sits between the section lede and the form, on the AIUSI page itself rather
   than inside the MailerLite embed. One step quieter than the lede so the
   hierarchy stays h2 -> lede -> note -> form, and no second heading is
   introduced. The negative top margin absorbs part of the lede's own 2rem
   inline bottom margin, so the note reads as a continuation of it rather than
   as a separate block. */
.digest-note {
  max-width: 54ch;
  margin: -1rem auto 2.5rem;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink-2);
}
@media (max-width: 480px) {
  .digest-note { margin: -0.5rem auto 2rem; }
}

/* --- reCAPTCHA on narrow screens -------------------------------------------
   Google's widget is a fixed 304x78 iframe that does not reflow. Inside the
   form card the usable width is roughly (viewport - 80px), so below 390px the
   widget runs past the card and is cut off by its overflow:hidden — measured
   at 10px clipped at 375, 25px at 360 and 65px at 320, which can put the
   challenge out of reach and leave the form unsubmittable.

   Scaled down through the transform-origin hook MailerLite already ships for
   exactly this. A transform paints smaller without changing the layout box, so
   each step also pulls back the height it no longer fills; without that the
   scaling would leave a band of dead space above the submit button.

   Two steps rather than one, so the widget stays as large as it can at each
   width: 0.88 fits from 348px up, 0.76 from 311px up. Both keep the checkbox
   above 20px and the label legible. Visual only — the widget's behaviour, the
   form and its fields are untouched. */
@media (max-width: 389px) {
  #subscribe.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .g-recaptcha,
  #register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .g-recaptcha {
    transform: scale(0.88) !important;
    transform-origin: 0 0 !important;
    margin-bottom: -9px !important;   /* 78px * (1 - 0.88), reclaimed */
  }
}
@media (max-width: 347px) {
  #subscribe.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .g-recaptcha,
  #register.band .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .g-recaptcha {
    transform: scale(0.76) !important;
    transform-origin: 0 0 !important;
    margin-bottom: -19px !important;  /* 78px * (1 - 0.76), reclaimed */
  }
}

/* ==========================================================================
   19. EVENT LANDING PAGE — "AI WITHOUT THE PANIC", GREENE COUNTY
   --------------------------------------------------------------------------
   A community campaign page, not a corporate event page. Everything here is
   scoped to .ev-page or to class names used only by
   /events/ai-without-the-panic-springfield/, so no other page can be reached.

   Built inside the existing token system: same greens, same golds, same two
   typefaces. What changes is SCALE and COMPOSITION — full-bleed image-led
   sections, display type well above the site's normal ceiling, numbered
   editorial sections, and statistics sized to be read from across the room.
   ========================================================================== */

/* One step above --step-5, for this page only. The site's scale tops out at
   3.25rem, which reads as "page heading". A campaign hero needs to read as a
   poster. */
.ev-page {
  --step-6: clamp(2.75rem, 1.9rem + 4.2vw, 5.5rem);
  --step-7: clamp(3.25rem, 2.1rem + 5.6vw, 7rem);
}

/* Generous vertical rhythm — the "more whitespace" the brief asks for is
   mostly this one number. */
.ev-band { padding-block: clamp(4rem, 3rem + 5vw, 7.5rem); }

/* --- Image placeholders ----------------------------------------------------
   Deliberately LOUD, unlike the quiet tonal panels used elsewhere on the
   site. The client is supplying the photographs, so until then each slot has
   to say exactly which image belongs in it and what shape it is. The dashed
   gold edge reads unmistakably as "not final".

   TO GO LIVE: replace each .ph element with <img>, or simply delete the two
   <span>s and drop a background-image on .ph — the box already holds the
   final crop and aspect ratio, so nothing around it moves. */
.ev-page .ph {
  position: relative;
  display: grid;
  place-content: center;
  gap: var(--sp-2);
  padding: var(--sp-5);
  text-align: center;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(199, 154, 58, 0.07) 14px 28px),
    var(--forest-50);
  border: 2px dashed var(--gold-400);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.ev-page .ph-tag {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.35;
  color: var(--gold-600);
  text-transform: uppercase;
}
.ev-page .ph-meta {
  font-size: var(--step--1);
  color: var(--ink-2);
}
/* A camera glyph behind the label, so the box reads as an image slot even at
   a glance or in a thumbnail. */
.ev-page .ph::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(44px, 18%, 78px);
  aspect-ratio: 1;
  opacity: 0.13;
  background: center / contain no-repeat
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="%230f3b2f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="9" width="38" height="30" rx="5"/><circle cx="16.5" cy="19.5" r="3.5"/><path d="M5 32.5l10-8.5 7.5 6.5 6.5-5L43 34"/></svg>');
}
.ev-page .ph > * { position: relative; }

/* Label parked low-right so it never lands on the headline/lede column. */
.ev-page .ph-hero {
  height: 100%;
  border-radius: 0;
  border-width: 0;
  place-content: end;
  text-align: right;
  padding: var(--sp-6);
}

/* The supplied hero photograph fills the band behind the scrim. */
.ev-page .ev-hero-media picture,
.ev-page .ev-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* A real photograph in a slot that used to hold a placeholder: same box, same
   crop, no dashed border. */
.ev-page .media-real {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 0;
  background: var(--forest-50);
}
.ev-page .media-real img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ev-page .ph-hero::before { inset: auto var(--sp-6) 38% auto; margin: 0; }
@media (max-width: 999px) { .ph-hero { place-content: start end; } }
.ev-page .ph-tall { aspect-ratio: 4 / 5; }
.ev-page .ph-portrait { aspect-ratio: 4 / 5; }

/* --- Editorial section heads ---------------------------------------------- */
/* Capped in rem, not ch: a ch cap sized for the 17px sub-paragraph throttles
   the 88px heading into a narrow column. The heading gets its own measure. */
.ev-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.ev-num {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--gold-600);
}
.ev-num::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  margin-top: var(--sp-3);
  background: var(--gold-400);
}
.ev-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-6);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 18ch;
  text-wrap: balance;
}
.ev-h2--sm { font-size: var(--step-5); max-width: 24ch; }
.ev-sub {
  margin: var(--sp-5) 0 0;
  max-width: 52ch;
  font-size: var(--step-2);
  line-height: 1.45;
  color: var(--ink-2);
  text-wrap: pretty;
}
.ev-head--light .ev-h2 { color: var(--on-dark); }
.ev-head--light .ev-sub { color: var(--on-dark-2); }
.ev-head--light .ev-num { color: var(--gold-300); }

/* --- HERO — full-bleed, image-led ------------------------------------------
   The photograph is the ground the type sits on. A two-layer scrim (vertical
   for the type block, horizontal to protect the left edge) keeps the headline
   legible over any photograph the client supplies, so the copy never depends
   on how bright the final image turns out to be. */
.ev-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(88vh, 820px);
  padding-block: clamp(4rem, 3rem + 6vw, 8rem);
  background: var(--forest-900);
  isolation: isolate;
}
.ev-hero-media { position: absolute; inset: 0; z-index: 0; }
.ev-hero-media .ph {
  background:
    repeating-linear-gradient(135deg, transparent 0 16px, rgba(255, 255, 255, 0.035) 16px 32px),
    linear-gradient(150deg, var(--forest-800) 0%, var(--forest-600) 100%);
}
.ev-hero-media .ph-tag { color: var(--gold-300); }
.ev-hero-media .ph-meta { color: var(--on-dark-2); }
.ev-hero-media .ph::before { opacity: 0.16; }
/* The scrim. Sits above the image, below the copy. */
.ev-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right, rgba(8, 34, 27, 0.92) 0%, rgba(8, 34, 27, 0.72) 48%, rgba(8, 34, 27, 0.45) 100%),
    linear-gradient(to top, rgba(8, 34, 27, 0.9) 0%, rgba(8, 34, 27, 0.25) 55%);
}
.ev-hero-inner { position: relative; z-index: 2; }

/* Breadcrumb on the dark hero.
   `!important` is load-bearing here, not laziness. The site-wide link rule
       .brand-scope main a:not(.btn):not(.link-arrow):not(.pillar)
         :not(.skip-link):not(.router-list a)
   paints every in-main link --forest-600, and its :not() chain gives it a
   specificity of (0,6,3). On this dark hero that renders dark green on near
   black at 1.80:1. Any ordinary selector this page could write loses to it.

   The tidy fix — adding :not(.crumbs a) to that shared rule — also strips the
   gold underline it applies, which would visibly change breadcrumbs on the
   five other pages that use .crumbs. That is an unrelated change, so this
   override stays scoped to .ev-hero instead.

   NOTE: the same shared rule beats `.hero-page-dark .crumbs a` (0,2,1) at
   line ~827, so dark breadcrumbs are a latent contrast bug anywhere that
   class is used. Left alone here — out of scope for this page. */
.ev-hero .crumbs,
.ev-hero .crumbs-light { color: var(--on-dark-2) !important; }
.ev-hero .crumbs a,
.ev-hero .crumbs-light a {
  color: var(--gold-300) !important;
  text-decoration: none !important;
}
.ev-hero .crumbs a:hover,
.ev-hero .crumbs-light a:hover {
  color: var(--gold-100) !important;
  text-decoration: underline !important;
}

.ev-kicker {
  margin: var(--sp-6) 0 0;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.ev-place {
  margin: var(--sp-2) 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--on-dark);
}
.ev-display {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-7);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--on-dark);
}
.ev-hero-lede {
  margin: var(--sp-5) 0 0;
  max-width: 46ch;
  font-size: var(--step-2);
  line-height: 1.5;
  color: var(--on-dark-2);
  text-wrap: pretty;
}

/* Confirmed vs provisional, as chips. The pending variant is dashed as well
   as differently coloured, so the distinction survives greyscale printing and
   colour-blind viewing rather than resting on hue alone. */
.ev-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
}
.ev-fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid var(--line-dark);
}
.ev-fact--pending {
  background: rgba(199, 154, 58, 0.12);
  border: 1px dashed var(--gold-300);
}
.ev-fact__k {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-2);
}
.ev-fact--pending .ev-fact__k { color: var(--gold-300); }
.ev-fact__v {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--on-dark);
}

.ev-hero-cta { margin-top: var(--sp-7); }
.ev-hero-note {
  margin: var(--sp-5) 0 0;
  max-width: 48ch;
  font-size: var(--step--1);
  color: var(--on-dark-2);
}
.btn-lg {
  padding: 1.05rem 2.1rem;
  font-size: var(--step-1);
}

/* --- "THIS WAS CREATED FOR YOU" — continuous photo strip -------------------
   Seven audiences on a track that scrolls horizontally, for ever, slowly.

   How the seamless loop works: the track holds the seven tiles TWICE and the
   animation translates it exactly -50% — the width of one complete set. At
   100% of the animation the second set sits precisely where the first set
   started, so the wrap is invisible. No JavaScript, no library.

   Speed is set by --p-dur rather than a fixed keyframe so the pace can be
   tuned in one place; it is deliberately slow enough to read a caption.
   -------------------------------------------------------------------------- */
.ev-page .p-strip {
  position: relative;
  overflow: hidden;            /* the strip scrolls INSIDE this box, so the page never gains width */
  margin-top: var(--sp-6);
  padding-block: var(--sp-2);
  --p-card: clamp(260px, 42vw, 560px);
  --p-gap: var(--sp-4);
  --p-dur: 90s;
}

/* Soft edges so tiles enter and leave rather than being chopped by a hard line. */
@media (min-width: 700px) {
  .ev-page .p-strip {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
}

.ev-page .p-track {
  display: flex;
  gap: var(--p-gap);
  width: max-content;          /* the track is as wide as its contents, not the viewport */
  margin: 0;
  padding: 0;
  list-style: none;
  animation: p-marquee var(--p-dur) linear infinite;
  will-change: transform;
}

@keyframes p-marquee {
  from { transform: translate3d(0, 0, 0); }
  /* Exactly one set's width: 7 cards + the 7 gaps that sit between and after them. */
  to   { transform: translate3d(calc(-7 * (var(--p-card) + var(--p-gap))), 0, 0); }
}

/* Pause on hover and whenever anything inside takes keyboard focus, so a reader
   can stop the motion to look at a photograph. */
.ev-page .p-strip:hover .p-track,
.ev-page .p-track:focus-visible,
.ev-page .p-strip:focus-within .p-track { animation-play-state: paused; }

.ev-page .p-track:focus-visible {
  outline: 3px solid var(--gold-400);
  outline-offset: 4px;
  border-radius: var(--r);
}

.ev-page .p-tile {
  flex: 0 0 var(--p-card);
  width: var(--p-card);
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--forest-800);
  box-shadow: var(--shade-2);
}

/* 3:2 matches the supplied photographs closely (most are 1.50-1.78), so the
   crop stays shallow and no face is cut. */
.ev-page .p-media {
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-bottom: 3px solid var(--gold-400);
}
.ev-page .p-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;   /* overridden per photograph inline */
}

.ev-page .p-body {
  flex: 1;
  padding: var(--sp-5);
  background: var(--forest-800);
}
.ev-page .p-role {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--on-dark);
}
.ev-page .p-line {
  margin: 0;
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--on-dark-2);
  text-wrap: pretty;
}

.ev-page .p-hint {
  margin: var(--sp-5) 0 0;
  max-width: 62ch;
  font-size: var(--step-0);
  color: var(--ink-2);
}
/* Only meaningful where a pointer can hover; on touch the strip simply plays,
   and under reduced motion it becomes swipeable and the hint would mislead. */
.ev-page .p-hint__swipe { display: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ev-page .p-hint__swipe { display: inline-flex; }
}
.ev-page .p-hint__swipe {
  align-items: center;
  gap: var(--sp-2);
  margin-right: var(--sp-3);
  padding: 3px var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--forest-50);
  border: 1px solid var(--line);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.ev-page .p-hint__swipe::after { content: "\23F8"; margin-left: 2px; }

/* Slower on large screens: the same speed feels hurried when more cards are
   on screen at once. */
@media (min-width: 1160px) {
  .ev-page .p-strip { --p-dur: 110s; }
}

/* REDUCED MOTION — the strip stops completely and becomes a manually
   scrollable, snapping rail, so every photograph is still reachable. The
   duplicate set is removed from the flow so nothing repeats when it is the
   reader doing the scrolling. */
@media (prefers-reduced-motion: reduce) {
  .ev-page .p-track {
    animation: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    width: 100%;
    padding-bottom: var(--sp-4);
  }
  .ev-page .p-tile { scroll-snap-align: start; }
  .ev-page .p-tile[aria-hidden="true"] { display: none; }
  .ev-page .p-strip {
    -webkit-mask-image: none;
            mask-image: none;
    overflow: visible;
  }
}

/* --- Statistics — the evidence layer --------------------------------------
   Big number, short explanation, source underneath. Grouped by the part of
   life each figure describes, so the section can be scanned rather than read.
   Every source line carries population, geography and year; that is a
   correctness requirement, not decoration. */
.stat-block { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.stat-block__label {
  margin: 0 0 var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-dark);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* --gold-300 measures 3.60:1 here and this is 15px text, so it needs 4.5.
     --gold-100 clears it comfortably at the same visual weight. */
  color: var(--gold-100);
}
.bigstat-row {
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 820px) {
  .bigstat-row { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
  .bigstat-row--single { grid-template-columns: 1fr; }
}
.bigstat { display: flex; flex-direction: column; }
.bigstat__n {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--step-6);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--gold-100);
  font-variant-numeric: tabular-nums;
}
.bigstat__n--word { font-size: var(--step-4); line-height: 1.05; }
.bigstat__u { font-size: 0.55em; margin-left: 0.04em; }
.bigstat__vs {
  font-size: 0.3em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-2);
  vertical-align: 0.9em;
  margin-inline: 0.15em;
}
.bigstat--feature .bigstat__n { font-size: var(--step-7); }
.bigstat__t {
  margin: 0 0 var(--sp-4);
  max-width: 44ch;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--on-dark);
  text-wrap: pretty;
}
.bigstat__t strong { color: var(--gold-100); }
.bigstat__s {
  margin: auto 0 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-dark);
  max-width: 44ch;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--on-dark-2);
}
.bigstat__s strong { color: var(--gold-300); }

.stat-caveat {
  margin: clamp(2.5rem, 2rem + 2vw, 4rem) 0 0;
  padding: var(--sp-5) var(--sp-6);
  max-width: 76ch;
  border-left: 3px solid var(--gold-300);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--on-dark-2);
}
.stat-caveat strong { color: var(--on-dark); }

/* --- What this is / isn't -------------------------------------------------- */
.contrast-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 768px) {
  .contrast-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
}
.contrast-col {
  padding: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line);
}
.contrast-col--is { border-top: 4px solid var(--forest-500); }
.contrast-col--isnt { border-top: 4px solid var(--gold-400); }
.contrast-list {
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-4);
}
.contrast-list li {
  position: relative;
  padding-left: var(--sp-6);
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink-2);
}
.contrast-list li::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 1.25rem;
  text-align: center;
  font-weight: 700;
}
.contrast-list--is li::before { content: "\2713"; color: var(--forest-500); }
.contrast-list--isnt li::before { content: "\2715"; color: var(--gold-600); }

/* --- CTA moments ----------------------------------------------------------- */
.ev-cta-strip {
  padding-block: clamp(3.5rem, 2.8rem + 3vw, 6rem);
  text-align: center;
  background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-400) 100%);
}
.ev-cta-strip__eyebrow {
  margin: 0 0 var(--sp-3);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--forest-900);
}
.ev-cta-strip__h {
  margin: 0 auto var(--sp-6);
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--forest-900);
}
.ev-cta-strip .btn-gold {
  background: var(--forest-700);
  color: var(--on-dark);
  border-color: var(--forest-700);
}
.ev-cta-strip .btn-gold:hover { background: var(--forest-800); }

.ev-final {
  padding-block: clamp(4rem, 3rem + 5vw, 7.5rem);
  text-align: center;
  background: linear-gradient(160deg, var(--forest-900) 0%, var(--forest-700) 100%);
}
.ev-final__eyebrow {
  margin: 0 0 var(--sp-4);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.ev-final__h {
  margin: 0 auto;
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: var(--step-6);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--on-dark);
}
.ev-final__p {
  margin: var(--sp-5) auto var(--sp-7);
  max-width: 48ch;
  font-size: var(--step-2);
  line-height: 1.5;
  color: var(--on-dark-2);
}

/* --- Session format + local context ---------------------------------------- */
.run-split { display: grid; gap: var(--sp-6); }
.run-list { display: grid; gap: var(--sp-4); }
@media (min-width: 1000px) {
  .run-split { grid-template-columns: 1.2fr 0.8fr; align-items: start; gap: var(--sp-8); }
}

.local-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) {
  .local-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
}
.local-note {
  padding-top: var(--sp-5);
  border-top: 3px solid var(--forest-500);
}
.local-note .h4 { margin: 0 0 var(--sp-4); }
.local-note p { color: var(--ink-2); line-height: 1.6; }
.local-note .small { margin-top: var(--sp-4); color: var(--ink-2); }

/* --- Event detail cards ---------------------------------------------------- */
.detail-card { position: relative; }
.detail-status {
  margin: 0 0 var(--sp-3);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.detail-status--set { color: var(--forest-500); }
.detail-status--pending { color: var(--gold-600); }
.detail-status::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: var(--sp-2);
  border-radius: 50%;
  vertical-align: 0.05em;
}
.detail-status--set::before { background: var(--forest-500); }
.detail-status--pending::before { background: transparent; border: 2px solid var(--gold-400); }

/* --- Registration shell ----------------------------------------------------
   The visual integration happens entirely AROUND the MailerLite embed. No
   rule in this block targets MailerLite's injected markup — those rules live
   in section 18, scoped by #register — so fields, submission behaviour,
   loading state and reCAPTCHA are untouched. */
.register-shell {
  padding: clamp(1.75rem, 1.3rem + 2vw, 3.5rem) clamp(1.25rem, 0.9rem + 1.8vw, 3rem);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shade-3);
}
.register-head { text-align: center; }
.register-head .lede { margin: var(--sp-4) auto 0; max-width: 52ch; }
.register-promise {
  margin: var(--sp-6) auto 0;
  max-width: 58ch;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-sm);
  background: var(--gold-50);
  border-left: 3px solid var(--gold-400);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink-2);
}
.register-promise strong { color: var(--ink); }
.register-form { margin-top: var(--sp-5); }
.register-note {
  margin: var(--sp-5) auto 0;
  max-width: 58ch;
  text-align: center;
  color: var(--ink-2);
}

/* --- Facilitator — deliberately secondary ----------------------------------
   Capped narrow so this block can never become the page's visual centre,
   whatever size photograph is supplied. */
.facilitator { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 768px) {
  .facilitator { grid-template-columns: 190px 1fr; gap: var(--sp-7); }
}
.facilitator-media { width: 100%; max-width: 190px; }
.facilitator-body .h3 { margin: var(--sp-3) 0 var(--sp-4); }
.facilitator-body p { color: var(--ink-2); line-height: 1.6; }
.facilitator-credential {
  margin-top: var(--sp-4);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--gold-300);
  color: var(--ink-2);
}

/* --- FAQ -------------------------------------------------------------------
   Native <details>/<summary>: keyboard operable and screen-reader announced
   with no JavaScript. */
.faq-list { display: grid; gap: var(--sp-3); }
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  overflow: hidden;
}
.faq-item[open] { border-color: var(--line-strong); box-shadow: var(--shade-1); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:focus-visible { outline: 3px solid var(--gold-400); outline-offset: -3px; }
.faq-q::after {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 2.5px solid var(--forest-500);
  border-bottom: 2.5px solid var(--forest-500);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 160ms ease;
}
.faq-item[open] .faq-q::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq-a { padding: 0 var(--sp-5) var(--sp-5); color: var(--ink-2); line-height: 1.6; }
.faq-a p { margin: 0; max-width: var(--measure); }