/* AIforAll Global — Site mockup v2
   Brand: Poppins display + Manrope body. Brand blue #0067FF + accent orange #FF6900.
   Connected experience across 9 pages, shared nav/footer, page-specific content.

   Theme: light + dark via prefers-color-scheme. Surface and text tokens flip;
   --inverted-* tokens stay constant for sections that are always dark
   (footer, dark CTAs, dark feature panels).

   Mobile-first: default styles target small viewports; @media (min-width: ...)
   scales up. New CSS must use min-width, not max-width. */

:root {
  /* Flipping tokens (light defaults; dark overrides at bottom) */
  --bg:           #FFFFFF;
  --bg-tint:      #F8FAFC;
  --bg-blue:      #E7F6FF;
  --bg-soft:      #F4F8FC;

  --ink:          #0F172A;
  --ink-deep:     #070614;
  --ink-soft:     #364151;
  --ink-muted:    #7B8595;
  --rule:         #E2E8F0;
  --rule-soft:    #EEF2F7;

  --brand:        #0067FF;
  --brand-deep:   #005EE9;
  --brand-soft:   #80B0FF;
  --brand-pale:   #DCE9FF;
  --accent:       #FF6900;
  --accent-deep:  #E55A00;
  --accent-pale:  #FFE6D4;

  /* Status colours (e.g. product release state) */
  --status-live:      #0A8055;
  --status-live-pale: rgba(10, 128, 85, 0.18);

  /* Inverted-permanent tokens — always dark surface with light text,
     regardless of theme. Use for footer, dark CTA bands, dark feature panels. */
  --inverted-bg:        #070614;
  --inverted-bg-2:      #0F172A;
  --inverted-text:      #FFFFFF;
  --inverted-text-soft: rgba(255,255,255,0.78);
  --inverted-text-mute: rgba(255,255,255,0.50);
  --inverted-rule:      rgba(255,255,255,0.12);

  /* Translucent page-surface (e.g. sticky nav) — flips with theme */
  --surface-translucent: rgba(255, 255, 255, 0.88);

  --max:          1360px;
  --max-narrow:   920px;
  --gutter:       clamp(1.25rem, 4vw, 2.5rem);

  --font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Manrope",  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* DARK MODE — auto-activated by OS preference */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #0B1426;
    --bg-tint:      #131D33;
    --bg-blue:      #122B4F;
    --bg-soft:      #131D33;

    --ink:          #F0F4FA;
    --ink-deep:     #FFFFFF;
    --ink-soft:     #C5CDD9;
    --ink-muted:    #8590A0;
    --rule:         rgba(255,255,255,0.10);
    --rule-soft:    rgba(255,255,255,0.06);

    --brand:        #4D8FFF;
    --brand-deep:   #80B0FF;
    --brand-soft:   #B0CCFF;
    --brand-pale:   rgba(0,103,255,0.18);
    --accent:       #FF8533;
    --accent-deep:  #FFA666;
    --accent-pale:  rgba(255,105,0,0.18);

    --status-live:      #3FBF8A;
    --status-live-pale: rgba(63, 191, 138, 0.22);

    --surface-translucent: rgba(11, 20, 38, 0.88);
  }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: clip;           /* prevent stray horizontal scroll from any */
}                              /* off-screen child (mobile drag-out fix) */
body { overflow-x: clip; }

/* Scroll-reveal — site.js adds .reveal to non-hero sections, then .is-visible on entry */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Hero entrance — eyebrow / h1 / lede / CTAs rise in sequence on load */
  .page-hero .eyebrow,
  .page-hero h1,
  .page-hero .lede,
  .page-hero .cta-row,
  .hero h1,
  .hero .hero-text > .lede,
  .hero .hero-cta {
    opacity: 0;
    transform: translateY(22px);
    animation: heroRise 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .page-hero .eyebrow            { animation-delay: 120ms; }
  .page-hero h1                  { animation-delay: 260ms; }
  .hero h1                       { animation-delay: 200ms; }
  .page-hero .lede               { animation-delay: 420ms; }
  .hero .hero-text > .lede       { animation-delay: 380ms; }
  .page-hero .cta-row            { animation-delay: 580ms; }
  .hero .hero-cta                { animation-delay: 560ms; }

  /* Grid-children stagger — site.js adds .stagger-grid to known grids and
     .is-visible when the grid enters viewport. Each child fades up slightly
     after the previous one for a choreographed feel. */
  .stagger-grid > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 650ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .stagger-grid.is-visible > *           { opacity: 1; transform: translateY(0); }
  .stagger-grid.is-visible > *:nth-child(1)  { transition-delay:   0ms; }
  .stagger-grid.is-visible > *:nth-child(2)  { transition-delay:  90ms; }
  .stagger-grid.is-visible > *:nth-child(3)  { transition-delay: 180ms; }
  .stagger-grid.is-visible > *:nth-child(4)  { transition-delay: 270ms; }
  .stagger-grid.is-visible > *:nth-child(5)  { transition-delay: 360ms; }
  .stagger-grid.is-visible > *:nth-child(6)  { transition-delay: 450ms; }
  .stagger-grid.is-visible > *:nth-child(7)  { transition-delay: 520ms; }
  .stagger-grid.is-visible > *:nth-child(8)  { transition-delay: 580ms; }
  .stagger-grid.is-visible > *:nth-child(9)  { transition-delay: 640ms; }
  .stagger-grid.is-visible > *:nth-child(n+10) { transition-delay: 700ms; }
}
@keyframes heroRise {
  to { opacity: 1; transform: translateY(0); }
}

/* Link-arrow — text shifts subtly right on hover, McKinsey-style */
.link-arrow {
  display: inline-block;
  transition: color 160ms ease, border-color 160ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.link-arrow:hover { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .link-arrow:hover { transform: none; }
}

/* ---------- Premium motion layer ---------- */

/* Scroll progress bar — fixed at top, width tracks reading progress */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-deep) 100%);
  z-index: 10000;
  pointer-events: none;
  will-change: width;
}

/* Section-title word reveal — words rise in 60ms stagger when title
   enters viewport. Pairs cleanly with the existing underline grow. */
@media (prefers-reduced-motion: no-preference) {
  .section-title-reveal .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 650ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }
  .section-title-reveal.is-revealed .word {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Word-by-word hero h1 reveal — site.js wraps each word in <span class="word">. */
@media (prefers-reduced-motion: no-preference) {
  .hero h1.words-split,
  .page-hero h1.words-split {
    /* override the heroRise animation for the h1 itself; words handle the reveal */
    animation: none;
    opacity: 1;
    transform: none;
  }
  .words-split .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(24px);
    animation: wordRise 750ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}
@keyframes wordRise {
  to { opacity: 1; transform: translateY(0); }
}

/* Section-title underline — grows from left when the parent enters viewport.
   .section-title is left-aligned in our layout; the line sits 12px below baseline. */
.section-title {
  position: relative;
}
@media (prefers-reduced-motion: no-preference) {
  .section-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -14px;
    width: 64px;
    height: 3px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 250ms;
  }
  .reveal.is-visible .section-title::after,
  section:not(.reveal) .section-title::after,
  .page-hero .section-title::after {
    transform: scaleX(1);
  }
}
/* On dark / inverted surfaces, soften the line so it doesn't punch */
.products--feature .section-title::after,
.audiences--feature .section-title::after,
.pillars-deep--lead .section-title::after,
.stats-band .section-title::after {
  background: var(--accent);
}

/* Hero parallax — site.js translates .hero-slides on scroll. We just need
   to make sure the section clips and the slides render on GPU. */
.hero.has-hero-bg,
.page-hero.has-hero-bg {
  overflow: hidden;
}
.hero-slides {
  will-change: transform;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.container-narrow {
  max-width: var(--max-narrow);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.85em 1.5em;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 120ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--brand);
  color: var(--inverted-text);
  border-color: var(--brand);
  box-shadow: 0 6px 18px -8px rgba(0,103,255,0.55);
}
.btn-primary:hover {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  box-shadow: 0 10px 24px -8px rgba(0,103,255,0.65);
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline:hover { background: var(--ink); color: var(--bg); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
  padding: 0.55em 1.1em;
  font-size: 0.9rem;
}
.btn-ghost:hover { background: var(--brand); color: var(--inverted-text); border-color: var(--brand); }

.btn-text {
  background: transparent;
  color: var(--ink);
  border: 0;
  padding: 0.85em 0.4em;
}
.btn-text:hover { color: var(--brand); }
.play-glyph {
  display: inline-grid;
  place-items: center;
  width: 1.7em; height: 1.7em;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font-size: 0.7em;
}

.link-arrow {
  display: inline-block;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1.5px solid var(--brand);
  padding-bottom: 2px;
  transition: color 160ms ease, border-color 160ms ease;
}
.link-arrow:hover { color: var(--brand); }
.link-center { display: block; margin: 2.5rem auto 0; width: max-content; }

/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
  line-height: 1.15;
}
h1 em, h2 em, h3 em {
  font-style: normal;
  font-weight: 700;
  color: var(--brand);
}

.eyebrow, .section-eyebrow, .proof-label, .studio-kicker {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 1.25rem;
}

.section-title {
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  line-height: 1.15;
  max-width: 26ch;
  margin-bottom: 2.5rem;
}

.section-lede {
  max-width: 60ch;
  margin: -1.5rem 0 2.5rem;
  color: var(--ink-soft);
  font-size: 1.08rem;
}

/* ---------- [1] NAV ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface-translucent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 0.75rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.brand-logo {
  display: block;
  height: 38px;
  width: auto;
}
.brand-logo--inverted {
  height: 44px;
  filter: brightness(0) invert(1);     /* dark wordmark → white on dark bg (always) */
}
@media (prefers-color-scheme: dark) {
  /* In dark mode, the nav background is dark — the regular dark logo would
     disappear, so invert it to white. Footer's --inverted variant is already
     white in both themes; leave it alone. */
  .brand-logo:not(.brand-logo--inverted) {
    filter: brightness(0) invert(1);
  }
}

.nav-links {
  display: flex;
  gap: 1.25rem;
  font-size: 1rem;
}
.nav-links a {
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 500;
  transition: color 160ms ease;
  position: relative;
  padding-bottom: 4px;
}
/* Mobile-only Contact link inside the nav — hidden on desktop, shown in the open mobile menu */
.nav-link-mobile { display: none; }
@media (max-width: 1240px) {
  .nav-link-mobile { display: block; }
}
.nav-links a:hover { color: var(--brand); }
.nav-links a[aria-current="page"] {
  color: var(--brand);
}
.nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 2px;
  background: var(--brand);
}

.nav-has-sub {
  position: relative;
}
.nav-has-sub::after {
  content: " ▾";
  font-size: 0.85em;
  font-weight: 700;
  margin-left: 0.3em;
  color: var(--brand);
  transition: transform 200ms ease;
  display: inline-block;
}
.nav-has-sub:hover::after,
.nav-has-sub:focus-within::after {
  transform: translateY(2px);
}
.nav-submenu {
  position: absolute;
  top: calc(100% + 14px);
  left: -1rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 0.65rem;
  min-width: 240px;
  box-shadow: 0 24px 48px -24px rgba(15,23,42,0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
  display: grid;
  gap: 0.15rem;
}
.nav-has-sub:hover .nav-submenu,
.nav-has-sub:focus-within .nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-submenu a {
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  color: var(--ink);
}
.nav-submenu a:hover {
  background: var(--bg-soft);
  color: var(--brand);
}
.nav-submenu a::after { display: none; }

.nav-utility {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

/* Hamburger button — hidden on desktop, shown when nav collapses */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
}
.nav-toggle span {
  display: block;
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 200ms ease, opacity 160ms ease, top 200ms ease;
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 28px; }
.site-nav.is-open .nav-toggle span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.site-nav.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-nav.is-open .nav-toggle span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

@media (max-width: 1240px) {
  .nav-toggle { display: block; }
  .nav-links { display: none; }
  .nav-utility { display: none; }

  .site-nav.is-open .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: auto;
    right: var(--gutter);
    top: calc(100% + 0.5rem);
    width: max-content;                /* shrink-wrap to the widest item */
    max-width: calc(100vw - 2 * var(--gutter));
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 0.4rem 1rem 0.5rem;
    box-shadow: 0 18px 40px -16px rgba(15, 23, 42, 0.25);
    z-index: 60;
    gap: 0;
    text-align: right;
  }
  .site-nav.is-open .nav-links > * {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--rule-soft);
  }
  .site-nav.is-open .nav-links > *:last-child { border-bottom: 0; }
  .site-nav.is-open .nav-links a { font-size: 1rem; display: block; }
  .site-nav.is-open .nav-links a[aria-current="page"]::after { display: none; }

  .site-nav.is-open .nav-has-sub::after { display: none; }
  .site-nav.is-open .nav-submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0.5rem 0 0 1rem;
    margin-top: 0.5rem;
    min-width: 0;
    display: grid;
    gap: 0.4rem;
  }
  .site-nav.is-open .nav-submenu a {
    font-size: 0.92rem;
    color: var(--ink-soft);
    padding: 0.35rem 0;
  }
}

