/* ==========================================================================
   nauni.co.uk — compiled from the Nauni Design System.
   Order mirrors the design system's styles.css: fonts, colours, typography,
   spacing, effects, base, then components and page composition.
   ========================================================================== */

/* --------------------------------------------------------------- fonts -- */
/* Archivo (variable width — echoes the extended lowercase wordmark) and IBM
   Plex Mono, self-hosted so no third party sees a visitor's IP. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plexmono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plexmono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plexmono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plexmono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* -------------------------------------------------------------- tokens -- */

:root {
  /* brand */
  --brand-silver: #cbcdcc;

  /* base palette — "graphite & copper" */
  --paper-0: #f2f2f0; --paper-1: #e8e8e5; --paper-2: #dcdcd8;
  --ink-0: #17181a; --ink-1: #2e3033; --ink-2: #5c6066; --ink-3: #8e9298;
  --line-1: #d3d3cf; --line-2: #b9b9b4;
  --accent-900: #6f3414; --accent-700: #94491f;
  /* The system specifies #b8612f; white on it is 4.39:1, just under AA for the
     button label. Darkened a shade to 4.62:1 — indistinguishable side by side. */
  --accent-500: #b45d2b;
  --accent-300: #dca584; --accent-100: #f3e2d6;
  --amber-500: #b5681c; --red-500: #a83a2a; --green-500: #2b6b4d;

  /* semantic */
  --bg-page: var(--paper-0); --bg-raised: var(--paper-1); --bg-sunken: var(--paper-2);
  --bg-inverse: var(--ink-0); --bg-inverse-raised: #232528;
  --surface-card: #fafaf8; --surface-code: var(--ink-0);
  --text-body: var(--ink-1); --text-heading: var(--ink-0); --text-muted: var(--ink-2);
  /* Deviation from the design system: --text-faint would be var(--ink-3) (#8e9298),
     which is 2.8:1 on paper — it is only ever used for small text (client names,
     the mono location and index labels), so it is darkened to clear WCAG AA.
     --ink-3 itself is untouched and still backs --text-on-inverse-muted, where it
     sits on the ink footer at 5.7:1. */
  --text-faint: #6a6e74; --text-on-accent: #ffffff;
  --text-on-inverse: var(--paper-1); --text-on-inverse-muted: var(--ink-3);
  --accent: var(--accent-500); --accent-hover: var(--accent-700);
  --accent-soft: var(--accent-100); --accent-text: var(--accent-700);
  --border-default: var(--line-1); --border-strong: var(--line-2); --border-focus: var(--accent-500);
  --status-warn: var(--amber-500); --status-error: var(--red-500); --status-ok: var(--green-500);
  --link: var(--accent-700); --link-hover: var(--accent-900);

  /* abstract colour blocks */
  --block-1: var(--accent-500); --block-2: var(--brand-silver);
  --block-3: var(--ink-0); --block-4: var(--accent-100);

  /* typography */
  --font-sans: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --wdth-display: 112;
  --text-xs: 12px; --text-sm: 14px; --text-md: 16px; --text-lg: 19px;
  --text-xl: 24px; --text-2xl: 32px; --text-3xl: 44px; --text-4xl: 64px;
  --leading-tight: 1.02; --leading-snug: 1.25; --leading-body: 1.55;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;
  --tracking-tight: -0.03em; --tracking-normal: 0; --tracking-wide: 0.1em;

  --type-display: var(--weight-medium) var(--text-4xl)/var(--leading-tight) var(--font-sans);
  --type-h1: var(--weight-medium) var(--text-3xl)/var(--leading-tight) var(--font-sans);
  --type-h2: var(--weight-medium) var(--text-2xl)/var(--leading-snug) var(--font-sans);
  --type-h3: var(--weight-medium) var(--text-xl)/var(--leading-snug) var(--font-sans);
  --type-body: var(--weight-regular) var(--text-md)/var(--leading-body) var(--font-sans);
  --type-body-lg: var(--weight-regular) var(--text-lg)/var(--leading-body) var(--font-sans);
  --type-small: var(--weight-regular) var(--text-sm)/var(--leading-body) var(--font-sans);
  --type-label: var(--weight-medium) var(--text-xs)/1 var(--font-mono);
  --type-code: var(--weight-regular) var(--text-sm)/var(--leading-body) var(--font-mono);

  /* spacing */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 144px;
  --container-max: 1120px; --container-narrow: 720px; --gutter: var(--space-5);
  --section-gap: var(--space-9);
  --header-h: 68px;

  /* effects */
  --radius-sm: 2px; --radius-md: 4px; --radius-pill: 999px;
  --shadow-card: 0 1px 0 rgba(22, 26, 23, 0.06);
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms; --dur-base: 200ms;
  --focus-ring: 0 0 0 2px var(--bg-page), 0 0 0 4px var(--border-focus);
}

