/* ==========================================================================
   nonprofit.omen.services / main.css
   Hand-authored. No build step, no framework, no CDN.
   Genre: technical utility. Variance 7 / Motion 3 / Density 4.
   FROZEN after design handoff. Page builders must not add CSS.

   CONTENTS
   01  Fonts
   02  Tokens
   03  Reset and base elements
   04  Typography primitives
   05  Layout: container, band, section head, grids, split
   06  Skip link, header, nav, mobile drawer
   07  Buttons and links
   08  Hero and the Terms at a glance block
   09  Content components
       9.1  Spec list / data table
       9.2  Numbered process steps
       9.3  Criteria lists
       9.4  Chips
       9.5  Cards and sector grid
       9.6  Work / case-study items
       9.7  Stat rows
       9.8  FAQ disclosure
       9.9  Plain-English summary callout
       9.10 Figures and photography
       9.11 Breadcrumb and anchor nav
       9.12 Prose article layout
   10  Form system
   11  Footer, cookie banner, mobile apply bar
   12  Utilities
   13  Interactive state transitions
   14  Reduced motion and print
   ========================================================================== */


/* ==========================================================================
   01  FONTS. Self-hosted, latin subset, variable
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   02  TOKENS
   Raw values are inherited from BRAND.md. Semantic aliases below them are what
   components actually reference, so a band can re-point them and every child
   component adapts without a variant class.
   ========================================================================== */

:root {
  /* --- Raw palette (BRAND.md) --- */
  --anchor-900: #1e1a21;
  --anchor-800: #3a3340;
  --brand-700:  #2e0052;
  --brand-600:  #4b0082;
  --accent-500: #fbb884;   /* fills and dark-ground text ONLY. 1.71:1 on white. */
  --accent-600: #4f2700;   /* accent TEXT on light grounds. 12.94:1 on white.   */
  --ground-50:  #fff7fe;
  --paper:      #ffffff;
  --ink-900:    #1e1a21;
  --body-700:   #3a3340;
  --muted-300:  #f0dbff;
  --tint:       #f0dbff;
  --line:       #e7deed;
  --line-2:     #d8ccdf;
  --line-dark:  rgba(255, 255, 255, .10);

  /* --- Form state (two derived values, see DESIGN.md) --- */
  --field-border:  #3a3340;   /* = --body-700. 12.16:1 on paper, clears 1.4.11. */
  --field-focus:   #2e0052;   /* = --brand-700 */
  --field-invalid: #8f1d1d;   /* derived. 8.89:1 on paper. Never used alone.    */
  --field-valid:   #2e0052;   /* = --brand-700. No green: that would be accent 2. */

  /* --- Semantic aliases (re-pointed by .band--ink / .band--brand) --- */
  --surface:        var(--paper);
  --surface-raised: var(--paper);
  --surface-sunken: var(--ground-50);
  --text:           var(--ink-900);
  --text-muted:     var(--body-700);
  --heading:        var(--ink-900);
  --rule:           var(--line);
  --rule-strong:    var(--line-2);
  --link:           var(--brand-700);
  --link-hover:     var(--brand-600);
  --index-num:      var(--accent-600);
  --focus-ring:     var(--brand-700);

  /* --- Type --- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-micro: 0.6875rem;
  --fs-xs:    0.75rem;
  --fs-sm:    0.8125rem;
  --fs-base:  1rem;
  --fs-md:    1.0625rem;
  --fs-lead:  clamp(1.0625rem, 0.98rem + 0.45vw, 1.3125rem);
  --fs-h4:    1.0625rem;
  --fs-h3:    clamp(1.1875rem, 1.11rem + 0.4vw, 1.4375rem);
  --fs-h2:    clamp(1.75rem, 1.42rem + 1.6vw, 2.75rem);
  --fs-h1:    clamp(2.5rem, 1.62rem + 4.4vw, 4.5rem);
  --fs-numeral: clamp(1.75rem, 1.4rem + 1.7vw, 2.75rem);

  /* --- 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:  2.5rem;
  --sp-8:  3rem;
  --sp-9:  4rem;
  --sp-10: 5rem;

  --band-y:       clamp(3.5rem, 2.5rem + 4.5vw, 6.5rem);
  --band-y-tight: clamp(2.5rem, 1.9rem + 2.8vw, 4rem);
  --gutter:       clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  --container:    72rem;
  --container-narrow: 48rem;
  --measure:      72ch;

  /* --- Shape --- */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --shadow-sm: 0 1px 2px rgba(30, 26, 33, .06);
  --shadow-md: 0 2px 10px rgba(30, 26, 33, .07);
  --shadow-lg: 0 10px 30px rgba(30, 26, 33, .10);

  /* --- Chrome metrics --- */
  --header-h:    3.75rem;
  --apply-bar-h: 0rem;
  --cookie-inset: 0rem;

  /* --- Motion. Tokens only. The motion layer is owned by a later agent. --- */
  --motion-duration-fast: 120ms;
  --motion-duration-base: 220ms;
  --motion-duration-slow: 420ms;
  --motion-ease: cubic-bezier(.2, .6, .2, 1);
  --motion-distance: 0.75rem;
}

@media (min-width: 64rem) {
  :root { --header-h: 4.5rem; }
}


