/* ============================================================================
   Carzure — component + page styles
   Depends on tokens.css. Every value here traces back to
   "Carzure Identity.dc.html" (Identity system v1 · 2d Two Weights).
   ==========================================================================*/

/* ---------------------------------------------------------------- 1. base */

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

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

/* The header is sticky, so an anchor jump would otherwise park the target's
   first line behind it — worst on the flush-top sections (#process, #trust),
   whose heading sits exactly at the section top with no padding to spare.
   Applied to every id, which also keeps a focused invalid form field from
   being scrolled under the bar. */
[id] { scroll-margin-top: calc(var(--cz-header-h) + 24px); }

body {
  margin: 0;
  background: var(--cz-paper);
  color: var(--cz-text);
  font-family: var(--cz-font-sans);
  font-size: 16px;
  line-height: 1.7;
  font-weight: var(--cz-w-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

a {
  color: var(--cz-azure);
  text-decoration: none;
  transition: color var(--cz-fast) var(--cz-ease);
}
a:hover { color: var(--cz-ink); text-decoration: underline; }

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

.cz-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--cz-ink);
  color: var(--cz-text-on-dark);
  padding: 12px 20px;
  border-radius: 0 0 var(--cz-r-sm) 0;
}
.cz-skip:focus { left: 0; text-decoration: none; }

/* ------------------------------------------------------------- 2. layout */

.cz-shell {
  width: 100%;
  max-width: var(--cz-shell);
  margin: 0 auto;
  padding-inline: var(--cz-shell-pad);
}
.cz-shell--text { max-width: var(--cz-shell-text); }

.cz-section { padding-block: var(--cz-s-11); }
.cz-section--tight { padding-block: var(--cz-s-9); }
.cz-section--flush-top { padding-top: 0; }

.cz-stack { display: flex; flex-direction: column; }
.cz-stack--2 { gap: var(--cz-s-2); }
.cz-stack--3 { gap: var(--cz-s-3); }
.cz-stack--4 { gap: var(--cz-s-4); }
.cz-stack--5 { gap: var(--cz-s-5); }
.cz-stack--6 { gap: var(--cz-s-6); }
.cz-stack--8 { gap: var(--cz-s-8); }
.cz-stack--9 { gap: var(--cz-s-9); }

.cz-grid { display: grid; gap: var(--cz-s-5); }
.cz-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cz-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cz-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cz-grid--split { grid-template-columns: 1fr 420px; }
.cz-grid--wide-left { grid-template-columns: 1.35fr 1fr; }
/* A fixed-width document sheet beside flowing copy. The second track is
   minmax(0,…) so long mono strings can't push the grid wider than its box. */
.cz-grid--doc { grid-template-columns: 520px minmax(0, 1fr); gap: var(--cz-s-8); align-items: start; }
/* Form beside a sidebar */
.cz-grid--form { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--cz-s-8); align-items: start; }
/* Two fixed-size stationery artefacts beside flowing notes */
.cz-grid--artefacts { grid-template-columns: 380px 380px minmax(0, 1fr); align-items: start; }

/* --------------------------------------------------------------- 3. type */

/* Mono, wide-tracked, uppercase — the identity's label voice.
   Used for section numbers, field names, VIN / HS / reference codes. */
.cz-eyebrow {
  font-family: var(--cz-font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: var(--cz-track-eyebrow);
  text-transform: uppercase;
  color: var(--cz-text-soft);
}
.cz-eyebrow--plate { letter-spacing: var(--cz-track-plate); font-size: 10px; }
.cz-eyebrow--faint { color: var(--cz-text-faint); }
.cz-eyebrow--sky { color: var(--cz-sky); }
.cz-eyebrow--tiny { font-size: 9px; letter-spacing: var(--cz-track-label); }

.cz-label {
  font-family: var(--cz-font-mono);
  font-size: 9px;
  letter-spacing: var(--cz-track-label);
  text-transform: uppercase;
  color: var(--cz-text-faint);
}

/* The display voice: hairline sets the line, 600 lands the point. */
.cz-display {
  font-size: clamp(34px, 4.2vw, 58px);
  font-weight: var(--cz-w-hair);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--cz-ink);
}
.cz-display b,
.cz-display strong { font-weight: var(--cz-w-bold); }

.cz-h2 {
  font-size: clamp(29px, 3.4vw, 46px);
  font-weight: var(--cz-w-hair);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--cz-ink);
  text-wrap: balance;
}
.cz-h2 b, .cz-h2 strong { font-weight: var(--cz-w-bold); }

.cz-h3 {
  font-size: 20px;
  font-weight: var(--cz-w-bold);
  line-height: 1.35;
  letter-spacing: -0.008em;
  color: var(--cz-ink);
  text-wrap: balance;
}

.cz-h4 {
  font-size: 17px;
  font-weight: var(--cz-w-medium);
  line-height: 1.45;
  color: var(--cz-ink);
}

.cz-lede {
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: var(--cz-w-light);
  line-height: 1.65;
  color: var(--cz-text-body);
  max-width: 58ch;
}

.cz-body { font-size: 16px; line-height: 1.7; color: var(--cz-text-muted); }
.cz-body--sm { font-size: 15px; }
.cz-body--xs { font-size: 13.5px; }
.cz-body a { text-decoration: underline; text-underline-offset: 2px; }

.cz-mono {
  font-family: var(--cz-font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--cz-ink);
}
.cz-mono--lg { font-size: 15px; }

.cz-num {
  font-size: 34px;
  font-weight: var(--cz-w-bold);
  letter-spacing: var(--cz-track-display);
  line-height: 1;
  color: var(--cz-ink);
}

.cz-rule { height: 1px; background: var(--cz-line-soft); border: 0; }
.cz-rule--strong { height: 2px; background: var(--cz-ink); }

/* --------------------------------------------------------------- 4. logo */

/* One number — font-size — sets an entire lockup. Dot side, gap and baseline
   drop are all em-derived so the mark can never drift out of proportion. */
