/* CLARA MARITIME - component layer
   ---------------------------------------------------------------------------
   Tokens (colour, type scale, spacing, layout, motion) live in tokens.css and
   are loaded before this file. Nothing here may hard-code a hex, a font stack
   or a section rhythm -- consume the tokens instead. */

* {
  box-sizing: border-box;
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--offwhite);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Tabular figures are for data, not for prose. */
.matrix, .confirm .ref, .about-meta, .hero-data, .itinerary { font-variant-numeric: var(--tab); }

::selection { background: var(--navy); color: var(--blue-pale); }

/* ─── Type scale ──────────────────────────────────────────── */
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: var(--fw-medium); }

.t-display {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  text-transform: none;
}
.t-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1-page);
  font-weight: var(--fw-medium);
  line-height: var(--lh-h1-page);
  letter-spacing: var(--ls-h1);
  margin: 0;
  text-wrap: balance;
}
.t-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  margin: 0;
  text-wrap: balance;
}
.t-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-h3);
  letter-spacing: 0;
  margin: 0;
}
.t-body { font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); }
.t-small { font-size: var(--fs-small); font-weight: var(--fw-regular); line-height: var(--lh-small); }

/* Eyebrow / section label: the one place small caps tracking survives. */
.t-label {
  font-family: var(--font-text);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--blue);
}

/* ─── Layout shell ────────────────────────────────────────── */
.shell {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.band-light { background: var(--offwhite); color: var(--ink); }
.band-white { background: var(--white); color: var(--ink); }
.band-navy { background: var(--navy); color: var(--on-navy); }
.band-blue { background: var(--blue); color: #fff; }

.band-navy .t-label { color: var(--blue-pale); }
.band-light .t-label, .band-white .t-label { color: var(--blue); }
.band-blue .t-label { color: rgba(255,255,255,0.75); }

section.band {
  padding: var(--band-y) 0;
  border-top: 1px solid transparent;
}

/* ─── Header ──────────────────────────────────────────────── */
/* Sticky glass bar over the offwhite page -- it stays light at every scroll
   position (the old scroll-to-navy inversion is retired by the 2026 design). */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
/* padding-block, NOT `padding: 14px 0` -- the shorthand reset .shell's
   horizontal gutter to zero, which is why the lockup sat hard against the edge
   however wide --gutter got. */
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-8);
  min-height: 68px;
  padding-block: 14px;
}
/* The full "CLARA Maritime" lockup needs the room on a phone; 32px of enforced
   separation from the menu button is more than the layout requires there. */
@media (max-width: 600px) {
  .header-inner { gap: var(--sp-4); }
}

.logo {
  display: flex; align-items: center; gap: 14px;
  cursor: pointer;
  user-select: none;
}
.logo { gap: var(--sp-3); }
.logo .icon-wrap { width: 38px; height: 31px; display: flex; align-items: center; flex: none; }
.logo .icon-wrap svg { width: 100%; height: 100%; display: block; }
.logo .vrule {
  width: 1px; height: 20px;
  background: var(--rule-strong);
}
/* "CLARA Maritime" is one wordmark: same family, same size, same weight across
   both words. Only the tracking differs -- CLARA keeps the mark's 0.28em, the
   descriptor sits at normal spacing. Carrying 0.28em across "Maritime" too would
   widen the lockup enough to force the whole wordmark SMALLER on a phone than it
   was before, which would defeat the point of enlarging it. */
.logo .wordmark {
  font-family: var(--font-text);
  font-size: clamp(1.08rem, 2.4vw, 1.28rem);
  color: var(--ink);
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 0.42em;
}
.logo .wordmark .wm-name,
.mobile-menu .mm-word .wm-name {
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wordmark);
}
.logo .wordmark .wm-suffix,
.mobile-menu .mm-word .wm-suffix {
  font-weight: var(--fw-bold);
  font-size: 1em;
  letter-spacing: 0.01em;
}
/* Safety valve for very narrow phones: the descriptor goes before the lockup
   can collide with the menu button. */
@media (max-width: 359px) {
  .logo .wordmark .wm-suffix { display: none; }
}

