/* ================================================
   TRADEABLE HOUSE AFRICA — HOMEPAGE
   Art Direction Spec v2 · Brand Kit · SMC · Copy
   ================================================ */

/* --- DESIGN TOKENS --- */
:root {
  /* Brand colours — Brand Kit authority (#000F22, #F25E23) */
  --c-navy:             #000F22;
  --c-navy-mid:         #0A1929;
  --c-navy-light:       #112236;
  --c-orange:           #F25E23;
  --c-orange-hover:     #D84E18;
  --c-orange-subtle:    rgba(242,94,35,0.09);
  /* Warm coral — gradient midpoint for the capability wave only; not a
     general-purpose brand colour, kept close to --c-orange. */
  --c-coral:            #FF8A5C;

  /* Surfaces — 75% white distribution target */
  --c-white:            #FFFFFF;
  --c-surface-light:    #FFFFFF;
  --c-surface-off:      #FFFFFF;
  --c-surface-soft:     color-mix(in srgb, var(--c-navy) 3%, var(--c-white));
  --c-surface-card:     #FFFFFF;

  /* Text — light mode */
  --c-text-primary:     #000000;
  --c-text-secondary:   #4A4845;
  --c-text-tertiary:    #8C8A86;
  --c-text-overline:    #F25E23;

  /* Text — dark mode */
  --c-text-on-dark:              #FFFFFF;
  --c-text-on-dark-secondary:    rgba(255,255,255,0.68);
  --c-text-on-dark-tertiary:     rgba(255,255,255,0.38);

  /* Borders */
  --c-border-light:    rgba(0,15,34,0.09);
  --c-border-mid:      rgba(0,15,34,0.16);
  --c-section-divider: var(--c-border-mid);
  --c-border-dark:     rgba(255,255,255,0.09);
  --c-border-orange:   rgba(242,94,35,0.32);

  /* Hero overlay — intentionally dark (video) */
  --overlay-hero: linear-gradient(
    to bottom,
    rgba(0,15,34,0.42) 0%,
    rgba(0,15,34,0.30) 55%,
    rgba(0,15,34,0.72) 100%
  );

  /* Typography */
  --font-display: 'EB Garamond', Georgia, serif;
  --font-serif:   'Cormorant', Georgia, serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Spacing */
  --section-pad:    120px;
  --container-max:  1280px;
  --container-pad:  80px;

  /* Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 999px;

  /* Motion */
  --dur-fast:   180ms;
  --dur-medium: 340ms;
  --dur-slow:   540ms;
  --ease-default: cubic-bezier(0.25, 0.10, 0.25, 1.00);
  --ease-enter:   cubic-bezier(0.00, 0.00, 0.20, 1.00);

  /* Shadows (light surfaces only) */
  --shadow-card:       0 1px 3px rgba(0,15,34,0.07), 0 4px 12px rgba(0,15,34,0.05);
  --shadow-card-hover: 0 4px 20px rgba(0,15,34,0.13), 0 8px 36px rgba(0,15,34,0.07);
}

/* --- RESET --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 96px; }
@media (max-width: 768px) {
  section[id] { scroll-margin-top: 84px; }
}
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-text-primary);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul, ol { list-style: none; }

/* --- LAYOUT UTILITIES --- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* --- GLOBAL: OVERLINE LABEL --- */
.overline {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-text-overline);
  margin-bottom: 16px;
}

/* --- GLOBAL: BUTTONS --- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--c-orange);
  color: var(--c-white);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  padding: 14px 30px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: background var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-medium);
  text-decoration: none;
}
.btn-primary:hover { background: var(--c-orange-hover); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(242,94,35,0.24); }
.btn-primary:active { transform: translateY(0); box-shadow: none; }
.btn-primary svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform var(--dur-fast); }
.btn-primary:hover svg { transform: translateX(3px); }
.btn-primary.large { padding: 16px 40px; font-size: 15px; }

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  transition: gap var(--dur-fast), color var(--dur-fast);
}
.btn-text svg { width: 13px; height: 13px; flex-shrink: 0; }
.btn-text:hover { gap: 10px; }
.btn-text--orange { color: var(--c-orange); }
.btn-text--dark   { color: var(--c-text-on-dark-secondary); }
.btn-text--dark:hover { color: var(--c-text-on-dark); }
.btn-text--primary { color: var(--c-text-primary); font-size: 15px; }

/* --- SCROLL ANIMATIONS --- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity  var(--dur-slow) var(--ease-enter),
    transform var(--dur-slow) var(--ease-enter);
}
.reveal.from-left {
  transform: translateX(-36px);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ================================================
   GC-01: NAVIGATION
   ================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: 72px;
  display: flex;
  align-items: center;
  padding: 0 var(--container-pad);
  transition:
    background var(--dur-medium) var(--ease-default),
    box-shadow var(--dur-medium) var(--ease-default),
    height var(--dur-medium) var(--ease-default);
}
.nav--transparent { background: transparent; }
.nav--solid {
  background: var(--c-navy);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}

.nav__inner {
  width: 100%;
  max-width: calc(var(--container-max) - 2 * var(--container-pad));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.nav__logo-mark {
  width: 30px; height: 30px;
  background: var(--c-orange);
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif);
  font-size: 15px; font-weight: 600;
  color: white;
  flex-shrink: 0;
}
.nav__logo-img {
  height: 34px;
  width: auto;
  display: none; /* shown when logo.png loads */
  transition: width var(--dur-medium) var(--ease-default), max-height var(--dur-medium) var(--ease-default);
}
.nav--transparent .nav__logo-img { height: 52px; }
.nav__logo-text {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--c-white);
  letter-spacing: 0.3px;
}

.nav__hamburger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid color-mix(in srgb, var(--c-white) 55%, transparent);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: border-color var(--dur-fast);
}
.nav__hamburger:hover { border-color: var(--c-white); }
.nav__hamburger span {
  display: block;
  width: 24px; height: 1.5px;
  background: var(--c-white);
  transition: transform var(--dur-medium), opacity var(--dur-fast);
}
.nav__hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav__hamburger.open span:nth-child(2) { opacity: 0; }
.nav__hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Full-screen navigation menu — mobile and desktop. The drawer owns its
   close control, hides the real nav while open, and composes the field as a
   left watermark zone with a right-positioned, vertically centred link block.
   Fits a single viewport — never scrolls — so the link type flexes on viewport
   HEIGHT as well as width. */
.nav:has(+ .nav-drawer.open),
.nav.nav--drawer-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.nav-drawer {
  /* Drawer field + watermark controls — tune this composition here. */
  --drawer-pad-x: clamp(24px, 5vw, 64px);
  --drawer-pad-top: clamp(56px, 8vh, 104px);
  --drawer-pad-bottom: clamp(16px, 4vh, 40px);
  --drawer-mark-opacity: 0.17;
  --drawer-mark-width: clamp(540px, 64vw, 1180px);
  --drawer-mark-left: clamp(-340px, -21vw, -132px);

  --drawer-navy-deep: var(--c-navy);
  --drawer-navy-mid: var(--c-navy-mid);
  --drawer-navy-lift: var(--c-navy-light);
  --drawer-navy-edge: color-mix(in srgb, var(--c-navy-light) 84%, var(--c-white) 16%);
  --drawer-glow: color-mix(in srgb, var(--c-navy-light) 72%, transparent);
  --drawer-glow-clear: color-mix(in srgb, var(--c-navy-light) 0%, transparent);

  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  height: 100dvh;
  z-index: 199;
  /* Field + a strong cool glow on the diamond (left), answered by a fainter
     cool seam hugging the right edge — lighting the right third so it reads as
     a balanced diptych rather than a left-weighted composition. */
  background:
    radial-gradient(86% 82% at 24% 50%,
      color-mix(in srgb, var(--c-navy-light) 72%, var(--c-white) 28%) 0%,
      color-mix(in srgb, var(--c-navy-light) 60%, transparent) 32%,
      transparent 66%),
    radial-gradient(44% 76% at 100% 50%,
      color-mix(in srgb, var(--c-navy-light) 56%, var(--c-white) 16%) 0%,
      color-mix(in srgb, var(--c-navy-light) 32%, transparent) 40%,
      transparent 68%),
    linear-gradient(135deg,
      var(--c-navy) 0%,
      var(--c-navy-mid) 50%,
      var(--c-navy-light) 100%);
  transform: translateY(-100%);
  transition: transform var(--dur-slow) var(--ease-enter);
  display: flex;
  flex-direction: column;
  padding: var(--drawer-pad-top) var(--drawer-pad-x) var(--drawer-pad-bottom);
  overflow: hidden;
}
.nav-drawer.open { transform: translateY(0); }

/* The light. A soft directional bloom — navy-light with a coral whisper at the
   core — drifting slowly off-axis beneath the faint diamond, so the form reads
   as if raked by a single moving source rather than evenly painted. Oversized
   and inset-negative so it never shows a hard edge inside the clipped field. */
.nav-drawer::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: -30%;
  pointer-events: none;
  background:
    radial-gradient(40% 48% at 32% 50%,
      color-mix(in srgb, var(--c-coral) 20%, transparent) 0%,
      color-mix(in srgb, var(--c-navy-light) 70%, var(--c-white) 22%) 22%,
      color-mix(in srgb, var(--c-navy-light) 40%, transparent) 46%,
      transparent 64%);
  transform: translate3d(0, 0, 0);
  will-change: transform;
  animation: monolithDrift 16s var(--ease-default) infinite alternate;
}

/* Counter-mass — the diptych's other panel. A larger, far fainter fragment of
   the same mark presses in from the right edge: the opposite face of one form.
   Bigger scale + much lower opacity than the left diamond keep it a
   counterweight, not a mirror, and close the empty right third. */
.nav-drawer::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  right: clamp(-560px, -32vw, -240px);
  width: clamp(640px, 76vw, 1480px);
  aspect-ratio: 337.012 / 224.042;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.09;
  background: color-mix(in srgb, var(--c-navy-light) 66%, var(--c-white) 34%);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20337.012%20224.042'%3E%3Cpath%20fill='%23fff'%20d='M0,109.792L119.31,0L131.247,12.972L11.937,122.764ZM24.927,134.722L144.237,24.93L156.175,37.903L36.865,147.694ZM220.602,0.372L337.012,111.302L220.602,224.042L168.882,172.522L116.842,220.402L104.902,207.432L156.372,160.072L144.912,148.662L90.662,198.592L78.722,185.612L132.412,136.202L117.272,121.132L61.562,172.392L49.622,159.422L129.292,86.102Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20337.012%20224.042'%3E%3Cpath%20fill='%23fff'%20d='M0,109.792L119.31,0L131.247,12.972L11.937,122.764ZM24.927,134.722L144.237,24.93L156.175,37.903L36.865,147.694ZM220.602,0.372L337.012,111.302L220.602,224.042L168.882,172.522L116.842,220.402L104.902,207.432L156.372,160.072L144.912,148.662L90.662,198.592L78.722,185.612L132.412,136.202L117.272,121.132L61.562,172.392L49.622,159.422L129.292,86.102Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}

.nav-drawer__close {
  position: absolute;
  top: clamp(20px, 4vw, 42px);
  right: var(--drawer-pad-x);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid color-mix(in srgb, var(--c-white) 55%, transparent);
  border-radius: 50%;
  background: transparent;
  color: var(--c-white);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-default),
    color var(--dur-fast) var(--ease-default),
    transform var(--dur-fast) var(--ease-default);
}
.nav-drawer__close:hover {
  border-color: var(--c-white);
}
.nav-drawer__close:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--c-white) 70%, transparent);
  outline-offset: 4px;
  border-color: var(--c-white);
}
.nav-drawer__close:active {
  transform: scale(0.96);
}
.nav-drawer__close svg {
  width: 20px;
  height: 20px;
}

/* Large faint diamond — left aligned at mid-height, bleeding off the left edge
   only while remaining contained vertically. */
.nav-drawer__mark {
  position: absolute;
  left: var(--drawer-mark-left);
  top: 50%;
  width: var(--drawer-mark-width);
  height: auto;
  transform: translateY(-50%);
  color: var(--c-orange);
  opacity: var(--drawer-mark-opacity);
  z-index: 0;
  pointer-events: none;
}

.nav-drawer__links {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(2px, 1vh, 10px);
  min-height: 0;
  width: 100%;
  /* Safety net: if a short viewport can't fit all links, the list scrolls
     instead of clipping off the bottom — links stay reachable. */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-left: clamp(320px, 47vw, 740px);
  padding-right: clamp(24px, 8vw, 132px);
}
.nav-drawer__links a {
  position: relative;
  display: inline-block;
  padding: clamp(4px, 1vh, 12px) 0;
  font-family: var(--font-body);
  font-size: clamp(24px, 1.4rem + 1.9vh, 46px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--c-text-on-dark);
  transition: color var(--dur-fast);
}
/* Fine orange underline reveals on hover/focus — hugs the text, not the box. */
.nav-drawer__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: clamp(2px, 0.6vh, 8px);
  width: 100%;
  height: 1.5px;
  background: var(--c-orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-medium) var(--ease-default);
}
.nav-drawer__links a:hover::after,
.nav-drawer__links a:focus-visible::after { transform: scaleX(1); }

.nav-drawer__footer {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-left: calc(0px - var(--drawer-pad-x));
  margin-right: calc(0px - var(--drawer-pad-x));
  border-top: 1px solid var(--c-border-dark);
  padding: 16px var(--drawer-pad-x) 0;
}
.nav-drawer__social-label {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--c-text-on-dark-tertiary);
}
.nav-drawer__social-icons {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav-drawer__social-icons a {
  display: flex;
  color: var(--c-text-on-dark-secondary);
  transition: color var(--dur-fast);
}
.nav-drawer__social-icons a:hover { color: var(--c-white); }
.nav-drawer__social-icons svg { width: 18px; height: 18px; }

@media (max-width: 1023px) {
  .nav-drawer__links {
    padding-left: clamp(210px, 40vw, 390px);
    padding-right: clamp(20px, 6vw, 64px);
  }
}

@media (max-width: 767px) {
  .nav-drawer {
    --drawer-pad-x: var(--container-pad);
    --drawer-mark-width: min(520px, 118vw);
    --drawer-mark-left: clamp(-170px, -32vw, -88px);
  }

  .nav-drawer__close {
    width: 42px;
    height: 42px;
  }

  .nav-drawer__links {
    padding-left: clamp(72px, 24vw, 150px);
    padding-right: 0;
  }

  .nav-drawer__links a {
    display: inline-block;
    min-height: 0;
  }

  /* The right-edge counter-mass solves a wide-screen imbalance; the narrow
     mobile drawer has no empty right third, so drop it to keep mobile clean. */
  .nav-drawer::after { display: none; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .nav-drawer {
    --drawer-pad-top: 52px;
    --drawer-pad-bottom: 10px;
    --drawer-mark-width: clamp(360px, 58vw, 560px);
    --drawer-mark-left: clamp(-180px, -18vw, -72px);
  }

  .nav-drawer__close {
    top: 12px;
    width: 38px;
    height: 38px;
  }

  .nav-drawer__close svg {
    width: 18px;
    height: 18px;
  }

  .nav-drawer__links {
    gap: 0;
  }

  .nav-drawer__links a {
    padding: clamp(1px, 0.35vh, 4px) 0;
    line-height: 1.08;
  }

  .nav-drawer__footer {
    padding-top: 10px;
  }
}

/* ================================================
   SEC-H02: HERO
   Intentionally dark — video is the primary element
   ================================================ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  background: var(--c-navy-mid);
}

.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
}

.hero__overlay {
  position: absolute; inset: 0;
  background: var(--overlay-hero);
  z-index: 1;
}

/* Content: lower-left anchored per SMC */
.hero__content {
  position: absolute; inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--container-pad) 112px;
  max-width: 860px;
}

.hero__label {
  display: block;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-text-on-dark-secondary);
  margin-bottom: 22px;
  opacity: 0;
  animation: fadeUp 540ms var(--ease-enter) 220ms forwards;
}

.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.8vw, 72px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -1.5px;
  color: var(--c-white);
  max-width: 700px;
  margin-bottom: 26px;
  opacity: 0;
  animation: fadeUp 540ms var(--ease-enter) 360ms forwards;
}

.hero__sub {
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 400;
  line-height: 1.65;
  color: var(--c-text-on-dark-secondary);
  max-width: 540px;
  margin-bottom: 14px;
  opacity: 0;
  animation: fadeUp 540ms var(--ease-enter) 500ms forwards;
}

.hero__body {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.72;
  color: var(--c-text-on-dark-secondary);
  max-width: 500px;
  margin-bottom: 40px;
  opacity: 0;
  animation: fadeUp 540ms var(--ease-enter) 600ms forwards;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  opacity: 0;
  animation: fadeUp 540ms var(--ease-enter) 720ms forwards;
}

.hero__scroll-indicator {
  position: absolute;
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  opacity: 0;
  animation: fadeIn 540ms var(--ease-enter) 1.1s forwards, softPulse 3.2s ease-in-out 1.6s infinite;
  pointer-events: none;
}
.hero__scroll-indicator svg {
  width: 22px; height: 22px;
  color: white;
  opacity: 0.44;
}

/* ================================================
   SEC-H03: EVIDENCE STRIP
   White · Typography-dominant
   ================================================ */
.evidence-strip {
  background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-mid) 60%, var(--c-navy-light) 100%);
  padding: clamp(56px, 6vw, 76px) 0;
}

.metrics-row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.metric {
  flex: 1;
  text-align: center;
  padding: 0 40px;
  position: relative;
}
.metric + .metric::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 44px;
  background: rgba(255,255,255,0.14);
}

.metric__number {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(34px, 3.8vw, 52px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.8px;
  color: var(--c-text-on-dark);
  margin-bottom: 8px;
}

.metric__label {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.3px;
  color: var(--c-text-on-dark-secondary);
}

/* Credential line — three uniform items in one font and size (no number/label
   tiers), separated by thin dividers carrying a whisper of orange. Fresh class
   names so the heavily-overridden .metric* cascade no longer applies. */
/* Credential line — three equal-width columns, separated by space alone (no
   divider). Fresh class names so the heavily-overridden .metric* cascade no
   longer applies. */
.evidence-line {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
}

.evidence-line__item {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: 0.1px;
  color: var(--c-text-on-dark);
  text-align: center;
  max-width: max-content;
  width: fit-content;
  margin: 0 auto;
}

.evidence-line__item:nth-child(1) {
  transform: translateX(14px);
}

.evidence-line__item:nth-child(3) {
  transform: translateX(-14px);
}

/* All three items center within their own equal-width column — true equal
   thirds. (Previously the outer two were anchored to the strip's edges,
   which made the spacing read as uneven/pulled-apart rather than as one
   evenly distributed row.) */

/* Below desktop the three 34px two-line items can't sit in equal thirds without
   crowding, so they stack into a single column. Desktop keeps the equal-thirds
   row. */
@media (max-width: 1023px) {
  .evidence-line {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 20px;
  }
  .evidence-line__item {
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.14);
  }
  .evidence-line__item:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }
  .evidence-line__item:nth-child(1),
  .evidence-line__item:nth-child(3) {
    transform: none;
  }
}

/* ================================================
   SEC-H04: THE EXECUTION GAP
   White — Art Direction Override (was navy in SMC)
   Editorial, report-style reading experience
   ================================================ */
.execution-gap {
  background: var(--c-white);
  padding: var(--section-pad) 0;
  border-bottom: 1px solid var(--c-border-light);
}

.execution-gap__intro-block {
  margin-bottom: 80px;
  max-width: 760px;
}

.execution-gap__headline {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.8vw, 54px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--c-text-primary);
  margin-bottom: 28px;
}

.execution-gap__intro-copy {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.72;
  color: var(--c-text-secondary);
}

.execution-gap__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-bottom: 72px;
}

.execution-gap__col-label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-text-tertiary);
  margin-bottom: 36px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-border-light);
}

.challenge-item {
  display: flex;
  gap: 18px;
  margin-bottom: 0;
  padding: 28px 0;
  border-bottom: 1px dashed var(--c-border-light);
}
.challenge-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.challenge-item__num {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 500;
  color: var(--c-orange);
  line-height: 1;
  flex-shrink: 0;
  width: 38px;
  margin-top: 2px;
}

.challenge-item__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--c-text-primary);
  margin-bottom: 7px;
  line-height: 1.3;
}

.challenge-item__body {
  font-size: 14px;
  line-height: 1.68;
  color: var(--c-text-secondary);
}

.pull-quote {
  border-left: 2.5px solid var(--c-orange);
  padding-left: 28px;
  max-width: 640px;
}
.pull-quote__text {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.42;
  letter-spacing: -0.2px;
  color: var(--c-text-primary);
}

/* ================================================
   SEC-H05: WHAT WE DO OVERVIEW
   White — editorial, minimal card usage
   ================================================ */
.what-we-do {
  position: relative;
  background: var(--c-surface-light);
}

/* ── CAPABILITIES — light section: intro header + navy card grid ── */
.cap-body {
  position: relative;
  background: var(--c-surface-light);
  padding: clamp(72px, 9vw, 128px) 0 clamp(72px, 8vw, 112px);
}

.cap-body .container {
  position: relative;
  z-index: 1;
}

.section-header { margin-bottom: 60px; }

.section-headline {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 50px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.5px;
  color: var(--c-text-primary);
  max-width: 620px;
  margin-bottom: 20px;
}
.section-headline--md {
  font-size: clamp(26px, 2.8vw, 42px);
  max-width: 560px;
}

.section-intro {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.72;
  color: var(--c-text-secondary);
  max-width: 540px;
}

.section-cta {
  margin-top: 44px;
}

/* Visually-hidden helper for screen-reader-only labels. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── CAPABILITY NODES — four icon circles strung along a subtle serpentine.
   Icon in the circle, short label below, a "+" affordance; clicking opens
   the capability modal. Entrance handled by the shared .reveal observer. ── */
.cap-nodes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: clamp(24px, 3vw, 56px);
  margin-top: clamp(36px, 4vw, 60px);
  padding: clamp(20px, 3vw, 40px) 0 8px;
}

/* Decorative connecting wave — sits behind the row, fades in/out at both
   edges. Desktop/large-tablet only (see fallback below); a continuity motif,
   not a literal sequence, since the four capabilities run concurrently. */
.cap-nodes__wave {
  position: absolute;
  left: -6%;
  right: -6%;
  top: 50%;
  width: 112%;
  height: clamp(90px, 9vw, 130px);
  transform: translateY(-50%);
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

.cap-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cap-node__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

/* Open orange ring, no fill — the icon sits in navy on the light section. */
.cap-node__circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(132px, 12.5vw, 174px);
  height: clamp(132px, 12.5vw, 174px);
  border-radius: 50%;
  /* Opaque backing matching the section surface — the ring stays "no fill"
     visually, but this stops the wave behind the row from showing through
     the circle's interior. */
  background: var(--c-surface-light);
  border: 2px solid var(--c-orange);
  color: var(--c-navy);
  margin-bottom: clamp(28px, 3vw, 40px);
  transition:
    box-shadow var(--dur-medium) var(--ease-default),
    transform var(--dur-medium) var(--ease-enter);
}