.cz-logo {
  display: inline-flex;
  align-items: flex-end;
  gap: var(--cz-logo-gap);
  font-family: var(--cz-font-sans);
  /* Size a lockup by setting --cz-size. The vw cap only bites on narrow
     screens, so display-scale demos shrink rather than forcing the page to
     scroll sideways — the wordmark is nowrap and cannot break. */
  font-size: min(var(--cz-size, 26px), 12vw);
  line-height: 1;
  letter-spacing: var(--cz-track-word);
  color: var(--cz-ink);
  text-decoration: none;
  white-space: nowrap;
}
a.cz-logo:hover { color: var(--cz-ink); text-decoration: none; }

.cz-logo__word { line-height: 1; }
.cz-logo__car { font-weight: var(--cz-w-bold); }
.cz-logo__zure { font-weight: var(--cz-w-hair); }

.cz-logo__dot {
  flex: none;
  width: max(3px, var(--cz-logo-dot));
  height: max(3px, var(--cz-logo-dot));
  margin-bottom: var(--cz-logo-drop);
  background: var(--cz-azure);
}

/* Reversed — on ink. Blue becomes SKY, never AZURE. */
.cz-logo--on-dark { color: var(--cz-text-on-dark); }
.cz-logo--on-dark .cz-logo__dot { background: var(--cz-sky); }
a.cz-logo--on-dark:hover { color: var(--cz-text-on-dark); }

/* Single-colour — containers, car covers, hot foil, fax-grade print.
   The dot takes the text colour so the mark survives one plate. */
.cz-logo--single .cz-logo__dot { background: currentColor; }

/* On azure ground */
.cz-logo--on-brand { color: var(--cz-text-on-dark); }
.cz-logo--on-brand .cz-logo__dot { background: currentColor; opacity: 0.6; }

/* Monogram — the only permitted mark below 14px, and the avatar / app icon */
.cz-logo--mark { letter-spacing: 0; }

/* Clearspace: half the character height on all four sides */
.cz-logo-clear { display: inline-block; padding: var(--cz-logo-clearspace); }

/* --------------------------------------------------------- 4b. slogan */

/* "Your business first. / The vehicle follows."
   Two stacked lines by construction — the pause between them carries the
   meaning, so the two halves are separate block elements and can never
   reflow onto one line, at any width. The weight break mirrors the
   wordmark: the business is set solid, the vehicle trails off light. */
.cz-slogan {
  display: flex;
  flex-direction: column;
  font-family: var(--cz-font-sans);
  font-size: 17px;
  line-height: 1.28;
  letter-spacing: -0.008em;
  color: var(--cz-ink);
}
.cz-slogan__a { font-weight: var(--cz-w-bold); }
.cz-slogan__b { font-weight: var(--cz-w-hair); }

.cz-slogan--on-dark { color: var(--cz-text-on-dark); }
.cz-slogan--on-dark .cz-slogan__b { color: var(--cz-sky); }
.cz-slogan--sm { font-size: 13px; }
.cz-slogan--lg { font-size: clamp(20px, 2vw, 26px); }
/* Display scale — the slogan carries the hero */
.cz-slogan--hero {
  font-size: clamp(38px, 6.2vw, 80px);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

/* Icon tiles that carry the monogram */
.cz-tile {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  flex: none;
}
.cz-tile--round { border-radius: 50%; background: var(--cz-ink); }
.cz-tile--app { border-radius: var(--cz-r-xl); background: var(--cz-azure); }
.cz-tile--light {
  border-radius: var(--cz-r-xl);
  background: var(--cz-paper);
  border: 1px solid var(--cz-line);
}
.cz-tile--stamp { border-radius: 0; background: var(--cz-azure); width: 58px; height: 58px; }

/* ------------------------------------------------------------ 5. buttons */

.cz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cz-s-2);
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: var(--cz-r-xs);
  font-family: var(--cz-font-sans);
  font-size: 14px;
  font-weight: var(--cz-w-medium);
  line-height: 1.4;
  letter-spacing: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--cz-fast) var(--cz-ease),
              color var(--cz-fast) var(--cz-ease),
              border-color var(--cz-fast) var(--cz-ease);
}
.cz-btn:hover { text-decoration: none; }

.cz-btn--primary { background: var(--cz-azure); color: var(--cz-text-on-dark); }
.cz-btn--primary:hover { background: var(--cz-ink); color: var(--cz-text-on-dark); }

.cz-btn--quiet {
  background: transparent;
  color: var(--cz-ink);
  border-color: var(--cz-line);
}
.cz-btn--quiet:hover { border-color: var(--cz-ink); color: var(--cz-ink); }

.cz-btn--on-dark {
  background: transparent;
  color: var(--cz-text-on-dark);
  border-color: var(--cz-line-on-dark);
}
.cz-btn--on-dark:hover {
  background: var(--cz-text-on-dark);
  color: var(--cz-ink);
  border-color: var(--cz-text-on-dark);
}

.cz-btn--lg { padding: 14px 28px; font-size: 15px; }
.cz-btn--block { width: 100%; }

/* A quiet inline "→" link used to end cards */
.cz-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: var(--cz-w-medium);
  color: var(--cz-azure);
}
.cz-more::after { content: "→"; transition: transform var(--cz-fast) var(--cz-ease); }
.cz-more:hover { text-decoration: none; }
.cz-more:hover::after { transform: translateX(3px); }

/* ------------------------------------------------------------- 6. header */

.cz-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #fff;
  border-bottom: 1px solid var(--cz-line-hair);
}

.cz-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cz-s-8);
  padding-block: 22px;
}

.cz-nav {
  display: flex;
  align-items: center;
  gap: 34px;
}
.cz-nav__link {
  font-size: 14px;
  font-weight: var(--cz-w-medium);
  color: var(--cz-text-muted);
  text-decoration: none;
}
.cz-nav__link:hover { color: var(--cz-ink); text-decoration: none; }
.cz-nav__link[aria-current="page"] { color: var(--cz-ink); }

.cz-burger {
  display: none;
  min-height: 44px;   /* primary control: keep it thumb-sized */
  appearance: none;
  border: 1px solid var(--cz-line);
  background: transparent;
  border-radius: var(--cz-r-xs);
  padding: 9px 12px;
  cursor: pointer;
  font-family: var(--cz-font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--cz-ink);
}

/* --------------------------------------------------------------- 7. hero */