/* ==========================================================================
   03  RESET AND BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  /* Resolved on <body> so the cookie-banner override below actually recomputes. */
  padding-bottom: calc(var(--apply-bar-h) + var(--cookie-inset));
  background: var(--ground-50);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: 1.6;
  /* Long emails, URLs and org names must never push a layout sideways. */
  overflow-wrap: break-word;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* No viewport space is reserved for the cookie notice: it is in the document
   flow, so it occupies its own space. --cookie-inset stays at 0 and body's
   bottom padding covers only the sticky Apply bar. */

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--heading); }
p, ul, ol, dl, dd, figure, table, blockquote, pre { margin: 0; }
ul, ol { padding-left: 1.25rem; }

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

a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: from-font; }
a:hover { color: var(--link-hover); }

button, input, select, textarea { font: inherit; color: inherit; }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--sp-6) 0;
}

table { border-collapse: collapse; }

[hidden] { display: none !important; }

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

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

:focus:not(:focus-visible) { outline: none; }


/* ==========================================================================
   04  TYPOGRAPHY PRIMITIVES
   Inherited verbatim from the parent brand.
   ========================================================================== */

.eyebrow {
  font-variant-caps: all-small-caps;
  letter-spacing: .14em;
  font-weight: 600;
}

.headline {
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: .98;
  text-wrap: balance;
}

.subhead {
  text-wrap: pretty;
  line-height: 1.55;
}

/* Mono is the instrument for labels, eyebrows, numerals and metadata. */
.mono,
.num {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
}

.num { font-variant-numeric: tabular-nums; }

h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.035em; line-height: .98; text-wrap: balance; }
h2 { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -.035em; line-height: 1.03; text-wrap: balance; }
h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
h4 { font-size: var(--fs-h4); font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  text-wrap: pretty;
  color: var(--text);
  max-width: 46ch;
}

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

/* Colour-only emphasis inside a headline. Same face, same weight. */
.hl-key { color: var(--accent-600); }
.band--ink .hl-key,
.band--brand .hl-key { color: var(--accent-500); }


/* ==========================================================================
   05  LAYOUT
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }
.container--prose  { max-width: calc(var(--measure) + var(--gutter) * 2); }

/* --- Bands ------------------------------------------------------------- */

.band {
  padding-block: var(--band-y);
  background: var(--surface);
  color: var(--text);
}

.band--tight { padding-block: var(--band-y-tight); }
.band--flush-top { padding-block-start: 0; }

.band--paper  { --surface: var(--paper);      background: var(--paper); }
.band--ground { --surface: var(--ground-50);  --surface-raised: var(--paper); background: var(--ground-50); }

.band--tint {
  --surface: var(--tint);
  --surface-raised: var(--paper);
  --rule: var(--line-2);
  background: var(--tint);
}

.band--ink {
  --surface: var(--ink-900);
  --surface-raised: var(--anchor-800);
  --surface-sunken: var(--ink-900);
  --text: var(--muted-300);
  --text-muted: var(--muted-300);
  --heading: var(--paper);
  --rule: var(--line-dark);
  --rule-strong: var(--line-dark);
  --link: var(--accent-500);
  --link-hover: var(--accent-500);
  --index-num: var(--accent-500);
  --focus-ring: var(--accent-500);
  background: var(--ink-900);
  color: var(--text);
}

.band--brand {
  --surface: var(--brand-700);
  --surface-raised: var(--brand-600);
  --surface-sunken: var(--brand-700);
  --text: var(--muted-300);
  --text-muted: var(--muted-300);
  --heading: var(--paper);
  --rule: var(--line-dark);
  --rule-strong: var(--line-dark);
  --link: var(--accent-500);
  --link-hover: var(--accent-500);
  --index-num: var(--accent-500);
  --focus-ring: var(--accent-500);
  background: var(--brand-700);
  color: var(--text);
}

/* --- Signature heading treatment ---------------------------------------
   The ONE site-wide gimmick: a mono index label above every section h2.
   Markup:
     <div class="section-head">
       <p class="section-index"><span class="section-index__num">02</span> / What is included</p>
       <h2 class="section-title">…</h2>
       <p class="section-lede">…</p>
     </div>
   ---------------------------------------------------------------------- */

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  margin-block-end: var(--sp-7);
  max-width: 60ch;
}

.section-head--wide { max-width: none; }

.section-index {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5ch;
  flex-wrap: wrap;
}

.section-index__num {
  color: var(--index-num);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.section-title { font-size: var(--fs-h2); }

.section-lede {
  font-size: var(--fs-lead);
  line-height: 1.5;
  text-wrap: pretty;
  color: var(--text);
  max-width: 54ch;
  margin: 0;
}

/* --- Ruled divider with an amber terminator ---------------------------- */

.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  position: relative;
  margin: var(--sp-6) 0;
}

.rule::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--accent-500);
}

/* --- Generic grids ------------------------------------------------------ */

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
}

.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

@media (min-width: 48rem) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
}

/* --- Split: prose beside media or a secondary column -------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}

@media (min-width: 62rem) {
  .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--sp-8); }
  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--sidebar { grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); }
  .split--reverse > :first-child { order: 2; }
}

/* Vertical rhythm helper for arbitrary flows. */
.stack > * + * { margin-block-start: var(--sp-4); }
.stack--tight > * + * { margin-block-start: var(--sp-2); }
.stack--loose > * + * { margin-block-start: var(--sp-6); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}


/* ==========================================================================
   06  SKIP LINK, HEADER, NAV
   ========================================================================== */

.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: var(--sp-3);
  z-index: 200;
  transform: translateY(-160%);
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  background: var(--brand-700);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--paper);
  outline: 2px solid var(--ink-900);
  outline-offset: 2px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

/* One row at 1024px. Measures 61px mobile, 73px desktop, both under the 90px
   ceiling. No max-height: a hard cap would clip text at large zoom, and
   clipping is worse than a tall header. Keep to 5 nav links plus Apply. */
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  min-height: var(--header-h);
}