/* ---------- HOME HERO — dark inverted band (matches sub-page heroes) ---------- */
.hero {
  padding-block: clamp(4rem, 8vw, 6rem);
  /* Generous, cinematic on desktop while leaving a deliberate "peek" of the next
     section as a scroll signal. Floor protects short laptop viewports; cap prevents
     awkward stretching on very tall displays. */
  min-height: clamp(620px, 88vh, 920px);
  display: flex;
  align-items: center;
  background-color: var(--inverted-bg-2);
  color: var(--inverted-text);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% -10%, rgba(0,103,255,0.22), transparent 45%),
    radial-gradient(circle at 100% 50%, rgba(255,105,0,0.10), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.hero > .container { position: relative; z-index: 1; width: 100%; }
.hero-text h1 { max-width: 22ch; }
.hero-text .lede { max-width: 56ch; }
.hero-text h1 {
  font-size: clamp(2.2rem, 4.8vw, 4rem);
  line-height: 1.05;
  margin-bottom: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--inverted-text);
}
.hero-text h1 em { color: var(--brand-soft); }
.hero-text .eyebrow {
  color: var(--brand-soft);
  margin-bottom: 1.5rem;
}
.hero .lede,
.page-hero .lede {
  color: var(--inverted-text-soft);
  font-size: clamp(0.98rem, 1.2vw, 1.1rem);
  line-height: 1.55;
  font-weight: 400;
  max-width: 56ch;
}
.hero .btn-text { color: var(--inverted-text); }
.hero .btn-text:hover { color: var(--brand-soft); }
.lede {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 0 2rem;
  font-weight: 400;
}
.cta-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
/* Hero film band — its own light section, left-aligned to match the heroes */
.hero-film {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  background: var(--bg);
  border-top: 1px solid var(--rule);
}
.hero-film .section-title {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.hero-film-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.hero-film-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 1280px;
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 70px -28px rgba(15, 23, 42, 0.35);
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: contain;     /* letterbox the local mp4 inside the 16:9 frame */
  background: #000;
}

/* ---------- PAGE HERO (sub-pages) — dark inverted band ---------- */
.page-hero {
  padding-block: clamp(4rem, 8vw, 6rem);
  min-height: clamp(620px, 88vh, 920px);
  display: flex;
  align-items: center;
  background-color: var(--inverted-bg-2);
  color: var(--inverted-text);
  position: relative;
  overflow: hidden;
  border-bottom: 0;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 90% 0%, rgba(0,103,255,0.22), transparent 45%),
    radial-gradient(circle at 0% 100%, rgba(255,105,0,0.10), transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.page-hero > .container { position: relative; z-index: 1; width: 100%; }

/* Background-image support for heroes (set --hero-bg + optional --hero-bg-position inline) */
.hero.has-hero-bg,
.page-hero.has-hero-bg {
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: var(--hero-bg-position, center);
  background-repeat: no-repeat;
}
.hero.has-hero-bg::after,
.page-hero.has-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(0, 51, 153, 0.80) 0%, rgba(15, 23, 42, 0.82) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Bottom-anchored hero variant — title sits at the bottom of the frame,
   overlay fades from transparent at top (image visible) to dark at bottom (text readable). */
.page-hero.is-bottom-anchored {
  align-items: flex-end;
  padding-bottom: clamp(2rem, 3vw, 2.5rem);
}

/* Slideshow hero — cross-fades through a list of images set via data-slides on the section.
   Site.js reads the list, injects one .hero-slide per URL, and rotates the .is-active class. */
.page-hero.is-slideshow {
  background-image: none;
}
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: var(--hero-bg-position, center);
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 900ms ease-in-out;
}
.hero-slide.is-active {
  opacity: 1;
}
/* Horizontal pan motion — opt-in via .page-hero--pan / .hero--pan modifier.
   Used on home, what-we-do, incubation-factory, learning-programmes, our-network.
   Base scale gives the slide overflow buffer so it can pan left↔right without
   revealing edges. */
.page-hero--pan .hero-slide,
.hero--pan .hero-slide {
  transform: scale(1.08);
  transform-origin: center;
}
.page-hero--pan .hero-slide.is-active,
.hero--pan .hero-slide.is-active {
  animation: hero-pan-lr 20s ease-in-out infinite alternate;
}
@keyframes hero-pan-lr {
  from { transform: scale(1.08) translateX(-2.5%); }
  to   { transform: scale(1.08) translateX(2.5%); }
}

/* Slow zoom-in motion — opt-in via .page-hero--zoom (e.g. applied-research).
   Active slide breathes from 1× to ~1.12× and back. */
.page-hero--zoom .hero-slide {
  transform-origin: center;
}
.page-hero--zoom .hero-slide.is-active {
  animation: hero-zoom-in 18s ease-in-out infinite alternate;
}
@keyframes hero-zoom-in {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero--pan .hero-slide,
  .page-hero--pan .hero-slide.is-active,
  .hero--pan .hero-slide,
  .hero--pan .hero-slide.is-active,
  .page-hero--zoom .hero-slide,
  .page-hero--zoom .hero-slide.is-active { animation: none; transform: none; }
}
.page-hero .eyebrow { color: var(--brand-soft); }
.page-hero h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.1;
  max-width: 22ch;
  margin-bottom: 1.25rem;
  color: var(--inverted-text);
}
.page-hero h1 em {
  font-style: normal;
  font-weight: 700;
  color: var(--brand-soft);
}
.page-hero .geo-pill {
  background: rgba(255,255,255,0.06);
  color: var(--brand-soft);
  border: 1px solid rgba(255,255,255,0.14);
}

/* ---------- [3] THREE PROMISE SLIDES ---------- */
.promise {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  background: var(--bg-soft);
  border-block: 1px solid var(--rule);
}
.promise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.promise-card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.promise-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 24px 48px -28px rgba(0,103,255,0.22);
}
.promise-card .eyebrow {
  font-size: 0.72rem;
  margin-bottom: 0.5rem;
}
.promise-card h3 {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
}
.promise-card p {
  color: var(--ink-soft);
  font-size: 0.97rem;
  margin: 0;
}
.promise-card .link-arrow { margin-top: auto; align-self: flex-start; }

@media (max-width: 860px) { .promise-grid { grid-template-columns: 1fr; } }

/* ---------- [4] WHAT WE DO — FOUR MOTIONS ---------- */
.motions {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  background: var(--bg);
}
.motion-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.motion-card {
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 2.25rem 2rem;
  position: relative;
  overflow: hidden;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.motion-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 6px;
  height: 100%;
  background: var(--brand);
  transform: translateX(-100%);
  transition: transform 280ms ease;
}
.motion-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand);
  box-shadow: 0 30px 60px -32px rgba(0,103,255,0.30);
}
.motion-card:hover::before { transform: translateX(0); }
.motion-num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.06em;
  margin-bottom: 0.85rem;
}
.motion-card h3 {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 0.85rem;
  letter-spacing: -0.015em;
}
.motion-card p {
  color: var(--ink-soft);
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.55;
}
@media (max-width: 720px) { .motion-grid { grid-template-columns: 1fr; } }

/* ---------- WHAT WE DO — THREE PILLARS ---------- */
.pillars {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  background-color: var(--inverted-bg-2);
  background-image: linear-gradient(160deg, rgba(0, 103, 255, 0.45) 0%, rgba(0, 51, 153, 0.25) 100%);
  color: var(--inverted-text);
  position: relative;
  overflow: hidden;
}
.pillars > .container { position: relative; z-index: 1; }
.pillars .section-eyebrow { color: var(--brand-soft); }
.pillars .section-title { color: var(--inverted-text); }
.pillars .section-title::after { background: var(--brand-soft); }
.pillars > .container > .link-arrow {
  color: var(--inverted-text);
  border-bottom-color: rgba(255, 255, 255, 0.45);
}
.pillars > .container > .link-arrow:hover {
  color: var(--brand-soft);
  border-bottom-color: var(--brand-soft);
}
.pillar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 720px)  { .pillar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pillar-grid { grid-template-columns: repeat(3, 1fr); } }
.pillar-card {
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: clamp(1.75rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.pillar-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 6px;
  height: 100%;
  background: var(--brand);
  transform: translateX(-100%);
  transition: transform 280ms ease;
}
.pillar-card:hover {
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -28px rgba(0,103,255,0.28);
}
.pillar-card:hover::before { transform: translateX(0); }
.pillar-num {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0;
}
.pillar-card h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
}
.pillar-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.55;
}
.pillar-card .link-arrow {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 0.5rem;
}

/* ---------- IN THE FIELD gallery (Capability Building) ---------- */
.field-gallery {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  background: var(--bg);
}
.field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}
@media (min-width: 720px)  { .field-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .field-grid { grid-template-columns: repeat(3, 1fr); } }
.field-card {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: var(--bg-soft);
}
.field-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.field-card:hover img { transform: scale(1.04); }
.field-card figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem 1.1rem;
  background: linear-gradient(to top, rgba(7, 6, 20, 0.85) 0%, rgba(7, 6, 20, 0.55) 60%, transparent 100%);
  color: var(--inverted-text);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* ---------- ACTIVE BUILDS (Incubation Factory products) ---------- */
.products {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  background: var(--bg-soft);
}
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 720px)  { .product-grid { grid-template-columns: repeat(2, 1fr); } }
.product-card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.product-card:hover,
.product-card:focus-visible {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -28px rgba(0,103,255,0.22);
  outline: none;
}
.product-card .link-arrow {
  margin-top: auto;
  padding-top: 0.5rem;
  align-self: flex-start;
}
.product-status {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.product-status--live {
  color: var(--status-live);
}
.product-status--live::before {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  background: var(--status-live);
  border-radius: 999px;
  margin-right: 0.45em;
  vertical-align: 0.05em;
  box-shadow: 0 0 0 3px var(--status-live-pale);
}
.product-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
}
.product-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.55;
}

/* ---------- HOW WE WORK — PROCESS FLOW ---------- */
.how-we-work {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  background: var(--bg-soft);
  position: relative;
  overflow: hidden;
}
.how-we-work .section-lede {
  max-width: 60ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.process-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 880px) {
  .process-flow {
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
  }
}
/* Mobile: 2-column grid — number circle on the left, text indented in col 2
   so the vertical connector line in col 1 never crosses through copy. */
.process-step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 1.25rem;
  row-gap: 0.15rem;
  align-items: start;
}
.process-step-num {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--bg);
  border: 2px solid var(--brand);
  color: var(--brand);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
}
.process-step-stage {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}
.process-step h4 {
  margin: 0.35rem 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.25;
  grid-column: 2;
}
.process-step p {
  margin: 0.25rem 0 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.5;
  grid-column: 2;
}
/* Desktop: revert to single-column flex stack (number on top, text below)
   — the horizontal connector then runs above the text, not through it. */
@media (min-width: 880px) {
  .process-step {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  .process-step-stage { margin: 0.35rem 0 0; align-self: auto; }
  .process-step h4 { margin: 0.25rem 0 0; }
  .process-step p { margin: 0; }
}

/* Connector line — vertical between steps on mobile, horizontal on desktop */
.process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 56px;
  left: 27px;
  bottom: -2rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--brand) 0%, var(--rule) 100%);
  z-index: 0;
}
@media (min-width: 880px) {
  .process-step:not(:last-child)::after {
    top: 27px;
    left: calc(56px + 0.5rem);
    right: -2.5rem;
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(to right, var(--brand) 0%, var(--rule) 100%);
  }
}

/* ---------- [5] HOW WE WORK — METHOD BAR ---------- */
.method {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  background: var(--bg-blue);
  border-block: 1px solid var(--rule);
}
.method-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.method-tile {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 1.85rem 1.4rem;
  text-align: left;
  transition: transform 200ms ease, border-color 200ms ease;
}
.method-tile:hover { transform: translateY(-2px); border-color: var(--brand); }
.method-tile-num {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.85rem;
}
.method-tile h4 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 0.6rem;
}
.method-tile p { margin: 0; color: var(--ink-soft); font-size: 0.94rem; line-height: 1.5; }
@media (max-width: 880px) { .method-bar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .method-bar { grid-template-columns: 1fr; } }

/* ---------- [6] WHO WE ARE — TWO-COL WITH MAP ---------- */
.who-we-are {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  background: var(--bg);
}
.who-header {
  max-width: 56ch;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.who-header h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  line-height: 1.15;
}
.who-header .eyebrow {
  margin-bottom: 1rem;
}
.who-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
/* who-map: dark gradient panel hosting the hand-drawn SVG (used on Who We Are) */
.who-map {
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  background: linear-gradient(165deg, #0067FF 0%, #003D99 55%, #1A2960 100%);
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 60px -28px rgba(0,103,255,0.45);
}
.who-map svg { width: 100%; height: 100%; }
.who-map-label {
  position: absolute;
  top: 1.25rem; left: 1.25rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  font-weight: 600;
}

/* who-image: real EU image (used on Home) — no gradient, just rounded frame */
.who-image {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 60px -28px rgba(0,103,255,0.30);
}
.who-image img {
  display: block;
  width: 100%;
  height: auto;
}
.who-text h2 {
  font-size: clamp(1.85rem, 3vw, 2.4rem);
  margin-bottom: 1.5rem;
  line-height: 1.15;
}
.who-text p { color: var(--ink-soft); margin: 0 0 1rem; font-size: 1.02rem; line-height: 1.65; }
@media (max-width: 860px) { .who-grid { grid-template-columns: 1fr; } }

/* Policy alignment divider (Who We Are) — dark brand-blue band separating
   mission/vision from the team. Inverted-permanent: stays dark in both themes. */
/* What We Do — illustration with hotspot markers per pillar. Hover or tap a
   numbered dot to surface a small popover describing that pillar's work. */
.wwd-illustration-section {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  background: var(--bg);
}
.wwd-illustration-section .section-lede {
  max-width: 60ch;
  margin: -1.25rem 0 2.5rem;
  color: var(--ink-soft);
}
.wwd-illustration {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0;
}
.wwd-illustration img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 80vh;
  margin: 0;
  border-radius: 18px;
  box-shadow: 0 24px 56px -28px rgba(15, 23, 42, 0.25);
}
.wwd-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  z-index: 2;
}
.wwd-hotspot-mark {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--inverted-text);
  border: 3px solid #fff;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 18px -6px rgba(0, 103, 255, 0.55), 0 0 0 1px rgba(0, 103, 255, 0.4);
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease, background-color 200ms ease;
}
.wwd-hotspot:hover .wwd-hotspot-mark,
.wwd-hotspot:focus-visible .wwd-hotspot-mark,
.wwd-hotspot.is-open .wwd-hotspot-mark {
  transform: scale(1.12);
  background: var(--brand-deep);
  box-shadow: 0 10px 24px -6px rgba(0, 103, 255, 0.75), 0 0 0 4px rgba(0, 103, 255, 0.25);
}