.nav {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.nav a {
  font-size: var(--fs-nav);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  color: var(--ink-muted);
  position: relative;
  padding: 4px 0;
  transition: color var(--t-fast) var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a.active {
  color: var(--ink);
  border-bottom: 1px solid var(--blue);
  padding-bottom: 2px;
}

.nav-cta {
  background: var(--blue);
  color: var(--offwhite) !important;
  padding: var(--btn-pad-sm) !important;
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em !important;
  border: none;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.nav-cta:hover { background: var(--blue-hover); color: var(--offwhite) !important; }
.nav-cta.active { border-bottom: none; padding-bottom: 11px; }

.menu-btn {
  display: none;
  background: none; border: none; padding: 8px;
  cursor: pointer; color: inherit;
}
@media (max-width: 900px) {
  .nav { display: none; }
  .menu-btn { display: flex; }
}

/* mobile menu overlay */
.mobile-menu {
  position: fixed; inset: 0; z-index: 100;
  background: var(--navy); color: #fff;
  display: none;
  flex-direction: column;
  padding: 24px;
  transform: translateY(-100%);
  transition: transform 280ms ease;
}
@media (max-width: 900px) {
  .mobile-menu { display: flex; }
}
.mobile-menu.open { transform: translateY(0); }
.mobile-menu .top { display: flex; justify-content: space-between; align-items: center; height: 56px; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 0; margin-top: 32px; }
.mobile-menu nav a {
  padding: 18px 4px;
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: var(--fw-medium);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #fff;
}
.mobile-menu .footer-cta {
  margin-top: auto;
  padding: var(--sp-4);
  background: var(--blue);
  color: var(--offwhite);
  text-align: center;
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
}

/* ─── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: var(--btn-pad);
  font-family: var(--font-text);
  font-size: var(--fs-ui);
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  border: none;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  text-decoration: none;
  line-height: 1.2;
}
.btn-primary { background: var(--blue); color: var(--offwhite); }
.btn-primary:hover { background: var(--blue-hover); color: var(--offwhite); }
.btn-on-blue { background: var(--white); color: var(--navy); }
.btn-on-blue:hover { background: var(--blue-pale); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  padding: var(--btn-pad);
  border: 1px solid var(--rule);
}
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover { color: var(--accent); border-color: var(--accent); }
.band-navy .btn-ghost { color: var(--blue-pale); border-color: rgba(221,230,240,0.4); }
.band-navy .btn-ghost:hover { color: var(--accent); border-color: var(--accent); }

.btn .arrow {
  width: 14px; height: 10px;
  position: relative;
  transition: transform 180ms ease;
}
.btn:hover .arrow { transform: translateX(4px); }

/* ─── Hero ────────────────────────────────────────────────── */
.hero {
  background: var(--navy);
  color: #fff;
  position: relative;
  overflow: hidden;
  padding: 120px 0 0;
  min-height: 80vh;
  display: flex; flex-direction: column;
}
.hero-spectrum {
  position: absolute;
  top: 60px; left: -20px;
  width: 540px; height: 460px;
  opacity: 0.18;
  pointer-events: none;
}
.hero-spectrum svg { width: 100%; height: 100%; display: block; }

.hero-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  flex: 1;
  padding-bottom: 80px;
}
.hero-eyebrow {
  color: var(--blue-pale);
  display: flex; align-items: center; gap: 16px;
}
.hero-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
.hero-headline {
  max-width: 1080px;
  color: #fff;
  margin-top: 24px;
}
.hero-sub {
  max-width: 720px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--blue-pale);
  margin-top: 28px;
  font-weight: 400;
}
.hero-actions {
  margin-top: 48px;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}

.hero-data {
  border-top: 1px solid rgba(221,230,240,0.18);
  background: rgba(221,230,240,0.04);
  padding: 28px 0;
}
.hero-data-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.hero-data-cell {
  display: flex; flex-direction: column; gap: 6px;
  border-left: 1px solid rgba(221,230,240,0.18);
  padding-left: 20px;
}
.hero-data-cell:first-child { border-left: none; padding-left: 0; }
.hero-data-cell .num {
  font-size: 22px; font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}
.hero-data-cell .lab {
  font-size: 11px; font-weight: 500;
  color: var(--blue-pale);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
@media (max-width: 768px) {
  .hero { padding-top: 80px; }
  .hero-spectrum { width: 320px; height: 260px; opacity: 0.12; }
  .hero-data-row { grid-template-columns: 1fr; gap: 16px; }
  .hero-data-cell { border-left: none; padding-left: 0; border-top: 1px solid rgba(221,230,240,0.12); padding-top: 16px; }
  .hero-data-cell:first-child { border-top: none; padding-top: 0; }
}

/* ─── Section header pattern ──────────────────────────────── */
.sec-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 56px;
}
.sec-head .label-line {
  display: flex; align-items: center; gap: 12px;
}
.sec-head .label-line .ix {
  font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold);
  font-variant-numeric: var(--tab);
  color: var(--blue);
  letter-spacing: var(--ls-eyebrow);
}
.band-navy .sec-head .label-line .ix { color: var(--accent); }
.sec-head .rule {
  height: 1px; background: var(--rule); flex: 1;
}
.band-navy .sec-head .rule { background: var(--rule-light); }
.sec-head h2 { max-width: 720px; }
@media (max-width: 768px) {
  .sec-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
}