/* --- Brand lockup ------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  text-decoration: none;
  color: var(--ink-900);
  flex-shrink: 0;
}

.brand:hover { color: var(--ink-900); }

.brand__mark {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
}

.brand__name {
  font-weight: 800;
  letter-spacing: -.035em;
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
}

@media (min-width: 30rem) {
  .brand__name { font-size: 1.0625rem; }
}

.brand__name-a { color: var(--ink-900); }
.brand__name-b { color: var(--body-700); }

@media (min-width: 64rem) {
  .brand__mark { width: 3rem; height: 3rem; }
  .brand__name { font-size: 1.1875rem; }
}

.site-footer .brand__name-a { color: var(--paper); }
.site-footer .brand__name-b { color: var(--muted-300); }

/* --- Desktop nav -------------------------------------------------------- */

.nav { display: none; }

@media (min-width: 64rem) {
  .nav {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
  }

  .nav__list {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--body-700);
    text-decoration: none;
    border-bottom: 2px solid transparent;
  }

  .nav__link:hover {
    color: var(--brand-700);
    border-bottom-color: var(--line-2);
  }

  .nav__link[aria-current="page"] {
    color: var(--ink-900);
    border-bottom-color: var(--brand-700);
  }
}

/* --- Mobile toggle and drawer ------------------------------------------- */

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.5rem 0.625rem;
  background: var(--paper);
  color: var(--ink-900);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav-toggle:hover { border-color: var(--body-700); }

.nav-toggle__bars {
  position: relative;
  width: 1rem;
  height: 0.75rem;
  flex-shrink: 0;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after,
.nav-toggle__bars span {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
}

.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars span { top: calc(50% - 1px); }
.nav-toggle__bars::after { bottom: 0; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: calc(50% - 1px); transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { bottom: calc(50% - 1px); transform: rotate(-45deg); }

.nav-drawer {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
}

.nav-drawer__list {
  list-style: none;
  margin: 0;
  padding: var(--sp-2) 0 var(--sp-4);
}

.nav-drawer__item + .nav-drawer__item { border-top: 1px solid var(--line); }

.nav-drawer__link {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  padding: 0.5rem var(--gutter);
  font-weight: 600;
  color: var(--ink-900);
  text-decoration: none;
}

.nav-drawer__link:hover { color: var(--brand-700); background: var(--ground-50); }
.nav-drawer__link[aria-current="page"] { color: var(--brand-700); }

.nav-drawer__cta { padding: var(--sp-4) var(--gutter) 0; }

@media (min-width: 64rem) {
  .nav-toggle, .nav-drawer { display: none !important; }
}


/* ==========================================================================
   07  BUTTONS AND LINKS
   Every button clears 44px.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.6875rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background: none;
}

.btn--lg { min-height: 3.25rem; padding: 0.875rem 1.75rem; font-size: var(--fs-md); }
.btn--sm { min-height: 2.75rem; padding: 0.5rem 0.875rem; font-size: var(--fs-sm); }
.btn--block { display: flex; width: 100%; }

.btn--primary {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: var(--paper);
}
.btn--primary:hover { background: var(--brand-600); border-color: var(--brand-600); color: var(--paper); }

.btn--secondary {
  background: var(--paper);
  border-color: var(--body-700);
  color: var(--ink-900);
}
.btn--secondary:hover { border-color: var(--brand-700); color: var(--brand-700); }

.btn--ghost {
  background: none;
  border-color: transparent;
  color: var(--link);
  text-decoration: underline;
  padding-inline: 0.5rem;
}
.btn--ghost:hover { color: var(--link-hover); }

/* On ink or purple grounds. */
.band--ink .btn--primary,
.band--brand .btn--primary,
.site-footer .btn--primary,
.btn--invert {
  background: var(--accent-500);
  border-color: var(--accent-500);
  color: var(--ink-900);
}
.band--ink .btn--primary:hover,
.band--brand .btn--primary:hover,
.site-footer .btn--primary:hover,
.btn--invert:hover { background: var(--accent-500); border-color: var(--paper); color: var(--ink-900); }

.band--ink .btn--secondary,
.band--brand .btn--secondary,
.site-footer .btn--secondary {
  background: transparent;
  border-color: var(--muted-300);
  color: var(--paper);
}
.band--ink .btn--secondary:hover,
.band--brand .btn--secondary:hover,
.site-footer .btn--secondary:hover { border-color: var(--paper); color: var(--paper); }

.btn:disabled,
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* Inline text link with a mono cue after it, e.g. "Read the terms  →" */
.link-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  font-weight: 600;
  text-decoration: underline;
}

.link-cue::after {
  content: "\2192";
  font-family: var(--font-mono);
  text-decoration: none;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* Support channels (phone, email). Never styled as a call to action. */
.contact-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 600;
}


/* ==========================================================================
   08  HERO + TERMS AT A GLANCE
   Editorial stacked. Type first. No photograph in band one.
   ========================================================================== */

.hero {
  padding-block: clamp(2.75rem, 2rem + 3.6vw, 5rem) var(--band-y);
  background: var(--paper);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: start;
}

@media (min-width: 62rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--sp-9);
  }
}

.hero__copy { display: grid;
  grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); align-content: start; }

.hero__title {
  font-size: var(--fs-h1);
  max-width: 15ch;
}

.hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  text-wrap: pretty;
  max-width: 44ch;
  margin: 0;
}

