/* Hallmark · genre: modern-minimal · macrostructure: Split Studio · H2 hero knobs: ratio=6/6, right=proof column (route plot), divider=negative space
 * nav: N1b (centre links=4, dropdowns=1, scroll=frost-on-scroll) · footer: Ft1 (wordmark=xl, tagline=roman body, links=inline)
 * blocks: F3 spec sheet (columns=2, rules=every row, numbers=tabular) · T4 stat strip (4-up, display, qualifier under)
 * theme: custom · vibe: "deep navy, stark white, grain-and-sea earth" · paper: oklch(99% 0.004 250) · accent: oklch(74.5% 0.134 64) (logo orange)
 * display: Geist 300/650 · body: Geist 400 · outlier: Geist Mono (wordmark + figures) · axes: light / geometric-sans / warm-orange ~64°
 * enrichment: Tier-B hand-built SVG (country-level network plot) · tone: premium corporate · audience: feed buyers & procurement (inferred)
 * studied: no · context: inferred · Hallmark v1.1.0
 * Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4 · slop test: 58/58
 */

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

/* `hidden` must beat component display rules (.field { display: grid } etc.) */
[hidden] { display: none !important; }

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + var(--space-md));
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-body);
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-style: normal; overflow-wrap: anywhere; min-width: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

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

.skip-link {
  position: fixed;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: var(--z-modal);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: var(--color-paper);
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: max(var(--page-gutter), env(safe-area-inset-left));
}

/* ── Type roles ───────────────────────────────────────── */
.h2 {
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-weight: var(--weight-light);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-strong);
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.lead {
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  max-width: 34ch;
  text-wrap: pretty;
}
.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
p { max-width: 65ch; text-wrap: pretty; }

/* ── Buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: var(--control-h);
  padding: 0 var(--space-lg);
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.005em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}
.btn--ghost {
  border-color: var(--color-navy-rule);
  color: var(--color-on-navy);
}
.btn--outline {
  border-color: var(--color-ink);
  color: var(--color-ink);
}

@media (hover: hover) {
  .btn--primary:hover { background: var(--color-accent-hover); transform: translateY(-1.5px); }
  .btn--ghost:hover   { background: var(--color-navy-2); border-color: var(--color-on-navy-2); }
  .btn--outline:hover { background: var(--color-ink); color: var(--color-paper); }
  .btn:disabled:hover { transform: none; }
}

.btn__spinner {
  display: none;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
}
.btn[data-state="loading"] { cursor: progress; }
.btn[data-state="loading"] .btn__spinner {
  display: inline-block;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Brand ────────────────────────────────────────────── */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  text-decoration: none;
  white-space: nowrap;
}
/* Logo · vector redraw of the IGC mark; strokes draw in once on load */
.logo {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  overflow: visible;
}
.logo path {
  fill: none;
  stroke-width: 36;
  stroke-linejoin: round;
}
.logo__ring,
.logo__arch  { stroke: var(--color-logo-blue); }
.logo__outer,
.logo__inner { stroke: var(--color-logo-orange); }

@media (prefers-reduced-motion: no-preference) {
  .logo--draw path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 1100ms var(--ease-in-out) forwards;
  }
  .logo--draw .logo__outer { animation-delay: 180ms; }
  .logo--draw .logo__inner { animation-delay: 360ms; animation-duration: 900ms; }
  .logo--draw .logo__arch  { animation-delay: 560ms; animation-duration: 700ms; }
}
.brand__igc {
  font-family: var(--font-outlier);
  font-weight: var(--weight-medium);
  font-size: 1.125rem;
  letter-spacing: 0.04em;
}
.brand__name {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}

