/* Generated by tools/fonts.py — do not edit by hand. */
@font-face{font-family:'Unbounded';font-style:normal;font-weight:200 900;font-display:swap;src:url('../fonts/unbounded-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:200 900;font-display:swap;src:url('../fonts/unbounded-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:200 900;font-display:swap;src:url('../fonts/unbounded-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:'Unbounded';font-style:normal;font-weight:200 900;font-display:swap;src:url('../fonts/unbounded-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:'Golos Text';font-style:normal;font-weight:400 900;font-display:swap;src:url('../fonts/golos-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 900;font-display:swap;src:url('../fonts/golos-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 900;font-display:swap;src:url('../fonts/golos-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:'Golos Text';font-style:normal;font-weight:400 900;font-display:swap;src:url('../fonts/golos-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:'Martian Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url('../fonts/martian-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url('../fonts/martian-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url('../fonts/martian-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:'Martian Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url('../fonts/martian-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}

/* ---------------------------------------------------------------------------
   Tokens — the conformity dossier.

   Two grounds, used deliberately: the deep field is the factory and the binder
   it ships its paperwork in; the paper panels are the documents themselves,
   dropped into it. Gold is Pantone 871 from the trademark and is spent only on
   certification marks and the lunar device — never as decoration.
   --------------------------------------------------------------------------- */

:root {
  /* Field — the dark ground */
  --field-900: #061019;
  --field-800: #08192a;
  --field:     #0b1d2e;
  --field-700: #102a40;
  --field-600: #16374f;
  --rule:      #1d4260;
  --rule-soft: #14304a;

  /* Paper — inserted documents */
  --paper:     #f3f5f6;
  --paper-200: #e6eaec;
  --paper-300: #d5dbdf;

  /* Ink on paper */
  --ink:       #0b1d2e;
  --ink-soft:  #46596b;
  --ink-faint: #5a6b78;

  /* Text on field */
  --on-field:       #edf2f5;
  --on-field-soft:  #9fb4c4;
  --on-field-faint: #8098ac;

  /* Pantone 871 C. The bright value carries on the field; the deep value is the
     only one that reaches 4.5:1 as text on paper. */
  --gold:      #c9a227;
  --gold-lift: #dcb949;
  --gold-deep: #6e5d36;
  --gold-rule: #837041;

  --signal:    #3f8f6b;
  --warn:      #a8481f;

  /* Type */
  --display: 'Unbounded', 'Golos Text', system-ui, sans-serif;
  --body: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --data: 'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --step--1: clamp(0.8rem, 0.77rem + 0.14vw, 0.875rem);
  --step-0:  clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  --step-1:  clamp(1.09rem, 1.03rem + 0.3vw, 1.28rem);
  --step-2:  clamp(1.3rem, 1.18rem + 0.6vw, 1.7rem);
  --step-3:  clamp(1.55rem, 1.3rem + 1.2vw, 2.3rem);
  --step-4:  clamp(1.85rem, 1.35rem + 2.4vw, 3.1rem);
  --step-5:  clamp(2.4rem, 1.4rem + 4.9vw, 5.4rem);

  /* Rhythm — a single spacing scale, used everywhere */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --measure: 68ch;
  --maxw: 78rem;
  --maxw-wide: 90rem;

  /* Corners stay near-square: this is documentation, not a consumer app. */
  --r-sm: 2px;
  --r-md: 3px;

  --lift-1: 0 1px 2px rgba(3, 10, 18, .28), 0 2px 10px rgba(3, 10, 18, .18);
  --lift-2: 0 2px 4px rgba(3, 10, 18, .30), 0 14px 38px rgba(3, 10, 18, .26);
  --lift-paper: 0 1px 2px rgba(11, 29, 46, .10), 0 12px 34px rgba(11, 29, 46, .12);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur: 520ms;
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--field);
  color: var(--on-field);
  font: 400 var(--step-0) / 1.62 var(--body);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.08; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* A component's own display rule outranks the UA stylesheet's [hidden], which
   would otherwise leave panels like the form's success state permanently on. */
[hidden] { display: none !important; }

/* -------------------------------------------------------------- typography */

.display {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}

.h-xl { font-size: var(--step-5); }
.h-lg { font-size: var(--step-4); letter-spacing: -0.032em; line-height: 1.02; }
.h-md { font-size: var(--step-3); letter-spacing: -0.028em; line-height: 1.06; }
.h-sm { font-size: var(--step-2); letter-spacing: -0.022em; line-height: 1.14; }
.h-xs {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step-1);
  letter-spacing: -0.018em;
  line-height: 1.2;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.56;
  max-width: 46ch;
  color: var(--on-field-soft);
}
.paper .lede { color: var(--ink-soft); }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s-4); }
.prose p { color: var(--on-field-soft); }
.paper .prose p { color: var(--ink-soft); }

/* Data register — every certified value, code and measurement. */
.data {
  font-family: var(--data);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.label {
  font-family: var(--data);
  font-weight: 500;
  font-size: clamp(0.62rem, 0.58rem + 0.16vw, 0.7rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-field-faint);
}
.paper .label { color: var(--ink-faint); }
.label--gold { color: var(--gold); }
.paper .label--gold { color: var(--gold-deep); }

/* Sub-headings inside a section. These name a block of content, not a value, so
   they take the display voice — the data face stays reserved for data. */
.subhead {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: -0.012em;
  line-height: 1.2;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.paper .subhead { border-bottom-color: var(--paper-300); }

/* Editorial metadata: a dateline or source, set in the data face because that is
   what it is. It sits under the copy it qualifies, never above the heading. */
.dateline {
  margin-top: var(--s-5);
  color: var(--ink-faint);
}
.paper .dateline { color: var(--ink-faint); }

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

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: var(--maxw-wide); }

.section { padding-block: clamp(3.5rem, 8vw, var(--s-9)); }
.section--tight { padding-block: clamp(2.75rem, 5vw, var(--s-8)); }
.section--tall { padding-block: clamp(4.5rem, 10vw, var(--s-10)); }

.paper { background: var(--paper); color: var(--ink); }
.field-800 { background: var(--field-800); }
.field-700 { background: var(--field-700); }

/* A section head: title left, supporting copy right, on one hairline. */
.head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--s-5) var(--s-8);
  align-items: end;
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-7);
}
.paper .head { border-bottom-color: var(--paper-300); }
.head__title { grid-column: 1; }
.head__aside { grid-column: 2; align-self: end; }
.head__aside p { color: var(--on-field-soft); max-width: 44ch; }
.paper .head__aside p { color: var(--ink-soft); }
.head--single { grid-template-columns: 1fr; }