.cap-node__icon {
  width: clamp(74px, 7vw, 98px);
  height: clamp(74px, 7vw, 98px);
  display: block;
}

/* "+" affordance — small navy disc, so it reads against the orange ring. */
.cap-node__plus {
  position: absolute;
  right: 4%;
  bottom: 4%;
  width: clamp(30px, 2.6vw, 36px);
  height: clamp(30px, 2.6vw, 36px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-navy);
  color: var(--c-white);
  box-shadow: 0 2px 10px rgba(0,15,34,0.22);
  transition: transform var(--dur-medium) var(--ease-enter);
}
.cap-node__plus svg { width: 54%; height: 54%; }

/* Indexed caption: orange Cormorant numeral over a confident serif name,
   set apart from the circle so it reads as a titled item, not a caption. */
.cap-node__num {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(22px, 1.9vw, 28px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--c-orange);
  margin-bottom: 12px;
}

.cap-node__label {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.1vw, 31px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.4px;
  color: var(--c-text-primary);
  max-width: 12ch;
}

@media (hover: hover) {
  .cap-node__btn:hover .cap-node__circle {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-orange) 12%, transparent);
  }
  .cap-node__btn:hover .cap-node__plus {
    transform: scale(1.08);
  }
}
.cap-node__btn:focus-visible {
  outline: none;
}
.cap-node__btn:focus-visible .cap-node__circle {
  outline: 2px solid color-mix(in srgb, var(--c-orange) 70%, transparent);
  outline-offset: 4px;
}

/* ── CAPABILITY MODAL — index left · circular image · single paragraph ── */
.cap-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 56px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-medium) var(--ease-default), visibility 0s linear var(--dur-medium);
}
.cap-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-medium) var(--ease-default);
}

.cap-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,15,34,0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.cap-modal__panel-wrap {
  position: relative;
  width: min(1200px, 100%);
  max-height: calc(100dvh - clamp(40px, 8vw, 112px));
  overflow-y: auto;
  background: var(--c-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0,15,34,0.30);
  padding: clamp(32px, 4vw, 64px);
  transform: translateY(12px);
  transition: transform var(--dur-medium) var(--ease-enter);
}
.cap-modal.is-open .cap-modal__panel-wrap { transform: translateY(0); }

.cap-modal__close {
  position: absolute;
  top: clamp(18px, 2vw, 28px);
  right: clamp(18px, 2vw, 28px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 6px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--c-text-secondary);
  transition: color var(--dur-fast) var(--ease-default);
}
.cap-modal__close:hover { color: var(--c-orange); }
.cap-modal__close svg { width: 18px; height: 18px; }

.cap-modal__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-text-overline);
  margin-bottom: clamp(20px, 2.4vw, 32px);
}

.cap-modal__layout {
  display: grid;
  grid-template-columns: minmax(168px, 0.7fr) minmax(300px, 1.3fr) minmax(0, 1.45fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
}

/* Index — a vertical coral spine (same gradient + glow as the home-page wave)
   threads the four capabilities, with a node on each item and an orange
   underline beneath the selected one. */
.cap-modal__index {
  position: relative;
  display: flex;
  flex-direction: column;
}

.cap-modal__index-line {
  position: absolute;
  left: 8px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--c-orange) 14%,
    var(--c-coral) 50%,
    var(--c-orange) 86%,
    transparent 100%
  );
  box-shadow: 0 0 7px color-mix(in srgb, var(--c-coral) 55%, transparent);
  pointer-events: none;
}

.cap-modal__index-item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  text-align: left;
  background: none;
  border: 0;
  padding: 18px 0 18px 32px;
  cursor: pointer;
  color: var(--c-text-secondary);
  transition: color var(--dur-fast) var(--ease-default);
}

/* Node on the spine — hollow at rest, filled coral with a glow when active. */
.cap-modal__index-item::before {
  content: '';
  position: absolute;
  left: 2.5px;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--c-white);
  border: 1.5px solid color-mix(in srgb, var(--c-coral) 65%, transparent);
  transition: background var(--dur-fast) var(--ease-default),
              border-color var(--dur-fast) var(--ease-default),
              box-shadow var(--dur-fast) var(--ease-default);
}

/* Orange underline beneath the selected heading — grows in from the left. */
.cap-modal__index-item::after {
  content: '';
  position: absolute;
  left: 32px;
  right: 0;
  bottom: 8px;
  height: 2px;
  background: var(--c-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-medium) var(--ease-default);
}

.cap-modal__index-item:hover { color: var(--c-text-primary); }

.cap-modal__index-num {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--c-text-tertiary);
  transition: color var(--dur-fast) var(--ease-default);
}
.cap-modal__index-name {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
}

.cap-modal__index-item.is-active { color: var(--c-text-primary); }
.cap-modal__index-item.is-active .cap-modal__index-num { color: var(--c-orange); }
.cap-modal__index-item.is-active::before {
  background: var(--c-coral);
  border-color: var(--c-coral);
  box-shadow: 0 0 9px color-mix(in srgb, var(--c-coral) 75%, transparent);
}
.cap-modal__index-item.is-active::after { transform: scaleX(1); }

/* Stage / panels */
.cap-modal__stage { display: contents; }
.cap-modal__panel { display: none; }
.cap-modal__panel.is-active { display: contents; }

/* Soft slide-fade as a new capability becomes active. Panels use
   display:contents, so we animate their rendered children (media + detail);
   toggling display re-fires the keyframe on every switch. Enter-only — the
   outgoing panel simply unmounts. */
@keyframes capPanelIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cap-modal__panel.is-active .cap-modal__media,
.cap-modal__panel.is-active .cap-modal__detail {
  animation: capPanelIn var(--dur-medium) var(--ease-enter) both;
}
.cap-modal__panel.is-active .cap-modal__detail {
  animation-delay: 40ms;
}

.cap-modal__media {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 400px;
  justify-self: center;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(150deg, var(--c-navy) 0%, var(--c-navy-mid) 60%, var(--c-navy-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cap-modal__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.cap-modal__media-placeholder {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.5);
  text-align: center;
  padding: 0 16px;
}

.cap-modal__num {
  display: block;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--c-orange);
  margin-bottom: 10px;
}
.cap-modal__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.4px;
  color: var(--c-text-primary);
  /* Reserve two lines so a short title (e.g. "Trade Facilitation") occupies
     the same height as the longest ("Project & Infrastructure Solutions"),
     keeping the panel — and the locked modal — uniform between capabilities. */
  min-height: 2.24em;
  margin: 0 0 18px;
}
.cap-modal__body {
  font-size: 17px;
  line-height: 1.72;
  color: var(--c-text-secondary);
  margin: 0;
}

/* Up/down step navigation — follows the modal content so it never masks copy.
   An arrow is filled (orange gradient) when there's somewhere to go in that
   direction, and a quiet outline at the ends where there isn't. */
.cap-modal__nav {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: clamp(24px, 3vw, 40px);
  position: static;
  background: transparent;
  padding-top: 0;
}
.cap-modal__step {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--c-border-light);
  background: var(--c-white);
  cursor: pointer;
  color: var(--c-text-tertiary);
  transition: color var(--dur-fast) var(--ease-default),
              border-color var(--dur-fast) var(--ease-default),
              box-shadow var(--dur-fast) var(--ease-default),
              filter var(--dur-fast) var(--ease-default);
}
.cap-modal__step.is-filled {
  border-color: transparent;
  background: linear-gradient(135deg, var(--c-orange) 0%, var(--c-coral) 100%);
  color: var(--c-white);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--c-orange) 28%, transparent);
}
.cap-modal__step.is-filled:hover { filter: brightness(1.06); }
.cap-modal__step:disabled { cursor: default; }
.cap-modal__step svg { width: 22px; height: 22px; }

@media (prefers-reduced-motion: reduce) {
  .cap-node__circle,
  .cap-node__plus,
  .cap-modal,
  .cap-modal__panel-wrap {
    transition: none;
  }
  .cap-modal__panel.is-active .cap-modal__media,
  .cap-modal__panel.is-active .cap-modal__detail {
    animation: none;
  }
}

/* Tablet: nodes wrap to 2×2. The wave's geometry is tuned to four nodes in
   a single level row, so it's a desktop-only flourish — graceful fallback
   below rather than trying to force it to track a wrapped grid. */
@media (max-width: 1023px) {
  .cap-nodes__wave {
    display: none;
  }

  .cap-nodes {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(48px, 6vw, 64px) clamp(16px, 4vw, 40px);
  }

  .cap-modal__layout {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "index index"
      "media detail";
    align-items: start;
  }
  .cap-modal__index { grid-area: index; }
  .cap-modal__index {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 18px;
  }
  /* Vertical spine + nodes are a desktop treatment; the row uses the
     existing horizontal-tab active underline instead. */
  .cap-modal__index-line { display: none; }
  .cap-modal__index-item {
    padding: 8px 0;
    border-bottom: 2px solid transparent;
  }
  .cap-modal__index-item::before { display: none; }
  .cap-modal__index-item::after { display: none; }
  .cap-modal__index-item:last-child { border-bottom: 2px solid transparent; }
  .cap-modal__index-item.is-active { border-bottom-color: var(--c-orange); }
}

/* Mobile: nodes stack in one column; modal stacks fully. */
@media (max-width: 767px) {
  .cap-nodes {
    grid-template-columns: 1fr;
    gap: 36px;
    justify-items: center;
  }
  .cap-modal__layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "index"
      "media"
      "detail";
  }
  .cap-modal__media {
    grid-area: media;
    width: min(64%, 240px);
    margin: 0 auto;
  }
  .cap-modal__detail { grid-area: detail; text-align: left; }
  .cap-modal__index-name { font-size: 13px; }
}

/* Desktop height-lock: floor the layout so shorter panels don't shrink the
   modal as you click through. Tuned for a two-line title + a sub-500-char
   paragraph; re-check this value if real copy runs longer. */
@media (min-width: 1024px) {
  .cap-modal__layout {
    min-height: 480px;
  }
}

/* ================================================
   SEC-H07: AUDIENCE PATHWAYS
   White · Minimalist · Orange accent border
   ================================================ */
.audience-pathways {
  background: var(--c-surface-soft);
  padding: var(--section-pad) 0;
  border-top: 1px solid var(--c-section-divider);
}

.pathway-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 52px;
}

.pathway-card {
  background: var(--c-surface-light);
  border: 1px solid var(--c-border-light);
  border-left: 3.5px solid var(--c-orange);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 30px 28px;
  transition:
    background var(--dur-medium),
    box-shadow var(--dur-medium);
}
.pathway-card:hover {
  background: var(--c-surface-off);
  box-shadow: var(--shadow-card);
}

.pathway-card__headline {
  font-size: 17px;
  font-weight: 500;
  color: var(--c-text-primary);
  line-height: 1.38;
  margin-bottom: 13px;
}
.pathway-card__desc {
  font-size: 13.5px;
  line-height: 1.68;
  color: var(--c-text-secondary);
  margin-bottom: 22px;
}

/* ================================================
   SEC-H09: ENGAGE — one navy section.
   Qualify (bright white cards on navy, brand-native) resolving into a
   single left-aligned ask. Cards stay bright for contrast; everything
   shares one left edge via .container so the section reads as one unit.
   ================================================ */
.engage {
  position: relative;
  background: var(--c-navy);
  border-top: 1px solid var(--c-border-dark);
}

/* Header sits on navy now — headline flips to white; overline stays orange. */
.engage .section-headline { color: var(--c-text-on-dark); }

/* Quiet role tag above each pathway headline — lets the visitor pattern-match
   their role in half a second. Sits inside a white card, so kept muted.
   (Orphaned: the qualify beat that used this was removed. Left in place
   per cascade-discipline — flagged for the next dead-CSS cleanup pass.) */
.pathway-card__label {
  display: block;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-tertiary);
  margin-bottom: 11px;
}

/* Cards now end on the description — no per-card CTA. */
.engage .pathway-card__desc { margin-bottom: 0; }

/* Single beat — ask, on navy. Top padding now reads as the section's own
   opening breathing room (the qualify beat above it is gone), not a gap
   between two beats, so it's sized up from the old clamp(52px, 5.5vw, 84px). */
.engage__ask {
  position: relative;
  padding: clamp(80px, 8vw, 120px) 0 clamp(80px, 8vw, 120px);
  text-align: left;
}

.engage__ask .final-cta__inner {
  margin: 0;          /* left-align, not centred */
  max-width: 640px;   /* readable measure for the ask copy */
}

.engage__ask .final-cta__links {
  justify-content: flex-start;
  align-items: flex-start;
}

/* Orange rule removed — it marked the handoff between the qualify and ask
   beats. With the qualify beat gone, the section is single-beat and the
   rule had nothing left to separate, so it was rendering as a stray line
   at the section's top edge. */

/* ================================================
   SEC-H09: FINAL CTA
   Deep navy — one of two intentionally dark sections
   ================================================ */
.final-cta {
  background: var(--c-navy);
  padding: 120px var(--container-pad);
  text-align: center;
}

.final-cta__inner {
  max-width: 620px;
  margin: 0 auto;
}

.final-cta__headline {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -0.3px;
  color: var(--c-white);
  margin-bottom: 22px;
}

.final-cta__body {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.68;
  color: var(--c-text-on-dark-secondary);
  margin-bottom: 38px;
}

.final-cta__links {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 22px;
}

/* ================================================
   GC-02: FOOTER
   Deep navy · Institutional · Minimal
   ================================================ */
.footer {
  position: relative;
  overflow: hidden;
  /* Field: pure deep navy everywhere the dense text lives (top / right /
     address column), lifted only at the bottom-left where the monolith
     emerges — so the light never fights legibility. */
  background:
    radial-gradient(96% 128% at 4% 112%,
      color-mix(in srgb, var(--c-navy-light) 66%, var(--c-white) 10%) 0%,
      color-mix(in srgb, var(--c-navy-light) 34%, transparent) 42%,
      transparent 60%),
    var(--c-navy);
  border-top: 1px solid var(--c-border-dark);
  padding: 76px 0 56px;
}

/* Lift all real footer content above the monolith + glow layers. */
.footer > .container { position: relative; z-index: 1; }

/* THE MONOLITH — the same diamond as the drawer, re-framed: here it presses in
   low from the bottom-left, a different corner of the one object. The shape is
   a CSS mask (no markup added); the light is a soft bloom inside it whose
   position sweeps, so the facets catch light in turn. A faint constant outer
   stop keeps the silhouette present even in shadow. */
.footer::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: clamp(-340px, -20vw, -150px);
  bottom: clamp(-190px, -14vw, -104px);
  width: clamp(480px, 52vw, 980px);
  aspect-ratio: 337.012 / 224.042;
  pointer-events: none;
  background:
    radial-gradient(58% 88% at 50% 50%,
      color-mix(in srgb, var(--c-navy-light) 70%, var(--c-white) 30%) 0%,
      color-mix(in srgb, var(--c-navy-light) 44%, transparent) 38%,
      color-mix(in srgb, var(--c-navy-light) 16%, transparent) 100%);
  background-repeat: no-repeat;
  background-size: 185% 185%;
  background-position: 30% 36%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20337.012%20224.042'%3E%3Cpath%20fill='%23fff'%20d='M0,109.792L119.31,0L131.247,12.972L11.937,122.764ZM24.927,134.722L144.237,24.93L156.175,37.903L36.865,147.694ZM220.602,0.372L337.012,111.302L220.602,224.042L168.882,172.522L116.842,220.402L104.902,207.432L156.372,160.072L144.912,148.662L90.662,198.592L78.722,185.612L132.412,136.202L117.272,121.132L61.562,172.392L49.622,159.422L129.292,86.102Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20337.012%20224.042'%3E%3Cpath%20fill='%23fff'%20d='M0,109.792L119.31,0L131.247,12.972L11.937,122.764ZM24.927,134.722L144.237,24.93L156.175,37.903L36.865,147.694ZM220.602,0.372L337.012,111.302L220.602,224.042L168.882,172.522L116.842,220.402L104.902,207.432L156.372,160.072L144.912,148.662L90.662,198.592L78.722,185.612L132.412,136.202L117.272,121.132L61.562,172.392L49.622,159.422L129.292,86.102Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  will-change: background-position;
  animation: monolithSweep 22s var(--ease-default) infinite alternate;
}

/* Ambient bloom — an unmasked soft glow drifting low-left, tying the monolith
   into the field with depth. Transform-driven so it stays cheap. */
.footer::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: -18%;
  bottom: -32%;
  width: 62%;
  height: 130%;
  pointer-events: none;
  background:
    radial-gradient(50% 50% at 50% 50%,
      color-mix(in srgb, var(--c-navy-light) 72%, var(--c-white) 8%) 0%,
      transparent 66%);
  transform: translate3d(0, 0, 0);
  will-change: transform;
  animation: monolithDrift 26s var(--ease-default) infinite alternate;
}

.footer__grid {
  display: grid;
  grid-template-columns: 3fr 2fr 3fr;
  gap: 40px;
  margin-bottom: 52px;
}

.footer__logo-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}
.footer__logo-text {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--c-white);
}
.footer__tagline {
  font-size: 12.5px;
  line-height: 1.64;
  color: var(--c-text-on-dark-secondary);
  max-width: 200px;
}

.footer__heading {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-white);
  margin-bottom: 18px;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.footer__links a {
  font-size: 12.5px;
  color: var(--c-text-on-dark-secondary);
  transition: color var(--dur-fast);
}
.footer__links a:hover { color: var(--c-white); }

.footer__office-label {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: 10px;
}
.footer__address {
  font-size: 12px;
  line-height: 1.9;
  color: var(--c-text-on-dark-secondary);
}
.footer__address + .footer__office-label { margin-top: 22px; }

.footer__bottom {
  border-top: 1px solid var(--c-border-dark);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer__copy {
  font-size: 11.5px;
  color: var(--c-text-on-dark-secondary);
}

.footer__social {
  display: flex;
  gap: 10px;
}
.footer__social a {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.46);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.footer__social a:hover {
  color: var(--c-white);
  border-color: rgba(255,255,255,0.28);
}
.footer__social svg { width: 15px; height: 15px; }

/* ================================================
   KEYFRAMES
   ================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes softPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

/* Monolith motion. monolithDrift translates a glow layer slowly off-axis
   (GPU-composited transform); monolithSweep moves a bloom's position across a
   masked diamond so its facets catch light in turn. Both run on `alternate`
   so the 0% state is the composed resting frame used under reduced-motion. */
@keyframes monolithDrift {
  from { transform: translate3d(-9%, -5%, 0) scale(1.05); }
  to   { transform: translate3d(11%, 6%, 0) scale(1.16); }
}
@keyframes monolithSweep {
  from { background-position: 16% 22%; }
  to   { background-position: 84% 78%; }
}

/* Reduced motion: hold the monolith at its composed resting frame (the glow
   over the diamond, the field lifted) rather than animating it. */
@media (prefers-reduced-motion: reduce) {
  .nav-drawer::before,
  .footer::before,
  .footer::after {
    animation: none;
  }
}

/* ================================================
   RESPONSIVE — TABLET (768–1023px)
   ================================================ */
@media (max-width: 1023px) {
  :root {
    --section-pad:   80px;
    --container-pad: 40px;
  }

  .nav { padding: 0 40px; }
  .nav__hamburger { display: flex; }

  .hero__content { padding: 0 40px 80px; }

  .evidence-strip { padding: 42px 0; }
  .metric { padding: 0 24px; }

  .execution-gap__columns { grid-template-columns: 1fr; gap: 48px; }

  .pathway-grid { grid-template-columns: 1fr; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .final-cta { padding: 80px 40px; }
}

/* ================================================
   RESPONSIVE — MOBILE (<768px)
   ================================================ */
@media (max-width: 767px) {
  :root {
    --section-pad:   64px;
    --container-pad: 20px;
  }

  .nav { padding: 0 20px; height: 64px; }

  .hero__content { padding: 0 20px 72px; }
  .hero__scroll-indicator { display: none; }

  .evidence-strip { padding: 0; }
  .metrics-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(255,255,255,0.12);
  }
  .metric {
    padding: 28px 16px;
    background: var(--c-navy-mid);
  }
  .metric + .metric::before { display: none; }

  .final-cta { padding: 72px 20px; }
  .final-cta__links { flex-direction: column; gap: 14px; align-items: center; }

  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer { padding: 48px 0 36px; }
  .footer__bottom { flex-direction: column; gap: 14px; text-align: center; }
}


/* ================================================
   PREVIEW OVERRIDE: PINNED HERO SCROLLYTELLING
   Keeps the original page structure, changes only the hero experience.
   ================================================ */
.hero--scrolly {
  height: 360vh;
  min-height: 2300px;
  overflow: visible;
  background: var(--c-navy);
  --scrolly-progress: 0;
}

.hero--scrolly .hero__pin {
  position: sticky;
  top: 0;
  height: 100dvh;
  min-height: 620px;
  overflow: hidden;
  background: var(--c-navy-mid);
}

.hero--scrolly .hero__video,
.hero--scrolly .hero__overlay,
.hero--scrolly .hero__vignette {
  position: absolute;
  inset: 0;
}

.hero--scrolly {
  background: linear-gradient(145deg, #000F22 0%, #0A1929 45%, #112236 100%);
}

.hero--scrolly .hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  transform: scale(1);
  transition: filter 180ms linear;
  will-change: transform, filter;
}

.hero--scrolly .hero__overlay {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0,15,34,0.82) 0%, rgba(0,15,34,0.56) 40%, rgba(0,15,34,0.18) 100%),
    linear-gradient(180deg, rgba(0,15,34,0.38) 0%, rgba(0,15,34,0.18) 46%, rgba(0,15,34,0.78) 100%);
  opacity: 0.92;
  pointer-events: none;
}

.hero--scrolly .hero__vignette {
  z-index: 2;
  background:
    radial-gradient(circle at 50% 42%, transparent 52%, rgba(0,15,34,0.42) 100%);
  opacity: 0.42;
  pointer-events: none;
}

.scrolly-copy {
  position: relative;
  z-index: 5;
  height: 100%;
  width: min(760px, calc(100vw - (2 * var(--container-pad))));
  margin-left: var(--container-pad);
  pointer-events: none;
}

.scrolly-stage {
  position: absolute;
  left: 0;
  top: clamp(132px, 22vh, 190px);
  width: 100%;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.scrolly-kicker {
  display: block;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.68);
  margin-bottom: 20px;
}

.scrolly-headline {
  font-family: var(--font-display);
  font-size: clamp(42px, 5.9vw, 76px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -1.7px;
  color: var(--c-white);
  max-width: 720px;
  margin-bottom: 24px;
}

.scrolly-headline--sm {
  font-size: clamp(34px, 4.2vw, 58px);
  max-width: 680px;
  line-height: 1.1;
}

.scrolly-body {
  font-size: 16px;
  line-height: 1.72;
  color: rgba(255,255,255,0.72);
  max-width: 560px;
}

.scrolly-body--large {
  font-size: clamp(16px, 1.25vw, 19px);
  max-width: 610px;
}

.scrolly-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 700px;
  margin-top: 30px;
}