/* ── Nav · N1b ────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-sticky);
  color: var(--color-on-navy);
  background: transparent;
  border-bottom: var(--rule-hair) solid transparent;
  transition:
    background-color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out);
}
.nav :focus-visible { outline-color: var(--color-focus-on-navy); }

.nav.is-scrolled,
.nav.is-open {
  color: var(--color-ink);
  background: var(--color-paper-glass);
  border-bottom-color: var(--color-rule);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}
.nav.is-open { background: var(--color-paper); }
.nav.is-scrolled :focus-visible,
.nav.is-open :focus-visible { outline-color: var(--color-focus); }

.nav-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 24px;
  pointer-events: none;
}

.nav__inner {
  max-width: var(--page-max);
  height: var(--nav-h);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-md);
}
.nav__center { display: none; }
.nav__right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.nav__cta { display: none; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;
  padding: 0 var(--space-sm);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0.86;
  transition: opacity var(--dur-short) var(--ease-out);
}
@media (hover: hover) {
  .nav__link:hover { opacity: 1; }
}
.nav__caret {
  width: 0.75rem;
  height: 0.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: transform var(--dur-short) var(--ease-out);
}

.nav__item { position: relative; }
.nav__dropdown {
  position: absolute;
  top: calc(100% + var(--space-xs));
  left: 50%;
  z-index: var(--z-dropdown);
  width: 20rem;
  padding: var(--space-xs);
  display: grid;
  background: var(--color-paper);
  color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 40px -20px var(--color-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition:
    opacity 140ms var(--ease-in),
    transform 140ms var(--ease-in),
    visibility 0s linear 140ms;
}
/* hover bridge so the pointer can travel into the panel */
.nav__dropdown::before {
  content: "";
  position: absolute;
  inset: calc(var(--space-xs) * -1 - 2px) 0 auto;
  height: calc(var(--space-xs) + 2px);
}
.nav__item[data-open="true"] .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition:
    opacity 180ms var(--ease-out),
    transform 180ms var(--ease-out),
    visibility 0s;
}
@media (hover: hover) and (pointer: fine) {
  .nav__item:hover .nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition:
      opacity 180ms var(--ease-out),
      transform 180ms var(--ease-out),
      visibility 0s;
  }
  .nav__item:hover .nav__caret { transform: rotate(180deg); }
}
.nav__item[data-open="true"] .nav__caret { transform: rotate(180deg); }

.nav__dropitem {
  display: grid;
  gap: var(--space-3xs);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color var(--dur-short) var(--ease-out);
}
.nav__dropitem b { font-weight: var(--weight-medium); font-size: var(--text-sm); }
.nav__dropitem span {
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.nav__dropitem:focus-visible { outline-offset: -2px; }
@media (hover: hover) {
  .nav__dropitem:hover { background: var(--color-paper-2); }
}

/* hamburger */
.nav__toggle {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
}
.nav__bars,
.nav__bars::before {
  display: block;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-short) var(--ease-out);
}
.nav__bars { transform: translateY(-3.5px); }
.nav__bars::before { content: ""; transform: translateY(7px); }
.nav__toggle[aria-expanded="true"] .nav__bars { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bars::before { transform: rotate(-90deg); }

/* mobile sheet */
.nav__sheet {
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper);
  color: var(--color-ink);
}
.sheet {
  display: grid;
  padding: var(--space-md) var(--page-gutter) var(--space-xl);
}
.sheet__link {
  display: flex;
  align-items: center;
  min-height: 52px;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.sheet__sub {
  display: grid;
  padding: var(--space-xs) 0 var(--space-sm) var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.sheet__sub a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.sheet__cta { margin-top: var(--space-lg); width: 100%; }

@media (min-width: 40rem) {
  .nav__cta { display: inline-flex; }
}
@media (min-width: 60rem) {
  .nav__inner { grid-template-columns: 1fr auto 1fr; }
  .brand { justify-self: start; }
  .nav__center {
    display: flex;
    justify-self: center;
    align-items: center;
    gap: var(--space-2xs);
  }
  .nav__toggle,
  .nav__sheet { display: none !important; }
}

/* ── Hero · navy · H2 split ───────────────────────────── */
.hero {
  position: relative;
  background: var(--color-navy);
  color: var(--color-on-navy);
  padding-top: calc(var(--nav-h) + var(--space-xl));
  padding-bottom: var(--space-2xl);
}
.hero :focus-visible { outline-color: var(--color-focus-on-navy); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
}
.hero__copy {
  display: grid;
  gap: var(--space-lg);
  min-width: 0;
}
.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: var(--color-on-navy);
}
.hero__title span { display: block; }
.w-light  { font-weight: var(--weight-light); }
.w-strong { font-weight: var(--weight-strong); }
.hero__title .w-strong::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  margin-top: var(--space-md);
  background: var(--color-accent);
}
.hero__lede {
  max-width: 44ch;
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  line-height: 1.5;
  color: var(--color-on-navy-2);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-top: var(--space-xs);
}

