/* ============================================================
   Sustainable Leadership Solutions
   One stylesheet, seven pages.

   Shape language is round throughout: buttons and chips are
   full pills, cards carry large soft radii, icon plates and
   number badges are circles. Nothing on this site has a sharp
   corner, which is the single clearest way it reads as a
   different site from the old one.

   The palette stays three things: the navy sampled out of the
   logo (#03375C), near-black ink, and white. Depth comes from
   how much navy a band carries and from soft coloured shadow,
   never from a fourth hue.

   Motion is everywhere but it is all one system: one easing
   curve, one set of durations, and everything switches off
   under prefers-reduced-motion.
   ============================================================ */

/* ---------- 1. tokens ---------- */
:root {
  --navy:       #03375C;
  --navy-lift:  #03476E;   /* the arrow in the logo, one step brighter */
  --navy-glow:  #0A6BA8;   /* only ever used inside gradients and glows */
  --navy-deep:  #012741;
  --navy-ink:   #011B2E;
  --navy-mist:  #EAF1F6;

  /* Text colours are set for a reader in their sixties or older on
     an office laptop, not for a designer on a calibrated screen.
     Every pairing below clears WCAG AA at its size, and the muted
     tones are deliberately far less muted than they would be on a
     site aimed at a younger audience. */
  --navy-soft:  #B3CEE0;   /* labels on navy */
  --on-navy:    #E4F0F8;   /* body copy on navy */

  --ink:        #0B1016;
  --ink-70:     #333F4A;
  --ink-50:     #55636F;

  --paper:      #FFFFFF;
  --shell:      #F4F7FA;
  --line:       #E2E9EF;
  --line-soft:  #EEF3F7;

  /* shape: round everywhere */
  --r-xs:   12px;
  --r-sm:   18px;
  --r-md:   26px;
  --r-lg:   36px;
  --r-xl:   48px;
  --r-pill: 999px;

  /* motion: one curve, three speeds */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --spring:    cubic-bezier(.34, 1.3, .64, 1);
  --t-fast: 240ms;
  --t:      460ms;
  --t-slow: 820ms;

  --gut: clamp(20px, 5vw, 44px);
  --max: 1260px;
  --max-read: 66ch;

  /* soft navy-tinted shadow, never grey */
  --sh-sm: 0 2px 10px rgba(3, 55, 92, .06);
  --sh-md: 0 10px 34px rgba(3, 55, 92, .10);
  --sh-lg: 0 26px 70px rgba(3, 55, 92, .16);
  --sh-xl: 0 40px 110px rgba(3, 55, 92, .22);

  --header-h: 88px;
}

/* ---------- 2. reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 17.5px;
  line-height: 1.72;
  font-feature-settings: "kern" 1, "liga" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.014em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

:focus-visible {
  outline: 2.5px solid var(--navy-glow);
  outline-offset: 4px;
  border-radius: var(--r-xs);
}

::selection { background: var(--navy); color: #fff; }

.skip-link {
  position: absolute; left: 14px; top: -100px;
  z-index: 300; background: var(--navy); color: #fff;
  padding: 13px 26px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 14px; }

/* ---------- 3. scroll progress ---------- */
/* A hairline pill that fills as the page is read. Cheap, and it
   tells a visitor how much of a long page is left. */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 200;
  pointer-events: none;
  background: transparent;
}
.progress span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  background: linear-gradient(90deg, var(--navy), var(--navy-glow));
  transition: width 90ms linear;
}

/* ---------- 4. layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap-narrow { max-width: 900px; }

section { position: relative; }

.band { padding-block: clamp(70px, 9.5vw, 140px); position: relative; }
.band-tight { padding-block: clamp(52px, 6.5vw, 92px); }

/* The alternating band is a rounded slab rather than a full
   bleed rectangle, so the page reads as stacked cards. */
.band-shell {
  background: var(--shell);
  border-radius: var(--r-xl);
  margin-inline: clamp(8px, 2vw, 26px);
}
.band-navy {
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 70%, var(--navy-ink) 100%);
  color: #fff;
  border-radius: var(--r-xl);
  margin-inline: clamp(8px, 2vw, 26px);
  overflow: hidden;
  isolation: isolate;
}
.band-navy h1, .band-navy h2, .band-navy h3 { color: #fff; }

/* soft light blooms inside navy slabs */
.band-navy::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 55%; aspect-ratio: 1;
  right: -12%; top: -30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10,107,168,.42), transparent 66%);
  filter: blur(30px);
}
.band-navy::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 42%; aspect-ratio: 1;
  left: -10%; bottom: -34%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10,107,168,.26), transparent 68%);
  filter: blur(34px);
}