/* ------------------------------------------------------------------- focus */

:focus-visible {
  outline: 2px solid var(--gold-lift);
  outline-offset: 3px;
  border-radius: 1px;
}
.paper :focus-visible { outline-color: var(--gold-deep); }

.skip {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 200;
  padding: var(--s-3) var(--s-4);
  background: var(--gold);
  color: var(--field-900);
  font-weight: 600;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

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

/* ---------------------------------------------------------------- controls */

.btn {
  --btn-bg: var(--gold);
  --btn-fg: var(--field-900);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform 180ms var(--ease);
}
.btn:hover { background: var(--gold-lift); }
.btn:active { transform: translateY(1px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--on-field);
  border-color: var(--rule);
}
.btn--ghost:hover { background: var(--field-700); border-color: var(--gold); }
.paper .btn--ghost { --btn-fg: var(--ink); border-color: var(--paper-300); }
.paper .btn--ghost:hover { background: var(--paper-200); border-color: var(--gold-rule); }

.btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

/* A link that reads as an instrument: label, hairline, moving phase mark. */
.jump {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--gold);
  padding-block: var(--s-2);
}
.paper .jump { color: var(--gold-deep); }
/* The rule extends on hover by scaling, not by animating width: a width
   transition relayouts the whole line on every frame. */
.jump::after {
  content: '';
  width: 3.5rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(.64);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.jump:hover::after { transform: scaleX(1); }

/* --------------------------------------------------------- the moon device */

.phase { width: 1em; height: 1em; flex: none; color: var(--gold); }
.paper .phase { color: var(--gold-rule); }

/* Nine-step cycle used as a section marker and a scroll ornament. */
.cycle {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  color: var(--gold);
}
.cycle .phase { width: 0.6rem; height: 0.6rem; opacity: .38; }
.cycle .phase[data-on] { opacity: 1; }

/* ------------------------------------------------------------------- cards */

/* Not a card grid: a document register. Rows on hairlines, no boxes. */
.register { border-top: 1px solid var(--rule); }
.paper .register { border-top-color: var(--paper-300); }
.register__row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--s-4) var(--s-5);
  align-items: start;
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.paper .register__row { border-bottom-color: var(--paper-300); }
.register__mark { display: flex; padding-top: .2rem; }
.register__mark .phase { width: 1.15rem; height: 1.15rem; }
.register__body p { color: var(--on-field-soft); margin-top: var(--s-2); }
.paper .register__body p { color: var(--ink-soft); }

