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

  /* 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: 10.5px;
  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__links {
  display: none;
  align-items: center;
  gap: 36px;
}
.nav__links a {
  font-size: 14px;
  font-weight: 400;
  color: var(--c-text-on-dark);
  transition: opacity var(--dur-fast);
}
.nav__links a:hover { opacity: 0.62; }


.nav__hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 4px;
  cursor: pointer;
}
.nav__hamburger span {
  display: block;
  width: 22px; 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(6.5px) rotate(45deg); }
.nav__hamburger.open span:nth-child(2) { opacity: 0; }
.nav__hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer */
.nav-drawer {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--c-navy);
  z-index: 199;
  transform: translateY(-100%);
  transition: transform var(--dur-slow) var(--ease-enter);
  display: flex;
  flex-direction: column;
  padding: 90px 24px 40px;
}
.nav-drawer.open { transform: translateY(0); }

.nav-drawer__links a {
  display: block;
  padding: 17px 0;
  font-size: 18px;
  font-weight: 400;
  color: var(--c-text-on-dark);
  border-bottom: 1px solid var(--c-border-dark);
}

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

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

/* ── CAPABILITIES SCROLLY INTRO ───────────────────────────────
   Sticky early-morning sea image; copy scrolls up over it with a
   navy wash that travels with the text. Pure-CSS, no JS. ── */
.cap-intro {
  position: relative;
  background: var(--c-navy);
}

.cap-intro__media {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 600px;
  background-image:
    url('capabilities-sea.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 right, center center;
  background-repeat: no-repeat, no-repeat;
}

/* Faint constant wash on the pinned image — the "tiny bit" that's present
   from the very top. The main (still light) wash travels with the copy below. */
.cap-intro__media::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Low-strength navy TINT — a colour cast, not a dark scrim. `color` blend
     shifts the photo toward brand navy while preserving its luminance, so the
     image stays bright and detailed. Tune strength via `opacity` to suit the
     final photo: cool/neutral images can take more, warm savanna images less.
     Text contrast lower down is carried by the travelling wash on .cap-intro__copy. */
  background: var(--c-navy);
  mix-blend-mode: color;
  opacity: 0.4;
  pointer-events: none;
}

.cap-intro__copy {
  position: relative;
  z-index: 2;
  margin-top: -100vh;      /* lift over the pinned image */
  padding-top: 100vh;      /* first full screen stays pure image */
  padding-bottom: 10vh;    /* short release so the first capability follows naturally */
}

/* Light, FULL-BLEED wash that rides UP with the text (it lives on the
   scrolling copy layer, not the pinned image). left/right:0 = full viewport
   width, so no box and no horizontal scrollbar. It starts after the first
   pure-image screen (top:100vh) and feathers in/out top & bottom so there's
   no hard edge. Stacks with the faint 0.06 pinned wash for ~0.19 behind text. */
.cap-intro__copy::before {
  content: '';
  position: absolute;
  top: 100vh;
  left: 0;
  right: 0;
  height: 200vh;
  background: linear-gradient(
    180deg,
    rgba(0, 15, 34, 0) 0%,
    rgba(0, 15, 34, 0.25) 18%,
    rgba(0, 15, 34, 0.25) 82%,
    rgba(0, 15, 34, 0) 100%
  );
  z-index: -1;            /* above the pinned image, behind the text */
  pointer-events: none;
}

.cap-intro__text {
  position: relative;
  max-width: 520px;
}

/* Box scrim removed — the light, full-screen wash on the pinned media now
   carries contrast instead of a dark box hugging the text. */
.cap-intro__text::before {
  display: none;
}

.cap-intro__headline {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.5px;
  color: #fff;
  margin: 0 0 22px;
  text-shadow: 0 1px 18px rgba(0, 15, 34, 0.55);
}

.cap-intro__lede {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.66;
  color: rgba(255,255,255,0.87);
  max-width: 470px;
  text-shadow: 0 1px 14px rgba(0, 15, 34, 0.5);
}

/* ── CAPABILITIES BODY — natural-flow continuation from the image intro ── */
.cap-body {
  position: relative;
  background: var(--c-surface-light);
  padding: clamp(28px, 3.6vw, 52px) 0 clamp(72px, 8vw, 112px);
}