.hero__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--body-700);
  display: flex;
  flex-wrap: wrap;
  /* Separation is the column gap, not a character. This row wraps at 390px
     (one item per line) and again at 1280px in the two-column hero, so any
     inter-item glyph orphans onto a wrapped line. */
  gap: 0.5rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero__meta li { display: flex; align-items: center; gap: 0.5rem; }

/* --- Photographic hero -------------------------------------------------
   The photograph is an absolutely positioned background layer, never a flow
   element. Nothing in the hero moves because of it, so the "Terms at a glance"
   card keeps its exact position above the fold and CLS stays at 0.

   The overlay is a FLAT solid --ink-900 at .82. No gradient. Every one of these
   assets contains pure white pixels, so the worst case was computed against
   #ffffff: paper 9.68, muted-300 7.51, accent-500 5.67, all AA.

   The dark aliases are scoped to .hero__copy ONLY. The terms card and the
   sector spec card are opaque paper and must keep light-ground aliases, or
   their body text would invert to lilac on white.
   ---------------------------------------------------------------------- */

.hero--media {
  position: relative;
  isolation: isolate;
  background: var(--ink-900);
}

.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink-900);
  opacity: .82;
}

.hero--media .hero__inner {
  position: relative;
  z-index: 1;
}

.hero--media .hero__copy {
  --text: var(--muted-300);
  --text-muted: var(--muted-300);
  --heading: var(--paper);
  --rule: var(--line-dark);
  --link: var(--accent-500);
  --link-hover: var(--accent-500);
  --index-num: var(--accent-500);
  --focus-ring: var(--accent-500);
  color: var(--muted-300);
}

/* Carries the money. Paper, not muted, for maximum legibility. */
.hero--media .hero__lead { color: var(--paper); }

/* .hero__meta hard-codes --body-700, which would vanish on the dark ground. */
.hero--media .hero__meta { color: var(--muted-300); }

.hero--media .hero__copy .btn--primary {
  background: var(--accent-500);
  border-color: var(--accent-500);
  color: var(--ink-900);
}
.hero--media .hero__copy .btn--primary:hover {
  background: var(--accent-500);
  border-color: var(--paper);
  color: var(--ink-900);
}

.hero--media .hero__copy .btn--secondary {
  background: transparent;
  border-color: var(--muted-300);
  color: var(--paper);
}
.hero--media .hero__copy .btn--secondary:hover {
  border-color: var(--paper);
  color: var(--paper);
}

/* --- The single most important element on the site ---------------------- */

.terms {
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
}

.band--ink .terms,
.band--brand .terms {
  background: var(--surface-raised);
  border-color: var(--line-dark);
  box-shadow: none;
}

.terms__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-block-end: var(--sp-3);
  border-bottom: 2px solid var(--ink-900);
}

.band--ink .terms__head,
.band--brand .terms__head { border-bottom-color: var(--accent-500); }

.terms__title {
  font-size: var(--fs-h4);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
}

.terms__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.terms__list {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.terms__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.125rem 1rem;
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--rule);
}

.terms__row:last-child { border-bottom: 0; padding-block-end: 0; }

@media (min-width: 30rem) {
  .terms__row { grid-template-columns: 8.5rem minmax(0, 1fr); align-items: baseline; }
}

.terms__label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
  padding-block-start: 0.15rem;
}

.terms__value {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text);
  text-wrap: pretty;
}

.terms__row--key .terms__value {
  font-size: var(--fs-md);
  font-weight: 700;
}

.terms__value .num {
  font-weight: 600;
  letter-spacing: -.01em;
}

.terms__note {
  margin-block-start: var(--sp-4);
  padding-block-start: var(--sp-3);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
}


/* ==========================================================================
   09  CONTENT COMPONENTS
   ========================================================================== */

/* --- 9.1  Spec list (dl) and data table --------------------------------- */

.spec-list {
  margin: 0;
  border-top: 1px solid var(--rule);
}

.spec-list__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.125rem 1.5rem;
  padding-block: 0.9375rem;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 40rem) {
  .spec-list__row { grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); align-items: baseline; }
}

.spec-list__term {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

.spec-list__desc {
  margin: 0;
  color: var(--text);
  text-wrap: pretty;
}

/* Plain itemised list with hairline rules and no term column. */
.ruled-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.ruled-list__item {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0 0.75rem;
  align-items: baseline;
  padding-block: 0.8125rem;
  border-bottom: 1px solid var(--rule);
  text-wrap: pretty;
}

.ruled-list__key {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--index-num);
  font-variant-numeric: tabular-nums;
}

.ruled-list__item--out .ruled-list__key { color: var(--text-muted); }

.ruled-list__title { font-weight: 700; }
.ruled-list__note { display: block; color: var(--text-muted); font-size: var(--fs-base); }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}

