/* ==========================================================================
   Blackrice Consulting

   Black, white and the green. The seven colours of Brand Identity Guideline
   v1.0, nothing added.

   Colour does its work through grounds rather than through a wider palette:
   a page alternates White, Paper, Forest and Ink bands. The green carries the
   hero, so it is the first thing on the page rather than a strip at the foot
   of it.

   Square corners everywhere. No shadows, no gradients, no blur, no tints, no
   opacity variants. Type ranges left. 8px rhythm. JavaScript only enhances.

   One deliberate departure from the guideline, for accessibility: labels are
   Graphite, not Silver. Silver on white is 3.17:1 and fails WCAG AA for text
   below 18.66px, and every label here is 11px. Silver is kept as a hairline
   colour. See docs/BUILD-NOTES.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Faces
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Guideline v1.0. Seven colours. Nothing else, ever.
     Every pairing used on screen is contrast-checked by
     tools/check-build.mjs on each run. */
  --forest:   #164735;   /* the accent, used as a ground */
  --ink:      #231F20;   /* type, dark grounds, solid fills */
  --black:    #000000;   /* true black where one is needed */
  --white:    #FFFFFF;   /* the page */
  --graphite: #4A4A4A;   /* body copy, and labels on light grounds */
  --silver:   #8C8C8C;   /* hairlines on light grounds. Never text. */
  --paper:    #F2F2F2;   /* panels, image grounds, and labels on dark */

  /* Faces */
  --face-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --face-text: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Weights */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* Type scale, 1440px viewport */
  --t-hero:     88px;   --lh-hero:     0.98;
  --t-display:  56px;   --lh-display:  1.05;
  --t-figure:   64px;   --lh-figure:   1;
  --t-title:    28px;   --lh-title:    1.2;
  --t-lede:     20px;   --lh-lede:     1.55;
  --t-section:  15px;   --lh-section:  1.4;
  --t-body:     16px;   --lh-body:     1.7;
  --t-table:    14px;   --lh-table:    1.5;
  --t-caption:  12px;   --lh-caption:  1.5;
  --t-eyebrow:  11px;   --lh-eyebrow:  1.4;
  --t-overlay:  72px;   --lh-overlay:  1.02;

  /* Tracking. Guideline range 0.10em to 0.34em for tracked uppercase. */
  --tr-section: 0.16em;
  --tr-eyebrow: 0.28em;
  --tr-caption: 0.20em;
  --tr-label:   0.16em;
  --tr-nav:     0.18em;
  --tr-button:  0.16em;
  --tr-hero:    -0.025em;
  --tr-display: -0.015em;
  --tr-title:   -0.005em;

  /* Space. 8px base. */
  --s-1:  8px;
  --s-2:  16px;
  --s-3:  24px;
  --s-4:  32px;
  --s-5:  40px;
  --s-6:  48px;
  --s-7:  56px;
  --s-8:  64px;
  --s-10: 80px;
  --s-12: 96px;
  --s-15: 120px;
  --s-18: 144px;

  /* Layout */
  --wrap: 1280px;
  --gutter: 24px;
  --measure: 66ch;
  --hairline: 1px;
  --band-pad: var(--s-18);
  --page-margin: var(--s-6);

  /* Motion. One duration. Fades and position only. */
  --motion: 200ms;
  --ease: linear;

  /* The mark. Supplied lockup, 614 x 164. */
  --mark-width: 210px;

  /* Foreground defaults. A band overrides these for its own ground; these
     keep every component correct outside one. */
  --fg: var(--ink);
  --fg-body: var(--graphite);
  --fg-label: var(--graphite);
  --rule: var(--silver);
  --panel: var(--paper);
  --panel-fg: var(--ink);
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--graphite);
  font-family: var(--face-text);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* Everything ranges left. Nothing is justified. */
h1, h2, h3, h4, p, li, td, th, dt, dd { text-align: left; }

/* --------------------------------------------------------------------------
   4. Focus. Never removed without a replacement.
   -------------------------------------------------------------------------- */

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