/* ─── Three-column gap section ────────────────────────────── */
.cols-3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px;
}
.col-fact {
  display: flex; flex-direction: column; gap: 16px;
  padding-top: 28px;
  border-top: 2px solid var(--navy);
  position: relative;
}
.col-fact .col-num {
  position: absolute; top: -16px; left: 0;
  font-size: 11px; font-weight: 700;
  background: var(--offwhite);
  color: var(--blue);
  padding-right: 12px;
  letter-spacing: 0.18em;
}
.col-fact h3 { font-size: 18px; line-height: 1.35; font-weight: 700; }
.col-fact p { color: var(--ink-muted); font-size: 15px; line-height: 1.6; margin: 0; }
@media (max-width: 768px) {
  .cols-3 { grid-template-columns: 1fr; gap: 32px; }
}

/* ─── Five-stage process ──────────────────────────────────── */
.process {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  position: relative;
}
.process::before {
  content: '';
  position: absolute;
  top: 22px; left: 22px; right: 22px;
  height: 1px;
  background: var(--rule-strong);
}
.stage {
  position: relative;
  padding-top: 60px;
}
.stage .stage-dot {
  position: absolute; top: 16px; left: 0;
  width: 14px; height: 14px;
  background: var(--blue);
  border: 3px solid var(--offwhite);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--blue);
}
.band-white .stage .stage-dot { border-color: var(--white); }
.stage .stage-num {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  color: var(--blue);
}
.stage h3 { margin-top: 8px; font-size: 18px; font-weight: 700; }
.stage p { font-size: 14px; color: var(--ink-muted); margin-top: 8px; line-height: 1.55; }

/* The Service band runs dark; give the process/stage component the same
   navy-safe treatment as .cite (accent labels, blue-pale body text, light
   rules) instead of its light-band defaults, which would be near-invisible. */
.band-navy .process::before { background: var(--rule-light); }
.band-navy .stage .stage-dot { border-color: var(--navy); }
.band-navy .stage .stage-num { color: var(--accent); }
.band-navy .stage p { color: var(--blue-pale); }