/* "How" marker — visually subordinate to the three pillars: smaller, accent-orange,
   unnumbered. Reads as "the way we deliver" rather than another pillar. */
.wwd-hotspot--how .wwd-hotspot-mark {
  width: 22px;
  height: 22px;
  background: var(--accent);
  border-width: 2px;
  box-shadow: 0 4px 12px -4px rgba(255, 105, 0, 0.55), 0 0 0 1px rgba(255, 105, 0, 0.4);
  position: relative;
}
.wwd-hotspot--how .wwd-hotspot-mark::after {
  content: "";
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 999px;
}
.wwd-hotspot--how:hover .wwd-hotspot-mark,
.wwd-hotspot--how:focus-visible .wwd-hotspot-mark,
.wwd-hotspot--how.is-open .wwd-hotspot-mark {
  background: var(--accent-deep);
  box-shadow: 0 8px 18px -4px rgba(255, 105, 0, 0.75), 0 0 0 4px rgba(255, 105, 0, 0.25);
}
.wwd-hotspot-tip {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translate(-50%, -6px);
  /* Dynamic sizing: width fits content (up to max), so longer-text popovers get
     wider, shorter ones stay compact. Floor at 360px so they never read cramped. */
  width: max-content;
  min-width: 360px;
  max-width: min(620px, 75vw);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 1.75rem 1.9rem 1.55rem;
  box-shadow: 0 32px 72px -22px rgba(15, 23, 42, 0.42);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms;
  z-index: 3;
}
.wwd-hotspot-tip strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--ink);
  margin-bottom: 0.35rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.wwd-hotspot-tip em {
  display: block;
  font-style: normal;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.85rem;
}
.wwd-hotspot-tip span {
  display: block;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0.95rem;
}
.wwd-hotspot-link {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 160ms ease;
}
.wwd-hotspot-link:hover { color: var(--brand-deep); }
.wwd-hotspot:hover .wwd-hotspot-tip,
.wwd-hotspot:focus-visible .wwd-hotspot-tip,
.wwd-hotspot.is-open .wwd-hotspot-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
/* Tooltip arrow */
.wwd-hotspot-tip::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 11px;
  height: 11px;
  background: var(--bg);
  border-left: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
}
/* Hotspots in the right half of the image — flip tooltip to the left so it stays inside the frame. */
.wwd-hotspot:nth-child(4) .wwd-hotspot-tip,
.wwd-hotspot:nth-child(5) .wwd-hotspot-tip {
  left: auto;
  right: 50%;
  transform: translate(50%, -6px);
}
.wwd-hotspot:nth-child(4):hover .wwd-hotspot-tip,
.wwd-hotspot:nth-child(4):focus-visible .wwd-hotspot-tip,
.wwd-hotspot:nth-child(4).is-open .wwd-hotspot-tip,
.wwd-hotspot:nth-child(5):hover .wwd-hotspot-tip,
.wwd-hotspot:nth-child(5):focus-visible .wwd-hotspot-tip,
.wwd-hotspot:nth-child(5).is-open .wwd-hotspot-tip {
  transform: translate(50%, 0);
  pointer-events: auto;
}
@media (max-width: 600px) {
  .wwd-hotspot-mark {
    width: 24px;
    height: 24px;
    font-size: 0.72rem;
    border-width: 2px;
  }
  .wwd-hotspot-tip {
    width: 220px;
    font-size: 0.85rem;
  }
}

.policy-divider {
  background-color: var(--inverted-bg-2);
  background-image: linear-gradient(160deg, rgba(0, 103, 255, 0.45) 0%, rgba(0, 51, 153, 0.25) 100%);
  color: var(--inverted-text);
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
  text-align: center;
  border-block: 1px solid rgba(255, 255, 255, 0.10);
}
.policy-divider-eyebrow {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-soft);
  margin: 0 0 0.75rem;
}
.policy-divider-text {
  color: var(--inverted-text-soft);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.6;
  max-width: 62ch;
  margin: 0 auto;
}

/* Badge pills: small org logo + name as a link. Two badges side by side
   under the prose, brand-pill style on the dark band. */
.policy-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.policy-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 1.1rem 0.5rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: var(--inverted-text);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 200ms ease, background-color 200ms ease, transform 200ms ease;
}
.policy-badge:hover {
  border-color: var(--brand-soft);
  background-color: rgba(0, 103, 255, 0.18);
  transform: translateY(-1px);
}
.policy-badge-logo {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--inverted-text);
  padding: 3px;
  object-fit: contain;
  flex-shrink: 0;
}
/* Rectangular logos (e.g. EU flag) — square crop with subtle radius. */
.policy-badge-logo--rect {
  border-radius: 4px;
  background: transparent;
  padding: 0;
  object-fit: cover;
}
.policy-badge-name { line-height: 1.2; }

/* Split hero (Who We Are) — title + EU map + paragraphs inside the dark
   page-hero. DOM order is title → image → paragraphs so mobile naturally
   stacks title, image, paragraphs without `order:` hacks. Desktop puts
   title and paragraphs on the left, image on the right spanning both rows. */
.hero-split {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "title"
    "image"
    "text";
  gap: 1.5rem;
  width: 100%;
}
.hero-split > h1         { grid-area: title; margin: 0; max-width: none; }
.hero-split-image        { grid-area: image; }
.hero-split-text         { grid-area: text; }
.hero-split-image {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 60px -28px rgba(0,103,255,0.30);
  background: var(--bg);
}
.hero-split-image img { display: block; width: 100%; height: auto; }
/* Subtle Ken Burns zoom — opt-in via .hero-split-image--zoom modifier so it
   doesn't affect other hero-split usages (e.g. who-we-are). Click/tap toggles
   an additional `.is-zoomed` state that scales the wrapper a bit further.
   Respects prefers-reduced-motion. */
.hero-split-image--zoom {
  cursor: zoom-in;
  position: relative;
  z-index: 1;
  transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 480ms ease;
  outline: none;
}
.hero-split-image--zoom:focus-visible {
  box-shadow: 0 30px 60px -28px rgba(0,103,255,0.30), 0 0 0 3px var(--brand-soft);
}
.hero-split-image--zoom.is-zoomed {
  cursor: zoom-out;
  transform: scale(1.08);
  z-index: 2;
}
.hero-split-image--zoom img {
  transform-origin: center;
  animation: hero-split-zoom 14s ease-in-out infinite alternate;
}
@keyframes hero-split-zoom {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.09) translateY(-1.2%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-split-image--zoom img { animation: none; }
  .hero-split-image--zoom { transition: none; }
}
.hero-split-text p {
  margin: 0 0 1rem;
  color: var(--inverted-text-soft);
  font-size: 1.02rem;
  line-height: 1.65;
}
.hero-split-text p:last-child { margin-bottom: 0; }
.hero-split-text strong { color: var(--inverted-text); font-weight: 600; }

@media (min-width: 860px) {
  .hero-split {
    grid-template-columns: 1fr 1.05fr;
    grid-template-areas:
      "title image"
      "text  image";
    column-gap: clamp(2rem, 5vw, 4rem);
    row-gap: 1.25rem;
    align-items: start;
  }
  /* Stacked variant — title sits flush above body text in the left column,
     image fills the right column at the same total height (object-fit: cover
     crops to whatever the left-column stack actually needs). Prevents a tall
     image from forcing a gap between title and body. */
  .hero-split--stacked {
    row-gap: 0.75rem;
    align-content: start;
  }
  .hero-split--stacked > .hero-split-image {
    align-self: stretch;
    height: 100%;
  }
  .hero-split--stacked > .hero-split-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ---------- [7] FOCUS AREAS ---------- */
.focus {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  background: var(--bg-soft);
  border-block: 1px solid var(--rule);
}
.focus-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.focus-card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 1.85rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  position: relative;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.focus-card::before {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  background: var(--brand);
  border-radius: 2px;
  margin-bottom: 0.4rem;
}
.focus-card:hover {
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -30px rgba(0,103,255,0.25);
}
.focus-card h4 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
  letter-spacing: -0.015em;
}
.focus-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}
.focus-card .link-arrow { align-self: flex-start; margin-top: auto; padding-top: 0.5rem; }
@media (max-width: 880px) { .focus-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .focus-grid { grid-template-columns: 1fr; } }

/* Photo-backed focus cards (set --card-bg inline) */
.focus-card.has-card-bg {
  background-image: var(--card-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--inverted-text);
  border: 0;
  overflow: hidden;
  min-height: 240px;
}
.focus-card.has-card-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(0, 51, 153, 0.55) 0%, rgba(7, 6, 20, 0.85) 100%);
  pointer-events: none;
  z-index: 0;
}
.focus-card.has-card-bg::before {
  background: var(--brand-soft);
  position: relative;
  z-index: 1;
}
.focus-card.has-card-bg > * {
  position: relative;
  z-index: 1;
}
.focus-card.has-card-bg h4 { color: var(--inverted-text); }
.focus-card.has-card-bg p { color: var(--inverted-text-soft); }
.focus-card.has-card-bg .link-arrow {
  color: var(--inverted-text);
  border-bottom-color: var(--brand-soft);
}
.focus-card.has-card-bg .link-arrow:hover { color: var(--brand-soft); }
.focus-card.has-card-bg:hover {
  border: 0;
  box-shadow: 0 22px 44px -22px rgba(7, 6, 20, 0.45);
}

/* ---------- [8] POLICY ALIGNMENT ---------- */
.policy {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  background: var(--bg);
}
.policy-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.policy-card {
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 2.2rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  transition: border-color 160ms ease, transform 160ms ease;
}
.policy-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.policy-mark {
  width: 64px; height: 64px;
  border-radius: 999px;
  background: var(--bg-blue);
  display: grid;
  place-items: center;
  color: var(--brand);
  margin-bottom: 0.4rem;
}
.policy-mark svg { width: 32px; height: 32px; }
.policy-logo {
  height: 80px;
  display: grid;
  place-items: center;
  margin-bottom: 0;          /* name label removed — no extra space needed below */
  width: 100%;
}
.policy-logo img {
  max-height: 72px;
  max-width: 240px;          /* allow wider lockup logos (UN is a long horizontal) */
  width: auto;
  height: auto;
  object-fit: contain;
}
.policy-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.policy-subline {
  max-width: 70ch;
  margin: 0 auto;
  text-align: center;
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.55;
}
@media (max-width: 720px) { .policy-row { grid-template-columns: 1fr; } }

/* ---------- POLICY ALIGNMENT — MINIMAL STRIP ---------- */
.policy-mini {
  padding-block: clamp(2.5rem, 4vw, 4rem);
  background: var(--bg-soft);
  border-block: 1px solid var(--rule);
  text-align: center;
}
.policy-mini-eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 0.4rem;
}
.policy-mini-line {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
}
.policy-mini-text {
  font-family: var(--font-body);
  font-size: 1.02rem;
  color: var(--ink-soft);
  margin: 0;
  max-width: 68ch;
  margin-inline: auto;
  line-height: 1.55;
}
.policy-mini-text a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid var(--brand);
  padding-bottom: 1px;
  transition: color 200ms ease, border-color 200ms ease;
}
.policy-mini-text a:hover {
  color: var(--brand);
}

/* ---------- [9] COLLABORATOR MARQUEE + GRID ---------- */
.collaborators {
  padding-block: clamp(3rem, 5vw, 4.5rem);
  background: var(--bg);
  border-top: 0;
  overflow: hidden;
  color: var(--ink);
}
.collaborators .eyebrow,
.collaborators .section-eyebrow {
  text-align: center;
  color: var(--brand);
}
.collaborators h4 {
  text-align: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink-soft);
  letter-spacing: 0;
  margin-bottom: 2rem;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}