.cz-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--cz-ink);
  color: var(--cz-text-on-dark);
  overflow: hidden;
}

.cz-hero__body {
  padding: 84px 64px;
  display: flex;
  flex-direction: column;
  gap: var(--cz-s-6);
  justify-content: center;
}
.cz-hero__title {
  font-size: clamp(36px, 4.2vw, 60px);
  font-weight: var(--cz-w-hair);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cz-text-on-dark);
  text-wrap: balance;
}
.cz-hero__title b { font-weight: var(--cz-w-bold); }
/* The plain-English answer to "what is this". Sized to be read, not skimmed
   past — it used to be an 11px uppercase eyebrow above the headline. */
.cz-hero__kicker {
  font-size: clamp(19px, 1.9vw, 26px);
  font-weight: var(--cz-w-light);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--cz-sky);
}
.cz-hero__sub {
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: var(--cz-w-light);
  line-height: 1.65;
  color: var(--cz-text-on-dark-muted);
  max-width: 46ch;
}
.cz-hero__actions { display: flex; flex-wrap: wrap; gap: var(--cz-s-3); }
.cz-hero__media { min-height: 420px; }

/* Photo placeholders. Replace .cz-hatch with a real <img> when art lands. */
.cz-hatch {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(115deg, var(--cz-ink-700) 0 10px, var(--cz-ink-500) 10px 20px);
  color: var(--cz-text-on-dark-faint);
  font-family: var(--cz-font-mono);
  font-size: 11px;
  letter-spacing: var(--cz-track-eyebrow);
}
.cz-hatch--container {
  background: repeating-linear-gradient(90deg, var(--cz-ink-700) 0 46px, var(--cz-ink-600) 46px 50px);
}

/* -------------------------------------------------------------- 8. cards */

.cz-card {
  background: var(--cz-surface);
  border: 1px solid var(--cz-line);
  border-radius: var(--cz-r-xl);
  padding: var(--cz-s-7);
  display: flex;
  flex-direction: column;
  gap: var(--cz-s-4);
}
.cz-card--lg { padding: var(--cz-s-8); gap: var(--cz-s-7); }
.cz-card--sm { padding: var(--cz-s-6); border-radius: var(--cz-r-lg); }
.cz-card--dark {
  background: var(--cz-ink);
  border-color: transparent;
  color: var(--cz-text-on-dark);
}
.cz-card--dark .cz-h3,
.cz-card--dark .cz-num { color: var(--cz-text-on-dark); }
.cz-card--dark .cz-body { color: var(--cz-text-on-dark-muted); }
.cz-card--dark .cz-eyebrow { color: var(--cz-sky); }
.cz-card--brand {
  background: var(--cz-azure);
  border-color: transparent;
  color: var(--cz-text-on-dark);
}
.cz-card--flat { background: transparent; border: 0; padding: 0; }
.cz-card--link { transition: border-color var(--cz-fast) var(--cz-ease); }
.cz-card--link:hover { border-color: var(--cz-ink); }

.cz-card__media {
  margin: calc(var(--cz-s-7) * -1) calc(var(--cz-s-7) * -1) 0;
  height: 170px;
  border-radius: var(--cz-r-xl) var(--cz-r-xl) 0 0;
}

/* Dashed frame used for clearspace / empty-state demos */
.cz-frame {
  display: grid;
  place-items: center;
  border: 1px dashed var(--cz-line-dash);
  border-radius: var(--cz-r-md);
  padding: 48px 20px;
}

/* ------------------------------------------------------ 9. specs & lists */

/* Mono label in a fixed gutter, value in sans — the quotation voice. */
.cz-spec { display: flex; flex-direction: column; gap: var(--cz-s-4); }
.cz-spec__row {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: var(--cz-s-3);
  align-items: baseline;
}
.cz-spec__key {
  font-family: var(--cz-font-mono);
  font-size: 9px;
  letter-spacing: var(--cz-track-label);
  text-transform: uppercase;
  color: var(--cz-text-faint);
}
.cz-spec__val { font-size: 15px; font-weight: var(--cz-w-medium); color: var(--cz-ink); }
.cz-spec__val--mono {
  font-family: var(--cz-font-mono);
  font-size: 13px;
  font-weight: var(--cz-w-regular);
  letter-spacing: 0.02em;
}

/* Ticked list */
.cz-list { display: flex; flex-direction: column; gap: var(--cz-s-3); }
.cz-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--cz-text-muted);
}
.cz-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 5px;
  height: 5px;
  background: var(--cz-azure);
}
.cz-list--on-dark li { color: var(--cz-text-on-dark-muted); }
.cz-list--on-dark li::before { background: var(--cz-sky); }

/* Data table — mono figures, hairline rules, no zebra */
.cz-table { width: 100%; border-collapse: collapse; }
.cz-table caption {
  text-align: left;
  padding-bottom: var(--cz-s-4);
  font-family: var(--cz-font-mono);
  font-size: 10px;
  letter-spacing: var(--cz-track-label);
  text-transform: uppercase;
  color: var(--cz-text-faint);
}
.cz-table th {
  text-align: left;
  padding: 0 var(--cz-s-4) var(--cz-s-3) 0;
  border-bottom: 2px solid var(--cz-ink);
  font-family: var(--cz-font-mono);
  font-size: 9px;
  font-weight: var(--cz-w-medium);
  letter-spacing: var(--cz-track-label);
  text-transform: uppercase;
  color: var(--cz-text-soft);
  white-space: nowrap;
}
.cz-table td {
  padding: var(--cz-s-3) var(--cz-s-4) var(--cz-s-3) 0;
  border-bottom: 1px solid var(--cz-line-soft);
  font-size: 14px;
  color: var(--cz-text-muted);
  vertical-align: baseline;
}
.cz-table td:first-child { color: var(--cz-ink); font-weight: var(--cz-w-medium); }
.cz-table .cz-td-mono {
  font-family: var(--cz-font-mono);
  font-size: 13px;
  color: var(--cz-ink);
  white-space: nowrap;
}
.cz-tablewrap { overflow-x: auto; }

/* ------------------------------------------------------------- 10. stats */

