/* ============================================================
   Maraville Group, design tokens & base stylesheet
   Operator · Enduring · Confident
   Palette and type: brand system v1.1
     Deep Navy #0B2545 · Charcoal #1F2933 · Warm Off-White #F5F3EE
     Deep Green #1B5E20 · Light Gray #D1D5DB
     Inter, single family, weights 300-700
   Supersedes canonical context v1.0 §10.2 / §10.3.

   One family, deliberately. Every role on this site runs from 60px display
   down to 11px tracked uppercase labels and dense tables of figures. Inter
   is the one face that is genuinely good at all of them, which means
   uniformity costs nothing here. Hierarchy is carried by weight and size.
   ============================================================ */

:root {
  /* ── Brand primitives, the only literal colors in this file ──
     Maraville Group palette v1.1. Any other value below is a
     color-mix() derivation of these five, so the palette is provable. */
  --brand-navy:      #0B2545;   /* Deep Navy      */
  --brand-charcoal:  #1F2933;   /* Charcoal       */
  --brand-offwhite:  #F5F3EE;   /* Warm Off-White */
  --brand-green:     #1B5E20;   /* Deep Green     */
  --brand-gray:      #D1D5DB;   /* Light Gray     */

  /* ── Semantic roles ──────────────────────────────────────── */
  /* Navy carries institutional trust: headlines, links, dark grounds. */
  --navy:        var(--brand-navy);
  --ground:      var(--brand-navy);          /* full-bleed dark fields, footer */
  --on-ground:   var(--brand-offwhite);      /* text on those fields  13.9:1 */

  /* Paper, not screen. Off-white page with a cool hairline structure. */
  --paper:       var(--brand-offwhite);
  /* Band derived from Charcoal, not Light Gray: mixing toward the cool grey
     stripped the warmth out of a surface the brand calls Warm Off-White. */
  --paper-band:  #EAE9E5;
  --hairline:    var(--brand-gray);

  /* Charcoal is the reading color; muted is charcoal let down onto paper. */
  --ink:         var(--brand-charcoal);                                        /* 13.3:1 */
  --ink-muted:   #5B6267;                                                      /* 5.6:1 */

  /* Deep green is the micro-accent, the seal, not the envelope.
     Section rules, active nav, hover underline, focus ring, eyebrows.
     On navy it is lifted with off-white; #1B5E20 on navy is unreadable. */
  --accent:      var(--brand-green);                                    /* 7.1:1 on paper */
  --accent-lift: #7DA17D;                                               /* 5.3:1 on navy */

  /* Editorial underline. Tokenised so the derivation and its pre-color-mix
     value live in one place rather than inline on four selectors. */
  --underline:      #9CA5AE;
  --underline-soft: #AAB1B8;

  /* ── Type ────────────────────────────────────────────────── */
  /* One family. --font-body is the only type token; there is no display
     face to fall out of step with it. */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Material */
  --radius: 2px;
  --rule:   1px solid var(--hairline);
  --ease:   cubic-bezier(0.16, 1, 0.3, 1);
  /* Measure */
  --wrap: 72rem;
  --prose: 40rem;
  color-scheme: light;
}

/* ── Derivations ──────────────────────────────────────────────
   The hexes above are the pre-color-mix values, kept as the declared
   defaults because a custom property is parsed as an arbitrary token
   stream: a duplicate declaration is never validated at parse time, so
   "plain value first, color-mix second" is dead code for tokens. @supports
   is the only mechanism that actually branches. Each derivation below is
   numerically equal to the hex it replaces, and audit.py proves it. */

@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --paper-band:     color-mix(in srgb, var(--brand-offwhite) 95%, var(--brand-charcoal));
    --ink-muted:      color-mix(in srgb, var(--brand-charcoal) 72%, var(--brand-offwhite));
    --accent-lift:    color-mix(in srgb, var(--brand-green) 55%, var(--brand-offwhite));
    --underline:      color-mix(in srgb, var(--brand-navy) 38%, var(--brand-offwhite));
    --underline-soft: color-mix(in srgb, var(--brand-navy) 32%, var(--brand-offwhite));
  }
}

/* ── Reset ───────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.0625rem;      /* 17px */
  line-height: 1.65;
  font-optical-sizing: auto;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1;
  transition: background-color .5s var(--ease), color .5s var(--ease);
}

img, svg { display: block; max-width: 100%; }
hr { border: 0; margin: 0; }

