:root {
    --ink: #07080c;
    --ink-2: #0d1018;
    --ink-3: #141823;
    --paper: #f4f1ea;
    --paper-warm: #ede9df;
    --silver: #8a8f9a;
    --silver-soft: #b8bcc4;
    --silver-bright: #d4d8dd;
    --silver-shadow: #6b6f78;
    --silver-metallic: linear-gradient(135deg, #e8ebef 0%, #b8bcc4 22%, #f4f1ea 50%, #8a8f9a 78%, #d4d8dd 100%);
    --silver-gradient-subtle: linear-gradient(135deg, #d4d8dd 0%, #b8bcc4 50%, #8a8f9a 100%);
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.18);
    --line-bright: rgba(37, 99, 235, 0.32);
    --line-ink: rgba(7, 8, 12, 0.10);
    --line-ink-strong: rgba(7, 8, 12, 0.22);

    /* Royal navy retained, but pushed deeper */
    --royal: #1E3A8A;
    --royal-bright: #2563EB;

    /* Primary: coral — the unified "signal" color */
    --signal: #2563EB;
    --signal-glow: rgba(37, 99, 235, 0.55);
    --signal-soft: rgba(37, 99, 235, 0.18);
    --signal-dim: rgba(37, 99, 235, 0.08);

    /* Accent variable names retained for compatibility — all resolve to coral */
    --magenta: #2563EB;
    --magenta-glow: rgba(37, 99, 235, 0.5);
    --magenta-soft: rgba(37, 99, 235, 0.18);

    --lime: #2563EB;
    --lime-glow: rgba(37, 99, 235, 0.5);
    --lime-soft: rgba(37, 99, 235, 0.18);

    --gold: #2563EB;
    --gold-bright: #60A5FA;
    --gold-deep: #1E3A8A;
    --gold-glow: rgba(37, 99, 235, 0.5);
    --gold-soft: rgba(37, 99, 235, 0.18);

    --coral: #2563EB;
    --coral-bright: #60A5FA;
    --coral-deep: #1E3A8A;
    --coral-glow: rgba(37, 99, 235, 0.5);
    --coral-soft: rgba(37, 99, 235, 0.18);

    --violet: #2563EB;
    --violet-glow: rgba(37, 99, 235, 0.5);
    --violet-soft: rgba(37, 99, 235, 0.18);

    /* Legacy warm — alias to coral so any leftover refs still work */
    --warm: #2563EB;
    --warm-soft: rgba(37, 99, 235, 0.16);

    --display: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
    --serif: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
    --sans: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
    --mono: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;

    --maxw: 1440px;
    --gutter: clamp(24px, 5vw, 80px);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  *::selection { background: var(--signal); color: var(--ink); }

  html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  body {
    background: var(--ink);
    color: var(--paper);
    font-family: var(--sans);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.55;
    overflow-x: hidden;
    /* Subtle film grain */
    position: relative;
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
  }

  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; display: block; }
  button { font-family: inherit; cursor: pointer; }

  /* ============ NAV ============ */
  nav.top {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 16px var(--gutter);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(7, 8, 12, 0.6);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    transition: padding 0.4s ease, background 0.4s ease, border-color 0.4s ease;
    border-bottom: 1px solid transparent;
  }
  nav.top.scrolled {
    padding: 12px var(--gutter);
    background: rgba(7, 8, 12, 0.92);
    border-bottom-color: var(--line);
  }

  .brand {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    position: relative;
  }
  .brand img {
    height: 54px;
    width: auto;
    display: block;
    transition: opacity 0.3s ease, height 0.4s ease;
  }
  .brand:hover img { opacity: 0.85; }
  nav.top.scrolled .brand img { height: 42px; }
  .footer-brand .brand img { height: 72px; }
  @media (max-width: 600px) {
    .brand img { height: 42px; }
    nav.top.scrolled .brand img { height: 36px; }
    .footer-brand .brand img { height: 56px; }
  }

  /* Live indicator next to brand */
  .nav-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 14px;
    padding: 4px 10px 4px 8px;
    border: 1px solid var(--line-bright);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    color: var(--signal);
    text-transform: uppercase;
  }
  .nav-live::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 8px var(--signal-glow);
    animation: pulse 1.6s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
  }
  @media (max-width: 720px) { .nav-live { display: none; } }

  .brand-wrap { display: flex; align-items: center; }

  .nav-links {
    display: flex;
    gap: 26px;
    list-style: none;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .nav-links a {
    position: relative;
    color: var(--silver-soft);
    transition: color 0.3s ease;
    padding: 8px 0;
    white-space: nowrap;
  }
  .nav-links a::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 1px;
    background: var(--signal);
    transition: width 0.3s ease;
    box-shadow: 0 0 8px var(--signal-glow);
  }
  .nav-links a:hover { color: var(--paper); }
  .nav-links a:hover::after { width: 100%; }

  .nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--signal);
    color: var(--signal);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: all 0.3s ease;
    background: transparent;
  }
  .nav-cta:hover {
    background: var(--signal);
    color: var(--ink);
    box-shadow: 0 0 24px var(--signal-glow);
  }
  .nav-cta svg { width: 12px; height: 12px; }

  .nav-toggle {
    display: none;
    background: transparent;
    border: none;
    color: var(--paper);
    padding: 8px;
  }
  @media (max-width: 1080px) {
    .nav-links, .nav-cta { display: none; }
    .nav-toggle { display: block; }
    .nav-links.open {
      display: flex;
      position: fixed;
      top: 70px; left: 0; right: 0;
      background: rgba(7, 8, 12, 0.98);
      flex-direction: column;
      padding: 32px var(--gutter);
      gap: 24px;
      border-bottom: 1px solid var(--line);
    }
  }

  /* ============ SECTION FRAMEWORK ============ */
  section, header, footer {
    position: relative;
    padding: clamp(80px, 12vw, 160px) var(--gutter);
    z-index: 2;
  }
  .container { max-width: var(--maxw); margin: 0 auto; }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--signal);
    margin-bottom: 28px;
  }
  .eyebrow::before {
    content: "";
    width: 28px; height: 1px;
    background: var(--signal);
    box-shadow: 0 0 8px var(--signal-glow);
  }

  h2.title, h1 {
    font-family: var(--display);
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.035em;
  }

  h2.title {
    font-size: clamp(40px, 6vw, 88px);
    text-transform: none;
    margin-bottom: 24px;
  }
  h2.title .accent {
    font-family: var(--serif);
    font-weight: 300;
    letter-spacing: -0.04em;
    text-transform: none;
    color: var(--signal);
  }
  h2.title strong {
    font-family: var(--display);
    font-weight: 700;
    background: linear-gradient(135deg, var(--paper) 0%, var(--signal) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .lead {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.45;
    color: var(--silver-soft);
    max-width: 640px;
    margin-bottom: 56px;
  }
  .lead .accent { color: var(--paper); }

  /* ============ HERO ============ */
  .hero {
    min-height: 100vh;
    padding-top: 140px;
    padding-bottom: 80px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
      radial-gradient(ellipse at 15% 25%, rgba(37, 99, 235, 0.16) 0%, transparent 45%),
      radial-gradient(ellipse at 85% 30%, rgba(37, 99, 235, 0.18) 0%, transparent 50%),
      radial-gradient(ellipse at 70% 90%, rgba(37, 99, 235, 0.10) 0%, transparent 55%),
      radial-gradient(ellipse at 25% 80%, rgba(37, 99, 235, 0.10) 0%, transparent 55%),
      var(--ink);
  }

  /* Network constellation canvas */
  .hero-network {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 1;
  }
  .hero-network canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
  }

  /* Grid overlay */
  .hero-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.4;
    background-image:
      linear-gradient(rgba(37, 99, 235, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(37, 99, 235, 0.05) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  }

  .hero-content {
    position: relative;
    z-index: 3;
    max-width: var(--maxw);
    margin: 0 auto;
    width: 100%;
  }

  .hero-eyebrow {
    display: block;
    margin-bottom: 56px;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #ffffff;
    /* Compensate for the letter-spacing visual shift so the first
       glyph of the eyebrow lines up with the first glyph of the
       headline directly below it (which has no letter-spacing). */
    text-indent: -0.11em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  }
  .hero-eyebrow .divider {
    width: 24px;
    height: 1px;
    background: rgba(37, 99, 235, 0.4);
  }
  .hero-eyebrow .quiet {
    color: rgba(244, 241, 234, 0.45);
    letter-spacing: 0.16em;
  }

  h1.hero-title {
    font-size: clamp(40px, 6.4vw, 96px);
    font-weight: 700;
    line-height: 1.12;
    margin-bottom: 32px;
    text-transform: none;
    /* Soft definition against the image — adds presence without
       reading as a glow. Drops the headline cleanly off the
       darker tint zone. */
    text-shadow:
      0 2px 8px rgba(0, 0, 0, 0.40),
      0 4px 28px rgba(0, 0, 0, 0.30);
  }
  h1.hero-title .line {
    display: block;
    /* No overflow:hidden, no rise animation — the headline now
       appears immediately on page load so the text is stable
       from the moment the page renders. This also eliminates
       any descender-clipping risk and any mobile alignment
       shift that the transform-based animation could introduce. */
    padding-bottom: 0.18em;
  }
  h1.hero-title .line span {
    display: inline-block;
  }

  @keyframes rise {
    to { transform: translateY(0); }
  }

  h1.hero-title .accent {
    font-family: var(--serif);
    font-weight: 300;
    text-transform: lowercase;
    letter-spacing: -0.02em;
    background: linear-gradient(110deg, var(--magenta) 0%, var(--signal) 35%, var(--lime) 70%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  h1.hero-title .outline {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: initial;
    color: var(--silver-bright);
    -webkit-text-stroke: 0;
    filter: drop-shadow(0 2px 16px rgba(212, 216, 221, 0.22));
    letter-spacing: -0.01em;
  }

  .hero-bottom {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: end;
    margin-top: 32px;
  }
  @media (max-width: 720px) {
    .hero-bottom { grid-template-columns: 1fr; }
  }

  .hero-tagline {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(22px, 2.8vw, 32px);
    line-height: 1.4;
    color: var(--paper);
    max-width: 720px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  }
  .hero-tagline .accent {
    color: var(--signal);
    font-weight: 700;
    /* Keep the three audience terms on a single line so the
       phrase reads as one continuous statement, never broken
       across two lines by viewport width. */
    white-space: nowrap;
    display: inline-block;
  }

  .hero-cta-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
  }
  @media (max-width: 720px) {
    .hero-cta-group { align-items: flex-start; }
  }

  .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 28px;
    background: var(--signal);
    color: var(--ink);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 1px solid var(--signal);
    box-shadow: 0 0 0 var(--signal-glow);
  }
  .btn-primary:hover {
    box-shadow: 0 0 32px var(--signal-glow);
    transform: translateY(-2px);
  }
  .btn-primary svg { width: 14px; height: 14px; transition: transform 0.3s ease; }
  .btn-primary:hover svg { transform: translate(2px, -2px); }

  /* ============ TICKER ============ */
  .ticker {
    position: relative;
    padding: 28px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--ink-2);
    overflow: hidden;
    z-index: 2;
  }
  .ticker-track {
    display: flex;
    gap: 56px;
    animation: scroll 40s linear infinite;
    width: max-content;
    padding-left: 56px;
  }
  .ticker:hover .ticker-track { animation-play-state: paused; }

  .ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--display);
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--paper);
    white-space: nowrap;
  }
  .ticker-item::before {
    content: "";
    width: 8px; height: 8px;
    background: var(--signal);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--signal-glow);
    flex-shrink: 0;
  }
  .ticker-item .num {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--signal);
    margin-right: 4px;
    letter-spacing: 0.1em;
  }
  .ticker-item .accent {
    font-family: var(--serif);
    font-weight: 300;
    text-transform: lowercase;
    color: var(--signal);
    letter-spacing: -0.01em;
  }

  @keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* ============ NETWORK SECTION (formerly flywheel) ============ */
  .network-section {
    background: var(--ink);
    overflow: hidden;
  }
  .network-section .container { position: relative; }

  /* System metric strip — feature band running across the full section */
  .sys-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    gap: 1px;
    background: var(--line);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin: clamp(48px, 7vh, 96px) 0 0;
  }
  @media (max-width: 880px) {
    .sys-metrics { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 560px) {
    .sys-metrics { grid-template-columns: 1fr; }
  }
  .sys-metric {
    background: var(--ink-2);
    padding: clamp(40px, 5.4vw, 72px) clamp(28px, 3vw, 44px);
    position: relative;
    transition: background 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    min-height: 200px;
  }
  @media (max-width: 880px) {
    .sys-metric {
      padding: clamp(36px, 5.5vw, 56px) clamp(24px, 4vw, 36px);
      min-height: 180px;
    }
  }
  @media (max-width: 560px) {
    .sys-metric {
      padding: 36px 28px;
      min-height: 0;
    }
  }
  .sys-metric:hover { background: var(--ink-3); }
  .sys-metric-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--silver);
    margin-bottom: 0;
  }
  .sys-metric-num {
    font-family: var(--display);
    font-size: clamp(48px, 6.4vw, 96px);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 0.95;
    color: var(--paper);
  }
  @media (max-width: 880px) {
    .sys-metric-num { font-size: clamp(54px, 9vw, 76px); }
  }
  @media (max-width: 560px) {
    .sys-metric-num { font-size: clamp(56px, 14vw, 72px); }
  }
  .sys-metric-num .accent { color: var(--signal); font-weight: 500; }
  .sys-metric-sub {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--silver);
    letter-spacing: 0.14em;
    margin-top: 4px;
    line-height: 1.5;
  }

  /* Frame the network stage so it feels intentional, not empty */
  .network-stage-wrap {
    position: relative;
    margin: 32px 0 64px;
    padding: 24px;
    border: 1px solid var(--line);
    background:
      radial-gradient(ellipse at center, rgba(37, 99, 235, 0.05) 0%, transparent 70%),
      var(--ink-2);
    overflow: hidden;
  }

  /* Side-by-side: metrics column + network stage */
  .network-split {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 24px;
    align-items: stretch;
    margin: 8px 0 32px;
  }
  @media (max-width: 1024px) {
    .network-split { grid-template-columns: 1fr; gap: 24px; }
  }
  .sys-metrics-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    align-content: stretch;
  }
  .sys-metrics-col .sys-metric {
    background: var(--ink-2);
    padding: 22px 24px;
    transition: background 0.3s ease;
  }
  .sys-metrics-col .sys-metric:hover { background: var(--ink-3); }
  .network-split .network-stage-wrap {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .network-split .network-stage {
    flex: 1;
    aspect-ratio: auto;
    min-height: 480px;
  }
  @media (max-width: 1024px) {
    .network-split .network-stage { min-height: 0; aspect-ratio: 1.4 / 1; }
  }
  .network-stage-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(37, 99, 235, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(37, 99, 235, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
  }
  .network-stage-corner {
    position: absolute;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--signal);
    z-index: 3;
  }
  .nsc-tl { top: 16px; left: 20px; }
  .nsc-tr { top: 16px; right: 20px; color: var(--silver); }
  .nsc-bl { bottom: 16px; left: 20px; color: var(--silver); }
  .nsc-br { bottom: 16px; right: 20px; }

  /* Steps with images — replaces plain text list */
  .step-flow.with-images {
    grid-template-columns: repeat(5, 1fr);
  }
  @media (max-width: 920px) { .step-flow.with-images { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .step-flow.with-images { grid-template-columns: 1fr; } }

  .step.has-image {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .step-image {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--ink-3);
  }
  .step-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: contrast(1.05) saturate(1.15) brightness(0.9);
    transition: transform 0.6s ease, filter 0.5s ease;
  }
  .step:hover .step-image img {
    transform: scale(1.05);
    filter: contrast(1.1) saturate(1.3) brightness(1);
  }
  .step-image::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(7,8,12,0.7) 100%);
    pointer-events: none;
  }
  .step-image-num {
    position: absolute;
    bottom: 10px; left: 12px;
    z-index: 2;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--signal);
  }
  .step-body {
    padding: 18px 18px 22px;
    flex: 1;
  }

  .network-header {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
    margin-bottom: 80px;
    align-items: end;
  }
  @media (max-width: 920px) {
    .network-header { grid-template-columns: 1fr; gap: 32px; }
  }
  .network-header .lead { margin-bottom: 0; }

  .network-stage {
    position: relative;
    aspect-ratio: 1.4 / 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }
  @media (max-width: 720px) {
    .network-stage { display: none; }
  }

  .network-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .net-edge {
    stroke: rgba(37, 99, 235, 0.18);
    stroke-width: 1;
    fill: none;
    transition: stroke 0.3s ease, stroke-width 0.3s ease;
  }
  .net-edge.active {
    stroke: var(--signal);
    stroke-width: 1.5;
    filter: drop-shadow(0 0 4px var(--signal-glow));
  }
  .net-edge-flow {
    stroke: var(--signal);
    stroke-width: 1.5;
    fill: none;
    stroke-dasharray: 4 8;
    animation: flow 4s linear infinite;
    opacity: 0.5;
  }
  @keyframes flow {
    to { stroke-dashoffset: -100; }
  }

  .net-node {
    cursor: pointer;
  }
  .net-node circle.outer {
    fill: var(--ink);
    stroke: rgba(37, 99, 235, 0.4);
    stroke-width: 1;
    transition: all 0.4s ease;
  }
  .net-node circle.glow {
    fill: var(--signal-soft);
    transition: all 0.4s ease;
  }
  .net-node circle.dot {
    fill: var(--signal);
    transition: all 0.4s ease;
  }
  .net-node:hover circle.outer { stroke: var(--signal); stroke-width: 2; }
  .net-node:hover circle.glow { fill: var(--signal-glow); r: 50; }
  .net-node:hover circle.dot { r: 8; filter: drop-shadow(0 0 8px var(--signal-glow)); }

  .net-node text {
    font-family: var(--display);
    font-size: 14px;
    font-weight: 600;
    fill: var(--paper);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    pointer-events: none;
    transition: fill 0.3s ease;
  }
  .net-node:hover text { fill: var(--signal); }
  .net-node text.num {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 500;
    fill: var(--signal);
    letter-spacing: 0.18em;
  }

  .net-hub circle.outer {
    fill: var(--ink-3);
    stroke: var(--signal);
    stroke-width: 2;
    filter: drop-shadow(0 0 24px var(--signal-glow));
  }
  .net-hub text.label {
    font-family: var(--display);
    font-size: 16px;
    font-weight: 700;
    fill: var(--paper);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .net-hub text.sub {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 500;
    fill: var(--signal);
    letter-spacing: 0.22em;
  }

  /* Pulsing rings around hub */
  .net-pulse {
    fill: none;
    stroke: var(--signal);
    stroke-width: 1;
    transform-origin: center;
    animation: ringPulse 3s ease-out infinite;
  }
  .net-pulse:nth-child(2) { animation-delay: 1s; }
  .net-pulse:nth-child(3) { animation-delay: 2s; }
  @keyframes ringPulse {
    0% { r: 60; opacity: 0.8; }
    100% { r: 200; opacity: 0; }
  }

  /* Mobile network fallback */
  .network-mobile {
    display: none;
    flex-direction: column;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
  }
  @media (max-width: 720px) {
    .network-mobile { display: flex; }
  }
  .nm-row {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 24px 20px;
    background: var(--ink-2);
    transition: background 0.3s ease;
  }
  .nm-row:hover { background: var(--ink-3); }
  .nm-num {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--signal);
    letter-spacing: 0.15em;
  }
  .nm-name {
    font-family: var(--display);
    font-size: 18px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.01em;
  }
  .nm-name .v { color: var(--silver); }
  .nm-arrow { color: var(--signal); font-size: 20px; }

  /* ============ INTEGRATE / WHY VECTA ============ */
  .integrate {
    background: var(--paper);
    color: var(--ink);
  }
  .integrate .eyebrow { color: var(--royal); }
  .integrate .eyebrow::before { background: var(--royal); box-shadow: none; }
  .integrate h2.title strong {
    background: linear-gradient(135deg, var(--ink) 0%, var(--royal-bright) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .integrate h2.title .accent {
    color: var(--royal);
  }
  .integrate .lead { color: rgba(7, 8, 12, 0.6); }
  .integrate .lead .accent { color: var(--ink); }

  .integrate-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-top: 64px;
  }
  @media (max-width: 920px) {
    .integrate-grid { grid-template-columns: 1fr; gap: 48px; }
  }

  .compete-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(7, 8, 12, 0.1);
  }
  .compete-row {
    display: grid;
    grid-template-columns: 60px 1fr 100px;
    gap: 24px;
    padding: 28px 0;
    border-bottom: 1px solid rgba(7, 8, 12, 0.1);
    align-items: center;
    transition: padding 0.3s ease;
  }
  .compete-row:hover { padding-left: 12px; }
  .compete-row .num {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--royal);
    letter-spacing: 0.15em;
  }
  .compete-row .name {
    font-family: var(--display);
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  .compete-row .scope {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(7, 8, 12, 0.5);
    text-align: right;
  }
  .compete-row.vecta {
    background: var(--ink);
    color: var(--paper);
    margin: 12px -16px;
    padding: 28px 16px;
    border: none;
    position: relative;
  }
  .compete-row.vecta::after {
    content: "ALL FOUR";
    position: absolute;
    top: 50%; right: 16px;
    transform: translateY(-50%);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--signal);
    background: var(--signal-soft);
    padding: 6px 10px;
    border: 1px solid var(--signal);
  }
  .compete-row.vecta .num { color: var(--signal); }
  .compete-row.vecta .name { color: var(--paper); }
  .compete-row.vecta .scope { display: none; }

  /* ============ DEEP DIVE / VERTICALS ============ */
  .deep-dive {
    background: var(--ink-2);
  }

  .dd-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-bottom: 64px;
    align-items: end;
  }
  @media (max-width: 920px) { .dd-header { grid-template-columns: 1fr; } }

  .dd-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 64px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .dd-tabs::-webkit-scrollbar { display: none; }
  .dd-tab {
    flex: 1;
    min-width: 140px;
    background: transparent;
    border: none;
    border-right: 1px solid var(--line);
    padding: 24px 20px;
    color: var(--silver);
    font-family: var(--display);
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: all 0.3s ease;
    position: relative;
    text-align: left;
  }
  .dd-tab:last-child { border-right: none; }
  .dd-tab .tnum {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--silver);
    margin-bottom: 6px;
  }
  .dd-tab:hover {
    color: var(--paper);
    background: var(--ink-3);
  }
  .dd-tab.active {
    color: var(--paper);
    background: var(--ink-3);
  }
  .dd-tab.active .tnum { color: var(--signal); }
  .dd-tab.active::after {
    content: "";
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 2px;
    background: var(--signal);
    box-shadow: 0 0 12px var(--signal-glow);
  }

  .dd-panel { display: none; }
  .dd-panel.active { display: block; }

  .dd-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 80px;
    align-items: start;
  }
  @media (max-width: 920px) { .dd-grid { grid-template-columns: 1fr; gap: 48px; } }

  .dd-mark {
    position: relative;
    aspect-ratio: 1;
    max-width: 360px;
    border: 1px solid var(--line);
    background:
      radial-gradient(ellipse at center, rgba(37, 99, 235, 0.08) 0%, transparent 70%),
      var(--ink);
    overflow: hidden;
  }
  .dd-mark::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(37, 99, 235, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(37, 99, 235, 0.04) 1px, transparent 1px);
    background-size: 30px 30px;
  }
  .dd-mark svg {
    position: absolute;
    inset: 12%;
    width: 76%;
    height: 76%;
    color: var(--signal);
  }
  .dd-num-bg {
    position: absolute;
    bottom: -30px; right: -10px;
    font-family: var(--display);
    font-size: 200px;
    font-weight: 700;
    color: var(--ink-3);
    line-height: 0.8;
    z-index: 0;
    pointer-events: none;
    letter-spacing: -0.04em;
  }
  .dd-mark-corner {
    position: absolute;
    top: 12px; left: 12px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    color: var(--signal);
    letter-spacing: 0.18em;
  }
  .dd-mark-corner-r {
    position: absolute;
    top: 12px; right: 12px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    color: var(--silver);
    letter-spacing: 0.18em;
  }

  .dd-name {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(36px, 4.4vw, 56px);
    line-height: 1;
    margin-bottom: 24px;
    text-transform: none;
    letter-spacing: -0.03em;
  }
  .dd-name .dd-vecta {
    display: block;
    font-family: var(--serif);
    font-weight: 300;
    text-transform: lowercase;
    font-size: 0.4em;
    color: var(--signal);
    letter-spacing: -0.01em;
    margin-bottom: 4px;
  }
  .dd-name strong { font-weight: 700; }

  .dd-thesis {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(20px, 2.2vw, 28px);
    line-height: 1.35;
    margin-bottom: 20px;
    color: var(--paper);
  }
  .dd-desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--silver-soft);
    margin-bottom: 40px;
    max-width: 520px;
  }

  .dd-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
  }
  @media (max-width: 600px) { .dd-pillars { grid-template-columns: repeat(2, 1fr); } }
  .dd-pillar {
    background: var(--ink-2);
    padding: 20px 16px;
    transition: background 0.3s ease;
  }
  .dd-pillar:hover { background: var(--ink-3); }
  .dd-pillar-num {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    color: var(--signal);
    margin-bottom: 8px;
    display: block;
  }
  .dd-pillar-label {
    font-family: var(--display);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  /* ============ MODEL ============ */
  .model {
    background: var(--ink);
  }
  .model-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-top: 64px;
  }
  @media (max-width: 920px) { .model-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .model-grid { grid-template-columns: 1fr; } }
  .model-cell {
    background: var(--ink-2);
    padding: 40px 32px;
    position: relative;
    transition: all 0.4s ease;
    overflow: hidden;
  }
  .model-cell::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, var(--signal), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
  }
  .model-cell:hover::before { transform: translateX(0); }
  .model-cell:hover { background: var(--ink-3); }
  .model-num {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--signal);
    letter-spacing: 0.18em;
    margin-bottom: 32px;
  }
  .model-cell h4 {
    font-family: var(--display);
    font-size: 22px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
  }
  .model-cell p {
    font-size: 14px;
    color: var(--silver-soft);
    line-height: 1.5;
  }

  /* ============ MENA ============ */
  .mena {
    background: var(--ink);
    color: var(--paper);
    position: relative;
    overflow: hidden;
  }
  .mena::before {
    content: "";
    position: absolute;
    top: -200px; right: -200px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, var(--signal-soft) 0%, transparent 70%);
    pointer-events: none;
  }
  /* MENA matches other dark sections — eyebrow, title, lead, accents all in the same palette */

  .mena-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    margin-top: 64px;
    align-items: start;
  }
  @media (max-width: 920px) { .mena-grid { grid-template-columns: 1fr; gap: 48px; } }

  .mena-pillars {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line);
  }
  .mena-pillar {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 24px;
    padding: 28px 0;
    border-bottom: 1px solid var(--line);
    align-items: center;
    transition: all 0.3s ease;
    cursor: default;
  }
  .mena-pillar:hover { padding-left: 16px; }
  .mena-pillar:hover .mena-arrow { transform: translateX(6px); color: var(--signal); }
  .mena-pillar .mp-num {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--signal);
    letter-spacing: 0.18em;
  }
  .mena-pillar h4 {
    font-family: var(--display);
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.01em;
    color: var(--paper);
  }
  .mena-arrow {
    font-size: 20px;
    color: var(--silver);
    transition: all 0.3s ease;
  }

  /* MENA stat block */
  .mena-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 48px;
  }
  .mena-stat {
    border-left: 2px solid var(--signal);
    padding-left: 20px;
  }
  .mena-stat-num {
    font-family: var(--display);
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--paper);
  }
  .mena-stat-num span { color: var(--signal); }
  .mena-stat-label {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--silver);
    margin-top: 8px;
  }

  /* ============ CONTACT ============ */
  .contact {
    background:
      radial-gradient(ellipse at 50% 100%, rgba(37, 99, 235, 0.12) 0%, transparent 60%),
      var(--ink);
    text-align: center;
    overflow: hidden;
    position: relative;
  }
  .contact::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(37, 99, 235, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(37, 99, 235, 0.04) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    pointer-events: none;
  }
  .contact .container { position: relative; z-index: 2; }
  .contact .eyebrow { justify-content: center; }
  .contact h2.title { max-width: 1100px; margin-left: auto; margin-right: auto; }
  .contact-sub {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(20px, 2vw, 26px);
    color: var(--silver-soft);
    margin-bottom: 64px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }

  .contact-channels {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    max-width: 460px;
    margin: 64px auto 32px;
  }
  @media (max-width: 880px) {
    .contact-channels {
      gap: 1px;
      max-width: 380px;
      margin-top: 48px;
    }
    .contact-channel {
      padding: 22px 16px;
    }
  }
  .contact-channel {
    background: var(--ink-2);
    padding: 26px 20px;
    transition: all 0.3s ease;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .contact-channel:hover {
    background: var(--ink-3);
  }
  .contact-channel-label {
    font-family: var(--mono);
    font-size: clamp(13px, 1.4vw, 15px);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--paper);
  }

  .contact-socials {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 0 auto;
  }
  .social-icon {
    width: 48px;
    height: 48px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--silver);
    background: var(--ink-2);
    transition: all 0.3s ease;
  }
  .social-icon:hover {
    color: var(--paper);
    border-color: var(--signal);
    background: var(--ink-3);
    transform: translateY(-2px);
  }

  /* ============ FOOTER ============ */
  footer {
    background: var(--ink-2);
    border-top: 1px solid var(--line);
    padding: 72px var(--gutter) 32px;
  }
  .footer-grid {
    max-width: var(--maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 48px;
    margin-bottom: 56px;
  }
  @media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }

  .footer-brand p {
    font-family: var(--serif);
    font-size: 16px;
    color: var(--silver);
    margin-top: 20px;
    max-width: 360px;
    line-height: 1.5;
  }

  .footer-col h5 {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--signal);
    margin-bottom: 20px;
  }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
  .footer-col a {
    color: var(--silver-soft);
    font-size: 14px;
    transition: color 0.3s ease;
  }
  .footer-col a:hover { color: var(--paper); }

  .footer-bottom {
    max-width: var(--maxw);
    margin: 0 auto;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--silver);
    flex-wrap: wrap;
    gap: 12px;
  }
  .footer-bottom .live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--signal);
  }
  .footer-bottom .live::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 8px var(--signal-glow);
    animation: pulse 1.6s ease-in-out infinite;
  }

  /* ============ REVEAL ============ */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s ease, transform 0.9s ease;
  }
  .reveal.in {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal-stagger > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal-stagger.in > * {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal-stagger.in > *:nth-child(1) { transition-delay: 0.05s; }
  .reveal-stagger.in > *:nth-child(2) { transition-delay: 0.15s; }
  .reveal-stagger.in > *:nth-child(3) { transition-delay: 0.25s; }
  .reveal-stagger.in > *:nth-child(4) { transition-delay: 0.35s; }
  .reveal-stagger.in > *:nth-child(5) { transition-delay: 0.45s; }
  .reveal-stagger.in > *:nth-child(6) { transition-delay: 0.55s; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* ============ FOOTBALL-STYLE ADDITIONS ============ */

  /* Chapter heading */
  .chapter-mark {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--signal);
    margin-bottom: 32px;
  }
  .chapter-mark .num {
    font-size: 48px;
    font-weight: 200;
    letter-spacing: -0.02em;
    color: var(--paper);
    line-height: 1;
  }
  .chapter-mark .slash {
    width: 40px; height: 1px;
    background: var(--signal);
  }
  /* On paper-bg sections, the chapter-mark num must be dark */
  .integrate .chapter-mark { color: var(--royal); }
  .integrate .chapter-mark .num { color: var(--ink); }
  .integrate .chapter-mark .slash { background: var(--royal); }

  /* Marquee ribbon - bigger, uppercase, dividers */
  .marquee {
    position: relative;
    padding: 36px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--ink-2);
    overflow: hidden;
    z-index: 2;
  }
  .marquee.bright { background: var(--paper); border-color: rgba(7,8,12,0.1); }
  .marquee-track {
    display: flex;
    gap: 56px;
    animation: scroll 50s linear infinite;
    width: max-content;
    padding-left: 56px;
  }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  .marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 56px;
    font-size: clamp(28px, 4vw, 56px);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--paper);
    white-space: nowrap;
  }
  .marquee.bright .marquee-item { color: var(--ink); }
  .marquee-item::after {
    content: "·";
    color: var(--signal);
    font-size: 1.2em;
  }
  .marquee-item .accent { color: var(--signal); font-weight: 300; }

  /* Vision-style two-column section */
  .vision-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
    align-items: start;
    margin-top: 56px;
  }
  @media (max-width: 920px) { .vision-grid { grid-template-columns: 1fr; gap: 48px; } }

  .vision-points {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--line);
  }
  .vision-point {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 24px;
    padding: 28px 0;
    border-bottom: 1px solid var(--line);
    align-items: start;
    transition: padding 0.3s ease;
  }
  .vision-point:hover { padding-left: 12px; }
  .vision-point .vp-num {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--signal);
    letter-spacing: 0.18em;
    padding-top: 6px;
  }
  .vision-point p {
    font-size: clamp(17px, 1.8vw, 22px);
    line-height: 1.4;
    color: var(--paper);
    font-weight: 400;
  }

  .pull-quote {
    border-left: 2px solid var(--signal);
    padding: 8px 0 8px 28px;
    margin-top: 48px;
  }
  .pull-quote-mark {
    font-family: var(--mono);
    font-size: 36px;
    line-height: 0.6;
    color: var(--signal);
    margin-bottom: 16px;
  }
  .pull-quote p {
    font-size: clamp(20px, 2.4vw, 30px);
    line-height: 1.35;
    font-weight: 300;
    color: var(--paper);
    max-width: 460px;
  }

  /* Step Flow - 5 stops horizontally connected by lines */
  .step-flow {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    margin-top: 64px;
    background: var(--line);
    border: 1px solid var(--line);
    position: relative;
  }
  @media (max-width: 920px) { .step-flow { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .step-flow { grid-template-columns: 1fr; } }

  .step {
    background: var(--ink-2);
    padding: 36px 28px;
    position: relative;
    transition: background 0.3s ease;
    overflow: hidden;
  }
  .step:hover { background: var(--ink-3); }
  .step::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 2px;
    background: var(--signal);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
  }
  .step:hover::before { transform: translateX(0); }
  .step-num {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--signal);
    margin-bottom: 32px;
    display: block;
  }
  .step h4 {
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    color: var(--paper);
  }
  .step p {
    font-size: 13px;
    color: var(--silver-soft);
    line-height: 1.5;
  }

  /* Programme cards (verticals) */
  .programme-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-top: 56px;
  }

  .programme-grid .featured {
    grid-column: 1 / -1;
    background: var(--ink-2);
    padding: 56px 48px;
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease;
  }
  .programme-grid .featured:hover { background: var(--ink-3); }
  .programme-grid .featured::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 200px; height: 200px;
    background: radial-gradient(circle, var(--signal-soft) 0%, transparent 70%);
    pointer-events: none;
  }
  .programme-grid .featured .featured-tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--signal);
    border: 1px solid var(--signal);
    padding: 6px 12px;
    margin-bottom: 24px;
  }
  .programme-grid .featured h3 {
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 20px;
    max-width: 720px;
  }
  .programme-grid h3 .accent { color: var(--signal); font-weight: 300; }
  .programme-grid .featured p {
    font-size: clamp(16px, 1.6vw, 19px);
    color: var(--silver-soft);
    line-height: 1.55;
    max-width: 720px;
    margin-bottom: 32px;
  }

  .programme {
    background: var(--ink-2);
    padding: 40px 36px;
    position: relative;
    transition: background 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 320px;
  }
  .programme:hover { background: var(--ink-3); }
  .programme::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 1px;
    background: var(--signal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
  }
  .programme:hover::after { transform: scaleX(1); }
  .programme-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
  }
  .programme-num {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--signal);
    letter-spacing: 0.18em;
  }
  .programme-tag {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--silver);
    text-transform: uppercase;
  }
  .programme h3 {
    font-size: clamp(26px, 2.8vw, 36px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin-bottom: 16px;
    color: var(--paper);
  }
  .programme p {
    font-size: 14px;
    color: var(--silver-soft);
    line-height: 1.55;
    margin-bottom: auto;
    padding-bottom: 28px;
  }
  .programme-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--signal);
    text-transform: uppercase;
    transition: gap 0.3s ease;
  }
  .programme:hover .programme-cta { gap: 14px; }
  .programme-cta svg { width: 12px; height: 12px; }

  /* Destinations grid (Where the Pathway Leads) */
  .dest-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-top: 56px;
  }
  @media (max-width: 920px) { .dest-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .dest-grid { grid-template-columns: 1fr; } }
  .dest {
    background: var(--ink-2);
    padding: 40px 32px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }
  .dest:hover { background: var(--ink-3); }
  .dest::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 0;
    background: var(--signal);
    transition: height 0.5s ease;
  }
  .dest:hover::before { height: 100%; }
  .dest-num {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--signal);
    margin-bottom: 32px;
    display: block;
  }
  .dest h4 {
    font-size: clamp(20px, 2vw, 24px);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    color: var(--paper);
    line-height: 1.15;
  }
  .dest p {
    font-size: 13px;
    color: var(--silver-soft);
    line-height: 1.5;
  }

  /* End-of-section quote bar */
  .end-quote {
    margin-top: 64px;
    padding: 40px;
    border: 1px solid var(--line);
    background:
      radial-gradient(ellipse at 20% 50%, var(--signal-dim) 0%, transparent 60%),
      var(--ink-2);
    text-align: center;
  }
  .end-quote p {
    font-size: clamp(20px, 2.6vw, 32px);
    font-weight: 300;
    letter-spacing: -0.02em;
    color: var(--paper);
    line-height: 1.3;
  }
  .end-quote p .accent { color: var(--signal); }

  /* Standards section (5 capabilities like Built For High Performance) */
  .standards-list {
    display: flex;
    flex-direction: column;
    margin-top: 56px;
    border-top: 1px solid var(--line);
  }
  .standard-row {
    display: grid;
    grid-template-columns: 80px 200px 1fr;
    gap: 32px;
    padding: 40px 0;
    border-bottom: 1px solid var(--line);
    align-items: start;
    transition: padding 0.3s ease;
  }
  .standard-row:hover { padding-left: 16px; }
  @media (max-width: 720px) {
    .standard-row { grid-template-columns: 1fr; gap: 12px; padding: 32px 0; }
  }
  .standard-row .s-tag {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--signal);
    padding-top: 10px;
  }
  .standard-row .s-num {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--silver);
    padding-top: 10px;
  }
  .standard-row .s-content h4 {
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
    color: var(--paper);
  }
  .standard-row .s-content p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--silver-soft);
    max-width: 640px;
  }

  /* Final-step CTA section */
  .final-step {
    text-align: center;
    background:
      radial-gradient(ellipse at 50% 100%, var(--signal-dim) 0%, transparent 60%),
      var(--ink);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .final-step .final-mark,
  .contact .final-mark {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.24em;
    color: var(--signal);
    text-transform: uppercase;
    margin-bottom: 32px;
  }
  .final-step .final-mark::before,
  .final-step .final-mark::after,
  .contact .final-mark::before,
  .contact .final-mark::after {
    content: "—";
    color: var(--signal);
  }
  .final-step h2 {
    font-size: clamp(36px, 5vw, 68px);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.05;
    max-width: 880px;
    margin: 0 auto 28px;
  }
  .final-step .accent { color: var(--signal); font-weight: 300; }
  .final-step .final-sub {
    font-size: clamp(16px, 1.6vw, 19px);
    color: var(--silver-soft);
    max-width: 640px;
    margin: 0 auto 40px;
    line-height: 1.55;
  }
  .final-cta-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 28px;
  }
  .final-step .footnote {
    font-family: var(--mono);
    font-size: 10px;
    background: var(--silver-gradient-subtle);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 28px;
    background: transparent;
    color: var(--paper);
    border: 1px solid var(--line-strong);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    transition: all 0.3s ease;
  }
  .btn-secondary:hover {
    border-color: var(--signal);
    color: var(--signal);
  }
  .btn-secondary svg { width: 12px; height: 12px; }

  /* MENA — dark section, inherits default chapter-mark styles */

  /* ============ EXCLUSIVE BAND (replaces marquee) ============ */
  /* A slower, more refined wordmark band with images. Reads as editorial, not broadcast. */
  .band {
    position: relative;
    overflow: hidden;
    background: var(--ink-2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    z-index: 2;
  }
  .band-track {
    display: flex;
    align-items: center;
    gap: 0;
    animation: bandscroll 80s linear infinite;
    width: max-content;
  }
  .band:hover .band-track { animation-play-state: paused; }
  @keyframes bandscroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  .band-word {
    flex-shrink: 0;
    padding: 16px 36px;
    font-family: var(--display);
    font-size: clamp(20px, 2.4vw, 32px);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--paper);
    white-space: nowrap;
  }
  .band-word .accent { color: var(--signal); font-weight: 500; }
  .band-word.muted { color: var(--silver); font-weight: 300; }

  .band-divider {
    flex-shrink: 0;
    width: 1px;
    height: 32px;
    background: var(--line);
    align-self: center;
  }

  .band-img {
    flex-shrink: 0;
    width: 130px;
    height: 76px;
    object-fit: cover;
    margin: 10px 16px;
    filter: contrast(1.12) saturate(1.18) brightness(0.96);
    border: 1px solid var(--line-strong);
    transition: filter 0.6s ease, transform 0.6s ease;
  }
  .band:hover .band-img { filter: contrast(1.18) saturate(1.32) brightness(1); }

  .band-mark {
    flex-shrink: 0;
    padding: 12px 24px;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    margin: 0 16px;
    align-self: center;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--signal);
  }

  /* Bright variant on paper */
  .band.bright {
    background: var(--paper);
    border-color: rgba(7,8,12,0.1);
  }
  .band.bright .band-word { color: var(--ink); }
  .band.bright .band-word.muted { color: rgba(7,8,12,0.4); }
  .band.bright .band-divider { background: rgba(7,8,12,0.12); }
  .band.bright .band-mark { color: var(--royal); border-color: rgba(7,8,12,0.12); }

  @media (max-width: 720px) {
    .band-img { width: 100px; height: 60px; margin: 8px 12px; }
    .band-word { padding: 12px 22px; }
    .band-mark { padding: 10px 16px; margin: 0 12px; }
  }

  /* ============ IMAGE TILE (used in vision, verticals, standards) ============ */
  .img-tile {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
    background: var(--ink-3);
    border: 1px solid var(--line);
  }
  .img-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s ease;
    filter: contrast(1.12) saturate(1.18) brightness(0.93);
  }
  .img-tile:hover img {
    transform: scale(1.05);
    filter: contrast(1.18) saturate(1.32) brightness(1);
  }
  .img-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(7,8,12,0.45) 80%, rgba(7,8,12,0.85) 100%);
    pointer-events: none;
  }
  .img-tile-caption {
    position: absolute;
    left: 16px; bottom: 14px; right: 16px;
    z-index: 2;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--paper);
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }
  .img-tile-caption .signal { color: var(--signal); }

  .img-tile.wide { aspect-ratio: 16/9; }
  .img-tile.square { aspect-ratio: 1; }

  /* ============ INVESTOR / PARTNER DUAL CTA ============ */
  .dual-track {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-top: 56px;
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
  }
  @media (max-width: 720px) { .dual-track { grid-template-columns: 1fr; } }

  .track-card {
    background: var(--ink-2);
    padding: 40px 32px;
    text-align: left;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    display: block;
  }
  .track-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 2px;
    background: var(--signal);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
  }
  .track-card:hover::before { transform: translateX(0); }
  .track-card:hover { background: var(--ink-3); border-color: var(--silver-bright); }

  .track-tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--signal);
    margin-bottom: 20px;
  }
  .track-card h4 {
    font-family: var(--display);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--paper);
    margin-bottom: 12px;
  }
  .track-card p {
    font-size: 14px;
    color: var(--silver-soft);
    line-height: 1.55;
    margin-bottom: 24px;
    max-width: 380px;
  }
  .track-arrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--signal);
    transition: gap 0.3s ease;
  }
  .track-card:hover .track-arrow { gap: 16px; }
  .track-arrow svg { width: 14px; height: 14px; }

  /* ============ MENA WARM (approachable) ============ */
  /* MENA gets warm amber/gold accents on a deep ink base — premium and approachable, not orange */
  :root {
    --gold: #2563EB;
    --gold-bright: #60A5FA;
    --gold-deep: #1E3A8A;
    --gold-soft: rgba(37, 99, 235, 0.16);
    --gold-glow: rgba(37, 99, 235, 0.45);
  }

  .mena {
    background:
      radial-gradient(ellipse at 80% -20%, rgba(37, 99, 235, 0.18) 0%, transparent 50%),
      radial-gradient(ellipse at 10% 110%, rgba(37, 99, 235, 0.10) 0%, transparent 55%),
      var(--ink);
  }
  .mena::before {
    background: radial-gradient(circle, var(--gold-soft) 0%, transparent 70%);
  }
  .mena .chapter-mark .num { color: var(--gold); }
  .mena .chapter-mark .slash { background: var(--gold); box-shadow: 0 0 8px var(--gold-glow); }
  .mena h2.title strong {
    background: linear-gradient(135deg, var(--paper) 0%, var(--gold-bright) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .mena h2.title .accent { color: var(--gold); }
  .mena .lead .accent { color: var(--gold-bright); }
  .mena-pillar:hover .mena-arrow { color: var(--gold); }
  .mena-pillar .mp-num { color: var(--gold); }
  .mena-stat { border-left-color: var(--gold); }
  .mena-stat-num span { color: var(--gold); }

  /* MENA hero image */
  .mena-image {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--ink-3);
  }
  .mena-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: contrast(1.15) saturate(1.22) brightness(0.92);
    transition: filter 1s ease, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .mena-image:hover img { filter: contrast(1.2) saturate(1.38) brightness(1); transform: scale(1.04); }
  .mena-image::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(7,8,12,0.4) 70%, rgba(7,8,12,0.78) 100%);
    pointer-events: none;
  }
  .mena-image-caption {
    position: absolute;
    left: 20px; right: 20px; bottom: 20px;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--paper);
  }
  .mena-image-caption .signal { color: var(--gold); }

  /* MENA grid: 3 col with image left, text right, pillars below */
  .mena-grid {
    grid-template-columns: 0.9fr 1.1fr !important;
  }
  @media (max-width: 920px) {
    .mena-grid { grid-template-columns: 1fr !important; }
  }

  /* ============ PROGRAMME CARD with image — alternating row layout ============ */
  .programme.has-image,
  .programme-grid .featured.has-image {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: row-reverse;
    height: clamp(380px, 46vh, 560px);
  }
  /* Alternate: even rows flip so image lands on the left */
  .programme.has-image:nth-child(even) {
    flex-direction: row;
  }
  .programme-img {
    position: relative;
    flex: 1 1 50%;
    aspect-ratio: auto;
    overflow: hidden;
    background: var(--ink-3);
  }
  .programme-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: contrast(1.12) saturate(1.18) brightness(0.93);
    transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s ease;
  }
  .programme:hover .programme-img img,
  .featured:hover .programme-img img {
    transform: scale(1.05);
    filter: contrast(1.18) saturate(1.28) brightness(1);
  }
  .programme-img::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(7,8,12,0.4) 75%, rgba(7,8,12,0.7) 100%);
    pointer-events: none;
  }
  .programme-body {
    flex: 1 1 50%;
    padding: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 64px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .programme.has-image .programme-body h3 {
    font-size: clamp(30px, 3.4vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin-bottom: 20px;
    max-width: 520px;
  }
  .programme.has-image .programme-body p {
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.6;
    max-width: 520px;
    margin-bottom: 32px;
    padding-bottom: 0;
  }
  .programme.has-image .programme-header { margin-bottom: 28px; }
  .programme-grid .featured.has-image .programme-body { padding: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 64px); }
  .programme-grid .featured.has-image .programme-img { aspect-ratio: auto; }

  /* Mobile / tablet: collapse to stacked column */
  @media (max-width: 880px) {
    .programme.has-image,
    .programme.has-image:nth-child(even),
    .programme-grid .featured.has-image {
      flex-direction: column;
      height: auto;
      min-height: 0;
    }
    .programme-img { aspect-ratio: 16/10; flex: none; }
    .programme-body { padding: 32px 28px; }
    .programme.has-image .programme-body h3 { font-size: clamp(26px, 6vw, 32px); }
  }

  /* Vision image collage */
  .vision-grid.with-image {
    grid-template-columns: 1.1fr 1fr;
  }
  @media (max-width: 920px) { .vision-grid.with-image { grid-template-columns: 1fr; } }

  /* ============ SECTION ACCENT OVERRIDES ============
     Each section can claim its own signature accent color by adding one of
     these classes alongside its existing class. Cyan stays the default. */

  /* Magenta — Vision */
  .accent-magenta .chapter-mark .num { color: var(--magenta); }
  .accent-magenta .chapter-mark .slash { background: var(--magenta); box-shadow: 0 0 8px var(--magenta-glow); }
  .accent-magenta .accent { color: var(--magenta) !important; }
  .accent-magenta h2.title strong {
    background: linear-gradient(135deg, var(--paper) 0%, var(--magenta) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .accent-magenta .vp-num { color: var(--magenta); }
  .accent-magenta .pull-quote-mark { color: var(--magenta); }
  .accent-magenta .pull-quote { border-left-color: var(--magenta); }
  .accent-magenta .img-tile-caption .signal { color: var(--magenta); }

  /* Lime — Verticals */
  .accent-lime .chapter-mark .num { color: var(--lime); }
  .accent-lime .chapter-mark .slash { background: var(--lime); box-shadow: 0 0 8px var(--lime-glow); }
  .accent-lime .accent { color: var(--lime) !important; }
  .accent-lime h2.title strong {
    background: linear-gradient(135deg, var(--paper) 0%, var(--lime) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .accent-lime .featured-tag { color: var(--lime); }
  .accent-lime .programme-num { color: var(--lime); }
  .accent-lime .programme-tag { color: var(--lime); border-color: var(--lime); }
  .accent-lime .programme-cta { color: var(--lime); }
  .accent-lime .programme-cta:hover { color: var(--paper); }
  .accent-lime .programme-grid .featured::before,
  .accent-lime .programme::before {
    background: linear-gradient(90deg, var(--lime), transparent);
  }
  .accent-lime h3 .accent { color: var(--lime) !important; }

  /* Gold — Outcomes */
  .accent-gold .chapter-mark .num { color: var(--gold); }
  .accent-gold .chapter-mark .slash { background: var(--gold); box-shadow: 0 0 8px var(--gold-glow); }
  .accent-gold .accent { color: var(--gold-bright) !important; }
  .accent-gold h2.title strong {
    background: linear-gradient(135deg, var(--paper) 0%, var(--gold-bright) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .accent-gold .dest-num { color: var(--gold); }
  .accent-gold .end-quote { border-left-color: var(--gold); }
  .accent-gold .end-quote .accent { color: var(--gold-bright) !important; }

  /* Coral — Standards */
  .accent-coral .chapter-mark .num { color: var(--coral); }
  .accent-coral .chapter-mark .slash { background: var(--coral); box-shadow: 0 0 8px var(--coral-glow); }
  .accent-coral .accent { color: var(--coral) !important; }
  .accent-coral h2.title strong {
    background: linear-gradient(135deg, var(--paper) 0%, var(--coral) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .accent-coral .s-num { color: var(--coral); }
  .accent-coral .s-tag { color: var(--coral); border-color: var(--coral); }

  /* Violet — Final Step */
  .accent-violet .accent { color: var(--violet) !important; }
  .accent-violet.final-step .final-mark { color: var(--violet); }
  .accent-violet.final-step .final-mark::before,
  .accent-violet.final-step .final-mark::after { color: var(--violet); }
  .accent-violet h2 .accent {
    background: linear-gradient(135deg, var(--violet) 0%, var(--magenta) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent !important;
  }

  /* Backgrounds with subtle color glow per section */
  .accent-magenta {
    background:
      radial-gradient(ellipse at 90% -10%, var(--magenta-soft) 0%, transparent 55%),
      radial-gradient(ellipse at 10% 100%, rgba(37, 99, 235, 0.06) 0%, transparent 50%),
      var(--paper);
  }
  .accent-lime {
    background:
      radial-gradient(ellipse at 5% 20%, var(--lime-soft) 0%, transparent 50%),
      radial-gradient(ellipse at 95% 80%, rgba(37, 99, 235, 0.06) 0%, transparent 50%),
      var(--ink-2);
  }
  .accent-gold-bg {
    background:
      radial-gradient(ellipse at 80% 0%, var(--gold-soft) 0%, transparent 50%),
      radial-gradient(ellipse at 10% 100%, rgba(37, 99, 235, 0.06) 0%, transparent 50%),
      var(--ink);
  }
  .accent-coral-bg {
    background:
      radial-gradient(ellipse at 0% 50%, var(--coral-soft) 0%, transparent 50%),
      radial-gradient(ellipse at 100% 0%, rgba(37, 99, 235, 0.06) 0%, transparent 50%),
      var(--ink-2);
  }
  .accent-violet-bg {
    background:
      radial-gradient(ellipse at 50% 0%, var(--violet-soft) 0%, transparent 55%),
      radial-gradient(ellipse at 50% 100%, rgba(37, 99, 235, 0.08) 0%, transparent 55%),
      var(--ink);
  }

  /* Force the .integrate (paper-bg) section to keep a touch of color in its accent */
  .integrate.accent-magenta .chapter-mark { color: var(--magenta); }
  .integrate.accent-magenta .chapter-mark .slash { background: var(--magenta); box-shadow: 0 0 8px var(--magenta-glow); }
  .integrate.accent-magenta .chapter-mark .num { color: var(--ink); }
  .integrate.accent-magenta h2.title strong {
    background: linear-gradient(135deg, var(--ink) 0%, var(--magenta) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .integrate.accent-magenta h2.title .accent { color: var(--magenta) !important; }
  .integrate.accent-magenta .vision-point .vp-num { color: var(--magenta); }
  .integrate.accent-magenta .pull-quote-mark { color: var(--magenta); }
  .integrate.accent-magenta .pull-quote { border-left: 3px solid var(--magenta); padding-left: 24px; }
  .integrate.accent-magenta .img-tile-caption .signal { color: var(--magenta); }

  /* ============ VISION PILLARS — clean 2x2 grid on paper bg ============ */
  .vision-pillars {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-top: clamp(56px, 7vw, 88px);
  }
  @media (max-width: 980px) {
    .vision-pillars { grid-template-columns: 1fr 1fr; gap: 18px; }
  }
  @media (max-width: 760px) {
    .vision-pillars { grid-template-columns: 1fr; gap: 14px; }
  }
  .vision-pillar {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(28px, 3vw, 40px) clamp(28px, 3vw, 40px) clamp(34px, 3.6vw, 48px);
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(7, 8, 12, 0.08);
    transition: background 0.4s ease, border-color 0.4s ease;
    overflow: hidden;
  }
  .vision-pillar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 56px;
    height: 2px;
    background: var(--magenta);
    transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .vision-pillar:hover {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(7, 8, 12, 0.14);
  }
  .vision-pillar:hover::before { width: 96px; }

  .vision-pillar .vp-num {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--magenta);
    letter-spacing: 0.24em;
    font-weight: 500;
    margin-top: 6px;
    padding: 0;
  }
  .vision-pillar .vp-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .vision-pillar .vp-label {
    font-family: var(--display);
    font-size: clamp(20px, 1.9vw, 24px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--ink);
    margin: 0;
  }
  .vision-pillar p {
    margin: 0;
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.6;
    color: rgba(7, 8, 12, 0.72);
    font-weight: 400;
  }
  .vision-pillar .vp-glyph {
    position: absolute;
    right: clamp(18px, 2vw, 26px);
    bottom: clamp(14px, 1.6vw, 20px);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.28em;
    color: rgba(7, 8, 12, 0.28);
    pointer-events: none;
  }

  /* ============ VISION — elite header + image refinements ============ */
  .vision-header {
    display: block;
    max-width: 1100px;
    margin: 0 0 clamp(40px, 5vw, 64px);
    position: relative;
  }
  .vision-header h2.title {
    margin-bottom: 0;
    font-size: clamp(40px, 5.6vw, 82px);
    line-height: 1.04;
    letter-spacing: -0.035em;
  }

  /* Editorial transitional statement between title and image.
     Now with a small mono eyebrow ("Our Position") and a thin
     vertical rule on the left that gives the line an anchor
     and prevents it from feeling orphaned in the white space. */
  .vision-statement {
    display: block;
    text-align: left;
    margin: clamp(40px, 5vw, 72px) 0 clamp(48px, 6vw, 80px);
    padding-left: clamp(20px, 2.4vw, 32px);
    border-left: 1px solid var(--magenta-soft);
    color: var(--ink);
    line-height: 1.2;
  }
  .vision-statement-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--magenta);
    margin-bottom: clamp(14px, 1.8vw, 24px);
  }
  .vision-statement-eyebrow .rule {
    display: inline-block;
    width: 28px;
    height: 1px;
    background: var(--magenta);
  }
  .vision-statement-body {
    display: block;
    font-weight: 300;
    font-size: clamp(22px, 2.6vw, 34px);
    letter-spacing: -0.015em;
    line-height: 1.2;
    max-width: 920px;
  }

  /* Editorial index marker above the title */
  .vision-index {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--magenta);
    margin-bottom: 28px;
  }
  .vision-index .rule {
    flex: 0 0 56px;
    height: 1px;
    background: var(--magenta);
    opacity: 0.7;
  }
  .vision-index .quiet {
    color: rgba(7, 8, 12, 0.4);
    letter-spacing: 0.22em;
  }

  /* Corner brackets — editorial framing
     Applied to .vision-image-frame (Vision/01) and .outcomes-banner (Outcomes/04) */
  .vision-image-frame .corner,
  .outcomes-banner .corner {
    position: absolute;
    width: 18px;
    height: 18px;
    z-index: 3;
    pointer-events: none;
  }
  .vision-image-frame .corner::before,
  .vision-image-frame .corner::after,
  .outcomes-banner .corner::before,
  .outcomes-banner .corner::after {
    content: "";
    position: absolute;
    background: rgba(255, 255, 255, 0.85);
  }
  .vision-image-frame .corner::before,
  .outcomes-banner .corner::before { width: 100%; height: 1.5px; }
  .vision-image-frame .corner::after,
  .outcomes-banner .corner::after  { width: 1.5px; height: 100%; }

  .vision-image-frame .corner.tl,
  .outcomes-banner .corner.tl { top: 14px; left: 14px; }
  .vision-image-frame .corner.tl::before,
  .vision-image-frame .corner.tl::after,
  .outcomes-banner .corner.tl::before,
  .outcomes-banner .corner.tl::after { top: 0; left: 0; }

  .vision-image-frame .corner.tr,
  .outcomes-banner .corner.tr { top: 14px; right: 14px; }
  .vision-image-frame .corner.tr::before,
  .vision-image-frame .corner.tr::after,
  .outcomes-banner .corner.tr::before,
  .outcomes-banner .corner.tr::after { top: 0; right: 0; }

  .vision-image-frame .corner.bl,
  .outcomes-banner .corner.bl { bottom: 14px; left: 14px; }
  .vision-image-frame .corner.bl::before,
  .vision-image-frame .corner.bl::after,
  .outcomes-banner .corner.bl::before,
  .outcomes-banner .corner.bl::after { bottom: 0; left: 0; }

  .vision-image-frame .corner.br,
  .outcomes-banner .corner.br { bottom: 14px; right: 14px; }
  .vision-image-frame .corner.br::before,
  .vision-image-frame .corner.br::after,
  .outcomes-banner .corner.br::before,
  .outcomes-banner .corner.br::after { bottom: 0; right: 0; }

  /* Image index badge — top-right of frame */
  .vision-image-index {
    position: absolute;
    top: clamp(20px, 2.6vw, 36px);
    right: clamp(44px, 5vw, 68px);
    z-index: 3;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  }

  /* Ensure programme-cta still uses signal-cyan in non-overridden sections — but lime when in lime section */
  .programme-cta {
    transition: color 0.3s ease, gap 0.3s ease;
  }

  /* Final Step CTA cards — colorize tags by section */
  .accent-violet .track-tag { color: var(--violet); }
  .accent-violet .track-arrow { color: var(--violet); }
  .accent-violet .track-card::before { background: var(--violet); }

  /* =========================================================
     v2026.2 — UNIFIED PALETTE (Standards / Coral)
     The whole site now uses the coral signal of Section 05.
     Plus: paper-white backgrounds on select sections,
     elite-mode hero & nav simplification.
     ========================================================= */

  :root {
    /* Re-route the primary signal to coral */
    --signal: var(--coral);
    --signal-glow: var(--coral-glow);
    --signal-soft: var(--coral-soft);
    --magenta: var(--coral);
    --magenta-glow: var(--coral-glow);
    --magenta-soft: var(--coral-soft);
    --lime: var(--coral);
    --lime-glow: var(--coral-glow);
    --lime-soft: var(--coral-soft);
    --gold: var(--coral);
    --gold-bright: var(--coral);
    --gold-deep: var(--coral);
    --gold-glow: var(--coral-glow);
    --gold-soft: var(--coral-soft);
    --violet: var(--coral);
    --violet-glow: var(--coral-glow);
    --violet-soft: var(--coral-soft);
  }

  /* Universal accent override — every accent class points at coral */
  .accent { color: var(--coral) !important; }
  .signal { color: var(--coral) !important; }

  .accent-magenta .chapter-mark .num,
  .accent-lime .chapter-mark .num,
  .accent-gold .chapter-mark .num,
  .accent-coral .chapter-mark .num,
  .accent-violet .chapter-mark .num,
  .integrate .chapter-mark,
  .integrate .chapter-mark .num,
  .mena .chapter-mark .num { color: var(--coral) !important; }

  .accent-magenta .chapter-mark .slash,
  .accent-lime .chapter-mark .slash,
  .accent-gold .chapter-mark .slash,
  .accent-coral .chapter-mark .slash,
  .accent-violet .chapter-mark .slash,
  .integrate .chapter-mark .slash,
  .mena .chapter-mark .slash { background: var(--coral) !important; box-shadow: 0 0 8px var(--coral-glow) !important; }

  .accent-magenta h2.title strong,
  .accent-lime h2.title strong,
  .accent-gold h2.title strong,
  .accent-coral h2.title strong,
  .accent-violet h2.title strong,
  .integrate h2.title strong,
  .mena h2.title strong {
    background: linear-gradient(135deg, currentColor 0%, var(--coral) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  /* Force the title 'currentColor' to behave: ink for paper, paper for dark */
  .integrate h2.title strong, .light-section h2.title strong {
    background: linear-gradient(135deg, var(--ink) 0%, var(--coral) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }

  /* Numbered list / step / dest accents — all coral */
  .s-num, .s-tag, .dest-num, .step-num, .vision-num,
  .accent-coral .s-num, .accent-coral .s-tag,
  .accent-gold .dest-num, .accent-lime .step-num,
  .accent-magenta .vision-num { color: var(--coral) !important; }
  .s-tag, .accent-coral .s-tag { border-color: var(--coral) !important; }

  /* End-quote / pull-quote borders */
  .end-quote, .pull-quote, .accent-gold .end-quote, .accent-magenta .pull-quote {
    border-left-color: var(--coral) !important;
  }
  .end-quote .accent, .pull-quote .accent { color: var(--coral) !important; }

  /* CTA buttons — unify to coral */
  .btn-primary {
    background: var(--coral) !important;
    color: var(--ink) !important;
    border-color: var(--coral) !important;
  }
  .btn-primary:hover {
    background: var(--paper) !important;
    color: var(--ink) !important;
  }
  .nav-cta {
    color: var(--coral) !important;
    border-color: rgba(37, 99, 235, 0.45) !important;
  }
  .nav-cta:hover {
    background: var(--coral) !important;
    color: var(--ink) !important;
  }

  /* Final-step track-card accents */
  .track-tag, .track-arrow, .accent-violet .track-tag, .accent-violet .track-arrow { color: var(--coral) !important; }
  .track-card::before, .accent-violet .track-card::before { background: var(--coral) !important; }

  /* Hero accent line + accent text */
  .hero-title .accent { color: var(--coral) !important; }
  .hero-tagline .accent { color: var(--coral) !important; }

  /* Soft section glows — replace per-section radial backgrounds with coral-tinted */
  .accent-magenta, .accent-lime,
  .accent-gold-bg, .accent-coral-bg, .accent-violet-bg {
    background:
      radial-gradient(ellipse at 0% 0%, var(--coral-soft) 0%, transparent 55%),
      radial-gradient(ellipse at 100% 100%, rgba(37, 99, 235, 0.06) 0%, transparent 50%),
      var(--ink-2) !important;
  }

  /* =========================================================
     LIGHT-MODE SECTIONS — paper-white backgrounds
     Apply to Verticals (03), MENA (06), and lift Vision (01)
     ========================================================= */
  .light-section {
    background: var(--paper) !important;
    color: var(--ink) !important;
  }
  .light-section .lead { color: rgba(7, 8, 12, 0.62) !important; }
  .light-section h2.title { color: var(--ink) !important; }
  .light-section h2.title strong {
    background: linear-gradient(135deg, var(--ink) 0%, var(--coral) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  .light-section h3, .light-section h4 { color: var(--ink) !important; }
  .light-section p, .light-section li { color: rgba(7, 8, 12, 0.72); }
  .light-section .chapter-mark { color: rgba(7, 8, 12, 0.5) !important; }
  .light-section .chapter-mark .num { color: var(--coral) !important; }

  /* Verticals card / programme tiles need contrast on white */
  .light-section .programme,
  .light-section .featured,
  .light-section .standard-row,
  .light-section .step,
  .light-section .dest {
    background: rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(7, 8, 12, 0.10) !important;
  }
  .light-section .programme h3,
  .light-section .featured h3,
  .light-section .standard-row h4,
  .light-section .step h4,
  .light-section .dest h4 { color: var(--ink) !important; }
  .light-section .programme p,
  .light-section .featured p,
  .light-section .standard-row p,
  .light-section .step p,
  .light-section .dest p { color: rgba(7, 8, 12, 0.65) !important; }

  /* MENA tweaks for paper bg */
  .mena.light-section { background: var(--paper-warm, #ede9df) !important; }
  .mena.light-section .mena-image-caption { background: rgba(255,255,255,0.92) !important; color: var(--ink) !important; }
  .mena.light-section .mena-image-caption .signal { color: var(--coral) !important; }

  /* =========================================================
     ELITE NAV — strip the busy bits
     ========================================================= */
  .nav-live { display: none !important; }
  nav.top {
    background: rgba(7, 8, 12, 0.55) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  }
  nav.top.scrolled {
    background: rgba(7, 8, 12, 0.85) !important;
    border-bottom-color: rgba(255,255,255,0.08) !important;
  }
  .nav-links { gap: 28px !important; }
  .nav-links a {
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: rgba(244, 241, 234, 0.62) !important;
  }
  .nav-links a:hover { color: var(--coral) !important; }
  .nav-cta {
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
    padding: 10px 20px !important;
  }

  /* =========================================================
     ELITE HERO — restraint mode
     Hide: stats grid, coords, scroll hint
     Keep: network canvas, eyebrow, headline, single tagline, single CTA
     ========================================================= */
  .hero-title {
    font-weight: 300 !important;
    letter-spacing: -0.02em !important;
  }
  .hero-bottom {
    margin-top: 56px !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    align-items: start !important;
  }
  .hero-tagline {
    max-width: 580px !important;
    /* Scale font with viewport so the bold audience phrase
       stays on a single line on every phone width, even
       narrow ones like iPhone SE. */
    font-size: clamp(13px, 4.2vw, 18px) !important;
    line-height: 1.55 !important;
    color: var(--paper) !important;
  }
  .hero-cta-group { gap: 0 !important; }

  /* Soften the hero grid overlay for cleaner imagery */
  .hero-grid { opacity: 0.35 !important; }
  /* Network canvas stays — image behind hero is preserved */

  /* Hide marquee bands defensively in case any survive */
  .band, .marquee { display: none !important; }

  /* =========================================================
     VECTA BLUE PALETTE — final layer
     - Primary VECTA Blue ............... #2563EB  (set via earlier vars)
     - Electric Highlight ............... #3B82F6  (interactive hovers)
     - Soft Neon Glow ................... #60A5FA  (already in gradients)
     - Dark Interface Blue .............. #1E3A8A  (deep tone, gradients)
     ========================================================= */
  :root {
    --vecta-blue: #2563EB;
    --vecta-electric: #3B82F6;
    --vecta-soft: #60A5FA;
    --vecta-deep: #1E3A8A;
  }

  /* Primary CTA: brighten background on hover with Electric Highlight */
  .btn-primary:hover {
    background: var(--vecta-electric) !important;
    border-color: var(--vecta-electric) !important;
  }

  /* Nav link hover lifts to Electric Highlight */
  .nav-links a:hover { color: var(--vecta-electric) !important; }

  /* Programme CTAs and small inline links get the same hover treatment */
  .programme-cta:hover,
  a.programme-cta:hover { color: var(--vecta-electric) !important; }

  /* Footer/contact links — hover state */
  .footer-col a:hover,
  .nav-cta:hover { color: var(--vecta-electric) !important; border-color: var(--vecta-electric) !important; }



  /* =========================================================
     MENA — full-bleed redesign over connected-globe imagery
     ========================================================= */
  .mena {
    position: relative;
    min-height: 92vh;
    padding: clamp(96px, 13vh, 160px) var(--gutter) clamp(80px, 10vh, 120px) !important;
    overflow: hidden;
    background: var(--ink);
  }
  .mena-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .mena-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    display: block;
  }
  .mena-overlay {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg,
        rgba(7,8,12,0.78) 0%,
        rgba(7,8,12,0.62) 35%,
        rgba(7,8,12,0.74) 70%,
        rgba(7,8,12,0.96) 100%),
      linear-gradient(90deg,
        rgba(7,8,12,0.45) 0%,
        rgba(7,8,12,0.0) 45%,
        rgba(7,8,12,0.0) 100%);
    pointer-events: none;
  }
  .mena .container { position: relative; z-index: 2; }

  .mena .chapter-mark { color: rgba(255,255,255,0.78) !important; }
  .mena .chapter-mark .num { color: #60A5FA !important; }
  .mena .chapter-mark .slash { background: rgba(255,255,255,0.35) !important; }

  .mena-content {
    max-width: 880px;
    margin-top: clamp(40px, 6vh, 80px);
  }
  .mena .title {
    color: #ffffff !important;
    font-size: clamp(44px, 7.4vw, 108px);
    line-height: 0.98;
    letter-spacing: -0.025em;
    font-weight: 200;
    text-shadow: 0 2px 32px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.35);
  }
  .mena .title strong { font-weight: 600; display: inline; }
  .mena .title .accent {
    color: #60A5FA !important;
    font-weight: 300;
  }
  .mena .lead {
    color: rgba(255,255,255,0.88) !important;
    max-width: 60ch;
    font-size: clamp(16px, 1.3vw, 19px);
    margin-top: 28px;
    line-height: 1.6;
    text-shadow: 0 1px 22px rgba(0,0,0,0.45);
  }

  .mena-vectors {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(20px, 3vw, 56px);
    margin-top: clamp(72px, 12vh, 140px);
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,0.20);
  }
  @media (max-width: 920px) {
    .mena-vectors { grid-template-columns: repeat(2, 1fr); gap: 28px 32px; }
  }
  @media (max-width: 540px) {
    .mena-vectors { grid-template-columns: 1fr; }
  }
  .mena-vector { display: flex; flex-direction: column; gap: 10px; }
  .mena-vector .v-num {
    font-size: 11px;
    letter-spacing: 0.24em;
    font-weight: 600;
    color: #60A5FA;
    text-transform: uppercase;
  }
  .mena-vector h4 {
    font-size: clamp(15px, 1.15vw, 19px);
    font-weight: 500;
    color: #ffffff;
    line-height: 1.35;
    margin: 0;
    letter-spacing: 0.005em;
  }

  .mena-coords {
    margin-top: clamp(64px, 9vh, 112px);
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.14);
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    background: var(--silver-gradient-subtle);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    z-index: 3;
  }

  /* =========================================================
     VERTICALS (03) — header alignment + tightened top
     ========================================================= */
  #verticals {
    padding-top: clamp(56px, 7vw, 96px) !important;
  }
  #verticals .dd-header {
    margin-bottom: 48px;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: start;
    max-width: 1100px;
  }
  #verticals .title.balance {
    font-size: clamp(44px, 6vw, 86px);
    line-height: 1;
    letter-spacing: -0.035em;
    margin: 0;
  }

  #verticals .title.balance,
  #verticals .lead.balance-lead {
    text-wrap: balance;
    -webkit-text-wrap: balance;
  }
  /* Prevent the final word from orphaning by forcing the last two
     words to stay together as a non-breaking pair. Works as a
     belt-and-braces alongside text-wrap: balance. */
  #verticals .title.balance .accent { white-space: nowrap; }

  /* =========================================================
     SECTION BRAND MARK — VECTA Sports logo, bottom-right
     ========================================================= */
  .hero,
  .integrate,
  .network-section,
  .deep-dive,
  .model,
  .mena,
  .final-step,
  .contact {
    position: relative;
  }
  .hero::after,
  .integrate::after,
  .network-section::after,
  .deep-dive::after,
  .model::after,
  .mena::after,
  .final-step::after,
  .contact::after {
    content: "";
    position: absolute;
    right: clamp(20px, 4vw, 56px);
    bottom: clamp(20px, 3vw, 36px);
    width: clamp(60px, 7.5vw, 100px);
    aspect-ratio: 480 / 238;
    background-image: url("data:image/png;base64,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");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.42;
    pointer-events: none;
    z-index: 4;
    mix-blend-mode: normal;
    transition: opacity 0.4s ease;
  }
  /* Light-bg sections: invert the white logo to ink, lower opacity slightly */
  .integrate.light-section::after,
  .deep-dive.light-section::after,
  .mena.light-section::after {
    filter: invert(1);
    opacity: 0.32;
  }
  /* Hero — slightly more subtle since the network canvas is behind it */
  .hero::after {
    opacity: 0.50;
    bottom: clamp(28px, 4vw, 56px);
  }

  /* =========================================================
     LEGIBILITY BOOST — brighter silver tones across dark sections
     ========================================================= */
  :root {
    --silver: #b3b9c4;       /* was #8a8f9a — bumped for contrast on ink */
    --silver-soft: #d8dce3;  /* was #b8bcc4 — bumped for body text on dark */
  }
  /* Tighten faint-on-dark patterns that weren't going through the variables */
  .hero-tagline,
  .network-section .lead,
  .model .lead,
  .deep-dive:not(.light-section) .lead,
  .final-step .lead,
  .contact-sub {
    color: var(--silver-soft) !important;
  }
  /* Mono labels often used for context — ensure they read */
  .sys-metric-label,
  .sys-metric-sub,
  .network-stage-corner.nsc-tr,
  .network-stage-corner.nsc-bl {
    color: var(--silver-soft) !important;
  }


  /* === Verticals (03) — darker + blue tint for palette cohesion === */
  #verticals .programme-img img {
    filter: contrast(1.05) saturate(0.8) brightness(0.62);
  }
  #verticals .programme:hover .programme-img img,
  #verticals .featured:hover .programme-img img {
    filter: contrast(1.1) saturate(0.95) brightness(0.72);
  }
  #verticals .programme-img::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(30, 58, 138, 0.42);
    pointer-events: none;
    transition: opacity 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 1;
  }
  #verticals .programme:hover .programme-img::before,
  #verticals .featured:hover .programme-img::before {
    opacity: 0.7;
  }


  /* === Vision image frame (atmospheric divider between header and pillars) === */
  .vision-image-frame {
    position: relative;
    margin: clamp(56px, 8vw, 96px) 0 clamp(64px, 9vw, 112px);
    aspect-ratio: 16/9;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--ink-3);
  }
  .vision-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    display: block;
    filter: contrast(1.05) saturate(0.85) brightness(0.7);
    transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s ease;
  }
  .vision-image-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(30, 58, 138, 0.32) 0%,
      rgba(37, 99, 235, 0.18) 55%,
      rgba(7, 8, 12, 0.55) 100%);
    pointer-events: none;
  }
  .vision-image-frame:hover img {
    transform: scale(1.02);
    filter: contrast(1.08) saturate(0.95) brightness(0.78);
  }
  .vision-image-caption {
    position: absolute;
    left: clamp(20px, 3vw, 40px);
    bottom: clamp(20px, 3vw, 40px);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.6vw, 20px);
    font-family: var(--mono);
    font-size: clamp(10px, 1vw, 12px);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
  }
  .vision-image-caption .dot {
    color: var(--royal-bright, #2563EB);
    opacity: 0.85;
  }
  @media (max-width: 720px) {
    .vision-image-frame { aspect-ratio: 4/3; }
    .vision-image-caption { gap: 8px; font-size: 10px; flex-wrap: wrap; }
    .vision-image-caption .dot { display: inline; }
  }

  /* === Outcomes banner (between lead and dest-grid) === */
  .outcomes-banner {
    position: relative;
    margin: clamp(48px, 6vw, 80px) 0 clamp(56px, 7vw, 96px);
    aspect-ratio: 24/9;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--ink-3);
  }
  .outcomes-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Slight zoom-in crop to hide the dark corner falloff in the
       source photo. The overflow: hidden on the parent does the
       cropping; transform avoids re-processing the file. */
    transform: scale(1.12);
    filter: contrast(1.05) saturate(0.78) brightness(0.62);
    transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s ease;
  }
  .outcomes-banner-overlay {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg,
        rgba(7, 8, 12, 0.35) 0%,
        rgba(30, 58, 138, 0.32) 55%,
        rgba(7, 8, 12, 0.65) 100%);
    pointer-events: none;
    z-index: 1;
  }
  .outcomes-banner:hover img {
    transform: scale(1.14);
    filter: contrast(1.08) saturate(0.88) brightness(0.7);
  }
  .outcomes-banner-meta {
    position: absolute;
    left: clamp(20px, 3vw, 44px);
    bottom: clamp(20px, 3vw, 36px);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.4vw, 18px);
    font-family: var(--mono);
    font-size: clamp(10px, 1vw, 12px);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
  }
  .outcomes-banner-meta .dot {
    color: var(--royal-bright, #2563EB);
    opacity: 0.85;
  }
  @media (max-width: 720px) {
    .outcomes-banner { aspect-ratio: 4/3; }
    .outcomes-banner-meta { gap: 8px; font-size: 10px; flex-wrap: wrap; }
  }

  /* === Belt-and-braces: no italics anywhere on the page === */
  body, body * { font-style: normal !important; }


  /* === Hero stadium backdrop (sits behind network canvas) === */
  .hero-bg-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .hero-bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
    filter: contrast(1.08) saturate(0.85) brightness(0.6);
    transform: scale(1.02);
  }
  .hero-bg-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 50% 40%, rgba(7, 8, 12, 0.35) 0%, rgba(7, 8, 12, 0.78) 78%),
      linear-gradient(180deg,
        rgba(30, 58, 138, 0.28) 0%,
        rgba(7, 8, 12, 0.48) 60%,
        rgba(7, 8, 12, 0.85) 100%);
    pointer-events: none;
  }
  @media (max-width: 720px) {
    .hero-bg-image img { filter: contrast(1.08) saturate(0.85) brightness(0.5); object-position: center center; }
  }

  /* =========================================================
     RESPONSIVE POLISH — desktop / tablet / handheld parity
     Final layer: consistent alignment, padding rhythm, and
     section breathing across all breakpoints.
     ========================================================= */

  /* Hero — soften top/bottom padding on small viewports so the
     headline doesn't get pushed off-screen on short phones. */
  @media (max-width: 720px) {
    .hero {
      padding-top: clamp(110px, 18vh, 140px) !important;
      padding-bottom: clamp(48px, 8vh, 72px) !important;
    }
    h1.hero-title { margin-bottom: 24px; }
    .hero-bottom { margin-top: 32px !important; }
  }

  /* Universal — section padding tightens predictably on phones */
  @media (max-width: 600px) {
    section, header, footer {
      padding-top: clamp(64px, 14vw, 96px);
      padding-bottom: clamp(64px, 14vw, 96px);
    }
  }

  /* 02 / System — keep "A platform — not just a portfolio." on
     a single horizontal line at all viewport sizes by allowing the
     em-dash break-line to flex naturally without forced wraps. */
  .network-section h2.title { text-wrap: balance; -webkit-text-wrap: balance; }
  @media (max-width: 600px) {
    .network-section h2.title { font-size: clamp(30px, 8.4vw, 44px); line-height: 1.06; }
  }

  /* 03 / Verticals — title uses a 3-line break on desktop; keep
     all three lines visible and balanced on phone widths too. */
  @media (max-width: 600px) {
    #verticals .title.balance {
      font-size: clamp(34px, 9vw, 52px) !important;
      line-height: 1.04 !important;
    }
    #verticals .dd-header { margin-bottom: 32px; }
  }

  /* 04 / Outcomes — end-quote splits onto two lines via <br/>;
     give it sufficient line-height on phone so the lines breathe. */
  @media (max-width: 600px) {
    .end-quote { padding: 28px 22px; margin-top: 40px; }
    .end-quote p { font-size: clamp(17px, 5vw, 22px); line-height: 1.45; }
  }

  /* 06 / Region — vector grid: 4 → 2 → 1, and centre the closing
     "MENA · Globally Connected" inscription across all sizes. */
  @media (max-width: 540px) {
    .mena-vectors {
      grid-template-columns: 1fr;
      gap: 22px;
      margin-top: clamp(48px, 9vh, 80px);
    }
    .mena-coords {
      margin-top: clamp(48px, 8vh, 80px);
      letter-spacing: 0.24em;
      font-size: 10px;
    }
  }

  /* Final Step — already smaller; tighten on phone so the dual-track
     stack feels considered, not like two cards floating in space. */
  @media (max-width: 720px) {
    .final-step h2 { font-size: clamp(30px, 7.5vw, 42px) !important; }
    .dual-track { gap: 16px; }
    .track-card { padding: 32px 24px; }
  }

  /* 07 / Connect — keep the heading on a single line on phones. */
  @media (max-width: 600px) {
    .contact h2.title {
      font-size: clamp(20px, 6.6vw, 32px);
      white-space: nowrap;
      letter-spacing: -0.02em;
    }
  }