/* ------------------------------------------------------------------ tables */

.table { width: 100%; border-collapse: collapse; }
.table caption {
  text-align: left;
  padding-bottom: var(--s-4);
  color: var(--on-field-soft);
}
.paper .table caption { color: var(--ink-soft); }
.table th, .table td {
  text-align: left;
  padding: var(--s-4) var(--s-4) var(--s-4) 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}
.paper .table th, .paper .table td { border-bottom-color: var(--paper-300); }
.table thead th {
  font-family: var(--data);
  font-weight: 500;
  font-size: clamp(0.62rem, 0.58rem + 0.16vw, 0.7rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-field-faint);
  border-bottom-color: var(--gold-rule);
}
.paper .table thead th { color: var(--ink-faint); }
.table tbody th { font-weight: 500; color: var(--on-field); }
.paper .table tbody th { color: var(--ink); }
.table td { font-family: var(--data); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.table td.is-num { text-align: right; padding-right: 0; }
.table--compare td.is-us { color: var(--on-field); }
.table--compare td.is-them { color: var(--on-field-faint); }

.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Specification pairs — a definition list set as a ruled index. */
.specs { display: grid; grid-template-columns: 1fr; }
.specs__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--s-4);
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--rule);
}
.paper .specs__row { border-bottom-color: var(--paper-300); }
.specs__k { color: var(--on-field-soft); font-size: var(--step--1); }
.paper .specs__k { color: var(--ink-soft); }
.specs__v {
  font-family: var(--data);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--on-field);
}
.paper .specs__v { color: var(--ink); }

/* -------------------------------------------------------------------- form */

.field { display: grid; gap: var(--s-2); }
.field > span { font-size: var(--step--1); color: var(--ink-soft); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.85rem 0.95rem;
  background: #fff;
  border: 1px solid var(--paper-300);
  border-radius: var(--r-sm);
  color: var(--ink);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold-rule);
  box-shadow: 0 0 0 3px rgba(131, 112, 65, .18);
}
.field textarea { resize: vertical; min-height: 7rem; }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.field[data-invalid] input,
.field[data-invalid] select,
.field[data-invalid] textarea { border-color: var(--warn); }
.field__error {
  font-size: var(--step--1);
  color: var(--warn);
  display: none;
}
.field[data-invalid] .field__error { display: block; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4) var(--s-5);
}
.form-grid .span-2 { grid-column: 1 / -1; }

.form-note { font-size: var(--step--1); color: var(--ink-faint); max-width: 52ch; }

.form-success {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-6);
  border: 1px solid var(--gold-rule);
  border-radius: var(--r-sm);
  background: #fff;
}

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

.masthead {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: color-mix(in srgb, var(--field-900) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background 300ms var(--ease), border-color 300ms var(--ease);
}
.masthead[data-stuck] {
  background: color-mix(in srgb, var(--field-900) 96%, transparent);
  border-bottom-color: var(--rule-soft);
}
.masthead__bar {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  height: 4.5rem;
}
.masthead__logo { color: var(--on-field); flex: none; }
.masthead__logo svg { width: clamp(8rem, 12vw, 10.5rem); height: auto; }
.masthead__logo:hover { color: var(--gold-lift); }
.masthead__logo, .masthead__logo svg { transition: color var(--dur) var(--ease); }

.masthead__nav { display: flex; gap: clamp(1rem, 2vw, 1.9rem); margin-inline: auto; }
.masthead__nav a {
  font-size: var(--step--1);
  color: var(--on-field-soft);
  padding-block: var(--s-2);
  position: relative;
  transition: color 240ms var(--ease);
}
.masthead__nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 380ms var(--ease);
}
.masthead__nav a:hover { color: var(--on-field); }
.masthead__nav a:hover::after,
.masthead__nav a[aria-current]::after { transform: scaleX(1); }
.masthead__nav a[aria-current] { color: var(--on-field); }

