/* ==========================================================================
   Community Capital Framework : site.css
   Single shared stylesheet. Light theme only. No dark backgrounds.
   Accent: #2868B2 Meridian Blue. Neutrals: white and warm greys.
   ========================================================================== */

/* ---- Design tokens ------------------------------------------------------- */
:root {
  /* Accent */
  --ma-blue: #2868B2;
  --ma-blue-dark: #1f5292;
  --ma-blue-light: #3a7ac8;   /* hover on the image-hero primary button (D-067) */
  --ma-blue-tint: #eef4fb;
  --ma-blue-rule: #d9e6f5;    /* accent-band hairline border (D-067) */

  /* Traffic-light signal tokens (D-023, D-033). One colour per teaser band, all
     dark enough to clear WCAG AA 4.5:1 as foreground text on the white teaser
     card: green 5.40:1, amber 5.93:1, orange 5.02:1, red 7.45:1 on #ffffff.
     The four-band signal (D-033) runs green -> amber -> orange -> red by rank;
     orange was added so four bands render four distinct signals. Amber and
     orange are deliberately dark because brighter tones fail 4.5:1 on white. */
  --signal-green: #167a3d;
  --signal-amber: #8a5a00;
  --signal-orange: #b4530a;
  --signal-red: #a3231f;
  --signal-red-tint: #fdf7f7;  /* error field / message background (D-055) */

  /* Neutrals: white and warm greys, near-black text */
  --paper: #ffffff;
  --paper-warm: #faf9f7;
  --grey-100: #f3f1ec;
  --grey-200: #e6e2da;
  --grey-300: #d4cfc5;
  --grey-500: #8b857a;
  --grey-700: #565049;
  --ink: #1f2227;
  --ink-soft: #3d424b;

  /* Type scale */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* System serif for the newspaper-clipping evidence tiles (D-004). No web font
     is loaded; this is a system stack held as a theme token so component CSS
     references a token rather than an inline font stack. */
  --font-serif: Georgia, "Times New Roman", Times, serif;
  --step-00: 0.875rem;   /* small print */
  --step-0: 1rem;        /* body */
  --step-05: 1.0625rem;  /* 17px; evidence-tile fact and heading (D-064) */
  --step-1: 1.1875rem;   /* lead / large */
  --step-2: 1.5rem;      /* h3 */
  --step-3: clamp(1.6rem, 1.25rem + 1.5vw, 2.15rem);  /* h2 */
  --step-4: clamp(2.1rem, 1.6rem + 2.2vw, 3rem);      /* h1 */

  /* One tracked-caps value site-wide (D-064): eyebrow, evidence byline, teaser
     theme and gate code all resolve from this token. */
  --tracking-caps: 0.08em;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Structure (D-060 layout system).
     The container is one content grid: a reading measure, a fixed gap and a
     named aside track absorb the width that used to be an unallocated residual.
     640 + 48 + 384 = 1072 = 1120 - 48. */
  --gutter:         1.5rem;   /* 24px */
  --measure:        40rem;    /* 640px  - body reading measure (was 70ch / 622.89px) */
  --track-aside:    24rem;    /* 384px  - the former unallocated 449px residual, now a track */
  --track-gap:      3rem;     /* 48px  */
  --measure-centred: 36rem;   /* 576px  - single shared measure for the 8 centred blocks (D-060 6a) */
  --container: 1120px;
  --radius: 6px;
  --shadow-card: 0 1px 2px rgba(31, 34, 39, 0.04), 0 8px 24px rgba(31, 34, 39, 0.06);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
}

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

