/* ============================================================================
   LONGEVITY GROUP — DESIGN SYSTEM
   ----------------------------------------------------------------------------
   Type      Newsreader (display serif) · Instrument Sans (body) · IBM Plex Mono (registry)
   Colour    Paper white, deep ink, group navy as the only structural colour.
             Company accents appear ONLY as hairlines — never as fills.
   ========================================================================== */

:root {
  /* Surfaces */
  --paper:        #FBFBF9;
  --paper-alt:    #F3F3F0;
  --card:         #FFFFFF;
  --ink:          #10141F;
  --ink-alt:      #171C2A;

  /* Text */
  --text:         #10141F;
  --text-soft:    #3A4152;
  --text-muted:   #6A7183;
  --text-onink:   #EDEDE9;
  --text-onink-muted: rgba(237,237,233,0.58);

  /* Structure — Foster Stern blue */
  --navy:         #0B62B5;
  --navy-hover:   #084A8A;
  --brand-light:  #6FA3E8;
  --rule:         #DEDFE3;
  --rule-strong:  #C3C6CE;
  --tint:         rgba(11,98,181,0.05);

  /* Type */
  --display: "Newsreader", "Times New Roman", Georgia, serif;
  --body:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", "SF Mono", Consolas, monospace;

  /* Rhythm */
  --gutter:   clamp(1.25rem, 5vw, 4.5rem);
  --measure:  70rem;
  --section:  clamp(4.5rem, 9vw, 8.5rem);

  /* Motion */
  --ease:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast:  160ms;
  --slow:  520ms;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--text-onink);
  padding: 0.75rem 1.25rem; font-family: var(--mono); font-size: 0.75rem;
}
.skip-link:focus { left: 0; }

/* --- Shared primitives ---------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Small letterspaced mono label. The site's connective tissue. */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

/* Section head: eyebrow sitting on a full-width hairline. */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--rule-strong);
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.section-head__count {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  white-space: nowrap;
}

.display {
  font-family: var(--display);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -0.018em;
  line-height: 1.06;
  color: var(--text);
  text-wrap: balance;
  margin: 0;
}
.display--xl { font-size: clamp(2.5rem, 6.2vw, 5rem); }
.display--lg { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.1; }
.display--md { font-size: clamp(1.5rem, 2.6vw, 2.15rem); line-height: 1.18; }

.lede {
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 60ch;
  text-wrap: pretty;
  margin: 0;
}

.prose p {
  margin: 0 0 1.15em;
  color: var(--text-soft);
  max-width: 68ch;
  text-wrap: pretty;
}
.prose p:last-child { margin-bottom: 0; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.4rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
  border-radius: 1px;
  cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.btn:hover { background: var(--navy-hover); border-color: var(--navy-hover); }

.btn--ghost { background: transparent; color: var(--navy); border-color: var(--rule-strong); }
.btn--ghost:hover { background: transparent; border-color: var(--navy); color: var(--navy-hover); }

.btn--onink { background: transparent; border-color: rgba(237,237,233,0.35); color: var(--text-onink); }
.btn--onink:hover { background: var(--text-onink); border-color: var(--text-onink); color: var(--ink); }

.btn__arrow { transition: transform var(--fast) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ============================================================================
   HEADER
   ========================================================================== */
.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251,251,249,0.88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 4.25rem;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--text);
}
.wordmark__mark { display: inline-flex; flex-shrink: 0; }
.wordmark__mark svg { display: block; }
/* Matches the brand lockup: bold uppercase name, lighter "Group" beneath. */
.wordmark__name { display: flex; flex-direction: column; line-height: 1; gap: 0.16rem; }
.wordmark__primary {
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--navy-hover);
}
.wordmark__sub {
  font-family: var(--body);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
}

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.25rem); }
.nav__link {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--text-soft);
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.nav__link:hover { color: var(--navy); }
.nav__link[aria-current="page"] { color: var(--navy); border-bottom-color: var(--navy); }

.nav-toggle { display: none; background: none; border: 1px solid var(--rule-strong); border-radius: 1px; padding: 0.5rem 0.7rem; cursor: pointer; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; }

/* --- Hero image ---------------------------------------------------------- */
.hero--image {
  position: relative;
  overflow: hidden;
  min-height: clamp(28rem, 58vh, 38rem);
  display: flex;
  align-items: center;
}
.hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 62% center;
  z-index: 0;
}
/* Wash the left side back to paper so ink text keeps its contrast. */
.hero--image::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(96deg,
    rgba(251,251,249,0.985) 0%,
    rgba(251,251,249,0.95) 30%,
    rgba(251,251,249,0.62) 52%,
    rgba(251,251,249,0.12) 74%,
    rgba(251,251,249,0) 88%);
}
.hero--image .wrap { position: relative; z-index: 2; }
.hero--image .hero__headline { max-width: 15ch; }
.hero--image .hero__standfirst { max-width: 40ch; }

@media (max-width: 60rem) {
  .hero__bg { object-position: 70% center; }
  .hero--image::after {
    background: linear-gradient(180deg,
      rgba(251,251,249,0.97) 0%,
      rgba(251,251,249,0.94) 55%,
      rgba(251,251,249,0.86) 100%);
  }
}

/* ============================================================================
   HERO
   ========================================================================== */
