/* ── Arqen Labs ───────────────────────────────────────────────────────────
   Extracted from the artifact bundle. Inline styles lifted to tokens +
   classes; visual output is intended to match the original panel-for-panel.
   ──────────────────────────────────────────────────────────────────────── */

/* Only the subsets the copy actually needs. Cyrillic / Greek / Vietnamese
   are dropped; Instrument Serif ships italic only (no upright usage exists).
   latin-ext is declared but gated by unicode-range, so it costs nothing
   until a glyph in that range appears. */
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 800;
  font-stretch: 100%; 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 800;
  font-stretch: 100%; 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: 'Instrument Serif'; font-style: italic; font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-italic-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: 'Instrument Serif'; font-style: italic; font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-italic-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: 'JetBrains Mono'; font-style: normal; font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-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: 'JetBrains Mono'; font-style: normal; font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-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;
}

:root {
  --ink: #0e0e0c;
  --cream: #e9e3d7;
  --lime: #c8d92c;
  --lime-hi: #d6e548;
  /* #6a6a52 measured 4.33:1 on cream — below the 4.5 needed at 10–11px.
     #66664e clears at 4.60:1 and is visually indistinguishable. */
  --muted: #66664e;
  --muted-on-ink: #8f8f76;
  --muted-step: #a8a893;
  --body: #33332b;
  --dim: #cfcabc;
  --rule: #c3bdb0;
  --rule-ink: #26261f;

  --sans: 'Archivo', Helvetica, Arial, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --gap: 10px;
  --r-panel: 30px;
  --r-bar: 22px;
  --r-card: 18px;
  --r-pill: 999px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: var(--sans);
  padding: 14px;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
nav a:hover, footer a:hover { color: var(--muted); }

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

:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
  border-radius: 4px;
}
.panel--lime :focus-visible, .cta:focus-visible { outline-color: var(--ink); }

.skip {
  position: absolute; left: -9999px;
  background: var(--lime); color: var(--ink);
  padding: 14px 22px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em; z-index: 100;
}
.skip:focus { left: 14px; top: 14px; }

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

/* ── Panels & layout ──────────────────────────────────────────────────── */

.panel { border-radius: var(--r-panel); }
.panel--cream { background: var(--cream); }
.panel--ink   { background: var(--ink); color: var(--cream); border: 1px solid var(--rule-ink); }
.panel--lime  { background: var(--lime); }

.row { display: flex; gap: var(--gap); margin-top: var(--gap); }
.stack { display: flex; flex-direction: column; gap: var(--gap); }

/* ── Type ─────────────────────────────────────────────────────────────── */

.mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0;
  font-weight: 400;
}
.mono--sm { font-size: 10px; }
.mono--on-ink { color: var(--muted-on-ink); }
.mono--on-lime { color: var(--ink); }

/* Row index markers: [ 01 ], [ 02 ]… */
.idx {
  font-family: var(--mono); font-size: 10px; color: var(--muted);
  white-space: nowrap; flex: 0 0 auto;
}

/* Small utilities, so no inline style attributes are needed and the CSP
   can stay on style-src 'self' without 'unsafe-inline'. */
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-gap { margin-top: var(--gap); }
.mb-40 { margin-bottom: 40px; }
.min0 { min-width: 0; }
.stack--side { flex: 1; margin-top: 0; }

.serif { font-family: var(--serif); font-style: italic; font-weight: 400; }

.display {
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.88;
  margin: 0;
  text-wrap: balance;
}

.pill {
  margin: 0;
  background: var(--ink); color: var(--cream);
  border-radius: var(--r-pill); padding: 7px 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
}
.pill--lime { background: var(--lime); color: var(--ink); }

.label-row {
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: space-between; align-items: center;
}

/* ── Header ───────────────────────────────────────────────────────────── */

.masthead { display: flex; align-items: stretch; gap: var(--gap); margin-bottom: var(--gap); }