/* ---------- 5. type ---------- */
/* The eyebrow pill. It has to hold anything from one short word
   to the full company name, so it wraps to a second line rather
   than overflowing, and the leading dot stays pinned to the first
   line instead of floating to the middle of a wrapped block. */
.kicker {
  display: inline-flex;
  align-items: flex-start;
  gap: 11px;
  max-width: 100%;
  padding: 11px 24px 11px 17px;
  border-radius: var(--r-pill);
  background: var(--navy-mist);
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 28px;
  text-wrap: balance;
}
.kicker::before {
  content: "";
  width: 8px; height: 8px;
  margin-top: .42em;
  border-radius: 50%;
  background: var(--navy);
  flex: none;
  animation: pulse 2.6s var(--ease) infinite;
}
@media (max-width: 620px) {
  /* At phone width a long eyebrow reads better as a rounded
     block of two lines than as a pill stretched edge to edge. */
  .kicker {
    font-size: 12px;
    letter-spacing: .1em;
    border-radius: var(--r-md);
    padding: 12px 20px 12px 16px;
  }
}
@keyframes pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.5); opacity: .45; }
}
.band-navy .kicker, .hero .kicker {
  background: rgba(255,255,255,.13);
  color: var(--on-navy);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.band-navy .kicker::before, .hero .kicker::before { background: #8FC4E6; }

.h-display { font-size: clamp(2.9rem, 6.6vw, 5.4rem); }
.h-1       { font-size: clamp(2.4rem, 5vw, 4rem); }
.h-2       { font-size: clamp(1.95rem, 3.7vw, 3rem); }
.h-3       { font-size: clamp(1.35rem, 2vw, 1.75rem); }

.lede {
  font-size: clamp(1.08rem, 1.5vw, 1.32rem);
  line-height: 1.64;
  color: var(--ink-70);
  max-width: var(--max-read);
}
.band-navy .lede, .hero .lede { color: var(--on-navy); }

.prose p + p { margin-top: 1.15em; }
.prose { max-width: var(--max-read); color: var(--ink-70); }
.muted { color: var(--ink-50); }

/* Headlines are split into words by JS and rise into place one
   after another. The split is invisible to a screen reader
   because the original text stays as the accessible name. */
.split-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.5em) rotate(2deg);
  filter: blur(6px);
  transition: opacity .7s var(--ease-out),
              transform .7s var(--ease-out),
              filter .7s var(--ease-out);
}
.is-in .split-word,
.split-word.is-in { opacity: 1; transform: none; filter: blur(0); }

/* ---------- 6. buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 34px;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t) var(--ease),
              transform 260ms var(--spring);
}

/* a light sweep that crosses the button on hover */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.28) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform var(--t-slow) var(--ease);
}
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: scale(.97); }

.btn-primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  box-shadow: 0 6px 20px rgba(3, 55, 92, .26);
}
.btn-primary:hover {
  background: var(--navy-lift);
  border-color: var(--navy-lift);
  box-shadow: 0 14px 38px rgba(3, 55, 92, .34);
}

.btn-ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--navy); background: var(--navy-mist); box-shadow: var(--sh-md); }

.btn-light { background: #fff; color: var(--navy); border-color: #fff; box-shadow: 0 8px 26px rgba(1,27,46,.28); }
.btn-light:hover { box-shadow: 0 16px 44px rgba(1,27,46,.38); }

.btn-outline-light { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.4); }
.btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,.16); }