/* Ink fails contrast on the dark grounds. White carries the same 2px weight. */
.band--forest :focus-visible,
.band--ink :focus-visible,
.footer :focus-visible {
  outline-color: var(--white);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--white);
  font-family: var(--face-display);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--s-2) var(--s-3);
}
.skip-link:focus {
  left: var(--page-margin);
  top: var(--s-1);
}

/* --------------------------------------------------------------------------
   5. Bands

   A band is a full-bleed horizontal ground. Every band redefines the
   foreground tokens for everything inside it, so a component never needs to
   know which ground it is sitting on.
   -------------------------------------------------------------------------- */

.band {
  --fg: var(--ink);
  --fg-body: var(--graphite);
  --fg-label: var(--graphite);
  --rule: var(--silver);
  --panel: var(--paper);
  --panel-fg: var(--ink);

  background: var(--white);
  color: var(--fg-body);
  padding-block: var(--band-pad);
  position: relative;
}

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

.band--forest {
  background: var(--forest);
  --fg: var(--white);
  --fg-body: var(--white);
  --fg-label: var(--paper);
  --rule: var(--paper);
  --panel: var(--ink);
  --panel-fg: var(--white);
}

.band--ink {
  background: var(--ink);
  --fg: var(--white);
  --fg-body: var(--white);
  --fg-label: var(--paper);
  --rule: var(--paper);
  --panel: var(--forest);
  --panel-fg: var(--white);
}

.band--tight { padding-block: var(--s-12); }
.band--flush { padding-block: 0; }
/* Follows a page head, which has already supplied the space above. */
.band--flush-top { padding-top: 0; }

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

/* --------------------------------------------------------------------------
   6. Grid
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s-12);
}
.grid--tight { row-gap: var(--s-6); }

.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-12 { grid-column: span 12; }

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

.stack > * + * { margin-top: var(--s-3); }
.stack-2 > * + * { margin-top: var(--s-2); }
.stack-5 > * + * { margin-top: var(--s-5); }
.stack-8 > * + * { margin-top: var(--s-8); }

/* --------------------------------------------------------------------------
   7. Typography
   -------------------------------------------------------------------------- */

.hero-title {
  font-family: var(--face-display);
  font-weight: var(--w-bold);
  font-size: var(--t-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--tr-hero);
  color: var(--fg);
  text-wrap: balance;
}

.page-title {
  font-family: var(--face-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--fg);
  max-width: 18ch;
  text-wrap: balance;
}

.tile-title,
.block-title {
  font-family: var(--face-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-title);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
  color: var(--fg);
}

.section-heading {
  font-family: var(--face-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-section);
  line-height: var(--lh-section);
  letter-spacing: var(--tr-section);
  text-transform: uppercase;
  color: var(--fg);
}

/* A section heading followed directly by copy needs the gap the grid
   normally supplies. */
.section-heading + .body,
.section-heading + p,
.section-heading + .spec,
.section-heading + .form { margin-top: var(--s-3); }

.eyebrow {
  font-family: var(--face-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-label);
}

.lede {
  font-family: var(--face-text);
  font-weight: var(--w-regular);
  font-size: var(--t-lede);
  line-height: var(--lh-lede);
  color: var(--fg);
  max-width: var(--measure);
}

.body {
  color: var(--fg-body);
  max-width: var(--measure);
}
.body + .body { margin-top: var(--s-3); }

.caption {
  font-family: var(--face-text);
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--tr-caption);
  text-transform: uppercase;
  color: var(--fg-label);
}

.figure-value {
  font-family: var(--face-display);
  font-weight: var(--w-medium);
  font-size: var(--t-figure);
  line-height: var(--lh-figure);
  letter-spacing: var(--tr-display);
  color: var(--fg);
  font-variant-numeric: tabular-nums lining-nums;
}

/* --------------------------------------------------------------------------
   8. Links. Underlined, in the foreground colour. Never green as type.
   -------------------------------------------------------------------------- */