/* Short navy-to-white hand-off so the image does not cut to a hard edge. */
.cap-body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(86px, 8vw, 128px);
  background: linear-gradient(to bottom,
    rgba(0,15,34,0.28) 0%,
    rgba(0,15,34,0.10) 44%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* Carries the orange rule from the intro into the white capability body. */
.cap-body::after {
  content: '';
  position: absolute;
  top: 0;
  left: var(--site-edge-pad, var(--container-pad));
  width: 64px;
  height: 1px;
  background: var(--c-border-orange);
  pointer-events: none;
  z-index: 2;
}

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

@media (max-width: 980px) {
  .cap-intro__media {
    background-position: center center, center center;
  }
  .cap-intro__text {
    max-width: 100%;
  }
  .cap-intro__text::before {
    inset: -48px -40px -48px -40px;
  }
}

.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;
}

/* ── CAPABILITY LIST — natural-flow active sequence ── */
.capability-list {
  display: flex;
  flex-direction: column;
  width: min(100%, 980px);
  margin-top: 0;
}

.capability-list__item {
  display: grid;
  grid-template-columns: clamp(74px, 9vw, 126px) 1px minmax(0, 1fr);
  gap: clamp(22px, 3.8vw, 54px);
  align-items: start;
  padding: clamp(36px, 5vw, 72px) 0;
  border-top: 1px solid var(--c-border-light);
  transform-origin: left center;
  transition:
    opacity var(--dur-medium) var(--ease-default),
    transform var(--dur-medium) var(--ease-default);
}

.capability-list__item:first-child {
  padding-top: clamp(18px, 2.4vw, 34px);
}

.capability-list__item:last-child {
  border-bottom: 1px solid var(--c-border-light);
}

.capability-list__num {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(46px, 5.6vw, 72px);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--c-orange);
  transition: color var(--dur-medium) var(--ease-default);
}

.capability-list__rule {
  display: block;
  width: 1px;
  min-height: 132px;
  height: 100%;
  background: var(--c-border-light);
}

.capability-list__content {
  padding-top: 0.12em;
}

.capability-list__name {
  font-family: var(--font-display);
  font-size: clamp(27px, 3vw, 44px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.45px;
  color: var(--c-text-primary);
  margin-bottom: clamp(18px, 2.2vw, 28px);
  transition: color var(--dur-medium) var(--ease-default);
}

.capability-list__bullets {
  display: flex;
  flex-direction: column;
  gap: 13px;
  max-width: 620px;
}

.capability-list__bullets li {
  position: relative;
  padding-left: 19px;
  font-size: 15px;
  line-height: 1.66;
  color: var(--c-text-secondary);
}

.capability-list__bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-border-mid);
  opacity: 1;
  transition: background var(--dur-medium) var(--ease-default);
}

.capability-list.is-enhanced .capability-list__item.is-active .capability-list__bullets li::before {
  background: var(--c-orange);
  opacity: 1;
}

/* JS adds .is-enhanced only on desktop when motion is allowed. */
.capability-list.is-enhanced .capability-list__item {
  opacity: 0.46;
  transform: scale(0.96);
}

.capability-list.is-enhanced .capability-list__item.is-active {
  opacity: 1;
  transform: scale(1);
}

.capability-list.is-enhanced .capability-list__item:not(.is-active) .capability-list__num {
  color: var(--c-text-tertiary);
}

.capability-list.is-enhanced .capability-list__item.is-active .capability-list__num {
  color: var(--c-orange);
}

.cap-body__cta-link {
  font-size: 16px;
  font-weight: 500;
}

.cap-body__cta-icon {
  width: 15px;
  height: 15px;
}

@media (prefers-reduced-motion: reduce) {
  .capability-list__item,
  .capability-list__num,
  .capability-list__name {
    transition: none;
  }

  .capability-list__item {
    opacity: 1 !important;
    transform: none !important;
  }

  .capability-list__num {
    color: var(--c-orange) !important;
  }
}