.hero__map { min-width: 0; }
.map { width: 100%; height: auto; overflow: visible; }
.map__grid path {
  fill: none;
  stroke: var(--color-navy-rule);
  stroke-width: 1;
  stroke-dasharray: 2 6;
}
.map__equator {
  fill: none;
  stroke: var(--color-navy-rule);
  stroke-width: 1;
}
.map__ticks text {
  font-family: var(--font-outlier);
  font-size: 14px;
  fill: var(--color-on-navy-2);
  opacity: 0.7;
}
.map__regions text {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.16em;
  fill: var(--color-on-navy-2);
  opacity: 0.55;
}
.map__arc {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-linecap: round;
}
.map__plants circle {
  fill: var(--color-navy);
  stroke: var(--color-on-navy);
  stroke-width: 1.5;
}
.map__offices rect { fill: var(--color-accent); }
.map__labels text {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--weight-medium);
  fill: var(--color-on-navy);
}
@media (max-width: 40rem) {
  /* the plot renders at ~45% scale on phones — keep place names legible */
  .map__labels text  { font-size: 28px; }
  .map__regions text { font-size: 18px; }
  .map__ticks text   { font-size: 20px; }
}
.map__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  margin-top: var(--space-md);
  font-size: var(--text-xs);
  color: var(--color-on-navy-2);
}
.legend { display: inline-flex; align-items: center; gap: var(--space-xs); }
.legend::before { content: ""; width: 10px; height: 10px; }
.legend--office::before { background: var(--color-accent); }
.legend--plant::before { border: 1.5px solid var(--color-on-navy); border-radius: 50%; }
.map__note { opacity: 0.8; }

/* T4 stat strip */
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--space-2xl);
  border-top: var(--rule-hair) solid var(--color-navy-rule);
}
.stat {
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
  padding: var(--space-lg) var(--space-md) var(--space-sm) 0;
}
.stat__num {
  font-family: var(--font-outlier);
  font-size: var(--text-display-s);
  font-weight: var(--weight-body);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-navy);
}
.stat__label {
  max-width: 22ch;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-on-navy-2);
}

@media (min-width: 60rem) {
  .hero {
    padding-top: calc(var(--nav-h) + var(--space-2xl));
    padding-bottom: var(--space-3xl);
  }
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2xl);
  }
  .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: var(--space-3xl);
  }
  .stat + .stat {
    padding-left: var(--space-lg);
    border-left: var(--rule-hair) solid var(--color-navy-rule);
  }
}

/* one orchestrated entrance: hero halves + route draw */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(10px);
    animation: reveal var(--dur-long) var(--ease-out) forwards;
  }
  .hero__lede.reveal    { animation-delay: 80ms; }
  .hero__actions.reveal { animation-delay: 160ms; }
  .hero__map.reveal     { animation-delay: 220ms; }

  .map__arc {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw var(--dur-draw) var(--ease-in-out) 500ms forwards;
  }
  .map__arc--late { animation-delay: 800ms; }
}
@keyframes reveal { to { opacity: 1; transform: none; } }
@keyframes draw   { to { stroke-dashoffset: 0; } }

/* ── Sections ─────────────────────────────────────────── */
.section { padding-block: var(--space-3xl); }
@media (min-width: 60rem) {
  .section { padding-block: var(--space-4xl) var(--space-3xl); }
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
}
@media (min-width: 60rem) {
  .split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-3xl);
  }
}

/* About */
.about__text {
  display: grid;
  align-content: start;
  gap: var(--space-lg);
}
.about__text > p:not(.lead) { color: var(--color-ink-2); }
.about__story-title { margin-top: var(--space-lg); }

.about__proof {
  display: grid;
  align-content: start;
  gap: var(--space-lg);
  padding: var(--space-xl) var(--space-lg);
  background: var(--color-paper-2);
  border-radius: var(--radius-md);
}
.duties { display: grid; gap: var(--space-lg); }
.duty {
  display: grid;
  gap: var(--space-2xs);
  padding-bottom: var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.duty dt {
  font-weight: var(--weight-strong);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.duty dt::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  border-radius: 1px;
}
.duty dd { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.65; }

.presence { display: grid; gap: var(--space-md); }
.presence__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}
.places { display: grid; gap: var(--space-2xs); margin-top: var(--space-xs); }
.places li { font-size: var(--text-base); }

@media (min-width: 60rem) {
  .about__proof { padding: var(--space-xl); }
}