@media (max-width: 768px) {
  .process { grid-template-columns: 1fr; gap: 32px; padding-left: 24px; }
  .process::before { left: 7px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .stage { padding-top: 0; padding-left: 16px; }
  .stage .stage-dot { top: 4px; left: -23px; }
}

/* ─── Rights Matrix ───────────────────────────────────────── */
.matrix-wrap {
  background: var(--navy-soft);
  border: 1px solid rgba(255,255,255,0.06);
}
.matrix {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.matrix th, .matrix td {
  text-align: left;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
  vertical-align: middle;
}
.matrix thead th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-pale);
  background: rgba(0,0,0,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.matrix thead th.col-source { width: 26%; }
.matrix tbody tr:hover { background: rgba(90, 170, 224, 0.05); cursor: pointer; }
.matrix tbody tr.selected { background: rgba(90,170,224,0.1); }
.matrix .src-name { font-weight: 700; color: #fff; font-size: 14px; }
.matrix .src-desc { color: rgba(221,230,240,0.55); font-size: 12px; margin-top: 2px; }

.cell-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 500;
  color: rgba(221,230,240,0.85);
}
.cell-status .marker {
  width: 10px; height: 10px;
  display: inline-block;
}
.marker-yes { background: var(--blue); }
.marker-partial { background: transparent; border: 2px solid var(--blue-mid); }
.marker-no { background: transparent; border: 1px dashed rgba(221,230,240,0.3); }
.cell-yes { color: #fff; }
.cell-partial { color: var(--blue-mid); }
.cell-no { color: rgba(221,230,240,0.4); }

.matrix-legend {
  display: flex; gap: 28px; flex-wrap: wrap;
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 11px;
  color: rgba(221,230,240,0.7);
  letter-spacing: 0.04em;
}
.matrix-detail {
  margin-top: 24px;
  padding: 24px;
  background: rgba(255,255,255,0.03);
  border-left: 2px solid var(--accent);
  font-size: 14px;
  color: var(--blue-pale);
  line-height: 1.6;
}
.matrix-note {
  margin-top: 28px;
  font-size: 13px;
  color: rgba(221,230,240,0.55);
  max-width: 720px;
  line-height: 1.55;
}

/* mobile rights matrix → cards */
.matrix-cards { display: none; }
@media (max-width: 768px) {
  .matrix-wrap { display: none; }
  .matrix-cards { display: grid; gap: 12px; }
  .matrix-card {
    background: var(--navy-soft);
    padding: 20px;
    border: 1px solid rgba(255,255,255,0.06);
  }
  .matrix-card .src-name { font-size: 14px; font-weight: 700; color: #fff; }
  .matrix-card .src-desc { font-size: 12px; color: rgba(221,230,240,0.55); margin-top: 4px; }
  .matrix-card .grid-2 {
    margin-top: 14px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  }
  .matrix-card .grid-2 > div {
    padding: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.04);
    font-size: 11px;
  }
  .matrix-card .grid-2 .lab { color: rgba(221,230,240,0.55); letter-spacing: 0.12em; text-transform: uppercase; font-size: 9px; font-weight: 700; }
  .matrix-card .grid-2 .val { display: flex; gap: 6px; align-items: center; margin-top: 4px; color: #fff; }
}

/* ─── Sectors ─────────────────────────────────────────────── */
.sectors {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.sector-tile {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 36px 32px;
  background: var(--white);
  cursor: pointer;
  transition: background 200ms ease;
  display: flex; flex-direction: column; gap: 20px;
  min-height: 280px;
  position: relative;
}
.sector-tile:hover { background: var(--blue-pale); }
/* The tile's whole area signals clickability (cursor + hover) - the anchor
   stretches to fill it rather than being a small in-text link, so the
   affordance and the actual click target match. */
.sector-tile .tile-link { position: absolute; inset: 0; z-index: 1; }
.sector-tile .tile-num {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--blue);
}
.sector-tile h3 { font-size: 22px; font-weight: 700; }
.sector-tile .figure {
  font-size: 28px; font-weight: 700;
  letter-spacing: 0.01em;
  margin-top: auto;
}
.sector-tile .figure-label {
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 4px;
}
.sector-tile .frame {
  font-size: 14px; color: var(--ink-muted); line-height: 1.55;
}
@media (max-width: 768px) {
  .sectors { grid-template-columns: 1fr; }
}

/* ─── Legal basis citations ───────────────────────────────── */
.citations {
  display: flex; flex-direction: column;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.cite {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  align-items: start;
}
.cite .ref {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-transform: uppercase;
}
.cite .body {
  font-size: 15px; color: var(--blue-pale); line-height: 1.55;
}
.cite .body strong { color: #fff; font-weight: 600; }
.cite-close {
  margin-top: 32px;
  font-size: 16px;
  color: #fff;
  font-style: normal;
  max-width: 640px;
  line-height: 1.5;
  border-left: 2px solid var(--accent);
  padding-left: 20px;
}
@media (max-width: 768px) {
  .cite { grid-template-columns: 1fr; gap: 8px; }
}

/* ─── Closing CTA ─────────────────────────────────────────── */
/* The 2026 closing CTA is navy, matching .cm-cta on the designed pages, so the
   carry-over pages end on the same note rather than a Brand Blue slab. */
.closing-cta {
  background: var(--navy);
  color: var(--on-navy);
  padding: var(--cta-y) 0;
  text-align: left;
}
.closing-cta h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2-cta); font-weight: var(--fw-medium);
  line-height: var(--lh-h2-cta); letter-spacing: 0;
  max-width: 20ch; color: var(--offwhite); text-wrap: balance;
}
.closing-cta p {
  font-size: var(--fs-body); line-height: var(--lh-body-lg);
  color: var(--on-navy); margin-top: var(--sp-4); max-width: 52ch; text-wrap: pretty;
}
.closing-cta .actions { margin-top: var(--sp-8); display: flex; gap: var(--sp-4); flex-wrap: wrap; }
/* No mobile override needed: --fs-h2-cta and --cta-y are both fluid clamps. */

/* ─── Footer ──────────────────────────────────────────────── */
/* 2026 design: the footer sits on the page ground, hairline-separated, in the
   same restrained light register as the prototypes' footer. */
footer.site {
  background: var(--offwhite);
  color: var(--ink-muted);
  border-top: 1px solid var(--rule);
  padding: var(--sp-16) 0 var(--sp-7);
}
footer.site .top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--sp-12);
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid var(--rule);
}
footer.site h4 {
  font-family: var(--font-text);
  font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 var(--sp-4);
}
/* The footer runs a deliberate two-tier scale: --fs-small for content, 0.8rem
   for fine print (.ident .fine, .addr, .bottom). Size the LIST rather than only
   the anchors -- when only anchors were sized, any plain text in a footer list
   (the opening hours) fell back to the body size and rendered LARGER than the
   link it sits beside, mid-sentence. */
footer.site ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
  font-size: var(--fs-small);
  line-height: 1.7;
}
footer.site a { font-size: inherit; color: var(--ink-muted); cursor: pointer; }
footer.site a:hover { color: var(--ink); }
footer.site .ident { font-size: var(--fs-small); color: var(--ink-muted); line-height: 1.7; max-width: 34ch; }
footer.site .ident .name { font-weight: var(--fw-semibold); margin-bottom: var(--sp-2); }
/* ONE resting ink for every piece of text in the footer: --ink-muted. Tiers are
   now distinguished by size alone (--fs-small for content, 0.8rem for fine
   print), never by contrast -- differing ink at the same weight is what made
   parts of the footer read as bolder than the rest. */
footer.site .ident .fine,
footer.site .contact-list .addr { font-size: 0.8rem; }
footer.site .ident .fine { margin-top: var(--sp-4); }
footer.site .lockup { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
footer.site .lockup .icon-wrap { width: 25px; height: 21px; display: block; flex: none; }
footer.site .lockup .icon-wrap svg { width: 100%; height: 100%; display: block; }
footer.site .lockup .vrule { width: 1px; height: 18px; background: var(--rule-strong); }
footer.site .lockup .wordmark {
  font-family: var(--font-text);
  font-size: 0.92rem; font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wordmark); color: var(--ink);
}
footer.site .bottom {
  margin-top: var(--sp-7);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-6);
  font-size: 0.8rem;
}
@media (max-width: 900px) {
  footer.site .top { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
}
@media (max-width: 640px) {
  footer.site .top { grid-template-columns: 1fr; gap: var(--sp-8); }
  footer.site .bottom { flex-direction: column; gap: var(--sp-3); align-items: flex-start; }
}

/* ─── Article (long-form pages) ───────────────────────────── */
.article {
  max-width: 720px;
  margin: 0 auto;
}
.article > h2 { font-size: var(--fs-h2-scene); }
.article > h3 { font-size: var(--fs-h3-card); }
.article .lede {
  font-size: var(--fs-body-lg);
  color: var(--ink-muted);
  line-height: var(--lh-body-lg);
  margin: var(--sp-8) 0 var(--sp-12);
  font-weight: var(--fw-regular);
  text-wrap: pretty;
}
.article h2 { margin-top: var(--sp-16); margin-bottom: var(--sp-6); }
.article h3 { margin-top: var(--sp-10); margin-bottom: var(--sp-3); }
.article p {
  color: var(--ink-muted);
  margin: var(--sp-4) 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
}
/* Underline styling for in-article links lives in theme-extras.css, which loads
   later; setting a border here as well would double-rule every link. */
.article a:hover { color: var(--accent); }
.article p strong { color: var(--ink); font-weight: 600; }
/* .article's body colours assume a light band. On a navy band the measure is
   wanted but not the dark text, so keep the band's own inherited colour. */
.band-navy .article p { color: inherit; }
.band-navy .article p strong { color: #fff; }
.article .pullquote {
  margin: var(--sp-10) 0;
  padding: var(--sp-6) var(--sp-8);
  background: var(--white);
  border-left: 2px solid var(--blue);
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink);
  line-height: 1.5;
  text-wrap: pretty;
}
.article ul.deliverables {
  list-style: none;
  padding: 0;
  margin: 16px 0;
  border-top: 1px solid var(--rule);
}
.article ul.deliverables li {
  /* No marker: the hairline rules already separate the rows, so the left
     padding that reserved space for one is dropped too and the text aligns
     with the surrounding paragraphs. */
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-body);
  line-height: var(--lh-small);
  color: var(--ink-muted);
  position: relative;
}