@media (max-width: 640px) {
  .cap-intro__copy {
    padding-bottom: 7vh;
  }

  .cap-body {
    padding-top: 36px;
  }

  .cap-body::after {
    width: 46px;
  }

  .capability-list__item {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 34px 0;
    opacity: 1 !important;
    transform: none !important;
  }

  .capability-list__item:first-child {
    padding-top: 6px;
  }

  .capability-list__num {
    font-size: clamp(40px, 13vw, 60px);
    color: var(--c-orange) !important;
  }

  .capability-list__rule {
    display: none;
  }

  .capability-list__name {
    font-size: clamp(29px, 9vw, 40px);
    margin-bottom: 18px;
  }
}

/* ================================================
   SEC-H06: SELECTED PROJECTS
   Alternating full-width project rows
   ================================================ */
.projects-cabinet {
  background: var(--c-white);
  padding: var(--section-pad) 0;
  border-bottom: 1px solid var(--c-section-divider);
  overflow: hidden;
}

.projects-cabinet .section-header {
  max-width: 820px;
}

.projects-cabinet__aggregate {
  max-width: calc(var(--container-max) * 0.48);
  margin-top: calc(var(--container-pad) * 0.35);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-text-secondary);
}

.project-transaction-list {
  margin-top: calc(var(--container-pad) * 0.48);
}

.project-transaction-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  min-height: calc(var(--container-pad) * 4.15);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-md);
  background: var(--c-surface-card);
  box-shadow: var(--shadow-card);
  color: var(--c-text-primary);
  text-align: left;
  cursor: pointer;
  transition:
    max-height var(--dur-slow) var(--ease-default),
    min-height var(--dur-slow) var(--ease-default),
    margin-top var(--dur-slow) var(--ease-default),
    background var(--dur-medium) var(--ease-default),
    opacity var(--dur-medium) var(--ease-default),
    transform var(--dur-medium) var(--ease-default),
    box-shadow var(--dur-medium) var(--ease-default),
    border-color var(--dur-medium) var(--ease-default),
    visibility var(--dur-medium) var(--ease-default);
}

.project-transaction-row + .project-transaction-row {
  margin-top: calc(var(--container-pad) * 0.28);
}

.project-transaction-row:hover,
.project-transaction-row:focus-visible {
  transform: translateY(calc(var(--container-pad) * -0.04));
  box-shadow: var(--shadow-card-hover);
  border-color: var(--c-border-mid);
}

.project-transaction-row:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: var(--radius-sm);
}

.project-transaction-row--reverse .project-transaction-row__media {
  order: 2;
}

.project-transaction-row--reverse .project-transaction-row__body {
  order: 1;
}

.project-transaction-row--extra {
  min-height: 0;
  max-height: 0;
  margin-top: 0;
  border-width: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(calc(var(--container-pad) * 0.16));
}

.project-transaction-row--extra.reveal {
  opacity: 0;
  transform: translateY(calc(var(--container-pad) * 0.16));
}

.project-transaction-list.is-expanded .project-transaction-row--extra.reveal {
  opacity: 1;
  transform: none;
}

.project-transaction-row + .project-transaction-row--extra {
  margin-top: 0;
}

.project-transaction-list.is-expanded .project-transaction-row--extra {
  min-height: calc(var(--container-pad) * 6.4);
  max-height: calc(var(--container-pad) * 6.4);
  margin-top: calc(var(--container-pad) * 0.28);
  border-width: 1px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.project-transaction-row__media {
  position: relative;
  display: block;
  min-height: calc(var(--container-pad) * 4.15);
  overflow: hidden;
  background: linear-gradient(145deg, var(--c-navy) 0%, var(--c-navy-mid) 48%, var(--c-navy-light) 100%);
}

.project-transaction-row__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to top,
      rgba(0, 15, 34, 0.60) 0%,
      rgba(0, 15, 34, 0.30) 42%,
      rgba(0, 15, 34, 0.06) 100%
    );
  pointer-events: none;
}

.project-transaction-row__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-default);
}

.project-transaction-row:hover .project-transaction-row__media img,
.project-transaction-row:focus-visible .project-transaction-row__media img {
  transform: scale(1.025);
}