.collab-marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.collab-track {
  display: flex;
  gap: 2rem;
  align-items: center;
  width: max-content;
  animation: marquee 80s linear infinite;
}
.collab-marquee:hover .collab-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.collab-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  min-width: 160px;
  padding: 0 1.5rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  flex-shrink: 0;
  transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
  text-decoration: none;
}
.collab-pill:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -22px rgba(0,103,255,0.30);
}
.collab-pill img {
  max-height: 44px;
  max-width: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Labeled pill — column layout with logo on top and name below.
   Used for logos whose mark doesn't carry a readable org name (Kodryx, Volcani). */
.collab-pill--labeled {
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.55rem 1.1rem;
  min-width: 140px;
}
.collab-pill--labeled img { max-height: 30px; }
.collab-pill-name {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* Collaborator logo-only grid (used on Our Network — visual scan) */
.collab-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.collab-grid .collab-pill {
  height: 110px;
  min-width: 0;
  padding: 1rem;
}
.collab-grid .collab-pill img {
  max-height: 64px;
  max-width: 160px;
}
@media (min-width: 480px)  { .collab-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 720px)  { .collab-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .collab-grid { grid-template-columns: repeat(5, 1fr); } }

/* Collaborator card grid — bigger cards, max 3 cols, each group fills the viewport */
.collab-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2rem;
}
@media (min-width: 600px) {
  .collab-card-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (min-width: 1000px) {
  .collab-card-grid { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
}
.collab-card {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 2.25rem 1.75rem 1.75rem;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  width: 100%;
  transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
  position: relative;
  overflow: hidden;
}
.collab-card:hover,
.collab-card:focus-visible {
  border-color: var(--brand);
  transform: translateY(-4px);
  box-shadow: 0 32px 64px -32px rgba(0,103,255,0.32);
  outline: none;
}
.collab-card-logo {
  height: 120px;
  display: grid;
  place-items: center;
  margin-top: 0.4rem;
  flex-shrink: 0;
}
.collab-card-logo img {
  max-width: 100%;
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* logos are now full-color by default — no hover filter swap needed */
.collab-card-text {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  flex: 1;                /* take remaining height, so meta can pin to bottom */
}
.collab-card-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
  display: none;          /* hidden by default — most logos are wordmarks already */
}
.collab-card--show-name {
  order: 99;              /* push symbol-only cards to end of grid — visually grouped at bottom */
}
.collab-card--show-name .collab-card-name {
  display: block;         /* show only when the logo is symbol-only or not legible */
}

/* Prevent the underlying page from scroll-jumping when a modal opens.
   :has() is supported in all modern browsers. */
html:has(dialog[open]) { overflow: hidden; }

/* Logos in dark mode — many vendor logos are dark-on-transparent and disappear
   against a dark card background. Wrap them in a white plate (only in dark mode)
   so they remain legible regardless of theme. */
@media (prefers-color-scheme: dark) {
  .collab-card-logo,
  .modal-logo,
  .policy-logo {
    background: #FFFFFF;
    border-radius: 8px;
    /* no padding — logo sits edge-to-edge; no overflow possible */
  }
  .collab-pill {
    background: #FFFFFF;
  }
}
.collab-card-meta {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
  margin-top: auto;       /* pin meta to bottom — aligns across all cards in a row */
  color: var(--ink-muted);
}
.collab-card-meta .country { color: var(--brand); }
.collab-card-meta abbr.country {
  text-decoration: none;
  border-bottom: 0;
  cursor: help;
}

/* Collaborator group sections — each group fills the viewport so the
   sub-section feels like its own screen (McKinsey-style). Content is
   vertically centered when shorter than 100vh. */
.collab-group {
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding-block: clamp(4rem, 7vw, 6.5rem);
}
.collab-group > .container { width: 100%; }

.collab-group-title {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand);
  text-align: center;
  margin: 0 0 2rem;
}

/* Feature variant — dark brand-blue gradient backdrop so the white cards pop. */
.collab-group--feature {
  position: relative;
  isolation: isolate;
  background-color: var(--inverted-bg-2);
  background-image:
    linear-gradient(160deg, rgba(0, 51, 153, 0.78) 0%, rgba(7, 6, 20, 0.90) 100%);
  color: var(--inverted-text);
}
.collab-group--feature .collab-group-title { color: var(--brand-soft); }

/* Compact variant — drops the 100vh "screen-filling" rule so sections with fewer
   cards (e.g. Community & Governance) don't get oversized top/bottom whitespace. */
.collab-group--compact {
  min-height: auto;
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
}


/* Label preceding the geo-pill row in the hero */
.geo-strip .geo-label {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-muted);
  align-self: center;
  margin-right: 0.25rem;
}

/* Who-We-Are context strip: small bands holding geo + policy alignment */
.who-context {
  padding-block: clamp(2.5rem, 4vw, 4rem);
  background: var(--bg-soft);
  border-bottom: 1px solid var(--rule);
}
.who-context-block {
  margin-bottom: 1.75rem;
}
.who-context-block:last-child { margin-bottom: 0; }
.who-context-eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 0.65rem;
}
.who-context .geo-strip { margin-top: 0; }
.who-context .policy-mini-text {
  margin: 0;
  text-align: left;
  max-width: none;
}

/* Collaborator modal — uses native <dialog>.
   Centered in the viewport (not the document) via position:fixed + inset:0 + margin:auto.
   This works regardless of how far the user has scrolled. */
.collab-modal,
.product-modal,
.form-modal,
.text-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(560px, 92vw);
  max-height: 90vh;
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 2.25rem 2rem 2rem;
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 40px 80px -32px rgba(7,6,20,0.45);
  overflow: auto;
}
.text-modal { width: min(720px, 92vw); }
.text-modal .modal-eyebrow {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 0.7rem;
}
.text-modal .modal-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 1.25rem;
  color: var(--ink);
}
.text-modal p {
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.65;
  margin: 0 0 1rem;
}
.text-modal p:last-of-type { margin-bottom: 0; }
.form-modal {
  width: min(720px, 96vw);
  max-height: 92vh;
}
.collab-modal::backdrop,
.product-modal::backdrop,
.form-modal::backdrop,
.text-modal::backdrop {
  background: rgba(7, 6, 20, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.collab-modal[open],
.product-modal[open],
.form-modal[open],
.text-modal[open] {
  animation: modalIn 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.form-modal-frame {
  margin-top: 1rem;
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
}
.form-modal-frame iframe {
  display: block;
  width: 100%;
  min-height: 720px;
  border: 0;
}

/* Make the Apply button (a <button>) look like the other .link-arrow anchors */
button.link-arrow {
  background: transparent;
  border: 0;
  padding: 0 0 2px;
  font: inherit;
  cursor: pointer;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.modal-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  background: transparent;
  border: 0;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink-muted);
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  transition: background 160ms ease, color 160ms ease;
}
.modal-close:hover { background: var(--bg-soft); color: var(--ink); }
.modal-logo {
  width: 100%;
  height: 80px;
  margin: 0.5rem 0 1.5rem;
  display: grid;
  place-items: center;
}
.modal-logo img {
  max-width: 220px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.modal-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
  padding-right: 2.5rem;
}
.modal-meta {
  font-size: 0.78rem;
  color: var(--brand);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
}
.modal-desc {
  color: var(--ink-soft);
  margin: 0 0 1.75rem;
  line-height: 1.65;
  font-size: 0.98rem;
}
.modal-link {
  width: 100%;
  justify-content: center;
}
.modal-link-pending {
  display: block;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-muted);
  padding: 1em 0;
}

@media (max-width: 480px) {
  .collab-modal { padding: 1.75rem 1.25rem 1.25rem; border-radius: 14px; }
  .modal-name { font-size: 1.25rem; }
}

/* ---------- [10] FROM OUR STUDIO ---------- */
.studio {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  background: var(--bg-blue);
}
.studio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}
@media (min-width: 880px) {
  .studio-grid { grid-template-columns: repeat(3, 1fr); }
}
.studio-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  text-decoration: none;
  color: inherit;
}
.studio-art {
  aspect-ratio: 16 / 9;          /* matches YouTube thumbnails — avoids weird crop */
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 0.65rem;
  overflow: hidden;
}
.studio-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.studio-art--podcast { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%); }
.studio-art-icon {
  width: 36%;
  height: 36%;
  color: rgba(255, 255, 255, 0.95);
}
/* For images that should preserve their full content (e.g. branded podcast
   thumbnails with feature labels) — letterbox with the gradient on the sides. */
.studio-art-img--contain { object-fit: contain; }
.studio-art--article { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%); }
.studio-art--guest   { background: linear-gradient(135deg, var(--ink) 0%, var(--ink-deep) 100%); }
.studio-card h3 {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.25;
}
.studio-kicker { margin-bottom: 0.25rem; color: var(--ink-muted); }
.studio-card .link-arrow { align-self: flex-start; margin-top: 0.4rem; }

/* ---------- [11] FINAL CTA (brand-blue darkened — same blue family, deeper tone) ---------- */
.final-cta {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  background:
    radial-gradient(circle at 50% 120%, rgba(255,255,255,0.12), transparent 55%),
    linear-gradient(rgba(7, 6, 20, 0.40), rgba(7, 6, 20, 0.40)),
    linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: var(--inverted-text);
  position: relative;
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}
/* Two soft "aurora" blobs drift slowly behind the content — minimalist, striking,
   no assets. They sit above the gradient base but below the container content via
   z-index/isolation. Both honour prefers-reduced-motion (animation suspended). */
.final-cta::before,
.final-cta::after {
  content: "";
  position: absolute;
  width: 60vw;
  height: 60vw;
  max-width: 720px;
  max-height: 720px;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
  mix-blend-mode: screen;
}
.final-cta::before {
  background: radial-gradient(circle, var(--accent) 0%, transparent 65%);
  top: -22%;
  left: -12%;
  opacity: 0.45;
  animation: cta-aurora-a 22s ease-in-out infinite alternate;
}
.final-cta::after {
  background: radial-gradient(circle, rgba(120, 180, 255, 0.95) 0%, transparent 65%);
  bottom: -25%;
  right: -10%;
  opacity: 0.55;
  animation: cta-aurora-b 28s ease-in-out infinite alternate;
}
@keyframes cta-aurora-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(32%, 24%, 0) scale(1.18); }
}
@keyframes cta-aurora-b {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-28%, -18%, 0) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .final-cta::before,
  .final-cta::after { animation: none; }
}
.final-cta .container { position: relative; z-index: 1; }
.final-cta h2 {
  font-size: clamp(2rem, 3.8vw, 2.9rem);
  color: var(--inverted-text);
  margin-bottom: 1rem;
  font-weight: 700;
}
.final-cta p {
  color: var(--inverted-text-soft);
  margin: 0 auto 2rem;
  max-width: 56ch;
  font-size: 1.08rem;
}
.final-cta .cta-row {
  justify-content: center;
}
.final-cta .btn-primary {
  background: var(--inverted-text);
  color: var(--inverted-bg-2);
  border-color: var(--inverted-text);
}
.final-cta .btn-primary:hover {
  background: var(--brand);
  color: var(--inverted-text);
  border-color: var(--brand);
}
.final-cta .btn-outline {
  color: var(--inverted-text);
  border-color: rgba(255,255,255,0.55);
}
.final-cta .btn-outline:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--inverted-text);
}

/* ---------- [12] FOOTER (always inverted) ---------- */
.site-footer {
  background: var(--inverted-bg);
  color: var(--inverted-text-soft);
  padding-top: clamp(3.5rem, 6vw, 5rem);
  padding-bottom: 2.5rem;
}
.site-footer a { color: var(--inverted-text-soft); text-decoration: none; }
.site-footer a:hover { color: var(--brand-soft); }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.footer-tagline {
  margin: 1.1rem 0 0.65rem;
  max-width: 32ch;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--inverted-text-soft);
}
.footer-credit {
  margin: 0 0 0.65rem;
  max-width: 36ch;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--inverted-text-mute);
}
.footer-loc {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--inverted-text-mute);
  margin: 0;
}
.footer-col h4 {
  color: var(--inverted-text);
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 1.15rem;
}
.footer-col h4 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease, color 160ms ease;
}
.footer-col h4 a:hover {
  color: var(--brand-soft);
  border-bottom-color: var(--brand-soft);
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.55rem;
  font-size: 1rem;
}
.footer-bottom {
  border-top: 1px solid var(--inverted-rule);
  padding-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--inverted-text-mute);
}
.footer-bottom p { margin: 0; }
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-tagline,
  .footer-credit { max-width: none; margin-left: auto; margin-right: auto; }
  .footer-brand .brand-logo { margin-left: auto; margin-right: auto; }
  .footer-socials { justify-content: center; }
  .footer-bottom { text-align: center; }
}

/* Social-media icon row inside the Connect column */
.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}
.footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--inverted-text);
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.footer-socials a:hover {
  background: var(--brand);
  color: var(--inverted-text);
  transform: translateY(-2px);
}
.footer-socials svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* ================================================== */
/* SUB-PAGE COMPONENTS                                */
/* ================================================== */

/* TEAM (Who We Are) */
.team {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  background: var(--bg);
}
.team-group { margin-bottom: 4rem; }
.team-group:last-child { margin-bottom: 0; }
.team-group-title {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 700;
  margin: 0 0 1.5rem;
}
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 520px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 880px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.team-card {
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: border-color 160ms ease, transform 160ms ease;
}
.team-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.team-photo {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  /* Fallback gradient if img fails to load — same dimensions */
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-photo.team-photo--alt { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%); }
.team-photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
}
.team-photo--placeholder svg {
  width: 60%;
  height: 60%;
}

/* Page hero with side image (Who We Are page) */
.page-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 880px) {
  .page-hero-grid {
    grid-template-columns: 1.3fr 1fr;
    gap: 3rem;
  }
}
.page-hero-media {
  margin: 0;
  display: flex;
  justify-content: center;
}
.page-hero-media img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 24px 48px -20px rgba(7, 6, 20, 0.5);
}
.team-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
}
.team-role {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand);
  margin: 0;
  letter-spacing: 0.02em;
}
.team-bio { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.55; margin: 0; }

/* MISSION/VISION two-up */
.mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.mv-card {
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 2.25rem 2rem;
}
.mv-eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.85rem;
}
.mv-card h3 {
  font-size: 1.55rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
}
.mv-card p { color: var(--ink-soft); margin: 0; line-height: 1.6; }
@media (max-width: 720px) { .mv-grid { grid-template-columns: 1fr; } }