.scrolly-card {
  min-height: 136px;
  padding: 20px 22px 18px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 14px;
  background: rgba(0,15,34,0.50);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.16);
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  backface-visibility: hidden;
}

.scrolly-card span {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.8px;
  color: var(--c-orange);
  margin-bottom: 10px;
}

.scrolly-card strong {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: white;
  margin-bottom: 8px;
}

.scrolly-card p {
  font-size: 12.5px;
  line-height: 1.62;
  color: rgba(255,255,255,0.62);
}

.scrolly-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 34px;
  pointer-events: auto;
}

.scrolly-progress {
  position: absolute;
  left: var(--container-pad);
  right: var(--container-pad);
  bottom: 34px;
  z-index: 8;
  height: 1px;
  background: rgba(255,255,255,0.18);
  overflow: hidden;
}

.scrolly-progress span {
  display: block;
  height: 100%;
  width: calc(var(--scrolly-progress) * 100%);
  background: var(--c-orange);
  transform-origin: left center;
}

.hero--scrolly .hero__scroll-indicator {
  left: auto;
  right: var(--container-pad);
  bottom: 48px;
  transform: none;
}

.hero--scrolly .hero__scroll-indicator svg { opacity: 0.56; }

@media (max-width: 1023px) {
  .hero--scrolly { height: 350vh; min-height: 2200px; }
  .scrolly-copy { width: min(680px, calc(100vw - 80px)); margin-left: 40px; }
  .scrolly-stage { top: clamp(118px, 20vh, 168px); }
}

@media (max-width: 767px) {
  /* PORTRAIT: keep the DESKTOP pinned scrolly (re-enabled in JS). We only
     resize the copy and stack the cards for a narrow screen — we deliberately
     no longer un-pin the section or force the stages static, so the base
     animated rules drive them. The pin is 100dvh (base), so it stays stable
     as the address bar slides. Short LANDSCAPE phones are handled in JS
     (measureProgress bails), where a pinned full-height sequence can't fit. */
  .scrolly-copy {
    width: calc(100vw - 40px);
    margin: 0 20px;
  }
  .scrolly-card-grid { grid-template-columns: 1fr; }
  .scrolly-card { min-height: auto; }
  .scrolly-actions {
    flex-direction: column;
    align-items: flex-start;
  }
  .scrolly-progress { display: none; }
}


/* LARGE NAV LOGO OVERRIDE
   Use a transparent logo.png. The logo floats alone in the top-left nav. */
.nav {
  height: 104px;
}
.nav__logo {
  gap: 0;
  min-width: 0;
}
.nav__logo-img {
  display: block !important;
  width: clamp(300px, 22vw, 420px);
  height: auto;
  max-height: 86px;
  object-fit: contain;
}
.nav__logo-mark,
.nav__logo-text {
  display: none !important;
}

@media (max-width: 1023px) {
  .nav__logo-img {
    width: 280px;
    max-height: 70px;
  }
}

@media (max-width: 767px) {
  .nav {
    height: 78px;
  }
  .nav__logo-img {
    width: 220px;
    max-height: 56px;
  }
}


/* ================================================
   V3 OVERRIDE: LEFT-ALIGNED OVERSIZED LOGO + CLEANER SCROLLYTELLING
   ================================================ */
.nav {
  height: 128px;
  padding-left: 34px;
  padding-right: 72px;
}
.nav__inner {
  max-width: none;
  margin: 0;
  width: 100%;
  justify-content: flex-start;
  gap: 42px;
}
.nav__logo {
  flex: 0 0 auto;
  margin-right: auto;
}
.nav__logo-img {
  display: block !important;
  width: clamp(640px, 44vw, 920px) !important;
  height: auto !important;
  max-height: 112px !important;
  object-fit: contain;
  object-position: left center;
}
.nav__links {
  margin-left: auto;
  gap: 30px;
}
.nav__cta {
  flex: 0 0 auto;
}

.hero--scrolly {
  height: 330vh;
  min-height: 2050px;
}
.hero--scrolly .hero__overlay {
  background:
    linear-gradient(90deg, rgba(0,15,34,0.86) 0%, rgba(0,15,34,0.62) 44%, rgba(0,15,34,0.20) 100%),
    linear-gradient(180deg, rgba(0,15,34,0.32) 0%, rgba(0,15,34,0.12) 46%, rgba(0,15,34,0.76) 100%);
  opacity: 0.9;
}
.scrolly-copy {
  width: min(790px, calc(100vw - 100px));
  margin-left: 74px;
}
.scrolly-stage {
  top: clamp(150px, 25vh, 230px);
  transform: translate3d(0, 8px, 0);
}
.scrolly-stage--intro {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.scrolly-headline {
  font-size: clamp(46px, 6.4vw, 84px);
}
.scrolly-headline--sm {
  font-size: clamp(36px, 4.4vw, 60px);
}
.scrolly-card-grid--clean {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 920px;
  margin-top: 36px;
}
.scrolly-card-grid--clean .scrolly-card {
  min-height: 150px;
  padding: 32px 26px;
  border: 1px solid rgba(255,255,255,0.34);
  border-radius: 18px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: none;
  box-shadow: 0 18px 48px rgba(0,15,34,0.22);
  opacity: 1;
  transform: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.scrolly-card-grid--clean .scrolly-card span {
  color: var(--c-orange);
  font-size: 11px;
  margin-bottom: 24px;
}
.scrolly-card-grid--clean .scrolly-card strong {
  color: var(--c-navy);
  font-family: var(--font-display);
  font-size: clamp(23px, 2vw, 31px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.4px;
  margin: 0;
}
.scrolly-card-grid--clean .scrolly-card p {
  display: none;
}

@media (max-width: 1220px) {
  .nav__logo-img {
    width: clamp(460px, 38vw, 650px) !important;
    max-height: 92px !important;
  }
  .nav__links {
    gap: 24px;
  }
}

@media (max-width: 1023px) {
  .nav {
    height: 98px;
    padding-left: 28px;
    padding-right: 40px;
  }
  .nav__logo-img {
    width: 430px !important;
    max-height: 78px !important;
  }
  .scrolly-copy {
    margin-left: 42px;
    width: calc(100vw - 84px);
  }
  .scrolly-stage {
    top: clamp(126px, 22vh, 182px);
  }
  .scrolly-card-grid--clean {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 640px;
  }
}

@media (max-width: 767px) {
  .nav {
    height: 78px;
    padding-left: 18px;
    padding-right: 18px;
  }
  .nav__logo-img {
    width: 300px !important;
    max-height: 62px !important;
  }
  .scrolly-card-grid--clean {
    grid-template-columns: 1fr;
  }
  .scrolly-card-grid--clean .scrolly-card {
    min-height: 112px;
    padding: 26px 24px;
  }
  .scrolly-stage--final .scrolly-actions {
    margin-top: 34px;
  }
}


/* ================================================
   SEC-H04A: EXECUTION GAP SCROLLY INTRO
   Full-screen image-led bridge before the white explanation section.
   Keep this section headline-only. Detailed copy remains below.
   Save the image as: execution-gap-hero.jpg
   ================================================ */
.execution-gap-scrolly {
  position: relative;
  height: 320vh;
  min-height: 2050px;
  background: var(--c-navy);
  overflow: visible;
  --gap-progress: 0;
}

.execution-gap-scrolly__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  background: var(--c-navy-mid);
}

.execution-gap-scrolly__image,
.execution-gap-scrolly__overlay,
.execution-gap-scrolly__texture {
  position: absolute;
  inset: 0;
}

.execution-gap-scrolly__image {
  z-index: 0;
  background-image: url('execution-gap-hero.jpg');
  background-size: cover;
  background-position: center center;
  transform: translate3d(0, 0, 0) scale(1.04);
  will-change: transform;
}

.execution-gap-scrolly__overlay {
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(0,15,34,0.72) 0%,
      rgba(0,15,34,0.52) 38%,
      rgba(0,15,34,0.24) 68%,
      rgba(0,15,34,0.10) 100%),
    linear-gradient(180deg,
      rgba(0,15,34,0.20) 0%,
      rgba(0,15,34,0.08) 44%,
      rgba(0,15,34,0.48) 100%);
  pointer-events: none;
}

.execution-gap-scrolly__texture {
  z-index: 2;
  background:
    radial-gradient(circle at 50% 42%, transparent 54%, rgba(0,15,34,0.40) 100%);
  opacity: 0.34;
  pointer-events: none;
}

.execution-gap-scrolly__copy {
  position: relative;
  z-index: 4;
  height: 100%;
  width: min(820px, calc(100vw - 120px));
  margin-left: 74px;
  pointer-events: none;
}

.execution-gap-scrolly__stage {
  position: absolute;
  left: 0;
  top: clamp(158px, 27vh, 238px);
  width: 100%;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.execution-gap-scrolly__stage--intro {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.execution-gap-scrolly__kicker {
  display: block;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  margin-bottom: 22px;
}

.execution-gap-scrolly__headline {
  font-family: var(--font-display);
  font-size: clamp(42px, 5.6vw, 76px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -1.6px;
  color: var(--c-white);
  max-width: 780px;
}

.execution-gap-scrolly__progress {
  position: absolute;
  left: 74px;
  bottom: 38px;
  z-index: 6;
  width: min(420px, calc(100vw - 148px));
  height: 1px;
  background: rgba(255,255,255,0.20);
  overflow: hidden;
}

.execution-gap-scrolly__progress span {
  display: block;
  width: calc(var(--gap-progress) * 100%);
  height: 100%;
  background: var(--c-orange);
  transform-origin: left center;
}

@media (max-width: 1023px) {
  .execution-gap-scrolly {
    height: 300vh;
    min-height: 1900px;
  }
  .execution-gap-scrolly__copy {
    width: calc(100vw - 84px);
    margin-left: 42px;
  }
  .execution-gap-scrolly__stage {
    top: clamp(128px, 23vh, 188px);
  }
  .execution-gap-scrolly__progress {
    left: 42px;
    width: min(360px, calc(100vw - 84px));
  }
}

@media (max-width: 767px) {
  .execution-gap-scrolly {
    height: auto;
    min-height: 100vh;
  }
  .execution-gap-scrolly__pin {
    position: relative;
    min-height: 100svh;
    height: auto;
    padding: 118px 0 84px;
  }
  .execution-gap-scrolly__image {
    transform: scale(1.02) !important;
  }
  .execution-gap-scrolly__overlay {
    background:
      linear-gradient(90deg, rgba(0,15,34,0.78) 0%, rgba(0,15,34,0.56) 58%, rgba(0,15,34,0.25) 100%),
      linear-gradient(180deg, rgba(0,15,34,0.26) 0%, rgba(0,15,34,0.18) 44%, rgba(0,15,34,0.58) 100%);
  }
  .execution-gap-scrolly__copy {
    width: calc(100vw - 40px);
    margin: 0 20px;
    height: auto;
  }
  .execution-gap-scrolly__stage {
    position: relative;
    top: auto;
    opacity: 1 !important;
    transform: none !important;
    margin-bottom: 42px;
  }
  .execution-gap-scrolly__stage:last-child {
    margin-bottom: 0;
  }
  .execution-gap-scrolly__headline {
    font-size: clamp(36px, 12vw, 54px);
  }
  .execution-gap-scrolly__progress {
    display: none;
  }
}



/* ================================================
   V4 OVERRIDE: REFINED HERO SCROLLYTELLING
   Normal nav height, lighter visual overlays, smoother 3-phase hero,
   and lighter graceful counterparty cards.
   ================================================ */
.nav {
  height: 100px;
  padding-left: 42px;
  padding-right: 64px;
}
.nav__inner {
  gap: 34px;
}
.nav__logo-img {
  width: clamp(360px, 27vw, 480px) !important;
  max-height: 84px !important;
  object-fit: contain;
  object-position: left center;
}

.hero--scrolly {
  height: 315vh;
  min-height: 1950px;
}
.hero--scrolly .hero__pin {
  min-height: 620px;
}
.hero--scrolly .hero__overlay {
  /* Scrim concentrated on the LEFT (text zone). Right ~45% of the
     video is left almost fully clear so the cinematic footage breathes. */
  background:
    linear-gradient(90deg, rgba(0,15,34,0.34) 0%, rgba(0,15,34,0.20) 28%, rgba(0,15,34,0.04) 48%, rgba(0,15,34,0.00) 62%),
    linear-gradient(180deg, rgba(0,15,34,0.06) 0%, rgba(0,15,34,0.02) 48%, rgba(0,15,34,0.20) 100%);
  opacity: 1;
}
.hero--scrolly .hero__vignette {
  opacity: 0.08;
}
.scrolly-copy {
  width: min(960px, calc(100vw - 128px));
  margin-left: 64px;
}
.scrolly-stage {
  top: clamp(136px, 23vh, 205px);
  transform: translate3d(0, 6px, 0);
}
.scrolly-stage:not(.scrolly-stage--cards) {
  max-width: 780px;
}
.scrolly-stage--cards {
  max-width: 940px;
}
.scrolly-body {
  color: rgba(255,255,255,0.76);
}
.scrolly-card-grid--clean {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  max-width: 940px;
  margin-top: 34px;
}
.scrolly-card-grid--clean .scrolly-card {
  min-height: 124px;
  padding: 24px 22px;
  border: 1px solid rgba(255,255,255,0.48);
  border-radius: 16px;
  background: rgba(255,255,255,0.82);
  backdrop-filter: none;
  box-shadow: 0 10px 26px rgba(0,15,34,0.12);
  justify-content: flex-start;
}
.scrolly-card-grid--clean .scrolly-card span {
  font-size: 10px;
  letter-spacing: 1.7px;
  margin-bottom: 18px;
}
.scrolly-card-grid--clean .scrolly-card strong {
  font-size: clamp(20px, 1.55vw, 25px);
  line-height: 1.12;
  letter-spacing: -0.25px;
}
.scrolly-stage--final .scrolly-headline {
  max-width: 720px;
}
.scrolly-stage--final .scrolly-actions {
  margin-top: 84px;
  align-items: center;
}

@media (max-width: 1023px) {
  .scrolly-stage--final .scrolly-actions {
    margin-top: 64px;
  }
}

@media (max-width: 767px) {
  .scrolly-stage--final .scrolly-actions {
    margin-top: 42px;
  }
}
.execution-gap-scrolly__overlay {
  background:
    linear-gradient(90deg,
      rgba(0,15,34,0.44) 0%,
      rgba(0,15,34,0.24) 38%,
      rgba(0,15,34,0.09) 68%,
      rgba(0,15,34,0.02) 100%),
    linear-gradient(180deg,
      rgba(0,15,34,0.08) 0%,
      rgba(0,15,34,0.02) 46%,
      rgba(0,15,34,0.22) 100%);
}
.execution-gap-scrolly__texture {
  opacity: 0.10;
}

@media (max-width: 1220px) {
  .nav {
    height: 88px;
  }
  .nav__logo-img {
    width: clamp(300px, 26vw, 380px) !important;
    max-height: 72px !important;
  }
  .nav__links {
    gap: 22px;
  }
}

@media (max-width: 1023px) {
  .nav {
    height: 78px;
    padding-left: 28px;
    padding-right: 40px;
  }
  .nav__logo-img {
    width: 320px !important;
    max-height: 60px !important;
  }
  .scrolly-copy {
    margin-left: 42px;
    width: calc(100vw - 84px);
  }
  .scrolly-stage {
    top: clamp(118px, 21vh, 168px);
  }
  .scrolly-card-grid--clean {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 640px;
  }
}

@media (max-width: 767px) {
  .nav {
    height: 70px;
    padding-left: 18px;
    padding-right: 18px;
  }
  .nav__logo-img {
    width: 230px !important;
    max-height: 50px !important;
  }
  .scrolly-card-grid--clean {
    grid-template-columns: 1fr;
  }
  .scrolly-card-grid--clean .scrolly-card {
    min-height: 104px;
    padding: 22px 22px;
  }
}



/* ================================================
   V5 OVERRIDE: FINER HERO PROGRESSION + LIGHTER CARDS + WIDER METRICS
   Focused refinements only.
   ================================================ */
.hero--scrolly {
  height: 330vh;
  min-height: 2050px;
}

/* CTA sits visually above the orange progress line, not cramped under headline */
.scrolly-stage--final {
  height: calc(100vh - clamp(136px, 23vh, 205px) - 108px);
  min-height: 430px;
}
.scrolly-stage--final .scrolly-actions {
  position: absolute;
  left: 0;
  bottom: 78px;
  margin-top: 0;
  align-items: center;
}

/* Counterparty cards: unnumbered, more transparent, lighter and less blocky */
.scrolly-card-grid--clean {
  gap: 20px;
  max-width: 920px;
}
.scrolly-card-grid--clean .scrolly-card {
  min-height: 108px;
  padding: 26px 24px;
  border: 1px solid rgba(255,255,255,0.34);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.42), rgba(255,255,255,0.28));
  box-shadow: 0 8px 22px rgba(0,15,34,0.08);
  justify-content: center;
}
.scrolly-card-grid--clean .scrolly-card span {
  display: none;
}
.scrolly-card-grid--clean .scrolly-card strong {
  font-size: clamp(19px, 1.45vw, 23px);
  line-height: 1.14;
  color: var(--c-navy);
  text-shadow: 0 1px 0 rgba(255,255,255,0.18);
}

/* Softer stage movement. The JS handles opacity timing, this removes visual harshness. */
.scrolly-stage {
  transform: translate3d(0, 3px, 0);
}

/* Achievement strip: spread across the page more deliberately.
   NOTE — .evidence-strip .container below is ACTIVE (the real markup is
   .evidence-line / .evidence-line__item, defined near line 731, and it
   lives inside this .container). .metrics-row and .metric immediately
   below, however, are DEAD: no element in index.html uses those classes
   anymore. Flagged here rather than deleted, per cascade-discipline —
   safe to remove in the next cleanup pass. */
.evidence-strip .container {
  max-width: none;
  padding-left: clamp(40px, 5vw, 88px);
  padding-right: clamp(40px, 5vw, 88px);
}
.metrics-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
}
.metric {
  text-align: center;
  padding-left: clamp(20px, 3vw, 56px);
  padding-right: clamp(20px, 3vw, 56px);
}
.metric + .metric::before {
  left: 0;
}

@media (max-width: 1023px) {
  .scrolly-stage--final {
    height: auto;
    min-height: 0;
  }
  .scrolly-stage--final .scrolly-actions {
    position: static;
    margin-top: 76px;
  }
  .evidence-strip .container {
    padding-left: 40px;
    padding-right: 40px;
  }
  .metric:first-child,
  .metric:last-child {
    text-align: center;
  }
  .metric:first-child { padding-left: 24px; }
  .metric:last-child { padding-right: 24px; }
}

@media (max-width: 767px) {
  .scrolly-stage--final .scrolly-actions {
    margin-top: 44px;
  }
  .metrics-row {
    grid-template-columns: 1fr 1fr;
  }
  .metric:first-child,
  .metric:last-child {
    text-align: center;
    padding-left: 16px;
    padding-right: 16px;
  }
}



/* ================================================
   V7 OVERRIDE: ONE COUNTERPARTY TRANSACTION STRIP
   Replaces the hub infographic with a simple premium transaction flow.
   ================================================ */
.scrolly-stage--transaction {
  max-width: min(1040px, calc(100vw - 128px));
  width: min(1040px, calc(100vw - 128px));
}

.transaction-strip {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 16px);
  margin-top: clamp(44px, 5vh, 62px);
  width: min(980px, 100%);
}

.transaction-pill {
  position: relative;
  flex: 1 1 0;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.54);
  background: linear-gradient(135deg, rgba(255,255,255,0.68), rgba(255,255,255,0.50));
  color: var(--c-navy);
  font-family: var(--font-body);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: 0.08px;
  text-align: center;
  box-shadow: 0 8px 22px rgba(0,15,34,0.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.transaction-separator {
  flex: 0 0 clamp(28px, 3.2vw, 46px);
  height: 1px;
  position: relative;
  background: rgba(242,94,35,0.74);
  box-shadow: 0 0 14px rgba(242,94,35,0.16);
}

.transaction-separator::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 1px solid rgba(242,94,35,0.86);
  border-right: 1px solid rgba(242,94,35,0.86);
  transform: translateY(-50%) rotate(45deg);
}

.scrolly-stage--transaction .scrolly-headline {
  max-width: 700px;
}

@media (max-width: 1023px) {
  .scrolly-stage--transaction {
    width: calc(100vw - 84px);
    max-width: calc(100vw - 84px);
  }
  .transaction-strip {
    flex-wrap: wrap;
    gap: 14px;
    max-width: 660px;
  }
  .transaction-pill {
    flex: 1 1 calc(50% - 14px);
    min-height: 66px;
    border-radius: 18px;
  }
  .transaction-separator {
    display: none;
  }
}

@media (max-width: 767px) {
  .scrolly-stage--transaction {
    width: 100%;
    max-width: 100%;
  }
  .transaction-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 30px;
  }
  .transaction-pill {
    min-height: 58px;
    padding: 17px 20px;
    border-radius: 16px;
  }
}


/* ================================================
   V8 OVERRIDE: TRANSACTION ASSEMBLY STRIP
   Turns the Phase 2 labels into refined moving-part components.
   No literal gears, just linked mechanical transaction parts.
   ================================================ */
.transaction-strip {
  gap: clamp(8px, 1vw, 14px);
  margin-top: clamp(46px, 5.4vh, 68px);
  width: min(1030px, 100%);
  align-items: stretch;
}

.transaction-pill {
  min-height: 78px;
  padding: 22px 28px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.42);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.62), rgba(255,255,255,0.48));
  color: var(--c-navy);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 10px 26px rgba(0,15,34,0.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  overflow: visible;
}

.transaction-pill::before,
.transaction-pill::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(242,94,35,0.92);
  border: 2px solid rgba(255,255,255,0.72);
  box-shadow: 0 0 0 5px rgba(242,94,35,0.11), 0 0 16px rgba(242,94,35,0.22);
  transform: translateY(-50%);
  z-index: 3;
}

.transaction-pill::before { left: -5px; }
.transaction-pill::after  { right: -5px; }
.transaction-pill:first-child::before { display: none; }
.transaction-pill:last-child::after { display: none; }

.transaction-pill span,
.transaction-pill strong {
  position: relative;
  z-index: 2;
}

.transaction-separator {
  align-self: center;
  flex: 0 0 clamp(24px, 2.8vw, 42px);
  height: 2px;
  background: linear-gradient(90deg, rgba(242,94,35,0.18), rgba(242,94,35,0.82), rgba(242,94,35,0.18));
  box-shadow: 0 0 18px rgba(242,94,35,0.20);
}

.transaction-separator::after {
  right: 50%;
  width: 6px;
  height: 6px;
  border: 0;
  border-radius: 50%;
  background: rgba(242,94,35,0.92);
  transform: translate(50%, -50%);
  box-shadow: 0 0 0 4px rgba(242,94,35,0.12), 0 0 14px rgba(242,94,35,0.22);
}