.data-table caption {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-block-end: var(--sp-3);
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 0.75rem 0.75rem 0.75rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.data-table thead th {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 2px solid var(--ink-900);
}

.band--ink .data-table thead th,
.band--brand .data-table thead th { border-bottom-color: var(--accent-500); }

.data-table tbody th { font-weight: 700; }
.data-table .num { font-variant-numeric: tabular-nums; }

.table-scroll { overflow-x: auto; }

/* --- 9.2  Numbered process steps ---------------------------------------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  border-top: 1px solid var(--rule);
}

.step {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0.375rem 1rem;
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 48rem) {
  .step {
    grid-template-columns: 2.75rem minmax(0, 16rem) minmax(0, 1fr);
    gap: 0.375rem var(--sp-5);
    align-items: start;
  }
}

.step__num {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--accent-500);
  color: var(--ink-900);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

@media (min-width: 48rem) {
  .step__num { grid-row: span 2; }
}

.step__title {
  font-size: var(--fs-h4);
  font-weight: 700;
  margin: 0;
  align-self: center;
}

.step__body {
  grid-column: 2 / -1;
  margin: 0;
  color: var(--text);
  text-wrap: pretty;
}

@media (min-width: 48rem) {
  .step__title { align-self: start; }
  .step__body { grid-column: 3; grid-row: 1 / span 2; }
}

.step__meta {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --- 9.3  Criteria lists ------------------------------------------------ */

.criteria {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.criteria__item {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.25rem 1rem;
  align-items: baseline;
  padding-block: 0.9375rem;
  border-bottom: 1px solid var(--rule);
  text-wrap: pretty;
}

.criteria__key {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.criteria__key--yes { color: var(--accent-600); }
.criteria__key--no  { color: var(--field-invalid); }

.band--ink .criteria__key--yes,
.band--brand .criteria__key--yes { color: var(--accent-500); }
.band--ink .criteria__key--no,
.band--brand .criteria__key--no { color: var(--muted-300); }

.criteria__text { margin: 0; }
.criteria__note { display: block; color: var(--text-muted); font-size: var(--fs-base); margin-block-start: 0.25rem; }

/* --- 9.4  Chips --------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.chip--accent  { background: var(--accent-500); color: var(--ink-900); }
.chip--ink     { background: var(--ink-900);    color: var(--muted-300); }
.chip--brand   { background: var(--brand-700);  color: var(--paper); }
.chip--outline { background: transparent; color: var(--text-muted); border: 1px solid var(--rule-strong); }

/* --- 9.5  Cards and sector grid ----------------------------------------
   Cards are delineated by background, radius and shadow only.
   No accent bar, no edge stripe. Ever.
   ---------------------------------------------------------------------- */

.card {
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(1.125rem, 1rem + 0.6vw, 1.625rem);
  box-shadow: var(--shadow-sm);
}

.band--ink .card,
.band--brand .card { box-shadow: none; }

.card--flat { box-shadow: none; }
.card--sunken { background: var(--surface-sunken); box-shadow: none; }

.card__label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--sp-2);
}

.card__title { font-size: var(--fs-h4); font-weight: 700; margin: 0 0 var(--sp-2); }
.card__body { margin: 0; color: var(--text); text-wrap: pretty; }

.sector-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

@media (min-width: 40rem) { .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .sector-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sector-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 100%;
  padding: 1.25rem;
  background: var(--surface-raised);
  color: var(--text);
  text-decoration: none;
}

.sector-card:hover { background: var(--ground-50); color: var(--text); }
.band--ink .sector-card:hover,
.band--brand .sector-card:hover { background: var(--surface-raised); }

.sector-card__name {
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--heading);
}

.sector-card:hover .sector-card__name { text-decoration: underline; }

.sector-card__detail {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
  text-wrap: pretty;
}

.sector-card__cue {
  margin-block-start: auto;
  padding-block-start: 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--link);
}

/* --- 9.6  Work / case-study item ---------------------------------------- */

.work-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.work-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.375rem;
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 48rem) {
  .work-item {
    grid-template-columns: 3rem minmax(0, 18rem) minmax(0, 1fr) auto;
    gap: var(--sp-5);
    align-items: baseline;
  }
}

.work-item__index {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--index-num);
  font-variant-numeric: tabular-nums;
}

.work-item__name {
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0;
}

.work-item__desc { margin: 0; color: var(--text-muted); text-wrap: pretty; }

.work-item__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --- 9.7  Stat / spec rows ---------------------------------------------- */

.stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}

@media (min-width: 56rem) {
  .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stat {
  background: var(--surface);
  padding: var(--sp-5) var(--sp-4) var(--sp-5) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.375rem;
  align-content: start;
}

@media (min-width: 56rem) {
  .stat + .stat { padding-left: var(--sp-5); }
}

.stat__num {
  font-family: var(--font-mono);
  font-size: var(--fs-numeral);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.stat__note { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }

/* --- 9.8  FAQ disclosure ------------------------------------------------ */

.faq {
  border-top: 1px solid var(--rule);
}

.faq__item {
  border-bottom: 1px solid var(--rule);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 3.5rem;
  padding-block: 1rem;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--heading);
  cursor: pointer;
  list-style: none;
  text-wrap: pretty;
}

.faq__q::-webkit-details-marker { display: none; }

.faq__q::after {
  content: "";
  flex: 0 0 auto;
  width: 0.875rem;
  height: 0.875rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-0.15rem, -0.15rem);
}

.faq__item[open] > .faq__q::after {
  transform: rotate(225deg) translate(-0.15rem, -0.15rem);
}

.faq__a {
  padding-block: 0 1.25rem;
  max-width: 68ch;
  color: var(--text);
  text-wrap: pretty;
}

.faq__a > * + * { margin-block-start: var(--sp-3); }

/* --- 9.9  Plain-English summary callout --------------------------------- */

.plain-summary {
  background: var(--surface-sunken);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-md);
  padding: clamp(1.125rem, 1rem + 0.7vw, 1.75rem);
}

.band--ink .plain-summary,
.band--brand .plain-summary {
  background: var(--surface-raised);
  border-color: var(--line-dark);
}

.plain-summary__title {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--index-num);
  margin: 0 0 var(--sp-3);
}

.plain-summary__body { margin: 0; text-wrap: pretty; }
.plain-summary__body > * + * { margin-block-start: var(--sp-3); }