/* Values · sand band */
.values {
  background: var(--color-sand);
  color: var(--color-ink);
  padding-block: var(--space-2xl) var(--space-3xl);
  border-block: var(--rule-hair) solid var(--color-sand-rule);
}
.values .h2 { margin-bottom: var(--space-xl); }
.values__list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm) 0;
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-weight: var(--weight-light);
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.values__list li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  overflow-wrap: anywhere;
}
.values__list li:not(:last-child)::after {
  content: "";
  flex: none;
  width: 0.28em;
  height: 0.28em;
  margin-inline: 0.5em;
  background: var(--color-accent);
  border-radius: 2px;
}
.values__list li:nth-child(odd) { font-weight: var(--weight-strong); }

/* Products */
.products__head {
  display: grid;
  gap: var(--space-lg);
  padding-bottom: var(--space-2xl);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.products__head .lead { max-width: 46ch; color: var(--color-ink-2); }
.products__index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.products__index a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
  transition:
    border-color var(--dur-short) var(--ease-out),
    background-color var(--dur-short) var(--ease-out);
}
@media (hover: hover) {
  .products__index a:hover { border-color: var(--color-ink); background: var(--color-paper-2); }
}

.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  padding-top: var(--space-3xl);
}
.product__text {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-lg);
  min-width: 0;
}
.product__text > p:not(.product__meta) { color: var(--color-ink-2); }
.product__title {
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-weight: var(--weight-strong);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.product__meta {
  margin-top: calc(var(--space-sm) * -1);
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  line-height: 1.35;
  color: var(--color-accent-deep);
  max-width: 36ch;
}
.product__group { display: grid; gap: var(--space-sm); width: 100%; }

.tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.tags li {
  padding: var(--space-2xs) var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.ticks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xs) var(--space-lg);
}
.ticks li {
  position: relative;
  padding-left: var(--space-lg);
  font-size: var(--text-base);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  border-radius: 1px;
}
@media (min-width: 40rem) {
  .ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* F3 spec sheet */
.spec { min-width: 0; }
.spec__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-paper-2);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.spec__table caption {
  caption-side: top;
  padding: 0 var(--space-3xs) var(--space-sm);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.spec__table th,
.spec__table td {
  padding: var(--space-sm) var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  vertical-align: baseline;
}
.spec__table tr:last-child th,
.spec__table tr:last-child td { border-bottom: 0; }
.spec__table tr:first-child th,
.spec__table tr:first-child td { padding-top: var(--space-lg); }
.spec__table tr:last-child th,
.spec__table tr:last-child td { padding-bottom: var(--space-lg); }
.spec__table th {
  font-weight: var(--weight-body);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  text-align: left;
}
.spec__table td {
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-align: right;
  color: var(--color-ink);
}
.spec__table td.is-text { font-family: var(--font-body); }

@media (max-width: 22rem) {
  .spec__table th, .spec__table td { padding-inline: var(--space-md); }
}

@media (min-width: 60rem) {
  .product {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--space-3xl);
    align-items: start;
    padding-top: var(--space-4xl);
  }
  /* alternate the diptych direction */
  .product:nth-of-type(even) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }
  .product:nth-of-type(even) .spec { grid-column: 1; grid-row: 1; }
  .product:nth-of-type(even) .product__text { grid-column: 2; }

  .spec {
    position: sticky;
    top: calc(var(--nav-h) + var(--space-lg));
  }
}

/* Contact */
.contact { background: var(--color-paper); border-top: var(--rule-hair) solid var(--color-rule); }
.contact__intro {
  display: grid;
  align-content: start;
  gap: var(--space-lg);
}
.contact__intro .lead { color: var(--color-ink-2); }
.offices {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-md);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.office {
  display: grid;
  justify-items: start;
  gap: var(--space-2xs);
  padding-bottom: var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.office__country {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
}
.office__country::before,
.foffice__country::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  border-radius: 1px;
}
.office__entity { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-ink-2); }
.office .address { font-size: var(--text-sm); color: var(--color-muted); }
.office__links,
.foffice__links { display: flex; flex-wrap: wrap; column-gap: var(--space-lg); }
.office__links a,
.foffice__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: text-decoration-color var(--dur-short) var(--ease-out);
}
.office__links a { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.offices__partners { display: grid; gap: var(--space-2xs); }

.address { font-style: normal; line-height: 1.55; }
@media (hover: hover) {
  .office__links a:hover { text-decoration-color: var(--color-ink); }
  .foffice__links a:hover { text-decoration-color: var(--color-accent); }
}

@media (min-width: 60rem) {
  .split--contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .contact__intro { position: sticky; top: calc(var(--nav-h) + var(--space-lg)); }
}

/* Form */
.form,
.form-done {
  padding: var(--space-lg);
  background: var(--color-paper-2);
  border-radius: var(--radius-md);
}
@media (min-width: 40rem) {
  .form, .form-done { padding: var(--space-xl); }
}
.form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xs) var(--space-lg);
}
@media (min-width: 40rem) {
  .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--wide { grid-column: 1 / -1; }
}

