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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .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,
.final-cta__body {
  max-width: 620px;
}

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

.challenge-item {
  gap: 22px;
}

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

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

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

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

.footer__tagline {
  max-width: 280px;
}

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

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

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

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



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

.nav--solid {
  background: 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: 13px;
  letter-spacing: 2px;
  margin-bottom: 24px;
}

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

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

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

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

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

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

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

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

  .nav-drawer {
    overflow-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: 13px;
    letter-spacing: 2px;
    overflow-wrap: anywhere;
  }

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

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

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

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

  .hero--scrolly {
    overflow: hidden;
  }

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

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

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

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

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

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

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

.nav--project-page,
.nav--project-page.nav--transparent,
.nav--project-page.nav--solid {
  height: 112px !important;
  background: 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;
  }
}

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

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

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

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

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

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

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

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

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

.rg-hero__lede p {
  margin: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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