/* =========================================================
   Light silver background — Vision (01) and Verticals (03)
   Targets sections by ID so MENA (which also uses
   .light-section) keeps its existing paper background.
   ========================================================= */
#vision.light-section,
#verticals.light-section,
#standards.light-section {
  background: #e5e7eb !important;
  background-image:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.4) 0%,
      rgba(229, 231, 235, 0) 35%,
      rgba(229, 231, 235, 0) 65%,
      rgba(209, 213, 219, 0.5) 100%) !important;
}


/* =========================================================
   Hide bottom-right section brand mark on Hero and on the
   "The Final Step" contact section.
   ========================================================= */
.hero::after,
.contact::after {
  display: none !important;
}


/* =========================================================
   "Launchpad" in section 06 / The Region — match the solid
   bright silver used for "One System" in the hero.
   Higher specificity than the existing .mena h2.title strong
   rules, so this wins without touching them.
   ========================================================= */
section.mena h2.title strong {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--silver-bright) !important;
  color: var(--silver-bright) !important;
  filter: drop-shadow(0 2px 16px rgba(212, 216, 221, 0.22));
}


/* =========================================================
   06 / The Region — fix alignment of the 4 vector headings
   and balance the lines above and below them.
   ========================================================= */
.mena-vectors {
  /* Tighter, equal vertical breathing room above and below */
  margin-top: clamp(56px, 8vh, 96px) !important;
  padding-top: clamp(32px, 4vh, 48px) !important;
  padding-bottom: clamp(32px, 4vh, 48px);
  /* Bottom line baked in — symmetric with the top line */
  border-bottom: 1px solid rgba(255, 255, 255, 0.20);
}