a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--motion) var(--ease);
}
a:hover { text-decoration-thickness: 2px; }

.link-label {
  display: inline-block;
  font-family: var(--face-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   9. Devices, drawn from the mark
   -------------------------------------------------------------------------- */

/* The horizon. One full-width hairline, from the line crossing the monogram. */
.horizon {
  border: 0;
  border-top: var(--hairline) solid var(--rule);
  margin: 0;
  width: 100%;
}

/* The rule. A vertical hairline between a label and its value, as in the
   lockup between the monogram and the wordmark. */
.rule-item {
  display: grid;
  grid-template-columns: var(--hairline) 1fr;
  column-gap: var(--s-4);
}
.rule-item::before {
  content: "";
  display: block;
  background: var(--rule);
  align-self: stretch;
}
.rule-item > * + * { margin-top: var(--s-2); }

/* Spec row. Label left, value right, hairline beneath. */
.spec { border-top: var(--hairline) solid var(--rule); }

.spec-row {
  display: grid;
  grid-template-columns: minmax(150px, 4fr) 7fr;
  column-gap: var(--gutter);
  padding-block: var(--s-3);
  border-bottom: var(--hairline) solid var(--rule);
}
.spec-row dt {
  font-family: var(--face-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-eyebrow);
  line-height: 2.2;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-label);
}
.spec-row dd {
  font-family: var(--face-text);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg);
  font-variant-numeric: tabular-nums lining-nums;
}

/* --------------------------------------------------------------------------
   10. Images

   Every slot declares its ratio, so the box exists before the file loads and
   nothing on the page moves when it arrives.
   -------------------------------------------------------------------------- */

.frame {
  position: relative;
  background: var(--paper);
  overflow: hidden;
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame--4x5  { aspect-ratio: 4 / 5; }
.frame--3x2  { aspect-ratio: 3 / 2; }
.frame--16x9 { aspect-ratio: 16 / 9; }
.frame--1x1  { aspect-ratio: 1 / 1; }

/* A band whose only content is one image, edge to edge. */
.band--image { padding-block: 0; background: var(--paper); position: relative; }
.band--image .frame { aspect-ratio: 21 / 8; }

/* The 21:8 crop cuts hard. This biases the visible window towards the
   subject rather than the empty space above it. */
.frame--lower img { object-position: 50% 78%; }

/* A line of type over a full-bleed image.

   The image is darkened at source, not covered with a CSS scrim, because the
   palette has no tints and no opacity variants. White type measures 4.61:1
   against the 99th percentile of every darkened band image, which clears AA
   for normal text, let alone display sizes. The measurement is recorded in
   assets/img/photos/overlay-contrast.json and tools/check-build.mjs fails if
   any of those files changes without being re-measured. */
.band-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}
.band-overlay .wrap { width: 100%; }

.overlay-title {
  font-family: var(--face-display);
  font-weight: var(--w-bold);
  font-size: var(--t-overlay);
  line-height: var(--lh-overlay);
  letter-spacing: var(--tr-hero);
  color: var(--white);
  max-width: 20ch;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   11. Hero

   The image is full bleed to the right edge of the viewport and runs the full
   height of the band. The headline holds the content column on the left.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  min-height: 660px;
  display: flex;
  align-items: center;
  padding-block: var(--s-15);
}

.hero .wrap { width: 100%; }

.hero-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46%;
}
.hero-media img { height: 100%; }

.hero-panel {
  max-width: 52%;
  position: relative;
  z-index: 2;
}
.hero-panel .lede { max-width: 46ch; }
.hero-panel > * + * { margin-top: var(--s-5); }
.hero-panel .eyebrow + * { margin-top: var(--s-4); }
.hero-cta { margin-top: var(--s-6); }

/* Page head for the inner pages. */
.page-head { padding-block: var(--s-15) var(--s-12); }
.page-head .eyebrow { margin-bottom: var(--s-4); }
.page-head .lede { margin-top: var(--s-6); }
.page-head .horizon { margin-top: var(--s-6); }