.masthead__end { display: flex; align-items: center; gap: var(--s-4); flex: none; }
.masthead__end .btn { padding: 0.7rem 1.1rem; }

.burger {
  display: none;
  width: 2.75rem; height: 2.75rem;
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  cursor: pointer;
  place-items: center;
}
.burger span, .burger span::before, .burger span::after {
  display: block;
  width: 1.05rem; height: 1.5px;
  background: var(--on-field);
  transition: transform 320ms var(--ease), opacity 200ms var(--ease);
}
.burger span::before, .burger span::after { content: ''; position: absolute; }
.burger span::before { transform: translateY(-5px); }
.burger span::after { transform: translateY(5px); }
.burger[aria-expanded='true'] span { background: transparent; }
.burger[aria-expanded='true'] span::before { transform: rotate(45deg); }
.burger[aria-expanded='true'] span::after { transform: rotate(-45deg); }

.drawer {
  position: fixed;
  inset: 4.5rem 0 auto;
  z-index: 99;
  background: var(--field-900);
  border-bottom: 1px solid var(--rule-soft);
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5) var(--gutter) var(--s-6);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: transform 340ms var(--ease), opacity 260ms var(--ease), visibility 340ms;
}
.drawer[data-open] { transform: none; opacity: 1; visibility: visible; }
.drawer a {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step-2);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--rule-soft);
}
.drawer .btn { margin-top: var(--s-4); justify-content: center; }

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

.hero {
  position: relative;
  min-height: min(92svh, 54rem);
  display: grid;
  align-items: end;
  padding-top: 8rem;
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img, .hero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
.hero__media video { opacity: 0; transition: opacity 1200ms var(--ease); }
.hero__media video[data-ready] { opacity: 1; }
/* Two scrims: a vertical one to seat the type, a lateral one to keep the
   right-hand product area of the plate readable. */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(6,16,25,.86) 0%, rgba(6,16,25,.34) 34%, rgba(6,16,25,.62) 72%, var(--field) 100%),
    linear-gradient(90deg, rgba(6,16,25,.88) 0%, rgba(6,16,25,.42) 46%, rgba(6,16,25,.12) 100%);
}
.hero__inner { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.hero__standfirst {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.hero h1 { max-width: 16ch; }
.hero h1 em { font-style: normal; color: var(--gold); display: block; }
.hero h1 .muted { color: var(--on-field-soft); display: block; }
.hero__body { margin-top: var(--s-5); max-width: 52ch; color: var(--on-field-soft); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-6); }
.hero__spec {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  color: var(--on-field-faint);
  font-size: clamp(0.62rem, 0.58rem + 0.2vw, 0.72rem);
  letter-spacing: 0.14em;
}

/* Stat bar — the client asked for these on one line, sitting on the hero rule. */
.statbar { border-bottom: 1px solid var(--rule); background: var(--field); }
.statbar__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stat {
  padding: var(--s-6) var(--s-5) var(--s-6) 0;
  border-left: 1px solid var(--rule);
  padding-left: var(--s-5);
}
.stat:first-child { border-left: 0; padding-left: 0; }
.stat__value {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-3);
  letter-spacing: -0.03em;
  color: var(--on-field);
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.stat__unit {
  font-family: var(--data);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--gold);
}
.stat__label { margin-top: var(--s-3); font-size: var(--step--1); color: var(--on-field-soft); }

/* ---------------------------------------------------------- certifications */

.certs { position: relative; overflow: hidden; }
.certs__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--s-8);
  align-items: start;
}
.certs__mark {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3rem, 9vw, 6.5rem);
  letter-spacing: -0.05em;
  line-height: .9;
  color: var(--gold);
}
.certs__marks { margin-top: var(--s-6); }
.certs__cta { margin-top: var(--s-6); }

/* ----------------------------------------------------------------- product */

.product__lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-7) var(--s-8);
  align-items: center;
}

/* The exploded plate with its callouts drawn around it, per the client's
   annotated reference — but as live text, so it reflows and translates. */
.exploded {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(11rem, 15rem);
  gap: var(--s-6);
  align-items: center;
}
/* The plate is mounted on white rather than blended into the panel: a blend mode
   here composites against an empty backdrop and punches the image transparent,
   and the mount reads correctly anyway — a specimen card in the dossier. */