.scrolly-stage--transaction .transaction-pill {
  transition:
    opacity 620ms var(--ease-enter),
    transform 620ms var(--ease-enter),
    background 300ms var(--ease-default),
    border-color 300ms var(--ease-default);
}

.scrolly-stage--transaction .transaction-pill:nth-of-type(1) { transition-delay: 40ms; }
.scrolly-stage--transaction .transaction-pill:nth-of-type(3) { transition-delay: 110ms; }
.scrolly-stage--transaction .transaction-pill:nth-of-type(5) { transition-delay: 180ms; }
.scrolly-stage--transaction .transaction-pill:nth-of-type(7) { transition-delay: 250ms; }

@media (max-width: 1023px) {
  .transaction-strip {
    gap: 16px;
  }
  .transaction-pill {
    clip-path: none;
    border-radius: 16px;
    min-height: 70px;
  }
  .transaction-pill::before,
  .transaction-pill::after {
    display: none;
  }
}

@media (max-width: 767px) {
  .transaction-pill {
    min-height: 60px;
    padding: 18px 22px;
  }
}


/* ================================================
   V9 OVERRIDE: ELEGANT MECHANICAL GEAR SEQUENCE
   Phase 2 now assembles four large interlocking gears as the user scrolls.
   ================================================ */
.hero--scrolly {
  height: 390vh;
  min-height: 2450px;
}

.scrolly-stage--transaction {
  width: min(1120px, calc(100vw - 128px));
  max-width: min(1120px, calc(100vw - 128px));
}

.scrolly-stage--transaction .scrolly-headline {
  max-width: 700px;
}

.gear-sequence {
  position: relative;
  width: min(980px, 100%);
  height: clamp(250px, 28vh, 320px);
  margin-top: clamp(42px, 5vh, 64px);
}

.gear-item {
  position: absolute;
  width: clamp(168px, 15vw, 220px);
  height: clamp(168px, 15vw, 220px);
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(0.96) rotate(-7deg);
  transform-origin: 50% 50%;
  will-change: opacity, transform;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.gear-item--one { left: 0%; top: 10%; }
.gear-item--two { left: 18%; top: 25%; }
.gear-item--three { left: 36%; top: 10%; }
.gear-item--four { left: 54%; top: 25%; }

.gear-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 0.82;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 14px 26px rgba(0,15,34,0.24));
}

.gear-item--strong .gear-icon { color: rgba(255,255,255,0.76); }
.gear-item--soft .gear-icon { color: rgba(255,255,255,0.44); }

.gear-item::before {
  content: '';
  position: absolute;
  width: 42%;
  height: 42%;
  border-radius: 50%;
  background: rgba(0,15,34,0.48);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 0 0 1px rgba(242,94,35,0.18),
    0 10px 28px rgba(0,15,34,0.20);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 1;
}

.gear-item::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(242,94,35,0.92);
  box-shadow: 0 0 0 6px rgba(242,94,35,0.10), 0 0 18px rgba(242,94,35,0.22);
  z-index: 3;
}

.gear-label {
  position: relative;
  z-index: 2;
  color: rgba(255,255,255,0.92);
  font-size: clamp(11px, 0.86vw, 13px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 0.08px;
  text-align: center;
  text-shadow: 0 1px 8px rgba(0,15,34,0.50);
}

.gear-item--soft .gear-label {
  color: rgba(255,255,255,0.82);
}

@media (max-width: 1023px) {
  .hero--scrolly {
    height: 370vh;
    min-height: 2300px;
  }
  .scrolly-stage--transaction {
    width: calc(100vw - 84px);
    max-width: calc(100vw - 84px);
  }
  .gear-sequence {
    width: min(720px, 100%);
    height: 430px;
  }
  .gear-item {
    width: 190px;
    height: 190px;
  }
  .gear-item--one { left: 0; top: 0; }
  .gear-item--two { left: 160px; top: 78px; }
  .gear-item--three { left: 320px; top: 0; }
  .gear-item--four { left: 480px; top: 78px; }
}

@media (max-width: 767px) {
  .hero--scrolly {
    height: auto;
    min-height: 100vh;
  }
  .scrolly-stage--transaction {
    width: 100%;
    max-width: 100%;
  }
  .gear-sequence {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 12px;
    width: 100%;
    height: auto;
    margin-top: 30px;
  }
  .gear-item {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: min(42vw, 160px);
    height: min(42vw, 160px);
    opacity: 1 !important;
    transform: none !important;
    margin: 0 auto;
  }
}


/* ================================================
   V10 OVERRIDE: REFINED INTRO REVEAL + CLEANER GEARS
   First hero phase now reveals Established . 2019, then headline,
   then body. Gear outlines are thinner with no internal orange dot.
   ================================================ */
.scrolly-stage--intro .hero-intro-reveal {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  animation: heroIntroReveal 720ms var(--ease-enter) forwards;
  will-change: opacity, transform;
}

.scrolly-stage--intro .hero-intro-reveal--kicker { animation-delay: 120ms; }
.scrolly-stage--intro .hero-intro-reveal--headline { animation-delay: 520ms; }
.scrolly-stage--intro .hero-intro-reveal--body { animation-delay: 900ms; }

.gear-icon {
  stroke-width: 0.55;
}

.gear-item--strong .gear-icon { color: rgba(255,255,255,0.82); }
.gear-item--soft .gear-icon { color: rgba(255,255,255,0.54); }

.gear-item::before {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 10px 28px rgba(0,15,34,0.20);
}

.gear-item::after {
  display: none;
}

@keyframes heroIntroReveal {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}



/* V11 OVERRIDE removed — was dead code from the retired scroll-pin hero rig,
   fully superseded by V12 below. Its rgba(...,0.74) + blur(16px) on
   .nav--solid was the source of the translucent grey-wash nav bug over
   light sections. */

.hero--scrolly {
  height: 430vh;
  min-height: 2700px;
}

.scrolly-stage--intro .hero-intro-reveal {
  animation: none !important;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  will-change: opacity, transform;
}

.scrolly-stage--intro .hero-intro-reveal--kicker {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (max-width: 1023px) {
  .hero--scrolly {
    height: 400vh;
    min-height: 2500px;
  }
}

@media (max-width: 767px) {
  .hero--scrolly {
    height: auto;
    min-height: 100vh;
  }
}



/* ================================================
   V10 OVERRIDE: WIDE-SCREEN SITE SYSTEM
   Expands the page rhythm end-to-end while keeping reading-heavy
   text blocks controlled for premium readability.
   ================================================ */
:root {
  --site-edge-pad: clamp(40px, 5vw, 88px);
  --reading-max: 780px;
  --reading-wide-max: 920px;
}

.container {
  max-width: none;
  padding-left: var(--site-edge-pad);
  padding-right: var(--site-edge-pad);
}

/* Keep editorial copy elegant even while sections breathe wider */
.section-header,
.execution-gap__intro-block,
.pull-quote,
.final-cta__inner {
  max-width: var(--reading-max);
}

.section-intro,
.execution-gap__intro-copy,
.final-cta__body {
  max-width: 620px;
}

/* Execution Gap: wider section, still readable columns */
.execution-gap__columns {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(64px, 7vw, 128px);
}

.challenge-item {
  gap: 22px;
}

/* Engage: wider qualify header, controlled copy */
.engage .section-header {
  max-width: 760px;
}

.pathway-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 34px);
}

.pathway-card {
  padding: clamp(32px, 2.5vw, 46px);
  min-height: 285px;
}

/* Footer: uses the full institutional width without becoming crowded */
.footer__grid {
  grid-template-columns: minmax(260px, 3fr) minmax(170px, 1.8fr) minmax(340px, 3.4fr);
  gap: clamp(40px, 5vw, 88px);
}

.footer__tagline {
  max-width: 280px;
}

@media (max-width: 1023px) {
  :root {
    --site-edge-pad: 40px;
  }

  .execution-gap__columns,
  .pathway-grid,
  .footer__grid {
    grid-template-columns: 1fr;
  }

  .pathway-card {
    min-height: auto;
  }
}

@media (max-width: 767px) {
  :root {
    --site-edge-pad: 20px;
  }
}



/* ================================================
   V12 OVERRIDE: TRANSPARENT HERO NAV + AUTOMATIC INTRO + REFINED GEARS
   Hero nav floats with no overlay on video. Intro reveals on load.
   Progress bars removed. Gear labels now use orange with lighter, larger outlines.
   ================================================ */
.nav--transparent {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
}

.nav--solid {
  background: var(--c-navy) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.09) !important;
  box-shadow: none !important;
}

.hero--scrolly {
  height: 260vh;
  min-height: 1600px;
}

/* Phase 1 returns to an elegant page-load reveal, one element after another. */
.scrolly-stage--intro .hero-intro-reveal {
  animation: heroIntroRevealSoft 1150ms var(--ease-enter) forwards !important;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  will-change: opacity, transform;
}

.scrolly-stage--intro .hero-intro-reveal--kicker {
  animation-delay: 200ms !important;
}

.scrolly-stage--intro .hero-intro-reveal--headline {
  animation-delay: 820ms !important;
}

.scrolly-stage--intro .hero-intro-reveal--body {
  animation-delay: 1400ms !important;
}

.scrolly-stage--intro .hero-intro-reveal--cta {
  animation-delay: 1820ms !important;
}

@keyframes heroIntroRevealSoft {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Remove interface-style progress bars for a cleaner corporate/cinematic feel. */
.scrolly-progress,
.execution-gap-scrolly__progress {
  display: none !important;
}

/* Larger, lighter, more premium mechanical gear treatment. */
.gear-sequence {
  width: min(1080px, 100%);
  height: clamp(285px, 31vh, 365px);
  margin-top: clamp(46px, 5.4vh, 70px);
}

.gear-item {
  width: clamp(190px, 16.8vw, 255px);
  height: clamp(190px, 16.8vw, 255px);
}

.gear-item--one { left: 0%; top: 6%; }
.gear-item--two { left: 19%; top: 25%; }
.gear-item--three { left: 38%; top: 6%; }
.gear-item--four { left: 57%; top: 25%; }

.gear-icon {
  stroke-width: 0.46 !important;
  filter: drop-shadow(0 12px 22px rgba(0,15,34,0.18));
}

.gear-icon circle {
  display: none;
}

.gear-item--strong .gear-icon { color: rgba(255,255,255,0.58) !important; }
.gear-item--soft .gear-icon { color: rgba(255,255,255,0.38) !important; }

.gear-item::before {
  width: 40%;
  height: 40%;
  background: rgba(0,15,34,0.30);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 10px 24px rgba(0,15,34,0.16);
}

.gear-item::after {
  display: none !important;
}

.gear-label,
.gear-item--soft .gear-label {
  color: var(--c-orange) !important;
  font-size: clamp(12.5px, 0.95vw, 15px);
  font-weight: 700;
  letter-spacing: 0.18px;
  text-shadow: 0 1px 8px rgba(0,15,34,0.48);
}

@media (max-width: 1023px) {
  .hero--scrolly {
    height: 240vh;
    min-height: 1500px;
  }
  .gear-sequence {
    width: min(780px, 100%);
    height: 470px;
  }
  .gear-item {
    width: 210px;
    height: 210px;
  }
  .gear-item--one { left: 0; top: 0; }
  .gear-item--two { left: 178px; top: 86px; }
  .gear-item--three { left: 356px; top: 0; }
  .gear-item--four { left: 534px; top: 86px; }
}

@media (max-width: 767px) {
  .hero--scrolly {
    height: auto;
    min-height: 100vh;
  }
  .gear-sequence {
    height: auto;
  }
  .gear-item {
    width: min(44vw, 176px);
    height: min(44vw, 176px);
  }
}


/* ================================================
   V13 OVERRIDE: INTRO REPLAY + EXECUTION CHAIN
   Phase 1 replays when the user returns to the opening hero range.
   Phase 2 replaces literal gears with a premium transaction chain.
   ================================================ */
.scrolly-stage--intro .hero-intro-reveal {
  animation: none !important;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 760ms var(--ease-enter),
    transform 760ms var(--ease-enter);
  transition-delay: 0ms !important;
  will-change: opacity, transform;
}

.scrolly-stage--intro .hero-intro-reveal.is-intro-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.scrolly-stage--intro .hero-intro-reveal--kicker.is-intro-visible {
  transition-delay: 120ms !important;
}

.scrolly-stage--intro .hero-intro-reveal--headline.is-intro-visible {
  transition-delay: 520ms !important;
}

.scrolly-stage--intro .hero-intro-reveal--body.is-intro-visible {
  transition-delay: 900ms !important;
}

.scrolly-stage--transaction {
  width: min(1120px, calc(100vw - 128px));
  max-width: min(1120px, calc(100vw - 128px));
}

.scrolly-stage--transaction .scrolly-headline {
  max-width: 760px;
}

.execution-chain {
  position: relative;
  width: min(1060px, 100%);
  margin-top: clamp(72px, 9vh, 124px);
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(34px, 0.28fr) minmax(150px, 1fr) minmax(34px, 0.28fr) minmax(150px, 1fr) minmax(34px, 0.28fr) minmax(150px, 1fr);
  align-items: center;
  gap: clamp(10px, 1vw, 16px);
}

.execution-chain::before {
  content: '';
  position: absolute;
  left: 3%;
  right: 3%;
  top: 50%;
  height: 1px;
  background: rgba(255,255,255,0.16);
  transform: translateY(-50%);
  pointer-events: none;
}

.execution-chain__node {
  position: relative;
  z-index: 2;
  min-height: clamp(80px, 8vh, 104px);
  padding: clamp(16px, 1.5vw, 22px);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,15,34,0.16);
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
}

.execution-chain__node strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(23px, 1.9vw, 32px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.4px;
  color: var(--c-white);
}

.execution-chain__connector {
  position: relative;
  z-index: 3;
  height: 2px;
  background: var(--c-orange);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
}

.execution-chain.is-complete .execution-chain__node {
  border-color: rgba(242,94,35,0.55);
}

@media (max-width: 1023px) {
  .scrolly-stage--transaction {
    width: calc(100vw - 84px);
    max-width: calc(100vw - 84px);
  }

  .execution-chain {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 720px;
    gap: 16px;
  }

  .execution-chain::before,
  .execution-chain__connector {
    display: none;
  }
}

@media (max-width: 767px) {
  .scrolly-stage--transaction {
    width: 100%;
    max-width: 100%;
  }

  .execution-chain {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    margin-top: 30px;
  }

  .execution-chain::before,
  .execution-chain__connector {
    display: none;
  }

  .execution-chain__node {
    min-height: 96px;
    padding: 22px 24px;
    opacity: 1 !important;
    transform: none !important;
  }
}



/* ================================================
   V16 OVERRIDE: GRACEFUL PHASE 1 + PHASE 3 REVEAL SPEED
   Slower cinematic stagger for opening and closing hero phases,
   larger execution-chain numbers, and refined nav/logo breathing room.
   ================================================ */
:root {
  /* Calm, confident ease-out — no overshoot, shorter duration */
  --hero-reveal-ease: cubic-bezier(0.20, 0.00, 0.00, 1.00);
  --hero-reveal-duration: 520ms;
}

.nav {
  transition:
    background var(--dur-medium) var(--ease-default),
    box-shadow var(--dur-medium) var(--ease-default),
    height 360ms var(--ease-default);
}

.nav__inner {
  transition: transform 360ms var(--ease-default);
}

.nav--transparent {
  height: 116px;
}

.nav--solid {
  height: 84px;
}

.nav--transparent .nav__inner {
  transform: translateY(6px);
}

.nav--solid .nav__inner {
  transform: translateY(0);
}

.nav__logo-img {
  width: clamp(560px, 40vw, 760px) !important;
  max-height: 112px !important;
}

.nav--solid .nav__logo-img {
  width: clamp(420px, 30vw, 560px) !important;
  max-height: 84px !important;
}

.scrolly-stage--intro .hero-intro-reveal,
.scrolly-stage--final .hero-final-reveal {
  animation: none !important;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity var(--hero-reveal-duration) var(--hero-reveal-ease),
    transform var(--hero-reveal-duration) var(--hero-reveal-ease);
  transition-delay: 0ms !important;
}

.scrolly-stage--intro .hero-intro-reveal.is-intro-visible,
.scrolly-stage--final .hero-final-reveal.is-final-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.scrolly-stage--intro .hero-intro-reveal--kicker.is-intro-visible,
.scrolly-stage--final .hero-final-reveal--kicker.is-final-visible {
  transition-delay: 0ms !important;
}

.scrolly-stage--intro .hero-intro-reveal--headline.is-intro-visible,
.scrolly-stage--final .hero-final-reveal--headline.is-final-visible {
  transition-delay: 110ms !important;
}

.scrolly-stage--intro .hero-intro-reveal--body.is-intro-visible,
.scrolly-stage--final .hero-final-reveal--cta.is-final-visible {
  transition-delay: 220ms !important;
}

.scrolly-stage--final .scrolly-actions {
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0;
  margin-top: 64px;
}

/* Hero finale CTA — enlarged ghost pill (scoped to the hero final stage only) */
.scrolly-stage--final .btn-text {
  color: var(--c-text-on-dark);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2px;
  padding: 15px 28px;
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: var(--radius-full);
  background: transparent;
  /* pull the box left by (padding-left + border) so the LABEL aligns to the headline edge */
  margin-left: -29px;
  transition:
    gap var(--dur-fast),
    color var(--dur-fast),
    border-color var(--dur-fast),
    background var(--dur-fast);
}
.scrolly-stage--final .btn-text:hover {
  color: var(--c-text-on-dark);
  border-color: rgba(255,255,255,0.62);
  background: rgba(255,255,255,0.06);
}
.scrolly-stage--final .btn-text svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 767px) {
  /* On phones the copy stacks; drop the optical offset so the pill never clips the edge */
  .scrolly-stage--final .btn-text {
    margin-left: 0;
    padding: 13px 24px;
  }
}

@media (max-width: 1220px) {
  .nav--transparent { height: 100px; }
  .nav--solid { height: 82px; }
  .nav__logo-img {
    width: clamp(380px, 34vw, 470px) !important;
    max-height: 84px !important;
  }
  .nav--solid .nav__logo-img {
    width: clamp(330px, 27vw, 400px) !important;
    max-height: 66px !important;
  }
}

@media (max-width: 1023px) {
  .nav--transparent { height: 88px; }
  .nav--solid { height: 74px; }
  .nav--transparent .nav__inner { transform: translateY(5px); }
  .nav__logo-img {
    width: 380px !important;
    max-height: 74px !important;
  }
  .nav--solid .nav__logo-img {
    width: 320px !important;
    max-height: 62px !important;
  }
}

@media (max-width: 767px) {
  .nav--transparent { height: 74px; }
  .nav--solid { height: 66px; }
  .nav--transparent .nav__inner { transform: translateY(3px); }
  .nav__logo-img {
    width: 272px !important;
    max-height: 56px !important;
  }
  .nav--solid .nav__logo-img {
    width: 232px !important;
    max-height: 50px !important;
  }
}


/* ================================================
   V17 OVERRIDE: FIXED-PACE HERO PHASE + CHAIN TIMING
   Scroll chooses the active phase. CSS controls the animation speed,
   so fast scrolling does not make the reveal feel rushed.
   ================================================ */
.hero--scrolly .scrolly-stage {
  transition:
    opacity var(--hero-reveal-duration) var(--hero-reveal-ease),
    transform var(--hero-reveal-duration) var(--hero-reveal-ease);
}

.execution-chain__node,
.execution-chain__connector {
  transition:
    opacity var(--hero-reveal-duration) var(--hero-reveal-ease),
    transform var(--hero-reveal-duration) var(--hero-reveal-ease),
    border-color var(--hero-reveal-duration) var(--hero-reveal-ease);
}

.execution-chain__node.is-chain-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.execution-chain__connector.is-chain-visible {
  opacity: 1;
  transform: scaleX(1);
}

.execution-chain.is-complete .execution-chain__node.is-chain-visible {
  border-left-color: var(--c-orange);
}

/* ============================================================
   HERO: SCROLLY RETIRED → STATIC SINGLE-SCREEN HERO
   Stages 2 & 3 were removed; with one stage there is nothing to
   animate, so the pinned scroll-track is collapsed to a single
   viewport. This block is last in the stylesheet so it wins over
   the (many) earlier .hero--scrolly height rules at every width.
   ============================================================ */
.hero--scrolly {
  height: 100dvh !important;
  min-height: 560px !important;
  overflow: hidden !important;
}
.hero--scrolly .hero__pin {
  position: relative !important;
  height: 100dvh !important;
  min-height: 560px !important;
}
/* Intro copy stays put and fully visible (no scroll-driven fade). */
.scrolly-stage--intro {
  position: relative !important;
  top: auto !important;
  opacity: 1 !important;
  transform: none !important;
}

@media (max-width: 767px) {
  .hero--scrolly .hero__scroll-indicator {
    transition: none !important;
  }
}


/* ================================================
   V19 MOBILE FIX: HERO INTRO ANIMATION + METRIC RAIL
   Mobile-only. Desktop/tablet layouts remain unchanged.
   ================================================ */
