/* ==========================================================================
   Marvus Advisory — components
   ========================================================================== */

/* ---------- Logo ---------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
.brand__mark { width: clamp(124px, 14vw, 168px); height: auto; }
.is-dark .brand__mark--dark,
.is-light .brand__mark--light { display: none; }

/* ---------- Buttons ------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-ink: var(--ink);
  --btn-edge: currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-height: 48px;
  padding: 0.875rem var(--s-3);
  border: var(--hairline) solid var(--btn-edge);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  line-height: 1;
  text-decoration: none;
  text-align: center;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn .icon { transition: transform var(--dur) var(--ease); }
.btn:hover .icon { transform: translateX(3px); }

/* Orange fill carries Deep Blue text — 7.4:1. Orange text on white would not
   pass at this size, so the accent is always a field here, never ink. */
.btn--primary {
  --btn-bg: var(--c-orange);
  --btn-ink: var(--c-blue);
  --btn-edge: var(--c-orange);
}
.btn--primary:hover { --btn-bg: var(--c-white); --btn-edge: var(--c-blue); }
.is-dark .btn--primary:hover { --btn-bg: var(--c-white); --btn-edge: var(--c-white); }

.btn--ghost { --btn-edge: var(--field-edge); }
.btn--ghost:hover { --btn-bg: var(--ink); --btn-ink: var(--surface); --btn-edge: var(--ink); }

.btn--block { width: 100%; }

/* Inline link with a trailing arrow. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  text-decoration: none;
  padding-block-end: 2px;
  border-block-end: var(--hairline) solid var(--rule);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.arrow-link:hover { border-block-end-color: var(--c-orange); }
.arrow-link .icon { transition: transform var(--dur) var(--ease); }
.arrow-link:hover .icon { transform: translateX(3px); }

/* ---------- Icons --------------------------------------------------------- */
.icon {
  width: 1em;
  height: 1em;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.icon--lg { width: 28px; height: 28px; }

/* ---------- Header --------------------------------------------------------
   Fixed rather than sticky so the dark hero runs underneath it; the hero and
   the inner page heads reserve the matching top padding.                     */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  background: transparent;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  border-block-end: var(--hairline) solid transparent;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 96px;
  transition: min-height var(--dur) var(--ease);
}
.site-header.is-stuck {
  background: var(--c-blue-92);
  border-block-end-color: var(--c-white-12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.site-header.is-stuck .site-header__inner { min-height: 72px; }

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: var(--s-4); }
.nav__link {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  text-decoration: none;
  padding-block: var(--s-1);
  border-block-end: var(--hairline) solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__link:hover,
.nav__link[aria-current="true"] { border-block-end-color: var(--c-orange); }

.site-header__actions { display: flex; align-items: center; gap: var(--s-2); }
.site-header__cta { display: none; }

@media (min-width: 1024px) {
  .nav { display: block; }
  .site-header__cta { display: inline-flex; }
}

/* ---------- Mobile menu --------------------------------------------------- */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: 48px;
  padding-inline: var(--s-1);
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: inherit;
}
.menu-toggle__bars {
  display: grid;
  gap: 4px;
  width: 22px;
}
.menu-toggle__bars span {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  padding-block: 96px var(--s-6);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu__list { border-block-start: var(--hairline) solid var(--rule); }
.mobile-menu__list li { border-block-end: var(--hairline) solid var(--rule); }
.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding-block: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  text-decoration: none;
}
.mobile-menu__link:hover { color: var(--c-orange); }
.mobile-menu__foot { margin-block-start: auto; padding-block-start: var(--s-6); }
body.is-menu-open { overflow: hidden; }

/* Declared after .menu-toggle so the desktop rule wins on source order. */
@media (min-width: 1024px) {
  .menu-toggle { display: none; }
  .mobile-menu { display: none; }
}

/* ---------- Diagonal placeholder ------------------------------------------
   Stands in for photography. Holds a real aspect ratio so swapping in an
   <img> later does not move the layout.                                      */
.placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--ph-ratio, 3 / 2);
  background-color: var(--hatch-base);
  background-image: repeating-linear-gradient(
    45deg,
    var(--hatch-line) 0,
    var(--hatch-line) 8px,
    transparent 8px,
    transparent 16px
  );
}
.placeholder__note {
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.placeholder--portrait { --ph-ratio: 3 / 4; }
.placeholder--wide { --ph-ratio: 16 / 9; }
.placeholder--tall { --ph-ratio: 4 / 5; }

/* ---------- Background image layer ----------------------------------------
   Used by the hero and by any dark section that should sit on a photograph.
   The picture and the darkening are two separate layers on purpose: the wash
   never changes, so the choice of photograph cannot break text contrast.

   To use a real image, set one property on the section and change nothing
   else — the hatch below is only the stand-in default:

     .hero    { --section-image: url("../img/hero.jpg"); }
     #coverage { --section-image: url("../img/coverage.jpg"); }

   Markup: put <div class="section-bg" aria-hidden="true"> as the first child
   of a `position: relative` block, and add `section--image` to a `.section`
   so its container is lifted above the layer.                               */
.section-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--c-blue);
  /* The placeholder stripes sit at 16% rather than the usual 8%, because they
     are read through the wash below; a real photograph carries far more tonal
     range and shows through at the same setting. */
  background-image: var(--section-image, repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.16) 0,
    rgba(255, 255, 255, 0.16) 8px,
    transparent 8px,
    transparent 16px
  ));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Default wash: even, opening up through the middle band so the picture reads.
   At its lightest point white text still clears 9.7:1 over a fully white
   photograph, so this is safe whatever image is dropped in. */