a {
  color: var(--ma-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover {
  color: var(--ma-blue-dark);
}
/* The enquiry email is a long unbreakable token; let it wrap so it never forces
   horizontal overflow on a narrow screen (D-066). */
a[href^="mailto:"] {
  overflow-wrap: anywhere;
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---- Typography ---------------------------------------------------------- */
h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 var(--space-md);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); letter-spacing: -0.01em; }
h2 { font-size: var(--step-3); letter-spacing: -0.005em; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p {
  margin: 0 0 var(--space-md);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: var(--step-00);
  font-weight: 700;
  color: var(--ma-blue);
  margin: 0 0 var(--space-xs);
}

.lead {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-soft);
}

.small {
  font-size: var(--step-00);
  color: var(--grey-700);
}

/* Body prose sits on the container's main track (the reading measure), so it
   shares its left edge with every other block on the page (D-060). It carries no
   max-width or centring of its own: the main track is the measure. */
.prose {
  max-width: none;
}
.prose > * + * {
  margin-top: var(--space-md);
}
.prose h2 {
  margin-top: var(--space-xl);
}
.prose h3 {
  margin-top: var(--space-lg);
}
.prose ul,
.prose ol {
  padding-left: 1.25rem;
}
.prose li + li {
  margin-top: var(--space-xs);
}

/* ---- Layout helpers ------------------------------------------------------ */
/* One content grid (D-060). Named tracks: a gutter, the reading measure (main),
   a gap, an aside track, a gutter. Every block lands on the main track by
   default; .u-wide spans measure+gap+aside; .u-full spans gutter to gutter.
   The gutter columns provide the horizontal inset, so the container carries no
   padding. Content left edge resolves to 104px and the main right edge to 744px
   at 1280; wide/full right edge to 1176px. */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns:
    [full-start]         minmax(var(--gutter), 1fr)
    [main-start]         minmax(0, var(--measure))
    [main-end gap-start] var(--track-gap)
    [aside-start]        minmax(0, var(--track-aside))
    [aside-end]          minmax(var(--gutter), 1fr)
    [full-end];
}
.container > * { grid-column: main; }
.u-wide { grid-column: main-start / aside-end; }
.u-aside { grid-column: aside; }
.u-full { grid-column: full; }

/* Containers that run their own flex or grid layout (site header and footer, the
   media row and the contact layout) opt out of the measure tracks: they take a
   24px gutter inset via padding and place their own children. Without this they
   would either lose their inset (flex) or force every child onto the main track. */
.header-inner,
.footer-inner {
  padding-inline: var(--gutter);
}
.media-row > *,
.contact-layout > * {
  grid-column: auto;
}

.section {
  padding-block: var(--space-2xl);
}
/* A section straight after the hero would otherwise stack the hero's bottom
   padding onto its own, leaving an over-large gap. Every first-after-hero
   section (plain, alt or accent) takes the same reduced top padding so the four
   host pages land within 12px of each other (D-060 6b). */
.hero + .section,
.hero + .section-alt,
.hero + .section-accent {
  padding-top: var(--space-lg);
}

.section-alt {
  background: var(--paper-warm);
  border-block: 1px solid var(--grey-200);
}
.section-accent {
  background: var(--ma-blue-tint);
  border-block: 1px solid var(--ma-blue-rule);
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ma-blue);
  color: var(--paper);
  padding: 0.6rem 1rem;
  z-index: 100;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-primary {
  background: var(--ma-blue);
  color: var(--paper);
}
.btn-primary:hover {
  background: var(--ma-blue-dark);
  color: var(--paper);
}
.btn-secondary {
  background: transparent;
  color: var(--ma-blue);
  border-color: var(--ma-blue);
}
.btn-secondary:hover {
  background: var(--ma-blue-tint);
  color: var(--ma-blue-dark);
}
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* Inline "learn more" arrow link */
.arrow-link {
  font-weight: 600;
  text-decoration: none;
}
.arrow-link::after {
  content: " \2192";
  white-space: nowrap;
}
.arrow-link:hover {
  text-decoration: underline;
}

/* ---- Cards --------------------------------------------------------------- */
.card-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card {
  border: 0;
  border-top: 3px solid var(--ma-blue);
  border-radius: 0;
  padding: var(--space-md) 0 0;
  display: flex;
  flex-direction: column;
}
.card h3 {
  margin-top: 0;
  /* Reserve two lines so a one-line title does not raise its card's body copy
     above a two-line sibling's (D-051). */
  min-height: 2.36em;
}
.card > p {
  color: var(--ink-soft);
}
.card .card-link {
  margin-top: auto;
  padding-top: var(--space-sm);
}