/* ── Typography ──────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.125rem, 1rem + 3.4vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.024em;
}

h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem);
  line-height: 1.16;
  letter-spacing: -0.023em;
}

h3 {
  font-size: clamp(1.25rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.28;
  letter-spacing: -0.016em;
}

/* Subsection heading, body face, per type scale */
h4, .subhead {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.45;
  letter-spacing: -0.006em;
  margin: 0;
}

p { margin: 0 0 1.35em; }
p:last-child { margin-bottom: 0; }

.lead {
  font-weight: 400;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.3125rem);
  line-height: 1.6;
  color: var(--ink);
  max-width: 38rem;
}

strong, b { font-weight: 500; color: var(--ink); }

a { color: var(--navy); text-decoration: none; }

/* Editorial underline, hairline, offset, thickens on hover */
a.link, .prose a, .footer-note a {
  color: var(--navy);
  border-bottom: 1px solid var(--underline);
  padding-bottom: 1px;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
a.link:hover, .prose a:hover, .footer-note a:hover {
  border-bottom-color: var(--accent);
}

/* Eyebrow label, uppercase, tracked, in the green micro-accent */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;         /* 11px */
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.fig {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: 0;
}

.caption {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

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

/* ── Layout ──────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}

.split > *, .duo > *, .lane > *, .step > *, .conviction > * { min-width: 0; }

.prose { max-width: var(--prose); }
.prose > * + * { margin-top: 1.35em; }

section { position: relative; }

/* Deliberately varied section padding, never uniform */
.sec       { padding-block: clamp(4rem, 8vw, 8rem); }
.sec-tight { padding-block: clamp(3rem, 5vw, 5rem); }
.sec-tall  { padding-block: clamp(5rem, 10vw, 10.5rem); }

.band  { background: var(--paper-band); }

.hairline-top { border-top: var(--rule); }

/* A paper-to-paper divider immediately below a navy field has nothing to
   divide: the navy edge is already the boundary. */
.navy-field + .hairline-top { border-top: 0; }

/* A paper-to-paper divider immediately below a navy field has nothing to
   divide: the navy edge is already the boundary. */
.navy-field + .hairline-top { border-top: 0; }

/* Asymmetric split, sticky label column + content.
   Column metrics live in custom properties so wide blocks nested in the
   content column can reclaim the label gutter exactly (see .breakout). */
.split {
  --label-col: 11.5rem;
  --split-gap: clamp(2rem, 4vw, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, var(--label-col)) minmax(0, 1fr);
  gap: var(--split-gap);
  align-items: start;
}
.split-wide { --label-col: 13.5rem; }
.split > .col-label { padding-top: .2rem; }

/* Opt-in sticky label. Only safe in sections with no breakout blocks 
   an index the reader can keep reaching for. */
@media (min-width: 861px) {
  .split > .col-label.col-sticky { position: sticky; top: 6.5rem; }
}

/* Wide information blocks reclaim the label gutter rather than being
   squeezed into the prose column. Tables, lanes, and step lists want room. */
@media (min-width: 861px) {
  .split > *:last-child > .lanes,
  .split > *:last-child > .table-wrap,
  .split > *:last-child > .duo,
  .split > *:last-child > .steps {
    margin-left: calc(-1 * (var(--label-col) + var(--split-gap)));
  }
}

@media (max-width: 860px) {
  .split, .split-wide { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .split > .col-label { padding-top: 0; }
}

/* Two-column prose row */
.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
}
@media (max-width: 780px) { .duo { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } }

/* ── Signature detail: 48px Deep Green rule, once per section ── */

.rule-accent {
  width: 48px;
  height: 2px;
  background: var(--accent);
  margin: 0 0 1.75rem;
  border: 0;
}

.rule-hair {
  height: 1px;
  background: var(--hairline);
  border: 0;
  margin: 0;
}

/* ── Header ──────────────────────────────────────────────── */

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: var(--on-ground);
  padding: .75rem 1.25rem; z-index: 100;
  font-size: .875rem;
}
.skip:focus { left: 0; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ground);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease), background-color .4s var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: color-mix(in srgb, var(--on-ground) 20%, transparent);
}

/* Navy masthead: the header and the hero form one dark block at the top of
   every page, and the header stays navy as it sticks over the paper below. */
.site-header .primary a { color: color-mix(in srgb, var(--on-ground) 68%, transparent); }
.site-header .primary a:hover,
.site-header .primary a[aria-current="page"] { color: var(--on-ground); }
.site-header .primary a[aria-current="page"]::after { background: var(--accent-lift); }
.site-header .lockup { color: var(--on-ground); }
.site-header .lockup-sub { color: color-mix(in srgb, var(--on-ground) 62%, transparent); }

