/* ============================================================
   UKYIF — UK Youth Innovation Forum
   Shared design system
   Theme: navy/white base (from logo) + vivid accents (energy)
   ============================================================ */

/* ----------  Design tokens  ---------- */
:root {
  /* Brand — from the UK-flag logo */
  --navy:        #012169;   /* deep brand navy */
  --navy-700:    #0a2f8a;
  --navy-800:    #021a52;
  --navy-900:    #01123a;
  --red:         #C8102E;   /* British red */
  --red-600:     #e11233;

  /* Vivid accents — youthful energy */
  --blue:        #2563eb;   /* electric blue */
  --blue-light:  #3b82f6;
  --purple:      #7c3aed;   /* vivid purple */
  --yellow:      #ffce32;   /* bright CTA yellow */
  --yellow-600:  #f5b800;
  --coral:       #ff5a5f;

  /* Neutrals */
  --white:       #ffffff;
  --slate-50:    #f7f9fc;   /* light slate gray bg */
  --slate-100:   #eef2f8;
  --slate-200:   #dde5f0;
  --slate-400:   #94a3b8;
  --slate-500:   #64748b;
  --slate-600:   #475569;
  --ink:         #0f172a;   /* body text */
  --ink-soft:    #334155;

  /* Gradients */
  --grad-brand:  linear-gradient(135deg, #012169 0%, #1e3a8a 45%, #2563eb 100%);
  --grad-vivid:  linear-gradient(120deg, #2563eb 0%, #7c3aed 100%);
  --grad-cta:    linear-gradient(120deg, #012169 0%, #4338ca 50%, #7c3aed 100%);
  --grad-warm:   linear-gradient(120deg, #ff5a5f 0%, #ffce32 100%);

  /* Type */
  --font-head: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Spacing / layout */
  --container: 1200px;
  --gap: 1.5rem;
  --section-y: clamp(4.5rem, 9vw, 7.5rem);  /* 80-120px */
  --radius: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  /* Effects */
  --shadow-sm: 0 2px 8px rgba(2, 26, 82, .06);
  --shadow:    0 12px 30px rgba(2, 26, 82, .10);
  --shadow-lg: 0 24px 60px rgba(2, 26, 82, .18);
  --ring: 0 0 0 4px rgba(37, 99, 235, .18);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ----------  Reset / base  ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  font-size: 1.05rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--blue); text-decoration: none; transition: color .2s; }
a:hover { color: var(--purple); }
ul { list-style: none; padding: 0; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  color: var(--navy);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.02em;
}
h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.85rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
p  { color: var(--ink-soft); }

::selection { background: var(--yellow); color: var(--navy); }
/* keep light text on navy readable while selected (it must not stay white-on-pale) */
.section--navy ::selection,
.section--navy strong::selection { background: var(--yellow); color: var(--navy); }

/* ----------  Layout helpers  ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}
.section { padding-block: var(--section-y); }
.section--slate { background: var(--slate-50); }
.section--navy  { background: var(--navy); color: #dbe4f5; }
.section--navy h2, .section--navy h3 { color: #fff; }
/* plain body paragraphs need an explicit light colour on navy, otherwise the
   global `p { color: var(--ink-soft) }` wins over the inherited light colour
   and renders dark-on-dark (nearly invisible). */
.section--navy p { color: #c8d4ec; }
.section--navy strong { color: #fff; }
.narrow { max-width: 760px; }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #1d4ed8;
  background: rgba(37, 99, 235, .16);
  padding: .4rem .9rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1.1rem;
}
.section--navy .eyebrow { color: var(--yellow); background: rgba(255, 206, 50, .14); }
/* On a hero (video/photo bg) the eyebrow needs a darker chip so it stays legible */
.hero .eyebrow {
  color: #fff;
  background: rgba(1, 18, 58, .55);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, .22);
}

.lead { font-size: 1.18rem; color: var(--slate-600); max-width: 60ch; }
.section--navy .lead { color: #c2cfe8; }

.section-head { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.section-head.center { margin-inline: auto; }

/* ----------  Page masthead (world-class header, no photo hero)  ---------- */
/* One left-aligned title block in a light slate-50 band ended by a hairline.
   Replaces the old "two stacked centered headings" look. Used on the
   no-hero content pages (get-involved, partnerships). */
.page-masthead {
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-200);
  padding-block: var(--section-y) clamp(2.8rem, 6vw, 4.2rem);
}
/* the first content section right after the masthead shouldn't double up padding */
.page-masthead + .section { padding-top: clamp(2.8rem, 6vw, 4.2rem); }

.page-head {
  max-width: 820px;
  position: relative;
  padding-left: clamp(1rem, 2.2vw, 1.5rem);
}
.page-head::before {            /* slim brand accent rule beside the title cluster */
  content: ""; position: absolute; left: 0; top: .35rem; bottom: .35rem;
  width: 4px; border-radius: var(--radius-pill); background: var(--grad-brand);
}
.page-head h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); margin: .4rem 0 1rem; }
.page-head .lead { margin-top: 0; }
/* opt-in centering kept for any future use, not used on these pages */
.page-head.center { margin-inline: auto; text-align: center; padding-left: 0; }
.page-head.center::before { display: none; }
@media (max-width: 560px) {
  .page-head { padding-left: 0; }
  .page-head::before { display: none; }
  .page-masthead { padding-block: clamp(3rem, 12vw, 4.5rem) clamp(2.2rem, 6vw, 3.2rem); }
}

/* ----------  Buttons  ---------- */
.btn {
  --btn-bg: var(--navy);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  padding: .9rem 1.6rem;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--btn-fg); }
.btn:active { transform: translateY(-1px); }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn--primary { --btn-bg: var(--yellow); --btn-fg: var(--navy); }
.btn--primary:hover { background: var(--yellow-600); }
.btn--vivid   { background: var(--grad-vivid); }
.btn--brand   { background: var(--grad-cta); }
.btn--ghost {
  background: transparent; color: var(--navy); border-color: var(--slate-200);
  box-shadow: none;
}
.btn--ghost:hover { border-color: var(--navy); color: var(--navy); background: var(--slate-50); }
.btn--on-dark { background: rgba(255,255,255,.1); color:#fff; border-color: rgba(255,255,255,.35); backdrop-filter: blur(4px); }
.btn--on-dark:hover { background: rgba(255,255,255,.18); color:#fff; }
.btn--lg { padding: 1.05rem 2rem; font-size: 1.08rem; }
.btn--block { display: flex; width: 100%; justify-content: center; }

.textlink {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-head); font-weight: 600;
}
.textlink .arrow { transition: transform .25s var(--ease); }
.textlink:hover .arrow { transform: translateX(4px); }

/* ----------  Header / Nav  ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--slate-100);
  transition: box-shadow .3s, background .3s;
}
.site-header.scrolled { box-shadow: var(--shadow-sm); }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px; gap: 1.5rem;
}
.nav__logo { flex: 0 0 auto; }
.nav__logo img { height: 46px; width: auto; }
@media (max-width: 1024px) { .nav__logo img { height: 40px; } }
/* desktop: links + CTA sit on one row, pushed to the right of the logo */
.nav__menu {
  display: flex; align-items: center; gap: .75rem; margin-left: auto;
}
.nav__links {
  display: flex; align-items: center; gap: .15rem; flex-wrap: nowrap;
}
.nav__links a {
  font-family: var(--font-head); font-weight: 500; font-size: .95rem;
  color: var(--ink-soft); padding: .55rem .7rem; border-radius: 10px;
  transition: color .2s, background .2s; position: relative; white-space: nowrap;
}
.nav__links a:hover { color: var(--navy); background: var(--slate-50); }
.nav__links a.active { color: var(--navy); }
.nav__links a.active::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .25rem;
  height: 3px; border-radius: 3px; background: var(--grad-vivid);
}
.nav__cta { flex: 0 0 auto; }
.nav__toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; border-radius: 10px; padding: 10px;
}
.nav__toggle span { display:block; height:2.5px; background: var(--navy); border-radius:2px; transition: .3s var(--ease); }
.nav__toggle span + span { margin-top: 5px; }
.nav__toggle.open span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
.nav__toggle.open span:nth-child(2){ opacity: 0; }
.nav__toggle.open span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 1024px) {
  .nav__toggle { display: block; }
  .nav__menu {
    position: fixed; inset: 76px 0 auto 0;
    background: #fff; border-bottom: 1px solid var(--slate-100);
    flex-direction: column; align-items: stretch; gap: .2rem; margin-left: 0;
    padding: 1rem clamp(1.1rem,4vw,2.5rem) 1.6rem;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: .28s var(--ease); box-shadow: var(--shadow);
    display: flex;
    /* never taller than the screen below the 76px header — scroll if it is */
    max-height: calc(100vh - 76px);
    max-height: calc(100dvh - 76px);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .nav__menu.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav__links { flex-direction: column; align-items: stretch; gap: .15rem; }
  .nav__links a { display: block; padding: .85rem .9rem; font-size: 1.05rem; line-height: 1.3; }
  .nav__links a.active::after { display: none; }
  .nav__links a.active { background: var(--slate-50); }
  .nav__cta { margin: .6rem 0 0; }
  .nav__cta .btn { width: 100%; justify-content: center; }
}

/* ----------  Hero  ---------- */
.hero {
  position: relative; color: #fff; isolation: isolate;
  padding-block: clamp(5rem, 11vw, 9rem);
  background: var(--grad-brand);
  overflow: hidden;
}
.hero::before {  /* dark overlay so white text pops */
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(124,58,237,.45), transparent 60%),
    radial-gradient(700px 500px at 0% 110%, rgba(37,99,235,.5), transparent 60%),
    linear-gradient(180deg, rgba(1,18,58,.25), rgba(1,18,58,.55));
}
.hero__blob {
  position:absolute; z-index:-1; border-radius:50%; filter: blur(8px);
  opacity:.5; mix-blend-mode: screen; animation: float 14s var(--ease) infinite;
}