/* --------------------------------------------------------------------------
   12. Tiles

   A tile is a panel with a ground. Content is separated by the change of
   ground, not by a border and not by a shadow.
   -------------------------------------------------------------------------- */

.tile {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  color: var(--panel-fg);
}
.tile-body {
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1 1 auto;
}
.tile-body > .link-label { margin-top: auto; padding-top: var(--s-3); }
.tile-body p {
  color: var(--graphite);
  max-width: 48ch;
}

/* A tile on a dark ground carries its own foreground set. */
.band--forest .tile,
.band--ink .tile {
  --fg: var(--white);
  --fg-label: var(--paper);
}
.band--forest .tile-body p,
.band--ink .tile-body p { color: var(--white); }

/* Guideline section 8: blocks are separated by whitespace, not by boxes,
   borders or cards. This is the default treatment; the panelled .tile is kept
   for the dark bands, where a change of ground is the only way to group. */
.tile--plain { background: none; }
.tile--plain .tile-body { padding: var(--s-4) 0 0; }

/* --------------------------------------------------------------------------
   13. Service block. Label, vertical rule, value.
   -------------------------------------------------------------------------- */

.block {
  display: grid;
  grid-template-columns: var(--hairline) 1fr;
  column-gap: var(--s-4);
}
.block::before {
  content: "";
  display: block;
  background: var(--rule);
  align-self: stretch;
}
.block-body > * + * { margin-top: var(--s-2); }
.block-body p {
  color: var(--fg-body);
  max-width: 46ch;
}
.block-label {
  font-family: var(--face-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-label);
}
.block-title { font-size: 22px; }
.block-more { margin-top: var(--s-3); }

/* Numbered markers. How we work only, the one true sequence. */
.stage-number {
  font-family: var(--face-display);
  font-weight: var(--w-medium);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tr-label);
  color: var(--fg-label);
  font-variant-numeric: tabular-nums lining-nums;
}

/* --------------------------------------------------------------------------
   14. Figures strip
   -------------------------------------------------------------------------- */

.figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s-8);
}
.figure-item {
  border-top: var(--hairline) solid var(--rule);
  padding-top: var(--s-3);
}
.figure-item .eyebrow { margin-bottom: var(--s-3); }
.figure-item .caption { margin-top: var(--s-2); }

/* --------------------------------------------------------------------------
   15. Tables
   -------------------------------------------------------------------------- */

.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--face-text);
  font-size: var(--t-table);
  line-height: var(--lh-table);
  color: var(--fg);
  font-variant-numeric: tabular-nums lining-nums;
}
.table thead th {
  font-family: var(--face-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg);
  border-bottom: var(--hairline) solid var(--fg);
  padding: var(--s-1) var(--s-2) var(--s-1) 0;
  vertical-align: bottom;
}
.table tbody th {
  font-family: var(--face-text);
  font-weight: var(--w-medium);
  font-size: var(--t-table);
  color: var(--fg);
  border-bottom: var(--hairline) solid var(--rule);
  padding: var(--s-2) var(--s-2) var(--s-2) 0;
  vertical-align: top;
  white-space: nowrap;
}
.table td {
  border-bottom: var(--hairline) solid var(--rule);
  padding: var(--s-2) var(--s-2) var(--s-2) 0;
  vertical-align: top;
  color: var(--fg-body);
}
.table th:last-child, .table td:last-child { padding-right: 0; }
.table .num { text-align: right; }
.table-scroll { overflow-x: auto; }

/* --------------------------------------------------------------------------
   16. Buttons

   Square, solid, fill change on hover, nothing else. Ink to Forest, which is
   section 8 of the brief read exactly as written.
   -------------------------------------------------------------------------- */

.button {
  display: inline-block;
  background: var(--ink);
  color: var(--white);
  font-family: var(--face-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-caption);
  line-height: 1;
  letter-spacing: var(--tr-button);
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  padding: var(--s-3) var(--s-6);
  cursor: pointer;
  transition: background-color var(--motion) var(--ease);
}
.button:hover { background: var(--forest); text-decoration: none; }