.exploded__plate {
  position: relative;
  background: #fff;
  border: 1px solid var(--paper-300);
  padding: var(--s-5) var(--s-4);
}
.exploded__plate img { width: 100%; }
.exploded__layers { display: grid; gap: 0; align-content: center; }
.layer {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  padding-block: 0.62rem;
  border-bottom: 1px solid var(--paper-300);
  opacity: .55;
  transition: opacity 420ms var(--ease);
}
.layer:last-child { border-bottom: 0; }
.layer[data-active], .exploded:not(:hover) .layer { opacity: 1; }
.exploded:hover .layer { opacity: .45; }
.exploded:hover .layer[data-active] { opacity: 1; }
.layer__n {
  font-family: var(--data);
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--gold-deep);
  padding-top: .18rem;
}
.layer__name { display: block; font-size: var(--step--1); color: var(--ink); line-height: 1.35; }
.layer__note { display: block; margin-top: .12rem; font-family: var(--data); font-size: 0.6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }

.features { display: grid; gap: var(--s-5); }
.feature { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: var(--s-4); }
.feature .phase { width: 1.15rem; height: 1.15rem; margin-top: .28rem; }
.feature h3 { font-family: var(--display); font-weight: 600; font-size: var(--step-0); letter-spacing: -0.01em; }
.feature p { margin-top: var(--s-2); font-size: var(--step--1); color: var(--ink-soft); }

.colours { display: flex; gap: var(--s-6); align-items: flex-end; flex-wrap: wrap; }
.colour { text-align: center; }
.colour img { width: clamp(7rem, 14vw, 10rem); margin-inline: auto; }
.colour span { display: block; margin-top: var(--s-3); }

/* --------------------------------------------------------------- packaging */

.units {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
}
.unit {
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}
.paper .unit { border-top-color: var(--paper-300); }
.unit__shot {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.unit__shot img {
  max-height: 100%;
  width: auto;
  transition: transform 700ms var(--ease);
}
/* A photograph among the cut-out renders fills its tile instead of floating in it. */
.unit__shot--photo { border: 1px solid var(--rule); }
.paper .unit__shot--photo { border-color: var(--paper-300); }
.unit__shot--photo img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.unit:hover .unit__shot img { transform: translateY(-6px) scale(1.03); }
.unit__qty {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-2);
  letter-spacing: -0.03em;
  color: var(--gold);
}
.paper .unit__qty { color: var(--gold-deep); }
.unit__name { font-size: var(--step-0); }
.unit__note { font-size: var(--step--1); color: var(--on-field-soft); }
.paper .unit__note { color: var(--ink-soft); }

/* ----------------------------------------------------------- private label */

.trade {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: center;
}
/* Mounted on white, like the five-layer plate: both are product renders on their
   own studio ground and read as specimens set into the panel. The checkerboard
   the client's export baked into this render is removed in the asset pipeline,
   not here — see clear_below_subject() in tools/assets.py. */
.trade__figure { position: relative; }
.trade__figure img {
  width: 100%;
  background: #fff;
  border: 1px solid var(--paper-300);
}
.moq {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-block: 1px solid var(--rule);
  margin-block: var(--s-6);
}
.paper .moq { border-block-color: var(--paper-300); }
.moq__value {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-4);
  letter-spacing: -0.04em;
  color: var(--gold);
}
.paper .moq__value { color: var(--gold-deep); }
.moq__label { font-size: var(--step--1); color: var(--on-field-soft); max-width: 22ch; }
.paper .moq__label { color: var(--ink-soft); }

.ticks { display: grid; gap: var(--s-3); }
.ticks li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.ticks .phase { width: .85rem; height: .85rem; margin-top: .42rem; }
.ticks span { font-size: var(--step--1); }

.pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); }
.pair h3 { font-family: var(--display); font-weight: 600; font-size: var(--step-0); letter-spacing: -0.012em; }
.pair p { margin-top: var(--s-2); font-size: var(--step--1); color: var(--on-field-soft); }
.paper .pair p { color: var(--ink-soft); }

/* ----------------------------------------------------------------- network */