.cz-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--cz-line);
  border: 1px solid var(--cz-line);
  border-radius: var(--cz-r-lg);
  overflow: hidden;
}
.cz-stat {
  background: var(--cz-surface);
  padding: var(--cz-s-6) var(--cz-s-6) var(--cz-s-7);
  display: flex;
  flex-direction: column;
  gap: var(--cz-s-2);
}
.cz-stat__num {
  font-size: 40px;
  font-weight: var(--cz-w-bold);
  letter-spacing: var(--cz-track-display);
  line-height: 1;
  color: var(--cz-ink);
}
.cz-stat__num span { color: var(--cz-azure); }

/* Numbered process steps — hairline grid, no card gaps */
.cz-steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--cz-line);
  border: 1px solid var(--cz-line);
  border-radius: var(--cz-r-lg);
  overflow: hidden;
}
.cz-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cz-step {
  counter-increment: step;
  background: var(--cz-surface);
  padding: var(--cz-s-7) var(--cz-s-6);
  display: flex;
  flex-direction: column;
  gap: var(--cz-s-3);
}
.cz-step__no {
  font-family: var(--cz-font-mono);
  font-size: 10px;
  letter-spacing: var(--cz-track-label);
  color: var(--cz-azure);
}
.cz-step__no::before { content: "0" counter(step); }

/* The buyer's lane and ours. Both are labelled, so the three-against-five
   reading is available at a glance without anyone having to count. */
.cz-lane { display: flex; flex-direction: column; gap: var(--cz-s-4); }
.cz-lane + .cz-lane { margin-top: var(--cz-s-7); }
.cz-lane__l {
  font-family: var(--cz-font-mono);
  font-size: 10px;
  letter-spacing: var(--cz-track-label);
  text-transform: uppercase;
  color: var(--cz-text-faint);
}
/* Three columns against the steps' five, on the same grid width — the buyer's
   cards come out visibly wider, which is the whole point. */
.cz-moves {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--cz-line);
  border: 1px solid var(--cz-line);
  border-radius: var(--cz-r-lg);
  overflow: hidden;
}
.cz-move {
  background: var(--cz-surface);
  padding: var(--cz-s-7) var(--cz-s-6);
  display: flex;
  flex-direction: column;
  gap: var(--cz-s-3);
}


/* -------------------------------------------------------------- 11. form */

.cz-field { display: flex; flex-direction: column; gap: var(--cz-s-2); }
.cz-field__label {
  font-family: var(--cz-font-mono);
  font-size: 9px;
  letter-spacing: var(--cz-track-label);
  text-transform: uppercase;
  color: var(--cz-text-faint);
}
.cz-field__hint { font-size: 12px; color: var(--cz-text-faint); }

.cz-input,
.cz-select,
.cz-textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--cz-surface);
  border: 1px solid var(--cz-line);
  border-radius: var(--cz-r-xs);
  font-family: var(--cz-font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--cz-ink);
  transition: border-color var(--cz-fast) var(--cz-ease);
}
.cz-input:hover, .cz-select:hover, .cz-textarea:hover { border-color: var(--cz-line-dash); }
.cz-input:focus, .cz-select:focus, .cz-textarea:focus {
  border-color: var(--cz-azure);
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 111, 191, 0.14);
}
.cz-textarea { min-height: 120px; resize: vertical; }
.cz-select { appearance: none; background-image: none; cursor: pointer; }
.cz-input::placeholder, .cz-textarea::placeholder { color: var(--cz-text-faint); }

.cz-input:user-invalid,
.cz-textarea:user-invalid { border-color: #a8452f; }

.cz-out {
  border: 1px solid var(--cz-line);
  border-radius: var(--cz-r-lg);
  background: var(--cz-paper);
  padding: var(--cz-s-6);
  display: flex;
  flex-direction: column;
  gap: var(--cz-s-4);
}
.cz-out pre {
  margin: 0;
  font-family: var(--cz-font-mono);
  font-size: 12px;
  line-height: 1.8;
  color: var(--cz-ink);
  white-space: pre-wrap;
  word-break: break-word;
}
[hidden] { display: none !important; }

/* ------------------------------------------------------------ 12. footer */

.cz-footer {
  background: var(--cz-ink);
  color: var(--cz-text-on-dark);
  padding-block: var(--cz-s-10) var(--cz-s-7);
}
/* Exclude the lockup: it owns its own colour, and must never pick up
   the muted link tint or the hover underline. */
.cz-footer a:not(.cz-logo) { color: var(--cz-text-on-dark-muted); }
.cz-footer a:not(.cz-logo):hover { color: var(--cz-text-on-dark); text-decoration: underline; }
.cz-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: var(--cz-s-8);
  padding-bottom: var(--cz-s-8);
  border-bottom: 1px solid var(--cz-line-on-dark);
}
.cz-footer__col { display: flex; flex-direction: column; gap: var(--cz-s-3); }
.cz-footer__col .cz-eyebrow { color: var(--cz-text-on-dark-soft); }
/* Direct children only — a descendant selector here would reset the
   font-size of the spans *inside* the logo lockup and break its geometry. */
.cz-footer__col > a:not(.cz-logo),
.cz-footer__col > span {
  font-size: 14px;
  color: var(--cz-text-on-dark-muted);
  text-decoration: none;
}
.cz-footer__base {
  padding-top: var(--cz-s-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--cz-s-4);
  justify-content: space-between;
  font-family: var(--cz-font-mono);
  font-size: 9px;
  letter-spacing: var(--cz-track-plate);
  text-transform: uppercase;
  color: var(--cz-text-on-dark-soft);
}

/* CTA band */
.cz-cta {
  background: var(--cz-ink);
  color: var(--cz-text-on-dark);
  border-radius: var(--cz-r-xl);
  padding: var(--cz-s-10) var(--cz-s-9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cz-s-8);
  flex-wrap: wrap;
}
.cz-cta .cz-h2 { color: var(--cz-text-on-dark); }

/* --------------------------------------------------- 13. brand guide page */

.cz-guide { display: flex; flex-direction: column; gap: var(--cz-s-9); }
.cz-guide__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--cz-s-8);
  padding-bottom: var(--cz-s-7);
  border-bottom: 1px solid var(--cz-line-strong);
}

