/* ============================================================================
   HPCIF — Design System · hpcif.css
   HEVA Pan-African Creative Industries Fund
   Structured by Regenerative Ventures Advisory FZCO

   Architecture: reskin of the ADFIC Snøhetta editorial web system.
   Same structural grammar (Hanken Grotesk, generous whitespace, full-bleed
   imagery, overlay menu, FR/EN toggle, near-monochrome with ONE restrained
   accent) — recoloured to HEVA's warm creative-economy palette.

   Accent: HEVA Amber  #C08B3A  (replaces ADFIC orange)
   Dark canvas: deep ink #0F0B06  (replaces ADFIC near-black)
   Warm white: #FAF8F4  (same register, slightly warmer)
   Author: Builder / RV C-Suite — 2026-06-29
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Playfair+Display:ital,wght@0,700;0,800;1,600&display=swap');

/* ============================================================================
   DESIGN TOKENS
   ========================================================================== */
:root {

  /* — HPCIF palette — */
  --hv-amber:    #C08B3A;   /* primary accent: figures, rules, CTAs, hover states */
  --hv-amber-lt: #D4A85A;   /* lighter for hover / glow */
  --hv-amber-dk: #9A6E2A;   /* dark amber for pressed/active */
  --hv-teal:     #2A6A75;   /* RV teal — secondary accent (section dividers, badges) */
  --hv-earth:    #B8956A;   /* warm earth — tertiary warm tone */

  /* — Dark surface — */
  --hv-ink:      #0F0B06;   /* near-black warm — primary dark bg + dark-mode ink */
  --hv-ink-2:    #1C1609;   /* slightly raised dark */

  /* — Light surface — */
  --hv-bg:       #FAF8F4;   /* warm near-white canvas */
  --hv-bg-2:     #F2EDE4;   /* subtle warm grey section */
  --hv-bg-dk:    #0F0B06;   /* footer / dark sections */

  /* — Ink hierarchy — */
  --hv-text:     #18140D;   /* primary body text on light */
  --hv-text-2:   #6A5F50;   /* secondary / labels on light */
  --hv-text-3:   #9D9080;   /* tertiary / eyebrows / captions */

  /* — Lines — */
  --hv-line:     #E6DFD4;   /* hairline on light */
  --hv-line-2:   #D6CEBC;   /* slightly stronger line */

  /* — Typography — */
  --hv-sans:  'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --hv-serif: 'Playfair Display', Georgia, serif;

  /* — Layout — */
  --hv-max:   1320px;
  --hv-pad:   48px;
}

/* ============================================================================
   RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--hv-sans);
  background: var(--hv-bg);
  color: var(--hv-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -.005em;
  line-height: 1.5;
}

body h1, body h2, body h3, body h4, body h5 {
  font-family: var(--hv-sans);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.08;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: var(--hv-amber); color: #fff; }

/* ============================================================================
   LAYOUT
   ========================================================================== */
.hv-wrap {
  max-width: var(--hv-max);
  margin: 0 auto;
  padding: 0 var(--hv-pad);
}

/* ============================================================================
   ARROWHEAD MOTIF (Snøhetta signature — preserved)
   ========================================================================== */
.arw {
  display: inline-block;
  width: .62em;
  height: .62em;
  vertical-align: baseline;
  margin-left: .5em;
  flex: 0 0 auto;
}
.arw svg { width: 100%; height: 100%; display: block; }
.arw path { stroke: currentColor; stroke-width: 1.4; fill: none; }

/* ============================================================================
   TOP NAV (fixed, minimal)
   ========================================================================== */
.s-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--hv-pad);
  transition: background .3s, color .3s, padding .3s, border-color .3s;
}