.hero { padding-top: clamp(3.5rem, 8vw, 7rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
/* Interior pages: the content below is the point, so the hero yields to it. */
.hero--compact { padding-top: clamp(2.5rem, 5vw, 4.25rem); padding-bottom: clamp(2rem, 3.5vw, 2.75rem); }
.hero--compact .hero__headline { max-width: 22ch; }
.hero__eyebrow { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.hero__headline { max-width: 18ch; margin-bottom: clamp(1.5rem, 3vw, 2rem); }
/* Third beat of the hero line, set apart the way the brand sets it apart. */
.hero__tail { display: block; font-style: normal; color: var(--navy); }
.section-head__count a { color: var(--navy); text-decoration: none; }
.section-head__count a:hover { color: var(--navy-hover); }
.hero__standfirst { margin-bottom: clamp(2rem, 4vw, 2.75rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Page-load stagger */
.reveal-line { opacity: 0; transform: translateY(14px); animation: rise var(--slow) var(--ease) forwards; }
.reveal-line:nth-child(1) { animation-delay: 60ms; }
.reveal-line:nth-child(2) { animation-delay: 150ms; }
.reveal-line:nth-child(3) { animation-delay: 240ms; }
.reveal-line:nth-child(4) { animation-delay: 330ms; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ============================================================================
   FILM BAND — the video presented as a documented artifact, not wallpaper
   ========================================================================== */
.film { background: var(--ink); color: var(--text-onink); padding-block: clamp(2rem, 4vw, 3rem); }
/* The film runs wider than the text measure — it is the centrepiece, not an inset. */
.film .wrap { max-width: 84rem; }

.film__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(237,237,233,0.18);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-onink-muted);
}
.film__meta strong { color: var(--text-onink); font-weight: 500; }
.film__meta-spacer { margin-left: auto; }

.film__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #06080F;
  border: 1px solid rgba(237,237,233,0.16);
  overflow: hidden;
}
/* contain, not cover: the film carries burned-in captions that must never crop. */
.film__frame video { width: 100%; height: 100%; object-fit: contain; }

.film__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 1rem;
  justify-items: center;
  background: rgba(6,8,15,0.35);
  border: 0;
  width: 100%;
  cursor: pointer;
  color: var(--text-onink);
  transition: background var(--fast) var(--ease);
}
.film__play:hover { background: rgba(6,8,15,0.2); }
.film__play[hidden] { display: none; }
.film__play-ring {
  width: 5rem; height: 5rem;
  border: 1px solid rgba(237,237,233,0.7);
  border-radius: 50%;
  display: grid; place-content: center;
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease);
}
.film__play:hover .film__play-ring { transform: scale(1.06); background: rgba(237,237,233,0.1); }
.film__play-label { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* Shown when the video file is missing — tells you exactly what to do. */
.film__missing {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 0.9rem;
  text-align: center; padding: 2rem;
  background:
    repeating-linear-gradient(-45deg, rgba(237,237,233,0.028) 0 12px, transparent 12px 24px),
    #06080F;
}
.film__missing-title { font-family: var(--display); font-size: clamp(1rem, 3vw, 1.4rem); color: var(--text-onink); margin: 0; }
.film__missing-path {
  font-family: var(--mono); font-size: clamp(0.5625rem, 1.6vw, 0.75rem); letter-spacing: 0.04em;
  color: var(--text-onink-muted);
  border: 1px dashed rgba(237,237,233,0.3);
  padding: 0.4rem 0.7rem; margin: 0;
  max-width: 100%; overflow-wrap: anywhere;
}
.film__caption {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  color: var(--text-onink-muted);
  max-width: 58ch;
}

/* ============================================================================
   THE REGISTRY — the signature. Companies as an index, not a card grid.
   ========================================================================== */
.section { padding-block: var(--section); }
.section--alt { background: var(--paper-alt); }

.registry { border-top: 1px solid var(--rule); }

/* --- Divisions: the groupings the council slides show -------------------- */
.division + .division { margin-top: clamp(3rem, 6vw, 5rem); }
.division[hidden] { display: none; }
.division__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 1.5rem;
  align-items: baseline;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 0;
}
.division__name { font-family: var(--display); font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 400; letter-spacing: -0.015em; margin: 0; }
.division__blurb { grid-column: 1 / 2; color: var(--text-muted); font-size: 0.9375rem; margin: 0; max-width: 62ch; }
.division__count { grid-row: 1; grid-column: 2 / 3; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--text-muted); white-space: nowrap; }

/* --- Market filter chips ------------------------------------------------ */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule); margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.filter-bar .eyebrow { flex-shrink: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 0.5rem 0.85rem;
  background: transparent; border: 1px solid var(--rule-strong); border-radius: 1px;
  color: var(--text-soft); cursor: pointer;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.chip:hover { border-color: var(--accent, var(--navy)); color: var(--accent, var(--navy)); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--text-onink); }
.chip__count { opacity: 0.55; font-size: 0.625rem; }

.registry__row[hidden] { display: none; }

.registry__row {
  position: relative;
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1.15fr) minmax(0, 1.35fr) 9rem 2rem;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(1.35rem, 2.4vw, 1.9rem) 0 clamp(1.35rem, 2.4vw, 1.9rem) 1.25rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background var(--fast) var(--ease);
}
.registry__row:hover { background: var(--tint); }

/* The accent hairline. Grows from the top on hover — the one flourish. */
.registry__row::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 2px; height: 100%;
  background: var(--accent, var(--navy));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--slow) var(--ease);
}
.registry__row:hover::before,
.registry__row:focus-visible::before { transform: scaleY(1); }

.registry__code {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--accent, var(--navy));
  border: 1px solid currentColor;
  border-radius: 1px;
  padding: 0.3rem 0;
  text-align: center;
  width: 3.35rem;
}
.registry__name { font-family: var(--display); font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.15; letter-spacing: -0.012em; }
.registry__mandate { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.5; }
.registry__sector { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.registry__arrow { color: var(--text-muted); transition: transform var(--fast) var(--ease), color var(--fast) var(--ease); justify-self: end; }
.registry__row:hover .registry__arrow { transform: translateX(4px); color: var(--accent, var(--navy)); }

/* Scroll reveal */
.will-reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.is-revealed { opacity: 1; transform: none; }

/* ============================================================================
   DATA SHEET — the group profile. A spec table, not a row of giant numbers.
   ========================================================================== */
/* Three columns so six entries always land as a balanced 2x3 block. */
.sheet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem); border-top: 1px solid var(--rule); }
@media (max-width: 60rem) { .sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .sheet { grid-template-columns: minmax(0, 1fr); } }
.sheet__row {
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: 1.4rem 1.5rem 1.4rem 0;
  border-bottom: 1px solid var(--rule);
}
.sheet__label { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.sheet__value { font-family: var(--display); font-size: 1.3rem; line-height: 1.25; letter-spacing: -0.01em; }

/* ============================================================================
   PRINCIPLES
   ========================================================================== */
.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: 0; }
.principle { padding: 0 clamp(1.25rem, 2.5vw, 2.25rem) 0 0; }
.principle + .principle { border-left: 1px solid var(--rule); padding-left: clamp(1.25rem, 2.5vw, 2.25rem); }
.principle__label { margin-bottom: 1rem; }
.principle__title { font-family: var(--display); font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.012em; margin: 0 0 0.75rem; }
.principle__body { color: var(--text-soft); font-size: 0.9375rem; margin: 0; }

/* ============================================================================
   COMPANY PAGE
   ========================================================================== */
.crumbs { padding-top: 1.75rem; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.crumbs a { text-decoration: none; color: var(--text-muted); }
.crumbs a:hover { color: var(--navy); }
.crumbs span { margin-inline: 0.5rem; color: var(--rule-strong); }

.company-head { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(2.5rem, 5vw, 3.5rem); border-bottom: 1px solid var(--rule); }
.company-head__top { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.company-head__code {
  font-family: var(--mono); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.08em;
  color: var(--accent, var(--navy));
  border: 1px solid currentColor; border-radius: 1px;
  padding: 0.4rem 0.65rem; line-height: 1;
}
.company-head__rule { flex: 1; height: 2px; background: var(--accent, var(--navy)); }
.company-head__sector { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.company-head__logo { max-height: 2.6rem; width: auto; }
.company-head__name { margin-bottom: 1.25rem; }
.company-head__division { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin: 1.5rem 0 0; }

.company-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: var(--section);
  align-items: start;
}

/* The whole panel sticks as one unit — two stacked sticky blocks would overlap. */
.company-body > aside { position: sticky; top: 6rem; }
.spec { border-top: 2px solid var(--accent, var(--navy)); }
.spec--second { margin-top: 2.5rem; }
.spec .is-placeholder { color: var(--text-muted); font-style: italic; }
.spec__title { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); padding-block: 0.9rem; margin: 0; }
.spec__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--rule); font-size: 0.875rem; }
.spec__label { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); flex-shrink: 0; }
.spec__value { text-align: right; color: var(--text); }