/* On a dark ground the fill inverts so it stays the loudest thing there. */
.band--forest .button,
.band--ink .button {
  background: var(--white);
  color: var(--ink);
}
.band--forest .button:hover,
.band--ink .button:hover { background: var(--paper); }

/* --------------------------------------------------------------------------
   17. Header
   -------------------------------------------------------------------------- */

.header {
  position: relative;
  padding-block: var(--s-5);
  background: var(--white);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}

/* The mark. The supplied lockup, appearing exactly once per page. */
.mark {
  display: block;
  width: var(--mark-width);
  flex: 0 0 auto;
  text-decoration: none;
}
.mark:hover { text-decoration: none; }
.mark img { width: 100%; height: auto; }

.nav-toggle { display: none; }

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
.nav-list a {
  font-family: var(--face-display);
  font-weight: var(--w-medium);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-block: var(--s-1);
  border-bottom: 2px solid transparent;
  transition: border-color var(--motion) var(--ease);
}
.nav-list a:hover { border-bottom-color: var(--forest); text-decoration: none; }
.nav-list a[aria-current="page"] { border-bottom-color: var(--forest); }

/* --------------------------------------------------------------------------
   18. Forms
   -------------------------------------------------------------------------- */

.form { max-width: 620px; }
.field + .field { margin-top: var(--s-4); }

.field label {
  display: block;
  font-family: var(--face-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-label);
  margin-bottom: var(--s-1);
}
.field .optional { color: var(--fg-label); }

.field input,
.field textarea {
  width: 100%;
  font-family: var(--face-text);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 11px var(--s-2);
}
.field textarea { min-height: 160px; resize: vertical; }

/* Focus is a 2px border. Padding compensates so nothing shifts. */
.field input:focus,
.field textarea:focus {
  outline: none;
  border-width: 2px;
  border-color: var(--forest);
  padding: 10px 15px;
}

.field-error {
  display: block;
  margin-top: var(--s-1);
  font-family: var(--face-text);
  font-size: 14px;
  line-height: var(--lh-table);
  color: var(--ink);
  font-weight: var(--w-medium);
}

.form-error {
  border-left: 3px solid var(--ink);
  padding: var(--s-2) 0 var(--s-2) var(--s-3);
  margin-bottom: var(--s-5);
  color: var(--ink);
  font-weight: var(--w-medium);
  max-width: 620px;
}

.consent {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--s-2);
  align-items: start;
  margin-top: var(--s-4);
}
.consent input {
  width: 18px;
  height: 18px;
  margin: 5px 0 0;
  border-radius: 0;
  accent-color: var(--forest);
}
.consent label {
  font-family: var(--face-text);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-body);
  margin: 0;
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions { margin-top: var(--s-6); }

.form-confirmation {
  border-left: 3px solid var(--forest);
  padding: var(--s-3) 0 var(--s-3) var(--s-4);
  max-width: 620px;
}
.form-confirmation .section-heading { margin-bottom: var(--s-2); }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--ink);
  color: var(--white);
  padding-block: var(--s-15) var(--s-8);
  --fg: var(--white);
  --fg-body: var(--white);
  --fg-label: var(--paper);
  --rule: var(--paper);
}
.footer a { color: var(--white); text-decoration-color: var(--white); }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s-8);
}

.footer-detail {
  font-family: var(--face-text);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--white);
}
.footer .horizon { margin-block: var(--s-12) var(--s-6); }

.statutory {
  font-family: var(--face-text);
  font-size: var(--t-table);
  line-height: 1.7;
  color: var(--white);
  max-width: 90ch;
}
.statutory-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-8);
  margin-bottom: var(--s-3);
}
.statutory-list > div > span { display: block; }
.statutory-list > div > span:first-child {
  font-family: var(--face-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--paper);
}

/* --------------------------------------------------------------------------
   20. Utilities
   -------------------------------------------------------------------------- */

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

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

