/* ==========================================================================
   manuelmerki.com — landing page
   Implemented from the Claude Design source "Manuel Merki - Landing Page".
   Colour tokens are the design's OKLCH values, each preceded by an sRGB
   fallback for browsers without OKLCH support.
   ========================================================================== */

/* --- Fonts (self-hosted; no third-party requests) ------------------------ */

/* Archivo — variable weight axis, one file per subset */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/archivo-latin-OxKsv4Rn.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: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/archivo-latin-ext-sv4RnUPU.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;
}

/* IBM Plex Mono — static instances */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-latin-q131nj-o.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/ibm-plex-mono-latin-ext-1nj-otFQ.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/ibm-plex-mono-latin-FgsAXHNk.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/ibm-plex-mono-latin-ext-AXHNlYzg.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 {
  --bg: #09162f;
  --bg: oklch(0.205 0.052 262);
  --bg-alt: #071228;
  --bg-alt: oklch(0.185 0.048 262);
  --bg-footer: #050f23;
  --bg-footer: oklch(0.17 0.045 262);

  --fg: #f2f5fb;
  --fg: oklch(0.97 0.008 262);
  --fg-2: #ccd1db;
  --fg-2: oklch(0.86 0.015 262);
  --fg-3: #c5cbd5;
  --fg-3: oklch(0.84 0.015 262);
  --fg-chip: #d2d8e2;
  --fg-chip: oklch(0.88 0.015 262);
  --fg-list: #bdc4d1;
  --fg-list: oklch(0.82 0.02 262);
  --fg-nav: #b7becb;
  --fg-nav: oklch(0.80 0.02 262);
  --fg-foot: #b0b8c5;
  --fg-foot: oklch(0.78 0.02 262);
  --fg-muted: #aab1be;
  --fg-muted: oklch(0.76 0.02 262);
  --fg-quiet: #989fab;
  --fg-quiet: oklch(0.70 0.02 262);
  --fg-meta-2: #9299a5;
  --fg-meta-2: oklch(0.68 0.02 262);
  --fg-meta: #8c939f;
  --fg-meta: oklch(0.66 0.02 262);
  --fg-dim: #808693;
  --fg-dim: oklch(0.62 0.02 262);

  --line: #283347;
  --line: oklch(0.32 0.04 262);
  --line-soft: #202b3f;
  --line-soft: oklch(0.29 0.04 262);
  --line-strong: #374358;
  --line-strong: oklch(0.38 0.04 262);
  --line-input: #2d384d;
  --line-input: oklch(0.34 0.04 262);
  --line-badge: #323d52;
  --line-badge: oklch(0.36 0.04 262);
  --rule-under: #414d63;
  --rule-under: oklch(0.42 0.04 262);
  /* Lifted from the design's 0.42, which sat at 2.12:1 against the page and
     failed the contrast audit. 3.87:1 clears the 3:1 bar for large text with
     margin while keeping the step numerals subordinate to their headings. */
  --numeral: #657592;
  --numeral: oklch(0.56 0.05 262);

  /* Accent — swap this one pair to re-theme the whole page.
     Design alternatives: #d6b26a / oklch(0.78 0.10 84)  (gold, current)
                          #4f9bf0 / oklch(0.70 0.15 252) (blue)
                          #56a8d8 / oklch(0.72 0.11 232) (steel)  */
  --accent: #d6b26a;
  --accent: oklch(0.78 0.10 84);
  --on-accent: #050d1e;
  --on-accent: oklch(0.16 0.04 262);

  /* Availability dot — same lightness as the accent so it sits in the palette. */
  --status-ok: #59d38c;
  --status-ok: oklch(0.78 0.15 155);

  --chip-on: #ebeff4;
  --chip-on: oklch(0.95 0.008 262);
  --chip-on-fg: #0a152a;
  --chip-on-fg: oklch(0.20 0.045 262);
  --danger: #fe8674;
  --danger: oklch(0.75 0.15 30);

  --wrap: min(1200px, 90vw);
  --sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- Base ---------------------------------------------------------------- */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--fg); }

::selection { background: var(--accent); color: var(--on-accent); }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.025em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* height:auto is load-bearing — without it the HTML height attribute lands as a
   presentational hint and wins over any CSS aspect-ratio. */