/* The other two themes ship with the system; set data-theme on <html> to use one. */
[data-theme="navy"] {
  --paper-0: #f4f6f9; --paper-1: #e9edf2; --paper-2: #dde3ea;
  --ink-0: #0e1a2b; --ink-1: #22334a; --ink-2: #55667c; --ink-3: #8896a8;
  --line-1: #d5dbe3; --line-2: #b8c2cf;
  --accent-900: #0f3461; --accent-700: #164780; --accent-500: #1f5fa8;
  --accent-300: #8fb4dd; --accent-100: #dbe7f5;
  --bg-inverse-raised: #1a2a40; --surface-card: #fbfcfd;
}
[data-theme="moss"] {
  --paper-0: #f7f4ee; --paper-1: #efeae0; --paper-2: #e4ddcf;
  --ink-0: #161a17; --ink-1: #2b322d; --ink-2: #565e58; --ink-3: #8a918b;
  --line-1: #d9d2c4; --line-2: #c4bcab;
  --accent-900: #0f2e22; --accent-700: #1b4a36; --accent-500: #2b6b4d;
  --accent-300: #8fbca4; --accent-100: #dcebe1;
  --bg-inverse-raised: #222924; --surface-card: #fbf9f5;
}

/* ---------------------------------------------------------------- base -- */

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

html {
  background: var(--bg-page);
  color: var(--text-body);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
body { margin: 0; overflow-wrap: break-word; }

h1, h2, h3, .display {
  font-variation-settings: "wdth" var(--wdth-display);
  letter-spacing: var(--tracking-tight);
}
h1, h2, h3, p, figure { margin: 0; }

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); }

code, pre, kbd { font: var(--type-code); }
img, svg { max-width: 100%; }
address { font-style: normal; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

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

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

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--bg-page); color: var(--text-heading);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  padding: 10px 16px; font: var(--type-small); font-weight: 500; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* Every rule below that sets `font: var(--type-display|h1|h2|h3)` re-declares
   font-variation-settings: the `font` shorthand resets it, which would drop the
   extended display width the brand's headings depend on. */

/* ------------------------------------------------------------- layout -- */

.wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--container-narrow); }