.cz-swatch { display: flex; flex-direction: column; gap: 9px; }
.cz-swatch__chip { height: 84px; border-radius: var(--cz-r-sm); }
.cz-swatch__chip--paper { background: var(--cz-paper); border: 1px solid var(--cz-line); }
.cz-swatch__name {
  font-family: var(--cz-font-mono);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: var(--cz-text-soft);
}

/* Size ramp on the logo sheet */
.cz-ramp { display: flex; gap: var(--cz-s-8); align-items: flex-end; flex-wrap: wrap; }
.cz-ramp__item { display: flex; flex-direction: column; gap: var(--cz-s-2); }
.cz-ramp__caption {
  font-family: var(--cz-font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--cz-text-faint);
}

/* Don't-do tiles — everything greyed so no wrong lockup reads as brand */
.cz-dont__demo {
  height: 78px;
  display: grid;
  place-items: center;
  color: var(--cz-text-faint);
}
.cz-dont__demo .cz-logo { color: var(--cz-text-faint); --cz-size: 26px; }
.cz-dont__demo .cz-logo__dot { background: var(--cz-text-faint); }
.cz-dont--stretch .cz-logo { transform: scaleX(1.42); }
.cz-dont--uniform .cz-logo__zure { font-weight: var(--cz-w-bold); }
.cz-dont--outline .cz-logo {
  color: transparent;
  -webkit-text-stroke: 1px #8d97a3;
}
.cz-dont--outline .cz-logo__dot {
  background: transparent;
  border: 1px solid #8d97a3;
}
.cz-dont--busy {
  background: linear-gradient(120deg, #cfd8e2, #b9c6d4);
  border-radius: var(--cz-r-sm);
}
.cz-dont--busy .cz-logo, .cz-dont--busy .cz-logo__dot { color: #6f7b89; background-color: #6f7b89; }
.cz-dont--busy .cz-logo { background-color: transparent; }

/* Business card / seal / stationery demos */
.cz-artefact {
  width: 100%;
  max-width: 380px;
  height: 228px;
  border-radius: var(--cz-r-lg);
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cz-artefact--ink { background: var(--cz-ink); }
.cz-artefact--paper { background: var(--cz-surface); border: 1px solid var(--cz-line); }

.cz-seal {
  width: 168px;
  height: 168px;
  border-radius: var(--cz-r-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cz-seal--ink { background: var(--cz-ink); }
.cz-seal--paper { background: var(--cz-surface); border: 1.5px solid var(--cz-ink); }

/* Quotation sheet — the document voice, reused by the compliance page */
.cz-doc {
  width: 100%;
  max-width: 520px;
  background: var(--cz-surface);
  border: 1px solid var(--cz-line);
  border-radius: var(--cz-r-lg);
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.cz-doc__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cz-s-5); }
.cz-doc__ref {
  text-align: right;
  font-family: var(--cz-font-mono);
  font-size: 9px;
  line-height: 1.9;
  letter-spacing: 0.12em;
  color: var(--cz-text-soft);
}
.cz-doc__lines { display: flex; flex-direction: column; gap: 11px; }
.cz-doc__lines div { height: 1px; background: var(--cz-line-soft); }
.cz-doc__total { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--cz-s-5); }
.cz-doc__foot {
  font-family: var(--cz-font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--cz-text-faint);
  text-align: center;
}

/* Brand-prop controls (mirrors the dc component's brandColor / inkColor) */
.cz-props {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cz-s-5);
  padding: var(--cz-s-4) var(--cz-s-6);
  background: var(--cz-surface);
  border: 1px solid var(--cz-line);
  border-radius: var(--cz-r-lg);
}
.cz-props__set { display: flex; align-items: center; gap: var(--cz-s-2); }
.cz-props__swatch {
  width: 22px;
  height: 22px;
  border-radius: var(--cz-r-xs);
  border: 1px solid var(--cz-line);
  padding: 0;
  cursor: pointer;
  appearance: none;
}
.cz-props__swatch[aria-pressed="true"] { outline: 2px solid var(--cz-ink); outline-offset: 2px; }

/* -------------------------------------------------- 13b. lead capture */

/* Hero splits into copy + form: the enquiry sits on the first screen.
   The section stays full-bleed so the photograph runs edge to edge, but its
   content is inset to the same measure as .cz-shell — that is what puts the
   headline on the same vertical as the header wordmark. */
.cz-hero--form {
  grid-template-columns: minmax(0, 1fr) 500px;
  align-items: center;
  padding-inline: max(var(--cz-shell-pad),
                      calc((100% - var(--cz-shell)) / 2 + var(--cz-shell-pad)));
}
.cz-hero--form .cz-hero__body { padding: 96px 0; }
.cz-hero__form { padding: 56px 0 56px var(--cz-s-9); }

/* Photographic hero. The scrim is two layers doing two jobs: a horizontal
   ramp that keeps the headline side dark enough for white text, and a flat
   wash that stops the picture competing with the form card. Ink, not black,
   so the palette still reads as Carzure. */
.cz-hero--photo {
  background-image:
    linear-gradient(100deg,
      rgba(22, 38, 60, 0.95) 0%,
      rgba(22, 38, 60, 0.88) 38%,
      rgba(22, 38, 60, 0.66) 62%,
      rgba(22, 38, 60, 0.74) 100%),
    url("../img/hero-port-sm.jpg");
  background-size: cover;
  background-position: center 60%;
  background-repeat: no-repeat;
}
@media (min-width: 900px) {
  .cz-hero--photo { background-image:
    linear-gradient(100deg,
      rgba(22, 38, 60, 0.95) 0%,
      rgba(22, 38, 60, 0.88) 38%,
      rgba(22, 38, 60, 0.66) 62%,
      rgba(22, 38, 60, 0.74) 100%),
    url("../img/hero-port.jpg"); }
}

/* Always a light card, including on the ink grounds — one set of field
   styles, and the form reads as the brightest thing on the page. */
.cz-lead {
  background: var(--cz-surface);
  border-radius: var(--cz-r-xl);
  padding: var(--cz-s-7);
  display: flex;
  flex-direction: column;
  gap: var(--cz-s-4);
  color: var(--cz-text);
}
.cz-lead__note { margin: 0; font-size: 14px; line-height: 1.6; color: var(--cz-text-muted); }
/* "One of email or WhatsApp" cannot be expressed with the required
   attribute, so the rule is enforced in script and announced here. */
.cz-lead__err {
  margin: 0;
  padding: 9px 12px;
  border-left: 3px solid #a8452f;
  background: rgba(168, 69, 47, 0.09);
  border-radius: 0 var(--cz-r-xs) var(--cz-r-xs) 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #8f3a28;
}
.cz-lead__fine { margin: 0; font-size: 12px; line-height: 1.6; color: var(--cz-text-faint); text-align: center; }

.cz-lead__done { display: flex; flex-direction: column; gap: var(--cz-s-4); }
.cz-lead__done p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--cz-text-muted); }
.cz-lead__done pre {
  margin: 0;
  padding: var(--cz-s-4);
  background: var(--cz-paper);
  border-radius: var(--cz-r-sm);
  font-family: var(--cz-font-mono);
  font-size: 12px;
  line-height: 1.8;
  color: var(--cz-ink);
  white-space: pre-wrap;
  word-break: break-word;
}
.cz-lead__done:focus { outline: none; }
/* On success the fields step aside — only the confirmation remains. */
.cz-lead--sent > *:not([data-rfq-done]) { display: none; }

