/* ==========================================================================
   Wiseman Analytics
   One bold idea: the headline result, set huge like the key figure in a
   report. Everything else reads like a quiet, well-made document.
   Mobile-first. Light + dark. No framework, no build step. WCAG 2.2 AA.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Ratios measured with ../../assets/contrast-check.js */
  --paper:      #fbfbfa;   /* neutral off-white, not cream */
  --paper-alt:  #f1f1ef;
  --ink:        #16181d;   /* 17.2:1 on --paper */
  --ink-muted:  #4a4f59;   /* 7.9:1 on --paper, 7.3:1 on --paper-alt */
  --line:       #d7d9de;   /* decorative rules only */
  --line-ui:    #4a4f59;   /* input borders, 7.9:1 */
  --accent:     #9b1c31;   /* oxblood, the reviewer's red pen. 7.8:1 */
  --accent-ink: #ffffff;   /* 8.1:1 on --accent */
  --focus:      #1f5fbf;   /* 5.9:1 on --paper */
  --map-line:   #a7acb5;   /* decorative, 2.2:1; text keeps a paper halo over it */
  --btn:        var(--accent);
  --btn-ink:    var(--accent-ink);

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, sans-serif;
  /* Serif with lining figures on every platform: Charter (Apple), Sitka/Cambria
     (Windows), Noto Serif (Android). Georgia last; its numerals are old-style. */
  --font-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria,
                "Noto Serif", "Iowan Old Style", Georgia, serif;

  --step--1: clamp(0.88rem, 0.85rem + 0.15vw, 0.95rem);
  --step-0:  clamp(1.05rem, 1rem + 0.25vw, 1.15rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
  --step-3:  clamp(1.9rem, 1.5rem + 2vw, 3rem);
  --figure:  clamp(3.1rem, 0.9rem + 10.5vw, 7.25rem);   /* 404 page */

  --section-y: clamp(3rem, 8vw, 6rem);
  --wrap: 72rem;
  --radius: 3px;
  --header-h: 4.25rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Re-picked for dark. The oxblood becomes a lifted rose so it still reads
       as red ink on a dark page. */
    --paper:      #14161a;
    --paper-alt:  #1c1f24;
    --ink:        #e8e9ec;   /* 14.9:1 */
    --ink-muted:  #a3a8b3;   /* 7.6:1, 6.9:1 on --paper-alt */
    --line:       #2c3038;
    --line-ui:    #a3a8b3;
    --accent:     #ef8f8f;   /* warm red, not pink. 7.8:1, 7.1:1 on --paper-alt */
    --accent-ink: #1a0a0e;
    --focus:      #ffd166;   /* 12.6:1 */
    --map-line:   #5a606b;   /* 2.9:1 */
    /* Buttons go light ink in dark mode: big blocks of pale red read as pink.
       The red is kept for the figures, numbers and links. */
    --btn:        #e8e9ec;
    --btn-ink:    #14161a;   /* 14.9:1 */
  }
}

/* --- Reset ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  /* Keeps focused elements clear of the sticky header (WCAG 2.4.11) */
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
h1, h2, h3 { line-height: 1.15; text-wrap: balance; }
h1, h2 { font-family: var(--font-serif); font-weight: 600; }
p { text-wrap: pretty; }
abbr[title] { text-decoration: none; }

.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;
}

/* --- Focus ---------------------------------------------------------------- */

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* --- Links ---------------------------------------------------------------- */

a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

/* --- Layout --------------------------------------------------------------- */

.wrap {
  width: min(100% - 2rem, var(--wrap));
  margin-inline: auto;
}

.section { padding-block: var(--section-y); border-top: 1px solid var(--line); }
.section-alt { background: var(--paper-alt); }
.section h2 { font-size: var(--step-2); margin-bottom: 1.5rem; }
.section p { max-width: 62ch; }
.muted-text { color: var(--ink-muted); }