.project-transaction-row__status {
  position: absolute;
  top: calc(var(--container-pad) * 0.18);
  left: calc(var(--container-pad) * 0.18);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--container-pad) * 0.32);
  padding: calc(var(--container-pad) * 0.07) calc(var(--container-pad) * 0.16);
  border: 1px solid var(--c-border-dark);
  border-radius: var(--radius-full);
  background: var(--c-navy);
  color: var(--c-white);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.project-transaction-row__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--container-pad) * 0.5);
  transition:
    background var(--dur-medium) var(--ease-default),
    border-color var(--dur-medium) var(--ease-default),
    transform var(--dur-medium) var(--ease-default);
}

.project-transaction-row__sector {
  display: block;
  margin-bottom: calc(var(--container-pad) * 0.16);
  color: var(--c-orange);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.project-transaction-row__title {
  display: block;
  max-width: calc(var(--container-max) * 0.34);
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 62px);
  font-weight: 400;
  line-height: 1.05;
  color: var(--c-text-primary);
}

.project-transaction-row__location {
  display: block;
  margin-top: calc(var(--container-pad) * 0.14);
  color: var(--c-text-secondary);
  font-size: 13.5px;
}

.project-transaction-row__value {
  display: block;
  margin-top: calc(var(--container-pad) * 0.48);
  padding-top: calc(var(--container-pad) * 0.3);
  border-top: 1px solid var(--c-border-light);
}

.project-transaction-row__value-label {
  display: block;
  margin-bottom: calc(var(--container-pad) * 0.08);
  color: var(--c-text-tertiary);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.project-transaction-row__value-figure {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(52px, 7vw, 108px);
  font-weight: 500;
  line-height: 0.95;
  color: var(--c-text-primary);
}

.project-transaction-row__cue {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: calc(var(--container-pad) * 0.08);
  margin-top: calc(var(--container-pad) * 0.3);
  padding: calc(var(--container-pad) * 0.08) calc(var(--container-pad) * 0.12);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  color: var(--c-orange);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  transition:
    border-color var(--dur-fast) var(--ease-default),
    background var(--dur-fast) var(--ease-default),
    transform var(--dur-fast) var(--ease-default);
}

@media (hover: hover) and (pointer: fine) {
  .project-transaction-row:hover .project-transaction-row__cue,
  .project-transaction-row:focus-visible .project-transaction-row__cue {
    border-color: var(--c-border-orange);
    background: var(--c-orange-subtle);
    transform: translateX(calc(var(--container-pad) * 0.04));
  }
}

.project-transaction-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(var(--container-pad) * 0.72);
  padding: calc(var(--container-pad) * 0.13) calc(var(--container-pad) * 0.24);
  border: 1px solid var(--c-border-mid);
  border-radius: var(--radius-full);
  color: var(--c-text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  transition:
    border-color var(--dur-fast) var(--ease-default),
    color var(--dur-fast) var(--ease-default),
    background var(--dur-fast) var(--ease-default);
}

.project-transaction-toggle:hover,
.project-transaction-toggle:focus-visible {
  border-color: var(--c-border-orange);
  background: var(--c-orange-subtle);
  color: var(--c-orange);
}

.project-transaction-toggle:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: var(--radius-sm);
}

.projects-cabinet--dark {
  background: var(--c-navy);
  border-bottom-color: var(--c-border-dark);
}

.projects-cabinet--dark .section-headline {
  color: var(--c-text-on-dark);
}

.projects-cabinet--dark .section-intro,
.projects-cabinet--dark .projects-cabinet__aggregate {
  color: var(--c-text-on-dark-secondary);
}

.projects-cabinet--dark .project-transaction-row {
  background: var(--c-navy-mid);
  border-color: var(--c-border-dark);
  color: var(--c-text-on-dark);
  box-shadow: none;
}

.projects-cabinet--dark .project-transaction-row__title,
.projects-cabinet--dark .project-transaction-row__value-figure {
  color: var(--c-text-on-dark);
}

.projects-cabinet--dark .project-transaction-row__location {
  color: var(--c-text-on-dark-secondary);
}

.projects-cabinet--dark .project-transaction-row__value {
  border-top-color: var(--c-border-dark);
}

.projects-cabinet--dark .project-transaction-row__value-label {
  color: var(--c-text-on-dark-tertiary);
}

.projects-cabinet--dark .project-transaction-row:hover,
.projects-cabinet--dark .project-transaction-row:focus-visible {
  background: var(--c-navy-light);
  border-color: var(--c-border-orange);
  box-shadow: none;
}