.section-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 24, 47, 0.92) 0%,
    rgba(0, 24, 47, 0.80) 50%,
    rgba(0, 24, 47, 0.92) 100%
  );
}
/* Hero variant: heaviest under the text column and under the header, easing
   off to the right so the image reads behind the portrait block. Even at its
   lightest point white text clears 6.7:1 over a white photograph. */
.section-bg--hero::after {
  background:
    linear-gradient(180deg, rgba(0, 24, 47, 0.85) 0, rgba(0, 24, 47, 0) 220px),
    linear-gradient(90deg, rgba(0, 24, 47, 0.94) 0%, rgba(0, 24, 47, 0.86) 45%, rgba(0, 24, 47, 0.7) 100%);
}
.section-bg__note {
  position: absolute;
  inset-block-end: var(--s-3);
  inset-inline-end: var(--gutter);
  z-index: 1;
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--c-white-40);
}

/* --- Photography ---------------------------------------------------------
   The picture is a real <img> inside the layer rather than a CSS background.
   That buys three things a background cannot: native loading="lazy", so the
   two below-the-fold backgrounds do not compete with the hero for bandwidth;
   <picture> for the WebP/JPEG fallback, with no reliance on image-set()
   support; and a working image even if CSS image formats change under us.  */
.section-bg picture { position: absolute; inset: 0; z-index: 0; }
.section-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* The wash has to sit above the photograph. */
.section-bg::after { z-index: 1; }

.section--image { overflow: hidden; }
.section--image > .container { position: relative; z-index: 1; }
/* Form fields have to read as solid recesses, not as windows onto the picture. */
.section--image.is-dark { --field: rgba(0, 24, 47, 0.55); }

/* Below the desktop breakpoint the copy runs the full width, so a sideways
   fall-off would put text over the lightest part of the image. Flatten it. */
@media (max-width: 1023px) {
  .section-bg--hero::after {
    background: rgba(0, 24, 47, 0.9);
  }
  .section-bg__note { display: none; }
}

/* ---------- Media --------------------------------------------------------
   In-flow photography. The intrinsic width/height attributes on the <img>
   hold the aspect ratio, which is what keeps CLS at zero.                   */
.media { display: block; }
.media img { display: block; width: 100%; height: auto; }

/* ---------- Hero ---------------------------------------------------------- */
.hero {
  padding-block: calc(96px + var(--s-6)) var(--section-y-tight);
  position: relative;
  overflow: hidden;
}
.hero__inner { position: relative; z-index: 1; }
.hero__eyebrow { color: var(--c-white-60); margin-block-end: var(--s-4); }
.hero__title { max-width: 16ch; }
.hero__lead {
  margin-block-start: var(--s-4);
  max-width: 52ch;
  color: var(--c-white-80);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-block-start: var(--s-6);
}
.hero__regions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-block-start: var(--s-6);
  padding-block-start: var(--s-3);
  border-block-start: var(--hairline) solid var(--c-white-12);
  color: var(--c-white-60);
}
.hero__regions .dot { color: var(--c-orange); }
.hero__visual { margin-block-start: var(--s-8); }

@media (min-width: 1024px) {
  .hero { padding-block: calc(96px + var(--s-10)) var(--section-y-tight); }
  .hero__visual { margin-block-start: 0; }
  .hero__grid { align-items: end; }
}