.masthead__bar {
  display: flex; align-items: center; gap: 14px; flex: 1;
  background: var(--cream); border-radius: var(--r-bar); padding: 16px 26px;
}
.mark { width: 22px; height: 22px; border-radius: 6px; background: var(--lime); flex: 0 0 auto; }
.wordmark { font-size: 17px; font-weight: 700; letter-spacing: 0.14em; }

.masthead nav {
  display: flex; flex-wrap: wrap; gap: 30px; margin-left: auto;
  font-size: 13px; font-weight: 500; letter-spacing: 0.06em;
}

.cta {
  display: flex; align-items: center; background: var(--lime);
  border-radius: var(--r-bar); padding: 16px 30px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  transition: background 160ms;
}
.cta:hover { background: var(--lime-hi); color: var(--ink); }

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero { padding: 58px 56px 46px; overflow: hidden; }
.hero h1 { font-size: clamp(52px, 8vw, 116px); line-height: 0.86; max-width: 1020px; }
.hero h1 .serif { letter-spacing: -0.01em; }

.hero__meta {
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: space-between; align-items: flex-start; margin-bottom: 30px;
}
.hero__foot {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 40px; margin-top: 44px;
}
.hero__foot p { margin: 0; max-width: 400px; font-size: 15px; line-height: 1.55; color: var(--body); }