/* Photo-backed mv-card variant — used on Incubation governance section.
   Background image set via inline --card-bg, brand-blue gradient on top for legibility. */
.mv-card--bg {
  position: relative;
  isolation: isolate;
  background-color: var(--inverted-bg-2);
  background-image: var(--card-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--inverted-text);
  border: 0;
  min-height: 220px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.mv-card--bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(0, 51, 153, 0.70) 0%, rgba(7, 6, 20, 0.92) 100%);
  z-index: 0;
}
.mv-card--bg > * { position: relative; z-index: 1; }
.mv-card--bg .mv-eyebrow { color: var(--brand-soft); }
.mv-card--bg h3 { color: var(--inverted-text); }
.mv-card--bg p  { color: var(--inverted-text-soft); }

/* MISSION / VISION + WHERE WE WORK + POLICY (unified section) */
.mission-vision {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  background: var(--bg-soft);
}
.mv-grid--featured { gap: 1.75rem; }
.mv-card--featured {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--brand);
  border-radius: 18px;
  padding: clamp(1.75rem, 3.2vw, 2.75rem);
  box-shadow: 0 12px 36px -24px rgba(15, 23, 42, 0.25);
}
.mv-card--featured .mv-eyebrow {
  font-size: 0.82rem;
  color: var(--brand);
  margin-bottom: 1.5rem;
}
.mv-card--featured h3 {
  font-size: clamp(1.45rem, 2.4vw, 1.95rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin-bottom: 1.1rem;
}
.mv-card--featured p {
  font-size: 1.02rem;
  line-height: 1.65;
}
.mv-card--featured h3 em {
  font-style: normal;
  font-weight: 700;
  color: var(--brand);
}
.mv-supporting {
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding-top: clamp(1.75rem, 3vw, 2.25rem);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.mv-supporting .who-context-block { margin-bottom: 0; }
@media (min-width: 880px) {
  .mv-supporting {
    grid-template-columns: 1.4fr 1fr;
    gap: 2.5rem;
    align-items: start;
  }
}

/* ORIGIN / TIMELINE */
.origin {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  background: var(--bg-blue);
  border-block: 1px solid var(--rule);
}
.origin-quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.7vw, 2.1rem);
  line-height: 1.3;
  font-weight: 600;
  color: var(--ink);
  max-width: 24ch;
  margin: 0 auto 1rem;
  text-align: center;
  letter-spacing: -0.02em;
}
.origin-attr {
  text-align: center;
  font-size: 0.92rem;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 3rem;
}
.origin-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.origin-step h4 {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.65rem;
}
.origin-step h5 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.origin-step p { color: var(--ink-soft); margin: 0; font-size: 0.96rem; }
@media (max-width: 720px) { .origin-steps { grid-template-columns: 1fr; } }

/* DEEP PILLAR LIST (What We Do parent) */
.pillars-deep {
  padding-block: clamp(4rem, 7vw, 6.5rem);
}
.pillar-deep {
  position: relative;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.75rem, 3.5vw, 2.75rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  overflow: hidden;
  isolation: isolate;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 200ms ease;
}
/* Brand-blue accent rail on the left edge */
.pillar-deep::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-soft) 100%);
  border-radius: 4px 0 0 4px;
}
.pillar-deep:last-child { margin-bottom: 0; }
.pillar-deep:hover {
  transform: translateY(-3px);
  box-shadow: 0 32px 60px -32px rgba(0, 103, 255, 0.18);
  border-color: var(--brand-pale);
}
/* Small numbered chip in the top-left of the card content area */
.pillar-deep-num {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brand);
  background: var(--brand-pale);
  border-radius: 999px;
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: 1.25rem;
}
.pillar-deep > div { display: flex; flex-direction: column; }
.pillar-deep h3 {
  font-size: clamp(1.5rem, 2.5vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 0.5rem;
}
.pillar-deep .pillar-deep-sub {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--brand-pale);
  padding: 0.4em 0.85em;
  border-radius: 999px;
  margin: 0 0 1.25rem;
}
.pillar-deep p { color: var(--ink-soft); margin: 0 0 1rem; line-height: 1.6; }
.pillar-deep ul {
  margin: 1rem 0 1.25rem;
  padding-left: 0;
  list-style: none;
}
.pillar-deep ul li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.55rem;
  color: var(--ink-soft);
  font-size: 0.97rem;
  line-height: 1.5;
}
.pillar-deep ul li::before {
  content: "\2192"; /* right arrow */
  position: absolute;
  left: 0; top: 0;
  color: var(--brand);
  font-weight: 700;
}
.pillar-deep .link-arrow { margin-top: 0.5rem; align-self: flex-start; }

/* "Feature" variant — used on Incubation Factory "Active builds" section.
   Adds a brand-tinted backdrop with image so the white product cards pop. */
.products--feature {
  position: relative;
  isolation: isolate;
  background-color: var(--inverted-bg-2);
  background-image:
    linear-gradient(160deg, rgba(0, 51, 153, 0.82) 0%, rgba(7, 6, 20, 0.92) 100%),
    url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=1600&q=80&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--inverted-text);
}
.products--feature .section-eyebrow { color: var(--brand-soft); }
.products--feature .section-title   { color: var(--inverted-text); }
.products--feature .section-lede    { color: var(--inverted-text-soft); max-width: 60ch; }

/* ABOUT THE INCUBATION FACTORY — long-form intro with scannable subheadings */
.about-incubation {
  padding-block: clamp(4rem, 7vw, 6rem);
  background: var(--bg);
}
.about-incubation .section-title { max-width: 32ch; }
.about-incubation-block {
  max-width: 70ch;
  margin: 0 0 2.25rem;
}
.about-incubation-block:last-child { margin-bottom: 0; }
.about-incubation-block h3 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand);
  margin: 0 0 0.75rem;
}
.about-incubation-block p {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}

/* WHAT WE OFFER — compact single-tab summary (replaces the tabbed panel) */
.offer-summary {
  padding-block: clamp(3.5rem, 6vw, 5rem);
  background: var(--bg-blue);
}
.offer-summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 880px) {
  .offer-summary-list { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
}
.offer-summary-list li {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.offer-summary-num {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--brand-pale);
  color: var(--brand);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.offer-summary-list strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.offer-summary-list p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* PRODUCT FEATURE — one product per section, 2-column on desktop, alternating layout */
.product-feature {
  padding-block: clamp(3rem, 5vw, 4.5rem);
  background: var(--bg);
}
.product-feature--alt {
  background: var(--bg-blue);
}
.product-feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 880px) {
  .product-feature-grid { grid-template-columns: 1fr 1fr; }
  /* Alternate which side the media sits on, every other product */
  .product-feature--alt .product-feature-grid .product-feature-text  { order: 2; }
  .product-feature--alt .product-feature-grid .product-feature-media { order: 1; }
}
.product-feature-status {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-pale);
  padding: 0.35em 0.85em;
  border-radius: 999px;
  margin: 0 0 1rem;
}
.product-feature-status--live {
  color: var(--status-live);
  background: var(--status-live-pale);
}
.product-feature-text h3 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.75rem;
}
.product-feature-sub {
  font-size: 1.05rem;
  color: var(--brand);
  font-weight: 600;
  margin: 0 0 1rem;
  line-height: 1.4;
}
.product-feature-text > p:not(.product-feature-sub):not(.product-feature-status) {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 1.25rem;
}
.product-feature-text .link-arrow { margin-top: 0.25rem; }

.product-feature-media {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 56px -28px rgba(15, 23, 42, 0.28);
}
.product-feature-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
}
.product-feature-media--icon {
  aspect-ratio: 1 / 1;
  max-width: 320px;
  margin: 0 auto;
  background: transparent;
  box-shadow: none;
}
.product-feature-media--icon svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  box-shadow: 0 28px 56px -22px rgba(0, 103, 255, 0.45);
}

/* "Coming soon" placeholder used where a product doesn't yet have a demo
   video or branded thumbnail. Matches the brand-blue gradient of the video
   thumbs so the section rhythm stays consistent. */
.product-feature-media--coming {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--inverted-bg-2);
  background-image: linear-gradient(160deg, rgba(0, 103, 255, 0.55) 0%, rgba(0, 51, 153, 0.30) 100%);
  color: var(--inverted-text);
  text-align: center;
}
.product-feature-coming-eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-soft);
}
.product-feature-coming-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--inverted-text);
}

/* Pillar deck (Incubation page) — three cards stacked, top fully visible,
   two peeking behind. Click top card or any dot to flip to the next. */
.pillar-deck {
  position: relative;
  max-width: 1040px;
  margin: 1.5rem auto 0;
}
.pillar-deck-cards {
  position: relative;
  transition: height 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pillar-deck-card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--brand);
  border-radius: 18px;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: 0 20px 50px -32px rgba(7, 6, 20, 0.25);
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 380ms ease,
              box-shadow 380ms ease;
  cursor: pointer;
}
/* Visual stack — front card fully visible, back cards only show as edges
   (small offset so no text behind is readable). */
.pillar-deck-card[data-pos="0"] {
  transform: translate(0, 0) scale(1);
  z-index: 3;
  opacity: 1;
}
.pillar-deck-card[data-pos="1"] {
  transform: translate(8px, 10px) scale(0.985);
  z-index: 2;
  opacity: 0.55;
}
.pillar-deck-card[data-pos="2"] {
  transform: translate(16px, 20px) scale(0.97);
  z-index: 1;
  opacity: 0.35;
}
.pillar-deck-card[data-pos="1"]:hover,
.pillar-deck-card[data-pos="2"]:hover { opacity: 0.8; }
.pillar-deck-card[data-pos="0"]:hover {
  box-shadow: 0 28px 60px -28px rgba(0, 103, 255, 0.30);
}
.pillar-deck-card h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 0.5rem;
}
.pillar-deck-card .pillar-deck-sub {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--brand-pale);
  padding: 0.4em 0.85em;
  border-radius: 999px;
  margin: 0 0 1.25rem;
}
.pillar-deck-card p {
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 1rem;
}
.pillar-deck-card ul {
  margin: 0.5rem 0 0;
  padding-left: 0;
  list-style: none;
}
.pillar-deck-card ul li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.5rem;
  color: var(--ink-soft);
  font-size: 0.97rem;
  line-height: 1.5;
}
.pillar-deck-card ul li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brand);
  font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  .pillar-deck-card { transition: none; }
}

.pillar-deck-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.pillar-deck-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.pillar-deck-dot {
  appearance: none;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--rule);
  cursor: pointer;
  transition: background 200ms ease, width 200ms ease, transform 200ms ease;
}
.pillar-deck-dot:hover { background: var(--ink-muted); }
.pillar-deck-dot.is-active {
  background: var(--brand);
  width: 28px;
}
.pillar-deck-dot:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
.pillar-deck-hint {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
}

/* ---------- PILLAR TABS (What We Do) ---------- */
.pillars-tabs {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  background: var(--bg);
}
.pillar-tablist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 720px) {
  .pillar-tablist { grid-template-columns: repeat(3, 1fr); gap: 0; }
}
.pillar-tab {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--ink-soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}
.pillar-tab:hover {
  color: var(--ink);
  background: var(--bg-soft);
}
.pillar-tab.is-active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  background: transparent;
}
.pillar-tab:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}
.pillar-tab-num {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  flex-shrink: 0;
}
.pillar-tab.is-active .pillar-tab-num {
  color: var(--brand-soft);
}
.pillar-tab-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.pillar-panel {
  padding: clamp(2rem, 4vw, 3rem) 0 0;
}
.pillar-panel[hidden] { display: none; }
.pillar-panel.is-active {
  animation: pillarFade 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes pillarFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pillar-panel h3 {
  font-size: clamp(1.5rem, 2.5vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 0.5rem;
}
.pillar-panel-sub {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--brand-pale);
  padding: 0.4em 0.85em;
  border-radius: 999px;
  margin: 0 0 1.25rem;
}
.pillar-panel p {
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 1rem;
  max-width: 70ch;
}
.pillar-panel ul {
  margin: 1rem 0 1.25rem;
  padding-left: 0;
  list-style: none;
  max-width: 70ch;
}
.pillar-panel ul li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.55rem;
  color: var(--ink-soft);
  font-size: 0.97rem;
  line-height: 1.5;
}
.pillar-panel ul li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brand);
  font-weight: 700;
}
.pillar-panel .link-arrow {
  display: inline-block;
  margin-top: 0.5rem;
}
.pillar-panel-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 0.5rem;
}
.pillar-panel-links .link-arrow { margin-top: 0; }

/* Research "Research in action" — modernised 2x2 card grid (uses .method-bar--cards) */
.method-bar--cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 720px)  { .method-bar--cards { grid-template-columns: 1fr 1fr; } }
.method-bar--cards .method-tile {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: clamp(1.5rem, 2.5vw, 1.85rem);
  overflow: hidden;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 200ms ease;
}
/* small brand-blue corner mark — subtle distinctive touch, not loud */
.method-bar--cards .method-tile::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 10px;
  height: 10px;
  background: var(--brand);
  border-radius: 2px;
  transition: transform 220ms ease;
}
.method-bar--cards .method-tile:hover {
  transform: translateY(-3px);
  border-color: var(--brand-pale);
  box-shadow: 0 22px 44px -28px rgba(0, 103, 255, 0.20);
}
.method-bar--cards .method-tile:hover::after { transform: rotate(45deg); }
.method-bar--cards .method-tile-eyebrow {
  margin: 0 0 0.75rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  padding-right: 1.5rem; /* clear the corner mark */
}
.method-bar--cards .method-tile h4 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.65rem;
}
.method-bar--cards .method-tile p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Dark variant of .method section — used on what-we-do for "How we work".
   Matches the brand-dark recipe used on hero / page-hero / final-cta:
   navy --inverted-bg-2 base with a brand-blue + accent radial glow.
   Stays dark in both light + dark themes (does not flip). */