/* ---- Pillars (borderless feature columns, e.g. credibility strip) -------- */
.pillars {
  display: grid;
  gap: var(--space-lg) var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
/* Four-pillar credibility strip (D-084). auto-fit would resolve to three columns
   across the ~1072px u-wide track and leave a 3+1 orphan, so the four-item strip
   uses explicit column steps that never pass through three: one column stacked,
   two columns (2x2) from 40rem, four columns (4x1) from 62rem. minmax(0,1fr)
   lets columns shrink rather than overflow. */
.pillars--four {
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .pillars--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .pillars--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pillar h3 {
  font-size: var(--step-1);
  margin-bottom: var(--space-xs);
  padding-top: var(--space-sm);
  border-top: 3px solid var(--ma-blue);
  /* Two-line reserve (text + rule + padding) so pillar bodies share a baseline
     across the row (D-051). */
  min-height: 3.75rem;
}
.pillar p {
  color: var(--ink-soft);
  margin: 0;
}

/* ---- Section intro (heading + optional standfirst) ----------------------- */
.section-head {
  margin-bottom: var(--space-xl);
}
.section-head p {
  margin-bottom: 0;
}

/* ---- CTA band ------------------------------------------------------------ */
.cta-band h2 {
  margin-bottom: var(--space-sm);
}

/* ---- Hero ---------------------------------------------------------------- */
.hero {
  padding-block: var(--space-3xl) var(--space-2xl);
}
@media (min-width: 768px) {
  .hero .lead {
    margin-top: 1.25rem;
  }
}

/* Image hero, home page only (the .hero--image selector appears on index.html
   and nowhere else).
   OWNER OVERRIDE of CLAUDE.md Rule 5 ("no dark backgrounds anywhere"), scoped
   to this one selector and cited from CCFW-Handback-001-Rev10 section 2.1.
   Every other hero, band, card, figure and footer on all six pages stays
   light; this override must not be cited as a precedent. The photograph sits
   under a 58 to 66 per cent dark overlay (62 per cent working value). Do not
   drop the overlay below 55 per cent: white body copy falls under WCAG AA over
   the brightest water in the frame. If the photograph is re-cropped or
   replaced, re-measure contrast rather than reusing the number.
   Component note: .hero--image .btn-secondary is deliberately a white label on
   a 75 per cent white border, the only non-blue secondary button on the site;
   a later pass must not "correct" it back to blue.
   h1 held to 24ch, lead to 50ch for measure.
   WP4 / DR-R10-02 owner ruling 26 July 2026, home hero only: headline,
   sub-headline and button group are centred on this page's hero. Body copy
   stays left-aligned everywhere, including elsewhere on this page; this
   centring is scoped to .hero--image and must not be read as a general rule. */
.hero--image {
  position: relative;
  overflow: hidden;
  padding-block: 5rem 4.5rem;
}
.hero--image .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero--image .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 44%;
}
.hero--image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(rgba(18, 24, 32, 0.58), rgba(18, 24, 32, 0.66));
}
.hero--image .hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
}
.hero--image .hero-content h1 {
  color: var(--paper);
  max-width: var(--measure-centred);
  margin-inline: auto;
}
.hero--image .hero-content .lead {
  color: rgba(255, 255, 255, 0.94);
  max-width: var(--measure-centred);
  margin-inline: auto;
  margin-top: 1.25rem;
}
.hero--image .hero-content .btn-group {
  justify-content: center;
}

/* The outlined action must be white on the photograph, not blue. */
.hero--image .btn-secondary {
  color: var(--paper);
  border-color: rgba(255, 255, 255, 0.75);
  background: transparent;
}
.hero--image .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--paper);
  border-color: var(--paper);
}
.hero--image .btn-primary { background: var(--ma-blue); }
.hero--image .btn-primary:hover { background: var(--ma-blue-light); }

@media (max-width: 767.98px) {
  .hero--image { padding-block: 2.75rem 2.5rem; }
  .hero--image .hero-content .btn-group { display: grid; gap: 0.75rem; }
  .hero--image .hero-content .btn-group .btn { text-align: center; }
}

/* Centred CTA bands, to break the single left rail (edit 12a, section 5.4).
   The band centres its heading and its buttons only. Body prose inside a band
   stays left-aligned, per the standing ruling that body copy is left everywhere
   and only the home hero is centred (WP4, 26 July 2026). The block is centred;
   the text is not. CC-006, 27 July 2026. */