/* ---- Video background hero ----
   Layers (back -> front): .hero__poster (img) -> .hero__video -> ::before wash -> content.
   Using a real <img> for the poster (not a CSS background) means the relative
   path resolves against the HTML page and works locally and on the server. */
.hero--video { background: var(--navy-900); min-height: clamp(440px, 72vh, 720px); }
.hero__poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;                 /* deepest visible layer */
}
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;                 /* sits on the poster; revealed when playing */
}
/* a softer, on-brand wash over the poster/footage so headings stay crisp
   but the photo/footage still reads clearly through it.
   z-index:1 = above the video (0), below the hero content (2). */
.hero--video::before {
  z-index: 1;
  background:
    radial-gradient(900px 520px at 80% -10%, rgba(124,58,237,.38), transparent 62%),
    radial-gradient(760px 520px at 0% 110%, rgba(37,99,235,.42), transparent 62%),
    linear-gradient(180deg, rgba(1,18,58,.45), rgba(1,18,58,.62));
}
.hero--video .hero__inner { position: relative; z-index: 2; }   /* text above the wash */
.hero--video .hero__blob { opacity:.22; z-index: 1; filter: blur(40px); }   /* soft ambient glow, not hard discs */

.hero__video { opacity: 0; transition: opacity .6s var(--ease); }
.hero__video.is-playing { opacity: 1; }