/* Each cell becomes a uniform-height card with the heading
   vertically centered, so wrap differences stop creating
   a ragged baseline across the four columns. */
.mena-vector {
  justify-content: center;     /* center the h4 vertically  */
  align-items: flex-start;     /* keep text left-aligned    */
  min-height: clamp(48px, 5vw, 64px);
}

/* Make multi-line headings wrap into balanced shapes
   ("A High-Investment / Environment" rather than
   "A High-Investment Environment / " with a lone word). */
.mena-vector h4 {
  text-wrap: balance;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* The .mena-coords block sits below now without a duplicate
   line — the bottom line is on .mena-vectors itself. */
.mena-coords {
  border-top: none !important;
  margin-top: clamp(48px, 6vh, 80px) !important;
  padding-top: 0 !important;
}


/* =========================================================
   06 / The Region — blue arrow before each vector heading
   ========================================================= */
.mena-vector h4 {
  position: relative;
  padding-left: 26px;
}

.mena-vector h4::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: #60A5FA;            /* matches the soft blue accent already used in this section */
  font-weight: 700;
  font-size: 1.1em;
  line-height: 1.35;         /* match h4 line-height so it sits on the first text line */
  text-shadow: 0 0 12px rgba(96, 165, 250, 0.35);  /* subtle glow to feel premium */
}