/* Report-style: heading in a narrow left column, content on the right. */
@media (min-width: 56rem) {
  .two-col {
    display: grid;
    grid-template-columns: 20rem 1fr;
    column-gap: 4rem;
    align-items: start;
  }
  .two-col > h2 { margin-bottom: 0; font-size: clamp(1.6rem, 1rem + 1vw, 2rem); }
}

/* --- Preview banner ------------------------------------------------------- */

.preview-banner {
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: var(--step--1);
  font-weight: 600;
}

/* --- Header --------------------------------------------------------------- */

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

/* Short screens (landscape phones, high zoom): don't pin the header,
   so it doesn't eat a quarter of the view. */
@media (max-height: 30rem) {
  .site-header { position: static; }
  html { scroll-padding-top: 1rem; }
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--header-h);
  padding-block: 0.6rem;
}

.logo {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--step-1);
  line-height: 1.15;
  white-space: nowrap;
  padding-block: 0.8rem;   /* 44px+ tap target */
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}

/* Phone: one line for the name, beside the button. Below 360px it may wrap. */
@media (max-width: 26rem) {
  .logo { font-size: 1.05rem; }
  .btn-small { padding-inline: 0.75rem; }
}
@media (max-width: 22.4rem) {
  .logo { white-space: normal; }
}

/* Below 64rem only the name and the call button fit. Hide the whole nav so
   it doesn't add flex gaps either. */
.site-header nav { display: none; }

@media (min-width: 64rem) {
  .header-inner { column-gap: 2rem; }
  .site-header nav { display: block; }
  .nav-list {
    display: flex;
    gap: 1.75rem;
    list-style: none;
    padding: 0;
  }
  .nav-list a {
    display: inline-block;
    padding-block: 0.6rem;
    color: var(--ink-muted);
    text-decoration: none;
  }
  .nav-list a:hover { color: var(--ink); text-decoration: underline; }
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.7rem 1.4rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary { background: var(--btn); color: var(--btn-ink); }
.btn-primary:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.btn-small { min-height: 44px; padding: 0.5rem 1rem; white-space: nowrap; }

/* --- Header button label -------------------------------------------------- */
/* The full label doesn't fit beside the name on small phones. Only one span
   is ever displayed, so the accessible name always matches what's visible. */
.label-long { display: none; }
@media (min-width: 32rem) {
  .label-long { display: inline; }
  .label-short { display: none; }
}

/* --- Hero: the one bold idea ---------------------------------------------- */
/* A process map: 14 steps on a tangled path slowly straighten into one line
   with a single step at the end, then ease back. Decorative and faint, so the
   headline keeps full contrast in every frame. */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(30rem, 72vh, 44rem);
  display: flex;
  align-items: center;
  padding-block: clamp(3rem, 8vw, 6rem) clamp(8.5rem, 14vw, 9rem);
}

.hero-inner { position: relative; }

/* One h1 in two parts, so headings and search engines get who he is too. */
.h1-main {
  display: block;
  font-size: clamp(2rem, 1.1rem + 4.6vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 17ch;
}

.h1-sub {
  display: block;
  margin-top: 1.25rem;
  max-width: 40ch;
  font-family: var(--font-sans);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--ink-muted);
}

/* Short screens (landscape phones, high zoom): a compact hero so the main
   button is reachable without a long scroll. */
@media (max-height: 30rem) {
  .hero { min-height: 0; padding-block: 1.5rem 6.5rem; }
  .h1-main { font-size: clamp(1.75rem, 1rem + 2.5vw, 2.4rem); max-width: none; }
  .h1-sub { margin-top: 0.6rem; font-size: var(--step-0); max-width: none; }
  .hero-action { margin-top: 1.25rem; }
}

.hero-action { margin-top: 2rem; }

/* The drawing stops above a 4.5rem strip at the bottom of the hero, which
   belongs to the pause button, so the final step can never land on it. */