.section { margin-top: var(--section-gap); }
.section[id], main[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

.eyebrow {
  font: var(--type-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow--light { color: var(--text-on-inverse-muted); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: end;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-default);
}
.section-head h2 {
  font: var(--type-h2); font-variation-settings: "wdth" var(--wdth-display);
  color: var(--text-heading);
  margin-top: var(--space-3);
  max-width: 560px;
  text-wrap: pretty;
}

/* ---------------------------------------------------- abstract blocks -- */
/* Stands in for photography: a 2x2 grid of brand colour fields, sometimes with
   the ring cropped inside one cell. Variants match Blocks() in the UI kit. */

.blocks {
  /* A size container so the ring crops against the whole composition rather than
     the one cell it sits in — the cells differ in size between variants. */
  container-type: size;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-1);
}
.blocks > i { position: relative; overflow: hidden; display: block; }
.blocks .ring { position: absolute; height: auto; }

.blocks--1 > i:nth-child(1) { background: var(--block-1); grid-row: 1 / 3; }
.blocks--1 > i:nth-child(2) { background: var(--block-2); }
.blocks--1 > i:nth-child(3) { background: var(--block-3); }
.blocks--1 .ring { width: 32cqw; right: -11cqw; bottom: -14cqw; }

.blocks--2 > i:nth-child(1) { background: var(--block-4); }
.blocks--2 > i:nth-child(2) { background: var(--block-3); grid-row: 1 / 3; }
.blocks--2 > i:nth-child(3) { background: var(--block-1); }
.blocks--2 .ring { width: 36cqw; left: -9cqw; top: -7cqw; }

.blocks--3 > i:nth-child(1) { background: var(--block-3); grid-column: 1 / 3; }
.blocks--3 > i:nth-child(2) { background: var(--block-1); }
.blocks--3 > i:nth-child(3) { background: var(--block-4); }

.blocks--4 > i:nth-child(1) { background: var(--block-2); grid-row: 1 / 3; }
.blocks--4 > i:nth-child(2) { background: var(--block-1); }
.blocks--4 > i:nth-child(3) { background: var(--block-3); }
.blocks--4 .ring { width: 34cqw; left: -7cqw; bottom: -16cqw; }

/* ---------------------------------------------------------- components -- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--weight-medium) 14px/1 var(--font-sans);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--text-on-accent);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--accent-hover); color: var(--text-on-accent); }
/* The kit's Button presses to --green-900, which the graphite theme does not define. */
.btn:active { background: var(--accent-900); }
.btn svg { flex: none; }

.btn--sm { font-size: 13px; padding: 6px 12px; }
.btn--lg { font-size: 16px; padding: 14px 22px; }

.btn--secondary {
  background: transparent;
  color: var(--text-heading);
  border-color: var(--border-strong);
}
.btn--secondary:hover { background: var(--bg-raised); color: var(--text-heading); }
.btn--secondary:active { background: var(--bg-sunken); }

.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

/* -------------------------------------------------------------- header -- */

.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg-page);
  border-bottom: 1px solid var(--border-default);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h); gap: var(--space-5);
}
.wordmark { display: flex; text-decoration: none; }
.wordmark img { width: 112px; height: auto; display: block; }

.site-nav { display: flex; gap: 28px; align-items: center; }
/* :not(.btn) so the CTA keeps the button's own font, padding and colours. */
.site-nav a:not(.btn) {
  font: var(--type-small); font-weight: 500; text-decoration: none;
  color: var(--text-muted); border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.site-nav a:not(.btn):hover { color: var(--text-heading); }
.site-nav a:not(.btn)[aria-current] { color: var(--text-heading); border-bottom-color: var(--text-heading); }
.site-nav .btn { flex: none; }

.nav-toggle {
  display: none; align-items: center; gap: 8px; cursor: pointer;
  background: none; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  color: var(--text-heading); font: var(--type-small); font-weight: 500; padding: 7px 12px;
}

/* ---------------------------------------------------------------- hero -- */

.hero { padding: var(--space-9) 0 var(--space-8); }
.hero .wrap {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-8); align-items: center;
}
.hero h1 { font: var(--type-display); font-variation-settings: "wdth" var(--wdth-display); color: var(--text-heading); margin-top: var(--space-5); text-wrap: pretty; }
.hero p:not(.eyebrow) { font: var(--type-body-lg); max-width: 520px; margin-top: var(--space-5); text-wrap: pretty; }
.actions { display: flex; gap: var(--space-2); margin-top: 36px; flex-wrap: wrap; }
.hero .blocks { aspect-ratio: 1 / 1; }

/* -------------------------------------------------------- client strip -- */

.clients {
  display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}
.clients .eyebrow { flex: none; }
/* The names take the rest of the row and spread across it, so the strip reads as a
   band edge to edge rather than trailing off into empty space on the right. */