.hero.navy-field .hero-meta {
  border-top-color: color-mix(in srgb, var(--on-ground) 20%, transparent);
  color: color-mix(in srgb, var(--on-ground) 70%, transparent);
}
.hero.navy-field .email-link {
  color: var(--on-ground);
  border-bottom-color: color-mix(in srgb, var(--on-ground) 42%, transparent);
}
.hero.navy-field .email-link:hover { border-bottom-color: var(--accent-lift); }

.site-header > .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 5rem;
}

/* Lockup, Keystone M + wordmark */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: .8125rem;
  color: var(--ink);
}

.lockup svg { width: 26px; height: 26px; flex: none; }

.lockup-text {
  display: inline-flex;
  align-items: baseline;
  gap: .3125rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1;
}
.lockup-name { font-weight: 600; }
.lockup-sub { font-weight: 400; color: var(--ink-muted); }

.primary {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
}
.primary a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .875rem;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  padding-block: .25rem;
  position: relative;
  transition: color .3s var(--ease);
}
.primary a:hover { color: var(--ink); }
.primary a[aria-current="page"] { color: var(--ink); }
.primary a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--accent);
}

@media (max-width: 700px) {
  .lockup-text { font-size: .875rem; letter-spacing: .11em; }
  .site-header > .wrap { min-height: 4.25rem; }
}

/* Phone: stack the lockup over a full-width nav row. Four surfaces fit
   without a hamburger, which suits a five-page site. */
@media (max-width: 620px) {
  .site-header > .wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: .625rem;
    min-height: 0;
    padding-block: .8125rem .6875rem;
  }
  .primary { width: 100%; justify-content: space-between; gap: .5rem; }
  .primary a { font-size: .8125rem; letter-spacing: .01em; }
}

/* ── Hero ────────────────────────────────────────────────── */

.hero {
  padding-top: clamp(3.5rem, 9vw, 8.5rem);
  padding-bottom: clamp(3rem, 7vw, 6.5rem);
}
.hero .eyebrow { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.hero h1 { max-width: 22ch; }
.hero .lead { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.75rem;
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  padding-top: 1.25rem;
  border-top: var(--rule);
  font-family: var(--font-body);
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ── Navy field, full bleed ─────────────────────────────── */

.navy-field {
  background: var(--ground);
  color: var(--on-ground);
}
.navy-field h1, .navy-field h2, .navy-field h3 { color: var(--on-ground); }
.navy-field h4, .navy-field .subhead, .navy-field strong { color: var(--on-ground); }
.navy-field .eyebrow { color: var(--accent-lift); }
.navy-field .muted, .navy-field .caption { color: color-mix(in srgb, var(--on-ground) 66%, transparent); }
.navy-field p { color: color-mix(in srgb, var(--on-ground) 88%, transparent); }
.navy-field .rule-hair,
.navy-field .lane-sig,
.navy-field .note-test { border-color: color-mix(in srgb, var(--on-ground) 22%, transparent); }
.navy-field .rule-hair { background: color-mix(in srgb, var(--on-ground) 20%, transparent); }

.navy-field a { color: var(--accent-lift); }
.navy-field .lockup { color: var(--on-ground); }
.navy-field .lockup-sub { color: color-mix(in srgb, var(--on-ground) 62%, transparent); }

/* ── Numbered lane blocks (Build / Buy / Back) ───────────── */

.lanes { border-top: var(--rule); }

.lane {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 18rem);
  gap: clamp(1.5rem, 3.5vw, 3.25rem);
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
  border-bottom: var(--rule);
  align-items: start;
}
.lane-num {
  font-family: var(--font-body);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums lining-nums;
  padding-top: .45rem;
}
.lane-body h3 { margin-bottom: .875rem; }
.lane-body p { color: var(--ink-muted); margin-bottom: 0; }
.lane-body p + p { margin-top: .875rem; }
.lane-aside {
  font-family: var(--font-body);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink);
  padding-top: .3rem;
}
.lane-sig {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--ink);
  border-top: var(--rule);
  padding-top: 1rem;
  max-width: 26ch;
}
@media (max-width: 900px) {
  .lane { grid-template-columns: 3rem minmax(0, 1fr); }
  .lane-aside { grid-column: 2; padding-top: 1.25rem; border-top: var(--rule); }
}

/* ── Convictions ─────────────────────────────────────────── */

.convictions { display: grid; gap: 0; border-top: var(--rule); }
.conviction {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: var(--rule);
}
.conviction .lane-num { padding-top: .3rem; }
.conviction .subhead { margin-bottom: .5rem; }
.conviction p { color: var(--ink-muted); margin-bottom: 0; max-width: 46rem; }
@media (max-width: 700px) { .conviction { grid-template-columns: 3rem minmax(0, 1fr); gap: 1.25rem; } }