.projects-cabinet--dark .project-transaction-row:hover .project-transaction-row__body,
.projects-cabinet--dark .project-transaction-row:focus-visible .project-transaction-row__body {
  transform: translateX(6px);
}

.projects-cabinet--dark .project-transaction-row:hover .project-transaction-row__cue,
.projects-cabinet--dark .project-transaction-row:focus-visible .project-transaction-row__cue {
  background: var(--c-orange-subtle);
  border-color: var(--c-border-orange);
  transform: translateX(3px);
}

.projects-cabinet--dark .project-transaction-row__cue {
  transition:
    border-color var(--dur-medium) var(--ease-default),
    background var(--dur-medium) var(--ease-default),
    transform var(--dur-medium) var(--ease-default);
}

.projects-cabinet--dark .project-transaction-row__media img {
  transition: transform var(--dur-medium) var(--ease-default);
}

.projects-cabinet--dark .project-transaction-row:hover .project-transaction-row__media img,
.projects-cabinet--dark .project-transaction-row:focus-visible .project-transaction-row__media img {
  transform: scale(1.03);
}

.projects-cabinet--dark .project-transaction-toggle {
  color: var(--c-text-on-dark);
  border-color: var(--c-border-dark);
}

.projects-cabinet--dark .project-transaction-toggle:hover,
.projects-cabinet--dark .project-transaction-toggle:focus-visible {
  border-color: var(--c-orange);
  color: var(--c-orange);
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .projects-cabinet--dark .project-transaction-row__body,
  .projects-cabinet--dark .project-transaction-row__cue,
  .projects-cabinet--dark .project-transaction-row__media img {
    transition-property: background, border-color, color;
  }

  .projects-cabinet--dark .project-transaction-row:hover .project-transaction-row__body,
  .projects-cabinet--dark .project-transaction-row:focus-visible .project-transaction-row__body,
  .projects-cabinet--dark .project-transaction-row:hover .project-transaction-row__cue,
  .projects-cabinet--dark .project-transaction-row:focus-visible .project-transaction-row__cue,
  .projects-cabinet--dark .project-transaction-row:hover .project-transaction-row__media img,
  .projects-cabinet--dark .project-transaction-row:focus-visible .project-transaction-row__media img {
    transform: none;
  }
}

.project-modal-open {
  overflow: hidden;
}

.project-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: calc(var(--container-pad) * 0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--dur-medium) var(--ease-default),
    visibility var(--dur-medium) var(--ease-default);
}

.project-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.project-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--c-navy);
  opacity: 0;
  transition: opacity var(--dur-medium) var(--ease-default);
}

.project-modal.is-open .project-modal__backdrop {
  opacity: 0.78;
}

.project-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, calc(var(--container-max) * 0.72));
  max-height: calc(100vh - var(--container-pad));
  overflow: auto;
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-lg);
  background: var(--c-white);
  box-shadow: var(--shadow-card-hover);
  color: var(--c-text-primary);
  transform: translateY(calc(var(--container-pad) * 0.24));
  transition: transform var(--dur-medium) var(--ease-default);
}

.project-modal.is-open .project-modal__panel {
  transform: translateY(0);
}

.project-modal__close {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding: calc(var(--container-pad) * 0.24) calc(var(--container-pad) * 0.28) 0;
  border: 0;
  background: var(--c-white);
  color: var(--c-text-secondary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
}

.project-modal__close:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: var(--radius-sm);
}

.project-modal__project {
  padding: calc(var(--container-pad) * 0.18) calc(var(--container-pad) * 0.55) calc(var(--container-pad) * 0.62);
}

.project-modal__project[hidden] {
  display: none;
}

.project-modal__sector {
  display: block;
  margin-bottom: calc(var(--container-pad) * 0.16);
  color: var(--c-orange);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.project-modal__title {
  max-width: calc(var(--container-max) * 0.48);
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 72px);
  font-weight: 400;
  line-height: 1.02;
  color: var(--c-text-primary);
}

.project-modal__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--container-pad) * 0.2);
  margin-top: calc(var(--container-pad) * 0.45);
  padding-top: calc(var(--container-pad) * 0.28);
  border-top: 1px solid var(--c-border-light);
}

