/*
 * ASPEGIO — INSTRUMENT GRADE. NON-NEGOTIABLES:
 * 1. Every Fragment Mono annotation must be TRUE AND CHECKABLE. No decorative
 *    numbers, no fake FIG. labels, no invented coordinates. The first false
 *    annotation collapses the whole system.
 * 2. Red budget: at most 3 red elements visible per viewport. Red NEVER
 *    appears on Ink (#17191D) grounds in any form (2.99:1 fails 3:1).
 * 3. All spacing derives from the --s* 8px scale. No ad-hoc pixel values.
 * 4. The dimension rule is the ONLY ornamental motif. If a page has no
 *    annotated rule, it is not done. If anything else decorates, remove it.
 * 5. Corner radius is 0 everywhere. No shadows. Hairlines do all separation.
 */

/* ---------- fonts (self-hosted, latin subset) ---------- */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500;
  src: url("/assets/fonts/archivo-v25-latin-500.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600;
  src: url("/assets/fonts/archivo-v25-latin-600.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700;
  src: url("/assets/fonts/archivo-v25-latin-700.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400;
  src: url("/assets/fonts/inter-v20-latin-regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500;
  src: url("/assets/fonts/inter-v20-latin-500.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Fragment Mono"; font-style: normal; font-weight: 400;
  src: url("/assets/fonts/fragment-mono-v6-latin-regular.woff2") format("woff2"); font-display: swap; }

/* Metric fallbacks to suppress layout shift on slow loads */
@font-face { font-family: "Archivo-fallback"; src: local("Arial");
  size-adjust: 98%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Inter-fallback"; src: local("Arial");
  size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }

/* ---------- design tokens ---------- */
:root {
  /* ---- colour ---- */
  --ink:        #17191D;  /* text, wordmark, dark bands        */
  --paper:      #FCFCFA;  /* page ground, text on Ink          */
  --red:        #C8102E;  /* single accent. budget: 3/viewport */
  --slate:      #4A4E55;  /* secondary text, annotations       */
  --hairline:   #D9D9D3;  /* all 1px rules on light grounds    */
  --hairline-d: #33363C;  /* 1px rules on Ink grounds only     */
  --panel:      #F2F2EF;  /* raised ground: cards, tables      */
  --muted-d:    #A9ADB3;  /* secondary text on Ink only        */

  /* ---- families ---- */
  --font-display: "Archivo", "Archivo-fallback", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Inter-fallback", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Fragment Mono", "Courier New", monospace;

  /* ---- type scale (8px baseline) ---- */
  --text-h1: clamp(2.75rem, 5.5vw, 4.25rem);  --lh-h1: 1.04;  --ls-h1: -0.015em; /* Archivo 700 */
  --text-h2: clamp(1.75rem, 3vw, 2.25rem);    --lh-h2: 1.15;  --ls-h2: -0.01em;  /* Archivo 600 */
  --text-h3: 1.25rem;                          --lh-h3: 1.3;                      /* Archivo 600 */
  --text-body: 1.0625rem;                      --lh-body: 1.6;                    /* Inter 400   */
  --text-lead: 1.25rem;                        --lh-lead: 1.5;                    /* Inter 400, Slate */
  --text-mono: 0.8125rem;                      --lh-mono: 1.4;  --ls-mono: 0.02em;/* Fragment Mono */
  --text-label: 0.75rem;                       --ls-label: 0.08em;                /* Fragment Mono, uppercase */
  --text-btn: 0.9375rem;                                                          /* Archivo 600 */
  --measure: 62ch;         /* body copy max width */
  --measure-lead: 56ch;

  /* ---- spacing: 8px scale ONLY ---- */
  --s1: 0.5rem;   /*   8px */
  --s2: 1rem;     /*  16px */
  --s3: 1.5rem;   /*  24px */
  --s4: 2rem;     /*  32px */
  --s5: 2.5rem;   /*  40px */
  --s6: 3rem;     /*  48px */
  --s7: 3.5rem;   /*  56px */
  --s8: 4rem;     /*  64px */
  --s10: 5rem;    /*  80px */
  --s12: 6rem;    /*  96px */
  --s14: 7rem;    /* 112px */
  --sect-top: var(--s14);      /* section padding-top, desktop  */
  --sect-bottom: var(--s12);   /* section padding-bottom        */

  /* ---- layout ---- */
  --max-content: 1200px;
  --gutter: 1.5rem;            /* 24px column gutters           */
  --margin: 1.5rem;            /* page margin, mobile           */
  --nav-h: 4rem;               /* 64px                          */

  /* ---- rules, ticks, radii, motion ---- */
  --radius: 0;                            /* everywhere. no exceptions. */
  --rule: 1px solid var(--hairline);
  --rule-dark: 1px solid var(--hairline-d);
  --hairline-w: 1px;                      /* rule stroke                */
  --tick-h: 9px;                          /* dimension-rule end ticks   */
  --tick-w: 1px;
  --tick-w2: 2px;                         /* progress / active ticks    */
  --tick-w4: 4px;                         /* hero sweep tick            */
  --tick-t: 120ms ease-out;               /* link tick grow             */
}
@media (min-width: 768px)  { :root { --margin: 3rem; } }
@media (max-width: 767px)  { :root { --sect-top: var(--s8); --sect-bottom: var(--s7); } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.menu-open { overflow: hidden; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--ink); color: var(--paper); }

h1 { font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-h3); line-height: var(--lh-h3); }
p  { max-width: var(--measure); }
.lead { font-size: var(--text-lead); line-height: var(--lh-lead);
  color: var(--slate); max-width: var(--measure-lead); }
strong { font-weight: 500; }

.mono, .sec-label, .dim-label, .cap {
  font-family: var(--font-mono); font-size: var(--text-label);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--slate);
  font-weight: 400;
}
.mono-text { font-family: var(--font-mono); font-size: var(--text-mono);
  line-height: var(--lh-mono); letter-spacing: var(--ls-mono); color: var(--slate); }

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

/* ---------- focus ---------- */
:focus-visible { outline: var(--tick-w2) solid var(--red); outline-offset: var(--tick-w2); }
.on-ink :focus-visible, .on-ink:focus-visible { outline-color: var(--paper); }

/* ---------- skip link ---------- */
.skip {
  position: absolute; left: var(--s2); top: var(--s2); z-index: 200;
  transform: translateY(-300%);
  background: var(--ink); color: var(--paper);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-btn);
  padding: var(--s2) var(--s3); text-decoration: none;
}
.skip:focus { transform: none; }

/* ---------- layout ---------- */
.wrap { max-width: var(--max-content); margin-inline: auto; padding-inline: var(--margin); }
.cols { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 var(--gutter); }
@media (max-width: 767px) {
  .cols { grid-template-columns: 1fr; }
  /* beat inline grid-column placements so every cell stacks full-width */
  .cols > * { grid-column: 1 / -1 !important; }
}
.section { padding: var(--sect-top) 0 var(--sect-bottom); }
.section--flush { padding-bottom: 0; }

@media (min-width: 768px) {
  .col-head { grid-column: 1 / 8; }   /* headings                */
  .col-body { grid-column: 5 / 11; }  /* body copy               */
  .col-note { grid-column: 1 / 5; }   /* hanging annotations     */
  .col-full { grid-column: 1 / 13; }
}

/* ---------- dimension rule: the sole motif ---------- */
.dim-rule { position: relative; height: var(--hairline-w); background: var(--hairline);
  color: var(--slate); }
.dim-rule::before, .dim-rule::after {
  content: ""; position: absolute; top: calc(-1 * (var(--tick-h) - var(--hairline-w)) / 2);
  width: var(--tick-w); height: var(--tick-h); background: currentColor;
}
.dim-rule::before { left: 0; }
.dim-rule::after  { right: 0; }

.dim-label {
  position: absolute; top: calc(-1 * var(--s1)); transform: translateY(-100%);
  background: var(--paper); padding-inline: var(--s1); white-space: nowrap;
}
.dim-label--left  { left: 0;  padding-left: 0; }
.dim-label--right { right: 0; padding-right: 0; }
.dim-label--below { top: auto; bottom: calc(-1 * var(--s1)); transform: translateY(100%); }
.dim-rule--short { width: min(320px, 100%); }
.band--panel .dim-label { background: var(--panel); }

/* section divider with true progress tick */
.dim-rule--section .tick {
  position: absolute; top: calc(-1 * (var(--tick-h) - var(--hairline-w)) / 2);
  width: var(--tick-w2); height: var(--tick-h); background: var(--red);
  left: calc(var(--progress, 0) * 100%); transform: translateX(-50%);
}

/* hero rule: one 800ms sweep on load, then rests right */
.dim-rule--hero .tick {
  position: absolute; top: calc(-1 * (var(--tick-h) - var(--hairline-w)) / 2);
  width: var(--tick-w4); height: var(--tick-h); background: var(--red);
  left: 100%; transform: translateX(-100%);
}
@media (prefers-reduced-motion: no-preference) {
  .dim-rule--hero .tick { animation: sweep 800ms ease-out 1 both; }
  @keyframes sweep {
    from { left: 0; transform: none; }
    to   { left: 100%; transform: translateX(-100%); }
  }
}

/* vertical dimension rule (portrait frame) */
.dim-rule--v { width: var(--hairline-w); height: auto; background: var(--hairline); }
.dim-rule--v::before, .dim-rule--v::after {
  top: auto; left: calc(-1 * (var(--tick-h) - var(--hairline-w)) / 2);
  width: var(--tick-h); height: var(--tick-w);
}
.dim-rule--v::before { top: 0; }
.dim-rule--v::after  { top: auto; bottom: 0; }

/* ---------- text links: red, tick-underline on hover ---------- */
.t-link {
  color: var(--red); text-decoration: underline; text-underline-offset: var(--tick-w4);
  text-decoration-thickness: var(--hairline-w); position: relative;
}
.t-link::before, .t-link::after {
  content: ""; position: absolute; bottom: calc(-1 * var(--tick-w2));
  width: var(--tick-w); height: 0; background: currentColor;
  transition: height var(--tick-t);
}
.t-link::before { left: 0; }
.t-link::after  { right: 0; }
.t-link:hover::before, .t-link:hover::after,
.t-link:focus-visible::before, .t-link:focus-visible::after { height: var(--tick-h); }
.on-ink .t-link { color: var(--paper); }
.t-link--ink { color: var(--ink); }  /* used where several links share a viewport: red budget is 3 */
@media (prefers-reduced-motion: reduce) { .t-link::before, .t-link::after { transition: none; } }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-btn);
  letter-spacing: 0.01em; padding: var(--s2) var(--s4); border-radius: var(--radius);
  cursor: pointer; display: inline-block; text-decoration: none;
  border: var(--hairline-w) solid transparent;
}
.btn--primary { background: var(--red); color: var(--paper); }
.btn--primary:hover { background: var(--ink); color: var(--paper); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: var(--paper); }
.on-ink .btn--primary { background: var(--paper); color: var(--ink); }
.on-ink .btn--primary:hover { background: var(--muted-d); color: var(--ink); }

