/* ==========================================================================
   The Talent Development Coalition — design system
   --------------------------------------------------------------------------
   Contract, not description. Every size resolves to a --fs-* token. Every
   margin, padding and gap resolves to --s1..--s8. Two text widths exist:
   --measure for prose, --measure-display for display headlines. No radius
   except circular badges, no shadows, no gradients, no glass blur.
   The 1px gold hairline is the signature; everything around it stays quiet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. SELF-HOSTED TYPE
   Archivo (display), Public Sans (body), JetBrains Mono (eyebrow).
   Variable woff2 served from this origin. No Google Fonts CDN.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600 900;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url("/assets/fonts/archivo-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/public-sans-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Public Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/public-sans-italic-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   1. TOKENS — brief §7, verbatim
   -------------------------------------------------------------------------- */
:root {
  /* Brand — sampled from the logo */
  --navy:  #052443;
  --green: #146435;
  --blue:  #16619C;
  --gold:  #E3A620;

  /* Pillar panel backgrounds — sampled from the artwork */
  --panel-partnering: #0E3350;
  --panel-community:  #0C3A1C;
  --panel-citizens:   #3D3510;
  --panel-justice:    #0A2438;

  /* Pillar heading colors — sampled from the artwork */
  --head-partnering: #3888C8;
  --head-community:  #60A040;
  --head-citizens:   #D89818;
  --head-justice:    #3888C8;

  /* Panels and bands */
  --impact-panel: #00301A;
  --band-warm:    #E9E2D9;
  --gold-light:   #FFE7A5;

  /* Neutrals — warm, pulled toward navy. No Tailwind defaults. */
  --ink:           #0D1B2A;
  --ink-muted:     #4A5A6B;
  --rule:          rgba(227,166,32,0.55);
  --on-dark:       #F4F6F8;
  --on-dark-muted: rgba(244,246,248,0.82);

  /* Type scale — the ONLY sizes on the site */
  --fs-display: clamp(40px, 5.6vw, 82px);
  --fs-h2:      clamp(28px, 3.4vw, 50px);
  --fs-h3:      clamp(17px, 1.4vw, 21px);
  --fs-body:    clamp(16px, 1.05vw, 18px);
  --fs-small:   15px;
  --fs-eyebrow: 13px;

  --lh-display: 0.94;
  --lh-head:    1.05;
  --lh-body:    1.6;

  /* Spacing — 8px base. No value outside this scale. */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
}

/* --------------------------------------------------------------------------
   1a. CONTRAST-DERIVED TOKENS
   The §7 palette was sampled from artwork in which the green and blue type
   always sat on WHITE. Amendment A §5 moves that type onto solid --navy and
   onto the dark pillar panels, grounds the artwork never used. Three pairs
   fall below WCAG AA there, and §12 requires zero axe violations:

     --green           on --navy               2.17:1
     --head-partnering on --navy               4.12:1
     --head-partnering on --panel-partnering   3.44:1
     --head-community  on --panel-community    4.03:1
     --gold            on white / --band-warm  2.16:1 / 1.68:1

   Each token below is the minimum shift that clears 4.5:1 while holding the
   sampled hue. The §7 values are unchanged and remain the palette of record
   for every non-text use (bar segments, badge fills, panel grounds).
   -------------------------------------------------------------------------- */
:root {
  --green-on-dark:        var(--head-community);  /* 4.93:1 on --navy */
  --head-partnering-text: #5AA0DA;                /* 5.58:1 navy, 4.65:1 panel */
  --head-community-text:  #6FB04A;                /* 4.88:1 on --panel-community */
  --gold-text:            #7A5A0C;                /* 6.37:1 white, 4.96:1 warm */
}

/* --------------------------------------------------------------------------
   1b. LAYOUT CONTRACT — brief §8 + Amendment A §5
   -------------------------------------------------------------------------- */
:root {
  --container: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --measure: 68ch;           /* the ONLY prose width on the site */
  --measure-display: 22ch;   /* display headlines only — h1 and section h2 */

  --font-display: "Archivo", "Arial Narrow", Helvetica, Arial, sans-serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

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

/* Rule A — every homepage section intro. Centered, --measure wide, always a
   descendant of .container so its box is identical in every section. */
.section-intro {
  max-width: var(--measure);
  margin-inline: auto;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--fs-body);
}

/* One rhythm inside every intro, so eyebrow-to-heading-to-lede spacing is
   identical in all of them. Section-specific rules below may override. */