.btn-lg { padding: 20px 42px; font-size: 16px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* a text link whose arrow sits in a circle that fills on hover */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
.link-arrow span { position: relative; }
.link-arrow span::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 0; height: 1.5px;
  background: currentColor;
  transition: width var(--t) var(--ease);
}
.link-arrow:hover span::after { width: 100%; }
.link-arrow .dot {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: grid; place-items: center;
  transition: background var(--t) var(--ease),
              color var(--t) var(--ease),
              transform var(--t) var(--spring);
}
.link-arrow:hover .dot { background: var(--navy); color: #fff; transform: translateX(5px) rotate(-45deg); }
.band-navy .link-arrow, .hero .link-arrow { color: #fff; }
.band-navy .link-arrow:hover .dot { background: #fff; color: var(--navy); }

/* ---------- 7. header ---------- */
/* The blur sits on the full-width strip, not on the pill. Two
   reasons, and both matter:

   1. The pill floats with clear space around it, so without a
      backdrop on the strip, page content scrolls visibly
      through that gap and collides with the header.
   2. A filtered element becomes the containing block for its
      position:fixed descendants. The mobile nav panel lives
      inside this header, so the filter has to be on the
      full-width element at the top of the viewport — otherwise
      the panel anchors to the inset pill and comes out narrow
      and offset. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-block: 14px;
  isolation: isolate;
}

/* The blur lives on a pseudo-element rather than on the header
   itself, for two reasons that both bite otherwise:

   1. A filtered element becomes the containing block for its
      position:fixed descendants. The mobile nav panel is inside
      this header, so a filter here would make it anchor to the
      header box instead of the viewport and collapse it.
   2. A mask clips descendants too, so masking the header would
      fade out that same panel.

   As a pseudo-element it is purely a backdrop: the pill floats
   above it, page content blurs as it scrolls underneath, and
   the fade at the bottom keeps the strip from reading as a
   hard bar. */
/* Fading the opacity of one uniformly blurred layer does not make
   a soft edge. It cross-fades a fully blurred picture against a
   sharp one, so the eye sees a seam and a faint double image at
   the boundary, which is exactly what the hard line under the pill
   was. A blur that genuinely ramps has to be built from several
   layers: each blurs harder than the one before and each stops a
   little sooner, so the strength falls away by degrees and there
   is no single row of pixels where it ends.

   The strip runs past the bottom of the pill so the softest layer
   has somewhere to finish. */
.header-veil {
  position: absolute;
  inset: 0 0 -36px 0;
  z-index: -1;
  pointer-events: none;
}
.header-veil span {
  position: absolute;
  inset: 0;
  display: block;
}
.header-veil span:nth-child(1) {
  backdrop-filter: saturate(170%) blur(2px);
  -webkit-backdrop-filter: saturate(170%) blur(2px);
  mask-image: linear-gradient(#000 0 56%, transparent 100%);
  -webkit-mask-image: linear-gradient(#000 0 56%, transparent 100%);
}
.header-veil span:nth-child(2) {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  mask-image: linear-gradient(#000 0 40%, transparent 80%);
  -webkit-mask-image: linear-gradient(#000 0 40%, transparent 80%);
}
.header-veil span:nth-child(3) {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  mask-image: linear-gradient(#000 0 24%, transparent 60%);
  -webkit-mask-image: linear-gradient(#000 0 24%, transparent 60%);
}
.header-veil span:nth-child(4) {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  mask-image: linear-gradient(#000 0 8%, transparent 40%);
  -webkit-mask-image: linear-gradient(#000 0 8%, transparent 40%);
}
.header-inner {
  height: 78px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding-inline: 24px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .8);
  border: 1px solid transparent;
  transition: border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease),
              background var(--t) var(--ease);
}
.site-header.is-stuck .header-inner {
  border-color: var(--line);
  box-shadow: var(--sh-md);
  background: rgba(255, 255, 255, .94);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex: none;
  margin-right: auto;
}
/* The logo carries the name on its own now, so it is sized to be
   read rather than to sit politely beside a text wordmark. */
.brand img {
  height: 52px; width: auto; flex: none;
  transition: transform var(--t) var(--spring);
}
.brand:hover img { transform: scale(1.06); }

.nav { display: flex; align-items: center; gap: 2px; }

.nav a {
  position: relative;
  padding: 10px 15px;
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink-70);
  text-decoration: none;
  border-radius: var(--r-pill);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav a:hover { color: var(--navy); background: var(--navy-mist); }
.nav a[aria-current="page"] { color: #fff; background: var(--navy); font-weight: 600; }

@media (max-width: 1200px) and (min-width: 941px) {
  .nav a { padding: 10px 10px; font-size: 13.5px; }
  .brand-name { font-size: 16px; }
}

.header-actions { display: flex; align-items: center; gap: 10px; flex: none; }

/* language toggle: a two-state pill with a sliding knob, so the
   choice is legible at a glance from across a meeting room */
.lang {
  position: relative;
  display: inline-flex;
  border-radius: var(--r-pill);
  padding: 4px;
  background: var(--navy-mist);
  isolation: isolate;
}
.lang::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px);
  border-radius: var(--r-pill);
  background: var(--navy);
  box-shadow: 0 3px 10px rgba(3,55,92,.3);
  transition: transform var(--t) var(--spring);
}
.lang[data-active="fr"]::before { transform: translateX(100%); }
.lang button {
  border: 0;
  background: transparent;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink-50);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.lang button[aria-pressed="true"] { color: #fff; }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  cursor: pointer;
  padding: 0;
  place-items: center;
  transition: transform var(--t) var(--spring), box-shadow var(--t) var(--ease);
}
.nav-toggle:hover { transform: scale(1.06); box-shadow: var(--sh-sm); }
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 18px; height: 2px;
  border-radius: var(--r-pill);
  background: var(--navy);
  transition: transform var(--t) var(--spring), opacity var(--t-fast) var(--ease);
}
.nav-toggle span { position: relative; }
.nav-toggle span::before { content: ""; position: absolute; top: -6px; }
.nav-toggle span::after  { content: ""; position: absolute; top:  6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 8. hero ---------- */
.hero {
  position: relative;
  margin-inline: clamp(8px, 2vw, 26px);
  border-radius: var(--r-xl);
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 62%, var(--navy-ink) 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
/* On a desktop first landing the hero fills what is left of the
   screen below the header and centres its content in it, so the
   headline sits at eye level rather than near the top edge. The
   min-height is a floor, not a fixed height: on a phone, or if
   the text wraps further than expected, the band simply grows. */
.hero-home {
  padding-block: clamp(90px, 13vw, 150px);
  display: grid;
  align-items: center;
  min-height: calc(100svh - var(--header-h) - 20px);
}
@media (max-width: 940px) {
  .hero-home { min-height: 0; }
}
.hero-page { padding-block: clamp(72px, 9vw, 120px); }

/* Three slow-drifting blooms behind the words. Between them
   they never repeat exactly, so the band keeps moving without
   ever looking like an animation playing on a loop. */
.orb {
  position: absolute;
  z-index: -2;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(46px);
}
.orb-1 {
  width: 46%; aspect-ratio: 1;
  top: -18%; right: -6%;
  background: radial-gradient(circle, rgba(10,107,168,.62), transparent 68%);
  animation: drift1 19s var(--ease) infinite alternate;
}
.orb-2 {
  width: 38%; aspect-ratio: 1;
  bottom: -22%; left: -8%;
  background: radial-gradient(circle, rgba(10,107,168,.44), transparent 70%);
  animation: drift2 24s var(--ease) infinite alternate;
}
.orb-3 {
  width: 26%; aspect-ratio: 1;
  top: 34%; left: 40%;
  background: radial-gradient(circle, rgba(60,150,210,.3), transparent 72%);
  animation: drift3 30s var(--ease) infinite alternate;
}
@keyframes drift1 {
  from { transform: translate3d(0,0,0)        scale(1); }
  to   { transform: translate3d(-9%, 12%, 0)  scale(1.22); }
}
@keyframes drift2 {
  from { transform: translate3d(0,0,0)        scale(1.1); }
  to   { transform: translate3d(14%, -10%, 0) scale(.86); }
}
@keyframes drift3 {
  from { transform: translate3d(0,0,0)         scale(.9); }
  to   { transform: translate3d(-18%, -14%, 0) scale(1.3); }
}

/* the logo's rising arc, drawn once on load */
.hero-canvas { position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none; }
.hero-canvas .grid-line { stroke: rgba(255,255,255,.09); stroke-width: 1; }
.hero-canvas .arc {
  fill: none;
  stroke: rgba(255,255,255,.34);
  stroke-width: 1.4;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: draw 3.6s var(--ease) .35s forwards;
}
.hero-canvas .arc-2 { stroke: rgba(255,255,255,.18); animation-delay: .75s; }
.hero-canvas .arc-3 { stroke: rgba(255,255,255,.11); animation-delay: 1.1s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.hero h1 { color: #fff; }
.hero .lede { margin-top: 28px; }
.hero .btn-row { margin-top: 42px; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(36px, 6vw, 76px);
  align-items: center;
}

/* the two-arm card beside the home headline; floats gently */
.presence-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r-lg);
  padding: 32px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(1,27,46,.3);
}

/* The card arrives, settles, and only then starts drifting.
   The idle float used to run from the first frame, and a running
   animation always beats a transition on the same property, so it
   was overriding the entrance transform outright: the card faded
   in on the spot instead of rising into place like the rest of
   the page. Holding the float back until the entrance has
   finished lets the transition own the transform first. */
.presence-card.reveal { transform: translateY(42px) scale(.96); }
.presence-card.reveal.is-in { transform: none; }
.presence-card.is-in { animation: float 7s var(--ease) 1.05s infinite alternate; }

/* The heading and the two rows follow the card in, one after the
   other, so it reads as something assembling rather than one
   block switching on. */
.presence-card h2,
.presence-card .presence-row {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .66s var(--ease-out), transform .66s var(--ease-out);
}
.presence-card.is-in h2,
.presence-card.is-in .presence-row { opacity: 1; transform: none; }
.presence-card.is-in h2                    { transition-delay: .40s; }
.presence-card.is-in .presence-row:nth-of-type(1) { transition-delay: .54s; }
.presence-card.is-in .presence-row:nth-of-type(2) { transition-delay: .68s; }
@keyframes float {
  from { transform: translateY(0); }
  to   { transform: translateY(-14px); }
}
.presence-card h2 {
  font-family: Inter, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #8FC4E6;
  margin-bottom: 22px;
}
.presence-row {
  display: flex; gap: 15px; padding: 18px 0; align-items: flex-start;
  transition: transform var(--t) var(--ease);
}
.presence-row:hover { transform: translateX(6px); }
.presence-row + .presence-row { border-top: 1px solid rgba(255,255,255,.16); }
/* Scoped to the inner span so the wrapper element does not also
   pick up the muted colour and drag the bold line down with it. */
.presence-row strong { display: block; font-size: 17px; font-weight: 600; color: #fff; }
.presence-row strong + span {
  display: block;
  font-size: 15px;
  line-height: 1.45;
  color: var(--navy-soft);
  margin-top: 4px;
}

/* Country markers are two-letter codes in a round chip, not
   flag emoji: Windows ships no flag glyphs, and the audience
   for this site is people on Windows laptops in offices. */
/* Real flags, drawn as inline SVG rather than emoji: Windows
   ships no flag glyphs at all, and most of the people opening
   this site are on a Windows laptop. Each flag is sliced to
   fill its circle, so proportions stay right. */
.flag {
  flex: none;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255,255,255,.16);
  box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 4px 12px rgba(1,27,46,.4);
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--spring);
}
.flag svg { width: 100%; height: 100%; display: block; }

/* the "and beyond" chip has no flag to show */
.flag-more {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.34);
}
.presence-row:hover .flag,
.country:hover .flag {
  transform: scale(1.1);
  box-shadow: 0 0 0 2px #fff, 0 6px 18px rgba(1,27,46,.5);
}

/* ---------- 9. reveals ---------- */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

.reveal[data-anim="left"]  { transform: translateX(-40px); }
.reveal[data-anim="right"] { transform: translateX(40px); }
.reveal[data-anim="scale"] { transform: scale(.92); }
.reveal[data-anim="blur"]  { transform: none; filter: blur(12px); }
.reveal[data-anim="blur"].is-in { filter: blur(0); }

.reveal[data-delay="1"] { transition-delay: .09s; }
.reveal[data-delay="2"] { transition-delay: .18s; }
.reveal[data-delay="3"] { transition-delay: .27s; }
.reveal[data-delay="4"] { transition-delay: .36s; }
.reveal[data-delay="5"] { transition-delay: .45s; }

/* ---------- 10. section heads ---------- */
.sec-head { max-width: 840px; margin-bottom: clamp(44px, 5vw, 70px); }
.sec-head .lede { margin-top: 22px; }

/* A short rule that draws itself in under every section heading.
   It is the cheapest possible signal that the section has arrived,
   and because it is keyed to the same .is-in the heading uses, it
   costs no extra observer. Sections without .reveal keep it drawn,
   so nothing can strand it at zero width. */
.sec-head::after {
  content: "";
  display: block;
  width: 76px;
  height: 3px;
  margin-top: 28px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--navy), var(--navy-glow));
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform .9s var(--ease-out) .22s;
}
.sec-head.reveal::after       { transform: scaleX(0); }
.sec-head.reveal.is-in::after { transform: scaleX(1); }
.band-navy .sec-head::after,
.hero .sec-head::after {
  background: linear-gradient(90deg, #fff, #8FC4E6);
}

/* ---------- 11. stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}
.stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 38px 30px;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.stat:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); border-color: transparent; }
.band-navy .stat {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
}

.stat-num {
  font-family: "Instrument Serif", serif;
  font-size: clamp(2.7rem, 4.8vw, 3.9rem);
  line-height: 1;
  color: var(--navy);
  display: flex;
  align-items: baseline;
  gap: 2px;
  background: linear-gradient(120deg, var(--navy), var(--navy-glow));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.band-navy .stat-num {
  background: linear-gradient(120deg, #fff, #9FD2F0);
  -webkit-background-clip: text;
  background-clip: text;
}
.stat-label { margin-top: 14px; font-size: 14px; line-height: 1.45; color: var(--ink-50); }
.band-navy .stat-label { color: var(--navy-soft); }

/* ---------- 12. cards ---------- */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 36px 32px;
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.card:hover { border-color: transparent; box-shadow: var(--sh-lg); transform: translateY(-8px); }

/* a soft light that follows the cursor across the card; the
   two custom properties are written by JS on pointer move */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
              rgba(10, 107, 168, .1), transparent 62%);
  transition: opacity var(--t) var(--ease);
}
.card:hover::before { opacity: 1; }

.card h3 { margin-bottom: 13px; }
.card p { font-size: 16.5px; line-height: 1.64; color: var(--ink-70); }

.card-num {
  font-family: "Instrument Serif", serif;
  font-size: 16px;
  color: var(--navy);
  border: 1.5px solid var(--line);
  border-radius: 50%;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  margin-bottom: 22px;
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              border-color var(--t) var(--ease), transform var(--t) var(--spring);
}
.card:hover .card-num {
  background: var(--navy); color: #fff; border-color: var(--navy);
  transform: rotate(-8deg) scale(1.08);
}

.plate {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--navy-mist);
  color: var(--navy);
  margin-bottom: 22px;
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              transform var(--t) var(--spring);
}
.card:hover .plate { background: var(--navy); color: #fff; transform: rotate(-8deg) scale(1.08); }
.plate svg { width: 24px; height: 24px; }

/* ---------- 13. split + pillars ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(36px, 6vw, 86px);
  align-items: start;
}
.split-sticky { position: sticky; top: calc(var(--header-h) + 40px); }
.split-index { display: grid; gap: 12px; }

.pillar {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--r-md);
  padding: 22px 28px;
  cursor: pointer;
  transition: border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease),
              background var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.pillar:hover { transform: translateX(8px); box-shadow: var(--sh-md); border-color: transparent; }
.pillar[aria-expanded="true"] {
  background: linear-gradient(150deg, var(--navy), var(--navy-deep));
  border-color: transparent;
  box-shadow: var(--sh-lg);
}

.pillar-title {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: "Instrument Serif", serif;
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  line-height: 1.16;
  color: var(--ink);
  transition: color var(--t) var(--ease);
}
.pillar[aria-expanded="true"] .pillar-title { color: #fff; }

/* the round +/- marker on each pillar */
.pillar-title::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background:
    linear-gradient(currentColor, currentColor) center/13px 1.6px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.6px 13px no-repeat;
  transition: transform var(--t) var(--spring), border-color var(--t) var(--ease);
}
.pillar[aria-expanded="true"] .pillar-title::after {
  transform: rotate(135deg);
  border-color: rgba(255,255,255,.4);
}

.pillar-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-slow) var(--ease-out), opacity var(--t) var(--ease);
  opacity: 0;
}
.pillar[aria-expanded="true"] .pillar-body { grid-template-rows: 1fr; opacity: 1; }
.pillar-body > div { overflow: hidden; }
.pillar-body p { padding-top: 16px; font-size: 16.5px; color: var(--on-navy); line-height: 1.65; }

/* ---------- 14. checklists ---------- */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.checks li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-70);
  transition: transform var(--t) var(--ease);
}
.checks li:hover { transform: translateX(6px); }
.checks .tick {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--navy-mist);
  color: var(--navy);
  display: grid; place-items: center;
  margin-top: 1px;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.checks li:hover .tick { background: var(--navy); color: #fff; }
.checks .tick svg { width: 13px; height: 13px; }
.band-navy .checks li { color: var(--on-navy); }
.band-navy .checks .tick { background: rgba(255,255,255,.15); color: #fff; }
.band-navy .checks li:hover .tick { background: #fff; color: var(--navy); }

/* ---------- 15. client marquee ---------- */
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  padding-block: 8px;
}
.marquee-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: slide 42s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }

.client-mark {
  display: inline-flex;
  align-items: center;
  padding: 15px 32px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--paper);
  font-family: "Instrument Serif", serif;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  color: var(--navy);
  white-space: nowrap;
  transition: transform var(--t) var(--spring), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.client-mark:hover { transform: translateY(-5px) scale(1.03); box-shadow: var(--sh-md); border-color: transparent; }

/* ---------- 16. quote ---------- */
.quote {
  position: relative;
  padding: clamp(34px, 5vw, 58px) clamp(28px, 4vw, 56px);
  border-radius: var(--r-xl);
  background: var(--shell);
  overflow: hidden;
}
.quote::before {
  content: "";
  position: absolute;
  left: -40px; top: -60px;
  font-size: 260px;
  line-height: 1;
  font-family: "Instrument Serif", serif;
  color: var(--navy);
  opacity: .06;
  content: "\201C";
}
.quote blockquote {
  margin: 0;
  font-family: "Instrument Serif", serif;
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  line-height: 1.3;
  color: var(--ink);
}
.quote cite {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 9px 20px;
  border-radius: var(--r-pill);
  background: var(--paper);
  font-family: Inter, sans-serif;
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--navy);
}