.method--dark {
  position: relative;
  overflow: hidden;
  background: var(--inverted-bg-2);
  color: var(--inverted-text);
  border-block-color: rgba(255, 255, 255, 0.06);
}
.method--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 103, 255, 0.22), transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(255, 105, 0, 0.10), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.method--dark > .container { position: relative; z-index: 1; }
.method--dark .section-eyebrow { color: var(--brand-soft); }
.method--dark .section-title { color: var(--inverted-text); }
.method--dark .section-lede { color: var(--inverted-text-soft); }
.method--dark .method-bar--cards .method-tile {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(2px);
}
.method--dark .method-bar--cards .method-tile:hover {
  border-color: var(--brand-soft);
  box-shadow: 0 22px 44px -28px rgba(0, 103, 255, 0.45);
}
.method--dark .method-bar--cards .method-tile-eyebrow { color: var(--brand-soft); }
.method--dark .method-bar--cards .method-tile h4 { color: var(--inverted-text); }
.method--dark .method-bar--cards .method-tile p { color: var(--inverted-text-soft); }

/* Research "Our approach" — paragraph + EU badge side panel */
.approach-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
  margin-top: 1.5rem;
}
@media (min-width: 880px) {
  .approach-grid { grid-template-columns: 1.5fr 1fr; align-items: center; }
}
.approach-text {
  color: var(--ink-soft);
  font-size: 1.08rem;
  line-height: 1.65;
  margin: 0;
}
.approach-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.25rem;
}
.approach-points > li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 1rem;
  align-items: start;
}
.approach-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--brand-pale);
  border-radius: 10px;
  color: var(--brand);
  flex-shrink: 0;
}
.approach-icon svg {
  width: 24px;
  height: 24px;
}
.approach-points strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  letter-spacing: -0.005em;
}
.approach-points p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}
.eu-badge {
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 1.5rem;
  text-align: center;
}
.eu-badge img {
  width: 96px;
  height: auto;
  margin: 0 auto 1rem;
  display: block;
  border-radius: 6px;
}
.eu-badge-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  margin: 0 0 0.4rem;
  letter-spacing: -0.005em;
}
.eu-badge-text {
  margin: 0;
  font-size: 0.86rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* What-we-do framework — bulleted approach text */
.approach-lede {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 1.25rem;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.approach-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: 0.75rem;
}
.approach-bullets li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.55;
}
.approach-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background: var(--brand);
  border-radius: 999px;
}
.approach-bullets li strong { color: var(--ink); }
.approach-foot {
  color: var(--ink-muted);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  max-width: 60ch;
}

/* What-we-do framework figure — flow + cycle diagram */
.framework-figure {
  margin: 0;
  text-align: center;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: clamp(1rem, 2vw, 1.5rem);
  align-self: center;
}
/* Lead variant — diagram sits standalone above the tabs, wider + much shorter */
.framework-figure--lead {
  max-width: 940px;
  margin: clamp(1.5rem, 3vw, 2.5rem) auto clamp(1.5rem, 3vw, 2rem);
  align-self: auto;
  padding: clamp(1rem, 2vw, 1.5rem) clamp(0.5rem, 2vw, 1.5rem);
}
/* Active pillar — used by the auto-cycle animation and by tab clicks */
.framework-cycle .framework-node {
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center;
  transform-box: fill-box;
}
.framework-cycle .framework-node rect {
  transition: fill 320ms ease, stroke 320ms ease, stroke-width 320ms ease;
}
.framework-cycle .framework-node.is-active rect {
  fill: var(--brand);
  stroke: var(--brand-deep);
  stroke-width: 3;
}
.framework-cycle .framework-node.is-active text {
  fill: var(--bg);
}
.framework-cycle .framework-node.is-active .framework-node-sub {
  fill: rgba(255,255,255,0.85);
}
.framework-cycle .framework-node.is-active {
  transform: translateY(-3px);
}
.framework-cycle .framework-node:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}
/* The caption beneath the diagram */
.framework-caption {
  margin: 1.25rem auto 0;
  max-width: 56ch;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.5;
  color: var(--ink-soft);
  transition: opacity 220ms ease;
}
.framework-caption.is-fading { opacity: 0; }
.framework-caption-name { color: var(--brand); font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .framework-caption { transition: none; }
  .framework-cycle .framework-node { transition: none; }
  .framework-cycle .framework-node rect { transition: none; }
}
/* Closing line beneath the entire combined section */
.framework-foot {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 70ch;
}
.framework-cycle {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 0.5rem;
}
.framework-cycle .framework-node rect {
  fill: var(--bg);
  stroke: var(--brand);
  stroke-width: 2;
}
.framework-cycle .framework-node text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  fill: var(--ink);
  letter-spacing: -0.005em;
}
.framework-cycle .framework-node .framework-node-sub {
  font-weight: 400;
  font-size: 10px;
  fill: var(--ink-soft);
}
.framework-cycle .framework-arrow {
  stroke: var(--brand);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.framework-cycle .framework-loop {
  stroke: var(--brand-soft);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 4 4;
  stroke-linecap: round;
}
.framework-cycle .framework-loop-arrow {
  stroke: var(--brand-soft);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}
.framework-cycle .framework-loop-label {
  font-family: var(--font-body);
  font-size: 9px;
  fill: var(--ink-muted);
  letter-spacing: 0.04em;
}
.framework-figure figcaption {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}

/* Research-page focus blocks — 5 sections each with eyebrow + title + lede,
   paired image, and an inline "READ MORE" disclosure for the full body.
   Mobile-first single column; text + image side-by-side at 880px+. */
.research-focus {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  background: var(--bg);
}
.research-focus-block {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--rule);
}
.research-focus-block:first-of-type { padding-top: 0; }
.research-focus-block:last-of-type {
  padding-bottom: 0;
  border-bottom: none;
}
.research-focus-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}
@media (min-width: 880px) {
  .research-focus-grid {
    grid-template-columns: 1fr 1.05fr;
    column-gap: clamp(2rem, 5vw, 4rem);
  }
}
.research-focus-text .section-eyebrow { margin-bottom: 0.85rem; }
.research-focus-text .section-title {
  margin-bottom: 1rem;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  max-width: 22ch;
}
.research-focus-lede {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
}
.research-focus-image { margin: 0; }
.research-focus-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}
.research-focus-detail { margin-top: clamp(1.5rem, 3vw, 2rem); }
.research-focus-detail > summary {
  list-style: none;
  cursor: pointer;
  display: inline-block;
  padding: 0.4rem 0;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--brand);
  border-bottom: 1.5px solid var(--brand);
  transition: color 160ms ease, border-color 160ms ease;
}
.research-focus-detail > summary::-webkit-details-marker { display: none; }
.research-focus-detail > summary::after {
  content: " \2192";
  display: inline-block;
  transition: transform 220ms ease;
}
.research-focus-detail[open] > summary::after { transform: rotate(90deg); }
.research-focus-detail > summary:hover {
  color: var(--brand-deep);
  border-bottom-color: var(--brand-deep);
}
.research-focus-body {
  margin-top: 1.25rem;
  max-width: 75ch;
}
.research-focus-body p {
  margin: 0 0 1rem;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.7;
}
.research-focus-body p:last-child { margin-bottom: 0; }

/* Legacy .domain-* styles — superseded by .research-focus above. Kept
   collapsed for now in case any old anchor link uses these IDs; safe to
   delete once nothing references them. */
.domains {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  background: var(--bg);
}
.domain {
  background: var(--bg-blue);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--brand);
  border-radius: 16px;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  transition: box-shadow 240ms ease, border-color 200ms ease;
}
.domain:last-of-type { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.domain:hover {
  box-shadow: 0 24px 50px -32px rgba(0, 103, 255, 0.18);
}
.domain h3 {
  font-size: clamp(1.5rem, 2.5vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 1.25rem;
}
/* Collapsible context box inside a domain card — lets long policy/background
   copy live in the card without dominating it. Defaults closed. */
.domain-context {
  margin: 0 0 1.5rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brand);
  background: var(--bg);
  border-radius: 10px;
  overflow: hidden;
}
.domain-context > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.85rem 1.1rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--brand-deep);
  display: flex;
  align-items: center;
  user-select: none;
  transition: color 160ms ease, background 160ms ease;
}
.domain-context > summary::-webkit-details-marker { display: none; }
.domain-context > summary::after {
  content: "";
  margin-left: auto;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 220ms ease;
}
.domain-context[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.domain-context > summary:hover { color: var(--brand); background: rgba(0, 103, 255, 0.04); }
.domain-context-body {
  padding: 0.25rem 1.1rem 1rem;
}
.domain-context-body p {
  margin: 0 0 0.9rem;
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.65;
}
.domain-context-body p:last-child { margin-bottom: 0; }
.domain-bullets-label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 0.85rem;
}
.domain-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: 1rem;
}
.domain-bullets li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--ink-soft);
  font-size: 0.97rem;
  line-height: 1.55;
}
.domain-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background: var(--brand);
  border-radius: 999px;
}
.domain-bullets li strong {
  display: block;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 0.2rem;
  font-size: 1rem;
}
.domain-images {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.75rem;
}
@media (max-width: 600px) {
  .domain-images {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, 1fr);
  }
}
.domain-images img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 10px;
  background: var(--bg-blue);
}
/* Pull-statement at the close of the focus areas section — brand-blue band with image */
.domain-takeaway {
  position: relative;
  isolation: isolate;
  margin: clamp(3rem, 6vw, 5rem) 0 0;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  border-top: 0;
  border-radius: 18px;
  overflow: hidden;
  background-color: var(--brand-deep);
  background-image:
    linear-gradient(rgba(7, 6, 20, 0.45), rgba(7, 6, 20, 0.45)),
    linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%),
    url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=1600&q=80&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: normal, normal, normal;
}
.domain-takeaway::before {
  content: "\201C"; /* opening quote */
  display: block;
  font-family: var(--font-display);
  font-size: 3.5rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1;
  margin: 0 auto 0.5rem;
}
.domain-takeaway p {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  font-weight: 700;
  color: var(--inverted-text);
  line-height: 1.45;
  letter-spacing: -0.015em;
  margin: 0 auto;
  max-width: 60ch;
}

/* "Journal" variant — used on applied-research.html
   2x2 grid of vertical cards, each crowned with a circular emoji and a thin
   brand-blue accent across the top. Distinct visual signature from the
   horizontal-panel "lead" variant on the capability page. */
.pillars-deep--journal .pillars-deep-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 820px) {
  .pillars-deep--journal .pillars-deep-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.pillars-deep--journal .pillar-deep {
  margin: 0;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--brand);
  border-radius: 16px;
  display: block;
  isolation: isolate;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 200ms ease;
}
.pillars-deep--journal .pillar-deep::before { display: none; } /* drop the left rail */
.pillars-deep--journal .pillar-deep:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 50px -28px rgba(0, 103, 255, 0.20);
  border-color: var(--brand-pale);
  border-top-color: var(--brand);
}
.pillars-deep--journal .pillar-deep-num {
  /* big circular emoji crown, sits standalone above the title */
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 0 1.25rem;
  background: var(--brand-pale);
  border-radius: 50%;
  font-size: 2rem;
  font-weight: 400;
  color: inherit;
  line-height: 1;
}
.pillars-deep--journal .pillar-deep h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.65rem);
  margin-bottom: 0.5rem;
}
.pillars-deep--journal .pillar-deep .pillar-deep-sub {
  /* override the brand-pale pill — too loud at 4-per-card density */
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
}
.pillars-deep--journal .pillar-deep p {
  font-size: 0.95rem;
  line-height: 1.55;
}

/* "Lead" variant — used on capability-building.html
   Horizontal cards with a brand-blue label panel that alternates left/right
   for visual rhythm. Card surfaces alternate white / pale-blue for variation
   while keeping the entire palette inside brand-blue tints. */
.pillars-deep--lead .pillar-deep {
  padding: 0;
  gap: 0;
  background: var(--bg);
  border-radius: 20px;
  grid-template-columns: 1fr;            /* mobile default: stack */
}
.pillars-deep--lead .pillar-deep::before { display: none; }   /* panel replaces the rail */

@media (min-width: 720px) {
  .pillars-deep--lead .pillar-deep { grid-template-columns: 180px 1fr; }
  /* every other card: flip the panel to the right */
  .pillars-deep--lead .pillar-deep:nth-of-type(2n) {
    grid-template-columns: 1fr 180px;
  }
  .pillars-deep--lead .pillar-deep:nth-of-type(2n) .pillar-deep-num { order: 2; }
  .pillars-deep--lead .pillar-deep:nth-of-type(2n) > div          { order: 1; }
}

/* tonal alternation — every other card uses the pale brand surface */
.pillars-deep--lead .pillar-deep:nth-of-type(2n) {
  background: var(--bg-blue);
}