.field { display: grid; gap: var(--space-xs); min-width: 0; }
.field label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}
.optional { font-weight: var(--weight-body); color: var(--color-muted); }

.input {
  width: 100%;
  min-height: var(--control-h);
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-hair) solid var(--color-field-edge);
  border-radius: var(--radius-sm);
  outline: 2px solid transparent;
  outline-offset: 1px;
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--text-base);
  line-height: 1.4;
  transition: background-color var(--dur-short) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder { color: var(--color-muted); opacity: 1; }
textarea.input { min-height: 8rem; resize: vertical; }
@media (hover: hover) {
  .input:hover { background: var(--color-paper-2); }
}
.input:focus-visible,
.input:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
  border-color: var(--color-ink-2);
  background: var(--color-paper);
}
.input:disabled { opacity: 0.55; cursor: not-allowed; }
.input[aria-invalid="true"] {
  border-color: var(--color-error);
  background: var(--color-error-bg);
}

.select { position: relative; }
.select::after {
  content: "";
  position: absolute;
  right: var(--space-md);
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--color-ink-2);
  border-bottom: 1.5px solid var(--color-ink-2);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.select .input { padding-right: var(--space-2xl); cursor: pointer; }

.field__msg {
  min-height: 1.5em;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-muted);
}
.field__msg.is-error {
  color: var(--color-error);
  display: flex;
  gap: var(--space-2xs);
}
.field__msg.is-error::before { content: "⚠"; flex: none; }

.hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
  margin-top: var(--space-md);
}
.form__status { font-size: var(--text-sm); color: var(--color-ink-2); }
.form__status.is-error {
  color: var(--color-error);
  font-weight: var(--weight-medium);
}

.form-done {
  display: grid;
  justify-items: start;
  gap: var(--space-md);
}
.form-done[hidden] { display: none; }
.form-done:focus-visible { outline-offset: 4px; }
.form-done__icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: var(--space-xs);
  border-radius: 50%;
  background: var(--color-accent);
  fill: none;
  stroke: var(--color-accent-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.form-done p { color: var(--color-ink-2); }

/* ── Footer · Ft1 ─────────────────────────────────────── */
.footer {
  background: var(--color-navy);
  color: var(--color-on-navy);
  padding-block: var(--space-3xl) var(--space-lg);
  padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom));
}
.footer :focus-visible { outline-color: var(--color-focus-on-navy); }
.footer .label { color: var(--color-on-navy-2); }

.footer__mast {
  display: grid;
  gap: var(--space-sm);
  padding-bottom: var(--space-2xl);
  border-bottom: var(--rule-hair) solid var(--color-navy-rule);
}
.brand--footer .brand__igc,
.brand--footer .brand__name { font-size: var(--text-lg); }
.brand--footer .logo { width: 3.5rem; height: 3.5rem; }
.footer__tagline {
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-weight: var(--weight-light);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-on-navy);
}

.footer__places {
  display: grid;
  gap: var(--space-lg);
  padding-block: var(--space-2xl);
}
.footer .label { display: block; }
.footer__offices {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
}
.foffice {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-2xs);
}
.foffice__country {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.foffice__entity { margin-top: var(--space-2xs); font-weight: var(--weight-medium); color: var(--color-on-navy); }
.foffice .address { font-size: var(--text-sm); color: var(--color-on-navy-2); }
.foffice__links a {
  color: var(--color-on-navy);
  text-decoration-color: var(--color-navy-rule);
  text-decoration-thickness: 1px;
}
.footer__partners {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-md);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-navy-rule);
  color: var(--color-on-navy-2);
}
.footer__partners .label { display: inline; }
@media (min-width: 48rem) {
  .footer__offices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
}

.footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-lg);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-navy-rule);
  font-size: var(--text-sm);
  color: var(--color-on-navy-2);
}
.footer__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-md); }
.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-on-navy);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
@media (hover: hover) {
  .footer__links a:hover { text-decoration: underline; }
}

@media (min-width: 60rem) {
  .footer__mast {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: end;
    gap: var(--space-2xl);
  }
  .footer__tagline { justify-self: end; text-align: right; }
}

/* ── Reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .btn[data-state="loading"] .btn__spinner {
    animation-duration: 1400ms !important;
    animation-iteration-count: infinite !important;
  }
  .btn:hover, .btn:active { transform: none !important; }
}

/* ── Print ────────────────────────────────────────────── */
@media print {
  .nav, .nav-sentinel, .hero__actions, .form, .products__index, .skip-link { display: none !important; }
  .hero, .footer { background: none; color: var(--color-ink); }
  .spec { position: static; }
}

/* ═══════════════════════════════════════════════════════════
   v2 — multi-page site (four sectors)
   ═══════════════════════════════════════════════════════════ */

/* ── Nav: solid variant for pages without a dark hero ─────── */
.nav--solid {
  color: var(--color-ink);
  background: var(--color-paper-glass);
  border-bottom-color: var(--color-rule);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}
.nav--solid :focus-visible { outline-color: var(--color-focus); }
body:has(.nav--solid) main { padding-top: var(--nav-h); }
.nav__link.is-current { opacity: 1; }
.nav__link.is-current::after {
  content: "";
  position: absolute;
  bottom: 0.55rem;
  left: var(--space-sm);
  right: var(--space-sm);
  height: 2px;
  background: var(--color-accent);
  border-radius: 1px;
}
.nav__link { position: relative; }
.sheet__label { padding-top: var(--space-md); }

/* ── Eyebrow (spec supplies one per inner page) ───────────── */
.eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
}

/* ── Home hero extras ─────────────────────────────────────── */
.hero__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.hero__title--home { font-size: var(--text-display-s); letter-spacing: -0.035em; }
.hero__title--home .w-strong::after { display: none; }
.hero__index { align-self: end; min-width: 0; }
.hero__index .label { color: var(--color-on-navy-2); }
.hindex { display: grid; margin-top: var(--space-md); }
.hindex a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 60px;
  padding-block: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-navy-rule);
  color: var(--color-on-navy);
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: padding-inline-start var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.hindex li:last-child a { border-bottom: var(--rule-hair) solid var(--color-navy-rule); }
.hindex svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: hover) {
  .hindex a:hover { padding-inline-start: var(--space-xs); }
}
.stats__note {
  max-width: 62ch;
  margin-top: var(--space-md);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-on-navy-2);
}
@media (min-width: 60rem) {
  .stats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ── Inner-page hero (light) ──────────────────────────────── */
.phero {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-xl);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.phero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: end;
}
.phero__title {
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-weight: var(--weight-light);
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.phero__title strong { font-weight: var(--weight-strong); }
.phero .lead { max-width: 52ch; color: var(--color-ink-2); }
.phero__copy { display: grid; gap: var(--space-md); }
@media (min-width: 60rem) {
  .phero { padding-top: var(--space-3xl); padding-bottom: var(--space-2xl); }
  .phero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); }
}

/* ── Section head ─────────────────────────────────────────── */
.shead {
  display: grid;
  gap: var(--space-md);
  max-width: 62ch;
  margin-bottom: var(--space-2xl);
}
.shead .lead { max-width: 56ch; color: var(--color-ink-2); }

/* ── Sector cards ─────────────────────────────────────────── */
.sectors {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
}
.sector {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-sm);
  padding-top: var(--space-lg);
  border-top: 2px solid var(--color-ink);
}
.sector:nth-child(even) { border-top-color: var(--color-accent); }
.sector__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-strong);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.sector__title a { text-decoration: none; }
.sector__title a::after { content: ""; position: absolute; inset: 0; }
.sector { position: relative; }
.sector p { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.65; }
@media (min-width: 48rem) {
  .sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-xl); }
}
@media (hover: hover) {
  .sector:hover .tlink { text-decoration-color: var(--color-ink); }
}

/* ── Typographic link ─────────────────────────────────────── */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  transition: text-decoration-color var(--dur-short) var(--ease-out);
}
.tlink svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: hover) { .tlink:hover { text-decoration-color: var(--color-ink); } }