img { max-width: 100%; height: auto; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--on-accent);
  padding: 12px 20px;
  font-weight: 600;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
  color: var(--on-accent);
}

/* Anchor jumps land 60px down — less than the sticky header's 72–80px — so a
   section's top hairline tucks up behind the header instead of arriving as a
   second line a few pixels below the header's own border. */
[id] { scroll-margin-top: 60px; }

.wrap { width: var(--wrap); margin-inline: auto; }

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

/* --- Shared type --------------------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.section-eyebrow { display: block; margin-bottom: 22px; }

.section-title {
  font-size: clamp(1.85rem, 3.4vw, 2.85rem);
  line-height: 1.12;
  max-width: 24ch;
}

.label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-meta);
  margin-bottom: 20px;
}

.kicker {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.mark { color: var(--accent); flex: none; }

/* Inline icon sprite: defined once in the page, referenced with <use>. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.ico {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--accent);
  align-self: flex-start;
  /* Optically centres the 18px glyph on the first 27px line box. */
  margin-top: 5px;
}

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

.btn,
.btn-ghost {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 2px;
  font-size: 0.98rem;
  font-family: var(--sans);
  line-height: 1.65;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.btn {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  font-weight: 600;
}
.btn:hover { background: var(--fg); color: var(--on-accent); }
.btn:disabled { cursor: default; opacity: 0.72; }
.btn:disabled:hover { background: var(--accent); }

.btn-ghost {
  border: 1px solid var(--line-strong);
  color: var(--fg);
  font-weight: 500;
}
.btn-ghost:hover { border-color: var(--fg); color: var(--fg); }

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

/* Opaque rather than blurred-translucent. At 88% over a flat dark background
   the blur was doing nothing — measured max 3/255 per-channel difference
   against a solid fill — while costing a backdrop snapshot re-blurred on every
   scroll frame, the only expensive compositing on the page. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  padding: 16px 0;
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--fg);
  margin-right: auto;
}
.brand:hover { color: var(--fg); }
.brand__name {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.brand__role {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-meta);
}

.site-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 0.9rem;
}
.site-nav a { color: var(--fg-nav); }
.site-nav a:hover { color: var(--fg); }

.nav-cta {
  border: 1px solid var(--accent);
  color: var(--fg);
  padding: 9px 18px;
  border-radius: 2px;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background 140ms ease, color 140ms ease;
}
.nav-cta:hover { background: var(--accent); color: var(--on-accent); }

/* --- Hero ---------------------------------------------------------------- */

.hero { padding: clamp(64px, 11vh, 128px) 0 clamp(48px, 7vh, 88px); }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-bottom: 34px;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line-badge);
  border-radius: 999px;
  padding: 5px 14px 5px 11px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--fg-list);
}
.status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--status-ok);
  flex: none;
}

.hero h1 {
  font-size: clamp(2.5rem, 5.6vw, 4.6rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
  /* Tuned so the headline falls naturally as
     "Technical leadership / for complex AI + Web / delivery."
     At this weight and tracking the widest wanted line is 8.98em and the
     unwanted break ("Technical leadership for") is 10.10em, so anything in
     between holds. em, not ch, so it tracks the clamped font size. */
  max-width: 9.5em;
}

.hero__lead {
  margin-top: 38px;
  max-width: 1000px;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--fg-2);
  line-height: 1.6;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 44px;
}

/* --- Stats band ---------------------------------------------------------- */

.stats {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}
/* Explicit column counts rather than auto-fit: auto-fit dropped to three
   tracks around tablet width, which left a lone fourth cell on row two with a
   divider hanging off its left edge and nothing to divide. */
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat {
  padding: 30px 26px;
  border-left: 1px solid var(--line);
}
.stat:first-child { padding-left: 0; border-left: none; }
.stat:last-child { padding-right: 0; }
.stat__value {
  font-family: var(--mono);
  font-size: 1.9rem;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.stat__value--sm {
  font-size: 1.15rem;
  padding-top: 10px;
}
.stat__label {
  font-size: 0.9rem;
  color: var(--fg-quiet);
  margin-top: 8px;
}

/* --- Section frames ------------------------------------------------------ */

.band {
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
}
/* For a band that directly follows something already drawing a rule (the stats
   strip), so the two hairlines don't stack into one 2px line. */
.band--flush { border-top: none; }
.band__inner { padding: clamp(72px, 11vh, 130px) 0; }
.band__inner--tight { padding: clamp(64px, 9vh, 110px) 0; }

/* Section rules are full-bleed, like the banded sections — the border sits on
   the full-width element and the padding on the content-width child. */
.section { border-top: 1px solid var(--line); }
.section__inner { padding: clamp(72px, 11vh, 130px) 0; }

/* --- Services ------------------------------------------------------------ */

.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 28px;
  margin-top: 52px;
}