.project-modal__label {
  display: block;
  margin-bottom: calc(var(--container-pad) * 0.08);
  color: var(--c-text-tertiary);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.project-modal__fact {
  display: block;
  color: var(--c-text-primary);
  font-size: 14px;
  line-height: 1.5;
}

.project-modal__fact--value {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.2vw, 60px);
  line-height: 0.95;
}

.project-modal__detail {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: calc(var(--container-pad) * 0.58);
  margin-top: calc(var(--container-pad) * 0.55);
}

.project-modal__role {
  color: var(--c-text-secondary);
  font-size: 15px;
  line-height: 1.74;
}

.project-modal__impact-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--container-pad) * 0.14);
}

.project-modal__impact-list li {
  position: relative;
  padding-left: calc(var(--container-pad) * 0.24);
  color: var(--c-text-secondary);
  font-size: 14px;
  line-height: 1.62;
}

.project-modal__impact-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.68em;
  width: var(--radius-sm);
  height: var(--radius-sm);
  border-radius: var(--radius-full);
  background: var(--c-orange);
}

@media (max-width: 980px) {
  .project-modal__detail,
  .project-modal__facts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {


  .project-transaction-row,
  .project-transaction-row--reverse {
    grid-template-columns: 1fr;
  }

  .project-transaction-row--reverse .project-transaction-row__media,
  .project-transaction-row--reverse .project-transaction-row__body {
    order: initial;
  }

  .project-transaction-row__media {
    min-height: calc(var(--container-pad) * 3.2);
  }

  .project-transaction-row__body,
  .project-modal__project {
    padding: calc(var(--container-pad) * 0.28);
  }

  .project-modal {
    padding: calc(var(--container-pad) * 0.18);
  }

  .project-modal__panel {
    max-height: calc(100vh - calc(var(--container-pad) * 0.36));
  }
}

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

/* Beat 1 — qualify */
.engage__qualify {
  padding: var(--section-pad) 0 clamp(40px, 4.5vw, 64px);
  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. */
.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; }

/* Beat 2 — ask, same navy field. Left-aligned to share the cards' edge and
   measure (content lives in .container, matching the qualify block above),
   which is the alignment fix: one left margin for the whole section. */
.engage__ask {
  position: relative;
  padding: clamp(52px, 5.5vw, 84px) 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;
}

/* Left-aligned orange rule marking the ask, echoing the cap-body rule. Sits on
   the content's left edge (not the viewport edge) so it lines up with the cards. */
.engage__ask::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--site-edge-pad, var(--container-pad));
  width: 64px;
  height: 3px;
  background: var(--c-orange);
}

/* ================================================
   SEC-H08: GEOGRAPHIC REACH
   White · Navy map · Orange markers
   ================================================ */
.geographic-reach {
  background: var(--c-surface-soft);
  padding: var(--section-pad) 0;
  border-top: 1px solid var(--c-section-divider);
}

.geographic-reach__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 72px;
  align-items: center;
}

.geographic-reach__headline {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -0.3px;
  color: var(--c-text-primary);
  margin-bottom: 20px;
}

.geographic-reach__body {
  font-size: 14px;
  line-height: 1.72;
  color: var(--c-text-secondary);
  margin-bottom: 28px;
}

.region-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-bottom: 30px;
}
.region-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13.5px;
}
.region-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-orange);
  flex-shrink: 0;
  margin-top: 4px;
}
.region-name { font-weight: 500; color: var(--c-text-primary); }
.region-countries { color: var(--c-text-secondary); margin-left: 4px; }

.map-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-wrap img {
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
  display: block;
}
/* Placeholder — remove once production asset is supplied */
.map-placeholder {
  width: 100%;
  aspect-ratio: 800 / 920;
  background: var(--c-surface-light);
  border: 1.5px dashed rgba(0,15,34,0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px;
  box-sizing: border-box;
  text-align: center;
}
.map-placeholder__title {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--c-text-secondary);
}
.map-placeholder__spec {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.8px;
  color: var(--c-text-tertiary);
  line-height: 1.7;
}