@media (max-width: 767px) {
  /* Restore the same staggered intro reveal on mobile. Earlier mobile
     overrides forced these elements visible instantly. */
  .scrolly-stage--intro .hero-intro-reveal {
    opacity: 0 !important;
    transform: translate3d(0, 16px, 0) !important;
    transition:
      opacity var(--hero-reveal-duration) var(--hero-reveal-ease) !important,
      transform var(--hero-reveal-duration) var(--hero-reveal-ease) !important;
    transition-delay: 0ms !important;
  }

  .scrolly-stage--intro .hero-intro-reveal.is-intro-visible {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
  }

  .scrolly-stage--intro .hero-intro-reveal--kicker.is-intro-visible {
    transition-delay: 240ms !important;
  }

  .scrolly-stage--intro .hero-intro-reveal--headline.is-intro-visible {
    transition-delay: 950ms !important;
  }

  .scrolly-stage--intro .hero-intro-reveal--body.is-intro-visible {
    transition-delay: 1660ms !important;
  }

  /* Mobile evidence strip becomes a swipeable institutional stat rail.
     This avoids 2x2 wrapping issues across Android, iOS, and narrow screens. */
  .evidence-strip {
    padding: 24px 0 30px !important;
    overflow: hidden;
  }

  .evidence-strip .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .metrics-row {
    display: flex !important;
    grid-template-columns: none !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 16px !important;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: transparent !important;
    padding: 0 var(--site-edge-pad) 16px;
  }

  .metrics-row::-webkit-scrollbar {
    display: none;
  }

  .metric {
    flex: 0 0 min(82vw, 340px) !important;
    min-height: 172px;
    padding: 34px 28px !important;
    background: rgba(10, 25, 41, 0.88) !important;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    text-align: left !important;
    scroll-snap-align: start;

    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .metric:first-child,
  .metric:last-child {
    text-align: left !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .metric + .metric::before {
    display: none !important;
  }

  .metric__number {
    font-size: clamp(42px, 13vw, 58px);
    line-height: 1;
    letter-spacing: -0.8px;
    margin-bottom: 16px;
    white-space: normal;
  }

  .metric__label {
    font-size: 14px;
    line-height: 1.55;
    max-width: 230px;
  }
}


/* ================================================
   V20 FIX: RESTORE CENTERED STATIC HERO
   Re-applies the static hero centering after the nav CTA removal.
   Keeps the copy left-aligned, horizontally page-centered, and
   vertically centered inside the hero viewport.
   ================================================ */
.hero--scrolly .scrolly-copy {
  width: min(1440px, calc(100vw - (2 * var(--site-edge-pad))));
  height: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  pointer-events: none;
}

.hero--scrolly .scrolly-stage--intro {
  position: relative !important;
  top: auto !important;
  width: min(780px, 100%) !important;
  opacity: 1 !important;
  transform: none !important;
}

@media (max-width: 1023px) {
  .hero--scrolly .scrolly-copy {
    width: calc(100vw - 80px);
  }
}

@media (max-width: 767px) {
  .hero--scrolly .scrolly-copy {
    width: calc(100vw - 40px);
  }
}


/* ================================================
   V21 REFINED SECTION OVERLINES
   Slightly larger editorial section labels with a restrained orange rule.
   ================================================ */
.overline {
  display: block;
  width: fit-content;
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: 24px;
}

.overline::after {
  content: '';
  display: block;
  width: 46px;
  height: 1px;
  margin-top: 12px;
  background: rgba(242, 94, 35, 0.34);
}

/* ================================================
   MOBILE RESPONSIVENESS AUDIT OVERRIDES
   Scoped to tablet/mobile breakpoints only.
   ================================================ */
@media (max-width: 1023px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .container,
  .nav,
  .hero__content {
    max-width: 100%;
  }

  .hero--scrolly .scrolly-copy {
    max-width: 100%;
  }

  .execution-gap__columns,
  .pathway-grid,
  .footer__grid {
    min-width: 0;
  }

  .hero__video {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .nav__hamburger,
  .nav-drawer__links a,
  .btn-primary,
  .btn-text {
    min-height: calc(var(--container-pad) * 2.2);
  }

  .nav__hamburger {
    min-width: calc(var(--container-pad) * 2.2);
  }

  .nav-drawer {
    overflow: hidden;
    padding-left: var(--drawer-pad-x);
    padding-right: var(--drawer-pad-x);
  }

  .nav-drawer__links a {
    display: inline-block;
    align-items: initial;
  }

  .overline {
    max-width: 100%;
    font-size: 13px;
    letter-spacing: 2px;
    overflow-wrap: anywhere;
  }

  .section-header {
    margin-bottom: calc(var(--container-pad) * 1.8);
  }

  .section-headline,
  .section-headline--md,
  .execution-gap__headline,
  .final-cta__headline {
    max-width: 100%;
    font-size: clamp(30px, 10vw, 42px);
    letter-spacing: 0;
  }

  .section-intro,
  .execution-gap__intro {
    max-width: 100%;
  }

  .metrics-row {
    grid-template-columns: 1fr;
  }

  .hero--scrolly {
    overflow: hidden;
  }

  .hero--scrolly .scrolly-copy {
    width: calc(100% - (2 * var(--container-pad)));
    margin-right: auto;
  }

  .scrolly-headline {
    font-size: clamp(38px, 13vw, 54px);
    letter-spacing: 0;
  }

  .scrolly-headline--sm {
    font-size: clamp(30px, 10vw, 42px);
  }

  .scrolly-body,
  .scrolly-body--large,
  .hero--scrolly .hero__lead {
    max-width: 100%;
  }

  .final-cta__links {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .metric {
    padding: calc(var(--container-pad) * 1.2) var(--container-pad);
  }
}

@media (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
  .hero--scrolly .hero__pin {
    position: relative;
    height: auto;
    min-height: 100svh;
  }
}

.nav--project-page,
.nav--project-page.nav--transparent,
.nav--project-page.nav--solid {
  height: 112px !important;
  background: var(--c-navy) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.09) !important;
  box-shadow: none !important;
}

.nav--project-page .nav__inner,
.nav--project-page.nav--transparent .nav__inner,
.nav--project-page.nav--solid .nav__inner {
  transform: translateY(0) !important;
}

.nav--project-page .nav__logo-img,
.nav--project-page.nav--solid .nav__logo-img {
  width: auto !important;
  height: auto !important;
  max-height: 71px !important;
  max-width: 411px !important;
}

@media (max-width: 1023px) {
  .nav--project-page,
  .nav--project-page.nav--transparent,
  .nav--project-page.nav--solid {
    height: 92px !important;
  }

  .nav--project-page .nav__inner,
  .nav--project-page.nav--transparent .nav__inner,
  .nav--project-page.nav--solid .nav__inner {
    transform: translateY(0) !important;
  }

  .nav--project-page .nav__logo-img,
  .nav--project-page.nav--solid .nav__logo-img {
    width: auto !important;
    height: auto !important;
    max-height: 60px !important;
    max-width: 338px !important;
  }
}

@media (max-width: 767px) {
  .nav--project-page,
  .nav--project-page.nav--transparent,
  .nav--project-page.nav--solid {
    height: 78px !important;
  }

  .nav--project-page .nav__inner,
  .nav--project-page.nav--transparent .nav__inner,
  .nav--project-page.nav--solid .nav__inner {
    transform: translateY(0) !important;
  }

  .nav--project-page .nav__logo-img,
  .nav--project-page.nav--solid .nav__logo-img {
    width: auto !important;
    height: auto !important;
    max-height: 48px !important;
    max-width: 248px !important;
  }
}

/* Hero intro refresh: larger transparent logo, lower copy, and CTA reveal. */
/* AUTHORITATIVE home-nav logo sizing. Constrained by BOTH max-height and
   max-width (width/height auto) so the logo scales to fit and can never render
   at natural size, whatever the file's aspect ratio. This is the layer that
   actually wins — edit sizes here. */
.nav:not(.nav--project-page) .nav__logo-img {
  width: auto !important;
  height: auto !important;
  max-height: 57px !important;     /* ACTIVE / scrolled size (70%) */
  max-width: 329px !important;     /* safety cap so a wide lockup can't overflow */
  transition: max-height var(--dur-medium) var(--ease-default), max-width var(--dur-medium) var(--ease-default);
}

.nav--transparent:not(.nav--project-page) .nav__logo-img {
  max-height: 81px !important;     /* PASSIVE / over-hero size (70%) */
  max-width: 448px !important;
}

.scrolly-stage--intro {
  top: clamp(120px, 24vh, 218px);
}

.hero--scrolly .scrolly-copy {
  align-items: flex-start;
}

.hero--scrolly .scrolly-stage--intro {
  top: clamp(120px, 24vh, 218px) !important;
}

.hero__cta {
  pointer-events: auto;
  margin-top: clamp(44px, 6vh, 80px);
}

/* Hero CTA as a thin white-outline ghost pill — lighter than a solid fill so
   it sits BELOW the logo in the visual hierarchy and keeps the orange owned by
   the brand mark. Scoped to .hero__cta only; in-page buttons stay solid. The
   faint fill + blur keep the white label legible across the moving video. */
.btn-primary.hero__cta {
  background: rgba(255, 255, 255, 0.10);
  color: var(--c-text-on-dark);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-full);
  padding: 11px 26px;
  font-size: 14px;
  letter-spacing: 0.3px;
  box-shadow: none;
}
.btn-primary.hero__cta:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: none;
}

.scrolly-stage--intro .hero-intro-reveal {
  transition:
    opacity 1150ms var(--hero-reveal-ease) !important,
    transform 1150ms var(--hero-reveal-ease) !important;
}

.scrolly-stage--intro .hero-intro-reveal--kicker.is-intro-visible {
  transition-delay: 200ms !important;
}

.scrolly-stage--intro .hero-intro-reveal--headline.is-intro-visible {
  transition-delay: 820ms !important;
}

.scrolly-stage--intro .hero-intro-reveal--body.is-intro-visible {
  transition-delay: 1400ms !important;
}

.scrolly-stage--intro .hero-intro-reveal--cta.is-intro-visible {
  transition-delay: 1820ms !important;
}

@media (max-width: 1220px) {
  .nav:not(.nav--project-page) .nav__logo-img {
    max-height: 50px !important;
    max-width: 280px !important;
  }
  .nav--transparent:not(.nav--project-page) .nav__logo-img {
    max-height: 67px !important;
    max-width: 315px !important;
  }
}

@media (max-width: 1023px) {
  .nav:not(.nav--project-page) .nav__logo-img {
    max-height: 43px !important;
    max-width: 252px !important;
  }
  .nav--transparent:not(.nav--project-page) .nav__logo-img {
    max-height: 55px !important;
    max-width: 294px !important;
  }
}

@media (max-width: 767px) {
  .nav:not(.nav--project-page) .nav__logo-img {
    max-height: 32px !important;
    max-width: 154px !important;
  }
  .nav--transparent:not(.nav--project-page) .nav__logo-img {
    max-height: 39px !important;
    max-width: 168px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scrolly-stage--intro .hero-intro-reveal,
  .scrolly-stage--intro .hero-intro-reveal.is-intro-visible {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ================================================
   SEC-H05b: INDUSTRIES WE SERVE
   Soft-grey section · image-led cards · navy overlay
   Cards reuse the navy-on-photo treatment of the
   project rows so the section reads as one system.
   ================================================ */
.industries {
  background: var(--c-surface-soft);
  padding: var(--section-pad) 0;
  border-top: 1px solid var(--c-section-divider);
  border-bottom: 1px solid var(--c-section-divider);
}

.industries .section-header {
  max-width: 720px;
}

/* 4 across on desktop → 2 on tablet → 1 on mobile */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 56px;
}

.sector-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 340px;
  padding: 26px 24px 24px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  /* Navy gradient placeholder shows before images are dropped in */
  background: linear-gradient(150deg, var(--c-navy) 0%, var(--c-navy-mid) 52%, var(--c-navy-light) 100%);
  box-shadow: none;
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--c-text-on-dark);
  isolation: isolate;
  transition:
    transform var(--dur-medium) var(--ease-default),
    border-color var(--dur-medium) var(--ease-default);
}

.sector-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
.sector-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-default);
}

/* Consistent navy overlay — bottom-weighted so the copy stays legible */
.sector-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to top,
      rgba(0, 15, 34, 0.78) 0%,
      rgba(0, 15, 34, 0.46) 38%,
      rgba(0, 15, 34, 0.10) 72%,
      rgba(0, 15, 34, 0.02) 100%
    );
  transition: background var(--dur-medium) var(--ease-default);
}

.sector-card__body {
  position: relative;
  z-index: 2;
}

.sector-card__title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.2px;
  margin-bottom: 9px;
}
/* Orange rule under the title — the site's accent device */
.sector-card__title::after {
  content: '';
  display: block;
  width: 30px;
  height: 2px;
  margin-top: 12px;
  background: var(--c-orange);
  transition: width var(--dur-medium) var(--ease-default);
}

.sector-card__desc {
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--c-text-on-dark-secondary);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(6px);
  transition:
    max-height var(--dur-slow) var(--ease-default),
    opacity var(--dur-medium) var(--ease-default),
    transform var(--dur-medium) var(--ease-default);
}

/* Hover: lift the card, zoom the image, lighten the overlay,
   and reveal the explanatory sentence. */
@media (hover: hover) and (pointer: fine) {
  .sector-card:hover {
    transform: translateY(-4px);
    border-color: rgba(242, 94, 35, 0.45);
  }
  .sector-card:hover .sector-card__media img {
    transform: scale(1.05);
  }
  .sector-card:hover .sector-card__overlay {
    background:
      linear-gradient(
        to top,
        rgba(0, 15, 34, 0.88) 0%,
        rgba(0, 15, 34, 0.62) 42%,
        rgba(0, 15, 34, 0.30) 75%,
        rgba(0, 15, 34, 0.14) 100%
      );
  }
  .sector-card:hover .sector-card__title::after {
    width: 46px;
  }
  .sector-card:hover .sector-card__desc {
    max-height: 160px;
    opacity: 1;
    transform: none;
  }
}

/* Touch / no-hover devices can't reveal-on-hover, so show the
   sentence by default there. */
@media (hover: none), (pointer: coarse) {
  .sector-card__desc {
    max-height: 160px;
    opacity: 1;
    transform: none;
    margin-top: 2px;
  }
}

@media (max-width: 1023px) {
  .sector-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (max-width: 767px) {
  .sector-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 40px;
  }
  .sector-card {
    min-height: 280px;
  }
  /* On a single column there's room to show the sentence outright */
  .sector-card__desc {
    max-height: 160px;
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sector-card,
  .sector-card__media img,
  .sector-card__overlay,
  .sector-card__title::after,
  .sector-card__desc {
    transition: none !important;
  }
}

/* ================================================
   RISK & GOVERNANCE HERO
   Sticky image · fixed title · scrolling lede
   ================================================ */
.rg-hero {
  position: relative;
  background: var(--c-navy);
}

.rg-hero__media {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  isolation: isolate;
  background-image:
    url('business-people-discussing-charts-and-graphs-at-ni-2026-03-18-14-56-59-utc.jpg'),
    linear-gradient(150deg, var(--c-navy) 0%, var(--c-navy-mid) 55%, var(--c-navy-light) 100%);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.rg-hero__media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0,15,34,0.58) 0%, rgba(0,15,34,0.34) 42%, rgba(0,15,34,0.08) 100%),
    linear-gradient(180deg, rgba(0,15,34,0.18) 0%, rgba(0,15,34,0.06) 48%, rgba(0,15,34,0.36) 100%);
  pointer-events: none;
}

.rg-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--c-navy);
  mix-blend-mode: color;
  opacity: 0.45;
  pointer-events: none;
}

.rg-hero__title {
  position: absolute;
  z-index: 3;
  left: var(--site-edge-pad, var(--container-pad));
  right: var(--site-edge-pad, var(--container-pad));
  top: clamp(210px, 24vh, 290px);
  max-width: 900px;
}

.rg-hero__headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.06;
  letter-spacing: -0.5px;
  color: #fff;
  margin: 12px 0 0;
  text-shadow: 0 1px 18px rgba(0,15,34,0.55);
}

.rg-hero__copy {
  position: relative;
  z-index: 2;
  margin-top: -100vh;
  padding-top: 126vh;
  padding-bottom: 24vh;
}

.rg-hero__copy::before {
  content: '';
  position: absolute;
  top: 100vh;
  left: 0;
  right: 0;
  height: 120vh;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(0,15,34,0) 0%,
    rgba(0,15,34,0.28) 22%,
    rgba(0,15,34,0.30) 74%,
    rgba(0,15,34,0) 100%
  );
  pointer-events: none;
}

.rg-hero__lede {
  max-width: 560px;
  margin-left: var(--site-edge-pad, var(--container-pad));
  margin-right: var(--site-edge-pad, var(--container-pad));
  font-family: var(--font-body);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.66;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 14px rgba(0,15,34,0.5);
}

.rg-hero__lede p {
  margin: 0;
}

@media (max-width: 700px) {
  .rg-hero__media {
    min-height: 560px;
    background-position: center, center;
  }

  .rg-hero__title {
    top: clamp(160px, 22vh, 210px);
  }

  .rg-hero__headline {
    font-size: clamp(38px, 12vw, 52px);
  }

  .rg-hero__copy {
    padding-top: 122vh;
    padding-bottom: 24vh;
  }
}

/* ================================================
   RG HERO TEXT — ENTRANCE REVEAL
   Mirrors the index hero intro text: staggered fade-rise on load.
   Triggered by adding `is-rg-revealed` (see risk-governance.html).
   ================================================ */
.rg-hero .rg-reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 1150ms var(--hero-reveal-ease),
    transform 1150ms var(--hero-reveal-ease);
  will-change: opacity, transform;
}

.rg-hero .rg-reveal.is-rg-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.rg-hero .rg-reveal--kicker.is-rg-revealed   { transition-delay: 200ms; }
.rg-hero .rg-reveal--headline.is-rg-revealed { transition-delay: 820ms; }

@media (prefers-reduced-motion: reduce) {
  .rg-hero .rg-reveal,
  .rg-hero .rg-reveal.is-rg-revealed {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ================================================
   HERO FINAL ADJUSTMENT — STATEMENT FIT + NAVY CTA
   Scoped to the homepage hero only. Keeps the existing
   hero reveal classes and typography system intact.
   ================================================ */
.hero--scrolly .scrolly-copy {
  width: min(1440px, calc(100vw - (2 * var(--site-edge-pad))));
  height: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.hero--scrolly .scrolly-stage--intro {
  position: relative !important;
  top: auto !important;
  width: min(1080px, 100%) !important;
  opacity: 1 !important;
  transform: none !important;
  text-align: center;
}

.hero--scrolly .hero__overlay {
  background:
    linear-gradient(90deg,
      rgba(0,15,34,0.26) 0%,
      rgba(0,15,34,0.36) 25%,
      rgba(0,15,34,0.40) 50%,
      rgba(0,15,34,0.36) 75%,
      rgba(0,15,34,0.26) 100%),
    linear-gradient(180deg,
      rgba(0,15,34,0.08) 0%,
      rgba(0,15,34,0.18) 50%,
      rgba(0,15,34,0.28) 100%);
  opacity: 1;
}

.scrolly-headline--statement {
  max-width: min(1180px, 100%);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  font-size: clamp(20px, 1.7vw, 22.5px) !important;
  line-height: 1.18;
  letter-spacing: -0.24px;
  text-wrap: balance;
}

.scrolly-headline--statement .hero-statement-line {
  display: block;
  white-space: nowrap;
}

.scrolly-headline--statement .hero-statement-line + .hero-statement-line {
  margin-top: 0.36em;
}

.btn-primary.hero__cta {
  background: var(--c-navy) !important;
  color: var(--c-white) !important;
  border: 0 !important;
  outline: none;
  border-radius: var(--radius-full);
  padding: 11px 26px;
  font-size: 14px;
  letter-spacing: 0.3px;
  box-shadow: none;
}

.btn-primary.hero__cta:hover {
  background: var(--c-navy-mid) !important;
  color: var(--c-white) !important;
  border: 0 !important;
  box-shadow: none;
}

@media (max-width: 1023px) {
  .hero--scrolly .scrolly-copy {
    width: calc(100vw - 80px);
  }

  .hero--scrolly .scrolly-stage--intro {
    width: min(820px, 100%) !important;
  }

  .scrolly-headline--statement {
    max-width: min(100%, 960px);
    font-size: clamp(20px, 2.15vw, 22px) !important;
    line-height: 1.2;
  }
}

@media (max-width: 767px) {
  .hero--scrolly .scrolly-copy {
    width: calc(100vw - 40px);
  }

  .hero--scrolly .scrolly-stage--intro {
    width: 100% !important;
  }

  .scrolly-headline--statement {
    max-width: 100%;
    font-size: clamp(20px, 5.2vw, 24px) !important;
    line-height: 1.22;
    letter-spacing: -0.06px;
  }

  .scrolly-headline--statement .hero-statement-line {
    display: inline;
  }

  .scrolly-headline--statement .hero-statement-line + .hero-statement-line {
    margin-top: 0;
  }
}


/* ================================================
   SEC-H02 CLEAN STATIC HERO
   Static centered video hero with no hero overlay, vignette,
   scroll-tied stage logic, or intro reveal.
   ================================================ */
.hero--static {
  position: relative;
  height: 100dvh;
  min-height: 560px;
  overflow: hidden;
  background: var(--c-navy-mid);
}

.hero--static .hero__pin {
  position: relative;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
  background: var(--c-navy-mid);
}

.hero--static .hero__video {
  position: absolute;
  inset: 0;
}

.hero--static .hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  transform: none;
  filter: none;
}

/* Hero legibility — LUT already carries a light global wash, so we add
   only a whisper of even tint plus a soft center bloom behind the copy.
   Both layers scoped to .hero--static; shared --overlay-hero token left
   untouched. */
.hero--static .hero__overlay {
  z-index: 1;
  background: rgba(0, 15, 34, 0.14);
  pointer-events: none;
}

.hero--static .hero__vignette {
  z-index: 2;
  background: radial-gradient(
    ellipse 92% 72% at 50% 50%,
    rgba(0, 15, 34, 0.26) 0%,
    rgba(0, 15, 34, 0.16) 38%,
    transparent 68%
  );
  pointer-events: none;
}


.hero-static__copy {
  position: relative;
  z-index: 5;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--site-edge-pad, var(--container-pad));
  text-align: center;
}

.hero-static__intro {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.hero-static__statement {
  margin: 0 auto;
  max-width: min(1180px, 100%);
  font-family: var(--font-display);
  font-size: clamp(40.5px, 3.4425vw, 45.5625px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.28px;
  color: var(--c-white);
  text-wrap: balance;
}

.hero-static__statement .hero-statement-line {
  display: block;
  white-space: nowrap;
}

.hero-static__statement .hero-statement-line + .hero-statement-line {
  margin-top: 0.36em;
}

.hero-static__cta {
  margin-top: clamp(44px, 6vh, 80px);
  background: var(--c-navy);
  color: var(--c-white);
  border: 1px solid color-mix(in srgb, var(--c-white) 58%, transparent);
  outline: none;
  border-radius: var(--radius-full);
  padding: 11px 26px;
  font-size: 14px;
  letter-spacing: 0.3px;
  box-shadow: none;
  transform: none;
  transition:
    background var(--dur-fast) var(--ease-default),
    color var(--dur-fast) var(--ease-default),
    border-color var(--dur-fast) var(--ease-default);
}

.hero-static__cta:hover,
.hero-static__cta:focus-visible {
  background: var(--c-navy-mid);
  color: var(--c-white);
  border-color: color-mix(in srgb, var(--c-white) 78%, transparent);
  box-shadow: none;
  transform: none;
}

.hero-static__cta:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--c-white) 70%, transparent);
  outline-offset: 4px;
}

@media (max-width: 1023px) {
  .hero-static__intro,
  .hero-static__statement {
    max-width: min(100%, 960px);
  }

  .hero-static__statement {
    font-size: clamp(40.5px, 4.35375vw, 44.55px);
    line-height: 1.16;
  }
}

@media (max-width: 767px) {
  .hero--static {
    min-height: 100svh;
  }

  .hero-static__statement {
    max-width: 100%;
    font-size: clamp(40.5px, 10.53vw, 48.6px);
    line-height: 1.16;
    letter-spacing: -0.08px;
  }

  .hero-static__statement .hero-statement-line {
    display: inline;
    white-space: normal;
  }

  .hero-static__statement .hero-statement-line + .hero-statement-line {
    margin-top: 0;
  }
}

/* ================================================
   HOME NAV SIZE REBALANCE
   Increases home nav logo caps by 25% and active/passive
   nav heights by 35%. Scoped away from project-page nav.
   ================================================ */
.nav--transparent:not(.nav--project-page) {
  height: 157px !important;
}

.nav--solid:not(.nav--project-page) {
  height: 113px !important;
}

.nav:not(.nav--project-page) .nav__logo-img {
  max-height: 71px !important;
  max-width: 411px !important;
}

.nav--transparent:not(.nav--project-page) .nav__logo-img {
  max-height: 101px !important;
  max-width: 560px !important;
}