.service {
  border-top: 2px solid var(--line-strong);
  padding-top: 26px;
}
.service--lead { border-top-color: var(--accent); }
.service h3 { font-size: 1.35rem; letter-spacing: -0.02em; }
.service p {
  margin-top: 14px;
  color: var(--fg-muted);
  font-size: 1rem;
}
/* Native <details> disclosure — works with JavaScript off, and the browser
   handles the button role, aria-expanded and keyboard operation for us. */
.disclosure { margin-top: 20px; }

.disclosure__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 9px;
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-meta);
  transition: color 140ms ease;
  /* Bigger tap target than the text alone, without shifting the layout. */
  padding: 4px 0;
}
.disclosure__toggle::-webkit-details-marker { display: none; }
.disclosure__toggle::marker { content: ''; }
.disclosure__toggle:hover { color: var(--accent); }

.disclosure__chevron {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform 160ms ease;
}
/* Both labels share one grid cell, so the toggle is always as wide as the
   longer of the two and the chevron never shifts when it opens or closes.
   visibility (not display) keeps the hidden one contributing to that width. */
.disclosure__labels { display: grid; }
.disclosure__labels > span { grid-area: 1 / 1; }
.disclosure__less { visibility: hidden; }
.disclosure[open] .disclosure__more { visibility: hidden; }
.disclosure[open] .disclosure__less { visibility: visible; }
.disclosure[open] .disclosure__toggle { color: var(--accent); }
.disclosure[open] .disclosure__chevron { transform: rotate(180deg); }

.disclosure .service__list,
.disclosure .case__points { margin-top: 18px; }

.service__list {
  margin-top: 22px;
  display: grid;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--fg-2);
}
.service__list li {
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 10px;
}
.service__list li:last-child { border-bottom: none; padding-bottom: 0; }

.services__foot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 48px;
  margin-top: clamp(56px, 8vh, 96px);
  border-top: 1px solid var(--line);
  padding-top: 48px;
}

.chips__label { transition: color 160ms ease; }
.chips__label.is-active { color: var(--accent); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  border: 1px solid var(--line-input);
  border-radius: 2px;
  padding: 7px 13px;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.65;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  background: transparent;
  color: var(--fg-chip);
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.chip[aria-pressed='true'] {
  background: var(--chip-on);
  color: var(--chip-on-fg);
  border-color: var(--chip-on);
}

.deliverables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 10px 32px;
  font-size: 0.95rem;
  color: var(--fg-2);
}
.deliverables li { display: flex; gap: 12px; }

/* --- Engagement models --------------------------------------------------- */

.models {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  margin-top: 48px;
}
.model {
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--line);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background 160ms ease;
}
.model:hover { background: var(--bg-alt); }
.model__eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-meta);
  transition: color 160ms ease;
}
.model:hover .model__eyebrow { color: var(--accent); }
.model h3 { font-size: 1.25rem; }
.model p { color: var(--fg-muted); font-size: 0.98rem; }

/* --- Selected work ------------------------------------------------------- */

.cases {
  display: grid;
  gap: 1px;
  margin-top: 52px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.case {
  background: var(--bg-alt);
  padding: 44px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 32px 56px;
}
.case h3 {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  margin-top: 16px;
  max-width: 22ch;
}
.case__facts {
  margin-top: 22px;
  display: grid;
  gap: 7px;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--fg-meta-2);
}
/* align-content:start is load-bearing. This grid is stretched to the height of
   the taller left column, and the default (normal → stretch) pads the spare
   height into the auto rows — which pushed the disclosure toggle down while
   collapsed and made it jump up on open. */
.case__body {
  display: grid;
  align-content: start;
  gap: 20px;
}
.case__body > p { color: var(--fg-3); }
.case__points {
  display: grid;
  gap: 11px;
  font-size: 0.95rem;
  color: var(--fg-list);
}
.case__points li { display: flex; gap: 14px; }