/* =========================================================
   Verticals (03) — every programme image gets the same
   treatment: no heavy navy-blue overlay, a soft Vision-style
   gradient fade, and matching brightness/saturation. Applies
   to all five cards (Media, Talent, Connect, Experiences,
   Pathways) so they read as a coherent set.
   ========================================================= */

#verticals .programme .programme-img img {
  filter: contrast(1.08) brightness(0.78) sepia(1) saturate(2.2) hue-rotate(195deg) !important;
}
#verticals .programme:hover .programme-img img {
  filter: contrast(1.12) brightness(0.85) sepia(1) saturate(2.4) hue-rotate(195deg) !important;
}

/* Kill the flat navy overlay that was on every card */
#verticals .programme .programme-img::before {
  background: transparent !important;
}

/* Vision-style top-to-bottom navy → royal-blue → ink fade */
#verticals .programme .programme-img::after {
  background: linear-gradient(
    180deg,
    rgba(30, 58, 138, 0.32) 0%,
    rgba(37, 99, 235, 0.18) 55%,
    rgba(7, 8, 12, 0.55) 100%
  ) !important;
}


/* =========================================================
   02 / Talent — the source image is now a near-square
   composition with the FCB badge already dead-centered, so
   default center-center cropping is fine. No object-position
   override needed anymore.
   ========================================================= */