@media (max-width: 1220px) {
  .nav--transparent:not(.nav--project-page) {
    height: 135px !important;
  }

  .nav--solid:not(.nav--project-page) {
    height: 111px !important;
  }

  .nav:not(.nav--project-page) .nav__logo-img {
    max-height: 63px !important;
    max-width: 350px !important;
  }

  .nav--transparent:not(.nav--project-page) .nav__logo-img {
    max-height: 84px !important;
    max-width: 394px !important;
  }
}

@media (max-width: 1023px) {
  .nav--transparent:not(.nav--project-page) {
    height: 119px !important;
  }

  .nav--solid:not(.nav--project-page) {
    height: 100px !important;
  }

  .nav:not(.nav--project-page) .nav__logo-img {
    max-height: 54px !important;
    max-width: 315px !important;
  }

  .nav--transparent:not(.nav--project-page) .nav__logo-img {
    max-height: 69px !important;
    max-width: 368px !important;
  }
}

@media (max-width: 767px) {
  .nav--transparent:not(.nav--project-page) {
    height: 100px !important;
  }

  .nav--solid:not(.nav--project-page) {
    height: 89px !important;
  }

  .nav:not(.nav--project-page) .nav__logo-img {
    max-height: 40px !important;
    max-width: 193px !important;
  }

  .nav--transparent:not(.nav--project-page) .nav__logo-img {
    max-height: 49px !important;
    max-width: 210px !important;
  }
}


/* ================================================================
   NEWS & INSIGHTS
   Homepage strip (full-bleed both ends) + reusable on listing page.
   Lead card carries the loud navy gradient; others stay quiet/neutral.
   Listing page adds a dense vertical list below the strip.
   Article templates: hero variant + text-only variant.
   ================================================================ */

/* --- Shared: full-bleed helper ---
   Breaks a section out of .container to true viewport edges while its
   heading/controls stay on the normal grid. Mirrors how .hero bleeds. */
.news-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* --- Pinned hero banner: contained (not full-bleed) featured-story
   block above the News & Insights strip. Driven entirely by the one
   article flagged `pinned: true` in news-data.js — independent of the
   carousel below it. Ships hidden in markup; JS only reveals it once
   a valid pinned article with a heroImage is found. --- */
.pinned-hero {
  display: block;
  margin-bottom: clamp(48px, 6vw, 88px);
}
.pinned-hero[hidden] { display: none; }

.pinned-hero__link {
  display: block;
  position: relative;
  text-decoration: none;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.pinned-hero__media {
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 7;
  background: var(--c-surface-soft);
}
.pinned-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-medium) var(--ease-default);
}
.pinned-hero__link:hover .pinned-hero__media img {
  transform: scale(1.02);
}

/* Body sits over the FULL image height (not just its own padding box)
   so the gradient scrim behind it always covers the tag/headline area
   in solid dark, regardless of how tall the text content is. */
.pinned-hero__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 48px) clamp(24px, 3vw, 36px);
  background: linear-gradient(to top, rgba(0,15,34,0.88) 0%, rgba(0,15,34,0.72) 32%, rgba(0,15,34,0.18) 70%, rgba(0,15,34,0) 100%);
}

.pinned-hero__meta {
  margin-bottom: 12px;
}
.pinned-hero__tag {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--c-coral);
}

.pinned-hero__headline {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 500;
  line-height: 1.22;
  color: var(--c-text-on-dark);
  max-width: 760px;
  margin-bottom: 10px;
}

.pinned-hero__dek {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-text-on-dark-secondary);
  max-width: 600px;
  margin-bottom: 16px;
}

.pinned-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-on-dark);
}
.pinned-hero__cta svg {
  width: 12px; height: 12px;
  transition: transform var(--dur-fast) var(--ease-default);
}
.pinned-hero__link:hover .pinned-hero__cta svg { transform: translateX(3px); }

@media (max-width: 767px) {
  .pinned-hero__media { aspect-ratio: 4 / 3; }
  .pinned-hero__headline { font-size: 22px; max-width: 100%; }
  .pinned-hero__dek { font-size: 14px; max-width: 100%; }
  .pinned-hero__body { padding: 20px 20px 22px; }
}

/* --- Section shell (homepage placement) --- */
.news {
  padding: var(--section-pad) 0;
  padding-bottom: clamp(0px, 1vw, 12px);
  background: var(--c-white);
  overflow: hidden; /* contains the full-bleed strip's edge fade */
}
.news .section-header {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.news .section-header .overline {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.news .section-header .overline::after { margin-left: auto; margin-right: auto; }
.news .section-headline {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* --- Strip viewport + edge fade ---
   The card row scrolls inside this. Only the RIGHT edge fades: the lead
   card always sits first (scrollLeft 0), so there is never hidden content
   to its left — a left fade there would just wash white over the lead
   card's own colour, which is the bug this comment is here to prevent
   reintroducing. The right fade still signals "more offscreen" honestly,
   since later cards really do continue past the viewport edge. */
.news-strip {
  position: relative;
}
.news-strip::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: clamp(24px, 6vw, 96px);
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to left, var(--c-white), rgba(255,255,255,0));
}
/* On a navy host (listing page top band uses light, so default stays white;
   this hook lets a future dark placement swap the fade colour via token) */
.news-strip--on-navy::after {
  background: linear-gradient(to left, var(--c-navy), rgba(0,15,34,0));
}

.news-strip__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding: 4px clamp(40px, 7vw, 96px) 28px var(--container-pad);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
@media (max-width: 1023px) {
  .news-strip__track { padding-left: clamp(24px, 5vw, 40px); }
}
.news-strip__track::-webkit-scrollbar { display: none; }

/* --- Card --- */
.news-card {
  scroll-snap-align: start;
  flex: 0 0 clamp(260px, 22vw, 320px);
  min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px 26px;
  border-radius: var(--radius-md);
  background: var(--c-surface-soft);
  border: 1px solid var(--c-border-light);
  text-decoration: none;
  transition: transform var(--dur-medium) var(--ease-default),
              box-shadow var(--dur-medium) var(--ease-default),
              border-color var(--dur-medium) var(--ease-default);
}
.news-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--c-border-mid);
}

.news-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--c-text-tertiary);
  margin-bottom: 18px;
}
.news-card__tag { color: var(--c-orange); }
.news-card__dot { opacity: 0.5; }

.news-card__headline {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.34;
  color: var(--c-text-primary);
  margin-bottom: 16px;
}

.news-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-primary);
}
.news-card__cta svg {
  width: 12px; height: 12px;
  transition: transform var(--dur-fast) var(--ease-default);
}
.news-card:hover .news-card__cta svg { transform: translateX(3px); }

/* --- Lead card: the loud, alive navy gradient ---
   This is the section's one bold accent — the rest of the strip stays
   quiet so the lead card actually reads as "this matters most," not
   as arbitrary decoration. */
.news-card--lead {
  background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-light) 52%, var(--c-navy-mid) 100%);
  border-color: transparent;
  position: relative;
  overflow: hidden;
}
.news-card--lead::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 20%, rgba(242,94,35,0.38), transparent 65%);
  pointer-events: none;
}
.news-card--lead .news-card__meta { color: var(--c-text-on-dark-tertiary); }
.news-card--lead .news-card__tag { color: var(--c-coral); }
.news-card--lead .news-card__headline { color: var(--c-text-on-dark); font-weight: 500; }
.news-card--lead .news-card__cta { color: var(--c-text-on-dark); }
.news-card--lead:hover {
  box-shadow: 0 10px 36px rgba(0,15,34,0.32), 0 4px 14px rgba(242,94,35,0.18);
}

/* --- Card placeholder graphic (brand-mark watermark) ---
   Used on the listing page's thumbnail slots when no real photo exists
   yet. Strip cards stay text-only per spec; this class is for the list
   rows below, and for article cards that opt into a thumbnail. */
.news-card__mark-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}
.news-card__mark {
  width: 60%;
  height: auto;
  color: var(--c-border-mid);
  opacity: 0.5;
}

/* --- Strip controls: progress bar + arrows + View all --- */
.news-controls {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 8px;
}
.news-controls__track {
  flex: 1 1 auto;
  height: 1px;
  background: var(--c-border-mid);
  position: relative;
}
.news-controls__progress {
  position: absolute;
  top: 0; left: 0;
  height: 1px;
  background: var(--c-orange);
  width: 22%; /* JS updates this inline per scroll position */
  transition: width var(--dur-fast) linear;
}
.news-controls__arrows {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.news-arrow {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid var(--c-border-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-primary);
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast), opacity var(--dur-fast);
}
.news-arrow svg { width: 16px; height: 16px; }
.news-arrow:hover:not(:disabled) {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-text-on-dark);
}
.news-arrow:disabled {
  opacity: 0.32;
  cursor: default;
}
.news-controls__viewall {
  flex-shrink: 0;
}

/* ================================================================
   LISTING PAGE — news-insights.html
   Strip reused at top (full-bleed) + dense vertical list below.
   ================================================================ */
.news-listing-head {
  padding: 18px 0 0;
  text-align: center;
}
@media (max-width: 1023px) {
  .news-listing-head { padding-top: 16px; }
}
@media (max-width: 767px) {
  .news-listing-head { padding-top: 14px; }
}
.news-listing-head .overline { margin-left: auto; margin-right: auto; }
.news-listing-head .overline::after { margin-left: auto; margin-right: auto; }
.news-listing-head .section-headline {
  max-width: 720px;
  margin: 0 auto 8px;
}
.news-listing-head__sub {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--c-text-tertiary);
  margin-bottom: 40px;
}

/* Featured strip section sits directly under the head, full-bleed */
.news-listing .news {
  padding-top: 0;
}

/* Search + filters bar */
.news-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  padding: 32px clamp(24px, 4vw, 40px);
  margin: 56px 0 0;
  background: var(--c-surface-soft);
  border-radius: var(--radius-md);
}
.news-toolbar__search {
  flex: 1 1 260px;
}
.news-toolbar label {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--c-text-tertiary);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.news-toolbar__search-input {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--c-white);
  border: 1px solid var(--c-border-mid);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
}
.news-toolbar__search-input svg { width: 16px; height: 16px; color: var(--c-text-tertiary); flex-shrink: 0; }
.news-toolbar__search-input input {
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 14px;
  width: 100%;
  background: transparent;
  color: var(--c-text-primary);
}
.news-toolbar__filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.news-toolbar__filters select {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--c-text-primary);
  background: var(--c-white);
  border: 1px solid var(--c-border-mid);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  min-width: 160px;
}

/* Vertical list rows */
.news-list {
  margin: 8px 0 0;
}
.news-list__row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--c-border-light);
  text-decoration: none;
}
.news-list__row:first-child { border-top: 1px solid var(--c-border-light); }
.news-list__thumb {
  width: 120px;
  height: 80px;
  border-radius: var(--radius-sm);
  background: var(--c-surface-soft);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.news-list__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-list__thumb .news-card__mark {
  width: 44%;
}
.news-list__body .news-card__meta { margin-bottom: 8px; }
.news-list__body .news-card__headline {
  font-size: 17px;
  margin-bottom: 0;
  transition: color var(--dur-fast);
}
.news-list__row:hover .news-list__body .news-card__headline { color: var(--c-orange); }
.news-list__cta { justify-self: end; white-space: nowrap; }

@media (max-width: 640px) {
  .news-list__row {
    grid-template-columns: 84px 1fr;
    grid-template-areas: "thumb body" "cta cta";
  }
  .news-list__thumb { grid-area: thumb; width: 84px; height: 64px; }
  .news-list__body { grid-area: body; }
  .news-list__cta { grid-area: cta; justify-self: start; margin-top: 10px; }
}

/* --- Empty state: no results match the current search/filter --- */
.news-list__empty {
  padding: 64px 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--c-text-tertiary);
}

/* --- Pagination --- */
.news-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 48px 0 80px;
}
.news-pager__btn {
  min-width: 40px;
  height: 40px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  border: 1px solid var(--c-border-mid);
  background: var(--c-white);
  color: var(--c-text-secondary);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.news-pager__btn svg { width: 15px; height: 15px; }
.news-pager__btn:hover:not(:disabled):not(.is-active) {
  border-color: var(--c-navy);
  color: var(--c-navy);
}
.news-pager__btn.is-active {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-text-on-dark);
}
.news-pager__btn:disabled {
  opacity: 0.32;
  cursor: default;
}
.news-pager__ellipsis {
  color: var(--c-text-tertiary);
  padding: 0 4px;
  font-size: 14px;
}

/* ================================================================
   ARTICLE TEMPLATES — shared scaffolding
   Two variants: .article--hero (image-led) and .article--text
   (no image slot at all — press-release style).
   ================================================================ */
.article-breadcrumb {
  padding: calc(112px + 24px) var(--container-pad) 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--c-text-tertiary);
}
@media (max-width: 1023px) {
  .article-breadcrumb { padding-top: calc(92px + 20px); padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 767px) {
  .article-breadcrumb { padding-top: calc(78px + 16px); padding-left: 24px; padding-right: 24px; }
}
.article-breadcrumb a { color: var(--c-text-tertiary); }
.article-breadcrumb a:hover { color: var(--c-orange); }
.article-breadcrumb span[aria-hidden] { margin: 0 6px; opacity: 0.6; }
.article-breadcrumb .is-current { color: var(--c-text-secondary); }

.article-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--c-orange);
  border: 1px solid var(--c-border-orange);
  border-radius: var(--radius-full);
  padding: 6px 16px;
  margin: 14px 0 24px;
}

.article-rule {
  height: 1px;
  background: var(--c-orange);
  width: 100%;
  margin-bottom: 40px;
}

.article-header__headline {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--c-text-primary);
  max-width: 880px;
  margin-bottom: 16px;
}
.article-header__dek {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--c-text-secondary);
  max-width: 760px;
  margin-bottom: 40px;
}

.article-byline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  border-top: 1px solid var(--c-border-light);
  border-bottom: 1px solid var(--c-border-light);
  margin-bottom: 48px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--c-text-tertiary);
}
.article-byline__share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  border: 1px solid var(--c-border-mid);
  color: var(--c-text-primary);
}
.article-byline__share svg { width: 15px; height: 15px; }
.article-byline__share {
  cursor: pointer;
  background: none;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.article-byline__share:hover,
.article-byline__share[aria-expanded="true"] {
  color: var(--c-orange);
  border-color: var(--c-border-orange);
  background: var(--c-orange-subtle);
}

/* ── SHARE POPOVER ── */
.share-widget { position: relative; display: inline-flex; }

.share-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 40;
  display: flex;
  gap: 8px;
  padding: 10px;
  background: var(--c-surface-card);
  border: 1px solid var(--c-border-mid);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease-enter),
              transform var(--dur-fast) var(--ease-enter),
              visibility var(--dur-fast);
}
.share-popover.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.share-popover__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-full);
  border: 1px solid var(--c-border-mid);
  color: var(--c-text-primary);
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.share-popover__item svg { width: 15px; height: 15px; }
.share-popover__item[data-share="whatsapp"] svg { width: 14px; height: 16px; }
.share-popover__item:hover {
  color: var(--c-orange);
  border-color: var(--c-border-orange);
  background: var(--c-orange-subtle);
}
.share-popover__copied {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-on-dark);
  background: var(--c-navy);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast);
}
.share-popover__copied.is-visible { opacity: 1; }

@media (max-width: 480px) {
  .share-popover { right: -8px; }
}

.article-body {
  max-width: 720px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.8;
  color: var(--c-text-secondary);
}
.article-body p { margin-bottom: 26px; }
.article-body p.is-quote {
  font-style: italic;
  color: var(--c-text-primary);
}
.article-body p.is-ends {
  text-align: center;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--c-text-tertiary);
  margin: 48px 0;
}
.article-contact {
  max-width: 720px;
  padding-top: 32px;
  border-top: 1px solid var(--c-border-light);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--c-text-tertiary);
}
.article-contact a { color: var(--c-orange); }

.article-footer-cta {
  margin: 80px 0 0;
}

/* Hero variant: full-bleed image between byline removed up top and
   headline shown instead beneath it; image carries the visual weight. */
.article--hero .article-header__headline,
.article--hero .article-header__dek { max-width: 880px; }
.article-hero-media {
  width: 100%;
  aspect-ratio: 16 / 7;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 8px 0 48px;
  background: var(--c-surface-soft);
}
.article-hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .article-hero-media { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); }
  .article-header__headline { max-width: 100%; }
  .article-byline { flex-wrap: wrap; gap: 12px; }
  .news-card { flex: 0 0 78vw; }
}

/* ================================================
   CONTACT PAGE
   Minimal, information-only. A single UAE head-office card carries
   the address, phone and email. The constrained desktop measure keeps
   the card intentional; it expands to the available width on smaller
   screens. The flag remains a compact wayfinding detail.
   ================================================ */
.contact-page {
  padding-bottom: 140px;
}

.contact-page .article-header__headline {
  margin-top: 8px;
  margin-bottom: 56px;
  max-width: 100%;
}

.offices {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: start;
}

.offices--single {
  grid-template-columns: minmax(0, 760px);
}

.office-card {
  background: var(--c-surface-soft);
  border-radius: var(--radius-lg);
  padding: 48px;
}

.office-card--primary {
  background: var(--c-navy);
}

.office-card--secondary {
  padding: 36px;
}

.office-card__flag-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.office-card__flag {
  width: 28px;
  height: auto;
  border-radius: 3px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
}

.office-card--secondary .office-card__flag {
  width: 22px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}

.office-card__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-orange);
}

.office-card__address {
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.55;
  margin-bottom: 28px;
}

.office-card--primary .office-card__address {
  color: var(--c-white);
}

.office-card--secondary .office-card__address {
  color: var(--c-text-primary);
  font-size: clamp(17px, 1.5vw, 19px);
}

.office-card__contact-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
}

.office-card__contact-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-default), color var(--dur-fast) var(--ease-default);
}

.office-card--primary .office-card__contact-link {
  color: var(--c-white);
  border-bottom-color: rgba(255,255,255,0.3);
}
.office-card--primary .office-card__contact-link:hover {
  color: var(--c-orange);
  border-bottom-color: var(--c-orange);
}

.office-card--secondary .office-card__contact-link {
  color: var(--c-text-primary);
  border-bottom-color: rgba(0,0,0,0.18);
}
.office-card--secondary .office-card__contact-link:hover {
  color: var(--c-orange);
  border-bottom-color: var(--c-orange);
}

@media (max-width: 1023px) {
  .offices {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .office-card--secondary {
    padding: 48px;
  }
  .office-card--secondary .office-card__address {
    font-size: clamp(19px, 1.8vw, 23px);
  }
}

@media (max-width: 767px) {
  .contact-page .article-header__headline { margin-bottom: 36px; }
  .office-card,
  .office-card--secondary {
    padding: 32px 28px;
  }
  .office-card__contact-links {
    align-items: flex-start;
    flex-direction: column;
  }
}



/* ================================================================
   HOMEPAGE — OUR STORY teaser band
   ================================================================ */
/* ================================================================
   HOMEPAGE — OUR STORY teaser band
   ================================================================ */
.story-teaser {
  background: var(--c-navy); color: var(--c-text-on-dark);
  padding: clamp(80px, 10vw, 132px) 0; border-top: 1px solid var(--c-border-dark);
}
.story-teaser__inner { max-width: var(--reading-max); }
.story-teaser .overline { color: var(--c-orange); }
.story-teaser__headline {
  font-family: var(--font-display); font-size: clamp(30px, 4vw, 54px);
  font-weight: 400; line-height: 1.12; letter-spacing: -0.5px;
  color: var(--c-text-on-dark); margin: 0 0 clamp(20px, 2.4vw, 30px); max-width: 18ch;
}
.story-teaser__body {
  font-family: var(--font-body); font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.74; color: var(--c-text-on-dark-secondary); max-width: 620px; margin: 0 0 clamp(28px, 3vw, 40px);
}
.story-teaser__link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  letter-spacing: 0.4px; text-transform: uppercase; color: var(--c-orange); text-decoration: none;
  transition: gap var(--dur-fast) var(--ease-default), color var(--dur-fast) var(--ease-default);
}
.story-teaser__link svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-default); }
.story-teaser__link:hover { gap: 16px; color: var(--c-orange-hover); }
.story-teaser__link:hover svg { transform: translateX(3px); }

/* ================================================================
   OUR STORY — INTRO (content-first, no hero)
   Standalone top block: eyebrow → headline → paragraph → two CTAs →
   brand-mark divider. The sticky narrative starts below it with Context.
   ================================================================ */
.storyIntro {
  background: var(--c-white);
  padding-top: calc(112px + clamp(56px, 8vw, 96px));
  padding-bottom: clamp(48px, 6vw, 80px);
}

.storyIntro__top { max-width: 880px; }

.storyIntro__h {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.4vw, 70px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -1.2px;
  color: var(--c-text-primary);
  max-width: 14ch;
  margin: 0 0 28px;
}

.storyIntro__para {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.5;
  color: var(--c-text-secondary);
  max-width: 660px;
  margin: 0 0 clamp(36px, 4.5vw, 52px);
}

.storyIntro__cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 40px);
}

/* Divider: thin rule — brand mark — thin rule. A deliberate pause between
   the intro and the narrative below. */
.storyIntro__divider {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
  max-width: var(--container-max);
  margin: clamp(64px, 8vw, 104px) auto clamp(8px, 1vw, 16px);
  padding: 0 var(--container-pad);
}
.storyIntro__divider-line {
  flex: 1 1 auto;
  height: 1px;
  background: var(--c-border-mid);
}
.storyIntro__divider-mark {
  flex: 0 0 auto;
  display: flex;
  color: var(--c-orange);
  opacity: 0.85;
}
.storyIntro__divider-mark svg { width: 30px; height: auto; }

@media (max-width: 1023px) {
  .storyIntro { padding-top: calc(92px + clamp(48px, 7vw, 80px)); }
}
@media (max-width: 767px) {
  .storyIntro { padding-top: calc(78px + clamp(36px, 8vw, 56px)); }
  .storyIntro__divider { margin: 48px auto 8px; }
}

/* Anchor target for deep-linking into the narrative (e.g. from the
   homepage) — offset so the fixed nav doesn't clip the top of it. */