/* The case column is a 20px-gap grid, so the disclosure's own top margin would
   stack on top of that and float the toggle away from the paragraph. Drop it
   and let the column's own rhythm set the spacing. */
.case__body .disclosure { margin-top: 0; }

/* --- Approach ------------------------------------------------------------ */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 40px 56px;
  margin-top: 56px;
}
.step { display: grid; gap: 12px; }
.step__num {
  font-family: var(--mono);
  font-size: 2rem;
  color: var(--numeral);
  letter-spacing: -0.02em;
  transition: color 160ms ease;
}
/* Same affordance the engagement cards use: hovering a step lifts only its
   numeral to the accent, nothing else in the box moves or changes. */
.step:hover .step__num { color: var(--accent); }
.step h3 { font-size: 1.2rem; }
.step p { color: var(--fg-muted); font-size: 0.98rem; }

/* --- About --------------------------------------------------------------- */

.about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 48px 64px;
  align-items: start;
}
/* The design's 4:5 crop, at 480px rather than 420px. */
.about__figure { max-width: 480px; width: 100%; margin: 0; }
.about__portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--bg);
}
.about__caption {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-top: 14px;
}
.about__body {
  display: grid;
  gap: 26px;
  max-width: 62ch;
}
.about__body h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.15;
}
.about__body > p:first-of-type { color: var(--fg-3); }
.about__body > p:last-of-type { color: var(--fg-muted); }
.about__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 10px 32px;
  font-size: 0.95rem;
  color: var(--fg-2);
}
.about__list li { display: flex; gap: 12px; }
.about__link {
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: var(--rule-under);
  justify-self: start;
}

/* --- Why ----------------------------------------------------------------- */

.why h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.2;
  max-width: 22ch;
}
.why__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 14px 48px;
  margin-top: 34px;
  font-size: 0.98rem;
  color: var(--fg-3);
}
.why__list li {
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
}

/* Each reason is a toggle: ticked by default, click to untick and grey it out.
   A button rather than a checkbox so the browser handles keyboard and focus,
   matching the engagement chips above. */
.why__toggle {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--fg-3);
  text-align: left;
  cursor: pointer;
  transition: color 140ms ease;
}
.why__toggle .ico--off { display: none; }
.why__toggle[aria-pressed='false'] .ico--on { display: none; }
.why__toggle[aria-pressed='false'] .ico--off { display: block; }
.why__toggle[aria-pressed='false'],
.why__toggle[aria-pressed='false'] .ico { color: var(--fg-dim); }
.why__toggle:hover .ico { color: var(--fg); }
.why__toggle[aria-pressed='false']:hover,
.why__toggle[aria-pressed='false']:hover .ico { color: var(--fg-3); }

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

.contact { padding: clamp(80px, 12vh, 140px) 0; }
.contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 48px 72px;
}
.contact__intro {
  display: grid;
  gap: 28px;
  align-content: start;
}
.contact__intro h2 {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.1;
}

/* The label track is max-content, so every value starts on one rail no matter
   how long the longest label is — a fixed rail let "AVAILABILITY" overflow. */
.details {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: baseline;
  gap: 14px 18px;
  font-size: 0.98rem;
  margin: 0;
}
.details dt {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
}
.details dd { margin: 0; color: var(--fg-2); }

/* --- Form ---------------------------------------------------------------- */

.enquiry {
  display: grid;
  gap: 18px;
  scroll-margin-top: 120px;
}
.enquiry__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 18px;
}
.field { display: grid; gap: 7px; }
.field > span {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-meta);
  transition: color 140ms ease;
}
/* Focused field lifts its own label to the accent. */
.field:focus-within > span { color: var(--accent); }
.field input,
.field textarea {
  width: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--line-input);
  border-radius: 2px;
  padding: 12px 14px;
  color: var(--fg);
  font-family: var(--sans);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.field textarea {
  line-height: 1.55;
  resize: vertical;
}
.field input:focus,
.field textarea:focus { border-color: var(--accent); }
.field input:focus-visible,
.field textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 24%, transparent);
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--fg-dim);
  opacity: 1;
}

.field__opt { text-transform: none; letter-spacing: 0.06em; color: var(--fg-dim); }

/* .field > span is the uppercase mono label rule — the hint is a sibling span,
   so it has to opt back out of all of it. */