/* Tap-to-play button (DopaWork style): big circle with a play triangle.
   Hidden on desktop where the video autoplays silently; shown on phones. */
.hero__play {
  position: absolute; inset: 0; margin: auto;
  width: 84px; height: 84px; border-radius: 50%;
  display: none; place-items: center; cursor: pointer; z-index: 3;
  border: 0; color: var(--navy);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 34px rgba(1,18,58,.35);
  transition: transform .3s var(--ease), background .3s var(--ease);
  animation: heroPlayPulse 2.6s ease-in-out infinite;
}
.hero__play:hover { transform: scale(1.08); background:#fff; }
.hero__play:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
.hero__play-ico { font-size: 1.9rem; margin-left: 5px; line-height: 1; }
.hero__play.is-hidden { display: none !important; }
@keyframes heroPlayPulse {
  0%, 100% { box-shadow: 0 12px 34px rgba(1,18,58,.35); }
  50%      { box-shadow: 0 12px 34px rgba(1,18,58,.35), 0 0 0 14px rgba(255,255,255,.16); }
}

/* Desktop (>640px): video autoplays silently, no button needed */
@media (min-width: 641px) {
  .hero__play { display: none !important; }
}
/* Phones: show the play button over the poster; video only plays on tap */
@media (max-width: 640px) {
  .hero__play { display: grid; }
  .hero--video.is-playing .hero__play { display: none; }
}
/* Reduced motion: never autoplay; offer the tap-to-play button instead, no pulse */
@media (prefers-reduced-motion: reduce) {
  .hero__play { display: grid; animation: none; }
  .hero--video.is-playing .hero__play { display: none; }
}
.hero h1 { color:#fff; }
.hero h1 .hl { background: var(--grad-warm); -webkit-background-clip: text; background-clip:text; color: transparent; }
.hero__sub { font-size: 1.2rem; color: #d7e0f4; max-width: 56ch; margin: 1.5rem 0 2.2rem; }
.hero__cta { display:flex; flex-wrap:wrap; gap:1rem; }
.hero__inner { max-width: 740px; }
.hero--page { padding-block: clamp(4rem, 8vw, 6rem); }
.hero--page .hero__sub { margin-bottom: 0; }

/* Page hero with a full-width background photo + dark overlay (white text pops) */
.hero--photo { background: var(--navy-900); }
.hero--photo .hero__poster { z-index: -2; }
.hero--photo::before {  /* dark overlay tuned for photo legibility */
  z-index: -1;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(124,58,237,.35), transparent 60%),
    linear-gradient(180deg, rgba(1,18,58,.55), rgba(1,18,58,.78));
}
.hero--photo .hero__inner { position: relative; z-index: 1; }

/* ---- Image slider hero (JYIF-style) ----
   Layers (back -> front): .hero__slide img -> ::before wash -> content/controls.
   Slides cross-fade; the active one is opaque, the rest are faded out. */
.hero--slider {
  background: var(--navy-900);
  min-height: clamp(460px, 78vh, 760px);
  display: flex; align-items: center;
}
.hero__slides { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1s var(--ease);
  will-change: opacity;
}
.hero__slide.is-active { opacity: 1; }
.hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 7s linear;
}
.hero__slide.is-active .hero__bg { transform: scale(1); }   /* slow Ken-Burns zoom on the active slide */

/* dark/brand wash over the photos so headings stay crisp (above slides, below content) */
.hero--slider::before {
  z-index: 1;
  background:
    radial-gradient(900px 520px at 80% -10%, rgba(124,58,237,.34), transparent 62%),
    radial-gradient(760px 520px at 0% 110%, rgba(37,99,235,.38), transparent 62%),
    linear-gradient(180deg, rgba(1,18,58,.52), rgba(1,18,58,.70));
}
.hero--slider .hero__inner { position: relative; z-index: 2; width: 100%; }
.hero--slider .hero__blob { opacity: .2; z-index: 1; filter: blur(40px); }

/* Prev / next arrows */
.hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 0; color: #fff; font-size: 2rem; line-height: 1;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(4px);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.hero__arrow:hover { background: rgba(255,255,255,.28); }
.hero__arrow:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.hero__arrow--prev { left: clamp(.6rem, 2vw, 1.6rem); }
.hero__arrow--next { right: clamp(.6rem, 2vw, 1.6rem); }
.hero__arrow span, .hero__arrow { padding-bottom: 4px; }

/* Dots */
.hero__dots {
  position: absolute; left: 0; right: 0; bottom: clamp(1rem, 3vh, 1.8rem);
  z-index: 3; display: flex; gap: .55rem; justify-content: center;
}
.hero__dot {
  width: 11px; height: 11px; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255,255,255,.7); background: transparent; padding: 0;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.hero__dot:hover { background: rgba(255,255,255,.5); }
.hero__dot.is-active { background: #fff; transform: scale(1.15); }
.hero__dot:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

@media (max-width: 640px) {
  .hero__arrow { display: none; }   /* swipe-free phones rely on dots + autoplay */
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
  .hero__bg { transition: none; transform: none; }
}

@keyframes float {
  0%,100% { transform: translateY(0) translateX(0); }
  50%     { transform: translateY(-26px) translateX(14px); }
}

/* ----------  Grids  ---------- */
.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid--gap-lg { gap: 2rem; }
@media (max-width: 920px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* two-column text + visual */
.split {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.split--rev .split__visual { order: -1; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--rev .split__visual { order: 0; }
}

/* ----------  Cards  ---------- */
.card {
  background: #fff; border: 1px solid var(--slate-100);
  border-radius: var(--radius); padding: 2rem;
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
  height: 100%;
}
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card__icon {
  width: 60px; height: 60px; border-radius: 16px;
  display: grid; place-items: center; font-size: 1.7rem;
  background: var(--grad-vivid); color:#fff; margin-bottom: 1.3rem;
  box-shadow: 0 10px 22px rgba(37,99,235,.28);
}
.card__icon svg { width: 28px; height: 28px; display: block; }
.card__icon--warm { background: var(--grad-warm); box-shadow: 0 10px 22px rgba(255,90,95,.28); }
.card__icon--navy { background: var(--navy); box-shadow: 0 10px 22px rgba(1,33,105,.3); }

/* --- Icon style options (no colour) --- */
/* Option 1: line icon, no background */
.card__icon--plain {
  background: none; box-shadow: none; color: var(--navy);
  width: 48px; height: 48px; margin-bottom: 1rem;
}
.card__icon--plain svg { width: 38px; height: 38px; stroke-width: 1.6; }
/* Option 2: light neutral grey square */
.card__icon--soft {
  background: var(--slate-100); box-shadow: none; color: var(--navy);
  border: 1px solid var(--slate-200);
}
/* Option 3: uniform navy square (white icon) */
.card__icon--mono { background: var(--navy); box-shadow: none; color: #fff; }
.card h3 { margin-bottom: .6rem; }
.card p  { font-size: .98rem; }

/* pillar (transparent over slate) */
.pillar { text-align: left; }

/* program card */
.program {
  display: flex; flex-direction: column; gap: 1rem;
  border-top: 5px solid transparent;
}
/* photo banner at the top of a program card.
   The photo is a clean, self-contained banner; nothing overlaps its edge —
   the icon and all text live calmly in the card body below it. */
.program--photo { padding: 0; overflow: hidden; }
.program__img {
  position: relative; margin: 0; aspect-ratio: 16/9; overflow: hidden;
}
.program__img img { width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.program--photo:hover .program__img img { transform: scale(1.06); }
/* icon now sits in the body (not floating on the photo); it gets a soft tile
   so it reads as part of the text block, not a stray graphic on the image. */
.program--photo > .card__icon {
  width: 48px; height: 48px; margin: 1.6rem 2rem 0;   /* breathing room under the photo */
  background: var(--slate-100); border: 1px solid var(--slate-200);
  color: var(--navy); box-shadow: none; border-radius: 14px;
}
.program--photo > .card__icon svg { width: 26px; height: 26px; }
.program--photo > *:not(.program__img):not(.card__icon) { margin-inline: 2rem; }
.program--photo > h3 { margin-top: 1rem; }
.program--photo > .program__tags { margin-bottom: 2rem; }
.program--a { border-top-color: var(--blue); }
.program--b { border-top-color: var(--purple); }
.program--c { border-top-color: var(--coral); }
.program--d { border-top-color: var(--yellow); }
.program__tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:auto; padding-top:1rem; }
.tag {
  font-family: var(--font-head); font-weight:600; font-size:.78rem;
  padding:.35rem .8rem; border-radius: var(--radius-pill);
  background: var(--slate-100); color: var(--navy);
}
.tag--impact { background: rgba(37,99,235,.1); color: var(--blue); }

/* ----------  Stats / metrics  ---------- */
.stat { text-align:center; }
.stat__num {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 4.2rem); line-height:1;
  background: var(--grad-warm); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat__label { margin-top:.7rem; font-weight:500; color:#c2cfe8; max-width: 34ch; margin-inline:auto; }
.section:not(.section--navy) .stat__num { background: var(--grad-vivid); -webkit-background-clip:text; background-clip:text; color:transparent; }
.section:not(.section--navy) .stat__label { color: var(--slate-600); }

/* World-class metric band: hairline dividers between the projected numbers (desktop) */
.section--navy .grid-3 .stat:not(.stat-card) { position: relative; padding-inline: 1rem; }
@media (min-width: 901px) {
  .section--navy .grid-3 .stat:not(.stat-card) + .stat:not(.stat-card)::before {
    content: ""; position: absolute; left: 0; top: 12%; bottom: 12%;
    width: 1px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.18), transparent);
  }
}

/* Interactive stat cards — clean white card on a light (slate) section,
   matching the blueprint's "Clean White and Light Slate Gray" palette */
.stat-card {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: clamp(1.8rem, 4vw, 2.6rem) 1.4rem;
  background: #fff;
  border: 1px solid var(--slate-100);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease),
              border-color .4s var(--ease);
}
.stat-card::after {            /* brand accent bar that grows on hover */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--grad-vivid); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.stat-card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}
.stat-card:hover::after { transform: scaleX(1); }
.stat-card .stat__icon {
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 14px; background: var(--slate-50); color: var(--blue);
  margin-bottom: .4rem; transition: transform .4s var(--ease);
}
.stat-card .stat__icon svg { width: 28px; height: 28px; }
.stat-card:hover .stat__icon { transform: translateY(-3px) scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .stat-card, .stat-card::after, .stat-card .stat__icon { transition: none !important; }
  .stat-card:hover { transform: none !important; }
}

/* ----------  Testimonials carousel  ---------- */
.carousel { position: relative; }
.carousel__track {
  display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 1rem; scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.quote {
  scroll-snap-align: center; flex: 0 0 min(440px, 85%);
  background:#fff; border:1px solid var(--slate-100); border-radius: var(--radius);
  padding: 2.2rem; box-shadow: var(--shadow-sm); position: relative;
}
.quote::before {
  content: "\201C"; font-family: Georgia, serif; font-size: 5rem; line-height: 0;
  color: var(--yellow); position: absolute; top: 2.2rem; left: 1.6rem; opacity:.9;
}
.quote p { font-size: 1.1rem; color: var(--ink); padding-top: 1.6rem; font-weight: 500; }
.quote__by { margin-top: 1.2rem; font-family: var(--font-head); font-weight:600; color: var(--navy); }
.quote__by span { display:block; font-weight:500; font-size:.9rem; color: var(--slate-500); }
.carousel__nav { display:flex; gap:.6rem; justify-content:center; margin-top: 1.5rem; }
.carousel__btn {
  width:48px; height:48px; border-radius:50%; border:1px solid var(--slate-200);
  background:#fff; cursor:pointer; font-size:1.2rem; color: var(--navy);
  display:grid; place-items:center; transition: .2s var(--ease);
}
.carousel__btn:hover { background: var(--navy); color:#fff; transform: translateY(-2px); }

/* ----------  CTA banner  ---------- */
.cta-band {
  position: relative; isolation:isolate; color:#fff; text-align:center;
  border-radius: clamp(20px, 4vw, 36px);
  padding: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 5vw, 4rem);
  background: var(--grad-cta); overflow:hidden;
}
.cta-band::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(500px 300px at 15% 20%, rgba(255,206,50,.3), transparent 60%),
    radial-gradient(500px 300px at 90% 90%, rgba(255,90,95,.35), transparent 60%);
}
.cta-band h2 { color:#fff; }
.cta-band p { color: #e3e9f8; max-width: 54ch; margin: 1rem auto 2rem; }

/* ----------  Pathway panels (Get Involved)  ---------- */
.pathway {
  display:flex; flex-direction:column; align-items:flex-start; gap:.9rem;
  background:#fff; border:1px solid var(--slate-100); border-radius: var(--radius);
  padding: 2.2rem; box-shadow: var(--shadow-sm); height:100%;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.pathway:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.pathway__icon {
  width:64px; height:64px; border-radius:18px; display:grid; place-items:center;
  font-size:1.8rem; color:#fff; flex:0 0 auto; box-shadow: 0 10px 22px rgba(2,26,82,.18);
  margin-bottom:.4rem;
}
.pathway h3 { margin:0; }
.pathway p { margin:0; font-size:.98rem; }
.pathway .btn { margin-top:auto; }   /* push CTA to the bottom so cards align */
/* Formal line-icon pathway: no coloured fill, navy stroke */
.pathway__icon--plain {
  background: none; box-shadow: none; color: var(--navy);
  width: 52px; height: 52px; border-radius: 0; margin-bottom: .2rem;
}
.pathway__icon--plain svg { width: 40px; height: 40px; }

/* ----------  Value / list cards  ---------- */
.value h3 { display:flex; align-items:center; gap:.6rem; }
.value h3 .dot { width:12px; height:12px; border-radius:50%; background: var(--grad-vivid); flex:0 0 auto; }

.check-list li {
  display:flex; gap:.9rem; align-items:flex-start; padding:.7rem 0;
  border-bottom: 1px solid var(--slate-100);
}
.check-list li:last-child { border-bottom:0; }
.check-list .ic {
  flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background: rgba(37,99,235,.12); color: var(--blue); font-weight:700; font-size:.9rem;
}
.check-list strong { color: var(--navy); font-family: var(--font-head); }
/* On a navy section the list text must be light, not navy-on-navy (invisible) */
.section--navy .check-list li { color: #dbe4f5; border-bottom-color: rgba(255,255,255,.12); }
.section--navy .check-list strong { color: #fff; }
.section--navy .check-list .ic { background: rgba(255,255,255,.14); color: var(--yellow); }

/* ----------  Blog cards  ---------- */
.post { display:flex; flex-direction:column; overflow:hidden; padding:0; }
.post__thumb {
  aspect-ratio: 16/10; display:grid; place-items:center; color:#fff;
  font-family: var(--font-head); font-weight:700; font-size:1.1rem; text-align:center;
  padding:1.5rem; position:relative;
}
.post__body { padding: 1.6rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.post__meta { font-size:.82rem; color: var(--slate-500); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.post h3 { font-size:1.2rem; }
.post .textlink { margin-top:auto; }

/* ----------  Contact form  ---------- */
.field { margin-bottom: 1.2rem; }
.field label {
  display:block; font-family: var(--font-head); font-weight:600; font-size:.92rem;
  color: var(--navy); margin-bottom:.4rem;
}
.field input, .field select, .field textarea {
  width:100%; padding: .95rem 1.1rem; font: inherit; color: var(--ink);
  background:#fff; border:1.5px solid var(--slate-200); border-radius: var(--radius-sm);
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color: var(--blue); box-shadow: var(--ring);
}
.form-note { font-size:.85rem; color: var(--slate-500); margin-top:.6rem; }
.form-success {
  display:none; background: rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.4);
  color:#15803d; padding:1rem 1.2rem; border-radius: var(--radius-sm); font-weight:500;
  margin-bottom:1.2rem;
}
.form-success.show { display:block; }
.form-success .card__icon { display:inline-grid; width:46px; height:46px; font-size:1.3rem; margin-bottom:.6rem; }
.form-error {
  display:none; background: rgba(220,38,38,.08); border:1px solid rgba(220,38,38,.4);
  color:#b91c1c; padding:.9rem 1.1rem; border-radius: var(--radius-sm); font-weight:500;
  margin-bottom:1.2rem; font-size:.95rem;
}
.form-error.show { display:block; }
/* honeypot — visually & aurally hidden, but not display:none (bots skip those) */
.hp-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* submit button busy state */
.btn[aria-busy="true"] { opacity:.7; pointer-events:none; }

.contact-card {
  background: var(--navy); color:#dbe4f5; border-radius: var(--radius);
  padding: clamp(1.8rem, 4vw, 2.6rem); height:100%;
}
.contact-card h3 { color:#fff; }
.contact-card h1 {
  color:#fff; line-height:1.05; margin:.6rem 0 1rem;
  font-size: clamp(2.4rem, 4.6vw, 3.4rem);
}
.contact-card .eyebrow { color: var(--yellow); }
.contact-card .lead { color:#dbe4f5; }
.contact-item { display:flex; gap:1rem; align-items:flex-start; margin-top:1.6rem; }
.contact-item .ic {
  flex:0 0 auto; width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background: rgba(255,255,255,.1); color: var(--yellow); font-size:1.2rem;
}
.contact-item strong,
.contact-item h4 { color:#fff; font-family: var(--font-head); display:block; margin:0 0 .25rem; }
.contact-item p { color:#dbe4f5; margin:0; }
.contact-item a { color:#dbe4f5; }
.contact-item a:hover { color: var(--yellow); }

/* ----------  Footer  ---------- */
.site-footer { background: var(--navy-900); color:#c6d2e8; padding-block: clamp(3rem,6vw,4.5rem) 2rem; }
.footer-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; }
.site-footer img.foot-logo { height:42px; margin-bottom:1.1rem; }
.site-footer h4 { color:#fff; font-size:1rem; margin-bottom:1rem; letter-spacing:.02em; }
.site-footer a { color:#c6d2e8; }
.site-footer a:hover { color: var(--yellow); }
.footer-links li { padding:.3rem 0; }
.footer-about p { font-size:.95rem; color:#9fb0cf; max-width: 34ch; }
.cic-badge {
  display:inline-block; margin-top:1.1rem; font-size:.8rem; font-weight:600;
  color:#cdd8ef; background: rgba(255,255,255,.07); padding:.4rem .85rem; border-radius: var(--radius-pill);
}
.socials { display:flex; gap:.6rem; margin-top:1.1rem; }
.socials a {
  width:44px; height:44px; border-radius:50%; background: rgba(255,255,255,.08);
  display:grid; place-items:center; color:#cdd8ef; transition:.2s var(--ease);
}
.socials a:hover { background: var(--yellow); color: var(--navy); transform: translateY(-3px); }
.footer-bottom {
  margin-top: 2.8rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.08);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  font-size:.88rem; color:#8a9bbd;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap:2rem; } .footer-about { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ----------  Scroll reveal  ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  .hero__blob { animation:none; }
  html { scroll-behavior:auto; }
}

/* ----------  Visual decoration blocks (image stand-ins)  ---------- */
.visual {
  border-radius: var(--radius); overflow:hidden; position:relative; isolation:isolate;
  min-height: 320px; display:grid; place-items:center; color:#fff; text-align:center;
  box-shadow: var(--shadow);
}
.visual--blue { background: var(--grad-vivid); }
.visual--warm { background: var(--grad-warm); }
.visual--navy { background: var(--grad-brand); }
.visual__emoji { font-size: clamp(3.5rem, 9vw, 6rem); filter: drop-shadow(0 8px 16px rgba(0,0,0,.2)); }
/* Default caption: a clean solid box (not text floating over the photo).
   Sits in the normal flow at the bottom of the block on its own navy bar,
   so the text is always comfortable to read. */
.visual__cap {
  position: relative; z-index: 2;
  padding: 1rem 1.4rem; font-weight: 500; font-size: .95rem; line-height: 1.4;
  background: var(--navy-800); color: #eaf0fb;
}

/* embedded live Google map filling the visual box */
.visual--map { min-height: 360px; }
.visual--map iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; display: block; z-index: 1;
}
.visual--map .visual__cap {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; pointer-events: none;
}

/* ---- Photo + caption-box layout ----
   When a real photo is present, lay the block out as a column: the photo fills
   a fixed-ratio area on top, and the caption sits in its own solid box beneath
   it. This replaces the old "white text washed over the image" overlay, which
   was hard to read. */
.visual:has(.visual__img) {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--navy-800);          /* box colour shows behind the caption */
}
.visual:has(.visual__img) .visual__img {
  position: relative; inset: auto; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover; flex: 0 0 auto;
}
.visual:has(.visual__img) .visual__emoji { display:none; }   /* hide placeholder emoji when a photo is present */

/* ---- Blog thumbnail: photo on top, caption in its own box beneath ----
   Same approach as .visual — no white labels burned onto the photo. */
.post__thumb { overflow:hidden; }
.post__thumb:has(.post__thumb-img) {
  display: flex; flex-direction: column; padding: 0; aspect-ratio: auto;
}
.post__thumb .visual__cap {     /* caption box (e.g. "Launchpad City") */
  position: relative; z-index: 2; order: 2;
  padding: .7rem 1.1rem; font-size: .85rem; font-weight: 600;
  background: var(--navy-800); color: #eaf0fb; text-align: left;
}
.post__thumb .visual__emoji { z-index:2; position:relative; order: 1; }
.post__thumb:has(.post__thumb-img) .visual__emoji { display:none; }
.post__thumb-img {
  position: relative; inset: auto; order: 1;
  width:100%; height:auto; aspect-ratio: 16/10; object-fit:cover;
  transition: transform .5s var(--ease);
}
/* clip the photo area so the slow hover-zoom stays inside its rounded frame */
.post__thumb:has(.post__thumb-img) {
  /* the image lives in its own clipped wrapper via the flex order above */
}
.post:hover .post__thumb-img { transform: scale(1.06); }

.spot {  /* small decorative dot grid behind visuals */
  position:absolute; inset:auto -20px -20px auto; width:140px; height:140px; z-index:-1;
  background-image: radial-gradient(var(--slate-200) 2px, transparent 2px);
  background-size: 18px 18px; opacity:.8;
}

/* ----------  Utility  ---------- */
.mt-1{margin-top:.5rem} .mt-2{margin-top:1rem} .mt-3{margin-top:1.5rem} .mt-4{margin-top:2rem}
.mb-0{margin-bottom:0}
.flex{display:flex} .gap{gap:1rem} .wrap{flex-wrap:wrap} .items-center{align-items:center}
.hide-mobile { }
@media (max-width:620px){ .hide-mobile{ display:none; } }

/* ============================================================
   Interactive polish — slow, soft micro-animations on every
   card/element so the whole site feels alive and responsive.
   Kept gentle and on-brand; all disabled for reduced-motion.
   ============================================================ */

/* --- Card icons: gentle lift + tilt + glow on hover of their card --- */
.card__icon,
.pathway__icon {
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), filter .5s var(--ease);
}
.card:hover .card__icon,
.value:hover .card__icon,
.pillar:hover .card__icon,
.program:hover .card__icon,
.pathway:hover .pathway__icon {
  transform: translateY(-4px) rotate(-4deg) scale(1.06);
  filter: saturate(1.15);
}

/* --- Tags: soft fill + lift on hover --- */
.tag {
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
  cursor: default;
}
.tag:hover {
  transform: translateY(-3px);
  background: var(--navy); color: #fff;
  box-shadow: 0 8px 18px rgba(2,26,82,.18);
}
.tag--impact:hover { background: var(--blue); }

/* --- Value cards (About): whole tile gently rises --- */
.value {
  transition: transform .5s var(--ease);
  will-change: transform;
}
.value:hover { transform: translateY(-6px); }
.value h3 .dot { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.value:hover h3 .dot { transform: scale(1.5); box-shadow: 0 0 0 6px rgba(37,99,235,.12); }

/* --- Pillars: soft rise (cards already lift; this adds icon life via rule above) --- */
.pillar { transition: transform .5s var(--ease); }

/* --- Stat blocks: number breathes up slightly on hover --- */
.stat { transition: transform .5s var(--ease); }
.stat:hover { transform: translateY(-5px); }
.stat__num { transition: transform .5s var(--ease), filter .5s var(--ease); display:inline-block; }
.stat:hover .stat__num { transform: scale(1.06); filter: brightness(1.08); }

/* --- Check-list rows (Partnerships etc.): slide + icon pop on hover --- */
.check-list li {
  transition: transform .4s var(--ease), background .4s var(--ease), padding-left .4s var(--ease);
  border-radius: 10px;
}
.check-list li:hover {
  transform: translateX(6px);
  background: var(--slate-50);
  padding-left: .7rem;
}
/* On navy, a light hover bg would make the white text vanish — use a faint
   translucent white wash instead and keep the text light. */
.section--navy .check-list li:hover { background: rgba(255,255,255,.08); }
.section--navy .check-list li:hover strong { color: #fff; }
.check-list .ic { transition: transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease); }
.check-list li:hover .ic { transform: scale(1.12) rotate(-6deg); background: var(--blue); color:#fff; }
.section--navy .check-list li:hover .ic { background: var(--yellow); color: var(--navy); }

/* --- Contact info rows: lift + icon highlight --- */
.contact-item { transition: transform .4s var(--ease); }
.contact-item:hover { transform: translateX(5px); }
.contact-item .ic { transition: transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease); }
.contact-item:hover .ic { transform: scale(1.1) rotate(-6deg); background: var(--yellow); color: var(--navy); }

/* --- Testimonial quotes: gentle rise + quote-mark grow --- */
.quote { transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
.quote:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.quote::before { transition: transform .5s var(--ease); transform-origin: top left; }
.quote:hover::before { transform: scale(1.18); }

/* --- Eyebrow & CIC badge: subtle interactive feel --- */
.eyebrow, .cic-badge { transition: transform .35s var(--ease), background .35s var(--ease); }
.cic-badge:hover { transform: translateY(-2px); background: rgba(255,255,255,.14); }

/* --- Footer links: slide in on hover --- */
.footer-links li a { display:inline-block; transition: transform .3s var(--ease), color .3s var(--ease); }
.footer-links li a:hover { transform: translateX(5px); }

/* --- Visual photo blocks: slow zoom of the image (clipped above the box) --- */
.visual { transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.visual:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.visual__img { z-index: 1; transition: transform 1.2s var(--ease); }   /* slow, cinematic zoom; caption box (z-index:2) always paints on top */
.visual:hover .visual__img { transform: scale(1.05); }

/* --- Nav logo: tiny life on hover --- */
.nav__logo img { transition: transform .4s var(--ease); }
.nav__logo:hover img { transform: scale(1.04); }

/* --- Social bubbles already lift; make the motion slower/softer --- */
.socials a { transition: transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease); }

/* --- A continuous, very slow "breathing" float for hero CTA arrows on idle --- */
@keyframes nudge { 0%,100%{ transform: translateX(0);} 50%{ transform: translateX(4px);} }

/* --- Gentle continuous pulse for primary CTAs to draw the eye (very subtle) --- */
@keyframes soft-pulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(255,206,50,.0); }
  50%      { box-shadow: 0 10px 30px rgba(255,206,50,.45); }
}
.btn--primary.btn--lg { animation: soft-pulse 3.2s ease-in-out infinite; }
.btn--primary.btn--lg:hover { animation: none; }

/* Respect reduced-motion: kill all the extra motion */
@media (prefers-reduced-motion: reduce) {
  .card__icon, .pathway__icon, .tag, .value, .value h3 .dot, .pillar, .stat, .stat__num,
  .check-list li, .check-list .ic, .contact-item, .contact-item .ic, .quote, .quote::before,
  .eyebrow, .cic-badge, .footer-links li a, .visual, .visual__img, .visual__cap, .nav__logo img,
  .socials a {
    transition: none !important;
  }
  .btn--primary.btn--lg { animation: none !important; }
  .card:hover .card__icon, .value:hover .card__icon, .pillar:hover .card__icon,
  .program:hover .card__icon, .pathway:hover .pathway__icon,
  .tag:hover, .value:hover, .stat:hover, .check-list li:hover, .contact-item:hover,
  .quote:hover, .visual:hover, .visual:hover .visual__img {
    transform: none !important;
  }
}

/* ---------- Long-form article body ---------- */
.prose {
  max-width: 70ch;
  margin-inline: auto;
  font-family: var(--font-body);
  color: var(--ink-soft);
  font-size: 1.075rem;
  line-height: 1.8;
}
.prose > p { margin-bottom: 1.4em; color: var(--ink-soft); }
.prose > p:last-child { margin-bottom: 0; }
.prose > .lead { color: var(--slate-600); margin-bottom: 1.6em; max-width: none; }

.prose h2 {
  font-family: var(--font-head);
  color: var(--navy);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  margin: 2.4rem 0 1rem;
  letter-spacing: -.02em;
}
.prose h3 {
  font-family: var(--font-head);
  font-size: 1.25rem;
  color: var(--navy);
  margin: 1.8rem 0 .6rem;
}

.prose ul { list-style: disc; padding-left: 1.4rem; margin: 0 0 1.4em; }
.prose ol { list-style: decimal; padding-left: 1.5rem; margin: 0 0 1.4em; }
.prose li { margin-bottom: .55rem; color: var(--ink-soft); }
.prose li::marker { color: var(--blue); }

.prose a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--slate-200);
  transition: color .2s, text-decoration-color .2s;
}
.prose a:hover { color: var(--purple); text-decoration-color: currentColor; }
.prose strong { color: var(--navy); font-weight: 600; }

/* Pull-quote sits full-measure in the column, not in the carousel */
.prose .quote,
.quote--inline { flex: none; width: auto; margin: 2rem 0; }

.prose figure { margin: 2rem 0; }
.prose figure img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.prose figcaption { margin-top: .6rem; font-size: .9rem; color: var(--slate-500); text-align: center; }

/* Back-link at the end of the article body (scoped so the global
   forward 'Read more →' arrows are NOT affected) */
.prose > .textlink { display: inline-flex; margin-top: 2rem; }
.prose > .textlink .arrow { display: inline-block; margin-right: .15rem; }
.prose > .textlink:hover .arrow { transform: translateX(-4px); }

/* Light meta line for the dark article hero */
.article-meta {
  color: #d7e0f4;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: .95rem;
  margin-top: 1rem;
}

/* Author + share footer furniture */
.article-foot {
  max-width: 70ch;
  margin: 2.5rem auto 0;
  padding-top: 1.8rem;
  border-top: 1px solid var(--slate-100);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}
.article-author { display: flex; align-items: center; gap: .85rem; }
.article-avatar {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--grad-vivid);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .9rem;
}
.article-author__text { color: var(--slate-600); font-size: .95rem; }
.article-author__text strong { color: var(--navy); }
.article-foot .socials { margin-top: 0; }