.pillars-deep--lead .pillar-deep-num {
  width: 100%;
  height: 100%;
  min-height: 96px;
  margin: 0;
  background:
    linear-gradient(rgba(7, 6, 20, 0.40), rgba(7, 6, 20, 0.40)),
    linear-gradient(165deg, var(--brand) 0%, var(--brand-deep) 100%);
  border-radius: 0;
  color: var(--inverted-text);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  letter-spacing: -0.02em;
  position: relative;
  overflow: hidden;
  z-index: 0;
  isolation: isolate;
}
/* Drifting orange bloom inside the brand-blue panel — slow, warm, alive.
   Sits behind the letter via negative z-index. Each card uses a slightly different
   delay so the three panels never pulse in unison. */
.pillars-deep--lead .pillar-deep-num::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 30% 70%, var(--accent), transparent 60%);
  filter: blur(36px);
  opacity: 0.55;
  z-index: -1;
  will-change: transform, opacity;
  animation: pillar-bloom 14s ease-in-out infinite alternate;
}
.pillars-deep--lead .pillar-deep:nth-of-type(2) .pillar-deep-num::after { animation-delay: -5s; animation-duration: 17s; }
.pillars-deep--lead .pillar-deep:nth-of-type(3) .pillar-deep-num::after { animation-delay: -9s; animation-duration: 20s; }
@keyframes pillar-bloom {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.45; }
  to   { transform: translate3d(28%, -22%, 0) scale(1.25); opacity: 0.75; }
}
@media (prefers-reduced-motion: reduce) {
  .pillars-deep--lead .pillar-deep-num::after { animation: none; }
}

.pillars-deep--lead .pillar-deep > div {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  position: relative;
  overflow: hidden;
}
/* Huge translucent watermark letter — bleeds off the bottom-right corner of each
   card body. Anchors the card visually and breaks the wall-of-text feel.
   Letter is derived per-card from nth-of-type so no HTML changes needed. */
.pillars-deep--lead .pillar-deep > div::before {
  position: absolute;
  bottom: -0.18em;
  right: -0.08em;
  font-family: var(--font-display);
  font-size: clamp(10rem, 28vw, 22rem);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.03em;
  color: var(--brand);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), opacity 600ms ease;
}
.pillars-deep--lead .pillar-deep:nth-of-type(1) > div::before { content: "A"; }
.pillars-deep--lead .pillar-deep:nth-of-type(2) > div::before { content: "B"; }
.pillars-deep--lead .pillar-deep:nth-of-type(3) > div::before { content: "C"; }
.pillars-deep--lead .pillar-deep:hover > div::before {
  transform: translate(-3%, -3%);
  opacity: 0.11;
}

.pillars-deep--lead .pillar-deep:hover {
  box-shadow: 0 32px 60px -32px rgba(0, 103, 255, 0.28);
}

/* "Feature" variant — inverted-permanent dark backdrop with a student-cohort
   photo. Used on the Capability page for the Internships & Fellowships block
   so the spotlight section reads as the page's centrepiece. The pillar card
   inside keeps its default light styling and pops against the dark surround. */
.pillars-deep--feature {
  position: relative;
  isolation: isolate;
  background-color: var(--inverted-bg-2);
  background-image:
    linear-gradient(160deg, rgba(0, 51, 153, 0.78) 0%, rgba(7, 6, 20, 0.92) 100%),
    url('images/photos/capability/vibrm-students.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--inverted-text);
}
.pillars-deep--feature .section-eyebrow { color: var(--brand-soft); }
.pillars-deep--feature .section-title   { color: var(--inverted-text); }
.pillars-deep--feature .section-title::after { background: var(--brand-soft); }

/* Learning models block (Capability page · section 01) — small uppercase
   subhead + arrow-bulleted list. Sits between the section lede and the
   role-card grid, framing the three delivery formats. */
.learning-models { margin: 0 0 2.25rem; }
.learning-models-title {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 0.9rem;
}
/* Used when the subhead sits as a sibling of a grid (not wrapped in a
   .learning-models block), e.g. "Role-based learnings" above the role grid. */
.learning-models-title--standalone {
  margin: 0 0 1.1rem;
}
.learning-models-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
}
.learning-models-list li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--ink-soft);
  font-size: 0.97rem;
  line-height: 1.55;
}
.learning-models-list li::before {
  content: "\2192";
  position: absolute;
  left: 0; top: 0;
  color: var(--brand);
  font-weight: 700;
}
.learning-models-list strong { color: var(--ink); font-weight: 600; }

/* Bootcamp role cards (Capability page · section 01) — 2×2 grid of crisp
   role cards summarising the live "Discover AI in Your World" tracks.
   Single shared CTA sits below. Mobile-first: 1 column, 2 cols at 720px. */
.bootcamp-roles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 0 0 1.75rem;
}
@media (min-width: 720px) {
  .bootcamp-roles {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}
/* Image-card variant — used for Learning models on capability-building.
   Image at the top fills the card edge-to-edge; title + teaser sit in a
   padded body below; popout still overlays beneath on click/hover. */
.bootcamp-role--with-image {
  padding: 0;
  overflow: hidden;
}
.bootcamp-role-image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.bootcamp-role-body {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.bootcamp-role--with-image h4 { margin: 0 0 0.5rem; }
.bootcamp-role--with-image .bootcamp-role-body > p { margin: 0; }
.bootcamp-role {
  position: relative;
  background-color: var(--inverted-bg-2);
  background-image: linear-gradient(160deg, rgba(0, 103, 255, 0.55) 0%, rgba(0, 51, 153, 0.30) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  cursor: pointer;
  color: var(--inverted-text);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 200ms ease;
}
.bootcamp-role:focus-visible { outline: 2px solid var(--brand-soft); outline-offset: 3px; }
.bootcamp-role:hover {
  transform: translateY(-2px);
  border-color: var(--brand-soft);
  box-shadow: 0 24px 44px -22px rgba(0, 51, 153, 0.55);
}
.bootcamp-role h4 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--inverted-text);
}
.bootcamp-role p {
  color: var(--inverted-text-soft);
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.55;
}

/* Sub-role detail — inline accordion expansion inside each card. Hidden by
   default, revealed on hover/focus (desktop) or on .is-open via tap (touch).
   Card grows in place; no z-index/clipping issues with sibling cards. */
.bootcamp-role-pop {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  border-top: 1px solid transparent;
  padding-top: 0;
  transition: max-height 360ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 220ms ease,
              margin-top 220ms ease,
              padding-top 220ms ease,
              border-top-color 220ms ease;
}
.bootcamp-role:hover .bootcamp-role-pop,
.bootcamp-role:focus-within .bootcamp-role-pop,
.bootcamp-role.is-open .bootcamp-role-pop {
  max-height: 26rem;
  opacity: 1;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top-color: var(--inverted-rule);
}
.bootcamp-role-pop-title {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--inverted-text-mute);
  margin: 0 0 0.55rem;
}
.bootcamp-role-pop-list {
  margin: 0;
  display: block;
}
.bootcamp-role-pop-list dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-soft);
  margin: 0.6rem 0 0;
  line-height: 1.2;
}
.bootcamp-role-pop-list dt:first-of-type { margin-top: 0; }
.bootcamp-role-pop-list dd {
  margin: 0.15rem 0 0;
  color: var(--inverted-text-soft);
  font-size: 0.9rem;
  line-height: 1.45;
}


/* Dual CTA row under section 01 — browse catalog + request custom programme. */
.bootcamp-cta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  align-items: center;
}

/* FLAGSHIP INITIATIVES (always inverted) */
.flagships {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  background: var(--inverted-bg-2);
  color: var(--inverted-text);
  position: relative;
  overflow: hidden;
}
.flagships::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 0%, rgba(0,103,255,0.25), transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(255,105,0,0.15), transparent 45%);
  pointer-events: none;
}
.flagships > .container { position: relative; }
.flagships .section-eyebrow { color: var(--brand-soft); }
.flagships h2 { color: var(--inverted-text); }
.flagship-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.flagship-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--inverted-rule);
  border-radius: 14px;
  padding: 1.75rem 1.4rem;
  backdrop-filter: blur(8px);
  transition: transform 200ms ease, border-color 200ms ease;
}
.flagship-card:hover { transform: translateY(-3px); border-color: var(--brand-soft); }
.flagship-card h4 {
  color: var(--inverted-text);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: -0.015em;
}
.flagship-card p { color: var(--inverted-text-soft); margin: 0; font-size: 0.92rem; line-height: 1.5; }

/* CROSS-CUTTING band — Knowledge & Community / Responsible AI */
.cross-cutting {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  background: var(--bg-soft);
}
.cross-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 720px) {
  .cross-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
.cross-card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--brand);
  border-radius: 14px;
  padding: clamp(1.5rem, 2.5vw, 2rem);
}
/* Photo-backed cross-cutting variant — used on what-we-do.html */
.cross-card--bg {
  position: relative;
  background-image: var(--card-bg);
  background-size: cover;
  background-position: center;
  border: 0;
  border-left: 0;
  color: var(--inverted-text);
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(340px, 34vw, 440px);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.cross-card--bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(0, 51, 153, 0.65) 0%, rgba(7, 6, 20, 0.88) 100%);
  z-index: 0;
}
.cross-card--bg > * {
  position: relative;
  z-index: 1;
}
.cross-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
}
.cross-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.6;
}
/* Photo-backed variant: override base ink colours so text reads on the dark gradient overlay. Must come after .cross-card h3 / p (same specificity) to win. */
.cross-card--bg h3 { color: var(--inverted-text); }
.cross-card--bg p  { color: var(--inverted-text-soft); }

/* Legacy .cross-row kept for any other pages that still use it */
.cross-row + .cross-row { margin-top: 1rem; }
.cross-row p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.6;
}
.cross-row strong { color: var(--ink); }

/* AUDIENCE TRACKS (Capability Building) */
.audiences {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  background: var(--bg-soft);
}
/* "Feature" variant — dark backdrop with image so audience cards (white) pop */
.audiences--feature {
  position: relative;
  isolation: isolate;
  background-color: var(--inverted-bg-2);
  background-image:
    linear-gradient(160deg, rgba(0, 51, 153, 0.82) 0%, rgba(7, 6, 20, 0.92) 100%),
    url('images/workshop-collaboration.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--inverted-text);
}
.audiences--feature .section-eyebrow { color: var(--brand-soft); }
.audiences--feature .section-title   { color: var(--inverted-text); }

/* Capability page · section 03 — Contexts + Audiences on light blue.
   Audiences stack first (4-col on wide desktop), Contexts below as horizontal
   chips, then the custom-programme CTA. Mobile-first. */
.capability-pair {
  background: var(--bg-blue);
  background-image: none;
  color: var(--ink);
}
.capability-pair .section-eyebrow { color: var(--brand); }
.capability-pair .section-title { color: var(--ink); }
.capability-pair-section + .capability-pair-section { margin-top: clamp(2rem, 4vw, 3rem); }
.capability-pair-h {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 1.1rem;
}
/* Audience cards keep their default dark gradient — the popout uses
   inverted-text tokens so white-card overrides would hide the popout copy. */
/* Force 4-up on wide desktop for the audience row in this section. */
@media (min-width: 1024px) {
  .capability-pair-roles { grid-template-columns: repeat(4, 1fr); }
}
/* Contexts as horizontal pill chips — click one to show its one-liner below. */
.capability-pair-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.65rem;
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
}
.capability-pair-chips li { display: contents; }
.context-chip {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.4;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.context-chip:hover { border-color: var(--brand); }
.context-chip:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-pale);
}
.context-chip[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--inverted-text);
}
.context-chip-desc {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.5;
  min-height: 1.5em; /* prevent layout jump if a description ever runs short */
}
.capability-pair-cta {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.capability-pair-cta .link-arrow { color: var(--brand); }
.audience-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  counter-reset: audience-num;
}
.audience-card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: clamp(1.75rem, 2.75vw, 2.25rem);
  counter-increment: audience-num;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 200ms ease;
}
/* Subtle numbered eyebrow above the title */
.audience-card::before {
  content: counter(audience-num, decimal-leading-zero);
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--brand);
  margin-bottom: 0.6rem;
}
.audience-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-pale);
  box-shadow: 0 18px 36px -22px rgba(0, 103, 255, 0.18);
}
.audience-card h4 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.audience-card p { color: var(--ink-soft); margin: 0; font-size: 0.96rem; line-height: 1.55; }
@media (max-width: 720px) { .audience-grid { grid-template-columns: 1fr; } }

/* PROGRAMME CATALOG (Learning Programmes) */
.programmes {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  background: var(--bg);
}
.programme-card {
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 2rem;
  margin-bottom: 1.25rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.programme-card:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 24px 48px -28px rgba(0,103,255,0.22);
}
.programme-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin-bottom: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.programme-meta .tag {
  display: inline-block;
  background: var(--bg-blue);
  color: var(--brand);
  padding: 0.3em 0.55em;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.4;
}
.programme-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  letter-spacing: -0.015em;
}
.programme-card p { color: var(--ink-soft); margin: 0; font-size: 0.97rem; }
.programme-actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .programme-card { grid-template-columns: 1fr; }
  .programme-actions { flex-wrap: wrap; }
}

/* Past bootcamps — archive variant. Section sits on bg-soft, cards flip to
   bg (white) so they still stand out. Tag is muted instead of brand-blue. */
.programmes--past {
  background: var(--bg-soft);
}
.programmes--past .section-lede {
  margin-bottom: 2rem;
  color: var(--ink-soft);
}
.programme-card--past {
  background: var(--bg);
}
.tag--past {
  background: var(--bg-soft);
  color: var(--ink-muted);
}