.s-nav.on-image { color: #fff; }

.s-nav.on-light {
  color: var(--hv-text);
  background: rgba(250, 248, 244, .92);
  -webkit-backdrop-filter: saturate(1.1) blur(10px);
  backdrop-filter: saturate(1.1) blur(10px);
  border-bottom: 1px solid var(--hv-line);
  padding: 14px var(--hv-pad);
}

/* Wordmark */
.s-nav .s-word {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .01em;
  color: inherit;
  text-decoration: none;
}

.s-nav .s-word .s-logo {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  object-fit: contain;
  filter: brightness(0) invert(1); /* white on dark bg */
  transition: filter .3s;
}

.s-nav.on-light .s-word .s-logo {
  filter: none; /* natural colour on light bg */
}

.s-nav .s-word .s-sub {
  font-weight: 400;
  font-size: 11px;
  opacity: .6;
  letter-spacing: .06em;
}

.s-nav-right {
  display: flex;
  align-items: center;
  gap: 22px;
}

/* Language toggle */
.s-langs {
  display: flex;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
}
.s-langs button {
  background: none;
  border: 0;
  color: inherit;
  opacity: .55;
  cursor: pointer;
  padding: 2px 4px;
  font: inherit;
  transition: opacity .15s, color .15s;
}
.s-langs button.active { opacity: 1; color: var(--hv-amber); }
.s-langs button:not(.active):hover { opacity: .85; }

/* Browse / menu button */
.s-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .15s;
}
.s-menu-btn:hover { color: var(--hv-amber); }
.s-menu-btn .bars { display: inline-flex; flex-direction: column; gap: 3.5px; }
.s-menu-btn .bars i { width: 20px; height: 1.5px; background: currentColor; display: block; }

/* ============================================================================
   FULL-SCREEN OVERLAY MENU
   ========================================================================== */
.s-menu {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--hv-bg);
  transform: translateY(-100%);
  transition: transform .5s cubic-bezier(.7,0,.2,1);
  overflow-y: auto;
  visibility: hidden;
}
.s-menu.open { transform: translateY(0); visibility: visible; }

.s-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--hv-pad);
  border-bottom: 1px solid var(--hv-line);
  position: sticky;
  top: 0;
  background: var(--hv-bg);
  z-index: 2;
}
.s-menu-top .s-word {
  font-weight: 600;
  font-size: 17px;
  color: var(--hv-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.s-menu-top .s-logo { width: 28px; height: 28px; object-fit: contain; }

.s-close {
  background: none;
  border: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hv-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: color .15s;
}
.s-close:hover { color: var(--hv-amber); }
.s-close .x { font-size: 20px; line-height: 1; }

.s-menu-body {
  max-width: var(--hv-max);
  margin: 0 auto;
  padding: 46px var(--hv-pad) 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 30px;
}

.s-col .s-col-h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hv-text-3);
  padding-bottom: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--hv-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.s-col-h .acc { color: var(--hv-amber); }

.s-col ul { list-style: none; }

.s-col a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  text-decoration: none;
  color: var(--hv-text);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.18;
  padding: 9px 0;
  border-bottom: 1px solid var(--hv-line);
  transition: color .14s, padding-left .14s;
}
.s-col a:hover { color: var(--hv-amber); padding-left: 6px; }
.s-col a .m {
  font-size: 11px;
  font-weight: 500;
  color: var(--hv-text-3);
  letter-spacing: .02em;
  flex: 0 0 auto;
}
.s-col li.sub a {
  font-size: 14.5px;
  font-weight: 400;
  color: var(--hv-text-2);
  padding: 7px 0;
}
.s-col li.sub a:hover { color: var(--hv-amber); }

/* ============================================================================
   HERO — full-bleed cinematic
   ========================================================================== */
.s-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  background: #0F0B06 center / cover no-repeat;
  color: #fff;
  overflow: hidden;
}

/* gradient overlay — bottom-heavy for legibility of text */
.s-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(10,7,3,.45) 0%,
    rgba(10,7,3,.18) 26%,
    rgba(10,7,3,.34) 48%,
    rgba(10,7,3,.80) 80%,
    rgba(10,7,3,.94) 100%
  );
  z-index: 0;
}

.s-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  border: 0;
  filter: brightness(.70) saturate(1.04);
}

.s-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--hv-max);
  margin: 0 auto;
  padding: 0 var(--hv-pad) 9vh;
}

.s-eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: rgba(255,255,255,.80);
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.s-eyebrow .hv-tag {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid rgba(192,139,58,.7);
  border-radius: 2px;
  color: var(--hv-amber-lt);
  font-size: 10px;
  letter-spacing: .16em;
}

.s-hero h1 {
  font-family: var(--hv-sans);
  font-weight: 500;
  font-size: clamp(38px, 5.8vw, 84px);
  line-height: 1.02;
  letter-spacing: -.025em;
  color: #fff;
  max-width: 18ch;
  margin: 0;
  text-shadow: 0 1px 22px rgba(0,0,0,.42);
}

.s-hero h1 em {
  font-style: italic;
  font-family: var(--hv-serif);
  font-weight: 700;
  color: rgba(255,255,255,.92);
}

.s-hero .s-hero-sub {
  font-size: clamp(16px, 1.55vw, 20px);
  font-weight: 400;
  color: rgba(255,255,255,.92);
  max-width: 52ch;
  margin: 26px 0 0;
  line-height: 1.5;
  text-shadow: 0 1px 16px rgba(0,0,0,.42);
}