/* The closing enquiry band */
.cz-enquiry {
  background: var(--cz-ink);
  color: var(--cz-text-on-dark);
  border-radius: var(--cz-r-xl);
  padding: var(--cz-s-10) var(--cz-s-9);
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: var(--cz-s-9);
  align-items: center;
}
.cz-enquiry .cz-h2 { color: var(--cz-text-on-dark); }
.cz-enquiry .cz-spec__key { color: var(--cz-text-on-dark-soft); }
.cz-enquiry .cz-spec__val { color: var(--cz-text-on-dark); }
.cz-enquiry .cz-spec__val a { color: var(--cz-sky); }
.cz-enquiry .cz-spec__val a:hover { color: var(--cz-text-on-dark); }

/* WhatsApp entry point in the header */
.cz-nav__wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cz-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--cz-text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.cz-nav__wa:hover { color: var(--cz-ink); text-decoration: none; }
.cz-nav__wa-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #25a35a;
  flex: none;
}

/* ------------------------------------------------ 13c. landing sections */

/* The two buying tracks. Used and new make different promises, so they get
   equal weight and visibly different treatment rather than one shared card. */
.cz-grid--tracks { gap: var(--cz-s-5); }

.cz-track {
  background: var(--cz-surface);
  border: 1px solid var(--cz-line);
  border-radius: var(--cz-r-xl);
  padding: var(--cz-s-8);
  display: flex;
  flex-direction: column;
  gap: var(--cz-s-4);
}
.cz-track--alt { background: var(--cz-ink); border-color: transparent; }
.cz-track--alt .cz-track__h,
.cz-track--alt .cz-body { color: var(--cz-text-on-dark); }
.cz-track--alt .cz-body { color: var(--cz-text-on-dark-muted); }
.cz-track--alt .cz-track__tag { color: var(--cz-sky); }
.cz-track--alt .cz-list li { color: var(--cz-text-on-dark-muted); }
.cz-track--alt .cz-list li::before { background: var(--cz-sky); }
.cz-track--alt .cz-more { color: var(--cz-sky); }

.cz-track__tag {
  font-family: var(--cz-font-mono);
  font-size: 10px;
  letter-spacing: var(--cz-track-plate);
  text-transform: uppercase;
  color: var(--cz-azure);
}
.cz-track__h {
  font-size: clamp(21px, 2vw, 27px);
  font-weight: var(--cz-w-bold);
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--cz-ink);
  text-wrap: balance;
}
.cz-track .cz-more { margin-top: auto; padding-top: var(--cz-s-2); }

/* Sourcing marks. Held to one optical height and desaturated so five logos
   from five design systems read as one row rather than a ransom note. */
.cz-sourced {
  padding-block: var(--cz-s-9);
  border-bottom: 1px solid var(--cz-line);
}
/* A grid, not wrapped flex: ten columns means twenty marks land as exactly
   two rows, and every cell is the same width whatever the mark's shape. */
.cz-sourced__row {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: var(--cz-s-7) var(--cz-s-6);
  align-items: center;
  justify-items: center;
}
/* Identical box for every mark, scaled to fit inside it. A shared height
   alone does not work here — a square badge and a long wordmark at the same
   height look nothing like the same size. */
.cz-sourced__row img {
  width: 100%;
  max-width: 116px;
  height: 40px;
  object-fit: contain;
  /* brightness(0), not grayscale(1). Grayscale maps colour to luminance, so a
     pale mark stays pale — GAC ships a pure-white knockout logo that vanished
     entirely on this ground, and CAR Inc's gold and eHi's orange came out
     nearly as faint. This flattens every mark to black and keeps its alpha,
     so light and dark logos land at exactly the same weight. */
  filter: brightness(0);
  opacity: 0.62;
}

/* Vehicle categories — image first, no card chrome, so four stay quiet */
.cz-cat { display: flex; flex-direction: column; gap: var(--cz-s-3); }
.cz-cat__h { font-size: 17px; font-weight: var(--cz-w-bold); line-height: 1.35; color: var(--cz-ink); }
.cz-cat .cz-body { margin-top: -6px; }

/* Attribution for third-party photography — a licence condition, not a
   footnote we can quietly drop. */
.cz-credit {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--cz-text-faint);
  max-width: 92ch;
}

.cz-input[aria-invalid="true"] { border-color: #a8452f; }

/* The sourcing-scope statement that replaces a logo wall */
.cz-claim {
  border-left: 3px solid var(--cz-azure);
  padding: var(--cz-s-2) 0 var(--cz-s-2) var(--cz-s-6);
  display: flex;
  flex-direction: column;
  gap: var(--cz-s-3);
  max-width: 74ch;
}

.cz-claim__t {
  font-size: clamp(20px, 1.9vw, 25px);
  font-weight: var(--cz-w-bold);
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--cz-ink);
}