/* =========================================================
   Verticals (03) — same corner brackets as the Vision frame
   and Outcomes banner, applied to every programme-img card.
   Sits at z-index 3 so it stays above the gradient fade.
   ========================================================= */
#verticals .programme-img .corner {
  position: absolute;
  width: 18px;
  height: 18px;
  z-index: 3;
  pointer-events: none;
}
#verticals .programme-img .corner::before,
#verticals .programme-img .corner::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.85);
}
#verticals .programme-img .corner::before { width: 100%; height: 1.5px; }
#verticals .programme-img .corner::after  { width: 1.5px; height: 100%; }

#verticals .programme-img .corner.tl { top: 14px; left: 14px; }
#verticals .programme-img .corner.tl::before,
#verticals .programme-img .corner.tl::after { top: 0; left: 0; }

#verticals .programme-img .corner.tr { top: 14px; right: 14px; }
#verticals .programme-img .corner.tr::before,
#verticals .programme-img .corner.tr::after { top: 0; right: 0; }

#verticals .programme-img .corner.bl { bottom: 14px; left: 14px; }
#verticals .programme-img .corner.bl::before,
#verticals .programme-img .corner.bl::after { bottom: 0; left: 0; }

#verticals .programme-img .corner.br { bottom: 14px; right: 14px; }
#verticals .programme-img .corner.br::before,
#verticals .programme-img .corner.br::after { bottom: 0; right: 0; }