#narrative { scroll-margin-top: 112px; }
@media (max-width: 1023px) { #narrative { scroll-margin-top: 92px; } }
@media (max-width: 767px)  { #narrative { scroll-margin-top: 78px; } }

/* ================================================================
   OUR STORY — EDITORIAL RHYTHM (our-story.html)
   Standalone .storyIntro (above) → sticky narrative (.storyB), which
   starts at Context (panel 01). .storyE-band / .storyE-text below are
   leftover from an earlier "alternating full-bleed band" layout,
   superseded by the sticky .storyB panels — kept in case that treatment
   is reused elsewhere, but unused on this page.
   ================================================================ */

/* Full-bleed image bands between movements (~70vh) */
.storyE-band {
  width: 100%;
  height: clamp(360px, 70vh, 760px);
  background: var(--c-navy) center center / cover no-repeat;
}
.storyE-band[data-band="gap"]    { background-image: url('story-gap.jpg'); }
.storyE-band[data-band="bridge"] { background-image: url('story-bridge.jpg'); }
.storyE-band[data-band="role"]   { background-image: url('story-role.jpg'); }
.storyE-band[data-band="reach"]  { background-image: url('story-reach.jpg'); }

/* White text movements */
.storyE-text {
  background: var(--c-white);
  padding: clamp(80px, 11vw, 150px) 0;
}
.storyE-text--close { padding-bottom: clamp(96px, 13vw, 170px); }
.storyE-text__inner { max-width: var(--reading-max); }
.storyE-text__h {
  font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 400; line-height: 1.16; letter-spacing: -0.5px;
  color: var(--c-text-primary); margin: 0 0 clamp(24px, 2.6vw, 36px); max-width: 22ch;
}
.storyE-text p {
  font-family: var(--font-body); font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.78; color: var(--c-text-secondary); margin: 0 0 1.35em;
}
.storyE-text p:last-of-type { margin-bottom: 0; }
.storyE-cta { margin-top: clamp(40px, 5vw, 64px); }

/* Lead line — slightly larger, primary ink, EB Garamond */
.storyE-text__lead {
  font-family: var(--font-display) !important;
  font-size: clamp(21px, 2vw, 28px) !important;
  line-height: 1.45 !important;
  color: var(--c-text-primary) !important;
  letter-spacing: -0.2px;
  margin-bottom: 1.2em !important;
}

/* Three-item treatment (Buyers / Suppliers / Banks) */
.storyE-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 44px);
  margin: clamp(32px, 4vw, 48px) 0;
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--c-border-light);
}
.storyE-trio__item { position: relative; padding-top: 6px; }
.storyE-trio__item::before {
  content: '';
  position: absolute; top: -29px; left: 0;
  width: 36px; height: 2px; background: var(--c-orange);
}
.storyE-trio__label {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 500;
  color: var(--c-text-primary);
  margin-bottom: 8px;
  letter-spacing: -0.2px;
}
.storyE-trio__text {
  font-family: var(--font-body) !important;
  font-size: clamp(15px, 1.05vw, 16.5px) !important;
  line-height: 1.6 !important;
  color: var(--c-text-secondary) !important;
  margin: 0 !important;
}
@media (max-width: 680px) {
  .storyE-trio { grid-template-columns: 1fr; gap: 28px; }
  .storyE-trio__item::before { top: -20px; }
}

/* Mobile: bands a touch shorter so they don't dominate */
@media (max-width: 600px) {
  .storyE-band { height: clamp(300px, 56vh, 460px); }
}

/* ================================================
   OUR STORY · OPTION B STICKY NARRATIVE LAYOUT
   Sticky split-scrollytelling treatment with restrained
   brand emphasis for Agribusiness and THAMANI.
   ================================================ */
.storyB {
  --storyB-green: #007A3D;
  --storyB-green-bright: #00A651;
  --storyB-panel-pad-y: clamp(88px, 10vw, 148px);
  background: var(--c-white);
}

.storyB-panel {
  position: relative;
  isolation: isolate;
  min-height: clamp(820px, 118vh, 1120px);
  background: var(--c-white);
}

.storyB-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

/* Full-bleed two-column grid: text column (padded, capped reading width)
   on one side, image column that bleeds to the viewport edge on the other.
   Default = text left / image right. .storyB-panel--flip swaps them.
   --storyB-gutter is option B: a thin seam between text and image so the
   words get air even though the image bleeds out on its far edge. */
.storyB-panel__inner {
  --storyB-gutter: clamp(32px, 4vw, 64px);
  display: grid;
  grid-template-columns: 1fr minmax(0, 46vw);
  align-items: stretch;
  gap: 0;
  width: 100%;
  min-height: inherit;
  padding: 0;
}

/* Flipped panels: image left, text right (column order reversed). */
.storyB-panel--flip .storyB-panel__inner {
  grid-template-columns: minmax(0, 46vw) 1fr;
}

.storyB-panel__copy {
  grid-column: 1;
  grid-row: 1;
  max-width: calc(var(--reading-max) + var(--site-edge-pad, var(--container-pad)) + var(--storyB-gutter));
  padding:
    var(--storyB-panel-pad-y)
    var(--storyB-gutter)
    var(--storyB-panel-pad-y)
    var(--site-edge-pad, var(--container-pad));
  align-self: start;
}

/* Flipped: text sits in column 2, so its outer edge is now the right side. */
.storyB-panel--flip .storyB-panel__copy {
  grid-column: 2;
  justify-self: end;
  padding:
    var(--storyB-panel-pad-y)
    var(--site-edge-pad, var(--container-pad))
    var(--storyB-panel-pad-y)
    var(--storyB-gutter);
}

.storyB-panel__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--c-orange);
}

.storyB-panel__eyebrow::after {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.storyB-panel__h {
  margin-bottom: clamp(24px, 3vw, 42px);
}

.storyB-panel__copy p {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.08vw, 18px);
  line-height: 1.78;
  color: var(--c-text-secondary);
  margin: 0 0 1.35em;
}

.storyB-panel__copy p:last-child,
.storyB-panel__copy p:last-of-type {
  margin-bottom: 0;
}

.storyB-panel__visual {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  align-self: start;
  overflow: hidden;
  background: var(--c-navy);
}

/* Flipped: image lives in column 1 (bleeds to the viewport's left edge). */
.storyB-panel--flip .storyB-panel__visual {
  grid-column: 1;
}

/* Subtle vignette only — images are plain now (no text/cards over them),
   so the heavy bottom scrim that used to ensure overlay legibility is gone.
   A faint inner shadow keeps the edges from feeling flat. */
.storyB-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 50%, transparent 62%, rgba(0,15,34,0.18) 100%);
}

.storyB-visual__image {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--c-navy) center center / cover no-repeat;
}

.storyB-visual__image--context { background-image: url('story-context.jpg'); }
.storyB-visual__image--gap { background-image: url('story-gap.jpg'); }
.storyB-visual__image--bridge { background-image: url('story-bridge.jpg'); }
.storyB-visual__image--role { background-image: url('story-role.jpg'); }
.storyB-visual__image--reach { background-image: url('story-reach.jpg'); }

.storyB-panel--gap {
  background:
    radial-gradient(60% 58% at 100% 10%, color-mix(in srgb, var(--c-navy) 5%, transparent), transparent 66%),
    color-mix(in srgb, var(--c-navy) 3%, var(--c-white));
}

.storyB-trio {
  grid-template-columns: 1fr;
  gap: 24px;
  margin: clamp(34px, 4vw, 52px) 0;
  padding-top: 36px;
}

.storyB-trio .storyE-trio__item {
  display: grid;
  grid-template-columns: minmax(110px, 0.34fr) 1fr;
  gap: 18px;
  align-items: start;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--c-border-light);
}

.storyB-trio .storyE-trio__item:last-child { border-bottom: 0; padding-bottom: 0; }
.storyB-trio .storyE-trio__item::before { top: -28px; }

.storyB-panel--bridge {
  background:
    radial-gradient(80% 72% at 100% 20%, rgba(0,122,61,0.22), transparent 62%),
    radial-gradient(80% 84% at 0% 80%, rgba(242,94,35,0.12), transparent 58%),
    linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-mid) 54%, var(--c-navy-light) 100%);
}

.storyB-panel--bridge::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 84px 84px;
  opacity: 0.44;
}

.storyB-panel--bridge .storyB-panel__copy p,
.storyB-panel--bridge .storyE-text__lead {
  color: rgba(255,255,255,0.72) !important;
}

.storyB-panel--bridge .storyB-panel__h {
  color: var(--c-white);
}

.storyB-panel--bridge .storyB-panel__eyebrow {
  color: var(--c-orange);
}

.storyB-agri-word {
  color: var(--storyB-green-bright);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.storyB-thamani-word {
  font-weight: 400;
  color: var(--c-white);
  white-space: nowrap;
}

.storyB-thamani-word > span {
  color: var(--c-orange);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.storyB-panel--reach {
  background:
    radial-gradient(78% 78% at 100% 0%, color-mix(in srgb, var(--c-orange) 8%, transparent), transparent 60%),
    var(--c-white);
}

.storyB-cta { margin-top: clamp(38px, 5vw, 64px); }


/* Below the split-screen threshold: stop the alternating sticky bleed and
   stack — image full-width on top, text below. No sticky, no flip, no
   alternation (the bleed only reads on wide screens). */
@media (max-width: 860px) {
  .storyB-panel {
    min-height: auto;
  }

  .storyB-panel__inner,
  .storyB-panel--flip .storyB-panel__inner {
    grid-template-columns: 1fr;
  }

  .storyB-panel__copy,
  .storyB-panel--flip .storyB-panel__copy {
    grid-column: 1;
    grid-row: 1;
    justify-self: stretch;
    max-width: 100%;
    align-self: auto;
    padding:
      clamp(52px, 9vw, 84px)
      var(--site-edge-pad, var(--container-pad))
      clamp(32px, 7vw, 56px);
  }

  .storyB-panel__visual,
  .storyB-panel--flip .storyB-panel__visual {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    top: auto;
    height: clamp(260px, 42vh, 420px);
  }
}
@media (max-width: 680px) {
  .storyB-panel__visual,
  .storyB-panel--flip .storyB-panel__visual {
    height: clamp(220px, 36vh, 340px);
  }

  .storyB-panel__eyebrow {
    font-size: 11px;
    letter-spacing: 1.4px;
  }

  .storyB-trio .storyE-trio__item {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ============================================================
   OUR STORY — BOLD EDITORIAL REBUILD (os)
   Register: asymmetric, real scale contrast, image-anchored.
   Hero + THAMANI strip + close carry the visual weight;
   the mid-page narrative uses a strong left axis + big
   statement/body size jumps instead of a centered column.
   Append-only. Reuses .storyB-agri-word / .storyB-thamani-word
   verbatim (green var re-scoped locally where needed).
   ============================================================ */

.os { background: var(--c-white); }

.os-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: var(--site-edge-pad);
}
.os-measure { max-width: var(--reading-max); }

.os-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--c-orange);
}
.os-eyebrow::after {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.os-eyebrow--light { color: var(--c-coral); }

/* --- HERO: full-bleed image, text bottom-left --- */
.os-hero {
  position: relative;
  isolation: isolate;
  min-height: min(860px, 100vh);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--c-navy);
}
.os-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--c-navy) center 40% / cover no-repeat;
  /* Swap in the real photo — filename per spec, case-sensitive on Cloudflare: */
  background-image:
    linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-mid) 55%, var(--c-navy-light) 100%);
  /* background-image: url('story-hero-savanna.jpg'); */
}
.os-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--c-navy) 88%, transparent) 0%,
    color-mix(in srgb, var(--c-navy) 46%, transparent) 38%,
    color-mix(in srgb, var(--c-navy) 6%, transparent) 68%,
    transparent 100%
  );
}
.os-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: var(--site-edge-pad);
  padding-bottom: clamp(56px, 8vw, 96px);
  padding-top: calc(92px + clamp(40px, 6vw, 64px));
}
.os-hero__content { max-width: 720px; }
.os-hero__h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(52px, 8vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--c-white);
  margin: 18px 0 20px;
}
.os-hero__lead {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.65;
  color: var(--c-text-on-dark-secondary);
  max-width: 46ch;
}

/* --- OUR STORY: strong left axis, asymmetric beats --- */
.os-story { padding-block: clamp(80px, 11vw, 140px); }
.os-story__lead {
  font-family: var(--font-body);
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.6;
  color: var(--c-navy);
  max-width: 780px;
  margin: 0 0 clamp(56px, 8vw, 96px);
}

.os-beat {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  padding-block: clamp(40px, 6vw, 64px);
  border-top: 1px solid var(--c-border-light);
}
.os-story > .os-inner > .os-beat:first-of-type { border-top: none; padding-top: 0; }

.os-beat__statement {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.16;
  letter-spacing: -0.008em;
  color: var(--c-navy);
  margin: 0;
}
.os-yr {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--c-orange);
}
.os-beat__body p {
  font-family: var(--font-body);
  font-size: clamp(15px, 1vw, 16.5px);
  line-height: 1.75;
  color: var(--c-text-secondary);
  margin: 0;
  padding-top: clamp(4px, 1vw, 10px);
}

/* Beat 3: solo, climactic — full width, largest size, no border echo */
.os-beat--solo {
  display: block;
  border-top: 1px solid var(--c-border-light);
  padding-top: clamp(48px, 7vw, 80px);
  margin-top: clamp(8px, 1vw, 12px);
}
.os-beat__statement--lg {
  font-size: clamp(34px, 5vw, 56px);
  max-width: 18ch;
}

/* --- THAMANI STRIP: pure full-bleed image --- */
.os-strip {
  position: relative;
  height: clamp(250px, 34vw, 480px);
  background: var(--c-navy-light);
  overflow: hidden;
}
.os-strip__bg {
  position: absolute;
  inset: 0;
  background: var(--c-navy-light) center center / cover no-repeat;
  background-image:
    radial-gradient(80% 100% at 50% 50%, var(--c-navy-light), var(--c-navy-mid));
  /* Swap in the real photo: */
  /* background-image: url('thamani-products.jpg'); */
}

/* --- AGRIBUSINESS: sits directly under the strip --- */
.os-agri { padding-block: clamp(56px, 8vw, 96px); }
.os-agri__body {
  max-width: 760px;
}
.os-agri__body p {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.2vw, 19px);
  line-height: 1.8;
  color: var(--c-navy);
  margin: 0;
}
/* re-scope green so .storyB-agri-word resolves cleanly on the light section */
.os-agri { --storyB-green: #007A3D; --storyB-green-bright: #00A651; }
.os-agri .storyB-thamani-word { color: var(--c-navy); }
.os-agri .storyB-thamani-word > span { color: var(--c-orange); }

/* --- BODY reading blocks (Today / Reach / Sectors / close-integration) --- */
.os-body { padding-block: clamp(30px, 4vw, 48px); }
.os-body p {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.08vw, 18px);
  line-height: 1.8;
  color: var(--c-text-secondary);
  max-width: var(--reading-max);
  margin: 0 0 1.3em;
}
.os-body p:last-child { margin-bottom: 0; }
.os-em {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  color: var(--c-navy);
}

/* --- CLOSE: anchored cluster on rich navy --- */
.os-close {
  position: relative;
  background: var(--c-navy);
  background-image: radial-gradient(120% 140% at 15% 0%, var(--c-navy-light), transparent 60%);
  color: var(--c-text-on-dark);
  padding-block: clamp(96px, 14vw, 176px);
  margin-top: clamp(40px, 6vw, 72px);
}
.os-close__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: var(--site-edge-pad);
}
.os-close__line {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.7;
  color: var(--c-text-on-dark-secondary);
  max-width: 52ch;
  margin: 0 0 clamp(22px, 3.5vw, 34px);
}
.os-close__tagline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(38px, 5.6vw, 66px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--c-white);
  margin: 0 0 clamp(28px, 4vw, 40px);
}
.os-close__mark {
  display: block;
  line-height: 0;
  color: var(--c-orange);
  margin-bottom: clamp(28px, 4vw, 40px);
}
.os-close__mark svg { width: 38px; height: auto; }
.os-close__cta { margin-top: clamp(2px, 0.5vw, 6px); }

/* --- reveal variant with slightly more travel for hero/solo moments --- */
.reveal--lift { transform: translateY(30px); }
.reveal--lift.visible { transform: none; }

/* --- RESPONSIVE --- */
@media (max-width: 860px) {
  .os-beat { grid-template-columns: 1fr; gap: 18px; }
  .os-beat__body p { padding-top: 0; }
}
@media (max-width: 640px) {
  .os-hero { min-height: 560px; }
  .os-hero__h { font-size: clamp(40px, 11vw, 56px); }
  .os-agri__body { padding-left: 0; border-left: 0; }
}


/* ============================================================
   OUR STORY — CHAPTERS ON A SPINE (supersedes .os-beat block)
   Numbered chapters down a continuous orange spine; ghosted
   Cormorant numerals for scale; brand mark bleeds in at the
   peak. Fixed rhythm + constrained measures kill the ragged
   spacing. Append-only.
   ============================================================ */

/* Header: eyebrow + intro as one unit (no stranded void beneath) */
.os-story__head { margin-bottom: 0; }
.os-story__intro {
  font-family: var(--font-body);
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.55;
  color: var(--c-navy);
  max-width: 46ch;
  margin: 6px 0 0;
}

/* Spine rail */
.os-chapters {
  --rail: clamp(58px, 7vw, 108px);
  --spine-x: clamp(18px, 2.4vw, 34px);
  position: relative;
  margin-top: clamp(48px, 6vw, 82px);
  padding-left: var(--rail);
}
.os-chapters::before {
  content: "";
  position: absolute;
  left: var(--spine-x);
  top: 6px;
  bottom: 18px;
  width: 2px;
  background: color-mix(in srgb, var(--c-orange) 30%, transparent);
}

/* A chapter */
.os-ch {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.82fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding-block: clamp(40px, 5.5vw, 72px);
  border-top: 1px solid var(--c-border-light);
}
.os-ch:first-child { border-top: none; padding-top: 0; }

/* Node on the spine */
.os-ch__node {
  position: absolute;
  left: calc(var(--spine-x) - var(--rail));
  top: calc(clamp(40px, 5.5vw, 72px) + 8px);
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-orange);
}
.os-ch:first-child .os-ch__node { top: 8px; }

/* Ghosted Cormorant numeral */
.os-ch__num {
  position: absolute;
  left: calc(var(--spine-x) - var(--rail) + 20px);
  top: calc(clamp(40px, 5.5vw, 72px) - 10px);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(54px, 6vw, 90px);
  line-height: 0.7;
  color: color-mix(in srgb, var(--c-navy) 11%, transparent);
  pointer-events: none;
  user-select: none;
}
.os-ch:first-child .os-ch__num { top: -10px; }

.os-ch__statement {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--c-navy);
  max-width: 15ch;
  margin: 0;
}
.os-ch__body p {
  font-family: var(--font-body);
  font-size: clamp(15px, 1vw, 16.5px);
  line-height: 1.72;
  color: var(--c-text-secondary);
  margin: 0;
  padding-top: clamp(4px, 0.8vw, 10px);
}

/* Peak chapter (03) — the crescendo */
.os-ch--peak {
  display: block;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--c-border-light);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c-navy) 4%, transparent), transparent 62%);
  margin-left: calc(var(--rail) * -1);
  padding-left: var(--rail);
  padding-block: clamp(52px, 7vw, 96px);
}
.os-ch--peak .os-ch__node {
  left: var(--spine-x);
  top: calc(clamp(52px, 7vw, 96px) + 8px);
}
.os-ch--peak .os-ch__num {
  left: var(--spine-x);
  transform: translateX(-4px);
  top: calc(clamp(52px, 7vw, 96px) - 16px);
  font-size: clamp(80px, 9vw, 132px);
  color: color-mix(in srgb, var(--c-orange) 15%, transparent);
}
.os-ch--peak .os-ch__statement {
  position: relative;
  z-index: 2;
  font-size: clamp(32px, 4.6vw, 58px);
  max-width: 20ch;
}
.os-ch__mark {
  position: absolute;
  right: clamp(-84px, -5vw, -44px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(240px, 34vw, 420px);
  color: var(--c-orange);
  opacity: 0.10;
  z-index: 1;
  pointer-events: none;
  line-height: 0;
}
.os-ch__mark svg { width: 100%; height: auto; display: block; }

/* Responsive */
@media (max-width: 860px) {
  .os-chapters { --rail: 46px; --spine-x: 15px; }
  .os-ch { grid-template-columns: 1fr; gap: 14px; }
  .os-ch__body p { padding-top: 0; }
  .os-ch__num { font-size: clamp(42px, 11vw, 60px); }
  .os-ch--peak .os-ch__num { font-size: clamp(56px, 14vw, 88px); }
  .os-ch__mark { width: clamp(180px, 44vw, 280px); opacity: 0.08; }
}


/* ============================================================
   OUR STORY — spine on content axis + key-term highlight system
   (append-only; supersedes earlier --spine-x and .os-em by
   source order. Nodes/numerals are anchored to --spine-x, so
   they realign to the axis automatically.)
   ============================================================ */

/* Spine sits exactly on the left content axis (aligned with the
   eyebrow, hero heading, and body copy). Numerals ghost in the
   rail to the right of it, never touching the statement. */
.os-chapters { --spine-x: 0px; --rail: clamp(70px, 7.5vw, 120px); }
.os-ch__num { font-size: clamp(44px, 4.6vw, 72px); }
.os-ch--peak .os-ch__num { left: 14px; transform: none; font-size: clamp(56px, 6vw, 92px); }

@media (max-width: 860px) {
  .os-chapters { --spine-x: 0px; --rail: 50px; }
  .os-ch__num { font-size: clamp(38px, 10vw, 54px); }
  .os-ch--peak .os-ch__num { left: 10px; font-size: clamp(50px, 12vw, 74px); }
}

/* Key-term highlight: one system, used only on regions + sectors.
   Same body face (Inter), navy vs the grey body, medium-bold —
   deliberate, not the accidental serif swap. */
.os-em {
  font-family: var(--font-body);
  font-weight: 600;
  font-style: normal;
  color: var(--c-navy);
}


/* ============================================================
   OUR STORY — live stock imagery (append-only; overrides the
   placeholder gradients on the hero + THAMANI strip).
   Files sit alongside style.css in the deploy folder.
   Cover + position carry over from the base rules.
   ============================================================ */
.os-hero__bg  { background-image: url('story-hero-savanna.jpg'); }
.os-strip__bg { background-image: url('thamani-products.jpg'); }


/* ============================================================
   OUR STORY — CONTINUUM (spine extended through Today/Reach/
   Sectors as quieter checkpoints 04-06). Deliberately smaller
   and more muted than the 01-03 chapter numerals so the main
   narrative keeps priority; these read as waypoints, not peaks.
   Append-only.
   ============================================================ */

.os-continuum { position: relative; }
.os-continuum::before {
  content: "";
  position: absolute;
  left: var(--site-edge-pad);
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: color-mix(in srgb, var(--c-orange) 22%, transparent);
  z-index: 0;
}

.os-checkpoint {
  position: relative;
  --rail: clamp(70px, 7.5vw, 120px);
  padding-left: var(--rail);
}
.os-cont__node {
  position: absolute;
  left: calc(var(--rail) * -1);
  top: 6px;
  transform: translateX(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-orange);
  z-index: 1;
}
.os-cont__num {
  position: absolute;
  left: calc(var(--rail) * -1 + 18px);
  top: -6px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 0.7;
  color: color-mix(in srgb, var(--c-navy) 9%, transparent);
  pointer-events: none;
  user-select: none;
}
.os-checkpoint .os-eyebrow { margin-top: 2px; }

/* Today: first sentence promoted to a lead statement */
.os-body p.os-cont__statement {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.28;
  letter-spacing: -0.006em;
  color: var(--c-navy);
  max-width: 26ch;
  margin: 0 0 clamp(16px, 2.2vw, 24px);
}

/* Reach: text + real corridor map, side by side */
.os-reach__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.82fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  margin-top: 8px;
}
.os-reach__map {
  margin: 0;
  justify-self: center;
  width: 100%;
  max-width: 300px;
}
.os-reach__map svg { width: 100%; height: auto; display: block; }
.os-reach__map circle { fill: var(--c-orange); }