.section-intro > * + * { margin-top: var(--s3); }

/* Rule B — panel, tile and card content. */
.panel-content { text-align: center; }

/* Rule C — long-form prose on interior pages. */
.prose {
  max-width: var(--measure);
  text-align: left;
}

/* --------------------------------------------------------------------------
   2. RESET AND BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; }

body {
  margin: 0;
  background-color: #FFFFFF;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote, hr { margin: 0; }

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

ul, ol { list-style: none; padding: 0; }

/* Display roles ---------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--heading-color, var(--ink));
}

h1 {
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.015em;
}

h2 {
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: var(--lh-head);
  letter-spacing: 0.005em;
  max-width: var(--measure-display);
  margin-inline: auto;
}

h3 {
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-head);
  letter-spacing: 0.01em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--eyebrow-color, var(--gold-text));
}

.lede {
  max-width: var(--measure);
  margin-inline: auto;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--body-color, var(--ink-muted));
}

/* Dark grounds swap the three semantic colors in one place. */
.on-dark {
  --heading-color: var(--on-dark);
  --body-color: var(--on-dark-muted);
  --eyebrow-color: var(--gold);
  color: var(--on-dark-muted);
}

/* --------------------------------------------------------------------------
   3. THE GOLD HAIRLINE — the site's connective signature
   -------------------------------------------------------------------------- */
.hairline {
  height: 1px;
  border: 0;
  background-color: var(--rule);
}

/* Draw-in on scroll is the page's only motion, and it is opt-in: the rule is
   fully drawn by default, so a JS failure or a blocked script leaves it
   exactly as visible as it was. Never the reverse. */
.motion-js .hairline--draw {
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 600ms ease-out;
}

.motion-js .hairline--draw.is-drawn { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   4. INTERACTION — focus, buttons, links
   -------------------------------------------------------------------------- */
a, button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

a:focus, button:focus, input:focus, select:focus, textarea:focus,
summary:focus, [tabindex]:focus {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: var(--s2) var(--s3);
  background-color: var(--gold);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
}

.skip-link:focus { left: 0; }

/* Primary action — solid green, square corners. One property moves. */
.btn {
  display: inline-block;
  padding: var(--s2) var(--s4);
  background-color: var(--green);
  color: var(--on-dark);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: var(--lh-body);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  transition: background-color 160ms ease-out;
}

.btn:hover { background-color: var(--head-community); }

/* Secondary — a text link with a gold arrow. Only the arrow moves. */
.text-link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s1);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
}

.text-link-arrow {
  display: inline-block;
  transition: transform 160ms ease-out;
}

.text-link:hover .text-link-arrow { transform: translateX(4px); }

/* On light grounds the arrow link needs the darkened gold. */
.text-link--on-light { color: var(--gold-text); }

/* --------------------------------------------------------------------------
   5. CIRCULAR BADGES — the one place a radius is permitted
   -------------------------------------------------------------------------- */
/* The ring is a border, not a shadow — §6 bans drop shadows outright. */
.badge {
  display: grid;
  place-items: center;
  width: var(--s6);
  height: var(--s6);
  border: 2px solid var(--badge-ring, #FFFFFF);
  border-radius: 50%;
  background-color: var(--badge-fill, var(--navy));
}

.badge svg {
  width: var(--s4);
  height: var(--s4);
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   6. SITE HEADER — navy, no bottom border, continuous with the masthead
   -------------------------------------------------------------------------- */
.site-header {
  background-color: var(--navy);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s3);
}

.header-brand { display: block; }
.header-brand img { height: var(--s4); width: auto; }

.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--s4);
}

.nav-link {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: var(--on-dark-muted);
  transition: color 160ms ease-out;
}

.nav-link:hover, .nav-link[aria-current="page"] { color: var(--on-dark); }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.menu-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  width: var(--s5);
  height: var(--s5);
  padding: 0;
  border: 1px solid var(--rule);
  background-color: transparent;
  cursor: pointer;
}

.menu-toggle span:not(.sr-only) {
  width: var(--s3);
  height: 2px;
  background-color: var(--on-dark);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 8;
  background-color: rgba(13,27,42,0.6);
  visibility: hidden;
  opacity: 0;
  transition: opacity 160ms ease-out;
}

.nav-backdrop.is-active { visibility: visible; opacity: 1; }

/* Scroll lock while the drawer is open — a class, never an inline style. */
body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. MASTHEAD — Amendment A §5. Typographic. No image of any kind.
   -------------------------------------------------------------------------- */