/* ─── Page header (non-home pages) ────────────────────────── */
.page-head {
  /* 2026 design: interior pages open on the offwhite page ground with a dark
     Lora title, not the old navy slab. */
  background: var(--offwhite);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: var(--hero-y-top) 0 var(--hero-y-bottom);
}
.page-head + section.band { padding-top: var(--scene-y); }
/* ...and stop the first element in that section adding its own margin on top
   of the 56px, which is what made the third gap the largest of the three. */
.page-head + section.band .article > *:first-child { margin-top: 0; }
.page-head .label-line {
  display: flex; align-items: center; gap: 14px;
  color: var(--blue);
  margin-bottom: var(--sp-6);
}
.page-head .label-line .rule { width: 48px; height: 1px; background: var(--blue); }
.page-head h1 { color: var(--ink); max-width: 26ch; }
.page-head p {
  margin-top: var(--sp-7);
  max-width: var(--measure);
  font-size: var(--fs-body-lg);
  color: var(--ink-muted);
  line-height: var(--lh-body-lg);
  text-wrap: pretty;
}

/* ─── Service stages (long view) ──────────────────────────── */
.stages-long { display: flex; flex-direction: column; gap: 0; }
.stage-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  padding: 56px 0;
  border-top: 1px solid var(--rule);
}
.stage-row:last-child { border-bottom: 1px solid var(--rule); }
.stage-row .meta { }
.stage-row .meta .num {
  font-family: var(--font-display);
  font-size: 3rem; font-weight: var(--fw-regular);
  letter-spacing: 0;
  color: var(--blue);
  line-height: 1;
}
.stage-row .meta .title {
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-h3-card); font-weight: var(--fw-medium);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.stage-row .body p {
  font-size: var(--fs-body); color: var(--ink-muted);
  line-height: var(--lh-body); margin: 0 0 var(--sp-5); text-wrap: pretty;
}
.stage-row .body p:first-child { color: var(--ink); font-weight: var(--fw-regular); }
@media (max-width: 768px) {
  .stage-row { grid-template-columns: 1fr; gap: 16px; padding: 40px 0; }
  .stage-row .meta .num { font-size: 36px; }
}

