/* ==========================================================================
   Global Remote - speculative redesign
   Colours come from assets/css/tokens.css (resolve-palette, persona iris).
   Nothing here re-derives a colour by eye.
   ========================================================================== */

/* --------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, picture, svg { max-width: 100%; height: auto; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
a[href^="tel:"] { white-space: nowrap; }

/* --------------------------------------------------------------- scale */
:root {
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --maxw: 1200px;
  --maxw-text: 46rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 72px;
  --subnav-h: 44px;

  --space-xs: .5rem;
  --space-s: .875rem;
  --space-m: 1.5rem;
  --space-l: clamp(2.25rem, 4vw, 3.5rem);
  --space-xl: clamp(3.5rem, 7vw, 6.5rem);

  /* the one light surface on the site: white-background certificate and badge
     artwork we are not licensed to knock out. grey-50 is the resolver's own
     warm near-white; grey-900 / grey-600 are its inks. */
  --paper: var(--colour-grey-50);
  --paper-ink: var(--colour-grey-900);
  --paper-muted: var(--colour-grey-600);

  /* muted body text on the dark ground: the client's own second ink, 6.14:1 */
  --muted: var(--colour-brand-grey);
}

/* --------------------------------------------------------------- base */
body {
  margin: 0;
  background: var(--colour-bg);
  color: var(--colour-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6vw, 5rem); line-height: .98; letter-spacing: -0.022em; }
h2 { font-size: clamp(1.95rem, 3.4vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 1.9vw, 1.7rem); line-height: 1.08; }
h4 { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.15; }

/* heading-styled divs must not inherit the body line-height */
[class*="__title"], [class*="__name"], [class*="__label"],
[class*="__count"], [class*="__value"], [class*="__num"] { line-height: 1.25; }

p + p { margin-top: .9em; }

a:not([class]) {
  color: var(--colour-link-onDark);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}
a:not([class]):hover { color: var(--colour-primary-hover); }

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

::selection { background: var(--colour-primary); color: var(--colour-on-primary); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--colour-primary); color: var(--colour-on-primary);
  padding: .65rem 1rem; font-weight: 600;
}
.skip-link:focus { left: .5rem; top: .5rem; }

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

/* --------------------------------------------------------------- layout */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 68rem; }

.section { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.section--tight { padding-top: var(--space-l); padding-bottom: var(--space-l); }

.band--lift { background: var(--colour-surface); }
.band--alt { background: var(--colour-surface-alt); }
.band--paper { background: var(--paper); color: var(--paper-ink); }
.band--paper h2, .band--paper h3, .band--paper h4 { color: var(--paper-ink); }
/* The resolver's --colour-primary-dark (#ad6100) measures 4.490:1 on the warm off-white band,
   one hundredth under the 4.5 floor. Two percent darker clears it at 4.635:1 with enough
   headroom that a later tweak will not silently re-break it, and it is still the brand orange
   rather than a jump to brown. These are the three question headings on the page a
   prequalification questionnaire gets answered from. */
.band--paper .eyebrow { color: #9a5600; } /* 2026-10-17: the grey band is a touch darker than the old warm one, so the darker orange (5.2:1) */
.band--paper .muted, .band--paper .caption, .band--paper .headband__aside,
.band--paper .notice__figure, .band--paper figcaption { color: var(--paper-muted); }
.band--paper .rule { background: rgba(30,30,32,.16); }

.eyebrow {
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--colour-primary);
  margin-bottom: .9rem;
  display: block;
}
.eyebrow--grey { color: var(--muted); }

.lead {
  font-size: clamp(1.06rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  color: var(--colour-text);
  max-width: 42rem;
}
.muted { color: var(--muted); }
.caption {
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--muted);
  margin-top: .6rem;
}
.measure { max-width: var(--maxw-text); }

.rule { height: 1px; background: var(--colour-border); border: 0; margin: 0; }

/* ruled text link - the site's standard call to action */
.tlink {
  display: inline-flex; align-items: baseline; gap: .45rem;
  font-weight: 500;
  color: var(--colour-link-onDark);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: .12rem;
  white-space: nowrap;
}
.tlink:hover { color: var(--colour-primary-hover); }
.tlink__arrow { font-size: .9em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: .01em;
  padding: .62rem 1.25rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.btn--accent { background: var(--colour-primary); color: var(--colour-on-primary); }
.btn--accent:hover { background: var(--colour-primary-hover); color: var(--colour-on-primary); }

/* --------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 60;
  height: var(--header-h);
  background: var(--colour-bg);
  border-bottom: 1px solid var(--colour-border);
}
.site-header--over {
  background: linear-gradient(to bottom, rgba(10,10,12,.86), rgba(10,10,12,.42) 62%, rgba(10,10,12,0));
  border-bottom-color: transparent;
}
.site-header__inner {
  height: var(--header-h);
  display: flex; align-items: center;
  gap: clamp(.75rem, 2vw, 1.75rem);
  flex-wrap: nowrap;
}

.brand { display: flex; align-items: center; min-width: 0; flex: 0 1 auto; text-decoration: none; }
.brand__img { height: 28px; width: auto; }
@media (min-width: 768px) { .brand__img { height: 36px; } }

.nav { display: none; min-width: 0; }
.nav__list { display: flex; align-items: center; gap: clamp(.9rem, 1.9vw, 1.7rem); flex-wrap: nowrap; }
.nav__link {
  font-size: .9375rem;
  font-weight: 500;
  color: var(--colour-text);
  text-decoration: none;
  white-space: nowrap;
  padding-block: .35rem;
  border-bottom: 1px solid transparent;
}
.nav__link:hover { color: var(--colour-primary); }
.nav__link[aria-current] { color: var(--colour-primary); border-bottom-color: var(--colour-primary); }

.nav__cta { margin-left: auto; flex: 0 0 auto; }

.nav__toggle {
  margin-left: auto;
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
  background: transparent; border: 1px solid var(--colour-border); border-radius: 6px;
  cursor: pointer;
}
.nav__toggle .icon-bar { display: block; width: 18px; height: 2px; background: var(--colour-text); }

.drawer {
  position: fixed; inset: var(--header-h) 0 0 auto;
  width: min(22rem, 100%);
  background: var(--colour-surface);
  border-left: 1px solid var(--colour-border);
  padding: var(--space-m) var(--gutter) var(--space-l);
  overflow-y: auto;
  z-index: 70;
  transform: translateX(100%);
  transition: transform .22s ease;
}
.drawer[data-open="true"] { transform: translateX(0); }
.drawer__list { display: flex; flex-direction: column; gap: .25rem; }
.drawer__link {
  display: block;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -.01em;
  padding: .5rem 0;
  color: var(--colour-text);
  text-decoration: none;
  border-bottom: 1px solid var(--colour-border);
}
.drawer__link[aria-current] { color: var(--colour-primary); }
.drawer__sub { padding: .35rem 0 .6rem .9rem; display: flex; flex-direction: column; gap: .3rem; }
.drawer__sublink {
  font-size: .8125rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 600;
  color: var(--muted); text-decoration: none;
}
.drawer__sublink:hover { color: var(--colour-primary); }
.drawer__cta { margin-top: var(--space-m); display: flex; flex-direction: column; align-items: stretch; gap: .6rem; }
.drawer__cta .btn { width: 100%; }
.drawer__phone { font-size: .9375rem; color: var(--muted); white-space: nowrap; text-decoration: none; }

.overlay {
  position: fixed; inset: 0; background: rgba(10,10,12,.62);
  z-index: 65; opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.overlay[data-open="true"] { opacity: 1; pointer-events: auto; }

@media (min-width: 1080px) {
  .nav { display: block; }
  .nav .nav__toggle, .site-header .nav__toggle { display: none; }
  .drawer, .overlay { display: none; }
}

/* capability sub-nav strip - the three capability pages reach each other
   without a dropdown and without an eighth top-level slot */
.subnav {
  position: sticky; top: var(--header-h); z-index: 55;
  background: var(--colour-surface);
  border-bottom: 1px solid var(--colour-border);
}
.subnav__inner {
  height: var(--subnav-h);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.25rem);
  flex-wrap: nowrap;
}
.subnav__label {
  font-size: .625rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; flex: 0 0 auto;
  display: none;
}
.subnav__link {
  font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; white-space: nowrap;
  padding-block: .3rem; border-bottom: 1px solid transparent;
}
.subnav__link:hover { color: var(--colour-text); }
.subnav__link[aria-current] { color: var(--colour-primary); border-bottom-color: var(--colour-primary); }
@media (min-width: 640px) { .subnav__label { display: block; } }

/* --------------------------------------------------------------- heroes */
.hero {
  position: relative;
  margin-top: calc(var(--header-h) * -1);
  background: var(--colour-surface);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img, .hero__media picture { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-focus, 50% 50%); }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* Scrim strength is MEASURED, not eyeballed: .build/hero-contrast.js samples the
     real pixels behind every hero text element and .build/hero-contrast.py does the
     WCAG maths. The eyebrow is the binding element - it sits highest in the text
     block, where the pale canopy and pale concrete in these photographs show
     through. Orange there measured 3.0 to 3.9:1, and the fix was NOT to darken the
     photograph further (the photograph is the argument on this rail) but to make
     the hero eyebrow off-white, which measures 5.6 to 10.2:1 on this scrim. The
     orange stays where it is strong: the ruled CTA links, at 8:1 and better. */
  background:
    linear-gradient(to top, rgba(10,10,12,.94) 0%, rgba(10,10,12,.8) 38%, rgba(10,10,12,.38) 70%, rgba(10,10,12,.58) 100%),
    linear-gradient(to right, rgba(10,10,12,.82) 0%, rgba(10,10,12,.36) 52%, rgba(10,10,12,.1) 100%);
}
/* The mobile 4:5 re-crop puts the pale canopy directly behind the eyebrow, so the
   phone scrim is a touch stronger than the desktop one. Both are measured. */