/* Trust pillars — numbered because they are genuinely ranked, not decorative.
   Each carries its own evidence: a report, a loading photo, a real spec sheet. */
.cz-grid--pillars { gap: var(--cz-s-6); }
.cz-pillar { display: flex; flex-direction: column; gap: var(--cz-s-4); }
.cz-pillar__no {
  font-family: var(--cz-font-mono);
  font-size: 11px;
  letter-spacing: var(--cz-track-label);
  color: var(--cz-azure);
  padding-bottom: var(--cz-s-2);
  border-bottom: 1px solid var(--cz-line);
}

/* Imagery slots. A missing asset renders as an unmistakably unfinished frame
   naming what it is waiting for — it must never be mistaken for a design
   choice, and it must never quietly ship. */
.cz-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cz-s-2);
  border: 1px dashed var(--cz-line-dash);
  border-radius: var(--cz-r-md);
  background: repeating-linear-gradient(
    135deg, transparent 0 9px, rgba(141, 151, 163, 0.07) 9px 18px);
  text-align: center;
  padding: var(--cz-s-4);
}
.cz-slot--cat { aspect-ratio: 4 / 3; }
.cz-slot--pillar { aspect-ratio: 16 / 10; }
.cz-slot__l {
  font-family: var(--cz-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--cz-track-label);
  text-transform: uppercase;
  color: var(--cz-text-faint);
}
.cz-slot__h { font-size: 13px; color: var(--cz-text-faint); }

/* Real imagery drops straight into the same box.
   height:auto is load-bearing — the width/height attributes on the markup
   (kept, because they reserve space and stop layout shift) otherwise resolve
   to a fixed CSS height that beats aspect-ratio, and object-fit then crops
   the sides off every photograph. */
.cz-cat img, .cz-pillar img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--cz-r-md);
  border: 1px solid var(--cz-line);
  background: var(--cz-ink-700);
}
/* Manufacturer press art is 16:9; matching it exactly means object-fit has
   nothing left to crop, so every image shows whole. */
.cz-cat img { aspect-ratio: 16 / 9; }
/* Five classes: three across, then two. Below 1180 it steps to two, then one. */
.cz-grid--cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* The loading photograph is shot in portrait on a phone; 3:4 keeps both cars
   and the lashing in frame and gives it the same visual mass as the two
   document panels either side of it. */
.cz-pillar img { aspect-ratio: 3 / 4; }

/* The document each process step produces */
.cz-step__doc {
  margin-top: auto;
  padding-top: var(--cz-s-3);
  font-family: var(--cz-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--cz-azure);
}

/* Inspection result — the first trust pillar. Built in-house so the issuer
   is never named and no real owner's record is republished. */