.offices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.office {
  padding: var(--s-6) var(--s-5);
  border-left: 1px solid var(--rule);
}
.office:first-child { border-left: 0; padding-left: 0; }
.office:last-child { padding-right: 0; }
.office__country {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step-2);
  letter-spacing: -0.025em;
}
.office__meta { display: flex; gap: var(--s-3); margin-top: var(--s-3); flex-wrap: wrap; }
.office__role { font-size: var(--step--1); color: var(--gold); }
.office__addr { margin-top: var(--s-4); font-size: var(--step--1); color: var(--on-field-soft); }
.office__detail { margin-top: var(--s-3); font-size: var(--step--1); color: var(--on-field-faint); }
.office__links { margin-top: var(--s-4); display: grid; gap: var(--s-1); }
.office__links a { font-family: var(--data); font-size: 0.72rem; color: var(--on-field-soft); }
.office__links a:hover { color: var(--gold); }

.logistics-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--rule);
}
.paper .logistics-row { border-top-color: var(--paper-300); }
.logistic__value {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-2);
  letter-spacing: -0.03em;
  color: var(--gold);
}
.paper .logistic__value { color: var(--gold-deep); }
.logistic__label { margin-top: var(--s-2); font-size: var(--step--1); color: var(--on-field-soft); }
.paper .logistic__label { color: var(--ink-soft); }

/* ------------------------------------------------------------------- about */

.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--s-8);
  align-items: start;
}
.about__figures { display: grid; gap: var(--s-4); grid-template-columns: 1fr 1fr; }
.about__figures figure { margin: 0; overflow: hidden; border-radius: var(--r-sm); }
.about__figures img { width: 100%; height: 100%; object-fit: cover; }
/* Fixed frames: the three source photos have different native aspects and would
   otherwise leave the pair beneath the lead shot ending on different lines. */
.about__figures figure:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.about__figures figure:not(:first-child) { aspect-ratio: 3 / 2; }
.pull {
  margin-top: var(--s-6);
  padding: var(--s-5) 0 var(--s-5) var(--s-5);
  border-left: 1px solid var(--gold-rule);
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step-2);
  letter-spacing: -0.022em;
  line-height: 1.24;
  color: var(--on-field);
}
.paper .pull { color: var(--ink); }
.about__stats { margin-top: var(--s-6); }

/* ------------------------------------------------------------- recognition */

.recognition { position: relative; }
.recognition__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--s-8);
  align-items: center;
}
.recognition blockquote {
  margin: var(--s-6) 0 var(--s-5);
  padding-left: var(--s-5);
  border-left: 1px solid var(--gold-rule);
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step-1);
  letter-spacing: -0.018em;
  line-height: 1.34;
  color: var(--ink);
}
.recognition blockquote::before { content: '\201C'; color: var(--gold); }
.recognition blockquote::after { content: '\201D'; color: var(--gold); }
.visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.visit-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); }
.visit-grid figure { margin: 0; overflow: hidden; border-radius: var(--r-sm); }
.visit-grid img { transition: transform 900ms var(--ease); }
.visit-grid figure:hover img { transform: scale(1.05); }

/* -------------------------------------------------------------- industries */

/* One large plate with a ruled index beside it, rather than six identical photo
   cards: the client asked for rotating images, and this is the same interaction
   the five-layer diagram uses, so the page keeps one way of pointing at things. */
.industries {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: start;
}
.industries__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--field-800);
}
.industries__shot {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 900ms var(--ease), transform 1400ms var(--ease);
}
.industries__shot[data-on] { opacity: 1; transform: none; }

.industries__index { border-top: 1px solid var(--rule); }
.ind {
  width: 100%;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-4) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.ind__n { color: var(--on-field-faint); padding-top: .2rem; transition: color 300ms var(--ease); }
.ind__name {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  color: var(--on-field-soft);
  transition: color 300ms var(--ease);
}
.ind__note {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--step--1);
  color: var(--on-field-faint);
  max-width: 46ch;
}
.ind:hover .ind__name { color: var(--on-field); }
.ind[aria-pressed='true'] .ind__name { color: var(--on-field); }
.ind[aria-pressed='true'] .ind__n { color: var(--gold); }

/* -------------------------------------------------------- sustainability */