.cta-band {
  max-width: var(--measure-centred);
  margin-inline: auto;
  text-align: center;
}
.cta-band p {
  text-align: left;
  max-width: var(--measure-centred);
  margin-inline: auto;
}
.cta-band .btn-group {
  justify-content: center;
}

/* Secondary text links beneath a primary action (D-093): plain underlined,
   body weight. Hero variant is white on the image hero and centres with the
   hero content; the closing-band variant centres under the button. */
.hero-alt-link {
  margin-top: var(--space-md);
}
.hero--image .hero-alt-link a {
  color: var(--paper);
  font-weight: 400;
  text-decoration: underline;
}
.cta-band .cta-alt-link {
  text-align: center;
  margin-top: var(--space-md);
}

/* ---- Media rows and image bands ------------------------------------------ */
.media-row {
  display: grid;
  grid-template-columns: 1fr;
  padding-inline: var(--gutter);
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 820px) {
  .media-row {
    grid-template-columns: 1fr 1fr;
  }
  .media-row--reverse .media-text {
    order: 2;
  }
}
.media-text {
  max-width: var(--measure);
}
.media-figure {
  margin: 0;
}
.media-figure img {
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  display: block;
}
.media-figure figcaption {
  margin-top: var(--space-sm);
  font-size: var(--step-00);
  color: var(--grey-700);
}

.band-image {
  margin: 0;
}
.band-image img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  object-position: center 45%;
  border: 0;
  border-radius: 0;
}
.hero + .section .band-image {
  margin-top: var(--space-md);
}
.band-image figcaption {
  margin-top: var(--space-sm);
  font-size: var(--step-00);
  color: var(--grey-700);
}

/* ---- Header / navigation ------------------------------------------------- */
.site-header {
  position: relative;
  background: var(--paper);
  border-bottom: 1px solid var(--grey-200);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 84px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}
/* D-031, route 2. The Didone wordmark's hairlines (32:1 stroke contrast) drop
   out of the raster at the header render size, so the brand is now the square
   mark paired with the firm name set in live type: site sans, 700, tracked
   caps. Every stem is a real glyph, legible at 1x at every width. The wordmark
   asset is kept for the OG image and the JSON-LD logo only. */
.brand-mark {
  height: 44px;
  width: auto;
  flex: 0 0 auto;
}
.brand-name {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.9375rem;
  line-height: 1.05;
  color: var(--ink);
  white-space: nowrap;
}
@media (max-width: 767.98px) {
  .brand-mark {
    height: 38px;
  }
  .brand-name {
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
  }
}
/* On the narrowest screens the mark alone is the brand: the firm name would
   otherwise crowd the mobile menu control. The name returns at 400px. */
@media (max-width: 399.98px) {
  .site-header .brand-name {
    display: none;
  }
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.4rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  background: var(--paper);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  padding: 0.5rem 0.9rem;
  color: var(--ink);
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 500;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.site-nav a:hover {
  color: var(--ma-blue);
}
.site-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--ma-blue);
}

/* Mobile navigation: collapses to an accessible menu once the inline nav no
   longer fits. Re-derived at D-092 (Rev07) for the restored six-item nav. The
   brief renamed the item "Case Library" -> "Evidence"; the owner reversed that
   in-session and kept "Case Library", so this is measured for that label.
   Measured against the served build (real rendered widths at 1280px):
     brand mark-plus-name lockup (full size)  253.63px
     six-item nav <ul> (28px inter-item gap)  593.94px   ("Case Library" item 88.70px)
     minimum brand-to-nav flex gap            24px
     header horizontal padding (24px x2)      48px
     -> minimum inline-fit viewport = 253.63 + 24 + 593.94 + 48 = 919.56px
   At 920px and above the six-item nav sits inline with the brand at full size
   and the design's 24px minimum gap; below it the brand mark starts to
   compress. The breakpoint is set to that measured requirement (was 894.98px
   in the interim "Evidence" build, and 802.98px for the five-item Rev06 nav). */