.s-hero-meta {
  margin-top: 30px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}

.s-hero-cta {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

/* Watch the film button */
.s-film-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hv-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
  background: rgba(192,139,58,.14);
  border: 1px solid rgba(192,139,58,.65);
  border-radius: 2px;
  padding: 11px 22px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: background .25s, border-color .25s, color .25s;
}
.s-film-btn:hover {
  background: var(--hv-amber);
  border-color: var(--hv-amber);
}
.s-film-btn .pl { font-size: 11px; line-height: 1; }

/* Secondary CTA */
.s-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 2px;
  padding: 11px 22px;
  text-decoration: none;
  transition: border-color .2s, color .2s;
}
.s-cta-ghost:hover {
  border-color: rgba(255,255,255,.85);
  color: #fff;
}

/* Transcript link */
.s-film-tr {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.s-film-tr:hover { color: #fff; border-bottom-color: rgba(255,255,255,.55); }

/* Scroll indicator */
.s-scroll {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  color: rgba(255,255,255,.65);
  font-size: 10.5px;
  letter-spacing: .20em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.s-scroll .ln { width: 1px; height: 32px; background: rgba(255,255,255,.45); }

/* ============================================================================
   FILM LIGHTBOX
   ========================================================================== */
.film-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6,4,2,.94);
  padding: 6vh 4vw;
}
.film-modal.open { display: flex; }
.film-box { position: relative; width: 100%; max-width: 1100px; }
.film-player {
  width: 100%;
  max-height: 80vh;
  background: #000;
  display: block;
  border: 0;
}
.film-x {
  position: absolute;
  top: -44px;
  right: 0;
  width: 38px;
  height: 38px;
  font-size: 25px;
  line-height: 1;
  color: #fff;
  background: none;
  border: 0;
  cursor: pointer;
  opacity: .8;
  transition: opacity .15s;
}
.film-x:hover { opacity: 1; }
.film-tr-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.film-tr-link:hover { color: #fff; border-bottom-color: var(--hv-amber); }

/* ============================================================================
   THESIS STATEMENT (editorial pull section)
   ========================================================================== */
.s-statement {
  padding: 13vh 0;
}
.s-statement .hv-wrap { max-width: 1100px; }

.s-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--hv-text-3);
  margin-bottom: 30px;
}

.s-statement p {
  font-size: clamp(22px, 3vw, 40px);
  font-weight: 400;
  line-height: 1.34;
  letter-spacing: -.018em;
  color: var(--hv-text);
  max-width: 26ch;
}
.s-statement p .mut { color: var(--hv-text-3); }
.s-statement p .acc { color: var(--hv-amber); }

/* Hero stats band */
.s-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 64px;
}
.s-stat {
  padding-top: 22px;
  border-top: 1px solid var(--hv-line-2);
}
.s-stat .n {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 500;
  letter-spacing: -.025em;
  color: var(--hv-text);
  line-height: 1;
}
.s-stat .n .u { color: var(--hv-amber); }
.s-stat .k {
  font-size: 13px;
  color: var(--hv-text-2);
  line-height: 1.5;
  margin-top: 10px;
  max-width: 26ch;
}

/* ============================================================================
   CAPITAL ARCHITECTURE — three-facility section
   ========================================================================== */
.s-arch {
  background: var(--hv-bg-2);
  padding: 12vh 0;
  border-top: 1px solid var(--hv-line);
  border-bottom: 1px solid var(--hv-line);
}
.s-arch .hv-wrap { max-width: 1100px; }

.s-arch-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 64px;
}
.s-arch-intro-left {}
.s-arch-intro-left h2 {
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--hv-text);
  margin-top: 20px;
}
.s-arch-intro-right p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--hv-text-2);
}
.s-arch-intro-right .s-total {
  margin-top: 32px;
  padding: 24px 28px;
  background: var(--hv-ink);
  color: #fff;
  border-radius: 3px;
}
.s-total .t-lbl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hv-amber-lt);
  margin-bottom: 8px;
}
.s-total .t-num {
  font-size: clamp(30px,3.6vw,46px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
}
.s-total .t-sub {
  font-size: 13px;
  color: rgba(255,255,255,.6);
  margin-top: 6px;
}

/* Three facilities */
.s-facilities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.s-facility {
  border: 1px solid var(--hv-line);
  border-radius: 3px;
  background: var(--hv-bg);
  overflow: hidden;
  transition: box-shadow .2s;
}
.s-facility:hover { box-shadow: 0 8px 30px rgba(0,0,0,.06); }

.sf-head {
  padding: 24px 24px 20px;
  border-bottom: 1px solid var(--hv-line);
}
.sf-code {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hv-amber);
  margin-bottom: 8px;
}
.sf-name {
  font-size: 18px;
  font-weight: 500;
  color: var(--hv-text);
  line-height: 1.2;
}
.sf-type {
  font-size: 12px;
  color: var(--hv-text-3);
  margin-top: 4px;
}