/* ─── Sectors page ────────────────────────────────────────── */
.sector-section {
  border-top: 1px solid var(--rule);
  padding: var(--scene-y) 0;
}
.sector-section:first-child { border-top: none; }
.sector-section .head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  align-items: end;
  margin-bottom: 48px;
}
.sector-section .head h2 { font-size: var(--fs-h2); }
.sector-section .head .stat-block {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px;
  border-top: 1px solid var(--rule);
  padding-top: 24px;
}
.sector-section .head .stat-block .num {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: var(--fw-medium);
  font-variant-numeric: var(--tab);
}
.sector-section .head .stat-block .lab {
  font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: var(--sp-1);
}
.sector-section .body { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; }
/* Part labels are h3 (they sit under the sector's h2); they keep the eyebrow
   look the design calls for, so the level changed and the styling did not. */
.sector-section .body .block h3 {
  font-family: var(--font-text);
  font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 var(--sp-3);
}
.sector-section .body .block p {
  font-size: var(--fs-card); color: var(--ink-muted);
  line-height: 1.66; margin: 0; text-wrap: pretty;
}
@media (max-width: 768px) {
  .sector-section .head { grid-template-columns: 1fr; gap: 24px; }
  .sector-section .body { grid-template-columns: 1fr; gap: 32px; }
}