@media (max-width: 919.98px) {
  .nav-toggle {
    display: inline-flex;
  }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    background: var(--paper);
    border-bottom: 1px solid var(--grey-200);
    box-shadow: var(--shadow-card);
    z-index: 50;
  }
  .site-header.nav-open .site-nav {
    display: block;
  }
  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1.5rem 1rem;
  }
  .site-nav li + li {
    border-top: 1px solid var(--grey-100);
  }
  .site-nav a {
    display: block;
    padding: 0.85rem 0;
    border-bottom: none;
    border-left: 3px solid transparent;
    padding-left: 0.75rem;
    margin-left: -0.75rem;
  }
  .site-nav a[aria-current="page"] {
    border-bottom: none;
    border-left-color: var(--ma-blue);
  }
}

/* ---- Footer -------------------------------------------------------------- */
.site-footer {
  margin-top: 0;
  background: var(--grey-100);
  border-top: 2px solid var(--ink);
  padding-block: var(--space-xl) var(--space-lg);
  font-size: var(--step-00);
  color: var(--grey-700);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg) var(--space-3xl);
  justify-content: space-between;
  align-items: flex-start;
}
/* Brand lockup in the footer (D-031, route 2): mark plus firm name in live type. */
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-md);
  text-decoration: none;
}
.footer-brand .brand-mark {
  height: 34px;
}
.footer-brand .brand-name {
  font-size: 0.8125rem;
  color: var(--ink);
}
.site-footer a {
  color: var(--grey-700);
}
.site-footer a:hover {
  color: var(--ma-blue);
}
.footer-legal {
  margin: 0;
}
/* Entity identification sits directly beneath the offering line. */
.footer-legal + .footer-legal {
  margin-top: 0.5rem;
}
.footer-col p {
  margin: 0 0 0.35rem;
}
@media (max-width: 767.98px) {
  .section {
    padding-block: 2.5rem;
  }
  .hero {
    padding-block: 2.5rem 2rem;
  }
  .hero + .section:not(.section-alt):not(.section-accent) {
    padding-top: 0;
  }
  .section-head {
    margin-bottom: var(--space-lg);
  }
}

/* ---- Six-gate pathway component ------------------------------------------ */
/* Horizontal pathway on desktop; degrades to a vertical list below 700px. */
.gate-path {
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: 0;
  display: grid;
  border-top: 2px solid var(--grey-300);
  gap: var(--space-lg) var(--space-xl);
}
.gate {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: none;
  border: 0;
  border-radius: 0;
  border-top: 3px solid var(--ma-blue);
  margin-top: -2px;
  padding: 0.9rem 0 0;
}
.gate-code {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--ma-blue);
  font-weight: 700;
  font-size: var(--step-00);
  letter-spacing: var(--tracking-caps);
  line-height: 1;
  flex: 0 0 auto;
}
.gate-stage {
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.25;
  /* Reserve two lines so the gate question below shares a baseline across the
     six-gate strip (D-051). */
  min-height: 2.5em;
}
.gate-q {
  font-size: 0.9375rem;
  color: var(--grey-700);
  margin: 0;
}
.gate-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.pathway-note {
  max-width: var(--measure);
  color: var(--grey-700);
  font-size: var(--step-00);
}

@media (min-width: 700px) and (max-width: 1099.98px) {
  .gate-path {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1100px) {
  .gate-path {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-lg);
  }
}
@media (max-width: 699.98px) {
  .gate-path {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    border-top: 0;
  }
  .gate {
    flex-direction: row;
    align-items: baseline;
    gap: 0.9rem;
    border-top: 1px solid var(--grey-200);
    padding-top: 0.9rem;
    margin-top: 0;
  }
  .gate:first-child {
    border-top: 0;
    padding-top: 0;
  }
  .gate-code {
    flex: 0 0 2.25rem;
    padding-top: 0.15rem;
  }
}

/* ---- Figures ------------------------------------------------------------- */
/* margin-inline:0 suppresses the UA figure margin so the figure fills the main
   track (D-060 removed the former max-width and margin-inline:auto). */
.figure {
  margin: var(--space-lg) 0 0;
}
.figure img {
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  background: var(--paper);
}
.figure figcaption {
  margin-top: var(--space-sm);
  font-size: var(--step-00);
  color: var(--grey-700);
  max-width: 60ch;
}