/* ── "Not" list ──────────────────────────────────────────── */

.nots { border-top: var(--rule); }
.not-row {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: 1.375rem;
  border-bottom: var(--rule);
  align-items: baseline;
}
.not-row dt {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
}
.not-row dd { margin: 0; color: var(--ink-muted); font-size: .9375rem; }
@media (max-width: 700px) { .not-row { grid-template-columns: 1fr; gap: .375rem; } }

/* ── Tables ──────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Below the breakpoint a multi-column table must keep its measure and
   scroll horizontally, compressing it to one word per line is worse than
   asking the reader to swipe. */
@media (max-width: 760px) {
  .table-wrap table { min-width: 30rem; }
  .table-wrap table.t-criteria { min-width: 42rem; }
  .table-wrap table.t-facts { min-width: 0; }
  /* A 2-column table wraps rather than scrolls, so the label column must be
     allowed to break; at 390px a nowrap label ate 61% of the viewport. */
  .table-wrap table.t-facts th[scope="row"] {
    white-space: normal;
    width: auto;
    padding-right: 1.25rem;
  }
  .table-wrap { margin-inline: 0; }
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  font-variant-numeric: tabular-nums lining-nums;
}
caption {
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-bottom: .875rem;
}
th {
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0 1.25rem .75rem 0;
  border-bottom: 1px solid var(--ink-muted);
  vertical-align: bottom;
  white-space: nowrap;
}
td {
  padding: .9375rem 1.25rem .9375rem 0;
  border-bottom: var(--rule);
  vertical-align: top;
  line-height: 1.55;
  color: var(--ink-muted);
}
td:first-child {
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
  padding-right: 2rem;
}
td:last-child, th:last-child { padding-right: 0; }
tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-family: var(--font-body); font-size: .8125rem; }

/* Row headers. Declared after the generic `th` rule so they win at equal
   specificity and do not inherit the uppercase 11px column-header styling. */
th[scope="row"] {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .9375rem;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: var(--ink);
  padding: .9375rem 2rem .9375rem 0;
  border-bottom: var(--rule);
  border-top: 0;
  vertical-align: top;
  line-height: 1.55;
}
tr:last-child th[scope="row"] { border-bottom: 0; }

/* Criteria table, in / out of scope */
.t-criteria th[scope="row"] { width: 8.5rem; }
.t-criteria td.out { color: var(--ink-muted); }
.t-criteria td.in { color: var(--ink); }

/* Facts table (at a glance), no header row */
.t-facts td { font-size: .9375rem; }
.t-facts th[scope="row"] {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  width: 12rem;
  padding-top: 1.125rem;
}
.t-facts td:last-child { color: var(--ink); }

/* ── Navy-field overrides for tabular and structural content ──
   Declared after the table rules so they win at equal specificity. */

.navy-field table td,
.navy-field table th[scope="row"],
.navy-field .not-row,
.navy-field .lane,
.navy-field .step,
.navy-field .conviction,
.navy-field .lanes,
.navy-field .steps,
.navy-field .nots,
.navy-field .convictions,
.navy-field table th {
  border-color: color-mix(in srgb, var(--on-ground) 18%, transparent);
}
.navy-field table td { color: color-mix(in srgb, var(--on-ground) 78%, transparent); }
.navy-field table td:first-child { color: var(--on-ground); }
.navy-field th[scope="row"] { color: var(--on-ground); }
.navy-field .t-facts th[scope="row"] { color: var(--accent-lift); }
.navy-field .t-facts td:last-child { color: var(--on-ground); }
.navy-field table caption,
.navy-field table th { color: color-mix(in srgb, var(--on-ground) 64%, transparent); }
.navy-field .not-row dt,
.navy-field .lane-body h3,
.navy-field .step .subhead,
.navy-field .conviction .subhead { color: var(--on-ground); }
.navy-field .not-row dd,
.navy-field .lane-body p,
.navy-field .step p,
.navy-field .conviction p,
.navy-field ul.marked li { color: color-mix(in srgb, var(--on-ground) 78%, transparent); }
.navy-field ul.marked strong { color: var(--on-ground); }
.navy-field .lane-num,
.navy-field .step-num,
.navy-field .note-id { color: var(--accent-lift); }

/* ── Notes (writing) ─────────────────────────────────────── */