.sf-body { padding: 24px; }
.sf-amount {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  color: var(--hv-text);
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: 18px;
}
.sf-amount .u { color: var(--hv-amber); font-size: .55em; }

.sf-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hv-line);
  font-size: 13px;
}
.sf-row:last-child { border-bottom: 0; }
.sf-row .sr-lbl { color: var(--hv-text-3); }
.sf-row .sr-val { font-weight: 500; color: var(--hv-text); text-align: right; }
.sf-row .sr-val.hi { color: var(--hv-amber); }

/* Blended-finance mobilisation bar */
.s-mobilise {
  margin-top: 48px;
  padding: 30px 28px;
  background: var(--hv-ink);
  border-radius: 3px;
  color: #fff;
}
.sm-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.sm-head .sm-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hv-amber-lt);
}
.sm-head .sm-ratio {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
}
.sm-head .sm-ratio span { color: var(--hv-amber-lt); font-size: .6em; }
.sm-head .sm-note { font-size: 13px; color: rgba(255,255,255,.55); max-width: 38ch; }

.sm-bar {
  width: 100%;
  height: 8px;
  background: rgba(255,255,255,.12);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
}
.sm-fill {
  height: 100%;
  width: 20%;
  background: var(--hv-amber);
  border-radius: 4px;
}
.sm-legend {
  display: flex;
  gap: 28px;
  font-size: 12px;
  color: rgba(255,255,255,.65);
  flex-wrap: wrap;
}
.sm-legend span { display: flex; align-items: center; gap: 8px; }
.sm-legend i {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
}
.sm-legend .i-cat { background: var(--hv-amber); }
.sm-legend .i-com { background: rgba(255,255,255,.35); }

/* ============================================================================
   TRACK RECORD / PROOF BAND
   ========================================================================== */
.s-track {
  padding: 12vh 0;
}
.s-track .hv-wrap { max-width: 1100px; }

.s-track-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  margin-top: 48px;
}
.s-track-left h3 {
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 500;
  color: var(--hv-text);
  letter-spacing: -.02em;
  line-height: 1.08;
  margin-bottom: 22px;
}
.s-track-left p {
  font-size: 15px;
  color: var(--hv-text-2);
  line-height: 1.75;
  margin-bottom: 16px;
}

/* Impact metrics grid */
.s-impact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.s-impact-cell {
  padding: 22px 0;
  border-bottom: 1px solid var(--hv-line);
}
.s-impact-cell:nth-child(odd) {
  padding-right: 24px;
  border-right: 1px solid var(--hv-line);
}
.s-impact-cell:nth-child(even) {
  padding-left: 24px;
}
.s-impact-cell:nth-last-child(-n+2) { border-bottom: 0; }
.s-impact-cell .ic-n {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--hv-text);
  line-height: 1;
}
.s-impact-cell .ic-n .u { color: var(--hv-amber); }
.s-impact-cell .ic-k {
  font-size: 12px;
  color: var(--hv-text-3);
  margin-top: 6px;
  line-height: 1.45;
}

/* Case study card */
.s-case {
  border: 1px solid var(--hv-line);
  border-radius: 3px;
  overflow: hidden;
  background: var(--hv-bg);
}
.s-case-badge {
  padding: 16px 24px;
  background: var(--hv-ink);
  color: rgba(255,255,255,.7);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}
.s-case-badge .cb-tag {
  color: var(--hv-amber);
}
.s-case-body {
  padding: 28px 24px;
}
.s-case-body h4 {
  font-size: 20px;
  font-weight: 500;
  color: var(--hv-text);
  margin-bottom: 12px;
}
.s-case-body blockquote {
  border-left: 2px solid var(--hv-amber);
  padding-left: 16px;
  font-size: 15px;
  font-style: italic;
  color: var(--hv-text-2);
  line-height: 1.6;
  margin: 0 0 20px;
}
.s-case-outcomes {
  list-style: none;
  margin: 0;
  padding: 0;
}
.s-case-outcomes li {
  font-size: 13px;
  color: var(--hv-text-2);
  padding: 8px 0;
  border-bottom: 1px solid var(--hv-line);
  display: flex;
  align-items: baseline;
  gap: 10px;
  line-height: 1.45;
}
.s-case-outcomes li::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hv-amber);
  flex: 0 0 5px;
  margin-top: 5px;
}
.s-case-outcomes li:last-child { border-bottom: 0; }