/* Press-headlines evidence block removed at D-080 (Rev06): the two named-council
   press clippings and their scoped .press-figure / .press-quote rules were
   deleted. Named councils in a headline cannot be de-identified. Do not
   reinstate a press wall in any form. */

/* ---- CRI teaser ---------------------------------------------------------- */
/* Inherits the container main track (D-060); no max-width of its own. */
.teaser-card {
  background: var(--paper);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
}
.teaser-step {
  font-size: var(--step-00);
  font-weight: 600;
  color: var(--grey-700);
  margin: 0 0 0.5rem;
}
.teaser-bar {
  height: 6px;
  background: var(--grey-200);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: var(--space-lg);
}
.teaser-bar > span {
  display: block;
  height: 100%;
  background: var(--ma-blue);
  transition: width 0.2s ease;
}
.teaser-fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-lg);
}
.teaser-legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: var(--space-md);
}
.teaser-legend:focus-visible {
  outline: 3px solid var(--ma-blue);
  outline-offset: 4px;
}
.teaser-theme {
  display: block;
  font-size: var(--step-00);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-weight: 700;
  color: var(--ma-blue);
  margin-bottom: 0.35rem;
}
.teaser-qtext {
  display: block;
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.teaser-options {
  display: grid;
  gap: 0.6rem;
}
.teaser-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  background: var(--paper);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.teaser-option:hover {
  border-color: var(--ma-blue);
  background: var(--ma-blue-tint);
}
.teaser-option input {
  margin: 0;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--ma-blue);
  flex: 0 0 auto;
}
.teaser-option label {
  flex: 1;
  cursor: pointer;
  font-weight: 500;
}
.teaser-option:has(input:checked) {
  border-color: var(--ma-blue);
  background: var(--ma-blue-tint);
  box-shadow: inset 0 0 0 1px var(--ma-blue);
}
.teaser-nav {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.teaser-error {
  color: var(--signal-red);
  font-weight: 600;
  margin: var(--space-sm) 0 0;
}
.teaser-score {
  font-size: clamp(2.5rem, 2rem + 2vw, 3.25rem);
  font-weight: 700;
  color: var(--ma-blue-dark);
  line-height: 1;
  margin: 0 0 0.25rem;
}
.teaser-band {
  margin: 0 0 var(--space-sm);
}
.teaser-disclaimer {
  margin: var(--space-lg) 0 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--grey-200);
}

/* ---- Teaser result traffic light (D-023) --------------------------------- */
/* Colour maps to the four content-pack bands via three signal tokens. Colour is
   never the sole signal (WCAG 1.4.1): the lit lamp's position reads in greyscale
   and the band name carries the meaning in text. Amber is a dark ochre so the
   band-name text clears 4.5:1 on the white card. */
.teaser-result-head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}
.teaser-result-meta .teaser-score {
  margin: 0;
}
.teaser-result-meta .teaser-band {
  margin: 0;
}

/* The left accent bar, the band name and the score all take the band's signal
   colour. D-034: the score is the largest element on the card, so it must carry
   the signal rather than a neutral blue. */
.teaser-result {
  border-left-width: 5px;
}
.teaser-result--green  { border-left-color: var(--signal-green); }
.teaser-result--amber  { border-left-color: var(--signal-amber); }
.teaser-result--orange { border-left-color: var(--signal-orange); }
.teaser-result--red    { border-left-color: var(--signal-red); }
.teaser-result--green  .teaser-band { color: var(--signal-green); }
.teaser-result--amber  .teaser-band { color: var(--signal-amber); }
.teaser-result--orange .teaser-band { color: var(--signal-orange); }
.teaser-result--red    .teaser-band { color: var(--signal-red); }
.teaser-result--green  .teaser-score { color: var(--signal-green); }
.teaser-result--amber  .teaser-score { color: var(--signal-amber); }
.teaser-result--orange .teaser-score { color: var(--signal-orange); }
.teaser-result--red    .teaser-score { color: var(--signal-red); }

/* The traffic light: four lamps, one per band, only the level's lamp lit. The
   lamps run red, orange, amber, green top to bottom (D-032, Australian signal
   order: red at the top). The lit position is the non-colour signal and reads
   in greyscale. Light housing only, no dark UI (CLAUDE Rule 5). */