.block + .block { margin-top: clamp(2.5rem, 5vw, 3.75rem); }
.block__title { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); padding-bottom: 0.75rem; border-bottom: 1px solid var(--rule-strong); margin: 0 0 1.75rem; }

/* --- company page banner ------------------------------------------------- */
.company-banner { width: 100%; height: clamp(10rem, 24vw, 17rem); overflow: hidden; background: var(--paper-alt); }
.company-banner img { width: 100%; height: 100%; object-fit: cover; }

.company-head__tagline {
  font-family: var(--display); font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-style: italic; color: var(--accent, var(--navy));
  margin: 0 0 1.1rem; letter-spacing: -0.01em;
}

.block__intro { color: var(--text-soft); max-width: 64ch; margin: 0 0 1.6rem; }

/* Product lines, sized up from the small sector tags. */
.tags--lg { gap: 0.6rem; }
.tags--lg li { font-size: 0.75rem; padding: 0.6rem 0.95rem; }

/* --- reference table (cell source / indication) -------------------------- */
.ref-table { border-top: 2px solid var(--accent, var(--navy)); }
.ref-table__head {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 1.5rem;
  padding: 0.8rem 0; border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted);
}
.ref-table__row {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 0.3rem 1.5rem;
  padding: 0.9rem 0; border-bottom: 1px solid var(--rule);
}
.ref-table__key { font-family: var(--display); font-size: 1.05rem; letter-spacing: -0.01em; }
.ref-table__val { color: var(--text-soft); font-size: 0.9375rem; }

/* --- callouts ------------------------------------------------------------ */
.callouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.callout { background: var(--paper-alt); padding: clamp(1.4rem, 3vw, 1.9rem); }
.callout__title { font-family: var(--display); font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.012em; margin: 0 0 0.7rem; }
.callout__body { color: var(--text-soft); font-size: 0.9375rem; margin: 0; }

.caps { border-top: 1px solid var(--rule); }
.caps__item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 1.5rem; padding: 1.35rem 0; border-bottom: 1px solid var(--rule); }
.caps__name { font-family: var(--display); font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.01em; }
.caps__body { color: var(--text-soft); font-size: 0.9375rem; margin: 0; }

.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.person { background: var(--paper); padding: 1.5rem; }
.person__portrait {
  aspect-ratio: 1; margin-bottom: 1rem;
  background: repeating-linear-gradient(-45deg, rgba(20,46,128,0.045) 0 10px, transparent 10px 20px), var(--paper-alt);
  display: grid; place-content: center;
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
}
.person__name { font-family: var(--display); font-size: 1.2rem; line-height: 1.25; margin: 0 0 0.25rem; }
.person__role { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 0.75rem; }
.person__bio { font-size: 0.875rem; color: var(--text-soft); margin: 0; }

/* Company pages list one or two people — full-bleed portraits overwhelm them. */
.people--compact .person { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1.1rem; align-items: center; padding: 1.15rem 1.25rem; }
.people--compact .person__portrait { margin-bottom: 0; font-size: 0.5rem; }
.people--compact .person__name { font-size: 1.05rem; }
.people--compact .person__role { margin-bottom: 0; }

/* Compact registry used at the foot of a company page */
.registry--compact .registry__row { grid-template-columns: 4.5rem minmax(0, 1fr) 9rem 2rem; padding-block: 1.1rem; }
.registry--compact .registry__name { font-size: 1.1rem; }

/* ============================================================================
   PRESIDENT PROFILE
   ========================================================================== */
.profile { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.profile__portrait { margin: 0; }
.profile__portrait img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%;
  border: 1px solid var(--rule);
  filter: saturate(0.94);
}
.profile__portrait figcaption {
  margin-top: 0.85rem;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em;
  color: var(--text-muted); line-height: 1.5;
}
.profile__intro .eyebrow { padding-bottom: 0.75rem; border-bottom: 1px solid var(--rule-strong); margin-bottom: 0.5rem; }

/* Shared by positions, education and certifications — label left, detail right. */
.record { border-top: 0; }
.record__row {
  display: grid; grid-template-columns: 12rem minmax(0, 1fr);
  gap: 0.35rem 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.record__year { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--navy); }
.record__title { display: block; font-family: var(--display); font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.01em; }
.record__title a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.record__title a:hover { color: var(--navy); border-color: currentColor; }
.record__org { display: block; margin-top: 0.2rem; font-size: 0.875rem; color: var(--text-muted); }

.block--wide { margin-top: clamp(3rem, 6vw, 4.5rem); }

.memberships { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.memberships li {
  position: relative;
  padding: 0.95rem 0 0.95rem 1.6rem;
  border-bottom: 1px solid var(--rule);
  color: var(--text-soft);
}
.memberships li::before {
  content: ""; position: absolute; left: 0; top: 1.4em;
  width: 0.4rem; height: 0.4rem; background: var(--navy); transform: rotate(45deg);
}

/* Real photo replaces the hatched placeholder wherever one exists. */
.person__photo { width: 4.5rem; height: 4.5rem; object-fit: cover; object-position: 50% 18%; border: 1px solid var(--rule); }

/* ============================================================================
   TIMELINE (group page)
   ========================================================================== */
.timeline { border-top: 1px solid var(--rule); }
.timeline__row { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1.5rem; padding: 1.25rem 0; border-bottom: 1px solid var(--rule); }
.timeline__year { font-family: var(--mono); font-size: 0.875rem; letter-spacing: 0.06em; color: var(--navy); }
.timeline__event { color: var(--text-soft); }

/* ============================================================================
   CONTACT
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.contact-item__label { margin-bottom: 0.6rem; }
.contact-item__value { font-family: var(--display); font-size: 1.3rem; line-height: 1.35; letter-spacing: -0.01em; text-decoration: none; color: var(--text); }
a.contact-item__value:hover { color: var(--navy); }

.cta { background: var(--ink); color: var(--text-onink); padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.cta__title { color: var(--text-onink); max-width: 20ch; margin-bottom: 1.25rem; }
.cta__body { color: var(--text-onink-muted); max-width: 52ch; margin-bottom: 2rem; }

/* ============================================================================
   WHO WE ARE
   ========================================================================== */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.about__lead .display { max-width: 16ch; margin-bottom: 1.75rem; }
.about__body p { font-size: 1.0625rem; }
.about__figure { margin: 0; }
.about__figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--rule); }
.about__figure figcaption {
  margin-top: 0.8rem;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em;
  color: var(--text-muted); line-height: 1.5;
}