/* --- 9.10  Figures and photography -------------------------------------
   Photo overlays are a FLAT SOLID colour at opacity. No gradients anywhere.
   At 0.86 the worst-case white pixel still yields 11.15:1 for paper text.
   ---------------------------------------------------------------------- */

.figure { margin: 0; display: grid;
  grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }

.figure__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
}

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

.figure__frame--portrait { max-width: 26rem; }
.figure__frame--portrait img { aspect-ratio: 3 / 4; object-fit: cover; }
.figure__frame--wide img { aspect-ratio: 16 / 9; object-fit: cover; }

.figure__overlay {
  position: absolute;
  inset: 0;
  background: var(--ink-900);
  opacity: .86;
}

.figure__caption {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.6;
}

/* --- 9.11  Breadcrumb and in-page anchor nav ---------------------------- */

/* The 44px target lives on the link, not on the wrapper, so the bar keeps its
   height (52px, was 51.2px) and no page content moves. */
.breadcrumb { padding-block: var(--sp-1); }

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  color: var(--text-muted);
}

.breadcrumb__item { display: flex; align-items: center; gap: 0.5rem; }
.breadcrumb__item + .breadcrumb__item::before { content: "/"; color: var(--rule-strong); }
.breadcrumb__item a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--text-muted);
}
.breadcrumb__item a:hover { color: var(--link); }
.breadcrumb__item[aria-current="page"] { color: var(--text); }

.anchor-nav {
  border-block: 1px solid var(--rule);
  padding-block: var(--sp-3);
}

.anchor-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.anchor-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
}

.anchor-nav__link:hover { color: var(--link); text-decoration: underline; }

/* --- 9.12  Prose article layout (legal pages) --------------------------- */

.prose {
  max-width: var(--measure);
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--text);
}

.prose > * + * { margin-block-start: var(--sp-4); }

.prose h2 {
  font-size: var(--fs-h3);
  margin-block-start: var(--sp-7);
  padding-block-start: var(--sp-4);
  border-top: 1px solid var(--rule);
}

.prose h3 { font-size: var(--fs-h4); margin-block-start: var(--sp-6); }

.prose ul, .prose ol { padding-left: 1.375rem; }
.prose li + li { margin-block-start: var(--sp-2); }
.prose a { font-weight: 600; }

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}

.prose th, .prose td {
  text-align: left;
  padding: 0.625rem 0.75rem 0.625rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.prose thead th {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 2px solid var(--ink-900);
}

.prose blockquote {
  padding-left: var(--sp-4);
  border-left: 2px solid var(--rule-strong);
  color: var(--text-muted);
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--ground-50);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
}

.doc-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}


/* ==========================================================================
   10  FORM SYSTEM
   The apply page is the highest-risk page type. This is the only CSS it gets.
   ========================================================================== */

.form { max-width: 42rem; }
.form--wide { max-width: 54rem; }

/* --- Progress. Text is the primary indicator, the bar is decoration. ---- */

.form-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  margin-block-end: var(--sp-5);
}

.form-progress__text {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.form-progress__label { color: var(--text-muted); font-weight: 500; }

.form-progress__track {
  height: 0.25rem;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.form-progress__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brand-700);
}

/* --- Steps -------------------------------------------------------------- */

.form-step {
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}

.form-step__legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-block-end: var(--sp-2);
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: var(--heading);
  text-wrap: balance;
}

.form-step__intro {
  margin: 0 0 var(--sp-5);
  color: var(--text-muted);
  max-width: 58ch;
  text-wrap: pretty;
}

/* --- Field -------------------------------------------------------------- */

.field { margin-block-end: var(--sp-5); }
.field:last-child { margin-block-end: 0; }

.field__label {
  display: block;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-block-end: 0.375rem;
  color: var(--text);
}

.field__req,
.field__optional {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-inline-start: 0.5rem;
  white-space: nowrap;
}

.field__req { color: var(--accent-600); }
.field__optional { color: var(--text-muted); font-weight: 500; }

.field__hint {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
  max-width: 60ch;
}

.input,
.select,
.textarea {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  font-family: var(--font-sans);
  font-size: 1rem; /* never below 16px: prevents iOS focus zoom */
  line-height: 1.45;
  color: var(--ink-900);
  background: var(--paper);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  appearance: none;
}

.input::placeholder,
.textarea::placeholder { color: var(--body-700); opacity: .7; }

.input:hover,
.select:hover,
.textarea:hover { border-color: var(--brand-700); }

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  border-color: var(--field-focus);
  outline: 2px solid var(--field-focus);
  outline-offset: 1px;
}

.textarea { min-height: 8.5rem; resize: vertical; }

.input[type="number"] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.input:disabled,
.select:disabled,
.textarea:disabled { background: var(--ground-50); color: var(--body-700); opacity: .7; cursor: not-allowed; }

/* Select caret drawn in CSS. No image, no gradient. */
.select-wrap { position: relative; }

.select-wrap::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.375rem;
  border-right: 2px solid var(--body-700);
  border-bottom: 2px solid var(--body-700);
  transform: rotate(45deg);
  pointer-events: none;
}

.select { padding-right: 2.5rem; }

/* Invalid state. Border plus a text message, never colour alone. */
.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--field-invalid);
  border-width: 2px;
  padding: 0.5625rem 0.6875rem;
}

.input[aria-invalid="true"]:focus-visible,
.select[aria-invalid="true"]:focus-visible,
.textarea[aria-invalid="true"]:focus-visible {
  outline-color: var(--field-invalid);
}

.field__error {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-block-start: 0.5rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.45;
  color: var(--field-invalid);
}