/* ================================================
   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 {
  background: var(--c-navy);
  border-top: 1px solid var(--c-border-dark);
  padding: 76px 0 56px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 3fr 2fr 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; }
}

/* Anchor-arrival entrance for the capabilities intro copy.
   The cap-intro opens on a deliberately pure-image first screen; the headline
   only composites over the image once the copy scrolls up. A visitor arriving
   via a nav/anchor link would otherwise land on a bare frame. JS adds
   .cap-intro__text--enter only on anchor arrival, staggering the overline,
   headline, and lede onto the image. Natural scrollers never receive the
   class, so their experience is unchanged. */
.cap-intro__text--enter > * {
  opacity: 0;
  transform: translateY(18px);
  animation: capIntroEnter 620ms var(--ease-enter) forwards;
}
.cap-intro__text--enter > *:nth-child(1) { animation-delay: 60ms; }
.cap-intro__text--enter > *:nth-child(2) { animation-delay: 200ms; }
.cap-intro__text--enter > *:nth-child(3) { animation-delay: 340ms; }

@keyframes capIntroEnter {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cap-intro__text--enter > * {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

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

  .nav { padding: 0 40px; }
  .nav__links { display: none; }
  .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; }

  .geographic-reach__grid { grid-template-columns: 1fr; gap: 48px; }

  .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 */
.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(4, minmax(0, 1fr));
  width: 100%;
}
.metric {
  padding-left: clamp(20px, 3vw, 56px);
  padding-right: clamp(20px, 3vw, 56px);
}
.metric:first-child { text-align: left; padding-left: 0; }
.metric:last-child  { text-align: right; padding-right: 0; }
.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: NAVY GLASS HEADER + SCROLL-CONTROLLED INTRO STEPS
   Opening hero now follows the same scrollytelling logic:
   1) Established . 2019, 2) headline, 3) body text, then gears.
   ================================================ */
.nav--transparent,
.nav--solid {
  background: rgba(0,15,34,0.34) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: none !important;
}

.nav--solid {
  background: rgba(0,15,34,0.74) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: rgba(255,255,255,0.10);
}

.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,
.geographic-reach__body,
.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;
}

/* Geographic Reach: gives the map more authority on wide screens */
.geographic-reach__grid {
  grid-template-columns: minmax(360px, 4.8fr) minmax(520px, 7.2fr);
  gap: clamp(72px, 7vw, 132px);
}

.map-wrap img {
  width: min(100%, 920px);
  max-height: 680px;
}

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

.footer__tagline {
  max-width: 280px;
}

@media (max-width: 1220px) {
  .geographic-reach__grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .map-wrap {
    justify-content: flex-start;
  }

  .map-wrap img {
    width: min(100%, 760px);
  }
}

@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: rgba(0,15,34,0.62) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !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: 26.25px;
  letter-spacing: 3.4px;
  margin-bottom: 24px;
}

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

.cap-intro .overline {
  color: var(--c-orange);
  text-shadow: 0 1px 16px rgba(0, 15, 34, 0.62);
}

.cap-intro .overline::after {
  background: rgba(242, 94, 35, 0.44);
}