/* --- mission / vision / values ------------------------------------------ */
.charter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.charter__label { margin-bottom: 0.85rem; }
.charter__title { font-family: var(--display); font-size: 1.35rem; line-height: 1.25; letter-spacing: -0.012em; margin: 0 0 0.7rem; }
.charter__body { color: var(--text-soft); font-size: 0.9375rem; margin: 0; }




/* ============================================================================
   GLOBAL PRESENCE
   ========================================================================== */
.presence__tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--rule); margin-bottom: clamp(2rem, 4vw, 3rem); }
.presence__tab {
  position: relative;
  background: none; border: 0; cursor: pointer;
  padding: 0.9rem 1.15rem;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em;
  color: var(--text-muted);
  transition: color var(--fast) var(--ease);
}
.presence__tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent, var(--navy)); transform: scaleX(0); transform-origin: left;
  transition: transform var(--fast) var(--ease);
}
.presence__tab:hover { color: var(--text); }
.presence__tab.is-active { color: var(--text); }
.presence__tab.is-active::after { transform: scaleX(1); }

.presence__panel[hidden] { display: none; }
.presence__head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 0.9rem; }
.presence__city { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.presence__blurb { color: var(--text-soft); max-width: 62ch; margin: 0 0 clamp(1.75rem, 3vw, 2.5rem); }
.presence__label { margin: 2rem 0 0.9rem; }
.presence__empty { color: var(--text-muted); font-size: 0.9375rem; padding: 1rem 0; margin: 0; }

.presence__figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); gap: 0; border-top: 2px solid var(--accent, var(--navy)); }
.figure { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.1rem 1.25rem 1.1rem 0; border-bottom: 1px solid var(--rule); }
.figure__value { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1; letter-spacing: -0.02em; }
.figure__label { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }

.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.tags li {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.07em; text-transform: uppercase;
  border: 1px solid var(--rule-strong); border-radius: 1px; padding: 0.4rem 0.7rem; color: var(--text-soft);
}

/* --- international reach ------------------------------------------------- */
.reach { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--rule); }
.reach__item {
  flex: 1 1 12rem;
  padding: 1rem 1.25rem 1rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--display); font-size: 1.15rem; letter-spacing: -0.01em;
}

/* ============================================================================
   SERVICES
   ========================================================================== */
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.service { background: var(--paper); display: flex; flex-direction: column; }
.service__index {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em;
  color: var(--text-muted);
}
.service__body {
  padding: clamp(1.6rem, 3vw, 2.1rem) clamp(1.5rem, 3vw, 1.9rem) clamp(1.75rem, 3vw, 2.25rem);
  display: flex; flex-direction: column; gap: 0.7rem; flex: 1;
  border-top: 2px solid transparent;
  transition: border-color var(--fast) var(--ease);
}
.service:hover .service__body { border-top-color: var(--navy); }
.service__name { font-family: var(--display); font-size: 1.45rem; line-height: 1.2; letter-spacing: -0.012em; margin: 0; }
.service__summary { color: var(--text-muted); font-size: 0.9375rem; margin: 0; flex: 1; }
.service__more {
  align-self: flex-start; margin-top: 0.5rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--navy);
  border-bottom: 1px solid currentColor;
  transition: color var(--fast) var(--ease);
}
.service__more:hover { color: var(--navy-hover); }

/* --- service dialog ------------------------------------------------------ */
.sheet-dialog {
  width: min(46rem, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  padding: 0; border: 1px solid var(--rule-strong); border-radius: 2px;
  background: var(--paper); color: var(--text);
  overflow: auto;
}
.sheet-dialog::backdrop { background: rgba(16,20,31,0.62); backdrop-filter: blur(2px); }
.sheet-dialog__close-form { position: sticky; top: 0; height: 0; z-index: 2; }
.sheet-dialog__close {
  position: absolute; top: 0.85rem; right: 0.85rem;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5); background: rgba(16,20,31,0.45);
  color: #fff; font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.sheet-dialog__body { padding: clamp(1.5rem, 4vw, 2.5rem); }
.sheet-dialog__body p { color: var(--text-soft); max-width: 60ch; margin: 1rem 0 1.5rem; }

.checks { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 0.7rem; }
.checks li { position: relative; padding-left: 1.6rem; color: var(--text-soft); font-size: 0.9375rem; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 0.45em;
  width: 0.7rem; height: 0.38rem;
  border-left: 1.5px solid var(--navy); border-bottom: 1.5px solid var(--navy);
  transform: rotate(-45deg);
}

/* ============================================================================
   AFFILIATED MARQUEE
   ========================================================================== */
.marquee { overflow: hidden; border-block: 1px solid var(--rule); padding-block: 1.75rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; gap: clamp(2.5rem, 5vw, 4.5rem); animation: slide 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }

.lockup { display: flex; flex-direction: column; gap: 0.2rem; white-space: nowrap; }
.lockup__name { font-family: var(--body); font-weight: 600; font-size: 1rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--navy-hover); }
.lockup__country {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent, var(--navy));
}

/* ============================================================================
   CTA OVER IMAGE
   ========================================================================== */
.cta__inner { position: relative; z-index: 1; }
.cta__eyebrow { color: var(--brand-light); margin-bottom: 1.25rem; }