/* ─── Contact page ────────────────────────────────────────── */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px;
}
/* Column headings are h2 (the only heading level under the page h1).
   Styling unchanged -- they still read as eyebrows, not as section titles. */
.contact-direct h2 {
  font-family: var(--font-text);
  font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--blue);
  margin: var(--sp-8) 0 var(--sp-3);
}
.contact-direct h2:first-child { margin-top: 0; }
.contact-direct .val {
  font-size: var(--fs-body);
  color: var(--ink);
  font-weight: var(--fw-medium);
}
.contact-direct .val.mono { font-variant-numeric: var(--tab); letter-spacing: 0.01em; }
.contact-direct .meta {
  font-size: var(--fs-small); color: var(--ink-soft);
  margin-top: var(--sp-1);
}

/* /assessment/ stacks the intake form directly under the preceding section.
   Two bands of the same tone would leave 96px + 96px of empty offwhite between
   them, which reads as the end of the page rather than as the next section.
   Collapse that to the article's own 64px h2 rhythm. Scoped through .band-form
   so the homepage's six adjacent band pairs are untouched. */
section.band:has(+ section.band.band-form) { padding-bottom: 64px; }
section.band.band-form { padding-top: 0; }
/* Match the reading measure of the .article above it: .shell adds 40px of side
   padding, so 800px here yields exactly the article's 720px content width. The
   cap stops binding at <=768px, where .shell drops to 20px padding and the
   article is viewport-width too, so mobile is unchanged. */
section.band.band-form .shell { max-width: 768px; }

.intake-form {
  background: var(--white);
  padding: var(--panel-pad);
  border: 1px solid var(--rule);
}
.intake-form h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3-form); font-weight: var(--fw-medium);
  line-height: 1.2; margin: 0 0 var(--sp-3);
}
.intake-form .help {
  font-size: var(--fs-ui); line-height: 1.65;
  color: var(--ink-muted); margin-bottom: var(--sp-8); max-width: 48ch;
}
.field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.field label {
  font-family: var(--font-text);
  font-size: 0.8rem; font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink);
}
.field label .req { color: var(--blue); font-weight: var(--fw-medium); }
.field label .opt { color: var(--ink-soft); font-weight: var(--fw-regular); }
.field input, .field select {
  font-family: inherit;
  font-size: var(--fs-ui);
  height: var(--field-h);
  padding: 0 14px;
  border: 1px solid var(--rule-strong);
  background: var(--offwhite);
  color: var(--ink);
  outline: none;
  transition: border-color var(--t-fast) var(--ease);
}
.field textarea {
  font-family: inherit;
  font-size: var(--fs-ui);
  padding: 12px 14px;
  border: 1px solid var(--rule-strong);
  background: var(--offwhite);
  color: var(--ink);
  outline: none;
  line-height: 1.6;
  transition: border-color var(--t-fast) var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--blue);
}
.field textarea { resize: vertical; min-height: 110px; }
.radio-group { display: flex; gap: 8px; flex-wrap: wrap; }
.radio-pill {
  padding: 11px 16px;
  border: 1px solid var(--rule-strong);
  background: var(--white);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: var(--ink-muted);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  user-select: none;
}
.radio-pill.active {
  background: var(--blue); color: var(--offwhite); border-color: var(--blue);
}
.radio-pill:hover:not(.active) { border-color: var(--blue); color: var(--blue); }