.teaser-light {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  border: 1px solid var(--grey-300);
  border-radius: 8px;
  background: var(--grey-100);
  flex: 0 0 auto;
}
.teaser-lamp {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--grey-300);
  background: var(--paper);
}
.teaser-result--green .teaser-lamp--green {
  background: var(--signal-green);
  border-color: var(--signal-green);
}
.teaser-result--amber .teaser-lamp--amber {
  background: var(--signal-amber);
  border-color: var(--signal-amber);
}
.teaser-result--orange .teaser-lamp--orange {
  background: var(--signal-orange);
  border-color: var(--signal-orange);
}
.teaser-result--red .teaser-lamp--red {
  background: var(--signal-red);
  border-color: var(--signal-red);
}

/* ---- Contact layout and identity block ----------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-inline: var(--gutter);
  gap: var(--space-xl);
  align-items: start;
}
@media (min-width: 860px) {
  .contact-layout.has-form {
    grid-template-columns: 1.4fr 1fr;
  }
}
@media (max-width: 859.98px) {
  /* D-097: in the single-column stacked state, put the identity (phone and
     email) above the form. Two-column desktop layout (>=860px) is unchanged.
     Scoped to the contact-layout's own stacking breakpoint (860px) so there is
     no zone where the form sits above the identity while stacked. */
  .contact-layout.has-form .identity { order: -1; }
}
.identity {
  border: 0;
  border-top: 3px solid var(--ma-blue);
  border-radius: 0;
  padding: var(--space-md) 0 0;
}
.identity-name {
  font-weight: 700;
  color: var(--ink);
  font-size: var(--step-1);
  margin: 0 0 0.35rem;
}
.identity p {
  margin: 0 0 0.4rem;
}
.identity p:last-child {
  margin-bottom: 0;
}
.identity .identity-note {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--grey-200);
  color: var(--grey-700);
}

/* ---- Enquiry form -------------------------------------------------------- */
.form-field {
  margin-bottom: 1.1rem;
}
.form-field label {
  display: block;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
}
.form-field textarea {
  /* D-098: ~4 visible rows (6.4rem content at 1rem/1.6 line-height + 1.4rem
     top+bottom padding), down from the former 9rem. */
  min-height: 7.8rem;
  resize: vertical;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--grey-500);
}
.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-color: var(--signal-red);
  background: var(--signal-red-tint);
}
.field-error {
  color: var(--signal-red);
  font-size: var(--step-00);
  font-weight: 600;
  margin: 0.35rem 0 0;
}
.form-optional {
  font-weight: 500;
  color: var(--grey-700);
}
.form-actions {
  margin-top: var(--space-lg);
}
.form-note {
  margin: var(--space-sm) 0 0;
}

/* Honeypot: removed from the visual and accessibility layers, never display:none
   (some bots skip hidden fields, and the field must remain submittable). */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin-top: var(--space-md);
}
.form-message {
  border-radius: var(--radius);
  padding: var(--space-md) var(--space-lg);
  margin: 0;
}
.form-message-success {
  background: var(--ma-blue-tint);
  border-left: 4px solid var(--ma-blue);
  color: var(--ink);
}
.form-message-error {
  background: var(--signal-red-tint);
  border-left: 4px solid var(--signal-red);
  color: var(--ink);
}

/* ---- Home evidence section (exception E-1) ------------------------------- */
/* One centred element only: the section title. The pulled display line was
   removed at D-079 (Rev06), narrowing E-1 to this single H2. All body prose in
   this section stays left aligned. This centres the BLOCK and the text, and is
   the only body centring on the site outside the home hero and the .cta-band
   headings. */
.problem-title {
  text-align: center;
  max-width: var(--measure-centred);
  margin-inline: auto;
}

/* ---- WA evidence strip: newspaper clippings (D-003, D-004, DEC-2, DEC-5) -- */
/* Scoped under .ccf-ev. The grey gate chips are removed and the tiles are set as
   newspaper cuttings: serif fact text over a hairline cut rule, with a small-caps
   byline crediting council, source and the gate that would have caught the case.
   The gate stays as a coloured byline element so the causal CCF link survives the
   chip removal. All colours resolve from theme tokens; the serif is the theme
   --font-serif token (system fonts, no web font loaded). No card chrome. */