/* ============================================================================
   CONTACT FORM
   ========================================================================== */
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem clamp(1.25rem, 3vw, 2rem); }
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field--wide { grid-column: 1 / -1; }
.field__label { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.field__req { color: var(--navy); }
.field input, .field textarea {
  font: inherit; font-size: 0.9375rem; color: var(--text);
  background: var(--card);
  border: 1px solid var(--rule-strong); border-radius: 1px;
  padding: 0.75rem 0.85rem;
  width: 100%;
  transition: border-color var(--fast) var(--ease);
}
.field input:focus, .field textarea:focus { border-color: var(--navy); outline: 2px solid rgba(11,98,181,0.18); outline-offset: 0; }
.field textarea { resize: vertical; min-height: 8rem; }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; }
.form__note { font-size: 0.875rem; margin: 0; color: var(--text-muted); max-width: 46ch; }
.form__note.is-error { color: #A8323E; }
.form__note.is-pending { color: var(--text-muted); }

/* ============================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--ink); color: var(--text-onink); padding-block: clamp(3rem, 5vw, 4.5rem) 2rem; border-top: 1px solid rgba(237,237,233,0.12); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: clamp(2rem, 5vw, 4rem); padding-bottom: 2.5rem; border-bottom: 1px solid rgba(237,237,233,0.14); }
.footer__blurb { color: var(--text-onink-muted); font-size: 0.9375rem; max-width: 34ch; margin: 1rem 0 0; }
.footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: 2rem; }
.footer__heading { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-onink-muted); margin: 0 0 1rem; }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer__list a { text-decoration: none; color: var(--text-onink); font-size: 0.875rem; opacity: 0.85; transition: opacity var(--fast) var(--ease); }
.footer__list a:hover { opacity: 1; }
.footer__code { font-family: var(--mono); font-size: 0.6875rem; color: var(--text-onink-muted); margin-right: 0.55rem; }
.footer__base { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; padding-top: 1.75rem; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--text-onink-muted); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer__legal a { text-decoration: none; }
.footer__legal a:hover { color: var(--text-onink); }
.footer__social { flex-direction: row; display: flex; gap: 1.25rem; margin-top: 1.5rem; list-style: none; padding: 0; }
.footer__reach { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; }
.footer__reach-item {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.06em;
  color: var(--text-onink); opacity: 0.72;
  border: 1px solid rgba(237,237,233,0.22); border-radius: 1px;
  padding: 0.3rem 0.5rem;
}
/* The disc keeps its brand blue on dark; only the type flips. */
.footer .wordmark__primary { color: var(--text-onink); }
.footer .wordmark__sub { color: var(--brand-light); }

/* ============================================================================
   DEMO NOTICE — delete this block and the markup once content is real
   ========================================================================== */
.demo-bar {
  background: #1C2436; color: var(--text-onink);
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.06em;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  padding: 0.6rem 1rem; text-align: center;
}
.demo-bar__close { background: none; border: 1px solid rgba(237,237,233,0.3); border-radius: 1px; padding: 0.15rem 0.45rem; cursor: pointer; font-size: 0.6875rem; }
.demo-bar[hidden] { display: none; }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 60rem) {
  .about { grid-template-columns: minmax(0, 1fr); }
  .profile { grid-template-columns: minmax(0, 1fr); }
  .profile__portrait { max-width: 18rem; }
  .about__lead .display { max-width: 20ch; }
  .form__grid { grid-template-columns: minmax(0, 1fr); }
  .company-body { grid-template-columns: minmax(0, 1fr); }
  .spec { position: static; }
  .registry__row { grid-template-columns: 3.5rem minmax(0, 1fr) 2rem; row-gap: 0.5rem; }
  .registry__mandate { grid-column: 2 / 3; }
  .registry__sector { grid-column: 2 / 3; }
  .registry--compact .registry__row { grid-template-columns: 3.5rem minmax(0, 1fr) 2rem; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .principle + .principle { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; padding-top: 1.75rem; margin-top: 1.75rem; }
  .principle { padding-right: 0; }
}

@media (max-width: 52rem) {
  .nav {
    position: fixed; inset: 4.25rem 0 auto; z-index: 90;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: 0.5rem var(--gutter) 1.25rem;
  }
  .nav[hidden] { display: none; }
  .nav__link { padding-block: 0.85rem; border-bottom: 1px solid var(--rule); font-size: 0.875rem; }
  .nav-toggle { display: block; }
  /* Twenty rows adds up fast on a phone — tighten the register. */
  .registry__row { padding-block: 1rem; }
  .registry__name { font-size: 1.05rem; }
  .registry__mandate { font-size: 0.875rem; }
  .division__head { grid-template-columns: minmax(0, 1fr); }
  .division__count { grid-row: auto; grid-column: 1 / 2; }
  .caps__item { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
  .timeline__row { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
  .record__row { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
  .ref-table__head { display: none; }
  .ref-table__row { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .film__meta-spacer { margin-left: 0; }
}

/* ============================================================================
   MOTION & PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal-line, .will-reveal { opacity: 1; transform: none; }
  .registry__row::before { transform: scaleY(1); }
  .marquee__track { animation: none; transform: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
}

@media print {
  .masthead, .demo-bar, .nav-toggle, .cta, .film__play { display: none !important; }
  body { background: #fff; }
  .footer { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
  a { text-decoration: none; color: #000; }
}

/* ============================================================================
   v2 COMPONENTS — the focused site
   ========================================================================== */

/* --- Areas of work: six named, two of them linked ----------------------- */
.areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.area {
  background: var(--paper);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex; flex-direction: column; gap: 0.55rem;
  text-decoration: none; color: inherit;
  border-top: 2px solid transparent;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.area__index { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em; color: var(--text-muted); }
.area__name { font-family: var(--display); font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.012em; margin: 0; }
.area__note { color: var(--text-muted); font-size: 0.9375rem; margin: 0; flex: 1; }
.area--link { cursor: pointer; }
.area--link:hover { border-top-color: var(--navy); background: var(--tint); }
.area__more {
  margin-top: 0.4rem;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--navy);
}

/* --- The register: names only ------------------------------------------- */
.register { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.register__item:not(.register__item--link), .register__item--link > a {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) 9rem;
  align-items: center; gap: 1.25rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit;
}
.register__item--link { border-bottom: 0; padding: 0; }
.register__item--link > a { grid-template-columns: 3.5rem minmax(0, 1fr) 9rem 1.5rem; }
.register__item--link > a:hover { background: var(--tint); }
.register__code {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em;
  color: var(--accent, var(--navy));
  border: 1px solid currentColor; border-radius: 1px;
  padding: 0.25rem 0; text-align: center;
}
.register__name { font-family: var(--display); font-size: 1.15rem; line-height: 1.25; letter-spacing: -0.01em; }
.register__market { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.register__go { color: var(--navy); justify-self: end; transition: transform var(--fast) var(--ease); }
.register__item--link > a:hover .register__go { transform: translateX(3px); }

/* --- Presence: one card per operating country --------------------------- */
/* Real gaps, not a 1px-background trick — five cards in a three-column grid
   would otherwise leave the container colour showing as a sixth empty cell. */
.presence-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.place {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--accent, var(--navy));
  padding: clamp(1.4rem, 3vw, 1.9rem);
  display: flex; flex-direction: column; gap: 0.7rem;
}
.place__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.place__name { font-family: var(--display); font-size: 1.3rem; letter-spacing: -0.012em; margin: 0; }
.place__city { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.place__blurb { color: var(--text-soft); font-size: 0.9375rem; margin: 0; flex: 1; }
.place__figures { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin: 0; font-size: 0.875rem; color: var(--text-muted); }
.place__figures strong { font-family: var(--display); font-size: 1.15rem; color: var(--text); font-weight: 400; }
.place__count { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent, var(--navy)); margin: 0; }

/* --- Homepage features: everything the group can describe in depth ------- */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.feature { display: flex; flex-direction: column; border: 1px solid var(--rule); background: var(--paper); }
.feature__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-alt); }
.feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.feature:hover .feature__media img { transform: scale(1.03); }
.feature__body { padding: clamp(1.5rem, 3vw, 2rem); display: flex; flex-direction: column; gap: 0.8rem; flex: 1; }
.feature__title { font-family: var(--display); font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.2; letter-spacing: -0.015em; margin: 0; }
.feature__text { color: var(--text-soft); font-size: 0.9375rem; margin: 0; flex: 1; }
.feature .btn { align-self: flex-start; margin-top: 0.4rem; }

/* --- Alternating image and text splits (allergy page) ------------------- */
.splits { padding-block: clamp(3rem, 6vw, 5rem); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split + .split { margin-top: clamp(3.5rem, 7vw, 6rem); }
.split--flip .split__media { order: 2; }
.split__media { margin: 0; }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--rule); }
.split__body .eyebrow { padding-bottom: 0.8rem; border-bottom: 1px solid var(--rule-strong); margin-bottom: 1.5rem; }
.split__intro { color: var(--text-soft); margin: 0 0 1.25rem; }
.split__note {
  margin: 1.5rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--rule);
  font-family: var(--display); font-size: 1.15rem; letter-spacing: -0.01em; color: var(--navy);
}

.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.steps li { counter-increment: s; position: relative; padding-left: 2.2rem; color: var(--text-soft); }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: 0.1em;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--navy);
}