.process-map {
  position: absolute;
  inset: 0 0 4.5rem 0;
  z-index: -1;
  width: 100%;
  height: calc(100% - 4.5rem);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Phones and portrait tablets get the narrow drawing, scaled to fit whole.
   Wide, landscape-shaped screens get the wide one. */
.process-map--wide { display: none; }
@media (min-width: 40rem) and (min-aspect-ratio: 6/5) {
  .process-map--wide { display: block; }
  .process-map--narrow { display: none; }
}

/* A halo in the page colour keeps every letter on clean background where
   the lines pass behind the text, so contrast is text-on-paper. */
.hero h1 {
  text-shadow: 0 0 3px var(--paper), 0 0 6px var(--paper), 0 0 10px var(--paper);
}

/* Default = the finished, simplified state. This is also the still frame
   for reduced motion and for visitors without JavaScript. */
.map-tangle { stroke: var(--map-line); stroke-width: 3; stroke-dashoffset: 0; opacity: 0.25; }
.map-nodes circle { fill: var(--paper); stroke: var(--map-line); stroke-width: 3; opacity: 0; }
.map-straight { stroke: var(--accent); stroke-width: 4; stroke-dashoffset: 0; }
.map-end { fill: var(--accent); stroke: none; }
.map-nodes circle,
.map-end { transform-box: fill-box; transform-origin: center; }

/* One 14-second loop, no waiting: the tangle draws itself in the first
   3 seconds, the steps drop out one by one, the red line draws across,
   the single step lands, then it fades and starts again. */
@media (prefers-reduced-motion: no-preference) {
  .map-tangle,
  .map-nodes circle,
  .map-straight,
  .map-end {
    animation-duration: 14s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
  }
  .process-map--wide .map-tangle { animation-name: map-tangle-wide; }
  .process-map--narrow .map-tangle { animation-name: map-tangle-narrow; }
  .process-map--wide .map-straight { animation-name: map-straight-wide; }
  .process-map--narrow .map-straight { animation-name: map-straight-narrow; }
  .map-nodes circle {
    animation-name: map-node;
    /* Steps pop in, then drop out, one after another */
    animation-delay: calc(var(--i) * 0.18s);
  }
  .map-end { animation-name: map-end; }

  /* Nothing moves until script.js has shown the pause button (WCAG 2.2.2).
     Without JavaScript, visitors get the still frame. */
  .hero:not(.motion-on) .process-map * { animation: none; }

  /* Paused by the button, or while the hero is off-screen */
  .hero.is-paused .process-map *,
  .hero.is-offscreen .process-map * { animation-play-state: paused; }
}

@keyframes map-node {
  0%       { opacity: 0; transform: scale(0.3); }
  5%       { opacity: 1; transform: scale(1.15); }
  8%, 40%  { opacity: 1; transform: scale(1); }
  48%, 100% { opacity: 0; transform: scale(0.3); }
}
@keyframes map-end {
  0%, 70% { opacity: 0; transform: scale(0.3); }
  76%     { opacity: 1; transform: scale(1.3); }
  80%, 90% { opacity: 1; transform: scale(1); }
  100%    { opacity: 0; transform: scale(1); }
}

@keyframes map-tangle-wide {
  0%   { stroke-dashoffset: 2718.5; opacity: 1; }
  20%  { stroke-dashoffset: 0; opacity: 1; }
  42%  { opacity: 1; }
  62%  { opacity: 0.25; }
  90%  { stroke-dashoffset: 0; opacity: 0.25; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes map-straight-wide {
  0%, 46% { stroke-dashoffset: 900.0; opacity: 1; }
  72%     { stroke-dashoffset: 0; opacity: 1; }
  90%     { stroke-dashoffset: 0; opacity: 1; }
  100%    { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes map-tangle-narrow {
  0%   { stroke-dashoffset: 1914.4; opacity: 1; }
  20%  { stroke-dashoffset: 0; opacity: 1; }
  42%  { opacity: 1; }
  62%  { opacity: 0.25; }
  90%  { stroke-dashoffset: 0; opacity: 0.25; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes map-straight-narrow {
  0%, 46% { stroke-dashoffset: 260.0; opacity: 1; }
  72%     { stroke-dashoffset: 0; opacity: 1; }
  90%     { stroke-dashoffset: 0; opacity: 1; }
  100%    { stroke-dashoffset: 0; opacity: 0; }
}

/* Pause button: visible, keyboard-reachable, out of the way. */
.motion-toggle {
  position: absolute;
  right: max(1rem, (100% - var(--wrap)) / 2);
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line-ui);
  border-radius: var(--radius);
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
}
.motion-toggle[hidden] { display: none; }
.motion-toggle:hover { border-color: var(--ink); }
.motion-toggle svg { fill: currentColor; }
.motion-toggle .icon-play { display: none; }
.hero.is-paused .motion-toggle .icon-play { display: inline; }
.hero.is-paused .motion-toggle .icon-pause { display: none; }

@media (prefers-reduced-motion: reduce) {
  .motion-toggle { display: none; }
}

/* --- Case study ----------------------------------------------------------- */

.case h3 { font-family: var(--font-serif); font-size: var(--step-2); font-weight: 600; }
.case-sector { margin-top: 0.35rem; color: var(--ink-muted); font-weight: 600; }

.case-parts {
  margin: 1.75rem 0 0;
  display: grid;
  gap: 1.25rem;
}
.case-parts dt { font-weight: 700; }
.case-parts dd { margin: 0.25rem 0 0; max-width: 58ch; }
.case-parts q {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.45;
}

@media (min-width: 64rem) {
  .case-parts { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
}

.result {
  container-type: inline-size;
  margin: 2.5rem 0 0;
  border-top: 2px solid var(--ink);
}
.result-title { padding-top: 0.75rem; font-weight: 700; }

.figures { margin: 0; }

.figure-row {
  padding-block: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
}

.figure-row dt {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-muted);
}

.figure-row dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.12em;
  font-family: var(--font-serif);
  /* Sized to the figure's own width, so "40 days → 30 mins" always fills
     the column on one line, from a 360px phone to a wide desktop. */
  font-size: var(--figure);
  font-size: min(6.5rem, 17cqi);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.03em;
}

.figure-row abbr { font-size: 0.42em; letter-spacing: 0; }

/* "Before" in muted ink, struck through in red pen. */
.before {
  position: relative;
  color: var(--ink-muted);
  font-weight: 400;
  text-decoration: none;
}
.before::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  top: 52%;
  height: 0.06em;
  min-height: 3px;
  background: var(--accent);
  transform: rotate(-4deg);
}

.arrow {
  color: var(--ink-muted);
  font-size: 0.55em;
  padding-inline: 0.15em;
  align-self: center;
}

.after { color: var(--accent); font-weight: 600; }

/* --- How I work ----------------------------------------------------------- */

.stages {
  list-style: none;
  padding: 0;
  counter-reset: stage;
  border-top: 1px solid var(--line);
}

.stages li {
  counter-increment: stage;
  display: grid;
  grid-template-columns: 3rem 1fr;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.stages li::before {
  content: counter(stage);
  grid-row: span 2;
  font-family: var(--font-serif);
  font-size: var(--step-2);
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: lining-nums;
}

.stages h3 { font-size: var(--step-1); font-weight: 600; }
.stages p { color: var(--ink-muted); margin-top: 0.35rem; }

/* --- Pull quote ----------------------------------------------------------- */

.pull {
  padding-block: clamp(3.5rem, 10vw, 7rem);
  border-top: 1px solid var(--line);
}

.pull-quote { margin: 0; max-width: 46rem; }

.pull-quote blockquote p {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 3rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-indent: -0.4em;   /* hangs the opening quote mark */
}
.pull-quote blockquote p::before { content: "\201C"; color: var(--accent); }
.pull-quote blockquote p::after { content: "\201D"; color: var(--accent); }

.pull-quote figcaption {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  margin-top: 2rem;
  font-weight: 700;
}
.pull-role { display: block; font-weight: 400; color: var(--ink-muted); font-size: var(--step--1); }

/* Portrait, like a photo pinned to a report. The hairline keeps the pale
   wall in the photo from melting into the page in light mode. */
.headshot {
  flex: none;
  width: 5.5rem;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  outline: 1px solid var(--line);
  outline-offset: -1px;
}
@media (min-width: 48rem) {
  .headshot { width: 9rem; }
}

/* --- Experience ----------------------------------------------------------- */

.experience { display: grid; gap: 2rem; }
.experience h3 { font-size: var(--step-0); margin-bottom: 0.5rem; }

/* Sectors get their own row; skills and tools sit side by side below. */
@media (min-width: 40rem) {
  .experience { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
  .experience > :first-child { grid-column: 1 / -1; }
}

.sectors {
  list-style: none;
  padding: 0;
  font-family: var(--font-serif);
  font-size: var(--step-2);
  line-height: 1.3;
}
.sectors li { padding-block: 0.3rem; }

.plain-list { list-style: none; padding: 0; color: var(--ink-muted); }
.plain-list li { padding-block: 0.15rem; }

/* --- Recommendations ------------------------------------------------------ */

.recs {
  display: grid;
  gap: 1.5rem;
  margin-block: 1.5rem;
}

.rec {
  margin: 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--accent);
}
.rec blockquote p {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.45;
}
.rec figcaption { margin-top: 0.5rem; color: var(--ink-muted); font-size: var(--step--1); }

/* Empty slot, waiting for a real recommendation. Obvious on purpose. */
.rec.slot {
  border-left-style: dashed;
  border-left-color: var(--line-ui);
}
.rec.slot blockquote p { color: var(--ink-muted); font-style: italic; }

@media (min-width: 72rem) {
  .recs { grid-template-columns: repeat(3, 1fr); }
}

/* --- Contact -------------------------------------------------------------- */

.contact-grid { display: grid; gap: 2.5rem; }

@media (min-width: 64rem) {
  .contact-grid { grid-template-columns: 1.4fr 1fr; gap: 3.5rem; }
}

.contact-form { margin-top: 1.5rem; max-width: 34rem; }

.field { margin-bottom: 1.1rem; }

.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.optional { font-weight: 400; color: var(--ink-muted); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.65rem 0.8rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line-ui);
  border-radius: var(--radius);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--ink); }

.field [aria-invalid="true"] { border: 2px solid var(--accent); }

.field-error {
  margin-top: 0.35rem;
  color: var(--accent);
  font-weight: 600;
  font-size: var(--step--1);
}
.field-error::before { content: "Error: "; }

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

.form-status { margin-top: 1rem; font-weight: 600; }
.form-status:empty { display: none; }
.form-note { margin-top: 0.75rem; font-size: var(--step--1); color: var(--ink-muted); }

.contact-direct h3 { font-size: var(--step-0); }

.contact-list {
  list-style: none;
  padding: 0;
  margin-top: 0.75rem;
  border-top: 1px solid var(--line);
}
.contact-list li {
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.contact-label {
  display: block;
  font-size: var(--step--1);
  color: var(--ink-muted);
}

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  padding-block: 2.5rem;
  border-top: 2px solid var(--ink);
  font-size: var(--step--1);
}
.footer-inner { display: grid; gap: 0.4rem; }
.legal { color: var(--ink-muted); max-width: 70ch; }
.gap {
  padding: 0 0.25em;
  border: 1px dashed var(--line-ui);
  font-style: italic;
}

/* --- 404 ------------------------------------------------------------------ */

.not-found { padding-block: clamp(3rem, 10vw, 7rem); }
.not-found .code {
  font-family: var(--font-serif);
  font-size: var(--figure);
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: lining-nums;
}
.not-found h1 { font-size: var(--step-3); margin-top: 1rem; }
.not-found p { margin-top: 1rem; max-width: 50ch; }
.not-found .btn { margin-top: 1.5rem; }

/* --- Motion --------------------------------------------------------------- */

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

/* --- Print ---------------------------------------------------------------- */

@media print {
  .site-header, .preview-banner, .hero-action, .contact-form, .process-map, .motion-toggle { display: none; }
  body { color: #000; background: #fff; }
}