/* ================================================
   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 */
/* Up/down step navigation — pinned within the modal so it's always visible.
   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: sticky;
  bottom: 0;
  background: var(--c-white);
  padding-top: 14px;
}
.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. Two office blocks: UAE head office
   carries primary visual weight (larger card, larger type), Kenya
   partner office is secondary (smaller, quieter) — mirrors the
   "Head office" / "Marketing partner office" hierarchy already
   used in the footer. Small flag icons sit beside each label as
   a wayfinding detail, not a decorative focal point.
   ================================================ */
.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;
}

.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__phone {
  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__phone {
  color: var(--c-white);
  border-bottom-color: rgba(255,255,255,0.3);
}
.office-card--primary .office-card__phone:hover {
  color: var(--c-orange);
  border-bottom-color: var(--c-orange);
}

.office-card--secondary .office-card__phone {
  color: var(--c-text-primary);
  border-bottom-color: rgba(0,0,0,0.18);
}
.office-card--secondary .office-card__phone: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;
  }
}



/* ================================================================
   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; }
}