.cz-report {
  border: 1px solid var(--cz-line);
  border-radius: var(--cz-r-md);
  background: var(--cz-surface);
  padding: var(--cz-s-5);
  display: flex;
  flex-direction: column;
  gap: var(--cz-s-4);
}
.cz-report__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cz-s-3);
  padding-bottom: var(--cz-s-3);
  border-bottom: 2px solid var(--cz-ink);
}
.cz-report__l {
  font-family: var(--cz-font-mono);
  font-size: 9px;
  letter-spacing: var(--cz-track-label);
  text-transform: uppercase;
  color: var(--cz-text-faint);
}
.cz-report__ref { font-family: var(--cz-font-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--cz-text-soft); }
.cz-report__veh {
  display: flex;
  justify-content: space-between;
  gap: var(--cz-s-3);
  flex-wrap: wrap;
  font-family: var(--cz-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--cz-text-soft);
}
.cz-report__checks { display: flex; flex-direction: column; }
.cz-report__checks li {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--cz-s-3);
  padding: 7px 0;
  border-top: 1px solid var(--cz-line-soft);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--cz-text-muted);
}
.cz-report__checks li:first-child { border-top: 0; }
.cz-report__checks em {
  font-family: var(--cz-font-mono);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--cz-azure);
  white-space: nowrap;
}
/* The brand's square, reused as the cleared mark */
.cz-report__tick { width: 9px; height: 9px; background: var(--cz-azure); flex: none; }
.cz-report__grade {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cz-s-3);
  padding: var(--cz-s-3) 0;
  border-top: 1px solid var(--cz-line-soft);
  border-bottom: 1px solid var(--cz-line-soft);
}
.cz-report__g {
  font-size: 30px;
  font-weight: var(--cz-w-bold);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cz-azure);
}
.cz-report__scope { margin: 0; font-size: 12px; line-height: 1.6; color: var(--cz-text-muted); }
.cz-report__foot {
  font-family: var(--cz-font-mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  color: var(--cz-text-faint);
  text-align: center;
}

/* Configuration extract — the third trust pillar. Built from real quotation
   data rather than a screenshot, so desensitising is structural: no price,
   no port, no inspection provider, no private contact details exist here. */
.cz-conf {
  border: 1px solid var(--cz-line);
  border-radius: var(--cz-r-md);
  background: var(--cz-surface);
  padding: var(--cz-s-5);
  display: flex;
  flex-direction: column;
  gap: var(--cz-s-3);
}
.cz-conf__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--cz-s-3);
  padding-bottom: var(--cz-s-3);
  border-bottom: 2px solid var(--cz-ink);
}
.cz-conf__ref {
  font-family: var(--cz-font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--cz-text-soft);
}
.cz-conf__title { font-size: 14px; font-weight: var(--cz-w-bold); line-height: 1.35; color: var(--cz-ink); }
.cz-conf__meta {
  font-family: var(--cz-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--cz-text-faint);
}
.cz-conf__list { margin: 0; display: flex; flex-direction: column; }
.cz-conf__list > div {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: var(--cz-s-3);
  padding: 7px 0;
  border-top: 1px solid var(--cz-line-soft);
}
.cz-conf__list > div:first-child { border-top: 0; }
.cz-conf__list dt {
  font-family: var(--cz-font-mono);
  font-size: 8.5px;
  letter-spacing: var(--cz-track-label);
  text-transform: uppercase;
  color: var(--cz-text-faint);
  padding-top: 2px;
}
.cz-conf__list dd { margin: 0; font-size: 12px; line-height: 1.5; color: var(--cz-text-muted); }
.cz-conf__foot {
  font-family: var(--cz-font-mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  color: var(--cz-text-faint);
  text-align: center;
  padding-top: var(--cz-s-2);
}

/* Larger hero proof list */
.cz-list--lg li { font-size: 16px; padding-left: 22px; }
.cz-list--lg li::before { top: 11px; width: 6px; height: 6px; }

/* --------------------------------------------------------- 14. utilities */

.cz-mt-auto { margin-top: auto; }
.cz-center { text-align: center; }
.cz-nowrap { white-space: nowrap; }
.cz-flex { display: flex; }
.cz-wrap { flex-wrap: wrap; }
.cz-items-end { align-items: flex-end; }
.cz-items-center { align-items: center; }
.cz-between { justify-content: space-between; }
.cz-gap-2 { gap: var(--cz-s-2); }
.cz-gap-3 { gap: var(--cz-s-3); }
.cz-gap-4 { gap: var(--cz-s-4); }
.cz-gap-5 { gap: var(--cz-s-5); }
.cz-gap-8 { gap: var(--cz-s-8); }
.cz-vis-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------- 15. responsive */

@media (max-width: 1180px) {
  .cz-grid--split { grid-template-columns: 1fr; }
  .cz-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cz-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cz-steps,
  .cz-steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Three across still fits here; dropping it to two would put "Receive" on
     its own row and break the three-move reading. */
  .cz-grid--artefacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cz-grid--cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cz-hero--form { grid-template-columns: minmax(0, 1fr) 420px; }
  .cz-enquiry { grid-template-columns: 1fr 400px; gap: var(--cz-s-8); }
  .cz-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 980px) {
  /* Set the token, not the padding: the hero derives its own inset from
     --cz-shell-pad, so changing it here keeps the two in step. */
  :root { --cz-shell-pad: 32px; }
  .cz-section { padding-block: var(--cz-s-10); }
  .cz-hero,
  .cz-hero--form { grid-template-columns: minmax(0, 1fr); }
  /* horizontal inset now comes from the section, so only the rhythm changes;
     matched specificity so it actually beats the desktop rule */
  .cz-hero--form .cz-hero__body { padding: 56px 0 40px; }
  .cz-hero__media { min-height: 260px; }
  .cz-hero__form { padding: 0 0 56px; }
  /* stacked: the horizontal ramp no longer lines up with the text, so the
     scrim goes flat and a little heavier to hold contrast down the page */
  .cz-hero--photo {
    background-image:
      linear-gradient(rgba(22, 38, 60, 0.90), rgba(22, 38, 60, 0.93)),
      url("../img/hero-port-sm.jpg");
  }
  .cz-claim--people { grid-template-columns: minmax(0, 1fr); }
  .cz-sourced__row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--cz-s-6) var(--cz-s-5); }
  .cz-sourced__row img { height: 34px; }
  .cz-enquiry { grid-template-columns: minmax(0, 1fr); gap: var(--cz-s-8); padding: var(--cz-s-9) var(--cz-s-7); }
  .cz-grid--3,
  .cz-grid--doc,
  .cz-grid--form,
  .cz-grid--tracks,
  .cz-grid--wide-left { grid-template-columns: minmax(0, 1fr); }
  .cz-track { padding: var(--cz-s-7); }

  .cz-nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--cz-line-hair);
    padding: var(--cz-s-4) 32px var(--cz-s-6);
  }
  .cz-nav[data-open="true"] { display: flex; }
  .cz-nav__link { padding-block: 12px; border-bottom: 1px solid var(--cz-line-hair); }
  .cz-nav .cz-btn { margin-top: var(--cz-s-4); }
  .cz-burger { display: inline-flex; }
  .cz-header__inner { position: relative; }
}

@media (max-width: 640px) {
  :root { --cz-shell-pad: 20px; }
  .cz-section { padding-block: var(--cz-s-9); }
  .cz-grid--2,
  .cz-grid--4,
  .cz-grid--cats { grid-template-columns: 1fr; }
  .cz-stats { grid-template-columns: 1fr; }
  .cz-steps,
  .cz-steps--4 { grid-template-columns: 1fr; }
  .cz-moves { grid-template-columns: 1fr; }
  .cz-grid--artefacts { grid-template-columns: minmax(0, 1fr); }
  .cz-footer__grid { grid-template-columns: 1fr; gap: var(--cz-s-6); }
  .cz-guide__head { flex-direction: column; align-items: flex-start; gap: var(--cz-s-5); }
  .cz-artefact { max-width: none; height: auto; min-height: 200px; }
  .cz-cta { padding: var(--cz-s-9) var(--cz-s-6); }
  .cz-enquiry { padding: var(--cz-s-8) var(--cz-s-5); }
  .cz-lead { padding: var(--cz-s-6); }
  .cz-hero__form { padding: 0 20px 48px; }
  .cz-track { padding: var(--cz-s-6); }
  .cz-claim { padding-left: var(--cz-s-5); }
  /* twenty marks at desktop scale would eat most of a phone screen */
  .cz-sourced { padding-block: var(--cz-s-7); }
  .cz-sourced__row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cz-s-5) var(--cz-s-4); }
  .cz-sourced__row img { height: 26px; }
  /* thumb-sized targets: these sit at 24–32px on a phone otherwise */
  .cz-footer__col > a,
  .cz-enquiry .cz-spec__val a,
  .cz-more { min-height: 44px; display: flex; align-items: center; }
  .cz-more { display: inline-flex; }
  .cz-spec__row { grid-template-columns: 1fr; gap: var(--cz-s-1); }
  .cz-doc { padding: 32px 24px; }
  .cz-nav { padding-inline: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  /* smooth scrolling is motion too — jump instead */
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------- 16. print */

@media print {
  .cz-header, .cz-footer, .cz-cta, .cz-burger { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .cz-card, .cz-doc { border-color: #ccc; break-inside: avoid; }
  .cz-hero { background: #fff; color: var(--cz-ink); }
  .cz-hero__title, .cz-hero__sub { color: var(--cz-ink); }
  a { color: var(--cz-ink); }
}