/* ── Panel (light surface block) ──────────────────────────── */
.panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--space-lg);
  padding: var(--space-xl) var(--space-lg);
  background: var(--color-paper-2);
  border-radius: var(--radius-md);
}
@media (min-width: 60rem) { .panel { padding: var(--space-xl); } }

/* ── Numbered steps ───────────────────────────────────────── */
.steps { display: grid; gap: var(--space-lg); counter-reset: step; }
.step {
  display: grid;
  gap: var(--space-2xs);
  padding-left: 3rem;
  position: relative;
  counter-increment: step;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-accent-deep);
}
.step__title { font-size: var(--text-base); font-weight: var(--weight-strong); }
.step p { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.65; }
.steps--compact { gap: var(--space-md); }
@media (min-width: 60rem) {
  .steps--split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-2xl); }
}

/* ── Closing CTA band ─────────────────────────────────────── */
.ctaband {
  background: var(--color-navy);
  color: var(--color-on-navy);
  padding-block: var(--space-3xl);
}
.ctaband :focus-visible { outline-color: var(--color-focus-on-navy); }
.ctaband__inner {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
.ctaband .h2 { color: var(--color-on-navy); }
.ctaband .lead { max-width: 52ch; margin-top: var(--space-md); color: var(--color-on-navy-2); }
.btn--lg { min-height: 3.25rem; padding-inline: var(--space-xl); font-size: var(--text-base); }
@media (min-width: 60rem) {
  .ctaband__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3xl); }
}

/* ── Footer v2 ────────────────────────────────────────────── */
.footer__about {
  max-width: 68ch;
  padding-top: var(--space-lg);
  color: var(--color-on-navy-2);
  font-size: var(--text-sm);
  line-height: 1.7;
}
.footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  padding-block: var(--space-xl);
}
.footer__list { display: grid; margin-top: var(--space-xs); }
.footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--color-on-navy);
  font-size: var(--text-sm);
  text-decoration: none;
  text-underline-offset: 4px;
}
@media (hover: hover) { .footer__list a:hover { text-decoration: underline; } }
.footer__places { border-top: var(--rule-hair) solid var(--color-navy-rule); }

/* ── Fixes after first home review ────────────────────────── */
.split__a { display: grid; align-content: start; justify-items: start; gap: var(--space-lg); }
.split__a > .duties, .split__a > .steps { width: 100%; }
@media (min-width: 60rem) {
  .stats--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats--5 .stat:nth-child(4) { border-left: 0; padding-left: 0; }
}
@media (min-width: 78rem) {
  .stats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stats--5 .stat:nth-child(4) { border-left: var(--rule-hair) solid var(--color-navy-rule); padding-left: var(--space-lg); }
}

/* ── Section rhythm ───────────────────────────────────────── */
.section--tight { padding-top: 0; }

/* ── Definition grid (values, capabilities, patient-centred) ── */
.vgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}
.vitem {
  display: grid;
  gap: var(--space-2xs);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.vitem dt {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: var(--weight-strong);
}
.vitem dt::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  border-radius: 1px;
}
.vitem dd { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.65; max-width: 48ch; }
.values .vitem { border-top-color: var(--color-sand-rule); }
.values__lead { margin-top: var(--space-lg); max-width: 56ch; }
@media (min-width: 48rem) {
  .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); }
}
@media (min-width: 72rem) {
  .vgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Recruitment companies ────────────────────────────────── */
.companies { display: grid; gap: var(--space-lg); }
.company {
  display: grid;
  gap: var(--space-2xs);
  padding-bottom: var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.company dt { font-size: var(--text-lg); font-weight: var(--weight-light); letter-spacing: -0.015em; }
.company dd { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.65; max-width: 70ch; }
@media (min-width: 60rem) {
  .company { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl); align-items: baseline; }
}

/* ── Chips ────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chips li {
  padding: var(--space-2xs) var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.chips--lg li { padding: var(--space-xs) var(--space-md); }
.values .chips li { border-color: var(--color-sand-rule); background: transparent; }

/* ── Two-up panels ────────────────────────────────────────── */
.twoup { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.twoup .panel { justify-items: start; }
.muted-note { color: var(--color-muted); font-size: var(--text-sm); }
@media (min-width: 60rem) { .twoup { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); } }

/* ── Service blocks ───────────────────────────────────────── */
.svcs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
.svc { display: grid; align-content: start; gap: var(--space-sm); padding-top: var(--space-lg); border-top: 2px solid var(--color-ink); }
.svc:nth-child(even) { border-top-color: var(--color-accent); }
.svc__title { font-size: var(--text-lg); font-weight: var(--weight-strong); letter-spacing: -0.015em; }
.svc__intro { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.65; }
.ticks--one { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) {
  .svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-xl); }
  .svcs--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Simple data table (sector · delivered by) ────────────── */