.masthead {
  background-color: var(--navy);
  text-align: center;
}

/* Padding lives on the inner wrapper so the pillar bar in step 9 sits flush
   to the masthead's bottom edge rather than floating above it. */
.masthead-inner { padding-block: var(--s8) var(--s7); }

/* 1 — brand lockup: mark | rule | wordmark */
.lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s4);
  width: fit-content;
  margin-inline: auto;
}

.lockup-logo {
  height: var(--s7);
  width: auto;
  flex: none;
}

.lockup-rule {
  align-self: stretch;
  width: 1px;
  background-color: var(--rule);
}

.wordmark {
  text-align: left;
  letter-spacing: normal;
}

.wordmark-the {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  line-height: var(--lh-body);
  letter-spacing: 0.18em;
  color: var(--on-dark-muted);
}

.wordmark-talent {
  display: block;
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: -0.015em;
  color: var(--green-on-dark);
}

.wordmark-rest {
  display: block;
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: var(--lh-head);
  letter-spacing: 0.005em;
  color: var(--on-dark);
}

/* The identity block is fit-content so the hairline in step 2 can be exactly
   as wide as the lockup above it, which is what Amendment A §5 asks for. */
.masthead-identity {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

/* 2 — gold hairline, matched to the lockup block */
.masthead-rule {
  width: 100%;
  margin-block: var(--s3);
}

/* 3 — tagline */
.masthead-tagline {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: var(--lh-body);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--green-on-dark);
}

/* 4 — positioning lede, with the artwork's colored word emphasis */
.masthead-lede {
  max-width: var(--measure);
  margin-inline: auto;
  margin-top: var(--s3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--on-dark-muted);
}

.word-companies { color: var(--head-partnering-text); font-weight: 700; }
.word-community { color: var(--head-community); font-weight: 700; }
.word-citizens  { color: var(--head-citizens); font-weight: 700; }

/* 6 — display statement */
.display-statement {
  max-width: var(--measure-display);
  margin-inline: auto;
  margin-top: var(--s6);
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--on-dark);
}

.display-statement-b { color: var(--head-community); }

/* 8 — actions */
.action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s4);
  margin-top: var(--s5);
}

/* 9 — pillar bar: the masthead's one ornament, previewing §9.3's color system */
.pillar-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 6px;
  border-top: 1px solid var(--rule);
}

.pillar-bar span:nth-child(1) { background-color: var(--head-partnering); }
.pillar-bar span:nth-child(2) { background-color: var(--head-community); }
.pillar-bar span:nth-child(3) { background-color: var(--head-citizens); }
.pillar-bar span:nth-child(4) { background-color: var(--head-justice); }

/* --------------------------------------------------------------------------
   8. §9.2 TOGETHER WE BUILD — warm band
   -------------------------------------------------------------------------- */
.band-warm {
  background-color: var(--band-warm);
  border-block: 1px solid var(--rule);
}

.section-together { padding-block: var(--s7); }

.value-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  margin-top: var(--s5);
}

.value-row li {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
}

.value-row li + li::before {
  content: "|";
  margin-right: var(--s3);
  color: var(--gold-text);
}

/* --------------------------------------------------------------------------
   9. §9.3 FOUR PILLARS — full-bleed, edge to edge, hairlines on the grid
   -------------------------------------------------------------------------- */
.pillar-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--rule);
}

.pillar-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  padding: var(--s6) var(--s3);
  text-align: center;
}

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

.pillar-panel h3 { margin-bottom: 0; }

.pillar-panel p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--on-dark-muted);
}

.pillar-partnering { background-color: var(--panel-partnering); }
.pillar-partnering h3 { color: var(--head-partnering-text); }
.pillar-partnering .badge { --badge-fill: var(--head-partnering); }

.pillar-community { background-color: var(--panel-community); }
.pillar-community h3 { color: var(--head-community-text); }
.pillar-community .badge { --badge-fill: var(--head-community); }

.pillar-citizens { background-color: var(--panel-citizens); }
.pillar-citizens h3 { color: var(--head-citizens); }
.pillar-citizens .badge { --badge-fill: var(--head-citizens); }

.pillar-justice { background-color: var(--panel-justice); }
.pillar-justice h3 { color: var(--head-partnering-text); }
.pillar-justice .badge { --badge-fill: var(--head-justice); }

/* --------------------------------------------------------------------------
   10. §9.4 OUR MISSION
   -------------------------------------------------------------------------- */