.sustain { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.sustain__item { padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.paper .sustain__item { border-top-color: var(--paper-300); }
.sustain__value {
  font-family: var(--data);
  font-weight: 500;
  font-size: var(--step-0);
  letter-spacing: 0.02em;
  color: var(--gold);
  display: block;
  margin-bottom: var(--s-2);
}
.paper .sustain__value { color: var(--gold-deep); }
.sustain__item h3 { font-family: var(--display); font-weight: 600; font-size: var(--step-0); letter-spacing: -0.012em; }
.sustain__item p { margin-top: var(--s-2); font-size: var(--step--1); color: var(--on-field-soft); }
.paper .sustain__item p { color: var(--ink-soft); }

.footnote {
  margin-top: var(--s-6);
  font-size: var(--step--1);
  color: var(--on-field-faint);
  max-width: 62ch;
}
.paper .footnote { color: var(--ink-faint); }

/* ----------------------------------------------------------------- clients */

.clients {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.paper .clients { border-color: var(--paper-300); }
.client {
  padding: var(--s-6) var(--s-4);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: -0.015em;
  color: var(--on-field-soft);
  transition: color 320ms var(--ease), background 320ms var(--ease);
}
.paper .client { border-color: var(--paper-300); color: var(--ink-soft); }
.client:hover { color: var(--on-field); background: var(--field-700); }
.paper .client:hover { color: var(--ink); background: var(--paper-200); }

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

.quote-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--s-8);
  align-items: start;
}

/* ---------------------------------------------------------------- documents */

.periods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); align-items: start; }
.period__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--gold-rule);
}
.period__range {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-2);
  letter-spacing: -0.03em;
}
.period__status { font-family: var(--data); font-size: 0.68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.period__note { margin-top: var(--s-4); font-size: var(--step--1); color: var(--ink-soft); }
.docs { margin-top: var(--s-5); }
.doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-3) var(--s-4);
  align-items: center;
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--paper-300);
  transition: background 260ms var(--ease);
}
.doc:hover { background: var(--paper-200); }
.doc__name { font-size: var(--step-0); }
.doc__issuer { margin-top: var(--s-1); font-size: var(--step--1); color: var(--ink-faint); }
.doc__get {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--data);
  font-size: 0.68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-deep);
  white-space: nowrap;
}
.doc__get svg { width: .9rem; height: .9rem; }

/* ------------------------------------------------------------ page banners */

.pagehead {
  padding-top: 9rem;
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--rule);
}
.pagehead__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-6) var(--s-8); align-items: end; }

.cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-5) var(--s-7);
  align-items: center;
  padding: var(--s-7) 0;
  border-top: 1px solid var(--rule);
}
.paper .cta-band { border-top-color: var(--paper-300); }

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

.footer { background: var(--field-900); padding-block: var(--s-8) var(--s-6); }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-7) var(--s-6);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--rule-soft);
}
.footer__logo { color: var(--on-field); }
.footer__logo svg { width: 11rem; }
.footer__blurb { margin-top: var(--s-5); font-size: var(--step--1); color: var(--on-field-faint); max-width: 42ch; }
.footer__cycle { margin-top: var(--s-6); }
.footer h2 {
  font-family: var(--data);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-field-faint);
  margin-bottom: var(--s-4);
}
.footer li + li { margin-top: var(--s-2); }
.footer a { font-size: var(--step--1); color: var(--on-field-soft); transition: color 220ms var(--ease); }
.footer a:hover { color: var(--gold); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--s-5);
}
.footer__rights { font-size: var(--step--1); color: var(--on-field-faint); }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* ------------------------------------------------------------------ cookie */

/* A slim bar across the foot of the viewport. It must never sit over the hero's
   primary actions, which a bottom-corner card does at common laptop heights. */