@media (max-width: 719px) {
  .hero::after {
    background:
      linear-gradient(to top, rgba(10,10,12,.95) 0%, rgba(10,10,12,.84) 42%, rgba(10,10,12,.46) 74%, rgba(10,10,12,.62) 100%),
      linear-gradient(to right, rgba(10,10,12,.66) 0%, rgba(10,10,12,.42) 60%, rgba(10,10,12,.24) 100%);
  }
}
.hero .eyebrow { color: var(--colour-text); }
.hero__inner {
  position: relative; z-index: 2;
  padding-top: calc(var(--header-h) + clamp(4rem, 16vw, 10rem));
  padding-bottom: clamp(2.75rem, 7vw, 5rem);
  min-height: min(84vh, 43rem);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero__title { max-width: 20ch; }
.hero__lead { margin-top: clamp(1rem, 2vw, 1.5rem); max-width: 44ch; color: var(--colour-text); }
.hero__actions { margin-top: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: center; }
.hero__note {
  margin-top: clamp(1.75rem, 4vw, 3rem);
  font-size: .8125rem; color: var(--muted); max-width: 40ch;
}

/* split hero: ONE top-aligned two-column row */
.hero-split {
  padding-top: calc(var(--space-xl) + .5rem);
  padding-bottom: var(--space-xl);
  display: grid; gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: start;
}
.hero-split__figure { align-self: start; margin: 0; }
.hero-split__figure img { width: 100%; height: auto; }
@media (min-width: 880px) {
  .hero-split { grid-template-columns: 1.15fr .85fr; }
  .hero-split__figure { padding-top: clamp(1.5rem, 3vw, 2.75rem); }
}

/* contained lead band */
.leadband { margin: 0; }
/* Never paint a photograph wider than it actually is. Two of these bands have 1024px and 1060px
   sources in a 1120px container, so `width:100%` had the browser upscaling them past 1:1 and they
   rendered soft against crisp type.
   The fix is a ceiling, not a generative upscale. That was tried on band-about and REJECTED: at 2K
   the model rewrote the text on the technician's own helmet from "globalREMOTE" to
   "globalSERVICES" and shifted the framing - an invented brand on the client's safety equipment,
   which is a far worse defect than 9% of softness. Evidence kept at
   .build-screenshots/upscale-check-about.png.
   Capping at the intrinsic width centres the image inside the band and loses at most 48px a side,
   which reads as deliberate inset rather than as a mistake. */
.leadband img {
  width: 100%;
  max-width: max-content;
  height: auto;
  margin-inline: auto;
  display: block;
}

/* typographic page head */
.pagehead { padding-top: clamp(3rem, 7vw, 5.5rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.pagehead__title { max-width: 18ch; }
.pagehead__lead { margin-top: clamp(1rem, 2vw, 1.4rem); }

/* full-bleed band photograph */
.photoband { position: relative; }
.photoband img { width: 100%; height: clamp(15rem, 42vw, 30rem); object-fit: cover; }
.photoband__cap {
  padding-top: .7rem;
  font-size: .8125rem; color: var(--muted);
}

/* art-directed sources: the desktop crop is never letterboxed down to a strip */

/* --------------------------------------------------------------- grids */
.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1040px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* section head band: 7fr/5fr, top aligned - never bottom-aligned */
.headband { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 880px) { .headband { grid-template-columns: 7fr 5fr; } }
.headband__aside { align-self: start; color: var(--muted); }

/* --------------------------------------------------------------- credential tiles */
.cred { border-top: 1px solid var(--colour-border); padding-top: 1.1rem; }
.cred__title { font-family: var(--font-display); font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 500; letter-spacing: -.01em; }
.cred__body { margin-top: .55rem; font-size: .9375rem; color: var(--muted); }
.cred__body strong { color: var(--colour-text); font-weight: 500; }

/* --------------------------------------------------------------- capability / sector cards */
.card { display: flex; flex-direction: column; align-items: flex-start; gap: .95rem; }
.card__figure { margin: 0; width: 100%; align-self: stretch; }
.card__figure img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.card__title { font-family: var(--font-display); font-size: clamp(1.35rem, 2vw, 1.65rem); font-weight: 500; letter-spacing: -.012em; line-height: 1.05; }
.card__body { font-size: .9375rem; color: var(--muted); }
.card__body strong { color: var(--colour-text); font-weight: 500; }
.card__meta {
  font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--colour-primary);
  font-weight: 600;
}

/* alternating rows */
.rows { display: flex; flex-direction: column; gap: var(--space-xl); }
.row { display: grid; gap: clamp(1.5rem, 3.5vw, 3rem); align-items: start; }
@media (min-width: 880px) {
  .row { grid-template-columns: 5fr 7fr; }
  .row--flip { grid-template-columns: 7fr 5fr; }
  .row--flip .row__figure { order: 2; }
}
.row__figure { margin: 0; align-self: start; }
.row__figure img { width: 100%; height: auto; }
.row__body { align-self: start; }

/* --------------------------------------------------------------- standards list */
.stds { border-top: 1px solid var(--colour-border); }
.stds__row {
  display: grid; gap: .35rem 1.5rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--colour-border);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 780px) { .stds__row { grid-template-columns: 15rem 1fr; align-items: start; } }
/* nested inside a two-column row the term column has to give ground */
@media (min-width: 780px) { .row .stds__row, .hero-split .stds__row { grid-template-columns: 11rem 1fr; } }
.stds__term { font-weight: 500; color: var(--colour-text); }
.stds__def { color: var(--muted); font-size: .9375rem; }
.stds__def strong { color: var(--colour-text); font-weight: 500; }

/* --------------------------------------------------------------- case-study ledger */
.cases { display: flex; flex-direction: column; }
.case {
  display: grid; gap: 1.25rem;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
  border-top: 1px solid var(--colour-border);
  align-items: start;
}
@media (min-width: 880px) { .case { grid-template-columns: 11rem 1fr; } }
.case__figure { margin: 0; align-self: start; width: 100%; max-width: 11rem; }
.case__figure img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.case__title { font-family: var(--font-display); font-size: clamp(1.35rem, 2.1vw, 1.8rem); font-weight: 500; letter-spacing: -.014em; line-height: 1.05; }
.case__client { margin-top: .3rem; font-size: .8125rem; letter-spacing: .07em; text-transform: uppercase; color: var(--colour-primary); font-weight: 600; }
.case__lines { margin-top: 1.15rem; display: grid; gap: .5rem; }
.case__line { display: grid; gap: .1rem .9rem; align-items: baseline; }
@media (min-width: 620px) { .case__line { grid-template-columns: 9.5rem 1fr; } }
.case__label { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.case__value { font-size: .9375rem; color: var(--colour-text); }
.case__value--blank { display: block; }
.case__blank {
  display: inline-block; width: min(11rem, 60%); height: 1px;
  background: var(--colour-border); vertical-align: middle; margin-top: .8em;
}

/* --------------------------------------------------------------- named clients */
.clients { border-top: 1px solid var(--colour-border); }
.client {
  display: grid; gap: .3rem 1.5rem;
  padding: 1.05rem 0; border-bottom: 1px solid var(--colour-border);
}
@media (min-width: 780px) { .client { grid-template-columns: 17rem 1fr; align-items: start; } }
.client__name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; letter-spacing: -.01em; }
.client__scope { color: var(--muted); font-size: .9375rem; }

/* --------------------------------------------------------------- awards on paper */
.awards { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); }
@media (min-width: 900px) { .awards { grid-template-columns: repeat(3, 1fr); } }
.award { display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; margin: 0; }
.award__img { width: 100%; height: auto; align-self: stretch; border: 1px solid rgba(30,30,32,.14); }
.award__cap { font-size: .8125rem; line-height: 1.5; color: var(--paper-muted); }
.award__cap strong { color: var(--paper-ink); font-weight: 600; display: block; }

/* --------------------------------------------------------------- client logo strip */
.logowall {
  display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; justify-content: flex-start;
}
.logowall img {
  height: 26px; width: auto; opacity: .78;
  mix-blend-mode: multiply;
}