/* ---------- 17. leader ---------- */
.leader {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(36px, 6vw, 76px);
  align-items: start;
}
.portrait {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--navy-mist);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  box-shadow: var(--sh-lg);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }

/* The portrait wipes up rather than fading. A face sliding into
   view reads as deliberate where a fade reads as a slow image
   load, which is exactly the wrong first impression here. The
   .reveal defaults are neutralised so the two do not stack. */
.portrait { transition: clip-path 1.05s var(--ease-out); }
.portrait.reveal {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
}
.portrait.reveal.is-in { clip-path: inset(0 0 0 0); }
.portrait-empty { text-align: center; padding: 30px; color: var(--ink-50); font-size: 13.5px; line-height: 1.5; }
.portrait-empty .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; display: inline-block; margin-top: 12px;
  padding: 7px 16px; border-radius: var(--r-pill);
  background: var(--paper); color: var(--navy);
}

.creds { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.creds li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  padding: 22px 26px;
  border-radius: var(--r-md);
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 15.5px;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.creds li:hover { transform: translateX(8px); box-shadow: var(--sh-md); border-color: transparent; }
.creds .yr {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--navy);
  background: var(--navy-mist);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  align-self: start;
}
.creds strong { font-weight: 600; display: block; }
.creds span.sub { color: var(--ink-50); font-size: 14.5px; }