.clients ul {
  flex: 1 1 auto;
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-4) var(--space-6); flex-wrap: wrap;
  list-style: none; margin: 0; padding: 0;
}
.clients li {
  font: var(--weight-medium) 20px/1 var(--font-sans);
  font-variation-settings: "wdth" var(--wdth-display);
  letter-spacing: var(--tracking-tight);
  color: var(--text-faint);
}

/* ------------------------------------------------------------ services -- */

.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--border-default);
  border: 1px solid var(--border-default);
  margin-top: var(--space-6);
  list-style: none; padding: 0;
}
.services > li {
  background: var(--surface-card);
  padding: 28px var(--space-5) var(--space-6);
  display: grid; gap: var(--space-4); align-content: start;
}
.services .blocks { height: 72px; width: 72px; }
/* The small service tiles crop the ring hard, as the kit does at 72px. */
.services .blocks .ring { width: 190cqw; }
.services .num { font: var(--type-label); color: var(--text-faint); letter-spacing: 0.1em; }
.services h3 { font: var(--type-h3); font-variation-settings: "wdth" var(--wdth-display); color: var(--text-heading); margin-top: var(--space-2); }
.services p { font: var(--type-small); color: var(--text-muted); text-wrap: pretty; }

/* ------------------------------------------------------------- process -- */

.process-band { margin-top: var(--section-gap); background: var(--bg-raised); padding: var(--space-8) 0; }
/* When the raised band is the last thing on the page it should meet the ink footer,
   rather than leaving a strip of paper between two filled bands. */
main:has(> .process-band:last-child) + .site-footer { margin-top: 0; }
.process {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6); margin-top: 40px; list-style: none; padding: 0;
}
.process .num {
  font: var(--weight-medium) 44px/1 var(--font-sans);
  font-variation-settings: "wdth" var(--wdth-display);
  letter-spacing: var(--tracking-tight);
  color: var(--accent);
}
.process h3 { font: var(--type-h3); font-variation-settings: "wdth" var(--wdth-display); color: var(--text-heading); margin-top: 20px; }
.process p { margin-top: 10px; font: var(--type-small); color: var(--text-muted); text-wrap: pretty; }

/* -------------------------------------------------------------- footer -- */

.site-footer {
  background: var(--bg-inverse); color: var(--text-on-inverse);
  margin-top: var(--section-gap); position: relative; overflow: hidden;
}
.site-footer .ring-motif {
  position: absolute; right: -260px; top: -120px; width: 720px; height: auto;
  opacity: 0.12; pointer-events: none;
}
.footer-main {
  position: relative;
  padding-block: var(--space-8);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8);
}
.footer-main h2 {
  font: var(--type-h1); font-variation-settings: "wdth" var(--wdth-display); color: var(--paper-0);
  margin-top: var(--space-4); max-width: 480px; text-wrap: pretty;
}
.footer-main > div > p:not(.eyebrow) {
  margin-top: var(--space-4); color: var(--text-on-inverse-muted);
  max-width: 440px; font: var(--type-body-lg);
}
.contact-details { align-self: start; list-style: none; margin: 0; padding: 0; }
.contact-details > div { padding: var(--space-4) 0; border-top: 1px solid var(--bg-inverse-raised); }
.contact-details > div:last-child { border-bottom: 1px solid var(--bg-inverse-raised); }
.contact-details dd { margin: var(--space-2) 0 0; color: var(--paper-1); }
.contact-details .email {
  font: var(--type-h3); font-variation-settings: "wdth" var(--wdth-display);
  color: var(--paper-0); text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.contact-details .email:hover { color: var(--accent-300); }

.footer-bar { border-top: 1px solid var(--bg-inverse-raised); position: relative; }
.footer-bar .wrap {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 64px; gap: var(--space-5); flex-wrap: wrap; padding-block: var(--space-3);
}
.footer-bar img { width: 84px; height: auto; display: block; }
.footer-bar nav { display: flex; gap: var(--space-5); font: var(--type-small); flex-wrap: wrap; }
.footer-bar nav a { color: var(--text-on-inverse-muted); text-decoration: none; }
.footer-bar nav a:hover { color: var(--paper-0); }
.footer-bar .legal {
  font: var(--type-label); line-height: 1.6; color: var(--text-on-inverse-muted);
  letter-spacing: 0.06em; text-align: right;
}

/* -------------------------------------------------------------- prose -- */
/* Long-form pages: the privacy notice. Measure capped at the narrow container. */

.page-head { padding: var(--space-8) 0 var(--space-6); border-bottom: 1px solid var(--border-default); }
.page-head h1 { font: var(--type-h1); font-variation-settings: "wdth" var(--wdth-display); color: var(--text-heading); margin-top: var(--space-4); text-wrap: pretty; }
.page-head p { margin-top: var(--space-4); color: var(--text-muted); }

.prose { max-width: var(--container-narrow); padding-block: var(--space-7) var(--space-8); }
.prose h2 {
  font: var(--type-h3); font-variation-settings: "wdth" var(--wdth-display);
  color: var(--text-heading); margin-top: var(--space-7);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font: var(--weight-medium) var(--text-md)/var(--leading-snug) var(--font-sans); color: var(--text-heading); margin-top: var(--space-5); }
.prose p { margin-top: var(--space-3); text-wrap: pretty; }
.prose ul { margin: var(--space-3) 0 0; padding-left: var(--space-5); }
.prose li { margin-top: var(--space-2); text-wrap: pretty; }
.prose li::marker { color: var(--text-faint); }
.prose dl { margin: var(--space-4) 0 0; }
.prose dt { font: var(--type-label); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); margin-top: var(--space-4); }
.prose dd { margin: 6px 0 0; }
.prose .lede { font: var(--type-body-lg); }
.prose address { margin-top: var(--space-3); }

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