.note {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-bottom: var(--rule);
}
.note:last-of-type { border-bottom: 0; }
.note-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .75rem 1.25rem;
  margin-bottom: 1.5rem;
}
.note-id {
  font-family: var(--font-body);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.note h3 { max-width: 34ch; }
.note-body { max-width: var(--prose); color: var(--ink-muted); }
.note-body p { margin-bottom: 1.25em; }
.note-test {
  margin-top: 1.75rem;
  padding: 1.375rem 0 0;
  border-top: var(--rule);
  max-width: var(--prose);
  color: var(--ink);
  font-size: .9375rem;
}

/* ── Pull statement ──────────────────────────────────────── */

.statement {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.375rem, 1.05rem + 1.2vw, 1.875rem);
  line-height: 1.32;
  letter-spacing: -0.019em;
  max-width: 34ch;
  margin: 0;
}

/* ── Steps (four conversations) ──────────────────────────── */

.steps { counter-reset: step; border-top: var(--rule); }
.step {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: 1.5rem;
  border-bottom: var(--rule);
}
.step-num {
  font-family: var(--font-body);
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--ink-muted);
  padding-top: .25rem;
  font-variant-numeric: tabular-nums;
}
.step .subhead { margin-bottom: .375rem; }
.step p { color: var(--ink-muted); font-size: .9375rem; margin-bottom: 0; }
@media (max-width: 700px) { .step { grid-template-columns: 3rem minmax(0, 1fr); gap: 1.25rem; } }

/* ── Plain lists ─────────────────────────────────────────── */

ul.plain, ol.plain { list-style: none; margin: 0; padding: 0; }
ul.marked {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.marked li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .8125rem;
  color: var(--ink-muted);
}
ul.marked li:last-child { margin-bottom: 0; }
ul.marked li::before {
  content: '';
  position: absolute;
  left: 0; top: .7em;
  width: 8px; height: 1px;
  background: var(--accent);
}
.navy-field ul.marked li::before { background: var(--accent-lift); }
ul.marked strong { color: var(--ink); }

/* ── Contact ─────────────────────────────────────────────── */

.email-link {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  /* Capped below h3's maximum so the two never cross or tie. */
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--navy);
  border-bottom: 1px solid var(--underline-soft);
  padding-bottom: .15em;
  transition: border-color .35s var(--ease);
  word-break: break-word;
}
.email-link:hover { border-bottom-color: var(--accent); }

/* ── Footer ──────────────────────────────────────────────── */

.site-footer {
  background: var(--ground);
  color: var(--on-ground);
  padding-block: clamp(3.5rem, 6vw, 5.5rem) clamp(2rem, 3vw, 2.5rem);
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.footer-tag {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.35;
  letter-spacing: -0.012em;
  margin-top: 1.5rem;
  max-width: 26ch;
  color: var(--on-ground);
}
.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}
.footer-nav h5 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-lift);
  margin: 0 0 1rem;
}
.footer-nav ul { list-style: none; margin: 0; padding: 0; }
.footer-nav li { margin-bottom: .625rem; }
.footer-nav a {
  font-size: .9375rem;
  color: color-mix(in srgb, var(--on-ground) 78%, transparent);
  transition: color .3s var(--ease);
}
.footer-nav a:hover { color: var(--on-ground); }
.footer-nav .fn-meta {
  font-family: var(--font-body);
  font-size: .75rem;
  letter-spacing: .03em;
  color: color-mix(in srgb, var(--on-ground) 62%, transparent);
  font-variant-numeric: tabular-nums;
}

.footer-bottom {
  border-top: 1px solid color-mix(in srgb, var(--on-ground) 16%, transparent);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  display: grid;
  gap: 1.25rem;
}
.footer-note {
  font-size: .75rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--on-ground) 60%, transparent);
  max-width: 62rem;
  margin: 0;
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 2rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--on-ground) 52%, transparent);
}
@media (max-width: 780px) {
  .footer-top { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .footer-nav { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ── Motion, opacity + small translate only ─────────────── */

[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Anchor targets clear the sticky header. Declared before the phone
   override below, because a media query adds no specificity. */
[id] { scroll-margin-top: 7rem; }
@media (max-width: 620px) { [id] { scroll-margin-top: 8.5rem; } }

/* ── Focus ───────────────────────────────────────────────── */

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

/* #1B5E20 on navy is ~1.5:1, unusable as a focus indicator. The skip link
   is a sibling of the header rather than a descendant, so it needs naming
   explicitly now that the masthead is navy. */
.navy-field :focus-visible,
.site-footer :focus-visible,
.skip:focus-visible,
.skip:focus { outline: 2px solid var(--accent-lift); outline-offset: 3px; }

/* ── Print ───────────────────────────────────────────────── */

@media print {
  .site-header { display: none; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .navy-field, .site-footer { background: #fff; color: #000; }
}