/* --- Data table (allergy worked example) -------------------------------- */
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; min-width: 44rem; }
.data-table th, .data-table td { text-align: right; padding: 0.9rem 1rem; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.data-table thead th {
  border-bottom: 2px solid var(--ink);
  font-family: var(--mono); font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
}
.data-table thead th:first-child, .data-table tbody th { text-align: left; padding-left: 0; }
.data-table tbody th { font-family: var(--display); font-size: 1.05rem; font-weight: 400; letter-spacing: -0.01em; }
.data-table td:last-child, .data-table th:last-child { padding-right: 0; }

@media (max-width: 60rem) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .split--flip .split__media { order: 0; }
}
@media (max-width: 48rem) {
  .register__item:not(.register__item--link), .register__item--link > a { grid-template-columns: 3.25rem minmax(0, 1fr); row-gap: 0.35rem; }
  .register__market { grid-column: 2 / 3; }
  .register__go { display: none; }
}

/* --- Closing CTA over an image ------------------------------------------- */
.cta--image { position: relative; overflow: hidden; }
.cta__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
  opacity: 0.5;
}
.cta--image::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(9,12,20,0.94) 10%, rgba(9,12,20,0.62) 58%, rgba(9,12,20,0.3));
}
.cta__inner { position: relative; z-index: 1; }
.cta__eyebrow { color: var(--brand-light); margin-bottom: 1.25rem; }

/* --- ITC: the laboratory and its president ------------------------------- */
.voice { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.voice__facility { margin: 0; }
.voice__facility img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--rule); }
.voice__facility figcaption {
  margin-top: 0.8rem;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em;
  color: var(--text-muted); line-height: 1.5;
}
.voice__quote { margin: 0; border-left: 2px solid var(--accent, var(--navy)); padding-left: clamp(1.25rem, 3vw, 2rem); }
.voice__quote p {
  font-family: var(--display); font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  line-height: 1.4; letter-spacing: -0.012em; color: var(--text); margin: 0 0 1.75rem;
  text-wrap: pretty;
}
.voice__by { display: flex; align-items: center; gap: 1rem; }
.voice__by img { width: 3.5rem; height: 4.4rem; object-fit: cover; object-position: 50% 12%; border: 1px solid var(--rule); background: var(--paper-alt); }
.voice__by span { display: flex; flex-direction: column; gap: 0.15rem; }
.voice__by strong { font-family: var(--display); font-size: 1.05rem; font-weight: 400; letter-spacing: -0.01em; }
.voice__by span span { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }

/* --- ITC product catalogue ----------------------------------------------- */
.catalogue { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.product { display: flex; flex-direction: column; gap: 0.55rem; }
.product__media {
  aspect-ratio: 1; overflow: hidden;
  background: #0B0D14;
  border: 1px solid var(--rule);
}
.product__media img { width: 100%; height: 100%; object-fit: contain; transition: transform 500ms var(--ease); }
.product:hover .product__media img { transform: scale(1.05); }
.product__name { font-family: var(--display); font-size: 1.05rem; line-height: 1.25; letter-spacing: -0.01em; margin: 0; }
.product__note { font-size: 0.8125rem; line-height: 1.45; color: var(--text-muted); margin: 0; }
.catalogue__note {
  margin: clamp(2rem, 4vw, 3rem) 0 0; padding-top: 1.25rem; border-top: 1px solid var(--rule);
  font-size: 0.875rem; color: var(--text-muted); max-width: 72ch;
}

@media (max-width: 60rem) {
  .voice { grid-template-columns: minmax(0, 1fr); }
}

/* --- Real logo in the masthead and footer -------------------------------- */
.wordmark__img { height: 2.6rem; width: auto; display: block; }
.footer .wordmark__img { height: 2.9rem; filter: brightness(0) invert(1); opacity: 0.92; }

/* --- The logo wall: a mark where one exists, the name where it doesn't ---- */
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(10.5rem, 100%), 1fr)); gap: clamp(0.75rem, 1.6vw, 1.15rem); }
.wall__tile {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.85rem;
  padding: 1.5rem 1rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 3px;
  text-decoration: none; color: inherit;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.wall__tile--link:hover { border-color: var(--navy); box-shadow: 0 2px 10px rgba(11,98,181,0.10); }
.wall__mark { height: 3.2rem; display: grid; place-items: center; width: 100%; }
.wall__mark img { max-height: 3.2rem; max-width: 100%; width: auto; object-fit: contain; }
/* No logo yet — the company's code stands in for its mark. */
.wall__mark--type span {
  font-family: var(--mono); font-size: 0.9375rem; letter-spacing: 0.1em;
  color: var(--navy);
  border: 1px solid var(--rule-strong); border-radius: 50%;
  width: 3.2rem; height: 3.2rem; display: grid; place-items: center;
}
.wall__name {
  font-size: 0.8125rem; line-height: 1.35; text-align: center; color: var(--text-soft);
  text-wrap: balance;
}

/* --- Division logo above a page's content -------------------------------- */
.division-logo { padding-top: clamp(2.5rem, 5vw, 4rem); }
.division-logo img { height: clamp(5rem, 9vw, 7rem); width: auto; }

/* --- EMBVIT nutrient panels ---------------------------------------------- */
.nutrients { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.nutrient { border-top: 2px solid var(--navy); padding-top: 1.1rem; }
.nutrient__label { margin-bottom: 1rem; }

@media (max-width: 52rem) {
  .wordmark__img { height: 2.2rem; }
}

.split--solo { grid-template-columns: minmax(0, 1fr); }
.split--solo .split__body { max-width: 60ch; }

/* ============================================================================
   DENSITY PASS
   ----------------------------------------------------------------------------
   Equal spacing everywhere flattens the hierarchy — every section read the
   same, so nothing stood out. Sections now come in three weights, and the
   page gets two dark anchors instead of an unbroken run of white.
   ========================================================================== */

:root { --section: clamp(3.75rem, 6.5vw, 6rem); }

/* A section that carries the page: more air above and below. */
.section--major { padding-block: clamp(5rem, 9vw, 8rem); }
/* A section that supports: less. */
.section--minor { padding-block: clamp(2.75rem, 4.5vw, 4rem); }

.section-head { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }


/* --- Four numbers at real size: the page's one loud moment ---------------- */
.figures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
.figure-lg {
  background: var(--paper);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.figure-lg__value {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.75rem, 6vw, 4.25rem); line-height: 0.95;
  letter-spacing: -0.03em; color: var(--navy);
}
.figure-lg__label {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted);
}

/* Long section labels must be allowed to wrap on a narrow screen. */
@media (max-width: 34rem) {
  .section-head { flex-wrap: wrap; gap: 0.4rem 1rem; }
  .section-head__count { white-space: normal; }
}

/* --- The country band ------------------------------------------------------
   Sits directly under the hero. The deck states the group's international
   presence as a row of circular flags; this is that row, moving. The track
   carries the set twice and travels exactly half its own width, so the loop
   closes on itself with no visible seam. ------------------------------------ */

.countries {
  background: var(--ink);
  background-image: radial-gradient(120% 180% at 50% 0%, #16273F 0%, var(--ink) 62%);
  color: var(--text-onink);
  padding-block: clamp(1.5rem, 3.2vw, 2.4rem);
  border-bottom: 1px solid rgba(237, 237, 233, 0.10);
  overflow: hidden;
}

.countries__label {
  margin: 0 0 clamp(0.9rem, 2vw, 1.35rem);
  text-align: center;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--text-onink-muted);
}

/* The fade hides the point where chips enter and leave. */
.countries__viewport {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.countries__track {
  display: flex;
  width: max-content;
  animation: countries-marquee 46s linear infinite;
}
.countries:hover .countries__track,
.countries:focus-within .countries__track { animation-play-state: paused; }

@keyframes countries-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.countries__set {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1vw, 0.75rem);
  margin: 0;
  padding: 0 clamp(0.25rem, 0.5vw, 0.375rem);
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex: none;
  padding: 0.45rem 1.05rem 0.45rem 0.5rem;
  border: 1px solid rgba(237, 237, 233, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
}
.chip__flag {
  width: 1.4rem; height: 1.4rem; display: block;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(237, 237, 233, 0.22);
}
.chip__name {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-onink);
}

/* Standing still, the band becomes a centred list. */
@media (prefers-reduced-motion: reduce) {
  .countries__viewport { -webkit-mask-image: none; mask-image: none; }
  .countries__track { animation: none; width: auto; }
  .countries__set { flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
  .countries__set[aria-hidden="true"] { display: none; }
}

/* A shared symbol plus the company's country, side by side. */
.wall__mark--pair { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.wall__flag {
  width: 1.5rem; height: 1.5rem; flex: none;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--rule-strong);
}

/* --- Company profiles ------------------------------------------------------
   A company we can describe gets a card; a company we cannot stays a line in
   the register below. The two tiers are deliberately different weights — the
   contrast is the honest statement, not a layout accident. ------------------ */

.cocards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  /* Each card keeps its own height — stretching them to match opens a void
     under the shorter one, which reads as missing content rather than design. */
  align-items: start;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.cocard {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--accent, var(--navy));
  border-radius: 3px;
  padding: clamp(1.35rem, 2.4vw, 1.85rem);
}

.cocard__head { margin-bottom: 1.15rem; }
.cocard__mark { display: block; height: 2.5rem; margin-bottom: 1.1rem; }
.cocard__mark img { max-height: 100%; max-width: 11rem; width: auto; height: auto; object-fit: contain; object-position: left center; }

.cocard__ident { min-width: 0; }
.cocard__code {
  display: block;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em;
  color: var(--accent, var(--navy));
  margin-bottom: 0.3rem;
}
.cocard__name {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.2;
  margin: 0 0 0.3rem; text-wrap: balance;
}
.cocard__market {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
}

.cocard__what { margin: 0 0 1.25rem; color: var(--text-soft); font-size: 0.9375rem; line-height: 1.6; }

.cocard__sub {
  font-family: var(--mono); font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.6rem;
}
.cocard__services { margin-bottom: 1.25rem; }

.cocard__meta {
  display: grid; gap: 0.7rem;
  margin: 0 0 0.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}
.cocard__meta div { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.85rem; align-items: baseline; }
.cocard__meta dt {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted);
}
.cocard__meta dd { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--text-soft); }
.cocard__meta a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.cocard__meta a:hover { border-bottom-color: var(--navy); }

.cocard__go {
  margin-top: auto; padding-top: 1.25rem;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--navy); text-decoration: none;
}
.cocard__go:hover { color: var(--navy-hover); }
.cocard__go span { transition: transform var(--fast) var(--ease); display: inline-block; }
.cocard__go:hover span { transform: translateX(3px); }

/* The quieter half of the register, once profiles sit above it. */
.division__rest {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.9rem;
}

@media (max-width: 30rem) {
  .cocard__meta div { grid-template-columns: 1fr; gap: 0.15rem; }
}


/* A standing note about a division, where one is documented. */
.division__note {
  margin: 0.25rem 0 clamp(1.5rem, 2.5vw, 2rem);
  max-width: 52ch;
  font-size: 0.9375rem; line-height: 1.6;
  color: var(--text-soft);
  padding-left: 1rem;
  border-left: 2px solid var(--rule-strong);
}

/* --- The people behind a company ---------------------------------------- */
/* The base .people draws its hairlines by letting a container background show
   through 1px gaps — which turns unfilled cells in the last row into a grey
   slab. This variant rules each column at the top instead, the same device
   .nutrient and .charter-pair__item already use, so a short last row vanishes. */
.people--flow {
  background: transparent; border: 0;
  gap: clamp(1.25rem, 2.4vw, 2rem);
  align-items: start;
}
.people--flow .person {
  background: transparent; padding: 1.15rem 0 0;
  border-top: 2px solid var(--navy);
}
.people--flow .person__role { margin-bottom: 0.6rem; }

.person__note { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--text-soft); }

/* --- Mission / vision pairs on a company page --------------------------- */
.charter-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.charter-pair__item { border-top: 2px solid var(--navy); padding-top: 1.1rem; }
.charter-pair__label {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted); margin: 0 0 0.6rem;
}
.charter-pair__body { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--text); }

/* --- A company page --------------------------------------------------------
   The three companies that publish enough to carry one. --------------------- */

.copage__logo { height: clamp(2.75rem, 5vw, 3.75rem); width: auto; display: block; margin-bottom: 1.5rem; }
.copage__note {
  margin: 1.5rem 0 0; max-width: 60ch;
  font-size: 0.9375rem; line-height: 1.6; color: var(--text-muted);
  padding-left: 1rem; border-left: 2px solid var(--rule-strong);
}