.notfound { padding: var(--space-9) 0 var(--space-8); }
.notfound .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); align-items: center; }
.notfound h1 { font: var(--type-h1); font-variation-settings: "wdth" var(--wdth-display); color: var(--text-heading); margin-top: var(--space-5); }
.notfound p:not(.eyebrow) { font: var(--type-body-lg); max-width: 520px; margin-top: var(--space-5); }
.notfound .blocks { aspect-ratio: 1 / 1; }

/* --------------------------------------------------------- breakpoints -- */
/* Chosen from measurement, not round numbers. The header nav needs ~417px beside
   the wordmark, and the hero's two columns stay comfortable to ~840px — so both
   held on far longer than the old 720/1000 pair allowed, which made ordinary
   desktop windows render as if they were phones. */

/* Type only: the layout is unchanged here, the display sizes just stop dominating. */
@media (max-width: 1080px) {
  :root { --text-4xl: 52px; --text-3xl: 38px; --section-gap: var(--space-8); }
}

/* Structural: the 7/5 split stops earning its keep, and the process band halves. */
@media (max-width: 840px) {
  .hero .wrap, .notfound .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .hero .blocks, .notfound .blocks { max-width: 380px; }
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-6); }
  .footer-main { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .section-head { grid-template-columns: minmax(0, 1fr); }
  .clients ul { justify-content: flex-start; gap: var(--space-4) var(--space-5); }
}

/* Phone: the nav genuinely no longer fits beside the wordmark. */
@media (max-width: 600px) {
  :root { --text-4xl: 40px; --text-3xl: 32px; --text-2xl: 26px; --text-xl: 20px; }

  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-page); border-bottom: 1px solid var(--border-default);
    padding: var(--space-2) var(--gutter) var(--space-5);
  }
  .site-nav[data-open] { display: flex; }
  .site-nav a:not(.btn) { padding: 12px 0; border-bottom: 1px solid var(--border-default); }
  .site-nav a:not(.btn)[aria-current] { border-bottom-color: var(--border-default); }
  .site-nav .btn { margin-top: var(--space-4); justify-content: center; }

  .hero { padding: var(--space-8) 0 var(--space-7); }
  .clients { gap: var(--space-4); }
  .process { grid-template-columns: minmax(0, 1fr); }
  .site-footer .ring-motif { right: -300px; width: 560px; }
  .footer-bar .legal { text-align: left; }
}