/* All Verticals images get the same blue colorize on hover */
#verticals .programme:hover .programme-img img {
  filter: contrast(1.12) brightness(0.85) sepia(1) saturate(2.4) hue-rotate(195deg) !important;
}


/* =========================================================
   06 / The Region — apply the same blue colorize filter that
   runs across the five Verticals images, so the orange-glow
   network photo becomes a deep monochromatic blue and reads
   as one consistent visual family with the rest of the site.
     - sepia(1) → strips the orange and applies a warm cast
     - hue-rotate(195deg) → shifts the warm cast to deep blue
     - saturate(2.2) → intensifies the resulting blue
     - contrast/brightness → keep the moody atmosphere
   ========================================================= */
.mena-bg img {
  filter: contrast(1.08) brightness(0.78) sepia(1) saturate(2.2) hue-rotate(195deg) !important;
}


/* =========================================================
   04 / Outcomes — banner aspect ratio updated to match the
   new globe image (16/9 source, 640x360). The original 24/9
   letterbox was wider than the image and would have cropped
   the top and bottom of the globe under object-fit: cover.
   16/9 lets the entire globe display without any cropping.
   ========================================================= */
.outcomes-banner {
  aspect-ratio: 16 / 9 !important;
}


/* =========================================================
   Typography normalization — align section titles and lead
   paragraphs to canonical sizing across the page.

   Default canonical sizes from the base h2.title and .lead
   rules at the top of the stylesheet:
     h2.title: clamp(40px, 6vw, 88px)
     .lead:    clamp(18px, 2vw, 24px)

   The MENA / Region section was previously running larger
   on the title (108px max) and smaller on the lead (19px max)
   — bringing both into line with the rest of the page.
   ========================================================= */