/* ================================================
   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,
  .geographic-reach__grid,
  .pathway-grid,
  .footer__grid,
  .project-transaction-row,
  .project-modal__detail,
  .project-modal__facts {
    min-width: 0;
  }

  .map-wrap img,
  .project-transaction-row__media img,
  .hero__video {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .nav__hamburger,
  .nav-drawer__links a,
  .project-transaction-toggle,
  .project-transaction-row__cue,
  .project-modal__close,
  .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-y: auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }

  .nav-drawer__links a {
    display: flex;
    align-items: center;
  }

  .overline {
    max-width: 100%;
    font-size: clamp(16px, 5vw, 20px);
    letter-spacing: 2px;
    overflow-wrap: anywhere;
  }

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

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

  .section-intro,
  .cap-intro__lede,
  .execution-gap__intro,
  .geographic-reach__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%;
  }

  .cap-intro {
    overflow: hidden;
  }

  .cap-intro__media {
    position: relative;
    top: auto;
    height: auto;
    min-height: calc(var(--section-pad) * 4);
  }

  .cap-intro__copy {
    margin-top: 0;
    padding-top: calc(var(--section-pad) * 0.85);
    padding-bottom: calc(var(--section-pad) * 0.85);
  }

  .cap-intro__copy::before {
    top: 0;
    height: 100%;
  }

  .project-transaction-row,
  .project-transaction-row--reverse {
    grid-template-columns: 1fr;
  }

  .project-transaction-row--reverse .project-transaction-row__media,
  .project-transaction-row--reverse .project-transaction-row__body {
    order: initial;
  }

  .project-transaction-row__media {
    min-height: calc(var(--section-pad) * 3);
  }

  .project-transaction-row__body {
    padding: calc(var(--container-pad) * 1.2);
  }

  .project-transaction-list.is-expanded .project-transaction-row--extra {
    min-height: 0;
    max-height: calc(var(--section-pad) * 12);
  }

  .project-transaction-row__title {
    max-width: 100%;
    font-size: clamp(30px, 9vw, 42px);
  }

  .project-transaction-row__value-figure {
    font-size: clamp(44px, 15vw, 64px);
  }

  .project-transaction-row__cue {
    display: inline-flex;
    align-items: center;
  }

  .project-transaction-toggle {
    width: 100%;
  }

  .project-modal {
    align-items: stretch;
    padding-top: max(var(--container-pad), env(safe-area-inset-top));
    padding-right: var(--container-pad);
    padding-bottom: max(var(--container-pad), env(safe-area-inset-bottom));
    padding-left: var(--container-pad);
  }

  .project-modal__panel {
    width: 100%;
    max-height: calc(100dvh - (var(--container-pad) * 2));
  }

  .project-modal__close {
    align-items: center;
    padding: 0 calc(var(--container-pad) * 0.8);
  }

  .project-modal__project {
    padding: calc(var(--container-pad) * 1.1);
  }

  .project-modal__title {
    max-width: 100%;
    font-size: clamp(32px, 10vw, 46px);
  }

  .project-modal__fact--value {
    font-size: clamp(32px, 12vw, 48px);
  }

  .project-modal__detail,
  .project-modal__facts {
    grid-template-columns: 1fr;
  }

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

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

  .project-transaction-row__media {
    min-height: calc(var(--section-pad) * 2.5);
  }

  .cap-intro__media {
    min-height: calc(var(--section-pad) * 3.2);
  }
}

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

  .cap-intro__copy {
    margin-top: 0;
    padding-top: calc(var(--section-pad) * 0.7);
  }
}

.projects-cabinet--standalone {
  padding-top: calc(var(--section-pad) * 1.7);
}

@media (max-width: 1023px) {
  .projects-cabinet--standalone {
    padding-top: calc(var(--section-pad) * 1.55);
  }
}

@media (max-width: 767px) {
  .projects-cabinet--standalone {
    padding-top: calc(var(--section-pad) * 1.75);
  }
}

.nav--project-page,
.nav--project-page.nav--transparent,
.nav--project-page.nav--solid {
  height: 112px !important;
  background: linear-gradient(180deg, rgba(76, 89, 103, 0.94) 0%, rgba(0, 15, 34, 0.98) 100%) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !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(10px) !important;
}

.nav--project-page .nav__logo-img,
.nav--project-page.nav--solid .nav__logo-img {
  width: clamp(390px, 28.6vw, 494px) !important;
  max-height: 78px !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(7px) !important;
  }

  .nav--project-page .nav__logo-img,
  .nav--project-page.nav--solid .nav__logo-img {
    width: 338px !important;
    max-height: 64px !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(4px) !important;
  }

  .nav--project-page .nav__logo-img,
  .nav--project-page.nav--solid .nav__logo-img {
    width: 248px !important;
    max-height: 52px !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-lg);
  /* 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: var(--shadow-card);
  color: var(--c-text-on-dark);
  isolation: isolate;
  transition:
    transform var(--dur-medium) var(--ease-default),
    box-shadow 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.60) 0%,
      rgba(0, 15, 34, 0.30) 42%,
      rgba(0, 15, 34, 0.06) 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);
    box-shadow: var(--shadow-card-hover);
  }
  .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.82) 0%,
        rgba(0, 15, 34, 0.55) 50%,
        rgba(0, 15, 34, 0.25) 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;
  }
}