/* Hero meta strip — three facts on hairlines. */
.meta-strip {
  display: grid;
  gap: var(--s-3);
  margin-block-start: var(--s-10);
  padding-block-start: var(--s-3);
  border-block-start: var(--hairline) solid var(--rule);
}
.meta-strip__item .u-label { color: var(--ink-muted); display: block; margin-block-end: var(--s-1); }
.meta-strip__item p { font-family: var(--font-display); font-size: var(--fs-h4); line-height: var(--lh-heading); }

@media (min-width: 768px) {
  .meta-strip { grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
}

/* ---------- Service cards ------------------------------------------------- */
.card-grid {
  display: grid;
  gap: var(--hairline);
  background: var(--rule);
  border-block: var(--hairline) solid var(--rule);
}
.card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  background: var(--surface);
  transition: background-color var(--dur) var(--ease);
}
.card__index { color: var(--c-orange); }
.card__title { max-width: 18ch; }
.card__text { color: var(--ink-muted); font-size: var(--fs-small); }
.card__foot { margin-block-start: auto; padding-block-start: var(--s-2); }

@media (min-width: 768px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .card { padding: var(--s-5); }
}
@media (min-width: 1200px) {
  .card-grid { grid-template-columns: repeat(4, 1fr); }
  .card:hover { background: var(--field); }
}

/* ---------- Audience columns ---------------------------------------------- */
.audience {
  padding-block-start: var(--s-4);
  border-block-start: 2px solid var(--ink);
}
.audience__kicker { color: var(--c-orange); margin-block-end: var(--s-2); }
.audience__title { margin-block-end: var(--s-3); }
.audience__text { color: var(--ink-muted); font-size: var(--fs-small); margin-block-end: var(--s-4); }
.tick-list { display: grid; }
.tick-list li {
  display: flex;
  gap: var(--s-2);
  padding-block: var(--s-2);
  border-block-start: var(--hairline) solid var(--rule);
  font-size: var(--fs-small);
  color: var(--ink-muted);
}
.tick-list li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-block-start: 0.55em;
  background: var(--c-orange);
}

.note-bar {
  margin-block-start: var(--s-8);
  padding: var(--s-3);
  background: var(--field);
  border-inline-start: 2px solid var(--c-orange);
  font-size: var(--fs-small);
  color: var(--ink-muted);
}
.note-bar p { max-width: 90ch; }

/* ---------- Coverage list (dark insert) ----------------------------------- */
.coverage-list { border-block-start: var(--hairline) solid var(--rule); }
.coverage-list__item {
  display: grid;
  gap: var(--s-2);
  padding-block: var(--s-4);
  border-block-end: var(--hairline) solid var(--rule);
}
.coverage-list__name { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-heading); }
.coverage-list__text { color: var(--ink-muted); font-size: var(--fs-small); }
.coverage-list__index { color: var(--c-orange); }

@media (min-width: 768px) {
  .coverage-list__item {
    grid-template-columns: 4rem 1fr 1.4fr;
    gap: var(--grid-gap);
    align-items: start;
    padding-block: var(--s-5);
  }
}

/* ---------- Process steps ------------------------------------------------- */
.steps { display: grid; gap: 0; }
.step {
  position: relative;
  padding-block: var(--s-4);
  border-block-start: var(--hairline) solid var(--rule);
}
.step__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  color: var(--c-orange);
  margin-block-end: var(--s-2);
}
.step__title { margin-block-end: var(--s-2); }
.step__text { color: var(--ink-muted); font-size: var(--fs-small); max-width: 34ch; }

@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
  .step { padding-block: var(--s-4) 0; }
  /* Node sitting on the shared connector line. */
  .step::before {
    content: "";
    position: absolute;
    inset-block-start: -3px;
    inset-inline-start: 0;
    width: 5px;
    height: 5px;
    background: var(--c-orange);
  }
}

/* ---------- Fact row ------------------------------------------------------ */
.facts {
  display: grid;
  gap: var(--s-4);
  margin-block-start: var(--s-10);
  padding-block-start: var(--s-4);
  border-block-start: var(--hairline) solid var(--rule);
}
.fact__value {
  font-family: var(--font-display);
  font-size: var(--fs-numeral);
  line-height: var(--lh-display);
  display: block;
}
.fact__label {
  color: var(--ink-muted);
  font-size: var(--fs-small);
  display: block;
  margin-block-start: var(--s-1);
  max-width: 26ch;
}