/* Programs strip */
.s-programs {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--hv-line-2);
}
.s-programs .sp-lbl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hv-text-3);
  margin-bottom: 18px;
}
.s-programs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.sp-item {
  padding: 18px 20px;
  border: 1px solid var(--hv-line);
  border-radius: 2px;
  background: var(--hv-bg-2);
}
.sp-item .si-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hv-text);
  margin-bottom: 6px;
}
.sp-item .si-detail {
  font-size: 12px;
  color: var(--hv-text-3);
  line-height: 1.45;
}

/* ============================================================================
   MARKETS — geography section
   ========================================================================== */
.s-markets {
  background: var(--hv-ink);
  color: #fff;
  padding: 12vh 0;
}
.s-markets .hv-wrap { max-width: 1100px; }
.s-markets .s-lbl { color: rgba(255,255,255,.45); }
.s-markets h2 {
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 500;
  letter-spacing: -.02em;
  color: #fff;
  margin-top: 20px;
  margin-bottom: 48px;
}

.s-markets-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.sm-country {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 2px;
  padding: 22px 18px;
  background: rgba(255,255,255,.04);
  transition: background .2s, border-color .2s;
}
.sm-country:hover {
  background: rgba(192,139,58,.12);
  border-color: rgba(192,139,58,.4);
}
.sm-country .sc-flag {
  font-size: 22px;
  margin-bottom: 12px;
}
.sm-country .sc-name {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 4px;
}
.sm-country .sc-class {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hv-amber-lt);
  margin-bottom: 8px;
}
.sm-country .sc-alloc {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  line-height: 1.45;
}

.sm-sa-note {
  margin-top: 24px;
  padding: 18px 20px;
  border: 1px solid rgba(192,139,58,.3);
  border-radius: 2px;
  font-size: 12.5px;
  color: rgba(255,255,255,.6);
  line-height: 1.55;
}
.sm-sa-note strong { color: var(--hv-amber-lt); font-weight: 500; }

/* ============================================================================
   RETURNS / WHY NOW
   ========================================================================== */
.s-returns {
  padding: 12vh 0;
  border-bottom: 1px solid var(--hv-line);
}
.s-returns .hv-wrap { max-width: 1100px; }

.s-returns-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-top: 48px;
  align-items: start;
}

.s-returns-left h3 {
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 500;
  color: var(--hv-text);
  letter-spacing: -.02em;
  margin-bottom: 18px;
}
.s-returns-left p {
  font-size: 15px;
  color: var(--hv-text-2);
  line-height: 1.75;
}

/* Returns table */
.s-ret-table {
  border: 1px solid var(--hv-line);
  border-radius: 3px;
  overflow: hidden;
}
.srt-head {
  padding: 14px 20px;
  background: var(--hv-bg-2);
  border-bottom: 1px solid var(--hv-line);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hv-text-3);
}
.srt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--hv-line);
  font-size: 14px;
  transition: background .14s;
}
.srt-row:last-child { border-bottom: 0; }
.srt-row:hover { background: var(--hv-bg-2); }
.srt-row .sr-l { color: var(--hv-text-2); }
.srt-row .sr-r { font-weight: 600; color: var(--hv-text); }
.srt-row .sr-r.hi { color: var(--hv-amber); }

/* Why-now pillars */
.s-why-now {
  padding: 12vh 0;
  background: var(--hv-bg-2);
  border-bottom: 1px solid var(--hv-line);
}
.s-why-now .hv-wrap { max-width: 1100px; }

.s-why-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 48px;
  border: 1px solid var(--hv-line);
  border-radius: 3px;
  overflow: hidden;
}
.s-why-pillar {
  padding: 32px 28px;
  background: var(--hv-bg);
  border-right: 1px solid var(--hv-line);
}
.s-why-pillar:last-child { border-right: 0; }
.swp-num {
  font-size: 36px;
  font-weight: 500;
  color: var(--hv-amber);
  line-height: 1;
  margin-bottom: 18px;
  letter-spacing: -.02em;
  font-family: var(--hv-serif);
  font-style: italic;
}
.swp-head {
  font-size: 16px;
  font-weight: 600;
  color: var(--hv-text);
  margin-bottom: 10px;
}
.swp-body {
  font-size: 13.5px;
  color: var(--hv-text-2);
  line-height: 1.65;
}