/* ---------- 18. sectors ---------- */
.sector h3 { font-size: 1.15rem; margin-bottom: 8px; }
.sector p { font-size: 14.5px; color: var(--ink-50); line-height: 1.55; }

/* ---------- 19. coverage ---------- */
.coverage { display: flex; flex-wrap: wrap; gap: 14px; }
.country {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 26px 12px 12px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.05);
  font-size: 15px;
  font-weight: 500;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              transform var(--t) var(--spring);
}
.country:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.5); transform: translateY(-4px); }

/* ---------- 20. CTA ---------- */
.cta {
  background: linear-gradient(140deg, var(--navy) 0%, var(--navy-deep) 70%, var(--navy-ink) 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(48px, 6.5vw, 84px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--sh-xl);
}
.cta::before {
  content: "";
  position: absolute;
  right: -12%; top: -50%;
  width: 60%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10,107,168,.5), transparent 66%);
  filter: blur(36px);
  z-index: -1;
  animation: drift1 21s var(--ease) infinite alternate;
}
.cta::after {
  content: "";
  position: absolute;
  left: -8%; bottom: -46%;
  width: 44%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10,107,168,.32), transparent 68%);
  filter: blur(38px);
  z-index: -1;
  animation: drift2 27s var(--ease) infinite alternate;
}
.cta h2 { color: #fff; max-width: 18ch; }
.cta .lede { color: var(--on-navy); margin-top: 22px; }
.cta .btn-row { margin-top: 36px; }

/* ---------- 21. contact + forms ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(34px, 5vw, 68px);
  align-items: start;
}

.office {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px;
  background: var(--paper);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.office:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: transparent; }
.office + .office { margin-top: 18px; }
.office h3 { font-size: 1.3rem; margin-bottom: 4px; }
.office .where {
  display: inline-block;
  padding: 6px 16px;
  border-radius: var(--r-pill);
  background: var(--navy-mist);
  font-size: 11.5px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--navy); margin-bottom: 16px;
}
.office dl { margin: 0; display: grid; gap: 14px; }
.office .row { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; }
.office .row .tick {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--navy-mist); color: var(--navy);
  display: grid; place-items: center;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.office .row:hover .tick { background: var(--navy); color: #fff; }
.office .row .tick svg { width: 15px; height: 15px; }
.office .row > span, .office .row > a { padding-top: 5px; }
.office a { color: var(--navy); text-decoration: none; font-weight: 500; }
.office a:hover { text-decoration: underline; }

.form-card {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(28px, 3.5vw, 46px);
  background: var(--paper);
  box-shadow: var(--sh-md);
}

.field { margin-bottom: 20px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 9px; color: var(--ink); }
.field .hint { font-weight: 400; color: var(--ink-50); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 16px 22px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--shell);
  font-size: 15.5px;
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; border-radius: var(--r-md); }
.field select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2303375C' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  padding-right: 48px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--navy);
  background: var(--paper);
  box-shadow: 0 0 0 4px rgba(3, 55, 92, .1);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: #B03A40; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* honeypot: gone visually, still in the DOM for bots to fill */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: 13px; color: var(--ink-50); margin-top: 18px; line-height: 1.55; }