.section-mission {
  background-color: var(--impact-panel);
  border-top: 1px solid var(--rule);
  padding-block: var(--s7);
}

.mission-statement {
  margin-top: var(--s3);
  font-size: var(--fs-h3);
  line-height: var(--lh-body);
  color: var(--on-dark);
}

.mission-sub {
  margin-top: var(--s5);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   11. §9.5 FIVE IMPACT AREAS — full-bleed panels, badge on the seam
   No 01–05 numbering: these are parallel categories, not a sequence.
   -------------------------------------------------------------------------- */
.section-impact { padding-block: var(--s7) 0; }

.impact-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: var(--s6);
  border-block: 1px solid var(--rule);
}

.impact-panel { background-color: var(--impact-panel); }

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

/* Top block stands in for the photograph until real TDC photography arrives.
   Swapping in an <img> here is a file change, not a redesign. */
.impact-figure {
  height: var(--s8);
  background-color: var(--navy);
  border-bottom: 1px solid var(--rule);
}

.impact-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding: 0 var(--s3) var(--s5);
  text-align: center;
}

/* Badge straddles the seam between figure and body. */
.impact-body .badge {
  margin-top: calc(var(--s4) * -1);
  --badge-ring: var(--gold);
}

.impact-body h3 {
  margin-top: var(--s1);
  color: var(--gold);
}

.impact-body p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--on-dark-muted);
}

/* --------------------------------------------------------------------------
   12. §9.6 DISCOVER THE NEW TALENT PIPELINE — a real sequence, so ordinals
   carry information here.
   -------------------------------------------------------------------------- */
.section-pipeline { padding-block: var(--s7); }

.pipeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
  margin-top: var(--s6);
}

/* The connecting line is the same hairline, run horizontally through the
   ordinals. Solid --rule, no gradient. */
.pipeline::before {
  content: "";
  position: absolute;
  top: var(--s3);
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background-color: var(--rule);
}

.pipeline-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  text-align: center;
}

.pipeline-ordinal {
  display: grid;
  place-items: center;
  width: var(--s5);
  height: var(--s5);
  border-radius: 50%;
  background-color: var(--navy);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1;
}

.pipeline-step h3 { margin-top: var(--s1); }

.pipeline + .section-intro { margin-top: var(--s6); }

.pipeline-step p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   13. §9.7 PARTNERS — logos optically sized, not box-fitted
   -------------------------------------------------------------------------- */
.section-partners { padding-block: 0 var(--s7); }

.section-partners > .container > .hairline { margin-bottom: var(--s7); }

.logo-wall {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s7);
  margin-top: var(--s6);
}

.logo-wall img {
  width: auto;
  max-height: calc(var(--s6) * var(--logo-scale, 1));
  object-fit: contain;
  /* --logo-tone equalises value, the way --logo-scale equalises size: a
     gold-source mark greyscales to a much lighter tone than a black one. */
  filter: grayscale(1) brightness(var(--logo-tone, 1));
}

/* Per-logo optical correction. CarNav is portrait and whitespace-heavy;
   Keys 4 Success is landscape. Box-fitting would read as unequal weight. */
.logo-carnav       { --logo-scale: 1.35; }
.logo-keys4success { --logo-scale: 1.15; }
.logo-smile        { --logo-scale: 1.50; --logo-tone: 0.6; }
.logo-fossys       { --logo-scale: 0.50; }

/* --------------------------------------------------------------------------
   14. §9.8 BANNER
   -------------------------------------------------------------------------- */
.section-banner { padding-block: var(--s5); }

/* Measured off the artwork: the banner caps are roughly a fifth of the pillar
   headings, so this is --fs-h3, not --fs-h2. At that size the whole line fits
   on one line at desktop with the gold pipe intact, exactly as the poster has
   it. No max-width — the container is the bound. */
.banner-line {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: var(--lh-head);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  color: var(--ink);
}

.banner-power   { color: var(--green); white-space: nowrap; }
.banner-justice { color: var(--blue); white-space: nowrap; }
.banner-pipe    { color: var(--gold-text); }

/* --------------------------------------------------------------------------
   15. §9.9 VALUES ROW — six badges, alternating navy and green
   -------------------------------------------------------------------------- */
.section-values { padding-block: var(--s7); }

.values-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.values-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  padding-inline: var(--s2);
  text-align: center;
}

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