/* ============================================================================
   THE ASK — close section
   ========================================================================== */
.s-ask {
  padding: 14vh 0;
}
.s-ask .hv-wrap { max-width: 1100px; }

.s-ask-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.s-ask-left h2 {
  font-size: clamp(28px, 3.6vw, 50px);
  font-weight: 500;
  letter-spacing: -.025em;
  color: var(--hv-text);
  margin-top: 20px;
  margin-bottom: 22px;
}
.s-ask-left p {
  font-size: 15px;
  color: var(--hv-text-2);
  line-height: 1.75;
  margin-bottom: 16px;
}

.s-ask-close-table { border: 1px solid var(--hv-line); border-radius: 3px; overflow: hidden; }
.sact-head {
  padding: 14px 20px;
  background: var(--hv-ink);
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hv-amber-lt);
}
.sact-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--hv-line);
  background: var(--hv-bg);
  font-size: 14px;
}
.sact-row:last-child { border-bottom: 0; }
.sact-row .sl-label { color: var(--hv-text-2); }
.sact-row .sl-value { font-weight: 600; color: var(--hv-text); text-align: right; }
.sact-row .sl-value.hi { color: var(--hv-amber); }
.sact-row .sl-value.date { color: var(--hv-teal); }

/* CTA block */
.s-ask-cta {
  margin-top: 32px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--hv-ink);
  color: #fff;
  border: 1px solid var(--hv-ink);
  border-radius: 2px;
  padding: 12px 24px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, border-color .2s;
  font-family: var(--hv-sans);
}
.btn-primary:hover { background: var(--hv-amber); border-color: var(--hv-amber); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  color: var(--hv-text);
  border: 1px solid var(--hv-line-2);
  border-radius: 2px;
  padding: 12px 24px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s, color .2s;
  font-family: var(--hv-sans);
}
.btn-secondary:hover { border-color: var(--hv-amber); color: var(--hv-amber); }

/* Structured-by tag */
.s-structuredby {
  margin-top: 48px;
  padding: 22px 24px;
  border: 1px solid var(--hv-line);
  border-left: 3px solid var(--hv-amber);
  border-radius: 0 3px 3px 0;
  background: var(--hv-bg-2);
}
.ssb-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hv-text-3);
  margin-bottom: 6px;
}
.ssb-text {
  font-size: 14px;
  color: var(--hv-text);
  line-height: 1.55;
}
.ssb-text a {
  color: var(--hv-amber);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.ssb-text a:hover { border-bottom-color: var(--hv-amber); }

/* ============================================================================
   EDITORIAL INDEX (section tiles — browse the property)
   ========================================================================== */
.s-index {
  padding: 2vh 0 12vh;
  background: var(--hv-bg);
}
.s-index .hv-wrap { max-width: 1100px; }

.s-index-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 38px;
  flex-wrap: wrap;
}
.s-index-h .all {
  font-size: 13px;
  font-weight: 600;
  color: var(--hv-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: color .15s;
}
.s-index-h .all:hover { color: var(--hv-amber); }

.s-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.s-tile {
  position: relative;
  display: block;
  text-decoration: none;
  color: #fff;
  overflow: hidden;
  aspect-ratio: 16/10;
  background: var(--hv-ink) center/cover no-repeat;
}
.s-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,7,3,.76), rgba(10,7,3,.06) 55%, rgba(10,7,3,.18));
  transition: background .4s;
}
.s-tile:hover::after {
  background: linear-gradient(to top, rgba(192,139,58,.8), rgba(10,7,3,.12) 60%, rgba(10,7,3,.22));
}
.s-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.4,0,.1,1);
}
.s-tile:hover img { transform: scale(1.04); }
.s-tile .tx {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
}
.s-tile .tier {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.80);
  margin-bottom: 8px;
}
.s-tile h3 {
  font-family: var(--hv-sans);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.08;
  color: #fff;
  margin: 0;
  letter-spacing: -.01em;
}
.s-tile .meta {
  font-size: 13px;
  color: rgba(255,255,255,.82);
  margin-top: 9px;
  max-width: 34ch;
  line-height: 1.45;
  display: flex;
  align-items: baseline;
}
.s-tile.wide { grid-column: 1 / -1; aspect-ratio: 21/8; }
.s-tile .lock {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 2px;
  padding: 4px 9px;
}