/* ---------- header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper); border-bottom: var(--rule);
}
.site-header .wrap {
  height: var(--nav-h); display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: var(--s2); text-decoration: none; }
.brand img { height: var(--s4); width: auto; }
.brand .brand-word { height: var(--s2); width: auto; }

.site-nav { display: flex; height: 100%; }
.site-nav a {
  display: flex; align-items: center; height: var(--nav-h); position: relative;
  padding: 0 var(--s2); margin-left: var(--s2);
  font-family: var(--font-display); font-weight: 500; font-size: var(--text-btn);
  letter-spacing: 0.02em; color: var(--ink); text-decoration: none;
}
.site-nav .nav-label { position: relative; }
.site-nav a:hover .nav-label, .site-nav a:focus-visible .nav-label {
  text-decoration: underline; text-underline-offset: var(--tick-w4);
  text-decoration-thickness: var(--hairline-w);
}
.site-nav .nav-label::before, .site-nav .nav-label::after {
  content: ""; position: absolute; bottom: calc(-1 * var(--tick-w2));
  width: var(--tick-w); height: 0; background: currentColor;
  transition: height var(--tick-t);
}
.site-nav .nav-label::before { left: 0; }
.site-nav .nav-label::after  { right: 0; }
.site-nav a:hover .nav-label::before, .site-nav a:hover .nav-label::after,
.site-nav a:focus-visible .nav-label::before, .site-nav a:focus-visible .nav-label::after {
  height: var(--tick-h);
}
.site-nav a[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: var(--tick-w2); height: var(--s2); background: var(--red);
}
@media (prefers-reduced-motion: reduce) {
  .site-nav .nav-label::before, .site-nav .nav-label::after { transition: none; }
}

.nav-toggle { display: none; }

@media (max-width: 767px) {
  .site-nav { display: none; }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; width: 44px; height: 44px;
    background: none; border: none; cursor: pointer; padding: 0;
  }
  .nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink); }

  .mobile-menu {
    position: fixed; inset: var(--nav-h) 0 0 0; z-index: 90;
    background: var(--paper); overflow-y: auto;
  }
  .mobile-menu a {
    display: flex; align-items: center; gap: var(--s3); height: var(--s8);
    padding-inline: var(--margin); border-bottom: var(--rule);
    font-family: var(--font-display); font-weight: 600; font-size: 1.5rem;
    color: var(--ink); text-decoration: none;
  }
  .mobile-menu a .idx { font-family: var(--font-mono); font-size: var(--text-label);
    letter-spacing: var(--ls-label); color: var(--slate); }
  .mobile-menu a[aria-current="page"]::before {
    content: ""; width: var(--tick-w2); height: var(--s2); background: var(--red);
  }
}
@media (min-width: 768px) { .mobile-menu { display: none; } }

/* ---------- section heading system ---------- */
.sec-head { margin-bottom: var(--s6); }
.sec-label { display: block; margin-bottom: var(--s1); }
.sec-head h2 { margin-top: var(--s5); }
.sec-head--bare { margin-bottom: 0; }