/* --------------------------------------------------------------- badges on paper */
.badgerow { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
@media (min-width: 880px) { .badgerow { grid-template-columns: 7fr 5fr; } }
.badgerow + .badgerow { margin-top: clamp(2.25rem, 5vw, 3.5rem); padding-top: clamp(2.25rem, 5vw, 3.5rem); border-top: 1px solid rgba(30,30,32,.16); }
.badgerow__marks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1.75rem; align-items: center; align-self: start; }
.badgerow__marks img { width: 100%; height: 116px; object-fit: contain; object-position: center; }
.badgerow__marks img.is-strip { grid-column: 1 / -1; height: 64px; }
.badgerow__q { font-family: var(--font-display); font-size: clamp(1.35rem, 2.1vw, 1.8rem); font-weight: 500; letter-spacing: -.014em; line-height: 1.06; }
.badgerow__body { margin-top: .7rem; font-size: .9375rem; color: var(--paper-muted); }
.badgerow__body strong { color: var(--paper-ink); font-weight: 600; }
.badgerow__list { margin-top: .9rem; display: grid; gap: .3rem; font-size: .875rem; color: var(--paper-muted); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- people */
.people { border-top: 1px solid var(--colour-border); }
.person {
  display: grid; gap: 1rem 1.5rem;
  padding: clamp(1.4rem, 3vw, 2rem) 0;
  border-bottom: 1px solid var(--colour-border);
  align-items: start;
}
@media (min-width: 780px) { .person { grid-template-columns: 7rem 1fr; } }
.person__portrait {
  width: 112px; height: 112px; border-radius: 2px;
  object-fit: cover; object-position: center 22%;
  align-self: start;
  filter: saturate(.92);
}
.person__portrait--none {
  width: 112px; height: 112px; border: 1px solid var(--colour-border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.6rem; color: var(--muted);
}
.person__name { font-family: var(--font-display); font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 500; letter-spacing: -.014em; line-height: 1.05; }
.person__role { font-size: .8125rem; letter-spacing: .07em; text-transform: uppercase; color: var(--colour-primary); font-weight: 600; margin-top: .25rem; }
.person__cred {
  margin-top: .8rem; padding: .55rem 0;
  border-top: 1px solid var(--colour-border); border-bottom: 1px solid var(--colour-border);
  font-size: .875rem; color: var(--colour-text); font-variant-numeric: tabular-nums;
}
.person__bio { margin-top: .85rem; font-size: .9375rem; color: var(--muted); max-width: 52rem; }

/* --------------------------------------------------------------- courses */
.courses { display: grid; gap: var(--space-l); }
.coursegroup__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 1.25rem; }
.coursegroup__body { margin-top: .6rem; color: var(--muted); font-size: .9375rem; max-width: 46rem; }
.coursegroup__list {
  margin-top: 1.15rem; border-top: 1px solid var(--colour-border);
  display: grid; gap: 0;
}
.coursegroup__item {
  display: grid; gap: .2rem 1.5rem;
  padding: .8rem 0; border-bottom: 1px solid var(--colour-border);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 700px) { .coursegroup__item { grid-template-columns: 16rem 1fr; align-items: baseline; } }
.coursegroup__code { font-weight: 500; }
.coursegroup__what { font-size: .9375rem; color: var(--muted); }

/* --------------------------------------------------------------- offices */
.offices { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 640px) { .offices { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .offices { grid-template-columns: repeat(3, 1fr); } }
.office { border-top: 1px solid var(--colour-border); padding-top: 1rem; font-style: normal; }
.office__country { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; letter-spacing: -.012em; }
.office__addr { margin-top: .5rem; font-size: .9375rem; color: var(--muted); line-height: 1.55; }
.office__tel { margin-top: .6rem; display: block; font-size: .9375rem; white-space: nowrap; text-decoration: none; color: var(--colour-link-onDark); border-bottom: 1px solid currentColor; width: fit-content; }
.office__mail { margin-top: .35rem; display: block; font-size: .9375rem; overflow-wrap: anywhere; text-decoration: none; color: var(--colour-link-onDark); border-bottom: 1px solid currentColor; width: fit-content; max-width: 100%; }
.office__fax { margin-top: .35rem; font-size: .8125rem; color: var(--muted); white-space: nowrap; }

/* regional schematic (hand-authored inline SVG) */
.sch { width: 100%; height: auto; }
/* The viewBox is never scaled UP: a schematic rendered wider than its own
   user-space frame pushes hand-placed labels past the frame. */
.sch-wide { display: none; max-width: 1120px; margin-inline: auto; }
.sch-tall { display: block; max-width: 560px; margin-inline: auto; }
@media (min-width: 780px) {
  .sch-wide { display: block; }
  .sch-tall { display: none; }
}
.sch text { font-family: var(--font-body); }

/* --------------------------------------------------------------- FAQ (generated) */
.se-faq { margin-top: var(--space-l); }
.se-faq__title { font-family: var(--font-display); font-size: clamp(1.95rem, 3.4vw, 3.1rem); font-weight: 500; letter-spacing: -.015em; }
.se-faq__item { border-bottom: 1px solid var(--colour-border); }
.se-faq__item:first-of-type { border-top: 1px solid var(--colour-border); margin-top: 1.5rem; }
.se-faq__q {
  cursor: pointer; list-style: none;
  padding: 1.05rem 2.25rem 1.05rem 0;
  position: relative;
  font-family: var(--font-display); font-size: clamp(1.15rem, 1.7vw, 1.45rem); font-weight: 500;
  letter-spacing: -.01em; line-height: 1.15;
}
.se-faq__q::-webkit-details-marker { display: none; }
.se-faq__q::after {
  content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  font-family: var(--font-body); font-weight: 400; color: var(--colour-primary); font-size: 1.35rem;
}
.se-faq__item[open] .se-faq__q::after { content: "\2212"; }
.se-faq__a { padding-bottom: 1.15rem; max-width: 46rem; }
.se-faq__a p { color: var(--muted); font-size: .9375rem; }
.band--paper .se-faq__item, .band--paper .se-faq__item:first-of-type { border-color: rgba(30,30,32,.16); }
.band--paper .se-faq__a p { color: var(--paper-muted); }

/* --------------------------------------------------------------- contact form (generated markup) */
.cf-section { margin-top: var(--space-m); }
.cf-form { max-width: 34rem; gap: 1.1rem; }
.cf-field { gap: .35rem; }
.cf-label {
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.cf-input, .cf-textarea {
  background: var(--colour-surface);
  border: 1px solid var(--colour-grey-600);
  border-radius: 2px;
  padding: .7rem .85rem;
  color: var(--colour-text);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color .16s ease;
}
.cf-input:hover, .cf-textarea:hover { border-color: var(--colour-grey-700); }
.cf-input:focus, .cf-textarea:focus { outline: none; border-color: var(--colour-primary); }
.cf-textarea { min-height: 8.5rem; }
.cf-submit {
  background: transparent;
  border: 1px solid var(--colour-primary);
  color: var(--colour-primary);
  border-radius: 999px;
  padding: .68rem 1.6rem;
  font-weight: 600; font-size: .9375rem; letter-spacing: .01em;
  white-space: nowrap;
}
.cf-submit:hover { background: var(--colour-primary); color: var(--colour-on-primary); }
.cf-status { margin-top: .9rem; font-size: .9375rem; color: var(--colour-text); max-width: 34rem; }
.cf-status-link { color: var(--colour-link-onDark); }
.cf-turnstile:not(:empty) { margin-block: .35rem; }

/* --------------------------------------------------------------- contact dock */
.contact-dock {
  position: fixed; right: clamp(.9rem, 3vw, 1.5rem);
  bottom: calc(clamp(.9rem, 3vw, 1.5rem) + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  display: flex; flex-direction: column; align-items: flex-end; gap: .6rem;
}
.dock-toggle { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.dock-actions {
  display: flex; flex-direction: column; align-items: flex-end; gap: .55rem;
  opacity: 0; transform: translateY(.5rem); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.dock-toggle:checked ~ .dock-actions { opacity: 1; transform: none; pointer-events: auto; }
.dock-action {
  width: 46px; height: 46px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--colour-surface-alt);
  border: 1px solid var(--colour-border);
  color: var(--colour-text);
  text-decoration: none;
}
.dock-action:hover { border-color: var(--colour-primary); color: var(--colour-primary); }
.dock-action svg { width: 20px; height: 20px; display: block; }
.dock-fab {
  width: 54px; height: 54px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--colour-primary); color: var(--colour-on-primary);
  cursor: pointer;
  box-shadow: 0 1px 1px rgba(10,10,12,.28), 0 3px 8px rgba(10,10,12,.28), 0 8px 22px rgba(10,10,12,.3);
}
.dock-fab svg { width: 24px; height: 24px; display: block; }
.dock-toggle:focus-visible ~ .dock-actions ~ .dock-fab { outline: 2px solid var(--colour-primary); outline-offset: 3px; }
@media print { .contact-dock { display: none; } }

/* --------------------------------------------------------------- footer */
.site-footer {
  background: var(--colour-surface);
  border-top: 1px solid var(--colour-border);
  padding-top: var(--space-l);
  padding-bottom: var(--space-m);
}
.footer__grid { display: grid; gap: var(--space-l); }
@media (min-width: 780px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.footer__brand img { height: 30px; width: auto; }
.footer__legal { font-size: .8125rem; color: var(--muted); max-width: 24rem; }
.footer__heading {
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: .85rem;
}
.footer__list { display: grid; gap: .45rem; }
.footer__list a { font-size: .9375rem; text-decoration: none; color: var(--colour-text); }
.footer__list a:hover { color: var(--colour-primary); }
.footer__tel { white-space: nowrap; }
.footer__bar {
  margin-top: var(--space-l); padding-top: 1.1rem;
  border-top: 1px solid var(--colour-border);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: center; justify-content: space-between;
  font-size: .8125rem; color: var(--muted);
}
.footer__credit { color: var(--muted); }
.footer__credit a {
  color: var(--muted); text-decoration: underline; text-underline-offset: .18em;
}
.footer__credit a:hover { color: var(--colour-primary); }

/* --------------------------------------------------------------- misc */
.notice {
  border-left: 2px solid var(--colour-primary);
  padding-left: clamp(1rem, 2vw, 1.5rem);
  max-width: 44rem;
}
.notice__figure {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.2vw, 4.25rem);
  font-weight: 500; letter-spacing: -.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.notice__body { margin-top: .85rem; color: var(--muted); }

.datedlist { border-top: 1px solid var(--colour-border); }
.dateditem {
  display: grid; gap: .25rem 1.5rem;
  padding: .95rem 0; border-bottom: 1px solid var(--colour-border);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 700px) { .dateditem { grid-template-columns: 9rem 1fr; align-items: baseline; } }
.dateditem__when { font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--colour-primary); font-weight: 600; }
.dateditem__what { font-size: .9375rem; color: var(--colour-text); }

.pill-list { display: flex; flex-wrap: wrap; gap: .5rem .6rem; }
.pill {
  font-size: .8125rem; letter-spacing: .02em;
  border: 1px solid var(--colour-border); border-radius: 999px;
  padding: .28rem .8rem; color: var(--muted); white-space: nowrap;
}

.linkrow { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Pull quote - a named endorsement in the speaker's own words.
   Restored at step 3 after the claim audit found all four of the source site's testimonials had
   been flattened into third-person statements of fact, and one dropped entirely. A real person
   saying a specific thing outranks us reporting that they said it.
   Deliberately quiet: a hairline and an accent rule, no card, no shadow, no quotation-mark
   ornament - the rail's only elevation cue is a 1px hairline. */
.pullquote {
  margin: 2.25rem 0 0;
  padding: 1.4rem 0 0 1.4rem;
  border-top: 1px solid var(--colour-border);
  border-left: 2px solid var(--colour-primary);
  max-width: 46rem;
}
.pullquote blockquote { margin: 0; }
.pullquote blockquote p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--colour-text);
}
.pullquote figcaption {
  margin-top: 0.85rem;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--colour-text-muted);
}
@media (max-width: 640px) {
  .pullquote { padding-left: 1rem; }
  .pullquote blockquote p { font-size: 1rem; }
}

/* --------------------------------------------------------------- press states
   Added at the step-4 polish pass. Hover and focus-visible were both covered; :active was not,
   which reads as a dead control on touch, where there is no hover to give feedback at all. A
   press is the only signal a phone user ever gets that a tap registered.
   Deliberately restrained, per the rail: a small translate and a slight dim, no scale bounce and
   no shadow (a shadow on a control is banned here - the one permitted shadow in the build is the
   soft drop under a resting photograph). Anything with a transition is guarded by the existing
   prefers-reduced-motion block. */
.btn:active,
.nav__cta:active,
.cf-submit:active,
.dock-action:active,
.dock-fab:active {
  transform: translateY(1px);
  filter: brightness(0.92);
}
.tlink:active {
  filter: brightness(0.88);
}
@media (prefers-reduced-motion: reduce) {
  .btn:active,
  .nav__cta:active,
  .cf-submit:active,
  .dock-action:active,
  .dock-fab:active {
    transform: none;
  }
}

/* ================================================================ visual-review fixes
   Six items from the own-eyes pass over the deployed site. The first two were real defects; the
   rest were judgment calls that came down the same way once measured. */

/* 1. Jump links dropped the reader into the middle of a sentence.
   The header and the capability strip both stick - 117px of chrome between them - and the anchor
   targets had no offset, so an in-page link on the three service pages landed with the section
   headline sliced through the letterforms on mobile. scroll-margin-top is the whole fix; it costs
   nothing and applies to keyboard focus and the back button as well as to clicks. */
:where(section[id], div[id], h2[id], h3[id]) { scroll-margin-top: 132px; }
@media (max-width: 767px) { :where(section[id], div[id], h2[id], h3[id]) { scroll-margin-top: 124px; } }

/* 2. The floating call button sat inside the mobile text column - measured at 48px of overlap,
   landing on an ISO standard number and a certification-hours figure. On a page whose whole value
   is precision, a button parked on a standard number is the worst possible place for it.
   A fixed control will always sit over SOMETHING, so the fix is to make it small enough and tight
   enough to the corner that it sits in the margin, and to keep the last block clear of it. */
@media (max-width: 767px) {
  .contact-dock { right: .5rem; bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)); }
  .dock-fab { width: 46px; height: 46px; }
  .dock-fab svg { width: 20px; height: 20px; }
  .dock-action { width: 42px; height: 42px; }
  /* Nothing important comes to rest underneath it. */
  main > section:last-of-type { padding-bottom: calc(var(--space-l, 3rem) + 64px); }
}