/* Gradient placeholder tiles (no image yet) */
.s-tile.no-img { background: var(--hv-bg-2); }
.s-tile.no-img::after { background: none; }
.s-tile.no-img .tx { justify-content: center; }
.s-tile.no-img h3 { color: var(--hv-text); }
.s-tile.no-img .tier { color: var(--hv-text-3); }
.s-tile.no-img .meta { color: var(--hv-text-2); }
.s-tile.no-img .coming {
  position: absolute;
  top: 22px; right: 22px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hv-text-3);
  border: 1px solid var(--hv-line-2);
  border-radius: 2px;
  padding: 4px 9px;
}

/* ============================================================================
   FOOTER
   ========================================================================== */
.s-footer {
  background: var(--hv-bg-dk);
  color: #fff;
  padding: 80px var(--hv-pad) 40px;
}
.s-footer .hv-wrap {
  max-width: var(--hv-max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Wordmark in footer */
.s-footer .f-word {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: 12px;
}
.s-footer .f-word .f-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .85;
}
.s-footer .f-word .f-dot { color: var(--hv-amber); }

.s-footer .f-col h4 {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 14px;
}
.s-footer .f-col a, .s-footer .f-col p {
  display: block;
  font-size: 14px;
  color: rgba(255,255,255,.75);
  text-decoration: none;
  line-height: 2;
}
.s-footer .f-col a:hover { color: var(--hv-amber); }

.s-footer .f-bottom {
  max-width: var(--hv-max);
  margin: 56px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: rgba(255,255,255,.45);
  letter-spacing: .03em;
}
.s-footer .f-bottom .f-credit { color: rgba(255,255,255,.62); }
.s-footer .f-bottom a {
  color: var(--hv-amber);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.s-footer .f-bottom a:hover { border-bottom-color: var(--hv-amber); }

/* Target window note */
.f-target {
  padding: 10px 16px;
  border: 1px solid rgba(192,139,58,.3);
  border-radius: 2px;
  color: rgba(255,255,255,.55);
  font-size: 11px;
  letter-spacing: .06em;
  margin-top: 4px;
}

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .s-arch-intro,
  .s-track-grid,
  .s-returns-grid,
  .s-ask-inner { grid-template-columns: 1fr; gap: 48px; }
  .s-arch-intro { gap: 36px; }
  .s-markets-grid { grid-template-columns: repeat(3, 1fr); }
  .s-menu-body { grid-template-columns: repeat(2, 1fr); }
  .s-why-pillars { grid-template-columns: 1fr; }
  .s-why-pillar { border-right: 0; border-bottom: 1px solid var(--hv-line); }
  .s-why-pillar:last-child { border-bottom: 0; }
}

@media (max-width: 760px) {
  :root { --hv-pad: 22px; }
  .s-stats { grid-template-columns: 1fr; gap: 0; }
  .s-tiles { grid-template-columns: 1fr; }
  .s-tile.wide { aspect-ratio: 16/10; }
  .s-menu-body { grid-template-columns: 1fr; gap: 26px; }
  .s-hero { min-height: 92vh; }
  /* Mobile: text block fills the screen over the playing video — much stronger scrim + dimmer video for legibility */
  .s-hero::after {
    background: linear-gradient(
      to bottom,
      rgba(10,7,3,.58) 0%,
      rgba(10,7,3,.42) 30%,
      rgba(10,7,3,.64) 56%,
      rgba(10,7,3,.92) 82%,
      rgba(10,7,3,.97) 100%
    );
  }
  .s-hero-video { filter: brightness(.58) saturate(1.03); }
  /* Header tidy (mobile): clear the fixed nav, stack & calm the eyebrow, declutter the nav */
  .s-nav { padding: 15px var(--hv-pad); }
  .s-nav .s-word { font-size: 16px; gap: 8px; }
  .s-nav .s-word .s-sub { display: none; }      /* redundant with the address bar; was colliding */
  .s-nav-right { gap: 15px; }
  .s-hero-inner { padding-top: 104px; }          /* push hero content below the fixed nav */
  .s-eyebrow {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 10.5px;
    letter-spacing: .13em;
    margin-bottom: 16px;
  }
  .s-statement { padding: 9vh 0; }
  .s-facilities { grid-template-columns: 1fr; }
  .s-markets-grid { grid-template-columns: 1fr 1fr; }
  .s-programs-grid { grid-template-columns: 1fr; }
  .s-impact-grid { grid-template-columns: 1fr; }
  .s-impact-cell:nth-child(odd) { border-right: 0; }
  .s-film-btn, .s-cta-ghost { width: 100%; justify-content: center; }
  .s-hero-cta { flex-direction: column; gap: 12px; }
  .s-footer .hv-wrap { flex-direction: column; }
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce) {
  .s-hero-video { display: none; }
  .s-tile img { transition: none; }
  .s-menu { transition: none; }
}

/* ============================================================================
   HERO PRIMARY CTA (Q2 — filled amber button for "Request access")
   ========================================================================== */
.s-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--hv-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--hv-ink);
  background: var(--hv-amber);
  border: 1px solid var(--hv-amber);
  border-radius: 2px;
  padding: 12px 24px;
  text-decoration: none;
  cursor: pointer;
  min-height: 44px; /* Q7 tap target */
  transition: background .2s, border-color .2s, color .2s;
}
.s-cta-primary:hover {
  background: var(--hv-amber-lt);
  border-color: var(--hv-amber-lt);
}
/* Ensure film button also meets tap target */
.s-film-btn {
  min-height: 44px;
}