/* ---------- bands ---------- */
.band { border-top: var(--rule); border-bottom: var(--rule); }
.band--panel { background: var(--panel); }
.band--panel .pad, .band--ink .pad { padding-block: var(--s8); }
.band--ink { background: var(--ink); color: var(--paper);
  border-top: none; border-bottom: none; }

/* CTA band */
.cta-band { background: var(--ink); color: var(--paper); padding: var(--s12) 0;
  border-bottom: var(--rule-dark); }
.cta-band .mono, .cta-band .cap { color: var(--muted-d); }
.cta-band h2 { color: var(--paper); margin: var(--s3) 0 var(--s2); max-width: var(--measure-lead); }
.cta-band p { color: var(--muted-d); margin-bottom: var(--s5); }

/* ---------- border-collapse card grid ---------- */
.grid-collapse {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: var(--rule); border-left: var(--rule);
}
.grid-collapse > * {
  border-right: var(--rule); border-bottom: var(--rule);
  padding: var(--s4); background: var(--paper);
}
.grid-collapse > .cell--note { background: var(--panel); display: flex;
  align-items: flex-end; }
@media (max-width: 767px) { .grid-collapse { grid-template-columns: 1fr; } }

.svc-cell .idx { display: block; margin-bottom: var(--s3); }
.svc-cell h3 { margin-bottom: var(--s2); }
.svc-cell p { font-size: var(--text-btn); color: var(--slate); margin-bottom: var(--s3); }