.consent {
  display: flex; gap: 11px; margin: var(--sp-7) 0;
  font-size: 0.9rem; color: var(--ink-muted); line-height: 1.6;
  max-width: 56ch;
}
.consent input { margin-top: 4px; }
.consent a { color: var(--blue); text-decoration: underline; }

.submit-row { margin-top: 8px; }

.confirm {
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--blue);
  padding: var(--panel-pad);
}
.confirm h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3-form); font-weight: var(--fw-medium);
  margin: 0 0 var(--sp-3); letter-spacing: 0;
}
.confirm p { color: var(--ink-muted); font-size: var(--fs-body); line-height: var(--lh-body); margin: 0; text-wrap: pretty; }
.confirm .ref {
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-small); color: var(--ink-soft);
  font-variant-numeric: var(--tab);
  display: flex; gap: var(--sp-7); flex-wrap: wrap;
}
.confirm .ref strong { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .intake-form { padding: 28px 20px; }
}

/* ─── About page extras ───────────────────────────────────── */
.about-meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  border-top: 1px solid var(--rule);
  padding-top: 32px;
  margin-top: 64px;
}
/* Entity/governance cells are h3 under the section h2. Styling unchanged;
   the margin reset also outranks the generic .article h3 rhythm. */
.about-meta .cell h3 {
  font-family: var(--font-text);
  font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 var(--sp-2);
}
.about-meta .cell .v { font-size: var(--fs-small); color: var(--ink); line-height: 1.6; }
@media (max-width: 768px) { .about-meta { grid-template-columns: 1fr 1fr; } }

/* ─── Misc ────────────────────────────────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(12px);
  animation: fadeIn 400ms ease forwards;
}
@keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* small icon arrow inline */
.iarr { display: inline-block; width: 18px; height: 1px; background: currentColor; vertical-align: middle; position: relative; margin: 0 4px; }
.iarr::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }

/* skip link */
.skip-link {
  position: absolute; left: -9999px; top: 8px;
  background: var(--navy); color: #fff;
  padding: 8px 16px;
  z-index: 200;
  font-size: 13px;
}
.skip-link:focus { left: 8px; }

/* sticky bottom bar (mobile) */
.sticky-cta {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--blue);
  color: #fff;
  padding: 14px 20px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  z-index: 40;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
}
@media (max-width: 768px) {
  .sticky-cta { display: block; }
  body { padding-bottom: 60px; }
}

/* Itinerary timeline graphic on Obligation page */
.itinerary {
  background: var(--white);
  border: 1px solid var(--rule);
  padding: 28px;
  margin: 32px 0;
}
.itinerary h4 {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 20px;
}
.timeline {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-left: 1px solid var(--rule);
}
.timeline .day {
  border-right: 1px solid var(--rule);
  padding: 12px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.terr-rows {
  margin-top: 0;
  display: grid; grid-template-columns: repeat(7, 1fr);
}
.terr-rows .seg {
  height: 24px;
  border-right: 1px solid var(--rule);
  display: flex; align-items: center;
  padding-left: 8px;
  font-size: 11px;
  font-weight: 600;
}
.terr-fr { background: rgba(27,90,150,0.85); color: #fff; }
.terr-de { background: rgba(138,174,200,0.7); color: var(--navy); }
.terr-nl { background: rgba(221,230,240,0.9); color: var(--navy); }
.terr-empty { background: transparent; }
.itinerary .legend {
  display: flex; gap: 24px; flex-wrap: wrap;
  margin-top: 16px;
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.itinerary .legend .swatch { width: 12px; height: 12px; display: inline-block; margin-right: 6px; vertical-align: middle; }