/* NETWORK GRID (Our Network) */
.network {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  background: var(--bg);
}
.network-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.network-card {
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1.5rem 1.2rem;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  min-height: 100px;
  transition: border-color 160ms ease, transform 160ms ease;
}
.network-card:hover { border-color: var(--brand); color: var(--ink); transform: translateY(-2px); }
.network-card .country {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
@media (max-width: 880px) { .network-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .network-grid { grid-template-columns: 1fr; } }

.geo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.8rem;
  margin-top: 1.5rem;
}
.geo-strip .geo-pill {
  padding: 0.5em 1em;
  background: var(--bg-blue);
  border-radius: 999px;
  color: var(--brand);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* CONTACT */
.contact {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  background: var(--bg);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: start;
}
.contact-form { display: grid; gap: 1rem; }
/* Honeypot — visually off-screen so real users never see it; bots that
   parse the form will still find the input and fill it, triggering reject. */
.hp-field {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-status {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  font-size: 0.95rem;
  line-height: 1.45;
}
.contact-status[data-kind="success"] {
  background: var(--bg-blue);
  color: var(--ink);
  border: 1px solid var(--brand-pale);
}
.contact-status[data-kind="error"] {
  background: var(--accent-pale);
  color: var(--ink);
  border: 1px solid var(--accent);
}
.contact-form label {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-muted);
  margin-bottom: 0.4rem;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.85em 1em;
  background: var(--bg);
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 160ms ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--brand);
}
.contact-form textarea { resize: vertical; min-height: 140px; }

/* Get-involved page: participation section (CTA to Google Form) + GDPR notice. */
.participate {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--bg-soft);
}
.participate-cta { margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0.5rem; }
.participate-cta-note {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.88rem;
}

.participate-notice {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--bg);
}
.notice-card {
  background: var(--bg-blue);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--brand);
  border-radius: 12px;
  padding: clamp(1.5rem, 3vw, 2rem);
  margin: 0;
}
.notice-card-label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 0.75rem;
}
.notice-card p {
  color: var(--ink-soft);
  font-size: 0.97rem;
  line-height: 1.65;
  margin: 0 0 0.9rem;
}
.notice-card-foot {
  font-size: 0.9rem;
}

/* Story cards on /get-involved — 3-up grid of impact stories, each with a
   cropped cartoon panel at top and the story text below. Mobile-first. */
.story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
@media (min-width: 720px) {
  .story-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .story-grid { grid-template-columns: repeat(3, 1fr); }
}
.story-card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.story-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-soft);
  box-shadow: 0 22px 44px -28px rgba(0, 103, 255, 0.22);
}
.story-card > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--bg-soft);
}
.story-card-body {
  padding: clamp(1.25rem, 2vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}
.story-card-body h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.story-card-body > p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.6;
}
.story-card-impact {
  margin-top: auto !important;
  background: var(--bg-blue);
  border-radius: 10px;
  padding: 0.7rem 0.95rem;
  font-size: 0.9rem !important;
  color: var(--ink) !important;
}
.story-card-impact strong {
  color: var(--brand);
  letter-spacing: 0.04em;
}
.contact-info {
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 2rem 1.75rem;
}
.contact-info h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.contact-info dl { margin: 0; }
.contact-info dt {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 700;
  margin-top: 1rem;
}
.contact-info dt:first-child { margin-top: 0; }
.contact-info dd { margin: 0.3rem 0 0; color: var(--ink-soft); font-size: 0.97rem; }
.contact-info dd a { color: var(--brand); font-weight: 600; text-decoration: none; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* NEWSLETTER / SIGNUP (Learning Programmes) */
.newsletter {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  background: var(--bg-blue);
  border-block: 1px solid var(--rule);
  text-align: center;
}
.newsletter-inner { max-width: 720px; margin: 0 auto; padding-inline: var(--gutter); }
.newsletter h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  margin-bottom: 0.85rem;
}
.newsletter p { color: var(--ink-soft); margin: 0 0 1.5rem; }
.newsletter-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
  margin: 1.5rem 0 2rem;
}
.newsletter-section {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1rem 0.85rem;
  text-align: left;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.newsletter-section span {
  display: block;
  font-size: 1.3rem;
  margin-bottom: 0.4rem;
}
.signup-form {
  display: flex;
  gap: 0.5rem;
  max-width: 480px;
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.4rem 0.4rem 0.4rem 1.4rem;
  box-shadow: 0 12px 32px -20px rgba(15,23,42,0.18);
}
.signup-form input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
}
.signup-form input::placeholder { color: var(--ink-muted); }
.signup-form .btn { padding-block: 0.75em; }
@media (max-width: 520px) {
  .signup-form { flex-direction: column; padding: 0.65rem; border-radius: 14px; }
  .signup-form input { padding: 0.8em 1em; }
  .signup-form .btn { width: 100%; justify-content: center; }
}

/* INTERNSHIPS section */
.internships {
  padding-block: clamp(4rem, 7vw, 6.5rem);
}
.internship-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.internship-card {
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 2.25rem 2rem;
}
.internship-card h3 {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.internship-card p { color: var(--ink-soft); margin: 0; }
@media (max-width: 720px) { .internship-row { grid-template-columns: 1fr; } }

/* Three quick facts above the internship track cards (duration, intake,
   compensation). Brand-blue chips matching the screenshot style. */
.internship-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin: 1.5rem 0;
}
@media (min-width: 720px) {
  .internship-facts {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}
.internship-fact {
  background: var(--bg-blue);
  border: 1px solid var(--rule-soft, var(--rule));
  border-radius: 14px;
  padding: 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.internship-fact-num {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--brand);
  line-height: 1.15;
}
.internship-fact-label {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

/* Standalone callout for the EU↔India differentiator. Brand-blue left
   rail + soft blue surface, visually distinct from the chips above. */
.internship-callout {
  margin: 0.5rem 0 1.5rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--brand);
  background: var(--bg-blue);
  border-radius: 0 12px 12px 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
}
.internship-callout strong { color: var(--brand); font-weight: 700; }

/* Internship selling-point highlights — three columns of (brand-blue outlined
   tag with big number + label) over (subtle grey body card). Mirrors the
   live aiforallglobal.org "Global AI Internship" treatment. Mobile-first. */
.internship-highlights {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 1.75rem 0 1.5rem;
}
@media (min-width: 720px) {
  .internship-highlights {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}
.internship-highlight {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.internship-highlight-tag {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  text-align: center;
  background-color: var(--inverted-bg-2);
  background-image: linear-gradient(160deg, rgba(0, 103, 255, 0.45) 0%, rgba(0, 51, 153, 0.25) 100%);
  color: var(--inverted-text);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 220ms ease;
}
.internship-highlight:hover .internship-highlight-tag {
  transform: translateY(-2px);
  border-color: var(--brand-soft);
  box-shadow: 0 18px 36px -16px rgba(0, 51, 153, 0.65);
}
.internship-highlight-body {
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.internship-highlight:hover .internship-highlight-body {
  transform: translateY(-2px);
}
.internship-highlight-tag .internship-highlight-num {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--inverted-text);
  margin: 0 0 0.2rem;
  line-height: 1.2;
}
.internship-highlight-tag .internship-highlight-label {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  line-height: 1.3;
}
.internship-highlight-body {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1.25rem 1.4rem;
  color: var(--ink);
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  flex: 1;
}

/* Single Apply CTA below the four track cards */
.internship-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2.25rem;
  text-align: center;
}
.internship-cta-note {
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin: 0;
}

/* ---------- Stats band ---------- */
/* Dark brand-blue band with big counter numbers. Used on the homepage between
   the film and "Who we are" to anchor the page with proof points. */
.stats-band {
  position: relative;
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
  background:
    linear-gradient(rgba(7, 6, 20, 0.40), rgba(7, 6, 20, 0.40)),
    linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: var(--inverted-text);
  overflow: hidden;
  isolation: isolate;
}
.stats-band .section-eyebrow {
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.18em;
}
.stats-band .section-title {
  color: var(--inverted-text);
  max-width: 28ch;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 720px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
  padding-left: 1.5rem;
  border-left: 3px solid var(--accent);
}
.stat-num {
  display: block;          /* inline spans can mis-fire IntersectionObserver on iOS */
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--inverted-text);
}
.stat-num .suffix {
  color: var(--accent);
  margin-left: 0.05em;
}
.stat-label {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.02em;
  max-width: 28ch;
}

/* ---------- Upcoming events (Learning page) ---------- */
/* Event cards pull from our LinkedIn events page — updated manually. */
.events {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  background: var(--bg-soft);
}
.events-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2.25rem;
}
@media (min-width: 720px)  { .events-grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; } }
@media (min-width: 1024px) { .events-grid { grid-template-columns: repeat(3, 1fr); } }
/* Variant for when there are exactly two upcoming events — cap at 2 cols so
   the cards stay wide instead of squeezing into 1/3 of the row. */
.events-grid--2 { max-width: 920px; }
@media (min-width: 1024px) {
  .events-grid--2 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Past sessions (LinkedIn Lives archive) ---------- */
.past-events {
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
  background: var(--bg);
}
.past-event-list {
  list-style: none;
  padding: 0;
  margin: 2.25rem 0 0;
  border-top: 1px solid var(--rule);
}
.past-event-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 720px) {
  .past-event-row {
    grid-template-columns: 200px 1fr;
    align-items: baseline;
    gap: 1.5rem;
    padding: 1.5rem 0;
  }
}
.past-event-date {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  white-space: nowrap;
}
.past-event-body h4 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 0.2rem;
  color: var(--ink);
}
.past-event-speaker {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0;
}

.event-card {
  display: flex;
  gap: 1.25rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 1.75rem;
  transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.event-card:hover {
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -24px rgba(0, 103, 255, 0.28);
}
.event-date {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: var(--inverted-text);
  border-radius: 14px;
  font-family: var(--font-display);
  line-height: 1;
}
.event-day {
  font-size: 1.6rem;
  font-weight: 700;
}
.event-month {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 0.3rem;
}
.event-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.event-format {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0;
}
.event-body h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}
.event-body p {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0 0 0.25rem;
}
.event-body .link-arrow {
  margin-top: auto;
  align-self: flex-start;
}
.events-footer {
  margin-top: 2.5rem;
  text-align: center;
}

/* ---------- Our Innovations (home) ---------- */
/* Two product-demo videos with thumbnails. Click-to-play (controls only). */
.innovations {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  background: var(--bg);
}
.innovations-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
  margin-top: 2.5rem;
}
@media (min-width: 880px) {
  .innovations-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
}
.innovation-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.innovation-video-wrap {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 24px 56px -28px rgba(15, 23, 42, 0.35);
  isolation: isolate;       /* keep iOS native player composited inside */
  -webkit-mask-image: -webkit-radial-gradient(white, black);  /* iOS clip-path fix */
}
.innovation-video {
  display: block;
  width: 100%;
  height: auto;             /* respect native video aspect ratio */
  aspect-ratio: 16 / 9;     /* but fall back to 16:9 before video loads */
  max-width: 100%;
  object-fit: cover;
}
.innovation-body h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  letter-spacing: -0.015em;
}
.innovation-body p {
  color: var(--ink-soft);
  margin: 0 0 0.75rem;
}

/* ---------- Prose pages (privacy, terms, etc.) ---------- */
.prose-section {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--bg);
}
.prose {
  color: var(--ink);
}
.prose-meta {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 2.5rem;
}
.prose h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-top: 2.75rem;
  margin-bottom: 0.85rem;
  color: var(--ink);
}
.prose h2:first-of-type { margin-top: 0; }
.prose h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--ink);
}
.prose p { margin: 0 0 1rem; line-height: 1.7; }
.prose ul {
  margin: 0 0 1.25rem 1.25rem;
  padding: 0;
  line-height: 1.7;
}
.prose ul li { margin-bottom: 0.4rem; }
.prose a {
  color: var(--brand);
  border-bottom: 1.5px solid var(--brand);
  text-decoration: none;
  padding-bottom: 1px;
  transition: color 160ms ease, border-color 160ms ease;
}
.prose a:hover { color: var(--brand-deep); border-bottom-color: var(--brand-deep); }
.prose strong { font-weight: 700; color: var(--ink); }

/* ---------- Subscribe form status ---------- */
.signup-status {
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin: 0.75rem 0 0;
  width: 100%;          /* break to a new line below the input + button */
  flex-basis: 100%;
}
.signup-status:empty { display: none; }

/* ---------- Cookie consent banner ---------- */
/* Injected by site.js on first visit. Brand-blue panel anchored bottom-center;
   Accept/Reject decision is stored in localStorage as `afa-cookie-consent`. */
.cookie-banner {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: 880px;
  width: calc(100% - 2rem);
  background: var(--inverted-bg);
  color: var(--inverted-text);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.55);
  z-index: 9999;
  animation: cookieRise 450ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes cookieRise {
  from { opacity: 0; transform: translate(-50%, 24px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.cookie-banner.is-dismissed {
  opacity: 0;
  transform: translate(-50%, 24px);
  transition: opacity 300ms ease, transform 300ms ease;
  pointer-events: none;
}
.cookie-banner-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}
@media (min-width: 720px) {
  .cookie-banner-inner { flex-direction: row; align-items: center; gap: 1.5rem; }
}
.cookie-banner p { margin: 0; font-size: 0.95rem; line-height: 1.5; flex: 1; }
.cookie-banner a {
  color: var(--inverted-text);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.5);
  text-underline-offset: 3px;
}
.cookie-banner-actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}
.cookie-banner .btn-ghost {
  color: var(--inverted-text);
  border-color: rgba(255, 255, 255, 0.30);
}
.cookie-banner .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.10);
  color: var(--inverted-text);
  border-color: rgba(255, 255, 255, 0.50);
}