.mena .title {
  font-size: clamp(40px, 6vw, 88px) !important;
}
.mena .lead {
  font-size: clamp(18px, 2vw, 24px) !important;
}


/* =========================================================
   03 / Verticals — stack the descriptor tag UNDERNEATH the
   programme number rather than across from it.
   E.g. "01 / Media" with "VISIBILITY INFRASTRUCTURE" below
   it, instead of being on opposite sides of the header row.
   ========================================================= */
.programme-header {
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 8px;
}
.programme-tag {
  /* Slight visual weight so the descriptor reads as a clear
     subhead beneath the number, not just a stray label. */
  font-weight: 500;
  letter-spacing: 0.22em;
}


/* =========================================================
   SCROLL PROGRESS BAR — fine line at top of viewport
   ========================================================= */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 1000;
  background: rgba(37, 99, 235, 0.1);
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--signal) 0%, #60A5FA 100%);
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.5);
  transition: width 0.05s linear;
}


/* =========================================================
   PROOF / BY THE NUMBERS — between Verticals and Outcomes.
   Quiet typographic block; no images.
   ========================================================= */
.proof {
  padding: clamp(80px, 10vh, 140px) var(--gutter);
  background: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.proof .container { max-width: var(--maxw); margin: 0 auto; }
.proof-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: clamp(40px, 5vw, 64px);
  text-align: center;
}
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 56px);
}
@media (max-width: 900px) {
  .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
}
@media (max-width: 480px) {
  .proof-grid { grid-template-columns: 1fr; gap: 36px; }
}
.proof-stat { text-align: center; }
.proof-num {
  font-family: var(--display);
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--paper);
  margin-bottom: 12px;
}
.proof-num .accent { color: var(--signal); font-weight: 300; }
.proof-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver-bright);
  margin-bottom: 8px;
}
.proof-sub {
  font-size: 13px;
  color: rgba(212, 216, 221, 0.6);
  line-height: 1.45;
  max-width: 220px;
  margin: 0 auto;
}


/* =========================================================
   PARTNERS / TRUSTED BY STRIP — placeholder logo slots
   ========================================================= */
.partners {
  padding: clamp(64px, 8vh, 96px) var(--gutter);
  background: var(--ink);
}
.partners .container { max-width: var(--maxw); margin: 0 auto; }
.partners-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--silver);
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.partners-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(20px, 2.5vw, 40px);
  align-items: center;
}
@media (max-width: 900px) {
  .partners-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
  .partners-grid { grid-template-columns: repeat(2, 1fr); }
}
.partner-slot {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(212, 216, 221, 0.4);
  transition: border-color 0.3s ease, color 0.3s ease;
}
.partner-slot:hover {
  border-color: rgba(37, 99, 235, 0.4);
  color: rgba(212, 216, 221, 0.7);
}


/* =========================================================
   NEWSLETTER FORM — sits inside the contact section
   ========================================================= */
.newsletter {
  margin: clamp(40px, 5vw, 64px) auto 0;
  max-width: 480px;
  text-align: center;
}
.newsletter-hidden { position: absolute; left: -9999px; opacity: 0; }
.newsletter-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver-bright);
  margin-bottom: 14px;
}
.newsletter-row {
  display: flex;
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.3s ease, background 0.3s ease;
}
.newsletter-row:focus-within {
  border-color: rgba(37, 99, 235, 0.6);
  background: rgba(37, 99, 235, 0.05);
}
.newsletter-row input {
  flex: 1;
  padding: 12px 18px;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
}
.newsletter-row input::placeholder { color: rgba(212, 216, 221, 0.4); }
.newsletter-row button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: var(--signal);
  color: #ffffff;
  border: 0;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}
.newsletter-row button:hover {
  background: #1d4fd9;
  transform: translateX(1px);
}
.newsletter-note {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(212, 216, 221, 0.4);
}


/* =========================================================
   02 / The System — proof grid spacing now that it lives
   inside the System section (previously had its own padded
   section wrapper). Adds breathing room below the chapter
   mark and before the next section.
   ========================================================= */
.network-section .proof-grid {
  margin-top: clamp(48px, 6vw, 80px);
  margin-bottom: clamp(40px, 5vw, 64px);
}


/* =========================================================
   The Final Step — extra breathing room and a proper mobile
   layout for the newsletter form.
   ========================================================= */

/* More vertical space throughout the contact section so it
   doesn't feel cramped when the newsletter form is included */
.contact .contact-channels {
  margin-top: clamp(56px, 7vw, 88px) !important;
  margin-bottom: clamp(32px, 4vw, 48px) !important;
}
.contact .newsletter {
  margin-top: clamp(32px, 4vw, 48px) !important;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.contact .contact-socials {
  margin-top: clamp(32px, 4vw, 48px) !important;
}

/* Mobile newsletter — stack input above button so neither
   gets cramped on narrow screens. The pill becomes a
   rounded-rectangle column layout. */
@media (max-width: 520px) {
  .newsletter {
    max-width: 320px;
  }
  .newsletter-label {
    font-size: 10px;
    letter-spacing: 0.20em;
  }
  .newsletter-row {
    flex-direction: column;
    border-radius: 14px;
    gap: 6px;
    padding: 6px;
  }
  .newsletter-row input {
    text-align: center;
    padding: 14px 14px;
    font-size: 14px;
  }
  .newsletter-row button {
    width: 100%;
    justify-content: center;
    border-radius: 10px;
    padding: 13px 20px;
    font-size: 11px;
  }
  .newsletter-note {
    margin-top: 14px;
    font-size: 9px;
    letter-spacing: 0.16em;
  }
}


/* =========================================================
   HERO ENHANCEMENTS
   Scroll cue — animated indicator at bottom-center,
   gentle pulse downward to invite scroll
   ========================================================= */

/* --- Scroll cue --- */
.scroll-cue {
  position: absolute;
  bottom: clamp(24px, 4vh, 44px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(212, 216, 221, 0.55);
  transition: color 0.3s ease, transform 0.3s ease;
  /* Initial fade-in after page load so it doesn't compete
     with the hero text on first impression */
  animation: scrollCueFadeIn 1.2s ease 1.6s both;
}
.scroll-cue:hover {
  color: var(--signal);
  transform: translateX(-50%) translateY(2px);
}
.scroll-cue-label {
  display: inline-block;
}

/* The animated line — a 40px vertical track with a small
   travelling pulse that loops downward */
.scroll-cue-line {
  position: relative;
  display: inline-block;
  width: 1px;
  height: 40px;
  background: rgba(212, 216, 221, 0.18);
  overflow: hidden;
}
.scroll-cue-line::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  width: 1px;
  height: 8px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--signal) 50%,
    #60A5FA 100%
  );
  box-shadow: 0 0 6px rgba(37, 99, 235, 0.6);
  animation: scrollCuePulse 2s ease-in-out infinite;
}

@keyframes scrollCuePulse {
  0%   { top: -8px;  opacity: 0; }
  20%  {              opacity: 1; }
  80%  {              opacity: 1; }
  100% { top: 40px; opacity: 0; }
}