.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: clamp(1.25rem, 2.6vw, 2rem); align-items: start; }
.offer { border-top: 2px solid var(--navy); padding-top: 1.15rem; }
.offer__name {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.25;
  margin: 0 0 0.6rem; text-wrap: balance;
}
/* A lone item fills the whole grid, so cap the line length rather than let
   it run to a 110-character measure. */
.offer__body { margin: 0; max-width: 48ch; font-size: 0.9375rem; line-height: 1.6; color: var(--text-soft); }
.offer__note {
  margin: 0.85rem 0 0; padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 0.6875rem; line-height: 1.5;
  letter-spacing: 0.06em; color: var(--text-muted);
}


/* A company with no photography of its own shows its mark on a plate — the
   same hatched tint the site uses for a missing portrait, so it reads as
   "no photograph" rather than as a design flourish. */
.feature__media--plate {
  background: repeating-linear-gradient(-45deg, rgba(20,46,128,0.045) 0 10px, transparent 10px 20px), var(--paper-alt);
  display: grid; place-items: center;
  border-bottom: 1px solid var(--rule);
}
.feature__plate { display: grid; place-items: center; width: 100%; height: 100%; padding: clamp(1.5rem, 4vw, 2.5rem); }
.feature__plate img {
  max-width: min(15rem, 72%); max-height: 62%;
  width: auto; height: auto; object-fit: contain;
  transition: transform 700ms var(--ease);
}
.feature:hover .feature__plate img { transform: scale(1.03); }

/* --- A therapy or an area of work, with the company's own photograph ----- */
.offer--shot { border-top: 0; padding-top: 0; }
.offer__shot {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover; margin-bottom: 1.1rem;
  border-top: 2px solid var(--navy);
  background: var(--paper-alt);
}

.works { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: clamp(1.25rem, 2.6vw, 2rem); align-items: start; }
.work__shot {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover; margin-bottom: 1rem;
  border-top: 2px solid var(--navy);
  background: var(--paper-alt);
}
.work__name {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.25;
  margin: 0 0 0.5rem; text-wrap: balance;
}
.work__body { margin: 0; max-width: 46ch; font-size: 0.9375rem; line-height: 1.6; color: var(--text-soft); }

/* --- A company's own photograph beside what it says about it ------------- */
.split--media { align-items: start; }
.shot { margin: 0; }
.shot img {
  display: block; width: 100%; height: auto;
  border-top: 2px solid var(--navy);
  background: var(--paper-alt);
}
.shot figcaption {
  margin-top: 0.75rem;
  font-family: var(--mono); font-size: 0.6875rem; line-height: 1.5;
  letter-spacing: 0.04em; color: var(--text-muted);
}
.shot__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.2;
  margin: 0 0 0.9rem; text-wrap: balance;
}

/* ============================================================================
   PHONES
   ----------------------------------------------------------------------------
   Everything below is a correction measured on a 390px device, not a guess:
   a seven-column table whose figures scrolled out of sight, links an adult
   thumb cannot reliably hit, and mono labels that carry whole sentences at
   11px. Layout is already fluid — these are the things fluidity cannot fix.
   ========================================================================== */

@media (max-width: 44rem) {

  /* --- The worked example --------------------------------------------------
     Seven columns need 44rem. On a phone the table scrolled and the revenue
     figures — the entire point of it — sat off-screen with no sign they were
     there. Each row becomes a card and each cell states its own column. */
  .table-scroll { overflow: visible; }
  .data-table { display: block; min-width: 0; }
  .data-table thead { display: none; }
  .data-table tbody,
  .data-table tr,
  .data-table th,
  .data-table td { display: block; width: 100%; }

  .data-table tr {
    background: var(--card);
    border: 1px solid var(--rule);
    border-top: 2px solid var(--ink);
    border-radius: 3px;
    padding: 1.1rem 1.15rem 0.85rem;
    margin-bottom: 1rem;
  }
  .data-table tbody th {
    padding: 0 0 0.8rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--rule);
    font-size: 1.15rem;
  }
  .data-table td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 0;
    text-align: right;
    white-space: normal;
  }
  .data-table td + td { border-top: 1px solid var(--rule); }
  .data-table td::before {
    content: attr(data-label);
    flex: none; max-width: 55%;
    font-family: var(--mono); font-size: 0.6875rem; line-height: 1.4;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-muted); text-align: left;
  }

  /* --- Thumbs --------------------------------------------------------------
     A link set in running text keeps its size; a link that sits alone on its
     own row is a target, and gets the height to be hit. */
  .nav-toggle { min-height: 2.75rem; padding-inline: 1rem; }

  .footer__list a,
  .footer__legal a,
  .footer__legal span {
    display: inline-flex; align-items: center;
    min-height: 2.75rem;
  }
  .footer__list li { margin-bottom: 0; }

  .spec__value a, a.spec__value,
  .contact-item__value, a.contact-item__value,
  .cocard__meta a,
  .cocard__go,
  .profile__link, .split__body .prose a {
    display: inline-flex; align-items: center;
    min-height: 2.75rem;
  }

  /* --- Mono at reading size ------------------------------------------------
     0.6875rem is right for a two-word label on a desktop. These carry whole
     sentences, so on a phone they come up to 0.75rem. */
  .offer__note,
  .work__body,
  .shot figcaption,
  figcaption,
  .eyebrow,
  .person__note,
  .footer__base { font-size: 0.75rem; }

  .cocard__meta dt,
  .spec__label { font-size: 0.6875rem; }
}

/* The marquee is wider than the screen on purpose; clip it at the viewport
   rather than relying on the band alone. */
.countries__viewport { overflow: hidden; }

/* These three sit behind more specific selectors defined earlier, so they need
   naming outright to come up to reading size on a phone. */
@media (max-width: 44rem) {
  .profile__portrait figcaption,
  .about__figure figcaption,
  .voice__facility figcaption { font-size: 0.75rem; }

  .tags li { font-size: 0.75rem; padding: 0.5rem 0.8rem; }

  /* a link that ends a block is a target, not running text */
  .profile__more, .area__more, .feature__body .btn { min-height: 2.75rem; }
  .profile__more { display: inline-flex; align-items: center; }
}

/* A section head can carry a link rather than a count; on a phone it needs
   the height of a target. */
@media (max-width: 44rem) {
  .section-head__count a { display: inline-flex; align-items: center; min-height: 2.75rem; }
}

/* --- The ITC catalogue on a phone ------------------------------------------
   Sixteen products in one column ran to thirteen thousand pixels of near
   identical vials. Two columns turns it back into something you can scan. */
@media (max-width: 44rem) {
  .catalogue { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.35rem 0.9rem; }
  .product__name { font-size: 0.9375rem; }
  .product__note { font-size: 0.75rem; line-height: 1.4; }
}


/* --- Form fields on a phone ------------------------------------------------
   Safari on iOS zooms the whole page when a field it focuses is set below
   16px, and does not zoom back out. 1rem is the price of not doing that. */
@media (max-width: 44rem) {
  .field input,
  .field textarea,
  .field select { font-size: 1rem; }
}