.form-status {
  margin-top: 20px;
  padding: 18px 22px;
  border-radius: var(--r-md);
  font-size: 14.5px;
  line-height: 1.55;
  display: none;
}
.form-status.is-on { display: block; animation: pop 460ms var(--spring); }
@keyframes pop {
  from { opacity: 0; transform: scale(.94) translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.form-status.ok  { background: #ECF5EF; border: 1px solid #BEDCC8; color: #1D4E2E; }
.form-status.err { background: #FCEFEF; border: 1px solid #E8C8C8; color: #7A2226; }
.form-status a { color: inherit; font-weight: 600; }

.btn[data-busy="true"] { opacity: .62; pointer-events: none; }

/* ---------- 22. footer ---------- */
.site-footer {
  background: linear-gradient(160deg, var(--navy-deep), var(--navy-ink));
  color: #fff;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  margin-inline: clamp(8px, 2vw, 26px);
  padding-block: clamp(56px, 6.5vw, 90px) 36px;
  margin-top: clamp(30px, 4vw, 50px);
  position: relative;
  overflow: hidden;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 44px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.footer-brand img {
  height: 82px; width: auto;
  background: #fff;
  padding: 14px 20px;
  border-radius: var(--r-md);
}
.footer-brand p { margin-top: 22px; font-size: 15.5px; line-height: 1.62; color: var(--navy-soft); max-width: 38ch; }

.footer-col h4 {
  font-family: Inter, sans-serif;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy-soft); margin-bottom: 20px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.footer-col a {
  display: inline-block;
  font-size: 15.5px;
  color: var(--on-navy);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.footer-col a:hover { color: #fff; transform: translateX(5px); }

.footer-bottom {
  padding-top: 28px;
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: space-between; align-items: center;
  font-size: 14px; color: var(--navy-soft);
}

/* ---------- 23. responsive ---------- */
@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 38px; }
}

@media (max-width: 940px) {
  .nav-toggle { display: grid; }

  /* Anchored to the viewport, which it can be because the
     header's blur sits on a pseudo-element rather than on the
     header itself. See the note beside .site-header::before. */
  .nav {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    height: 100vh;
    height: calc(100dvh - var(--header-h));
    background: var(--paper);
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 24px var(--gut) 44px;
    overflow-y: auto;
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav a {
    padding: 18px 24px;
    font-size: 18px;
    border-radius: var(--r-pill);
    background: var(--shell);
  }
  .nav a:hover { background: var(--navy-mist); }

  .hero-grid, .split, .leader, .contact-grid { grid-template-columns: 1fr; }
  .split-sticky { position: static; }
}

/* The seven nav items and the CTA cannot both fit on one row much
   below this, and French runs longer than English at every label.
   Dropping the CTA here keeps the nav on one line; the same call to
   action is still the first thing in the hero on every page. */
@media (max-width: 1100px) {
  .header-actions .btn { display: none; }
}

@media (max-width: 620px) {
  body { font-size: 16.5px; }
  .brand img { height: 30px; }
  .brand-name { font-size: 16px; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .creds li { grid-template-columns: 1fr; gap: 8px; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .band-shell, .band-navy, .hero, .site-footer { border-radius: var(--r-lg); }
}

/* ---------- 24. motion preference ---------- */
/* Everything above is decoration. A visitor who has asked their
   operating system for less motion gets the same site with none
   of it, not a degraded one. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .reveal { opacity: 1; transform: none; filter: none; }
  .split-word { opacity: 1; transform: none; filter: none; }
  .presence-card.reveal { transform: none; }
  .sec-head::after, .sec-head.reveal::after { transform: scaleX(1); }
  .portrait.reveal { clip-path: none; }
  .presence-card h2,
  .presence-card .presence-row { opacity: 1; transform: none; }
  .hero-canvas .arc { stroke-dashoffset: 0; }
  .marquee-track { animation: none; }
  .presence-card { animation: none; }
  .orb { animation: none; }
}

/* ---------- 25. print ---------- */
@media print {
  .site-header, .site-footer, .cta, .nav-toggle, .lang, .progress, .orb { display: none !important; }
  body { font-size: 11pt; }
  .hero, .band-navy { background: none !important; color: var(--ink); }
  .hero h1, .hero .lede, .band-navy h2, .band-navy .lede { color: var(--ink); }
  .reveal, .split-word { opacity: 1; transform: none; filter: none; }
}