/* --------------------------------------------------------------------------
   21. Breakpoints. 1440, 1024, 768, 480.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  :root {
    --t-hero: 64px;
    --t-display: 44px;
    --t-figure: 48px;
    --t-title: 24px;
    --t-lede: 19px;
    --t-overlay: 52px;
    --band-pad: var(--s-15);
    --page-margin: var(--s-4);
    --mark-width: 190px;
  }

  .hero { min-height: 560px; padding-block: var(--s-12); }
  .hero-media { width: 40%; }
  .hero-panel { max-width: 56%; }

  .col-3, .col-4 { grid-column: span 6; }
  .col-5, .col-6, .col-7, .col-8, .col-9, .col-10 { grid-column: span 12; }
  .grid { row-gap: var(--s-10); }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  :root {
    --t-hero: 48px;
    --t-display: 34px;
    --t-figure: 40px;
    --t-title: 22px;
    --t-overlay: 38px;
    --band-pad: var(--s-12);
    --page-margin: var(--s-3);
    --mark-width: 160px;
  }

  .header {
    position: sticky;
    top: 0;
    z-index: 20;
    padding-block: var(--s-3);
    border-bottom: var(--hairline) solid var(--paper);
  }
  .header-inner { gap: var(--s-3); }

  /* Plain text toggle, not a hamburger icon. The <noscript> block in each
     page reverses this collapse, so navigation stays open without JS. */
  .nav-toggle {
    display: inline-block;
    background: none;
    border: 0;
    padding: var(--s-1) 0;
    font-family: var(--face-display);
    font-weight: var(--w-semibold);
    font-size: var(--t-eyebrow);
    letter-spacing: var(--tr-nav);
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
  }

  .nav-list {
    display: block;
    padding-block: var(--s-4) var(--s-3);
  }
  .nav-list li + li { margin-top: var(--s-3); }
  .nav-list a { display: inline-block; }

  /* Panel slides from the top. No overlay dimming. */
  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--white);
    border-bottom: var(--hairline) solid var(--paper);
    padding-inline: var(--page-margin);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--motion) var(--ease),
                opacity var(--motion) var(--ease),
                visibility var(--motion) var(--ease);
  }
  .nav[data-open="true"] {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  /* The split stacks: headline first, then the image as a normal block. */
  .hero {
    display: block;
    min-height: 0;
    padding-block: var(--s-8) 0;
  }
  .hero-media {
    position: static;
    width: auto;
    aspect-ratio: 3 / 2;
    margin-top: var(--s-8);
  }
  .hero-media img { height: 100%; }
  .hero-panel { max-width: none; }

  .grid, .footer-grid { row-gap: var(--s-8); }
  .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10 { grid-column: span 12; }
  .footer-grid > * { grid-column: span 12; }
  .figures { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); }

  .spec-row { grid-template-columns: 1fr; row-gap: 4px; }
  .spec-row dt { line-height: 1.6; }

  .tile-body { padding: var(--s-4); }
  .page-head { padding-block: var(--s-10) var(--s-8); }
  .footer { padding-block: var(--s-12) var(--s-7); }
  .footer .horizon { margin-block: var(--s-8) var(--s-5); }
  .band--image .frame { aspect-ratio: 3 / 2; }
}

@media (max-width: 480px) {
  :root {
    --t-hero: 40px;
    --t-display: 30px;
    --t-overlay: 30px;
    --mark-width: 148px;
  }
}

/* --------------------------------------------------------------------------
   22. Reduced motion
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   23. Print
   -------------------------------------------------------------------------- */

@media print {
  .nav, .nav-toggle, .skip-link { display: none; }
  body { background: var(--white); color: var(--ink); }
  .band, .footer { background: none; }
  .band--forest, .band--ink, .footer {
    --fg: var(--ink);
    --fg-body: var(--ink);
    --fg-label: var(--graphite);
    --rule: var(--silver);
    color: var(--ink);
  }
  .footer a, .footer-detail, .statutory { color: var(--ink); }
  .statutory-list > div > span:first-child { color: var(--graphite); }
}