.dtable {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-paper-2);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.dtable caption {
  caption-side: top;
  padding: 0 var(--space-3xs) var(--space-sm);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.dtable th, .dtable td {
  padding: var(--space-md) var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  text-align: left;
  vertical-align: baseline;
  font-size: var(--text-sm);
}
.dtable tr:last-child th, .dtable tr:last-child td { border-bottom: 0; }
.dtable th { font-weight: var(--weight-body); color: var(--color-ink-2); }
.dtable td { font-weight: var(--weight-medium); }

/* ── Vision / mission ─────────────────────────────────────── */
.vm { display: grid; gap: var(--space-2xl); }
.vm__item { display: grid; gap: var(--space-sm); }
.statement {
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  line-height: 1.35;
  letter-spacing: -0.015em;
}
@media (min-width: 60rem) { .vm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xl); } }

/* ── Breadcrumbs ──────────────────────────────────────────── */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.crumbs a { white-space: nowrap; text-underline-offset: 4px; }
.crumbs span[aria-current] { color: var(--color-ink-2); }

/* ── Product cards ────────────────────────────────────────── */
.pcards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.pcard {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
  padding: var(--space-lg);
  background: var(--color-paper-2);
  border-radius: var(--radius-md);
  transition: background-color var(--dur-short) var(--ease-out);
}
.pcard__kind { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }
.pcard__title { font-size: var(--text-lg); font-weight: var(--weight-strong); letter-spacing: -0.02em; }
.pcard__title a { text-decoration: none; }
.pcard__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-md); }
.pcard__tagline { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.6; }
.pcard__spec {
  margin-top: var(--space-2xs);
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-accent-deep);
}
.pcard .tlink { margin-top: var(--space-sm); }
@media (hover: hover) { .pcard:hover { background: var(--color-sand); } }
@media (min-width: 48rem) { .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) {
  .pcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pcards--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Product detail ───────────────────────────────────────── */
.product { padding-top: 0; }
.spec__note { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); }
.presence__cols--band { max-width: 48rem; margin-top: var(--space-xl); }

/* ── Trading fieldset ─────────────────────────────────────── */
.tradeset {
  margin: 0;
  padding: var(--space-md) var(--space-md) var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper);
}
.tradeset legend { padding-inline: var(--space-xs); }
.tradeset__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs) var(--space-lg); }
@media (min-width: 40rem) { .tradeset__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Light stat strip (inside light sections) ─────────────── */
.stats--light {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
  border-top-color: var(--color-rule);
}
.stats--light .stat__num { color: var(--color-ink); }
.stats--light .stat__label { color: var(--color-muted); }
@media (min-width: 60rem) {
  .stats--light { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats--light .stat + .stat { border-left-color: var(--color-rule); }
  .stats--light .stat:nth-child(3) { border-left: 0; padding-left: 0; }
}

/* Panel children must not out-grow the panel at narrow widths */
.panel > p,
.panel > ul,
.panel > ol,
.panel > dl,
.panel > table,
.panel > fieldset { width: 100%; max-width: 100%; }

/* ── Licence tag on recruitment companies ─────────────────── */
.licence {
  display: inline-block;
  margin-left: var(--space-xs);
  padding: 2px var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--color-muted);
  vertical-align: middle;
}

/* ── Inline typographic link (inside running text) ────────── */
.tlink--inline { min-height: 0; font-size: inherit; font-weight: inherit; }
.tlink--inline svg { width: 0.8em; height: 0.8em; }

/* ── Extra office links (WhatsApp, map) ───────────────────── */
.office__links--extra a,
.foffice__links--extra a { font-size: var(--text-sm); }

/* ── File input ───────────────────────────────────────────── */
.input--file {
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  line-height: 1.6;
}
.input--file::file-selector-button {
  margin-inline-end: var(--space-sm);
  padding: var(--space-2xs) var(--space-sm);
  border: var(--rule-hair) solid var(--color-field-edge);
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}
@media (hover: hover) {
  .input--file::file-selector-button:hover { background: var(--color-sand); }
}