/* ---------- logo wall ---------- */
.logo-wall {
  display: grid; grid-template-columns: repeat(6, 1fr);
  border-top: var(--rule); border-left: var(--rule); background: var(--panel);
}
.logo-wall > .cell {
  border-right: var(--rule); border-bottom: var(--rule);
  min-height: 7rem; display: flex; align-items: center; justify-content: center;
  padding: var(--s3);
}
.client-logo { filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply;
  opacity: 0.9; width: auto; }
.client-logo--word   { max-height: 1.625rem; }   /* 26px: wordmark-shaped  */
.client-logo--emblem { max-height: 2.5rem;   }   /* 40px: tall badge-shaped */
@media (max-width: 899px) { .logo-wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 479px) { .logo-wall { grid-template-columns: repeat(2, 1fr); } }
.wall-cap { display: block; margin-top: var(--s2); }

/* ---------- portrait ---------- */
.portrait { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--s2); }
.portrait .dim-rule--v { grid-row: 1; }
.portrait img {
  grid-row: 1; align-self: start; width: 100%; max-width: 400px; height: auto;
  aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 50%;
  border: var(--rule);
  filter: grayscale(1);  /* per director: full frame, black and white */
}
.portrait .under { grid-column: 2; margin-top: var(--s2); position: relative; }
.portrait .under .dim-label { top: auto; bottom: calc(-1 * var(--s1)); transform: translateY(100%);
  text-transform: none; /* credentials must display exactly: CEng MIMechE */ }
.portrait figcaption { margin-top: var(--s5); }

/* pull-quote: Inter 500 at lead scale, Ink */
.pull { font-size: var(--text-lead); line-height: var(--lh-lead); font-weight: 500;
  color: var(--ink); max-width: var(--measure-lead); }

/* list with hairline tick prefixes */
.tick-list li { position: relative; padding-left: var(--s5); max-width: var(--measure); }
.tick-list li + li { margin-top: var(--s2); }
.tick-list li::before { content: ""; position: absolute; left: 0; top: 0.75em;
  width: var(--s3); height: var(--hairline-w); background: var(--slate); }

/* ---------- ruled row lists (method, principles, defs, steps) ---------- */
.row-list > * {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 var(--gutter);
  padding: var(--s3) 0; border-top: var(--rule);
}
.row-list > *:last-child { border-bottom: var(--rule); }
.row-list .r-label { grid-column: 1 / 4; }
.row-list .r-body  { grid-column: 4 / 12; max-width: var(--measure); }
@media (max-width: 767px) {
  .row-list > * { grid-template-columns: 1fr; }
  .row-list .r-label, .row-list .r-body { grid-column: 1; }
  .row-list .r-label { margin-bottom: var(--s1); }
}