.field .field__hint {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.45;
  color: var(--fg-dim);
}

/* Native file input, restyled to match the text fields — keeping it native
   means it still works with JavaScript off and stays keyboard operable. */
.field input[type='file'] {
  padding: 9px 12px;
  font-size: 0.9rem;
  color: var(--fg-muted);
  cursor: pointer;
}
.field input[type='file']::file-selector-button {
  margin-right: 14px;
  padding: 7px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: transparent;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease;
}
.field input[type='file']::file-selector-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.field input:user-invalid,
.field textarea:user-invalid { border-color: var(--danger); }

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.enquiry__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  margin-top: 4px;
}
.form-status {
  font-size: 0.9rem;
  color: var(--accent);
}
.form-status.is-error { color: var(--danger); }

.form-fallback {
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  justify-self: start;
}
[hidden] { display: none !important; }

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

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-footer);
}
.site-footer__inner {
  padding: 40px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: baseline;
  justify-content: space-between;
}
.site-footer__id { display: grid; gap: 6px; }
.site-footer__id strong { font-weight: 600; }
.site-footer__id span {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  font-size: 0.88rem;
}
.site-footer__links a { color: var(--fg-foot); }
.site-footer__links a:hover { color: var(--fg); }

/* --- Prose (legal / privacy / status pages) ------------------------------ */

.prose {
  padding: clamp(56px, 9vh, 96px) 0 clamp(64px, 10vh, 112px);
  max-width: 74ch;
  display: grid;
  gap: 22px;
}
.prose h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  line-height: 1.12;
}
.prose h2 {
  font-size: 1.2rem;
  margin-top: 18px;
}
.prose p,
.prose li { color: var(--fg-2); font-size: 0.98rem; }
.prose ul { display: grid; gap: 8px; }
.prose ul li { display: flex; gap: 12px; }
.prose .note {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 18px;
  color: var(--fg-muted);
  font-size: 0.92rem;
}
.prose dl { display: grid; gap: 10px; margin: 0; }
.prose dt {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.prose dd { margin: 0; color: var(--fg-2); font-size: 0.98rem; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1023px) {
  /* Below this the five section links wrap the sticky header onto two or three
     rows. Hide them there; the CTA and the footer links stay reachable. */
  .site-nav { display: none; }
}

@media (max-width: 1179px) {
  /* Two-up: outer edges stay flush with the page's content edge, the divider
     sits on the centre line, and the two rows get a rule between them.
     The switch sits at 1179px because a quarter-column narrower than that
     cannot hold "30+ projects" on one line, and a single wrapped value makes
     the whole band ragged. */
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 26px 22px; }
  .stat:nth-child(odd) { padding-left: 0; border-left: none; }
  .stat:nth-child(even) { padding-right: 0; border-left: 1px solid var(--line); }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

@media (max-width: 880px) {
  .details dt { flex-basis: 96px; }
}

@media (max-width: 430px) {
  /* Phones: the 2.5rem clamp floor holds the headline wider than 90vw can
     carry, which forces "leadership for" onto its own line. Scale fluidly
     instead — 9.3vw keeps ~7% slack against the wrap point at every width in
     this band, and equals 2.5rem exactly at 430px, so there is no step at the
     breakpoint. */
  .hero h1 { font-size: 9.3vw; }
}

@media (max-width: 560px) {
  /* Phones: drop the header CTA — the hero repeats it immediately below. With
     it gone the brand keeps its role line and the header stays one block. */
  .nav-cta { display: none; }
}

@media (max-width: 520px) {
  /* One-up: every cell flush left and right, rules between them only. */
  .stats__grid { grid-template-columns: 1fr; }
  .stat,
  .stat:first-child,
  .stat:last-child,
  .stat:nth-child(odd),
  .stat:nth-child(even) {
    padding: 24px 0;
    border-left: none;
    border-top: none;
  }
  .stat + .stat { border-top: 1px solid var(--line); }
  .btn,
  .btn-ghost { width: 100%; text-align: center; }
  /* Narrow screens: stack each label above its value, all flush left. */
  .details { grid-template-columns: 1fr; gap: 0; }
  .details dt { margin-top: 14px; }
  .details dt:first-of-type { margin-top: 0; }
}

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

@media print {
  .site-header, .hero__actions, .enquiry, .skip-link { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; }
}