/* 3. Two Contact buttons were on screen at once with the drawer open: the header pill stayed
   visible behind the scrim while the drawer carried its own full-width Contact. One ask, one
   button. The header pill hides while the drawer is open. */
/* The drawer is JS-driven (data-open on #nav-drawer), not a checkbox - the first version of
   this rule keyed on a :checked pseudo that never matched, which the measurement caught. */
body:has(#nav-drawer[data-open="true"]) .nav__cta { visibility: hidden; }

/* 4. The drawer's three service links measured 21px tall - the smallest targets in the panel, and
   the most important destinations on the site. Everything around them was already comfortable
   (top-level 55px, burger 44px), so these three were the outlier. */
.drawer__sublink {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* 5. "Capability" sat in the sub-nav row at the same size, tracking and colour as the three links
   beside it, so it read as a fourth clickable item. It is a label. Quieter, and set apart. */
.subnav__label {
  color: var(--colour-text-muted);
  opacity: .75;
  padding-right: .35rem;
  border-right: 1px solid var(--colour-border);
}

/* 7. The contact form began about 15px below the closing paragraph where every other block on the
   page gets 40 to 60px, so it read as a continuation of the sentence rather than a new thing to
   do. */
.cf-form { margin-top: var(--space-m, 2rem); }

/* ================================================================ slop-gate fixes
   Three findings from the design-director read. Both signature moves shipped; these are the
   places where the LAYOUT was doing less thinking than the copy. */

/* A. sectors.html ran five consecutive zigzag rows - image left, right, left, right, left. The
   anti-tells rubric caps consecutive zigzags at two and calls the third a tell, and the rhythm
   broke only at geotechnical, which broke by accident (no photograph exists) rather than by
   decision. A reader learns the page's shape in eight seconds and stops looking.

   First attempt was a full-width photograph on every third row. The live check killed it: every
   sector photograph is 900 to 928px and the full-width band is 1120px, so it painted the marine
   photo past its own source. Same mistake as the case-study widening, one row over.

   So the metronome is broken by WEIGHT rather than by width. Every third row inverts the column
   ratio, giving the photograph the larger share (about 653px, comfortably inside a 900px source)
   and the text the smaller. The page stops alternating on a fixed beat, and nothing is ever
   painted wider than it is. */
@media (min-width: 880px) {
  .rows > .row:nth-child(3n) { grid-template-columns: 7fr 5fr; }
  .rows > .row:nth-child(3n) .row__figure { order: 0; }
  .rows > .row:nth-child(3n) .row__body { order: 1; }
}

/* B. The split section header appears 31 times across 11 pages, and in 15 of them the right-hand
   explainer starts about 32px ABOVE the headline - it was aligned to the eyebrow, not to the
   headline - which is exactly the rubric's "floating, unaligned top-right explainer" and it
   manufactures dead air on every page that uses it.
   Aligning the aside to the headline's first line closes the gap and makes the pairing read as
   deliberate rather than as two things that happen to sit near each other. */
@media (min-width: 880px) {
  .headband > *:first-child { grid-row: 1; }
  .headband__aside {
    grid-row: 1;
    grid-column: 2;
    align-self: start;
    padding-top: 0.35rem;
  }
  /* Where the left column leads with an eyebrow, push the aside down by exactly the eyebrow's own
     height so the two first lines sit on the same baseline. */
  .headband:has(> div > .eyebrow) .headband__aside,
  .headband:has(> .eyebrow) .headband__aside { padding-top: 1.85rem; }
}

/* C. REVERTED, and the reason is worth keeping.
   The design-director read called the case-study photographs "the tiny letterboxed thumbnail the
   Curator rail explicitly bans", on the page whose whole argument is proof, and said their sources
   were 900 to 1024px so the thumbnail was a choice rather than a limit.
   Measured, the prepared files are 347x260 (five of them) and 400x300 (one). At 176px painted that
   is a ratio of 1.97 - essentially exact 2x retina. The small size was not timidity; it was the
   honest size for the pixels that exist.
   Widening them to 20rem pushed five of six PAST their own source and the live check caught it
   immediately. A crisp small photograph beats a soft large one, and it beats it most on a page
   arguing precision. So the original sizing stands, and "higher-resolution project photographs"
   goes to the client instead. */

/* ================================================================ white ground (change 2026-10-16)
   The owner asked for the site to stay white based, like her existing site. Tokens carry most of
   it (tokens.css, last block); these are the places the dark build had assumed a dark ground. */
:root { --muted: var(--colour-text-muted); }

/* The header is solid white everywhere, with the photograph starting below it, as on the existing
   site. The over-the-hero state is kept as a class (site.js still toggles it) but no longer differs. */
.site-header--over { background: var(--colour-bg); border-bottom-color: var(--colour-border); }
.hero { margin-top: 0; }
.hero__inner { padding-top: clamp(4rem, 16vw, 10rem); }

/* Photograph heroes keep their measured dark scrim, so their words stay light. */
.hero, .hero__title, .hero__lead, .hero .eyebrow { color: var(--colour-on-dark); }
.hero__note { color: #d4d4d7; }
.hero .tlink { color: var(--colour-primary); }
.hero .tlink:hover { color: var(--colour-primary-active); }

/* Small orange labels read at 2.3:1 on white in the brand orange; the darker orange clears 5:1. */
.eyebrow, .card__meta, .case__client, .person__role, .dateditem__when { color: var(--colour-link-onDark); }
.subnav__link[aria-current], .nav__link[aria-current], .nav__link:hover,
.drawer__link[aria-current], .drawer__sublink:hover, .footer__list a:hover { color: var(--colour-link-onDark); }
.cf-submit { border-color: var(--colour-link-onDark); color: var(--colour-link-onDark); }
.cf-input, .cf-textarea { background: var(--colour-bg); border-color: #a6a6aa; }
.cf-input:hover, .cf-textarea:hover { border-color: var(--colour-grey-600); }
.badgerow + .badgerow { border-top-color: var(--colour-border); }
.award__img { border-color: var(--colour-border); }
.overlay { background: rgba(29,29,31,.38); }

/* Sub-heading strips with more links than a phone is wide (Sectors, Training) scroll sideways
   rather than wrap, so the strip keeps the one height the sticky offsets below are measured on. */
.subnav--scroll .subnav__inner { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.subnav--scroll .subnav__inner::-webkit-scrollbar { display: none; }
.subnav--scroll .subnav__link { flex: 0 0 auto; }
.subnav--scroll .subnav__link:last-child { padding-right: var(--gutter); }
/* The sector rows are articles; their jump targets clear the header and the strip like the rest. */
:where(article[id]) { scroll-margin-top: 132px; }
@media (max-width: 767px) { :where(article[id]) { scroll-margin-top: 124px; } }

/* Training: one block per training, in her order, each with its own schedule. */
.courses > .coursegroup + .coursegroup { padding-top: var(--space-l); border-top: 2px solid var(--colour-primary); }
.coursegroup__subhead {
  margin-top: var(--space-m); font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem); letter-spacing: -.01em; line-height: 1.15;
}
.coursegroup__more { margin-top: var(--space-m); max-width: 46rem; }
.coursegroup__more .coursegroup__subhead { margin-top: 0; }
.coursegroup__more p { margin-top: .6rem; color: var(--muted); font-size: .9375rem; }
.coursegroup__figure { margin: 1.25rem 0 0; max-width: 34rem; }
.coursegroup__figure img { width: 100%; height: auto; }
.schedule {
  margin-top: var(--space-m); padding: 1.1rem 1.25rem;
  background: var(--colour-bg); border: 1px solid var(--colour-border); border-left: 3px solid var(--colour-primary);
  max-width: 46rem;
}
.schedule__title {
  font-family: var(--font-body); font-size: .75rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--colour-link-onDark);
}
.schedule__body { margin: .45rem 0 .8rem; font-size: .9375rem; color: var(--colour-text); }

/* Home: her tagline, and how the company started. */
.hero .hero__tagline { font-size: clamp(.75rem, 1.1vw, .875rem); letter-spacing: .08em; max-width: 44ch; line-height: 1.5; }
.story__figures {
  margin-top: var(--space-l); display: grid; gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .story__figures { grid-template-columns: repeat(3, 1fr); } }
.story__fig { border-top: 2px solid var(--colour-primary); padding-top: 1rem; display: flex; flex-direction: column; gap: .35rem; }
.story__num {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -.02em; line-height: 1;
  font-size: clamp(2.6rem, 5vw, 4rem); color: var(--colour-text);
}
.story__what { font-size: .9375rem; color: var(--muted); }

/* About: one company block where the group of three was. */
.cred--solo { max-width: 46rem; }
.cred--solo .cred__title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.cred--solo .cred__body { font-size: 1rem; }

/* Accreditations: listed country by country, as on her existing site. */
.countrynav {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(2rem, 4vw, 3rem);
}
.countrynav a {
  font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--colour-text);
  border: 1px solid var(--colour-border); border-radius: 999px; padding: .5rem 1rem; background: var(--colour-bg);
}
.countrynav a:hover { border-color: var(--colour-primary); color: var(--colour-link-onDark); }
.badgerow__marks img.is-wide { grid-column: 1 / -1; }
.certdoc { margin: 1.5rem 0 0; display: grid; gap: 1rem 1.25rem; align-items: start; }
@media (min-width: 560px) { .certdoc { grid-template-columns: 9rem 1fr; } }
.certdoc__link { display: block; width: 9rem; border: 1px solid var(--colour-border); }
.certdoc__link img { width: 100%; height: auto; }
.certdoc__cap { font-size: .875rem; color: var(--paper-muted); display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.certdoc__cap strong { color: var(--paper-ink); font-weight: 600; }

/* ================================================================ heroes: words clear of the people
   (change 2026-10-16) The photo heroes set their words over the technicians' heads. Fixed per photo,
   never by darkening or hiding the photograph:
   - phones: the words sit under the photo, and the 4:5 phone photo shows whole, uncropped;
   - home: the words move to the right on wider screens, over the empty canopy of her own photo;
   - rope access: her photo extended to the left with more of the same wall (outpainted, her own
     pixels pasted back over the photographed area), so the people sit right of the words;
   - training: the hall is full of people edge to edge, so the words sit under the photo at every width. */
.hero--text-right::after {
  background:
    linear-gradient(to top, rgba(10,10,12,.9) 0%, rgba(10,10,12,.6) 38%, rgba(10,10,12,.25) 70%, rgba(10,10,12,.4) 100%),
    linear-gradient(to left, rgba(10,10,12,.82) 0%, rgba(10,10,12,.4) 50%, rgba(10,10,12,0) 75%);
}
@media (min-width: 720px) {
  .hero--text-right .hero__inner { padding-left: calc(var(--gutter) + min(48%, 36rem)); }
}

.hero--stacked { background: var(--colour-bg); }
.hero--stacked::after { display: none; }
.hero--stacked .hero__media { position: relative; inset: auto; }
.hero--stacked .hero__media img, .hero--stacked .hero__media picture { height: auto; }
.hero--stacked .hero__inner { min-height: 0; padding-top: var(--space-l); padding-bottom: var(--space-l); }
.hero--stacked, .hero--stacked .hero__title, .hero--stacked .hero__lead { color: var(--colour-text); }
.hero--stacked .eyebrow { color: var(--colour-link-onDark); }
.hero--stacked .hero__note { color: var(--muted); }
.hero--stacked .tlink { color: var(--colour-link-onDark); }
.hero--stacked .tlink:hover { color: var(--colour-primary-hover); }

@media (max-width: 719px) {
  .hero { background: var(--colour-bg); }
  .hero::after { display: none; }
  .hero__media { position: relative; inset: auto; }
  .hero__media img, .hero__media picture { height: auto; }
  .hero__inner { min-height: 0; padding-top: var(--space-l); padding-bottom: var(--space-l); }
  .hero, .hero__title, .hero__lead { color: var(--colour-text); }
  .hero .eyebrow { color: var(--colour-link-onDark); }
  .hero__note { color: var(--muted); }
  .hero .tlink { color: var(--colour-link-onDark); }
  .hero .tlink:hover { color: var(--colour-primary-hover); }
}

/* ---------------------------------------------------------------------------
   Sub-heading strips you can read (change 2026-10-17): "The sub headings under each
   main headings that's listed in a beige banner and grey font is almost invisible.
   that needs to be made bigger, brighter and bolder and legible." The strip was 11px
   spaced capitals in the logo grey on the grey band, about 2.9:1. Now: 15px (14px on
   phones), semi-bold, near-black ink on the grey band (15.1:1), the page you are on in
   the darker orange (5.0:1) with a 3px underline, and a taller band with a darker
   rule so it reads as its own bar under the menu. The same strip on every page.
   --------------------------------------------------------------------------- */
:root { --subnav-h: 54px; }
.subnav { background: var(--colour-surface); border-top: 1px solid var(--colour-border); border-bottom: 1px solid var(--colour-grey-200); }
.subnav__inner { gap: clamp(1.25rem, 3vw, 2.5rem); }
.subnav__link {
  font-size: .9375rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--colour-text); padding-block: .45rem; border-bottom: 3px solid transparent;
}
.subnav__link:hover { color: var(--colour-link-onDark); border-bottom-color: var(--colour-grey-300); }
.subnav__link[aria-current] { color: var(--colour-link-onDark); border-bottom-color: var(--colour-primary); }
.subnav__label {
  font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--colour-link-onDark); opacity: 1; padding-right: .9rem; border-right: 1px solid var(--colour-grey-200);
}
@media (max-width: 639px) { .subnav__link { font-size: .875rem; } }
:where(section[id], div[id], h2[id], h3[id], article[id]) { scroll-margin-top: 140px; }

/* ---------------------------------------------------------------------------
   Home: a moving banner of her own photographs (change 2026-10-17): "can you use
   more images from our site and make a dynamic banner in the landing page rather
   than one static image?" Her photographs fade one into the next, the full width of
   the screen. The words sit below them on white at every width, never on top, so no
   slide can put a headline over a person. Each slide carries its own
   focal point (--focus wide, --focus-tall on phones). Reduced motion: no autoplay.
   --------------------------------------------------------------------------- */
.homehero { background: var(--colour-bg); }
/* The photographs lead (her ask, 4 Nov 2026): edge to edge under the menu, the words beneath. */
.slides { position: relative; overflow: hidden; background: var(--colour-surface); aspect-ratio: 3 / 4; }
.slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.1s ease; }
.slide.is-active { opacity: 1; }
.slide picture, .slide img { display: block; width: 100%; height: 100%; }
.slide img { object-fit: cover; object-position: var(--focus-tall, 50% 50%); }
/* Dots only, kept quiet (her ask, 18 Oct 2026): no pill behind them, small and soft, centred at the foot. */
.slides__controls {
  position: absolute; left: 50%; bottom: .4rem; z-index: 2; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0;
}
.slides__dot {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  width: 22px; height: 22px; display: grid; place-items: center; padding: 0;
}
.slides__dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); box-shadow: 0 0 2px rgba(0,0,0,.25); transition: background .2s; }
.slides__dot[aria-current]::before { background: rgba(255,255,255,.95); }
.slides__dot:hover::before { background: #fff; }
.slides__dot:focus-visible { outline: 2px solid var(--colour-primary); outline-offset: -3px; border-radius: 50%; }
.homehero .eyebrow { color: var(--colour-link-onDark); }
.homehero__words { padding-top: clamp(1.25rem, 2.2vw, 1.75rem); padding-bottom: var(--space-xl); }
.homehero__tagline { display: block; font-size: clamp(.75rem, 1.1vw, .875rem); letter-spacing: .08em; line-height: 1.5; }
.homehero__band { margin-top: .75rem; }
.homehero__title { font-size: clamp(2.4rem, 7vw, 3.75rem); max-width: 16ch; color: var(--colour-text); }
.homehero__lead { max-width: 58ch; color: var(--colour-text); }
.homehero__actions { margin-top: clamp(1.4rem, 3vw, 2rem); display: flex; flex-wrap: wrap; gap: 1.1rem 2rem; align-items: center; }
.homehero__note { margin-top: clamp(1rem, 2vw, 1.5rem); font-size: .8125rem; color: var(--colour-text-muted); }
@media (min-width: 720px) {
  /* The frame fills the screen under the menu, leaving the first line of words showing. Held between
     1.6:1 and 2.17:1 whatever the window, because every slide is framed for that range: a new slide
     needs a subject that survives it, and a --focus of its own. */
  .slides { aspect-ratio: auto; height: clamp(46vw, calc(100vh - var(--header-h) - 4.5rem), 62.5vw); height: clamp(46vw, calc(100svh - var(--header-h) - 4.5rem), 62.5vw); }
  .slide img { object-position: var(--focus, 50% 50%); }
}
@media (min-width: 1024px) {
  .homehero__title { font-size: clamp(2.6rem, 3.9vw, 3.75rem); }
}
@media (prefers-reduced-motion: reduce) { .slide { transition: none; } }

/* Home: her service photographs from the old site, shown no wider than their own pixels allow. */
.svcgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.75rem, 2vw, 1.25rem); }
@media (min-width: 720px) { .svcgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .svcgrid { grid-template-columns: repeat(4, 1fr); } }
.svc { display: flex; flex-direction: column; gap: .6rem; text-decoration: none; color: var(--colour-text); }
.svc img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: opacity .2s; }
.svc__title { font-weight: 600; font-size: .9375rem; line-height: 1.3; }
.svc:hover .svc__title { color: var(--colour-link-onDark); }
.svc:hover img { opacity: .88; }