/* ---------- vignettes (/work) ---------- */
.vignette { border: var(--rule); }
.vignette-meta { display: block; margin-bottom: var(--s2); }
.vignette > div {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 var(--gutter);
  padding: var(--s3) var(--s3);
}
.vignette > div + div { border-top: var(--rule); }
.vignette .v-label { grid-column: 1 / 4; }
.vignette .v-body  { grid-column: 4 / 13; max-width: var(--measure); }
@media (max-width: 767px) {
  .vignette > div { grid-template-columns: 1fr; }
  .vignette .v-label, .vignette .v-body { grid-column: 1; }
  .vignette .v-label { margin-bottom: var(--s1); }
}

/* ---------- tables ---------- */
.table-scroll { overflow-x: auto; }
table.terms { border-collapse: collapse; width: 100%; background: var(--paper); }
table.terms th, table.terms td { border: var(--rule); padding: var(--s2) var(--s3);
  text-align: left; vertical-align: top; }
table.terms th { font-family: var(--font-mono); font-size: var(--text-label);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--slate);
  font-weight: 400; }
table.terms td { font-size: var(--text-body); color: var(--ink); }

/* ---------- footer: engineering title block ---------- */
.site-footer { background: var(--ink); color: var(--paper); padding: var(--s10) 0; }
.site-footer .foot-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s6);
}
.site-footer .foot-mark img { height: var(--s5); width: auto; filter: invert(1); }
.site-footer .foot-nav { display: flex; flex-wrap: wrap; gap: var(--s3); }
.site-footer .foot-nav a {
  font-family: var(--font-display); font-weight: 500; font-size: var(--text-btn);
  color: var(--paper); text-decoration: none; display: inline-flex; align-items: center;
  min-height: 44px;
}
.site-footer .foot-nav a:hover { text-decoration: underline; text-underline-offset: var(--tick-w4); }

.title-block {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: var(--rule-dark); margin: 0;
}
.title-block > div { border: var(--rule-dark); padding: var(--s2); min-width: 0; }
.title-block dt {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--muted-d); margin-bottom: var(--s1);
}
.title-block dd {
  margin: 0; font-family: var(--font-mono); font-size: var(--text-mono);
  letter-spacing: var(--ls-mono); color: var(--paper); overflow-wrap: break-word;
}
.title-block dd a { color: var(--paper);
  display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 767px) { .title-block { grid-template-columns: repeat(2, 1fr); } }

.foot-legal { margin-top: var(--s6); color: var(--muted-d); font-size: var(--text-btn); }
.foot-legal p { max-width: none; }
.foot-legal a { color: var(--paper); }
.foot-legal .foot-links { display: flex; gap: var(--s4); margin-top: var(--s2);
  flex-wrap: wrap; align-items: center; }
.foot-legal .foot-links a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- hero ---------- */
.hero { padding: var(--s14) 0 var(--s12); }
.hero .cols { align-items: start; }
.hero .hero-main { grid-column: 1 / 9; }
.hero h1 { margin-top: var(--s5); }
.hero .hero-rule { margin-top: var(--s3); }
.hero .lead { margin-top: var(--s5); }
.hero .hero-ctas { margin-top: var(--s4); display: flex; gap: var(--s2); flex-wrap: wrap; }
.hero .hero-fig { grid-column: 10 / 13; justify-self: end; }
.hero .hero-fig img { width: 10rem; height: auto; }
.hero .hero-fig figcaption { margin-top: var(--s3); }
@media (max-width: 767px) {
  .hero .hero-main { grid-column: 1; }
  .hero .hero-fig { display: none; }
}

/* ---------- 404 ---------- */
.nf { min-height: calc(100svh - var(--nav-h)); display: flex;
  align-items: center; justify-content: center; text-align: center;
  padding: var(--s8) 0; }
.nf-inner { max-width: 640px; padding-inline: var(--margin); }
.nf-num { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(6rem, 20vw, 11rem); line-height: 1; }
.nf .dim-rule { width: min(320px, 100%); margin: var(--s4) auto var(--s8); }
.nf p { margin: 0 auto var(--s5); }
.nf .nf-links { display: flex; gap: var(--s4); justify-content: center; }

/* ---------- print-adjacent hygiene ---------- */
figure.fig svg { display: block; width: 100%; height: auto; }
figure.fig figcaption { margin-top: var(--s2); }