.values-item:nth-child(odd)  .badge { --badge-fill: var(--navy); }
.values-item:nth-child(even) .badge { --badge-fill: var(--green); }

.values-item .badge { --badge-ring: transparent; }

.values-label {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  line-height: var(--lh-body);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   16. §9.10 CLOSING AND FOOTER
   -------------------------------------------------------------------------- */
.section-closing { padding-block: var(--s7); }

.closing-line {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: var(--lh-head);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  text-wrap: balance;
  color: var(--green);
  max-width: var(--measure);
  margin-inline: auto;
}

.site-footer {
  background-color: var(--navy);
  padding-block: var(--s7) var(--s5);
  color: var(--on-dark-muted);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s6);
}

.footer-brand img { height: var(--s5); width: auto; }

.footer-mission {
  margin-top: var(--s3);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--on-dark-muted);
}

.footer-heading {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold);
  margin-bottom: var(--s3);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.footer-links a {
  font-size: var(--fs-small);
  text-decoration: none;
  color: var(--on-dark-muted);
  transition: color 160ms ease-out;
}

.footer-links a:hover { color: var(--on-dark); }

.footer-bottom {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-small);
  color: var(--on-dark-muted);
}

/* --------------------------------------------------------------------------
   17. PHOTO SLOTS — marked, correctly sized, for interior pages until real
   TDC photography arrives. Amendment A §4.
   -------------------------------------------------------------------------- */
.photo-slot {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  padding: var(--s4);
  background-color: var(--band-warm);
  border: 1px solid var(--rule);
}

.photo-slot-note {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   18. RESPONSIVE — hairlines follow the grid at every step
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .value-row { gap: var(--s2); }
  .value-row li + li::before { margin-right: var(--s2); }

  .primary-nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 9;
    width: min(320px, 80%);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s4);
    padding: var(--s7) var(--s5);
    background-color: var(--navy);
    border-left: 1px solid var(--rule);
    transform: translateX(100%);
    transition: transform 160ms ease-out;
  }

  .primary-nav.is-open { transform: translateX(0); }
  .primary-nav.is-hidden { visibility: hidden; }
  .menu-toggle { display: flex; }

  /* §9.5 five across is unreadable at this width */
  .impact-row { grid-template-columns: repeat(3, 1fr); }
  .impact-panel:nth-child(3n+1) { border-left: 0; }
  .impact-panel:nth-child(n+4) { border-top: 1px solid var(--rule); }

  .values-row { grid-template-columns: repeat(3, 1fr); }
  .values-item:nth-child(3n+1) { border-left: 0; }
  .values-item:nth-child(n+4) { margin-top: var(--s5); }

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

@media (max-width: 900px) {
  .pillar-row { grid-template-columns: repeat(2, 1fr); }
  .pillar-panel:nth-child(2n+1) { border-left: 0; }
  .pillar-panel:nth-child(n+3) { border-top: 1px solid var(--rule); }

  .pipeline { grid-template-columns: repeat(2, 1fr); row-gap: var(--s6); }
  .pipeline::before { display: none; }
}

/* Below 700px the divider drops and the lockup stacks. */
@media (max-width: 700px) {
  .lockup { flex-direction: column; gap: var(--s3); }
  .lockup-rule { display: none; }
  .wordmark { text-align: center; }

  .masthead-inner { padding-block: var(--s7) var(--s6); }
  .action-row { flex-direction: column; gap: var(--s3); }
}

@media (max-width: 620px) {
  .pillar-row { grid-template-columns: 1fr; }
  .pillar-panel { border-left: 0; }
  .pillar-panel + .pillar-panel { border-top: 1px solid var(--rule); }

  .impact-row { grid-template-columns: 1fr; }
  .impact-panel { border-left: 0; }
  .impact-panel + .impact-panel { border-top: 1px solid var(--rule); }

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

  .value-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s3);
    text-align: center;
  }

  .value-row li + li::before { content: none; }

  .values-row { grid-template-columns: repeat(2, 1fr); }
  .values-item:nth-child(odd) { border-left: 0; }
  .values-item:nth-child(even) { border-left: 1px solid var(--rule); }
  .values-item:nth-child(n+3) { margin-top: var(--s5); }

  .footer-grid { grid-template-columns: 1fr; gap: var(--s5); }

  .logo-wall { gap: var(--s5); }
}

/* --------------------------------------------------------------------------
   19. REDUCED MOTION — fully respected
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

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

  .motion-js .hairline--draw { transform: none; }
}