.field__error::before {
  content: "!";
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  margin-block-start: 0.05rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1;
}

.field--valid .input,
.field--valid .select,
.field--valid .textarea { border-color: var(--field-valid); }

.charcount {
  display: block;
  margin-block-start: 0.375rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  color: var(--text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.charcount.is-over { color: var(--field-invalid); font-weight: 700; }

/* --- Checkbox and radio groups ------------------------------------------ */

.choice-group {
  border: 0;
  margin: 0 0 var(--sp-5);
  padding: 0;
  min-inline-size: 0;
}

.choice-group__legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-block-end: 0.5rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
}

.choice-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 40rem) {
  .choice-list--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.choice {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  min-height: 2.75rem;
  padding: 0.6875rem 0.875rem;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.choice:hover { border-color: var(--body-700); }

.choice input[type="checkbox"],
.choice input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.125rem 0 0;
  accent-color: var(--brand-700);
  cursor: pointer;
  flex-shrink: 0;
}

.choice:has(input:checked) {
  border-color: var(--brand-700);
  box-shadow: inset 0 0 0 1px var(--brand-700);
  background: var(--ground-50);
}

.choice:has(input:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.choice__text { line-height: 1.45; }
.choice__note { display: block; font-size: var(--fs-sm); color: var(--text-muted); margin-block-start: 0.125rem; }

.choice-group[aria-invalid="true"] .choice { border-color: var(--field-invalid); }

/* --- Conditional field wrapper ------------------------------------------ */

.conditional {
  margin-block: var(--sp-4);
  padding-inline-start: var(--sp-4);
  border-inline-start: 2px solid var(--line-2);
}

.conditional__label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--sp-3);
}

/* --- Error summary. Never animates. Always receives focus. -------------- */

.error-summary {
  border: 2px solid var(--field-invalid);
  border-radius: var(--radius-md);
  background: var(--paper);
  padding: 1rem 1.125rem 1.125rem;
  margin-block-end: var(--sp-5);
}

.error-summary:focus {
  outline: 2px solid var(--field-invalid);
  outline-offset: 2px;
}

.error-summary__title {
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--field-invalid);
  margin: 0 0 0.5rem;
}

.error-summary__intro {
  margin: 0 0 0.75rem;
  font-size: var(--fs-sm);
  color: var(--body-700);
}

.error-summary__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.error-summary__item + .error-summary__item { border-top: 1px solid var(--line); }

.error-summary__link {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding-block: 0.375rem;
  color: var(--field-invalid);
  font-weight: 700;
  text-decoration: underline;
}

.error-summary__link:hover { color: var(--field-invalid); }

/* --- Step navigation ---------------------------------------------------- */

.form-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-block-start: var(--sp-6);
  padding-block-start: var(--sp-5);
  border-top: 1px solid var(--rule);
}

.form-nav__next { margin-inline-start: auto; }

@media (max-width: 29.999rem) {
  .form-nav { flex-direction: column-reverse; align-items: stretch; }
  .form-nav__next { margin-inline-start: 0; }
  .form-nav .btn { width: 100%; }
}

/* --- Honeypot. Hidden visually, NOT with display:none. ------------------ */

.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* --- Live region, draft notice, success --------------------------------- */

.form-status {
  display: block;
  min-height: 1.5rem;
  margin-block-start: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  color: var(--text-muted);
  line-height: 1.5;
}

.form-status--busy { color: var(--brand-700); }
.form-status--error { color: var(--field-invalid); font-weight: 700; }

.draft-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  justify-content: space-between;
  background: var(--tint);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  padding: 0.875rem 1rem;
  margin-block-end: var(--sp-5);
  color: var(--ink-900);
}

.draft-notice__text { margin: 0; font-size: var(--fs-base); }

.draft-notice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}

.draft-notice .btn--ghost { color: var(--brand-700); }

.form-success {
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
  max-width: 42rem;
}

.form-success__label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-600);
  margin: 0 0 var(--sp-3);
}

.form-success__title {
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 0 0 var(--sp-3);
}

.form-success__body { margin: 0 0 var(--sp-5); color: var(--text); text-wrap: pretty; }

.form-success__next {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  counter-reset: nextstep;
}

.form-success__next li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.75rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--line);
  counter-increment: nextstep;
}

.form-success__next li::before {
  content: counter(nextstep, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent-600);
  font-variant-numeric: tabular-nums;
}

.form-note {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: 60ch;
  text-wrap: pretty;
}


/* ==========================================================================
   11  FOOTER, COOKIE BANNER, MOBILE APPLY BAR
   ========================================================================== */

.site-footer {
  background: var(--ink-900);
  color: var(--muted-300);
  --text: var(--muted-300);
  --text-muted: var(--muted-300);
  --heading: var(--paper);
  --rule: var(--line-dark);
  --link: var(--accent-500);
  --link-hover: var(--accent-500);
  --focus-ring: var(--accent-500);
  padding-block: var(--band-y-tight) 0;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
}

@media (min-width: 40rem) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .site-footer__grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--sp-7); }
}

.footer-brand { display: grid;
  grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-content: start; }

.footer-brand__blurb {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--muted-300);
  max-width: 34ch;
  text-wrap: pretty;
}

.footer-heading {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-500);
  margin: 0 0 var(--sp-3);
}

.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--muted-300);
  font-size: var(--fs-base);
  text-decoration: none;
}

.footer-link:hover { color: var(--paper); text-decoration: underline; }

.footer-nap {
  font-style: normal;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem;
  font-size: var(--fs-base);
  color: var(--muted-300);
}