.dots { display: flex; align-items: center; gap: 18px; }
.dots__set { display: flex; }
.dots__set i { width: 46px; height: 46px; border-radius: var(--r-pill); display: block; }
.dots__set i + i { margin-left: -16px; }
.dots__set i:nth-child(1) { background: #dfe98c; }
.dots__set i:nth-child(2) { background: #d3e05e; }
.dots__set i:nth-child(3) { background: var(--lime); }
.dots__rule { height: 1px; width: 220px; background: var(--ink); }

/* ── Stats ────────────────────────────────────────────────────────────── */

/* No flex-wrap: the artifact had none, and adding it made the stat column
   drop below the numeral between ~1000-1180px, roughly doubling the panel.
   Without it the columns shrink instead, and the 1000px breakpoint below
   stacks the row properly. Vertical padding trimmed 44px -> 34px. */
.stats { flex: 2.1; padding: 24px 46px; display: flex; align-items: flex-end; gap: 44px; }
.stats__big { margin: 0; font-size: clamp(44px, 5vw, 72px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.9; }
.stats__list {
  border-left: 1px solid var(--rule); padding-left: 40px;
  display: flex; flex-direction: column; gap: 14px; margin: 0;
}
.stats__list div { display: flex; gap: 14px; align-items: baseline; }
/* 240px forced each stat to ~3 lines and was the panel's real height driver.
   320px takes them to 2. */
.stats__list p { margin: 0; font-size: 15px; max-width: 320px; }

/* No gap: with justify-content: space-between it only acts as a minimum
   separation, adding 30px to the panel's floor height for nothing. */
/* This panel sets the row's height floor — .row stretches both children to
   the taller one, and .aside's content block (dots + serif line + two-line
   mono) runs ~90px on its own. Cutting .stats alone does nothing until this
   comes down too. */
.aside {
  flex: 1; padding: 24px 36px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.aside__dots { display: flex; gap: 8px; }
.aside__dots i { width: 13px; height: 13px; border-radius: var(--r-pill); background: var(--ink); display: block; }
.aside__line { margin: 0; font-family: var(--serif); font-style: italic; font-size: 30px; line-height: 1.05; }
.aside__sub { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; margin-top: 12px; line-height: 1.5; }

/* ── Process stepper ──────────────────────────────────────────────────── */

.process { padding: 44px 44px 40px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--gap); margin-top: 30px; }

.step {
  border: 1px solid var(--rule-ink); background: transparent; color: var(--muted-step);
  border-radius: var(--r-card); padding: 18px 20px; cursor: pointer;
  display: flex; flex-direction: column; gap: 12px; text-align: left;
  font-family: inherit;
  transition: background 160ms, color 160ms, border-color 160ms;
}
.step:hover { border-color: var(--lime); }
.step[aria-selected="true"] { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.step__n { font-family: var(--mono); font-size: 10px; }
.step__label { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }

.stage {
  display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start;
  border-top: 1px solid var(--rule-ink); margin-top: 26px; padding-top: 26px;
}
.stage__n { margin: 0; flex: 0 0 auto; font-family: var(--serif); font-style: italic; font-size: 34px; color: var(--lime); }
.stage__body { flex: 1 1 320px; min-width: 0; }
.stage__meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--muted-on-ink); margin: 0 0 10px; }
.stage__text { font-size: 16px; line-height: 1.6; color: var(--dim); max-width: 640px; margin: 0; }

/* ── Disclosure rows (capabilities + case studies) ────────────────────── */

.rows { display: flex; flex-direction: column; }

/* The heading wraps the button (ARIA accordion pattern) — a button may only
   contain phrasing content, so the h3 cannot live inside it. The row border
   sits on the .cap wrapper so it falls below the detail panel, not above it. */
.row-h { margin: 0; font: inherit; font-weight: 400; }

.cap { border-bottom: 1px solid var(--ink); padding: 22px 0 20px; }
.cap:first-child { padding-top: 0; }
.cap:last-child { border-bottom: 0; padding-bottom: 0; }

.disclosure {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; padding: 0;
  font-family: inherit; font-size: inherit; color: inherit;
  transition: opacity 160ms;
}
.disclosure:hover { opacity: 0.72; }

.cap__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 30px; }
.cap__title { font-size: 46px; font-weight: 700; letter-spacing: -0.03em; flex: 1; }
.cap__title.serif { font-size: 48px; font-weight: 400; letter-spacing: normal; }
.cap__blurb { font-size: 14px; line-height: 1.5; flex: 0 1 300px; min-width: 0; color: var(--body); }

.detail { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.detail p {
  flex: 1 1 240px; border-radius: var(--r-card); padding: 18px 20px;
  font-size: 13px; line-height: 1.55; margin: 0;
}
.detail p:nth-child(odd)  { background: var(--ink); color: var(--cream); }
.detail p:nth-child(even) { background: var(--lime); color: var(--ink); }

[hidden] { display: none !important; }

/* ── Selected work ────────────────────────────────────────────────────── */

/* Rows expand independently, so the left column can grow well past the right.
   flex-start stops the right column stretching to match — otherwise .why's
   space-between blows its three lines apart as the panel gets taller. */
#work { align-items: flex-start; }

.work { flex: 1.15; padding: 46px; display: flex; flex-direction: column; justify-content: space-between; }
.work__list { display: flex; flex-direction: column; gap: 26px; margin-top: 42px; }
.case { border-bottom: 1px solid var(--rule); padding-bottom: 18px; }
.case:last-child { border-bottom: 0; padding-bottom: 0; }
.case__title { display: block; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.case__title.serif { font-size: 34px; font-weight: 400; letter-spacing: normal; }
.case__line {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; font-size: 13px; font-weight: 400; color: var(--body); margin-top: 8px;
}
.case__detail {
  background: var(--ink); color: var(--cream); border-radius: var(--r-card);
  padding: 18px 20px; margin: 14px 0 0; font-size: 13px; line-height: 1.6;
}
.case__detail--lime { background: var(--lime); color: var(--ink); }

.why { flex: 1; padding: 40px 36px; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; }
/* .why p must NOT out-specify .why__line — both are <p>, and an element+class
   selector (0-1-1) beats a bare class (0-1-0) regardless of source order.
   Scope the body rule so the display line keeps its own size and colour. */
.why > p { font-size: 15px; line-height: 1.6; color: var(--dim); margin: 0; }
.why > p.why__line {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(28px, 3vw, 40px); line-height: 1.1;
  color: var(--lime); margin: 0;
}

.counts {
  padding: 30px 36px; display: flex; flex-wrap: wrap; gap: 26px;
  justify-content: space-between; align-items: baseline;
}
.counts b { font-size: 40px; font-weight: 800; letter-spacing: -0.035em; line-height: 1; display: block; }
.counts span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; margin-top: 8px; display: block; }

/* ── Method ───────────────────────────────────────────────────────────── */

.method { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--gap); margin-top: var(--gap); }
.method > div { padding: 42px 38px; display: flex; flex-direction: column; gap: 28px; }
.method__tag { display: flex; align-items: center; gap: 12px; }
.method__num {
  width: 26px; height: 26px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--lime); font-family: var(--mono); font-size: 11px;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.method h3 { font-size: clamp(22px, 2.4vw, 34px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.02; overflow-wrap: anywhere; margin: 0; }
.method h3.serif { font-size: clamp(26px, 2.7vw, 38px); font-weight: 400; letter-spacing: normal; }
.method p { font-size: 14px; line-height: 1.55; color: var(--body); margin: 0; }
.method .panel--lime p { color: var(--ink); }

/* ── Lab ──────────────────────────────────────────────────────────────── */

.lab { margin-top: var(--gap); padding: 50px 46px; display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.lab__intro { flex: 1.2 1 320px; }
.lab h2 { font-size: clamp(38px, 4.6vw, 62px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.92; margin: 26px 0 0; }
/* :not(.mono) keeps this off the [ THE LAB ] label, which would otherwise be
   dragged to 15px body-grey with a 26px top margin by specificity. */
.lab__intro p:not(.mono) { font-size: 15px; line-height: 1.6; color: var(--body); max-width: 420px; margin: 26px 0 0; }
.lab__repos { flex: 1 1 300px; display: flex; flex-direction: column; gap: 12px; }
.lab__repos ul { list-style: none; margin: 0; padding: 0; }
.lab__repos li {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  border-bottom: 1px solid var(--ink); padding: 14px 0;
}
.lab__repos li:first-child { padding-top: 0; }
.lab__repos a { font-size: 17px; font-weight: 600; }
.lab__repos a:hover { color: var(--muted); }
.lab__notes { display: flex; flex-wrap: wrap; gap: var(--gap); margin-top: 18px; }
.lab__notes p { border-radius: var(--r-card); padding: 18px 20px; flex: 1 1 200px; font-size: 13px; line-height: 1.5; margin: 0; }

/* ── Industries ───────────────────────────────────────────────────────── */

.section-pad { margin-top: var(--gap); padding: 50px 46px; }
.industries__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin-top: 34px; }
.industries__grid > div { border-top: 1px solid var(--ink); padding-top: 14px; }
.industries__grid h3 { font-size: clamp(17px, 1.6vw, 22px); font-weight: 700; letter-spacing: -0.015em; overflow-wrap: anywhere; margin: 0; }
.industries__grid h3.serif { font-size: 26px; font-weight: 400; letter-spacing: normal; }
.industries__note { display: flex; flex-wrap: wrap; gap: var(--gap); margin-top: 24px; }
.industries__note p { border-radius: 20px; padding: 20px 24px; flex: 1 1 280px; font-size: 14px; line-height: 1.5; margin: 0; }

/* ── Contact ──────────────────────────────────────────────────────────────
   The closing lime panel was removed; the address lives in the footer.
   Inline address inside body copy (privacy page) keeps its own rule.
   ──────────────────────────────────────────────────────────────────────── */
.mail-inline a { text-decoration: underline; }

/* ── Footer ───────────────────────────────────────────────────────────── */

.site-foot { display: flex; gap: var(--gap); margin-top: var(--gap); }
.site-foot__bar {
  flex: 1; background: var(--cream); border-radius: var(--r-bar);
  padding: 22px 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 26px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--body);
}
.site-foot__mark { width: 18px; height: 18px; border-radius: 5px; background: var(--lime); flex: 0 0 auto; }
.site-foot nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 24px; }

/* The site's only contact route, now that the closing panel is gone. Lime,
   so it carries the accent the removed section used to. JS swaps the
   contents for a real <a href="mailto:">; the <noscript> fallback inside
   renders instead when JS is off. Both are styled identically. */
.site-foot__mail { margin: 0; flex: 0 0 auto; display: flex; }
.site-foot__mail a,
.site-foot__mail .mail-fallback {
  display: flex; align-items: center;
  background: var(--lime); color: var(--ink);
  border-radius: var(--r-bar); padding: 22px 30px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  white-space: nowrap;
  transition: background 160ms;
}
.site-foot__mail a:hover { background: var(--lime-hi); color: var(--ink); }
.site-foot__where {
  background: var(--ink); color: var(--cream); border-radius: var(--r-bar);
  padding: 22px 30px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  display: flex; align-items: center;
}

/* ── Legal pages ──────────────────────────────────────────────────────── */

.doc { padding: 58px 56px; max-width: 820px; margin: 0 auto; }
.doc h1 { font-size: clamp(38px, 6vw, 68px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.92; margin: 0 0 10px; }
.doc h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 38px 0 10px; }
.doc > p, .doc li { font-size: 15px; line-height: 1.65; color: var(--body); }
.doc ul { padding-left: 20px; }
.doc a { text-decoration: underline; }
.doc .back { display: inline-block; margin-top: 40px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; }
/* Two classes (0-2-0) so it outranks .doc > p (0-1-1). */
.doc .todo {
  background: var(--lime); color: var(--ink);
  border-radius: var(--r-card); padding: 16px 20px;
  font-size: 14px; line-height: 1.55;
}

/* ── Responsive ───────────────────────────────────────────────────────────
   The original had no media queries — fixed flex ratios squashed rather
   than stacked. Break the two-up rows and reduce panel padding.
   ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .row { flex-direction: column; }
  .stats, .aside, .work, .why { flex: 1 1 auto; }
  /* .stats no longer wraps, so stack it explicitly here — otherwise the list
     stays beside the numeral while wearing the top border below. */
  .stats { flex-direction: column; align-items: stretch; gap: 24px; }
  .stats__list { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; padding-top: 24px; }
  .stats__list p { max-width: none; }
  .lab { gap: 34px; }
}