@media (min-width: 768px) {
  .facts { grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
}

.expertise__visual { margin-block-start: var(--s-8); }

/* ---------- Reason list --------------------------------------------------- */
.reasons { display: grid; gap: 0; }
.reason {
  display: grid;
  gap: var(--s-2);
  padding-block: var(--s-4);
  border-block-start: var(--hairline) solid var(--rule);
}
.reason__text { color: var(--ink-muted); font-size: var(--fs-small); }

@media (min-width: 768px) {
  .reason { grid-template-columns: 2.5rem 1fr 1.5fr; gap: var(--grid-gap); align-items: start; }
  .reason__num {
    color: var(--c-orange);
    font-family: var(--font-display);
    font-size: var(--fs-caption);
    letter-spacing: var(--ls-caption);
    padding-block-start: 0.45em;
  }
}

/* ---------- Accordion ----------------------------------------------------- */
.accordion { border-block-start: var(--hairline) solid var(--rule); }
.accordion__item { border-block-end: var(--hairline) solid var(--rule); }
.accordion__trigger {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  width: 100%;
  padding-block: var(--s-4);
  text-align: start;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}
.accordion__trigger:hover { color: var(--c-orange); }
.accordion__num {
  flex: none;
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  color: var(--c-orange);
  padding-block-start: 0.5em;
  width: 2.5rem;
}
.accordion__question { flex: 1; }
.accordion__sign {
  flex: none;
  position: relative;
  width: 16px;
  height: 16px;
  margin-block-start: 0.35em;
}
.accordion__sign::before,
.accordion__sign::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
}
.accordion__sign::after { transform: rotate(90deg); }
.accordion__trigger[aria-expanded="true"] .accordion__sign::after { transform: rotate(0deg); }

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease);
}
.accordion__panel[data-open="true"] { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__body {
  padding-block-end: var(--s-4);
  padding-inline-start: 0;
  color: var(--ink-muted);
  font-size: var(--fs-small);
  max-width: 68ch;
}
.no-js .accordion__panel { grid-template-rows: 1fr; }

@media (min-width: 768px) {
  .accordion__body { padding-inline-start: 2.5rem; }
}

/* ---------- Form ---------------------------------------------------------- */
.form { display: grid; gap: var(--s-3); }
.field { display: grid; gap: var(--s-1); }
.field__label {
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.field__req { color: var(--c-orange); }
.field__control {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem var(--s-2);
  background: var(--field);
  border: var(--hairline) solid var(--field-edge);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: var(--fs-body);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.field__control::placeholder { color: var(--ink-muted); }
.field__control:hover { border-color: var(--ink); }
textarea.field__control { min-height: 132px; resize: vertical; }
.field__error {
  font-size: var(--fs-caption);
  color: var(--c-orange);
  min-height: 1em;
}
.field.has-error .field__control { border-color: var(--c-orange); }

.field--check {
  --check-size: 20px;
  grid-template-columns: var(--check-size) 1fr;
  align-items: start;
  gap: var(--s-2);
  padding-block-start: var(--s-2);
}
.field--check input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: var(--check-size);
  height: var(--check-size);
  /* Centre the box on the first line of the label rather than on the top of
     its line box, so the two read as sitting on the same line. */
  margin-block-start: calc((var(--fs-small) * var(--lh-body) - var(--check-size)) / 2);
  border: var(--hairline) solid var(--field-edge);
  background: var(--field);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* The tick is a background image rather than a pseudo-element: WebKit does not
   render ::before/::after on form controls reliably. Inline data URI, so this
   is still not an external request. */
.field--check input:checked {
  border-color: var(--c-orange);
  background-color: var(--c-orange);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none' stroke='%2300182F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5.2 4.4 8.6 11 1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 10px;
}
.field--check label { font-size: var(--fs-small); color: var(--ink-muted); }
.field--check .field__error { grid-column: 1 / -1; }

.form__status {
  font-size: var(--fs-small);
  padding: var(--s-2);
  border-inline-start: 2px solid var(--c-orange);
  background: var(--field);
}
.form__status[hidden] { display: none; }

@media (min-width: 640px) {
  .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
}

/* ---------- Contact section ----------------------------------------------- */
.contact__lead { margin-block-start: var(--s-4); max-width: 46ch; }
.contact__details { margin-block-start: var(--s-8); }
/* Stacked under the copy on narrow screens; a true second column from the
   desktop breakpoint, where it should start level with the heading. */
.contact__form-col { margin-block-start: var(--s-8); }

@media (min-width: 1024px) {
  .contact__form-col { margin-block-start: 0; }
}

/* ---------- Direct contacts ----------------------------------------------- */
.contact-list { border-block-start: var(--hairline) solid var(--rule); }
.contact-list__item {
  display: grid;
  gap: var(--s-1);
  padding-block: var(--s-3);
  border-block-end: var(--hairline) solid var(--rule);
}
.contact-list__label { color: var(--ink-muted); }
.contact-list__value { font-family: var(--font-display); font-size: var(--fs-body); }
.contact-list__value a { text-decoration: none; border-block-end: var(--hairline) solid var(--rule); }
.contact-list__value a:hover { border-block-end-color: var(--c-orange); }

@media (min-width: 480px) {
  .contact-list__item { grid-template-columns: 8.5rem 1fr; align-items: baseline; gap: var(--s-3); }
}

/* ---------- Footer -------------------------------------------------------- */
.site-footer { padding-block: var(--section-y-tight) var(--s-5); }
.site-footer__top { display: grid; gap: var(--s-8); }
.site-footer__desc { color: var(--c-white-60); font-size: var(--fs-small); max-width: 36ch; margin-block-start: var(--s-3); }
.footer-nav__title { color: var(--c-white-60); margin-block-end: var(--s-3); display: block; }
.footer-nav__list { display: grid; gap: var(--s-2); }
.footer-nav__list a { font-size: var(--fs-small); text-decoration: none; color: var(--c-white-80); }
.footer-nav__list a:hover { color: var(--c-orange); }

.legal-block {
  margin-block-start: var(--s-10);
  padding-block-start: var(--s-4);
  border-block-start: var(--hairline) solid var(--c-white-12);
  display: grid;
  gap: var(--s-3);
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--c-white-60);
}
.legal-block dt {
  color: var(--c-white-60);
  text-transform: uppercase;
  letter-spacing: var(--ls-caption);
  font-family: var(--font-display);
}
.legal-block dd { margin: 0; margin-block-start: 2px; }
.legal-block a { color: var(--c-white-80); }

.site-footer__bottom {
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-3);
  border-block-start: var(--hairline) solid var(--c-white-12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  justify-content: space-between;
  font-size: var(--fs-caption);
  color: var(--c-white-60);
}

@media (min-width: 768px) {
  .legal-block { grid-template-columns: repeat(2, 1fr); gap: var(--s-3) var(--grid-gap); }
}
@media (min-width: 1024px) {
  .site-footer__top { grid-template-columns: 2fr 1fr 1fr; gap: var(--grid-gap); }
  .legal-block { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Cookie banner ------------------------------------------------- */
.cookie {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-cookie);
  /* Colours come from .is-dark on the element, not from here — the Decline
     button is a .btn--ghost and reads --ink / --field-edge off the surface. */
  border-block-start: var(--hairline) solid var(--rule);
  transform: translateY(101%);
  transition: transform var(--dur-slow) var(--ease);
}
.cookie.is-visible { transform: translateY(0); }
.cookie__inner {
  display: grid;
  gap: var(--s-3);
  padding-block: var(--s-3);
}
.cookie__text { font-size: var(--fs-small); color: var(--ink-muted); max-width: 74ch; }
.cookie__text a { color: var(--ink); }
.cookie__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cookie__actions .btn { min-height: 44px; }

@media (min-width: 900px) {
  .cookie__inner {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--s-6);
  }
}

/* ---------- Centred panels (thank-you, 404) ------------------------------- */
.centred-panel {
  min-height: 72vh;
  padding-block-start: calc(var(--section-y) + 96px);
  display: flex;
  align-items: center;
}
.centred-panel__inner { max-width: 640px; }
.centred-panel h1 { font-size: var(--fs-h2); }
.centred-panel__lead { margin-block-start: var(--s-4); }
.centred-panel__block { margin-block-start: var(--s-8); }
.centred-panel__actions {
  margin-block-start: var(--s-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.centred-panel__code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 2rem + 13vw, 12rem);
  line-height: var(--lh-display);
  color: var(--c-orange);
  display: block;
  margin-block-end: var(--s-4);
}

/* ---------- Data table (legal page) --------------------------------------- */
.data-table { border-block-start: var(--hairline) solid var(--rule); font-size: var(--fs-small); }
.data-table th,
.data-table td {
  text-align: start;
  vertical-align: top;
  padding-block: var(--s-2);
  border-block-end: var(--hairline) solid var(--rule);
}
.data-table th {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink-muted);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  width: 34%;
  padding-inline-end: var(--s-3);
}
.data-table td { color: var(--ink); }
.table-scroll { overflow-x: auto; }