.footer-nap a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  width: fit-content;
  max-width: 100%;
  color: var(--muted-300);
}
.footer-nap a:hover { color: var(--paper); }

.footer-nap__label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-300);
  opacity: .8;
}

.footer-legal {
  margin-block-start: var(--band-y-tight);
  border-top: 1px solid var(--line-dark);
  padding-block: var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
}

.footer-legal__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-5);
}

.footer-legal__copy {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  color: var(--muted-300);
}

.footer-legal__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-legal__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  color: var(--muted-300);
  text-decoration: none;
}

.footer-legal__links a:hover { color: var(--paper); text-decoration: underline; }

/* --- Sticky mobile Apply bar. Apply only. This site has no call bar. ---- */

.apply-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--paper);
  border-top: 1px solid var(--line-2);
  box-shadow: 0 -2px 10px rgba(30, 26, 33, .08);
  padding: 0.625rem var(--gutter) calc(0.625rem + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 63.999rem) {
  :root { --apply-bar-h: 4.25rem; }
  .apply-bar { display: block; }
}

.apply-bar .btn { width: 100%; }

/* --- Cookie banner. One sentence, one button. Never covers a CTA. ------- */

/* In the document flow, not fixed. A fixed bottom notice cannot satisfy "covers
   no CTA": measured across 21 pages x 8 viewports it covered a button on 26
   occasions, including two where a 52px button was 100% hidden, and it failed
   at desktop sizes as well as mobile. Raising the inset only changes which
   button is hidden. Static is the only mechanism that guarantees the gate, and
   it costs nothing here because this notice discloses that no tracking exists
   rather than gating anything. It renders as the last strip of the footer. */
.cookie-banner {
  background: var(--ink-900);
  color: var(--muted-300);
  border-top: 1px solid var(--line-dark);
  padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 64rem) {
  .cookie-banner { padding-block: var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); }
}

.cookie-banner__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.cookie-banner__text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  max-width: 62ch;
  color: var(--muted-300);
}

.cookie-banner__text a { color: var(--accent-500); }

.cookie-banner .btn--primary {
  background: var(--accent-500);
  border-color: var(--accent-500);
  color: var(--ink-900);
  flex-shrink: 0;
}

.cookie-banner :focus-visible { outline-color: var(--accent-500); }


/* ==========================================================================
   12  UTILITIES
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.measure { max-width: var(--measure); }
.measure--short { max-width: 46ch; }

.u-nowrap { white-space: nowrap; }
.u-center { text-align: center; }
.u-mt-0 { margin-block-start: 0 !important; }
.u-mb-0 { margin-block-end: 0 !important; }
.u-mt-4 { margin-block-start: var(--sp-4); }
.u-mt-6 { margin-block-start: var(--sp-6); }
.u-mt-7 { margin-block-start: var(--sp-7); }
.u-full { width: 100%; }

/* Text-only scroll container for anything that cannot reflow. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }


/* ==========================================================================
   13  INTERACTIVE STATE TRANSITIONS
   The only transitions in this file. Colour, border and background only, on
   the interactive set. Everything above declares its rest and :hover /
   :focus-visible states as hard values; this softens the crossing between
   them so nothing snaps.

   Rules:
   - Fast token only. At motion dial 3 this is a softening, not an animation.
   - Never `transform`, `opacity`, or any layout property. Transform and
     opacity belong to css/motion.css and must not be doubled up here.
   - `outline` is deliberately absent. Focus rings appear instantly.
   - Wrapped in no-preference, so this file contributes no transition at all
     under reduced motion. Section 14 remains the belt-and-braces clamp.

   Known limitation: js/motion.js stamps .sector-card with data-reveal, and
   `html.has-motion [data-reveal]` in motion.css is both more specific and
   loaded second, so it owns that element's transition-property. The card
   therefore keeps its colour transition only when the motion layer is
   inert (scripting off). Raising specificity here would win the cascade and
   destroy the card's rise-in reveal, which is the worse trade. The fix
   belongs in motion.css, not here.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .btn,
  .nav__link,
  .nav-toggle,
  .nav-drawer__link,
  .anchor-nav__link,
  .breadcrumb__item a,
  .link-cue,
  .sector-card,
  .work-item__name a,
  .choice,
  .footer-link,
  .footer-nap a,
  .footer-legal__links a,
  .input,
  .select,
  .textarea {
    transition:
      color var(--motion-duration-fast) var(--motion-ease),
      border-color var(--motion-duration-fast) var(--motion-ease),
      background-color var(--motion-duration-fast) var(--motion-ease);
  }
}


/* ==========================================================================
   14  REDUCED MOTION AND PRINT
   The motion layer lives in a separate file owned by the craft lead.
   This is the safety net, not the motion system.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header,
  .nav-drawer,
  .apply-bar,
  .cookie-banner,
  .skip-link,
  .anchor-nav,
  .hero__media { display: none !important; }

  body { background: #fff; color: #000; padding-bottom: 0; font-size: 11pt; }
  .band { padding-block: 1rem; background: #fff !important; color: #000 !important; }

  /* Without its photograph the hero prints as paper, so the light-text
     aliases must go back to ink. */
  .hero--media { background: #fff !important; }
  .hero--media .hero__copy,
  .hero--media .hero__copy .hero__lead,
  .hero--media .hero__meta { color: #000 !important; }
  .hero--media .hero__copy .btn--secondary { color: #000 !important; border-color: #000 !important; }
  .card, .terms, .plain-summary { box-shadow: none; border-color: #999; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .faq__item > .faq__a { display: block !important; }
}