.ccf-ev {
  margin: var(--space-xl) 0;
}

.ccf-ev__heading {
  font-size: var(--step-05);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 var(--space-lg);
  padding-top: var(--space-sm);
  border-top: 3px solid var(--ma-blue);
}

/* Cuttings, not cards: whitespace-separated columns, no box, no fill. */
.ccf-ev__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-lg) var(--space-xl);
}

@media (min-width: 46rem) {
  .ccf-ev__list { grid-template-columns: 1fr 1fr; }
}

.ccf-ev__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--ink);
}

/* Serif fact text, the body of the cutting. */
.ccf-ev__fact {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-05);
  line-height: 1.5;
  color: var(--ink);
}

/* Byline: small caps, micro size, tracked. Council, source and gate on one line. */
.ccf-ev__attr {
  margin: auto 0 0;
  font-size: var(--step-00);
  font-variant: small-caps;
  letter-spacing: var(--tracking-caps);
  line-height: 1.5;
  color: var(--grey-700);
}

/* The gate is the CCF argument, not a decorative credit: kept as a coloured
   byline element so the causal link is not lost with the chip (D-003, DEC-2).
   D-054: it sits on its own line below the source byline and does not split
   mid-phrase. nowrap holds it on one line where the tile is wide enough; below
   26rem it wraps at word boundaries rather than overflowing. */
.ccf-ev__caught {
  display: block;
  margin-top: 0.35rem;
  white-space: nowrap;
  font-weight: 700;
  color: var(--ma-blue-dark);
}

.ccf-ev__note {
  margin: 1rem 0 0;
  font-size: var(--step-00);
  line-height: 1.45;
  color: var(--grey-700);
}

@media (max-width: 26rem) {
  .ccf-ev__fact { font-size: 1rem; }
  /* Let the gate wrap at word boundaries on the narrowest screens rather than
     overflow the tile (D-054, no horizontal overflow at 320). */
  .ccf-ev__caught { white-space: normal; }
}

/* Principal portrait. Append to the single site stylesheet.
   Scoped under .ccf-principal. No global rules, no element selectors outside the
   subtree. Colour values reference the site's existing custom properties with
   literal fallbacks so the component renders correctly in isolation. */

.ccf-principal {
  display: grid;
  gap: 1.5rem;
  align-items: start;
  margin: 1.5rem 0 0;
}

@media (min-width: 52rem) {
  .ccf-principal {
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 2.25rem;
  }
}

.ccf-principal__figure {
  margin: 0;
  max-width: 340px;
}

.ccf-principal__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-top: 3px solid var(--ma-blue, #2868B2);
}

/* The bio keeps the page's normal text treatment. The column is capped at the
   reading measure so the bio does not exceed the site measure (D-052). */
.ccf-principal__body { max-width: var(--measure); }
.ccf-principal__body > :first-child { margin-top: 0; }

@media (max-width: 51.99rem) {
  /* Stacked state: cap and centre the portrait so it does not sit orphaned to
     the left with empty ground beside it (D-052). */
  .ccf-principal__figure { max-width: 260px; margin-inline: auto; }
}

/* The .ccf-stat "Library statistics" panel was removed from index.html (D-005).
   Its styling lived only here and was consumed only by that panel; the case
   library carries its own independently scoped .ccf-stat with its own inline
   styles and --ccf-* tokens and does not load this stylesheet, so the block is
   removed rather than retained. */

/* WO-003 follow-up, home image hero on phones only. The D-085 headline is the
   longest the page has carried and wraps to seven lines at 390px, pushing the
   "Take the check" primary button below the visible fold on first paint. Every
   scan from the roadtrip flyer is a phone, and the hero's only job is to land
   that button. Phone-only (<=480px): step the headline down and tighten the
   hero so the button clears the fold. Locked copy, the desktop type scale and
   the overlay are unchanged. Placed last so it wins on source order over the
   general <=767.98px hero padding. */
@media (max-width: 480px) {
  .hero--image { padding-block: 1.75rem 2rem; }
  .hero--image .hero-content h1 {
    font-size: 1.8rem;
    line-height: 1.12;
  }
  .hero--image .hero-content .lead { margin-top: 0.85rem; }
}