@media (max-width: 860px) {
  .os-checkpoint { --rail: 46px; }
  .os-cont__num { font-size: clamp(22px, 8vw, 30px); }
  .os-reach__layout { grid-template-columns: 1fr; }
  .os-reach__map { max-width: 240px; margin-top: 20px; }
}


/* ============================================================
   OUR STORY — CONTINUUM checkpoint node/numeral: fix off-canvas
   clipping on mobile/tablet (append-only; supersedes the
   --rail-based left offset in the CONTINUUM block above by
   source order).

   Root cause: .os-cont__node / .os-cont__num are direct children
   of .os-checkpoint -- the same element that carries
   padding-left: var(--rail) and establishes the positioning
   context. Subtracting --rail again therefore pushed them a full
   rail-width to the LEFT of .os-checkpoint's own edge, with
   nothing to absorb the offset. This stayed on-screen at wide
   desktop widths by coincidence, but goes negative and clips off
   the viewport once --rail shrinks at <=860px. (The chapter
   numerals above don't share this bug: they sit one level deeper,
   inside .os-ch, which already absorbs the parent's rail padding,
   so their equivalent subtraction cancels back out to a stable,
   on-screen position at every width.)

   Fix: stop subtracting --rail. Position both directly at
   .os-checkpoint's own true edge instead -- the correct "spine"
   position, consistent at every breakpoint. --rail continues to
   control the body-text indent only, unchanged.
   ============================================================ */
.os-cont__node { left: 0; }
.os-cont__num  { left: 18px; }


/* ============================================================
   OUR STORY — chapter numeral (01/02/03) overlaps the statement
   heading at mobile widths (append-only; supersedes the mobile
   .os-ch__num / .os-ch--peak .os-ch__num left values above by
   source order).

   Root cause: two separate max-width:860px blocks each redefine
   --rail / --spine-x / the numeral's font-size; the later block
   wins, but its numbers were never reconciled against where the
   statement text actually starts. Measured at 400px: numeral
   right edge landed at 80px while the statement began at 70px --
   a 10px overlap, identical for chapters 01/02 (grid layout) and
   03 (the "peak" chapter, different layout, same net overlap).

   Fix: shift the numeral ~20px further left in both cases, off
   the statement text and into the same open margin the node dot
   already sits in, without touching font-size or the desktop/
   tablet rules (unaffected, already confirmed correct).
   ============================================================ */
@media (max-width: 860px) {
  .os-ch__num { left: calc(var(--spine-x) - var(--rail)); }
  .os-ch--peak .os-ch__num { left: -10px; }
}

/* The numeral's font-size keeps growing via clamp() past ~500px,
   while the shift above is flat -- undershoots again in the
   500-860px band (measured: -4px regular / -14px peak overlap,
   flat across that band since both the font-size and --rail cap
   out before 860px). Layer on the extra clearance that band needs. */
@media (min-width: 500px) and (max-width: 860px) {
  .os-ch__num { left: calc(var(--spine-x) - var(--rail) - 12px); }
  .os-ch--peak .os-ch__num { left: -32px; }
}

/* ============================================================
   OUR STORY — Agribusiness paragraph sits noticeably closer to
   its eyebrow label than the equivalent gap in the Our Story
   intro higher up the page (append-only).

   Root cause: not the shared .os-eyebrow rule (identical, 18px,
   in both places) -- .os-story__intro carries an extra
   margin-top: 6px that .os-agri__body never got, so this section
   reads tighter by that same 6px at every breakpoint.

   Fix: give .os-agri__body the matching top margin.
   ============================================================ */
.os-agri__body { margin-top: 6px; }


/* ============================================================
   OUR STORY — checkpoint numeral (04/05/06) overlaps its adjacent
   text by 1-2px at every width from ~360px to 860px (append-only;
   supersedes the .os-cont__num left value set above by source
   order). Confirmed on real-device testing: the numeral crowds
   directly into the "REACH"/"SECTORS" eyebrow labels and the
   "Today, Tradeable..." lead statement, with no breathing room.

   The overlap is small and flat across this whole range (font-size
   caps at 30px by ~400px and doesn't grow further, unlike the
   chapter numeral case above), so a single uniform shift closes it
   with margin to spare -- confirmed safe at desktop widths too
   (existing clearance there is generous, 30px+).
   ============================================================ */
.os-cont__num { left: 10px; }


/* ============================================================
   OUR STORY — remove the decorative chapter/checkpoint numerals
   (01-06) entirely (append-only; final word by source order).

   These ghosted italic numerals were purely decorative
   (aria-hidden, no inbound links). Their absolute positioning
   relative to a --rail / clamp() system repeatedly collided with
   the adjacent heading and eyebrow text as viewport width and
   font-size scaled, and proved not worth the ongoing per-breakpoint
   tuning. Hidden here rather than deleted from the HTML so the
   change is fully reversible: delete this block to restore them.

   The orange spine dots (.os-ch__node / .os-cont__node) and the
   vertical spine rail are separate elements and are intentionally
   left untouched -- the timeline still reads as a sequence of
   waypoints, just without the numerals.
   ============================================================ */
.os-ch__num,
.os-cont__num { display: none; }


/* ============================================================
   OUR STORY — chapter 03 (peak) spine dot was rendering as a
   half-circle (append-only; supersedes the .os-ch--peak
   .os-ch__node left value above by source order).

   Cause: the peak block uses overflow:hidden (to contain its
   decorative diamond mark) and pulls itself flush to the spine
   with a negative left margin. The dot, centered via the base
   rule's translateX(-50%) onto the block's own left edge, had its
   left half fall outside that edge and get clipped -- measured at
   a constant 5px (half the 10px dot) across every width. The other
   five dots are unaffected: their sections don't clip the margin,
   so their left half is free to overhang.

   Fix: shift this one dot right by its radius so it sits fully
   inside the clipped edge, matching the visual position of the
   other dots. Flat 5px, correct at every breakpoint.
   ============================================================ */
.os-ch--peak .os-ch__node { transform: translateX(-50%) translateX(5px); }


/* ============================================================
   OUR STORY — consolidated responsive geometry repair
   (append-only; final winning layer for the audited page).

   ROOT CAUSES
   1) The continuum rail was positioned from the viewport edge
      while checkpoint dots were positioned from the centred
      1280px shell, so they diverged once the shell maxed out.
   2) The continuum wrapper began before Agribusiness, causing the
      rail to run through content that is not a checkpoint.
   3) Chapter 03 only cancelled its local rail indent, leaving the
      tinted peak constrained to the content shell. Its clipped dot
      was then shifted 5px off-axis as a workaround.
   4) A <=640px fixed 560px hero rule created a hard size jump at
      the next pixel.
   5) The final image-only declarations discarded the original
      gradients when a case-sensitive asset was missing; the nav
      also had no visible fallback for a failed logo image.

   FIX
   - Use the same centred-shell gutter calculation for the
     continuum line and every checkpoint dot.
   - our-story.html now starts .os-continuum after Agribusiness.
   - Make the peak's actual box 100vw, retain overflow:hidden, and
     reconstruct its content/spine offsets from the shell gutter.
   - Restore a continuous viewport-based hero height.
   - Layer asset URLs over gradients and expose an HTML wordmark
     fallback only when logo.png fails to load.
   Decorative numerals remain disabled by the earlier final rule.
   ============================================================ */

/* One shared coordinate: viewport edge -> centred shell content edge. */
.os-continuum,
.os-ch--peak {
  --os-shell-gutter: calc(
    var(--site-edge-pad) + max(0px, calc((100vw - 1280px) / 2))
  );
}

/* Continuum: line and nodes now share the same winning axis. */
.os-continuum::before {
  left: var(--os-shell-gutter);
}
.os-cont__node {
  left: 0;
  transform: translateX(-50%);
}

/* Peak: true viewport bleed while statement and dot retain the
   same axes as chapters 01/02. Overflow remains intentionally
   clipped to contain the decorative brand mark. */
.os-ch--peak {
  width: 100vw;
  max-width: none;
  margin-left: calc(0px - var(--rail) - var(--os-shell-gutter));
  margin-right: 0;
  padding-left: calc(var(--os-shell-gutter) + var(--rail));
  padding-right: var(--os-shell-gutter);
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--c-navy) 9%, var(--c-white)) 0%,
      color-mix(in srgb, var(--c-navy) 4%, var(--c-white)) 58%,
      var(--c-white) 100%
    );
}
.os-ch--peak .os-ch__node {
  left: var(--os-shell-gutter);
  transform: translateX(-50%);
}

/* Hero: remove the 640px discontinuity and follow the available
   small viewport height consistently across phone/tablet widths. */
.os-hero {
  min-height: min(860px, 100vh);
  min-height: min(860px, 100svh);
}

/* Asset resilience: a failed URL leaves the gradient layer intact.
   Exact lowercase filenames are retained for Linux/Cloudflare. */
.os-hero__bg {
  background-image:
    url('story-hero-savanna.jpg'),
    linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-mid) 55%, var(--c-navy-light) 100%);
}
.os-strip__bg {
  background-image:
    url('thamani-products.jpg'),
    radial-gradient(80% 100% at 50% 50%, var(--c-navy-light), var(--c-navy-mid));
}

/* Navigation asset fallback. The existing image remains the winner
   when it loads; the fallback appears only after its error handler
   marks the anchor. */
.nav__logo-fallback {
  display: none;
  align-items: center;
  gap: 11px;
  color: var(--c-white);
  white-space: nowrap;
}
.nav__logo--fallback .nav__logo-img,
.nav__logo-img[hidden] {
  display: none !important;
}
.nav__logo--fallback .nav__logo-fallback {
  display: inline-flex;
}
.nav__logo-fallback-mark {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 4px;
  background: var(--c-orange);
  color: var(--c-white);
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}
.nav__logo-fallback-text {
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.45vw, 21px);
  font-weight: 600;
  letter-spacing: 0.2px;
}
@media (max-width: 767px) {
  .nav__logo-fallback { gap: 8px; }
  .nav__logo-fallback-mark { width: 30px; height: 30px; font-size: 18px; }
  .nav__logo-fallback-text { font-size: 15px; }
}


/* ============================================================
   OUR STORY — self-contained timeline rail segments
   (append-only; final winning layer).

   ROOT CAUSE
   The chapter and continuum rails were drawn by separate parent
   pseudo-elements while their dots were positioned from child
   containers. Those two coordinate systems diverged when a full-
   bleed chapter painted over the parent rail, and when desktop
   scrollbar/container widths differed. The story section also
   retained its general bottom padding after the full-bleed peak,
   exposing an unintended blank band before the THAMANI image.

   FIX
   Each chapter/checkpoint now draws its own local rail segment on
   the exact same positioned element that owns its dot. Adjacent
   segments meet at section boundaries, so line and dot cannot
   drift apart at any breakpoint. The parent rails are disabled.
   Agribusiness remains outside .os-continuum, so it receives no
   rail on mobile or desktop. The peak's own segment is painted
   inside its clipped full-bleed box, and the story's terminal
   padding is removed because the peak already supplies its own
   responsive vertical breathing room. Decorative numerals remain
   disabled by the existing rule above.
   ============================================================ */

/* Parent-spanning rails are retired; local segments below are the
   sole winning rail declarations. */
.os-chapters::before,
.os-continuum::before {
  content: none;
  display: none;
}

/* Chapters 01–03: line and dot share each .os-ch coordinate. */
.os-ch::before {
  content: "";
  position: absolute;
  left: calc(var(--spine-x) - var(--rail));
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--c-orange) 30%, transparent);
  z-index: 1;
  pointer-events: none;
}
.os-ch:first-child::before {
  top: 13px; /* starts at the centre of the first 10px node */
}
.os-ch__node {
  z-index: 3;
}

/* Chapter 03 has a viewport-bleed box, so its local axis is the
   shell gutter already used by its node. Because the segment is a
   child of the peak, overflow:hidden no longer masks it. */
.os-ch--peak::before {
  left: var(--os-shell-gutter);
  top: 0;
  bottom: 0;
  z-index: 2;
}
.os-ch--peak .os-ch__node {
  z-index: 3;
}

/* The peak already carries clamp(52px, 7vw, 96px) bottom padding.
   Removing only the story wrapper's terminal padding eliminates
   the blank band before the image without tightening phones. */
.os-story {
  padding-bottom: 0;
}

/* Checkpoints 04–06: each checkpoint owns one segment and its dot.
   The segment extends through its parent section's responsive
   padding so neighbouring sections join without a viewport-based
   global line. */
.os-checkpoint::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(-1 * clamp(30px, 4vw, 48px));
  bottom: calc(-1 * clamp(30px, 4vw, 48px));
  width: 2px;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--c-orange) 22%, transparent);
  z-index: 0;
  pointer-events: none;
}
.os-checkpoint--first::before {
  top: 10.5px; /* centre of the first 9px node at top:6px */
}
.os-checkpoint--last::before {
  bottom: calc(-1 * clamp(30px, 4vw, 48px) + 10px);
}
.os-cont__node {
  left: 0;
  transform: translateX(-50%);
  z-index: 2;
}

/* Agribusiness is intentionally not a timeline waypoint. This is
   defensive against future wrapper movement and guarantees that
   no inherited/pseudo rail can appear beside its mobile copy. */
.os-agri,
.os-agri .os-inner,
.os-agri__body {
  border-left: 0;
}
.os-agri::before,
.os-agri .os-inner::before,
.os-agri__body::before {
  content: none;
  display: none;
}


/* ============================================================
   OUR STORY — scrollbar-safe full-bleed peak band
   (append-only; supersedes the earlier 100vw peak geometry).

   ROOT CAUSE
   width:100vw includes the classic Windows scrollbar while the
   centred content shell is sized from the scrollbar-excluding
   layout viewport. Even though overflow-x was hidden, the peak
   remained wider than the document and could introduce an 8–15px
   geometry discrepancy on desktop Chrome.

   FIX
   our-story.html now places chapter 03 inside a naturally full-
   width .os-peak-band, with a normal centred .os-inner and chapter
   rail inside it. No viewport-width arithmetic is needed. The
   band's overflow:hidden clips the decorative mark; the chapter
   itself stays on the same container axis as chapters 01–02.
   ============================================================ */
.os-peak-band {
  width: 100%;
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--c-navy) 9%, var(--c-white)) 0%,
      color-mix(in srgb, var(--c-navy) 4%, var(--c-white)) 58%,
      var(--c-white) 100%
    );
}
.os-chapters--peak {
  margin-top: 0;
}
.os-chapters--peak .os-ch--peak {
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  overflow: visible;
  background: none;
}
.os-chapters--peak .os-ch--peak::before,
.os-chapters--peak .os-ch--peak .os-ch__node {
  left: calc(var(--spine-x) - var(--rail));
}
.os-chapters--peak .os-ch--peak::before {
  top: 0;
  bottom: 0;
}

/* ============================================================
   OUR STORY — hero leading + peak composition refinement
   (append-only; final winning layer).

   ROOT CAUSE
   The hero heading inherited a 0.98 line-height, which is too
   tight for EB Garamond's descenders: the "g" in the first line
   visually collides with the second line. The copy also sat too
   close to the bottom edge. In chapter 03, the statement's 20ch
   measure forced an unnecessarily narrow six-line staircase,
   while the dot aligned to the text box's top rather than the
   first line's optical cap-height.

   FIX
   Increase hero leading and bottom inset with a smaller mobile
   shift and a stronger desktop shift. Widen the peak statement
   modestly, align its node to the first line's cap-height, keep
   the brand mark centred on the composition, and remove the mark
   on narrow phones so the text retains the full available width.
   Timeline geometry and hidden ghost numerals are unchanged.
   ============================================================ */

.os-hero__inner {
  padding-bottom: clamp(72px, 9vw, 132px);
}
.os-hero__h {
  line-height: 1.09;
}

.os-chapters--peak .os-ch--peak .os-ch__statement {
  max-width: 22ch;
}
.os-chapters--peak .os-ch--peak .os-ch__node {
  top: calc(clamp(52px, 7vw, 96px) + clamp(14px, 1.8vw, 26px));
}
.os-chapters--peak .os-ch--peak .os-ch__mark {
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 860px) {
  .os-chapters--peak .os-ch--peak .os-ch__statement {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .os-hero__inner {
    padding-bottom: 72px;
  }
  .os-hero__h {
    line-height: 1.1;
  }
  .os-chapters--peak .os-ch--peak .os-ch__mark {
    display: none;
  }
}

/* ============================================================
   OUR STORY — peak top-padding specificity correction
   (append-only; final winning declaration).

   ROOT CAUSE
   Chapter 03 is the first child of its dedicated peak wrapper, so
   the older, more-specific .os-ch:first-child rule sets its top
   padding to zero. That places the statement at the band's top
   edge while the newly cap-aligned dot remains lower in the box.

   FIX
   Restore the peak's intended responsive top inset with a selector
   that outranks the generic first-child reset. The statement, dot,
   and centred mark now share the same vertical composition.
   ============================================================ */
.os-chapters--peak .os-ch--peak:first-child {
  padding-top: clamp(52px, 7vw, 96px);
}

/* ============================================================
   OUR STORY — teaser band · EDITORIAL SPLIT (append-only override)
   ------------------------------------------------------------
   Supersedes the original navy prose-led teaser (see .story-teaser
   at ~L5944). Markup changed to a media/prose split, so the original
   inner classes (.story-teaser__inner / __headline / __body / __link)
   are now unused and inert — left in place per append-only discipline.
   New inner classes: __grid / __media / __img / __col / __title /
   __lede / __cta.

   Layout states:
     · Desktop (>1023px): light surface, image-left / prose-right.
     · ≤1023px: image full-bleeds as the section backdrop, prose
       overlaid on top (white-on-dark). Relies on the baked navy
       overlay in the export; --story-scrim adds CSS insurance.
   ============================================================ */
.story-teaser {
  background: var(--c-surface-soft);
  color: var(--c-text-primary);
  padding: clamp(88px, 10vw, 132px) 0;
  border-top: 1px solid var(--c-border-mid);
  position: relative;
  overflow: hidden;
}

.story-teaser__grid {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: clamp(48px, 6vw, 84px);
  align-items: center;
}

/* --- media --- */
.story-teaser__media {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 15, 34, 0.16);
}
.story-teaser__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- prose column --- */
.story-teaser__col { max-width: var(--reading-max); }
.story-teaser__col .overline { width: fit-content; margin-bottom: 22px; }
.story-teaser__col .overline::after {
  content: '';
  display: block;
  width: 46px;
  height: 1px;
  margin-top: 12px;
  background: rgba(242, 94, 35, 0.34);
}
.story-teaser__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.6px;
  color: var(--c-navy);
  margin: 0 0 clamp(20px, 2.4vw, 28px);
  max-width: 16ch;
}
.story-teaser__lede {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.72;
  color: var(--c-text-secondary);
  max-width: 560px;
  margin: 0 0 34px;
}
.story-teaser__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--c-border-mid);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-orange);
  text-decoration: none;
  transition: gap var(--dur-fast) var(--ease-default), color var(--dur-fast) var(--ease-default);
}
.story-teaser__cta svg {
  width: 18px;
  height: 18px;
  transition: transform var(--dur-fast) var(--ease-default);
}
.story-teaser__cta:hover { gap: 16px; color: var(--c-orange-hover); }
.story-teaser__cta:hover svg { transform: translateX(3px); }

/* ---------- ≤1023px: full-bleed image backdrop + overlaid prose ---------- */
@media (max-width: 1023px) {
  .story-teaser {
    /* CSS scrim insurance behind text — remove/soften if the baked
       overlay in story-hero-savanna.jpg is already dark enough. */
    --story-scrim: linear-gradient(
      180deg,
      rgba(0, 15, 34, 0.34) 0%,
      rgba(0, 15, 34, 0.52) 60%,
      rgba(0, 15, 34, 0.72) 100%
    );
    background: var(--c-navy);
    color: var(--c-text-on-dark);
    min-height: clamp(420px, 60vh, 560px);
    padding: clamp(72px, 14vw, 120px) 0;
  }
  .story-teaser__media {
    position: absolute;
    inset: 0;
    margin: 0;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
    z-index: 0;
  }
  .story-teaser__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--story-scrim);
  }
  .story-teaser__grid {
    display: block;
    width: 100%;
  }
  /* col is the positioned layer that sits above the full-bleed image;
     grid + .container stay static so the media resolves to the section. */
  .story-teaser__col {
    position: relative;
    z-index: 1;
    max-width: 34ch;
  }
  .story-teaser__title { color: #fff; }
  .story-teaser__lede { color: var(--c-text-on-dark-secondary); }
  /* keep the CTA rule visible against the darker backdrop */
  .story-teaser__cta { border-top-color: var(--c-border-dark); }
}


/* ============================================================
   OUR STORY — shared WHO WE ARE hero copy composition
   (append-only; final winning layer).

   ROOT CAUSE
   The new shared heading and paragraph are materially longer than
   the previous two-line hero copy. The earlier 720px content cap
   and 96px maximum heading size force an overly tall text block on
   desktop, while allowing a font-size discontinuity around the
   phone/tablet breakpoint would make the composition jump.

   FIX
   Give the hero copy a wider editorial measure, reduce the desktop
   type ceiling, balance the heading wrapping, and widen the lead to
   a readable 60ch. On phones, retain the existing full-width axis
   with a continuous 40–48px type scale and comfortable leading.
   The homepage teaser retains its established responsive layout.
   ============================================================ */
.os-hero__content {
  max-width: 980px;
}
.os-hero__h {
  max-width: 100%;
  font-size: clamp(48px, 7vw, 88px);
  line-height: 1.06;
  margin-bottom: 24px;
  text-wrap: balance;
}
.os-hero__lead {
  max-width: 60ch;
}

@media (max-width: 640px) {
  .os-hero__h {
    font-size: clamp(40px, 11vw, 48px);
    line-height: 1.1;
  }
  .os-hero__lead {
    max-width: 100%;
  }
}


/* ============================================================
   NAV DRAWER — remove decorative bloom
   (append-only; final winning declaration).

   ROOT CAUSE
   .nav-drawer::before draws an oversized, soft-edged radial
   ellipse (the "monolith glow") animated by monolithDrift. The
   round falloff plus the drifting/scaling motion make it read as
   a discrete oval hovering inside the panel rather than as light
   raking across the diamond mark.

   FIX
   Suppress the pseudo-element entirely. content:none stops it
   from being generated; display:none is belt-and-suspenders.
   Same specificity as the original .nav-drawer::before rule but
   later in source order, so it wins at every breakpoint. The two
   diamond marks (.nav-drawer::after, .nav-drawer__mark) are left
   untouched, and the monolithDrift keyframes remain in place for
   the footer glow that still uses them.
   ============================================================ */
.nav-drawer::before {
  content: none;
  display: none;
}