/* Home: her client marks, in a grid of equal cells so the small ones read. */
.clientwall { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--colour-border); border-left: 1px solid var(--colour-border); }
@media (min-width: 720px) { .clientwall { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1024px) { .clientwall { grid-template-columns: repeat(8, 1fr); } }
.clientwall img { width: 100%; height: 72px; object-fit: contain; padding: .9rem 1rem; background: #fff; box-sizing: border-box; border-right: 1px solid var(--colour-border); border-bottom: 1px solid var(--colour-border); }

/* ================================================================ light theme only (change 2026-10-17)
   The owner asked: "As for the website colors, use light theme and not a dark theme." Every page is
   light, and says so, so a phone or browser set to dark mode shows the same white site rather than
   repainting it dark (the matching <meta name="color-scheme" content="light only"> is in every page's
   head). Every photo banner now sets its words on white, beside the photo (home) or beneath it (Training,
   Rope access); no page has a heading on a darkened photo. */
:root { color-scheme: light only; }
html, body { background-color: var(--colour-bg); color: var(--colour-text); }

/* Resources: the one top-menu item with pages under it (her old site's "Media", 18 Oct 2026).
   Opens on hover and on keyboard focus; the word itself goes to Case studies. */
.nav__item--menu { position: relative; }
.nav__item--menu > .nav__link::after {
  content: ""; display: inline-block; width: .38em; height: .38em; margin-left: .4em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-.2em) rotate(45deg);
}
.nav__menu {
  position: absolute; top: 100%; left: -1rem; z-index: 80; min-width: 12rem;
  margin-top: .5rem; padding: .45rem 0; list-style: none;
  background: var(--colour-bg); border: 1px solid var(--colour-border); border-radius: 6px;
  box-shadow: 0 10px 28px rgba(20,20,22,.12);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; }
.nav__item--menu:hover .nav__menu, .nav__item--menu:focus-within .nav__menu {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.nav__menulink {
  display: block; padding: .55rem 1rem; font-size: .9375rem; font-weight: 500;
  color: var(--colour-text); text-decoration: none; white-space: nowrap;
}
.nav__menulink:hover, .nav__menulink:focus-visible { color: var(--colour-link-onDark); background: var(--colour-surface); }
.nav__menulink[aria-current] { color: var(--colour-link-onDark); }
@media (prefers-reduced-motion: reduce) { .nav__menu { transition: none; } }

/* Resources pages (18 Oct 2026): her old site's case studies, brochure and gallery. */
.cslist { margin-top: var(--space-l); display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; list-style: none; padding: 0; }
.cslist a { font-weight: 600; text-decoration: none; color: var(--colour-text); border-bottom: 1px solid var(--colour-grey-300, #c8c8cc); padding-bottom: .1rem; }
.cslist a:hover { color: var(--colour-link-onDark); border-bottom-color: var(--colour-primary); }
.cs { scroll-margin-top: calc(var(--header-h) + var(--subnav-h, 3rem)); }
.cs__top { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.cs__figure { margin: 0; max-width: 40rem; }
.cs__figure img { display: block; width: 100%; height: auto; }
.cs__title { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.csfacts { margin: 1.25rem 0 0; display: grid; gap: .55rem; }
.csfacts__row { display: grid; grid-template-columns: 6.5rem 1fr; gap: .9rem; align-items: baseline; padding-bottom: .55rem; border-bottom: 1px solid var(--colour-border); }
.csfacts dt { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.csfacts dd { margin: 0; font-size: .9375rem; color: var(--colour-text); }
.cs__pdf { display: inline-flex; margin-top: 1.25rem; }
.cs__body { margin-top: clamp(1.75rem, 4vw, 3rem); display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.cs__text { max-width: 68ch; }
.cs__text p, .cs__text ul { margin-top: .85rem; }
.cs__text h3 { margin-top: 1.75rem; font-size: clamp(1.15rem, 1.6vw, 1.35rem); }
.cs__list { list-style: disc; padding-left: 1.15rem; display: grid; gap: .35rem; }
.cs__quotes { display: grid; gap: 1rem; }
/* chg-2964ddbf: the ammonia methodology list on maintenance.html runs in two columns where there is room */
.cs__list--cols { display: block; columns: 2 14rem; column-gap: 2rem; list-style: none; padding-left: 0; margin-top: .9rem; }
.cs__list--cols li { break-inside: avoid; margin-bottom: .35rem; position: relative; padding-left: 1.1rem; }
.cs__list--cols li::before { content: ""; position: absolute; left: 0; top: .7em; width: .4rem; height: .4rem; background: var(--colour-primary); }
.csquote { margin: 0; padding: 1.1rem 1.25rem; background: var(--colour-bg); border-left: 3px solid var(--colour-primary); }
.cs:not(.band--lift) .csquote { background: var(--colour-surface); }
.csquote__kind { display: block; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.csquote blockquote { margin: .5rem 0 0; font-size: 1rem; line-height: 1.55; color: var(--colour-text); }
.csquote figcaption { margin-top: .6rem; font-size: .8125rem; color: var(--muted); }
@media (min-width: 880px) {
  .cs__top { grid-template-columns: 6fr 5fr; }
  .cs__body { grid-template-columns: 7fr 4fr; }
}
.brochure__actions { margin-top: clamp(1.5rem, 3vw, 2rem); display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }

.pagehead--short { padding-bottom: 0; }
.gallery { padding-top: clamp(1.25rem, 3vw, 2rem); }
.galfilter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.galfilter__btn {
  appearance: none; cursor: pointer; font: inherit; font-size: .875rem; font-weight: 600;
  padding: .5rem .95rem; border-radius: 999px; min-height: 40px;
  border: 1px solid var(--colour-border); background: var(--colour-bg); color: var(--colour-text);
}
.galfilter__btn:hover { border-color: var(--colour-primary); }
.galfilter__btn[aria-pressed="true"] { background: var(--colour-primary); border-color: var(--colour-primary); color: var(--colour-on-primary); }
.galfilter__btn:focus-visible { outline: 2px solid var(--colour-primary); outline-offset: 2px; }
/* Each photo at its own shape: columns, never a crop. */
.galgrid { columns: 2 10rem; column-gap: clamp(.6rem, 1.5vw, 1rem); }
@media (min-width: 720px) { .galgrid { columns: 3; } }
@media (min-width: 1080px) { .galgrid { columns: 4; } }
.galitem { display: block; break-inside: avoid; margin-bottom: clamp(.6rem, 1.5vw, 1rem); background: var(--colour-surface); cursor: zoom-in; }
.galitem[hidden] { display: none; }
.galitem img { display: block; width: 100%; height: auto; transition: opacity .2s; }
.galitem:hover img { opacity: .88; }
.galitem:focus-visible { outline: 2px solid var(--colour-primary); outline-offset: 2px; }
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(12,12,14,.9); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__img { max-width: min(92vw, 1200px); max-height: 86vh; width: auto; height: auto; display: block; }
.lightbox__btn {
  position: fixed; appearance: none; border: 0; cursor: pointer; color: #fff; background: rgba(0,0,0,.35);
  width: 48px; height: 48px; border-radius: 50%; font-size: 2rem; line-height: 1; display: grid; place-items: center;
}
.lightbox__btn:hover { background: rgba(0,0,0,.6); }
.lightbox__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev { left: .75rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: .75rem; top: 50%; transform: translateY(-50%); }

/* ---------------------------------------------------------------------------
   Change 2026-10-21. 1) No brown: the labels above headlines are the brighter orange
   (tokens.css) and a size up, so they read as the sub headings they are. 2) The page top:
   "The spacing between the small font text on the right side and the photograph looks
   quite odd." The short text sat at the top right beside a three-line headline, leaving a
   hole under it and then a long drop to the photo. Now it sits on the headline's last
   line, larger and darker, directly above the photo, and the photo starts on the same
   left edge as the headline.
   --------------------------------------------------------------------------- */
.band--paper .eyebrow { color: var(--colour-link-onDark); }
.eyebrow { font-size: .8125rem; font-weight: 700; letter-spacing: .09em; }
@media (min-width: 880px) {
  .headband:has(> div > .eyebrow) .headband__aside,
  .headband:has(> .eyebrow) .headband__aside { padding-top: 2.15rem; }
}
.headband__aside { color: var(--colour-text-muted); }
.pagehead .headband__aside { font-size: 1.0625rem; line-height: 1.6; }
.pagehead + .section--tight { padding-top: 0; }
.pagehead { padding-bottom: var(--space-l); }
@media (min-width: 880px) {
  .pagehead .headband { align-items: end; }
  .pagehead .headband__aside { align-self: end; padding-top: 0; padding-bottom: .5rem; }
}
.pagehead + .section--tight .leadband img { margin-inline: 0; }
/* The orange button keeps its dark label on hover: a lighter orange, not the ink colour. */
.btn--accent:hover { background: #ffa553; color: var(--colour-on-primary); }

/* ================================================================ history, reach, services (change 2026-10-21)
   Her request: present the company's history, growth, geographical expansion, services
   and accreditations "in a more modern, visually appealing, and professional manner",
   through timelines, maps, icons and structured layouts rather than blocks of text. */

/* About: the company statement under the Global Remote heading. */
.pioneer { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 880px) { .pioneer { grid-template-columns: 7fr 5fr; align-items: end; } }
.pioneer__statement {
  margin-top: .85rem; max-width: 24ch;
  font-family: var(--font-display); font-weight: 500; letter-spacing: -.02em; line-height: 1.05;
  font-size: clamp(1.9rem, 3.6vw, 3rem); color: var(--colour-text);
}
.pioneer__statement em { font-style: normal; color: var(--colour-link-onDark); }
.pioneer__body { margin-top: 1.15rem; max-width: 40rem; color: var(--colour-text-muted); }
.pioneer__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.pioneer__fact { border-top: 2px solid var(--colour-primary); padding-top: .85rem; display: flex; flex-direction: column; gap: .3rem; }
.pioneer__num { font-family: var(--font-display); font-weight: 500; letter-spacing: -.02em; line-height: 1; font-size: clamp(1.7rem, 2.6vw, 2.2rem); color: var(--colour-text); }
.pioneer__what { font-size: .9375rem; color: var(--colour-text-muted); }

/* Line icons: inspection, rope access, training, NDT, tanks, subsea, marine, wind. */
.gicon { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* About: Our journey, one milestone per year, joined by a line. */
.journey { list-style: none; margin: var(--space-l) 0 0; padding: 0; position: relative; display: grid; }
.journey::before { content: ""; position: absolute; left: 1.5rem; top: 1rem; bottom: 1rem; width: 2px; margin-left: -1px; background: var(--colour-grey-200); }
.journey__item { position: relative; display: grid; grid-template-columns: 3rem 1fr; column-gap: 1.1rem; padding-bottom: 1.9rem; }
.journey__item:last-child { padding-bottom: 0; }
.journey__icons { display: flex; flex-direction: column; gap: .45rem; position: relative; z-index: 1; }
.journey__icon {
  width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 2px solid var(--colour-primary); color: var(--colour-text);
}
.journey__item--now .journey__icon { background: var(--colour-primary); color: var(--colour-on-primary); }
.journey__year { display: block; font-family: var(--font-display); font-weight: 500; letter-spacing: -.02em; line-height: 1; font-size: clamp(2rem, 3vw, 2.6rem); color: var(--colour-text); padding-top: .35rem; }
.journey__list { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .55rem; }
.journey__list li { font-size: .9375rem; line-height: 1.45; color: var(--colour-text); }
.journey__list li + li { border-top: 1px solid var(--colour-border); padding-top: .55rem; }
@media (min-width: 900px) {
  .journey { grid-template-columns: repeat(4, 1fr); column-gap: 1.5rem; row-gap: 3rem; }
  .journey::before { display: none; }
  .journey__item { grid-template-columns: 1fr; row-gap: 1rem; padding-bottom: 0; align-content: start; }
  .journey__item::before { content: ""; position: absolute; top: 1.5rem; left: 0; right: -1.5rem; height: 2px; margin-top: -1px; background: var(--colour-grey-200); }
  .journey__item:nth-child(4n)::before, .journey__item:last-child::before { right: 0; }
  .journey__icons { flex-direction: row; }
  .journey__year { padding-top: 0; }
  .journey__list { margin-top: 0; }
}

/* About: Global expansion, a map of the region beside the years. */
.xmap { margin-top: var(--space-l); display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 900px) { .xmap { grid-template-columns: 7fr 5fr; align-items: center; } }
.xmap__figure { margin: 0; position: relative; background: var(--colour-surface); border: 1px solid var(--colour-border); }
.xmap__svg { display: block; width: 100%; height: auto; }
.xmap__land { fill: #d3d3d6; stroke: var(--colour-surface); stroke-width: 1; }
.xmap__hi path { fill: var(--colour-primary); stroke: #fff; stroke-width: .8; }
.xmap__ring { fill: rgba(247, 144, 30, .28); }
.xmap__dot { fill: var(--colour-text); }
.xmap__label {
  position: absolute; transform: translate(-50%, -100%); margin-top: -.75rem;
  white-space: nowrap; font-size: .75rem; line-height: 1.25; font-weight: 600; color: var(--colour-text);
  background: #fff; border: 1px solid var(--colour-border); padding: .2rem .45rem;
}
.xmap__label b { color: var(--colour-link-onDark); font-weight: 700; margin-right: .25rem; }
.xmap__label--below { transform: translate(-50%, 0); margin-top: .75rem; }
.xmap__label--left { transform: translate(-100%, -50%); margin-top: 0; margin-left: -.75rem; }
@media (min-width: 720px) { .xmap__label { font-size: .8125rem; } }
.xsteps { list-style: none; margin: 0; padding: 0; }
.xsteps__row { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 1rem; align-items: baseline; padding: .85rem 0; border-top: 1px solid var(--colour-border); }
.xsteps__row:last-child { border-bottom: 1px solid var(--colour-border); }
.xsteps__year { font-family: var(--font-display); font-weight: 500; font-size: 1.6rem; line-height: 1; letter-spacing: -.01em; color: var(--colour-text); }
.xsteps__where { font-weight: 600; color: var(--colour-text); }
.xsteps__count { display: flex; gap: 3px; align-items: center; }
.xsteps__count i { width: 7px; height: 7px; border-radius: 50%; background: var(--colour-grey-200); }
.xsteps__count i.on { background: var(--colour-primary); }

/* Services: one card per service, her photographs at no more than their own size. */
.svccards { list-style: none; margin: var(--space-l) 0 0; padding: 0; display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); grid-template-columns: 1fr; }
@media (min-width: 600px) { .svccards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .svccards { grid-template-columns: repeat(4, 1fr); } }
.svccard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--colour-border); height: 100%; }
.svccard__figure { margin: 0; position: relative; }
.svccard__figure img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.svccard__icon {
  position: absolute; left: 1rem; bottom: -1.4rem; width: 2.8rem; height: 2.8rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--colour-primary); color: var(--colour-on-primary); border: 3px solid #fff;
}
.svccard__icon .gicon { width: 1.3rem; height: 1.3rem; }
.svccard__body { display: flex; flex-direction: column; gap: .6rem; padding: 2rem 1.1rem 1.2rem; flex: 1; }
.svccard__title { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; line-height: 1.08; letter-spacing: -.01em; }
.svccard__text { font-size: .9375rem; color: var(--colour-text-muted); }
.svccard .tlink { margin-top: auto; padding-top: .4rem; }
.svccard--ask { background: var(--colour-surface); }
.svccard--ask .svccard__body { padding-top: 1.4rem; justify-content: center; }

/* Home: the accreditations, in one paragraph and a row of names. */
.accsum { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: end; }
@media (min-width: 880px) { .accsum { grid-template-columns: 7fr 5fr; } }
.accsum__text { margin-top: 1.1rem; max-width: 40rem; font-size: 1.0625rem; color: var(--colour-text-muted); }
.accsum__names { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.accsum__names li { font-weight: 600; font-size: .875rem; letter-spacing: .02em; color: var(--colour-text); background: #fff; border: 1px solid var(--colour-border); border-left: 3px solid var(--colour-primary); padding: .45rem .7rem; }
.xmap__label--start { transform: translate(0, 0); margin-top: .75rem; }
.svccards > li { min-width: 0; }

/* QMS and Accreditations (change 2026-10-21): the quality management system is the page's
   introduction, straight under the title, with no label or sub-heading of its own. */
.section--flushtop { padding-top: 0; }
#qms .pullquote { margin-top: 0; }

/* ---------------------------------------------------------------------------
   Headings and sub-heading strips you notice (change 2026-10-21): "Increase the font
   size of the main headings and subheadings ... Make the subheading banners more
   prominent ... Improve the contrast between the banner background and its text ...
   a more prominent active or selected state when a heading is clicked." Light theme
   kept (no dark band). The strip is now a mid-grey bar closed by the logo orange,
   with larger semi-bold ink links (13.9:1 on #e2e2e4), and the page or part you are
   on is filled in the logo orange with ink text (7.9:1). On a page of jump links the
   filled link follows the reader as they scroll (site.js).
   --------------------------------------------------------------------------- */
h1 { font-size: clamp(2.9rem, 6.4vw, 5.4rem); }
h2 { font-size: clamp(2.15rem, 3.8vw, 3.4rem); }
h3 { font-size: clamp(1.45rem, 2.1vw, 1.9rem); }
.eyebrow { font-size: .8125rem; letter-spacing: .09em; }
.badgerow__q { font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
.badgerow__list { font-size: .9375rem; color: var(--colour-text-muted); }
.card__title, .svccard__title, .case__title, .person__name { font-size: clamp(1.45rem, 2.1vw, 1.8rem); }
.se-faq__title { font-size: clamp(2.15rem, 3.8vw, 3.4rem); }

:root { --subnav-h: 60px; }
.subnav {
  background: #e2e2e4;
  border-top: 1px solid var(--colour-grey-200);
  border-bottom: 3px solid var(--colour-primary);
}
.subnav__inner { gap: .35rem; }
.subnav__label {
  font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--colour-text); padding-right: 1rem; margin-right: .5rem;
  border-right: 2px solid var(--colour-grey-300);
}
.subnav .subnav__link {
  font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--colour-text); padding: .45rem .9rem; border: 0; border-radius: 999px;
  transition: background-color .15s, color .15s;
}
.subnav .subnav__link:hover { background: #fff; color: var(--colour-text); }
.subnav .subnav__link[aria-current] { background: var(--colour-primary); color: var(--colour-text); }
.subnav .subnav__link:focus-visible { outline: 2px solid var(--colour-text); outline-offset: 2px; }
@media (max-width: 639px) { .subnav .subnav__link { font-size: 1rem; padding: .4rem .75rem; } }
.subnav--scroll .subnav__link:last-child { margin-right: var(--gutter); padding-right: .9rem; }
.nav__link[aria-current] { font-weight: 600; }
:where(section[id], div[id], h2[id], h3[id], article[id]) { scroll-margin-top: 150px; }
@media (max-width: 767px) { :where(section[id], div[id], h2[id], h3[id], article[id]) { scroll-margin-top: 140px; } }
.svcintro p + p { margin-top: 1rem; }
.svcintro p { color: var(--colour-text-muted); }
.svcintro strong { color: var(--colour-text); font-weight: 600; }
.svcintro__links { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: 1.5rem !important; }

/* ---------------------------------------------------------------------------
   Key Projects (change 2026-10-21): a statement in place of the figures banner,
   the Bapco Modernization Programme as a flagship case study, and the other
   selected projects as cards of one shape.
   --------------------------------------------------------------------------- */
.statement {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.7vw, 2.2rem);
  font-weight: 500; letter-spacing: -.015em; line-height: 1.18;
  color: var(--colour-text); max-width: 40rem;
}
.flagship { display: grid; gap: var(--space-l); }
.flagship__head { max-width: 52rem; }
.flagship__head h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); }
.flagship__client { margin-top: .6rem; font-size: .8125rem; letter-spacing: .07em; text-transform: uppercase; color: var(--colour-link-onDark); font-weight: 600; }
.flagship__lead { margin-top: 1.25rem; }
.flagship__photos { margin: 0; }
.flagship__pair { display: grid; gap: .9rem; max-width: 70rem; }
@media (min-width: 700px) { .flagship__pair { grid-template-columns: 1fr 1fr; } }
.flagship__shot img { display: block; width: 100%; height: auto; aspect-ratio: 17 / 10; object-fit: cover; }
.flagship__tag { display: block; margin-top: .5rem; font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--colour-text); }
.flagship__cap { margin-top: .9rem; font-size: .8125rem; line-height: 1.5; color: var(--colour-text-muted); }
.flagship__body { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 880px) { .flagship__body { grid-template-columns: 7fr 5fr; } }
.flagship__lines { margin: 0; border-top: 1px solid var(--colour-border); }
.flagship__line { display: grid; gap: .2rem 1.25rem; padding: .95rem 0; border-bottom: 1px solid var(--colour-border); }
@media (min-width: 620px) { .flagship__line { grid-template-columns: 10rem 1fr; } }
.flagship__line dt { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--colour-text-muted); font-weight: 600; padding-top: .2rem; }
.flagship__line dd { margin: 0; font-size: 1rem; color: var(--colour-text); }
.flagship__record .notice__figure { font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.05; }
.flagship__record .notice__body + .notice__body { margin-top: .75rem; }

.kps { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 700px) { .kps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .kps { grid-template-columns: repeat(3, 1fr); } }
.kp { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--colour-border); }
.kp__figure { margin: 0; }
.kp__figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.kp__body { padding: 1.25rem 1.25rem 1.5rem; display: flex; flex-direction: column; flex: 1; align-items: flex-start; }
.kp__service { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--colour-text-muted); font-weight: 600; }
.kp__title { margin-top: .45rem; font-family: var(--font-display); font-size: clamp(1.2rem, 1.7vw, 1.45rem); font-weight: 500; letter-spacing: -.012em; line-height: 1.12; }
.kp__client { margin-top: .4rem; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--colour-link-onDark); font-weight: 600; }
.kp__text { margin-top: .9rem; font-size: .9375rem; color: var(--colour-text); }
.kp__more { margin-top: auto; padding-top: 1.1rem; }
.nowrap { white-space: nowrap; }
/* ---------------------------------------------------------------------------
   Change 2026-10-21 (chg-070b6857, with chg-eb1fa34b and chg-50e722cb). The page top, designed
   as one piece after her third note on it: "the text on the right side ... is crossing beyond
   the image", "neither center to the big bold text on the left nor the spacing is right", and
   on Services "too far away ... the section looks too blank". The headline and its short text
   are now one pair: the text starts a fixed step from the headline (the headline's column is
   only as wide as its words), sits centred on the headline's height, and carries the logo-orange
   rule the sub heading banners use. Where a photo follows, the pair is held to the photo's own
   width, so the text never runs past it; the photos stay at 1:1 (see "contained lead band").
   --------------------------------------------------------------------------- */
.pagehead .headband__aside { border-left: 3px solid var(--colour-primary); padding-left: clamp(1rem, 2vw, 1.5rem); color: var(--colour-text); }
@media (min-width: 880px) {
  .pagehead .headband {
    grid-template-columns: fit-content(58%) minmax(0, 44rem);
    column-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
  }
  .pagehead .headband__aside { align-self: center; padding-top: .15rem; padding-bottom: .15rem; }
  .pagehead:has(+ .section--tight .leadband img[width="1024"]) .headband { max-width: 1024px; }
  .pagehead:has(+ .section--tight .leadband img[width="1060"]) .headband { max-width: 1060px; }
}

/* ---------------------------------------------------------------------------
   Change 2026-10-21 (chg-c7158b70). Every heading and its short text, designed as one rule,
   after her fourth note on them: "Align it and space it to fit within the image and not too
   spaced out from the left side bold text either. Do this for all texts and images across the
   site." The page tops had been fixed alone, and even there the headline's column was as wide as
   its limit rather than its words, so the text still sat 150 to 350px from the headline.
   Now, on every page top and section header that pairs a headline with short text:
   - the headline's column is exactly its longest line (--hb-head, measured in site.js; without
     the script it falls back to the old fit-content limit),
   - the text starts one fixed step after it, with the logo-orange rule,
   - the text is centred on the headline itself, not on the small label above it (--hb-eyebrow),
   - the text column is capped at a reading width, and the pair stays inside the band, which on
     About and Sectors is held to the photo's width (see the :has rules above).
   A header followed by a long write-up (home Services) stacks instead: headline, then the
   write-up across the width, one paragraph to a column, rather than a narrow column beside empty space.
   --------------------------------------------------------------------------- */
.headband:has(> div:first-child > :is(h1, h2):last-child):has(> .headband__aside):not(:has(> .svcintro)) > .headband__aside {
  border-left: 3px solid var(--colour-primary);
  padding-left: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 880px) {
  .headband:has(> div:first-child > :is(h1, h2):last-child):has(> .headband__aside):not(:has(> .svcintro)) {
    grid-template-columns: var(--hb-head, fit-content(58%)) minmax(0, 40rem);
    column-gap: 3rem;
    justify-content: start;
    align-items: center;
  }
  .headband:has(> div:first-child > :is(h1, h2):last-child):has(> .headband__aside):not(:has(> .svcintro)) > .headband__aside {
    grid-row: 1;
    grid-column: 2;
    align-self: center;
    padding-top: .1rem;
    padding-bottom: .1rem;
    margin-top: 0;
  }
  .headband:has(> div:first-child > .eyebrow):has(> div:first-child > :is(h1, h2):last-child):has(> .headband__aside):not(:has(> .svcintro)) > .headband__aside {
    margin-top: var(--hb-eyebrow, 1.85rem);
  }
  .headband:has(> .svcintro) { grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; }
  .headband:has(> .svcintro) > .svcintro { grid-row: 2; grid-column: 1; padding-top: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; align-items: start; }
  .headband:has(> .svcintro) > .svcintro p + p:not(.svcintro__links) { margin-top: 0; }
  .headband:has(> .svcintro) > .svcintro .svcintro__links { grid-column: 1 / -1; }
}
/* The same note, on the headers whose left side is a headline plus a lead paragraph (closing
   calls to action, the sector intros): the short text on the right now starts level with the
   lead paragraph (--hb-lead, measured in site.js), so the two read as one pair of text columns a
   fixed step apart, instead of the small text floating beside a short headline. */
.headband:has(> div:first-child > .lead):has(> .headband__aside) > .headband__aside {
  border-left: 3px solid var(--colour-primary);
  padding-left: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 880px) {
  .headband:has(> div:first-child > .lead):has(> .headband__aside) { column-gap: 3rem; }
  .headband:has(> div:first-child > .lead):has(> .headband__aside) > .headband__aside {
    align-self: start;
    padding-top: 0;
    margin-top: var(--hb-lead, 0);
  }
}

/* Change 2026-10-21 (chg-559a3bff). India's accreditations show her certificates themselves, in
   her order: "IRATA certificates, followed by ISOs and the the GWO certificates. Either place
   the logos more neatly or choose to remove them." The loose logos are gone from India (each
   certificate carries its own marks); the other countries keep theirs. Five cards of one size,
   each opening its PDF. */
.badgerow--certs { grid-template-columns: minmax(0, 1fr); }
.certgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; align-items: start; }
@media (min-width: 640px) { .certgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .certgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.certcard { margin: 0; display: flex; flex-direction: column; gap: .85rem; }
.certcard__link { display: block; border: 1px solid var(--colour-border); background: #fff; }
.certcard__link img { display: block; width: 100%; height: auto; aspect-ratio: 720 / 1018; object-fit: contain; }
.certcard__cap { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; font-size: .875rem; color: var(--colour-text-muted); }
.certcard__cap strong { color: var(--colour-text); font-weight: 600; font-size: .9375rem; }

/* Sub-heading strips in the logo orange (29 Oct 2026, her "change the background of the banner to orange instead of grey"):
   near-black links on the orange; the part you are on is a near-black pill with white text. */
.subnav {
  background: var(--colour-primary);
  border-top: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .14);
}
.subnav__label { color: var(--colour-text); border-right-color: rgba(28, 28, 30, .4); }
.subnav .subnav__link { color: var(--colour-text); }
.subnav .subnav__link:hover { background: rgba(255, 255, 255, .45); color: var(--colour-text); }
.subnav .subnav__link[aria-current] { background: var(--colour-text); color: #fff; }
.subnav .subnav__link:focus-visible { outline-color: var(--colour-text); }

/* ---------------------------------------------------------------------------
   Contact (change 2026-10-29): "This is a video of our UAE office. we want a
   thumbnail next to the UAE address and upon clicking this video should play."
   A small still beside the Abu Dhabi address; a tap opens it in the same dark
   viewer as the gallery and plays it. Without script the link opens the file.
   --------------------------------------------------------------------------- */
.office__withvideo { display: grid; grid-template-columns: minmax(0, 1fr) clamp(100px, 30%, 150px); gap: .9rem; align-items: start; margin-top: .5rem; }
.office__withvideo .office__addr { margin-top: 0; }
.office__video { position: relative; display: block; text-decoration: none; color: var(--colour-text); }
.office__video img { display: block; width: 100%; height: auto; aspect-ratio: 912 / 704; object-fit: cover; background: var(--colour-surface); border-radius: 4px; transition: opacity .2s; }
.office__video:hover img { opacity: .88; }
.office__video:focus-visible { outline: 2px solid var(--colour-text); outline-offset: 3px; border-radius: 4px; }
.office__play { position: absolute; left: 50%; top: calc(50% - .7rem); width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: #f7901e; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.office__play::before { content: ""; position: absolute; left: 15px; top: 11px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent var(--colour-text); }
.office__videolabel { display: block; margin-top: .35rem; font-size: .75rem; line-height: 1.3; color: var(--colour-text-muted); }
.lightbox__video { display: block; width: auto; height: auto; aspect-ratio: 912 / 704; max-width: min(92vw, 960px); max-height: 86vh; background: #000; }
.lightbox__video--tall { aspect-ratio: 9 / 16; }