/* ============================================================================
   RETURNS TABLE — caveat row
   ========================================================================== */
.srt-caveat {
  padding: 10px 20px;
  border-bottom: 1px solid var(--hv-line);
  background: var(--hv-bg-2);
}

/* ============================================================================
   SHARED UTILITY CLASSES (reusable by other builders)
   ========================================================================== */

/* hp-caveat: inline return projection disclaimer */
.hp-caveat {
  font-size: 11.5px !important;
  color: var(--hv-text-3) !important;
  line-height: 1.5 !important;
  font-style: italic;
  margin-bottom: 16px;
}
.s-returns-left .hp-caveat { margin-top: 10px; }

/* hp-disclaimer: persistent full-width regulatory band */
.hp-disclaimer {
  width: 100%;
  background: var(--hv-ink);
  color: rgba(255,255,255,.55);
  font-size: 11px;
  line-height: 1.65;
  letter-spacing: .01em;
  padding: 18px 0;
  border-top: 1px solid rgba(192,139,58,.25);
}
.hp-disclaimer .hv-wrap {
  max-width: var(--hv-max);
}

/* hp-role-cta: per-role deep-link block near the ask */
.hp-role-cta {
  margin-top: 28px;
  padding: 20px 24px;
  border: 1px solid var(--hv-line-2);
  border-radius: 3px;
  background: var(--hv-bg-2);
}
.hrc-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hv-text-3);
  margin-bottom: 14px;
}
.hrc-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hrc-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  min-height: 44px; /* Q7 tap target */
  background: var(--hv-bg);
  border: 1px solid var(--hv-line);
  border-radius: 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--hv-text);
  text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.hrc-link:hover {
  border-color: var(--hv-amber);
  color: var(--hv-amber);
  background: rgba(192,139,58,.04);
}
.hrc-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hv-amber);
  border: 1px solid rgba(192,139,58,.4);
  border-radius: 2px;
  padding: 2px 7px;
  flex: 0 0 auto;
}
.hrc-link .arw { margin-left: auto; }

/* ============================================================================
   LEADERSHIP STUB (C2)
   ========================================================================== */
.s-leadership {
  margin-top: 32px;
  margin-bottom: 24px;
  padding: 20px 24px;
  border: 1px solid var(--hv-line);
  border-left: 3px solid var(--hv-teal);
  border-radius: 0 3px 3px 0;
  background: var(--hv-bg-2);
}
.ssl-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hv-text-3);
  margin-bottom: 8px;
}
.ssl-text {
  font-size: 14px;
  color: var(--hv-text-2);
  line-height: 1.6;
  margin-bottom: 12px;
}
.ssl-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hv-teal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s;
}
.ssl-link:hover { border-bottom-color: var(--hv-teal); }

/* ============================================================================
   MOBILE — Q7: 5-card markets grid → single column ≤760px
            Q7: CTA tap targets ≥44px
   ========================================================================== */
@media (max-width: 760px) {
  .s-markets-grid { grid-template-columns: 1fr !important; }

  /* Ensure all interactive elements meet 44px tap target */
  .btn-primary,
  .btn-secondary,
  .s-cta-primary,
  .s-film-btn,
  .hrc-link,
  .s-ask-cta a,
  .s-ask-cta button {
    min-height: 44px;
  }
}

/* ============================================================================
   NAV on-light init (Q9) — ensure class can be set before first scroll
   The .on-light class already exists in nav styles above.
   This comment documents that interior pages should add on-light to
   the nav element server-side or via JS init before first paint.
   ========================================================================== */