@keyframes scrollCueFadeIn {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Hide the cue once user has scrolled past hero (small fade
   so it doesn't snap away). On mobile the hero is shorter,
   so we hide the cue on very small screens to save space. */
@media (max-width: 520px) {
  .scroll-cue {
    bottom: 18px;
    gap: 8px;
    font-size: 9px;
    letter-spacing: 0.22em;
  }
  .scroll-cue-line { height: 28px; }
  @keyframes scrollCuePulse {
    0%   { top: -6px;  opacity: 0; }
    20%  {              opacity: 1; }
    80%  {              opacity: 1; }
    100% { top: 28px; opacity: 0; }
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .scroll-cue,
  .scroll-cue-line::before {
    animation: none;
  }
  .scroll-cue-line::before {
    top: 14px;
    opacity: 1;
  }
}


/* =========================================================
   HERO IMAGE — fills the whole hero section. A single
   uniform overlay sits on top with a touch more darkness
   behind the headline area so the typography reads cleanly.

   Layer order (back to front):
     0. .hero-image img           — image, object-fit: cover
     1. .hero-image::after        — uniform tint + headline darkening
     2. .hero-grid                — existing grid pattern
     3. .hero-content             — headline + tagline
     4. .hero::after              — section logo mark
   ========================================================= */
.hero-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keep the original image brightness — no darkening filter.
     Readability comes from the overlay below, not from suppressing
     the source image. */
  filter: brightness(1.0) saturate(1.0) contrast(1.02);
  /* Subtle Ken Burns slow zoom — adds atmospheric motion to the
     otherwise static hero. Alternates so it doesn't snap back. */
  animation: hero-ken-burns 28s ease-in-out infinite alternate;
  transform-origin: center center;
}

@keyframes hero-ken-burns {
  from { transform: scale(1.0); }
  to   { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-image img { animation: none; }
}

/* Uniform readability overlay. Mostly flat, with a slightly
   stronger band in the vertical middle where the headline
   sits — enough to make "One Platform / one network /
   One System." pop, not enough to look like a vignette. */
.hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(7, 8, 12, 0.60) 0%,
      rgba(7, 8, 12, 0.47) 18%,
      rgba(7, 8, 12, 0.60) 45%,
      rgba(7, 8, 12, 0.60) 60%,
      rgba(7, 8, 12, 0.47) 82%,
      rgba(7, 8, 12, 0.63) 100%),
    /* Stronger brand-blue wash — makes the hero read distinctly bluer */
    rgba(37, 99, 235, 0.18);
  pointer-events: none;
}

/* Mobile — slightly stronger darkening so the compressed
   headline still reads cleanly on phones */
@media (max-width: 720px) {
  .hero-image img {
    filter: brightness(0.95) saturate(1.0) contrast(1.02);
  }
  .hero-image::after {
    background:
      linear-gradient(180deg,
        rgba(7, 8, 12, 0.67) 0%,
        rgba(7, 8, 12, 0.55) 18%,
        rgba(7, 8, 12, 0.67) 45%,
        rgba(7, 8, 12, 0.67) 60%,
        rgba(7, 8, 12, 0.55) 82%,
        rgba(7, 8, 12, 0.70) 100%),
      rgba(37, 99, 235, 0.18);
  }
}


/* =========================================================
   VECTA brand mark — every visible "VECTA" word gets the
   same treatment: bold + brand blue. !important ensures
   it overrides context-specific .accent rules elsewhere.
   ========================================================= */
.vecta-mark {
  color: var(--signal) !important;
  font-weight: 700 !important;
}


/* =========================================================
   HERO LIVE INDICATOR — top-right corner of the hero,
   sits below the fixed nav. Pulsing blue dot + label,
   matches the brand's status-indicator language.
   ========================================================= */
.hero-live {
  position: absolute;
  top: clamp(110px, 13vh, 150px);
  right: clamp(20px, 4vw, 56px);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal);
  pointer-events: none;
}
.hero-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.85);
  animation: pulse 1.6s ease-in-out infinite;
}

/* Mobile — slightly smaller, positioned tighter to the
   collapsed nav */
@media (max-width: 720px) {
  .hero-live {
    top: 90px;
    right: 20px;
    font-size: 10px;
    letter-spacing: 0.18em;
    gap: 8px;
  }
  .hero-live-dot { width: 6px; height: 6px; }
}




/* =========================================================
   STANDARDS section — when in accent-magenta context, the
   numbered tags and labels should follow the magenta accent
   to match the Vision section's color scheme. Overrides the
   hard-coded coral rule that targets .s-num / .s-tag globally.
   ========================================================= */
.accent-magenta .s-num,
.accent-magenta .s-tag {
  color: var(--magenta) !important;
}
.accent-magenta .s-tag {
  border-color: var(--magenta) !important;
}

/* The lead text "Built for scale." has the .accent class on
   "scale." — accent-magenta already colors that magenta.
   No additional rule needed. */


/* =========================================================
   STANDARDS — 5 vision-pillar boxes in a balanced layout.
   Vision has 3 boxes which fits a 3-col grid perfectly. With 5,
   we use a 6-col grid: row 1 has 3 boxes spanning 2 cols each,
   row 2 has 2 boxes spanning 3 cols each so it fills cleanly
   instead of leaving an empty cell.
   ========================================================= */
@media (min-width: 981px) {
  #standards .vision-pillars {
    grid-template-columns: repeat(6, 1fr);
  }
  #standards .vision-pillar {
    grid-column: span 2;
  }
  #standards .vision-pillar:nth-child(4),
  #standards .vision-pillar:nth-child(5) {
    grid-column: span 3;
  }
}


/* =========================================================
   FILM GRAIN / NOISE OVERLAY on hero and key imagery
   Inline SVG noise via fractalNoise filter, very low opacity
   (~3.5%) so it reads as photographic texture rather than as
   a visible effect. Disguises compression artifacts and gives
   the imagery a tactile, less-digital quality.
   ========================================================= */
.hero-image::before,
.vision-image-frame::before,
.outcomes-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 300px 300px;
}


/* =========================================================
   SECTION TRANSITION BLEEDS
   Each section gets a thin gradient at its top edge that bleeds
   the previous section's background color in, so dark→light
   and light→dark transitions feel like a continuous scroll
   rather than a stack of distinct color blocks.
   ========================================================= */

/* Generic baseline: every section is position:relative so
   pseudo-elements anchor correctly. Already mostly true via
   base section rule but reasserted for safety. */
section, header { position: relative; }

/* Light-section coming after a dark one (the most common
   transition on this page: hero → vision, verticals → outcomes
   → standards, etc.). The light section's top edge gets a dark
   bleed fading down. */
.light-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 140px;
  background: linear-gradient(
    to bottom,
    rgba(7, 8, 12, 0.55) 0%,
    rgba(7, 8, 12, 0.18) 45%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Dark section coming after a light one — the dark section's
   top edge gets a light bleed fading down. */
.deep-dive:not(.light-section)::before,
.network-section:not(.light-section)::before,
.contact::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 140px;
  background: linear-gradient(
    to bottom,
    rgba(229, 231, 235, 0.10) 0%,
    rgba(229, 231, 235, 0.04) 45%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Hero stays untouched at top (page start, no previous section
   to bleed from). */
.hero::before { display: none; }

/* Make sure section content sits above the transition layer */
section > .container,
section > * {
  position: relative;
  z-index: 2;
}


/* =========================================================
   CUSTOM CURSOR
   A small tracked ring that follows the mouse on key
   interactive elements (programme cards, CTAs, channels,
   nav links, social icons). Default cursor stays on body
   text, form inputs, and other non-pointer surfaces.
   ========================================================= */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--signal);
  background: rgba(37, 99, 235, 0.08);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
              background 0.18s ease,
              border-color 0.18s ease;
  mix-blend-mode: difference;
}
.custom-cursor.active {
  transform: translate(-50%, -50%) scale(1);
}
.custom-cursor.click {
  transform: translate(-50%, -50%) scale(0.7);
  background: rgba(37, 99, 235, 0.3);
}

/* Hide default cursor on the elements that get the custom one */
.programme,
.programme-cta,
.contact-channel,
.brand,
.nav-link,
.cta-pill,
.social-link,
.vision-pillar,
.mena-pillar,
.outcomes-banner,
.vertical-node {
  cursor: none !important;
}
.programme *,
.programme-cta *,
.contact-channel *,
.brand *,
.nav-link *,
.cta-pill *,
.social-link *,
.vision-pillar *,
.mena-pillar *,
.outcomes-banner *,
.vertical-node * {
  cursor: none !important;
}

/* Disable custom cursor on touch devices — pointer:fine ensures
   it only runs on mouse-equipped devices */
@media (hover: none) or (pointer: coarse) {
  .custom-cursor { display: none !important; }
  .programme, .programme-cta, .contact-channel,
  .brand, .nav-link, .cta-pill, .social-link,
  .vision-pillar, .mena-pillar, .outcomes-banner,
  .vertical-node { cursor: auto !important; }
  .programme *, .programme-cta *, .contact-channel *,
  .brand *, .nav-link *, .cta-pill *, .social-link *,
  .vision-pillar *, .mena-pillar *, .outcomes-banner *,
  .vertical-node * { cursor: auto !important; }
}


/* =========================================================
   INTERACTIVE VERTICALS NETWORK DIAGRAM
   Visualizes the 5 verticals as a pentagon connected through
   a central VECTA hub. Edges carry traveling pulse dashes
   that loop continuously. Hovering a node lifts it and
   brightens its 2 connected edges (the spoke to hub + the
   two ring edges to adjacent verticals).
   ========================================================= */
.verticals-network {
  margin: clamp(40px, 5vw, 72px) auto clamp(56px, 7vw, 96px);
  max-width: 640px;
  text-align: center;
}
.verticals-network-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 0;
}
.verticals-network-label .rule {
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: rgba(37, 99, 235, 0.35);
}

.verticals-diagram {
  width: 100%;
  height: auto;
  max-width: 560px;
  display: block;
  margin: 0 auto;
  overflow: visible;
}

/* Edges — translucent baseline with stroke-dasharray for the
   traveling-pulse effect */
.diagram-edges line {
  stroke: var(--signal);
  stroke-width: 1;
  stroke-opacity: 0.22;
  stroke-dasharray: 3 18;
  stroke-dashoffset: 0;
  animation: edge-pulse 6s linear infinite;
}
.diagram-spokes line { stroke-opacity: 0.30; }

/* Staggered animation delays so pulses don't move in lockstep */
.diagram-ring line:nth-child(1) { animation-delay: 0s; }
.diagram-ring line:nth-child(2) { animation-delay: 0.8s; }
.diagram-ring line:nth-child(3) { animation-delay: 1.6s; }
.diagram-ring line:nth-child(4) { animation-delay: 2.4s; }
.diagram-ring line:nth-child(5) { animation-delay: 3.2s; }
.diagram-spokes line:nth-child(1) { animation-delay: 0.4s; }
.diagram-spokes line:nth-child(2) { animation-delay: 1.2s; }
.diagram-spokes line:nth-child(3) { animation-delay: 2.0s; }
.diagram-spokes line:nth-child(4) { animation-delay: 2.8s; }
.diagram-spokes line:nth-child(5) { animation-delay: 3.6s; }

@keyframes edge-pulse {
  to { stroke-dashoffset: -210; }
}

/* Edges become brighter when a connected node is hovered */
.diagram-edges line.is-active {
  stroke-opacity: 0.85;
  stroke-width: 1.5;
  transition: stroke-opacity 0.3s ease, stroke-width 0.3s ease;
}

/* Center hub (VECTA orchestrator) */
.diagram-hub .hub-ring {
  fill: none;
  stroke: var(--signal);
  stroke-width: 1.5;
  stroke-opacity: 0.4;
}
.diagram-hub .hub-fill {
  fill: var(--signal);
  filter: drop-shadow(0 0 10px rgba(37, 99, 235, 0.6));
}
.diagram-hub .hub-label {
  fill: #fff;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Vertical nodes — circular pulses with labels */
.vertical-node {
  cursor: pointer;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-origin: center;
  transform-box: fill-box;
}
.vertical-node .node-ring {
  fill: none;
  stroke: var(--signal);
  stroke-width: 1.5;
  stroke-opacity: 0.35;
  transition: stroke-opacity 0.3s ease;
}
.vertical-node .node-fill {
  fill: var(--paper);
  stroke: var(--signal);
  stroke-width: 1.5;
  transition: fill 0.3s ease, filter 0.3s ease;
}
.vertical-node .node-label {
  fill: rgba(7, 8, 12, 0.7);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: fill 0.3s ease;
}
.vertical-node:hover .node-fill,
.vertical-node.is-hovered .node-fill {
  fill: var(--signal);
  filter: drop-shadow(0 0 12px rgba(37, 99, 235, 0.65));
}
.vertical-node:hover .node-ring,
.vertical-node.is-hovered .node-ring {
  stroke-opacity: 0.8;
}
.vertical-node:hover .node-label,
.vertical-node.is-hovered .node-label {
  fill: var(--ink);
}
.vertical-node:hover,
.vertical-node.is-hovered {
  /* SVG scale needs transform-origin precision per node */
}

/* Subtle ambient pulse on the hub */
.diagram-hub .hub-fill {
  animation: hub-pulse 2.4s ease-in-out infinite;
}
@keyframes hub-pulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.5)); }
  50%      { filter: drop-shadow(0 0 16px rgba(37, 99, 235, 0.85)); }
}

/* Mobile — the diagram stays useful but compressed */
@media (max-width: 720px) {
  .verticals-diagram { max-width: 100%; }
  .vertical-node .node-label { font-size: 9px; letter-spacing: 0.14em; }
}


/* =========================================================
   Disabled / pending social icon — visually identical but
   not clickable. Used for LinkedIn until the page goes live.
   ========================================================= */
.social-icon.is-pending {
  cursor: default !important;
  pointer-events: none;
}
.social-icon.is-pending:hover {
  /* No hover lift — it's not interactive */
  transform: none;
  color: inherit;
}


/* =========================================================
   HERO HEADLINE — italic serif treatment on the 2nd line.
   "The network" stays bold sans (Poppins 700); the modifier
   phrase "built for global sport." sits underneath in serif
   italic at light weight. Two-tone typography creates an
   editorial relationship between subject and statement.
   ========================================================= */
h1.hero-title .italic-line {
  /* Small gap between the bold line above and this italic line —
     gives the two-beat headline its breathing room without
     depending on inherited line-height alone */
  margin-top: 0.05em;
}
h1.hero-title .italic-line span {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.01em;
  display: inline-block;
  /* Italic serif letters slant forward (rightward), so their
     visible left edge appears nudged in relative to upright
     bold sans letters above. A small negative text-indent
     compensates so both lines feel left-aligned to the eye. */
  text-indent: -0.04em;
}