.cookie {
  position: fixed;
  inset: auto 0 0;
  z-index: 120;
  padding: var(--s-4) var(--gutter);
  background: color-mix(in srgb, var(--field-900) 96%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  flex-wrap: wrap;
  justify-content: space-between;
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 480ms var(--ease), opacity 320ms var(--ease), visibility 480ms;
}
.cookie[data-open] { transform: none; opacity: 1; visibility: visible; }
.cookie p { font-size: var(--step--1); color: var(--on-field-soft); max-width: 62ch; }
.cookie__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.cookie .btn { padding: 0.6rem 1rem; }

/* ------------------------------------------------------------------ motion */

/* One authored entrance, used once per band, from an already-visible default so
   nothing depends on JS to be readable. */
.rise { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  html.js .rise {
    opacity: 0;
    transform: translateY(1.35rem);
    filter: blur(6px);
    transition: opacity 900ms var(--ease), transform 900ms var(--ease), filter 900ms var(--ease);
    transition-delay: var(--rise-delay, 0ms);
  }
  html.js .rise[data-shown] { opacity: 1; transform: none; filter: none; }
}

.industries::-webkit-scrollbar { height: 3px; }
.industries::-webkit-scrollbar-track { background: var(--rule-soft); }
.industries::-webkit-scrollbar-thumb { background: var(--gold-rule); }

/* ---------------------------------------------------------------------------
   Responsive. The grid collapses in three moves: four columns to two at 62rem,
   the two-column editorial splits to one at 52rem, and the ruled rows go from
   side-by-side to stacked at 34rem.
   --------------------------------------------------------------------------- */

@media (max-width: 74rem) {
  .certs__grid,
  .product__lead,
  .trade,
  .about,
  .recognition__grid,
  .quote-grid { gap: var(--s-7); }

  .masthead__nav { gap: 1rem; }
}

@media (max-width: 62rem) {
  .masthead__nav { display: none; }
  .masthead__end .btn--ghost { display: none; }
  .burger { display: grid; }
  .masthead__bar { justify-content: space-between; }
  .masthead__logo { margin-right: auto; }

  .statbar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding-block: var(--s-5); }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--rule); }

  .units,
  .sustain,
  .clients,
  .logistics-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .offices { grid-template-columns: 1fr; }
  .office { border-left: 0; padding-inline: 0; border-top: 1px solid var(--rule); }
  .office:first-child { border-top: 0; padding-top: 0; }

  .periods { grid-template-columns: 1fr; gap: var(--s-7); }

  .head { grid-template-columns: 1fr; align-items: start; }
  .head__title, .head__aside { grid-column: 1; }
}

@media (max-width: 52rem) {
  .certs__grid,
  .product__lead,
  .trade,
  .about,
  .recognition__grid,
  .quote-grid,
  .pagehead__grid,
  .industries,
  .pairs { grid-template-columns: 1fr; }

  .hero { min-height: min(88svh, 44rem); padding-top: 7rem; }
  .hero::before {
    background:
      linear-gradient(180deg, rgba(6,16,25,.9) 0%, rgba(6,16,25,.5) 30%, rgba(6,16,25,.78) 68%, var(--field) 100%);
  }
  .hero h1 { max-width: 14ch; }
  .hero__actions .btn { flex: 1 1 14rem; justify-content: center; }

  /* On a phone the plate leads and the layer key sits beneath it. */
  .exploded { grid-template-columns: 1fr; }
  .exploded__plate { max-width: 20rem; margin-inline: auto; }

  .about__figures { grid-template-columns: 1fr 1fr; }
  .trade__figure { order: -1; }

  .cta-band { grid-template-columns: 1fr; }

  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

/* Below this the logo, the quote button and the burger no longer fit on one bar.
   The button goes: the drawer carries it, and the hero's own primary action is
   the first thing under the fold anyway. */
@media (max-width: 40rem) {
  .masthead__end .btn { display: none; }
  .masthead__bar { gap: var(--s-3); }

  /* The nine-phase cycle and the standfirst stop competing for one line. */
  .hero__standfirst { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
}

@media (max-width: 34rem) {
  .statbar__grid,
  .units,
  .sustain,
  .logistics-row,
  .pairs { grid-template-columns: 1fr; }

  .clients { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .stat { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); }
  .stat:first-child { border-top: 0; }

  .register__row { grid-template-columns: 1.6rem minmax(0, 1fr); }
  .register__body { grid-column: 2; }
  .register__aside { grid-column: 2; }

  .specs__row { grid-template-columns: 1fr; gap: var(--s-1); }

  .doc { grid-template-columns: 1fr; }
  .doc__get { justify-self: start; }

  .visit-grid { grid-template-columns: 1fr 1fr; gap: var(--s-2); }

  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: 1; }

  .footer__top { grid-template-columns: 1fr; }
  .cookie { padding: var(--s-4); }
}

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

@media print {
  .masthead, .drawer, .cookie, .hero__media, .btn, .jump { display: none !important; }
  body { background: #fff; color: #000; }
  .paper, .field-800, .field-700 { background: #fff !important; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: .8em; }
}