@media (max-width: 760px) {
  body { padding: 8px; }
  :root { --r-panel: 24px; --r-bar: 18px; }
  .masthead { flex-direction: column; }
  .masthead__bar { flex-wrap: wrap; gap: 12px; }
  .masthead nav { margin-left: 0; width: 100%; gap: 18px; font-size: 12px; }
  .cta { justify-content: center; }
  .hero { padding: 38px 24px 30px; }
  .hero__foot { gap: 26px; }
  .dots__rule { width: 90px; }
  .work, .why, .counts { padding: 30px 24px; }
  /* Kept at/below the desktop values — 30px here would make the stacked
     mobile panels taller than the desktop ones. */
  .stats, .aside { padding: 24px 22px; }
  .stats { gap: 26px; }
  .process, .section-pad, .lab { padding: 32px 24px; }
  .site-foot__mail a, .site-foot__mail .mail-fallback { padding: 18px 24px; white-space: normal; }
  .method > div { padding: 30px 26px; }
  .cap__head { gap: 12px; }
  .cap__title { font-size: 32px; flex: 1 1 100%; }
  .cap__title.serif { font-size: 34px; }
  .work__list { margin-top: 28px; }
  .site-foot { flex-direction: column; }
  .site-foot__bar { gap: 14px; }
  .site-foot nav { margin-left: 0; width: 100%; }
  .doc { padding: 34px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}