/* ==========================================================================
   SB3S V1 — one-page stylesheet
   Plain CSS, no build step (cPanel-friendly).
   Palette derived from the official SB3S logo's blue range (royal blue → sky);
   the logo's violet/magenta tones are deliberately left out.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand */
  --primary: #1B5FD8;         /* SB3S blue (logo royal blue, darkened for AA: 5.1:1 on white) */
  --primary-hover: #154CB0;
  --primary-soft: #EAF2FD;    /* blue tint: portfolio band, status pill, initials */
  --secondary: #5BC0F2;       /* lighter SB3S blue (logo sky) — decorative only, never text */
  --accent: var(--secondary);
  --navy: #0B1F33;            /* headings, selected emphasis */

  /* Neutrals */
  --bg: #FFFFFF;
  --surface: #F6F8FB;         /* off-white sections */
  --surface-tint: #EEF3F9;    /* light blue-grey sections */
  --text: #202833;            /* body — 14.9:1 on white */
  --muted: #5B6474;           /* secondary text — 6.0:1 on white, 5.2:1 on --surface-tint */
  --border: #E2E8F0;
  --border-strong: #C9D3E0;
  --hover: #F0F5FC;
  --error: #B42318;           /* form errors only — 6.5:1 on white */

  /* Typography — one family */
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 0.8125rem;   /* 13 */
  --fs-sm: 0.9375rem;   /* 15 */
  --fs-base: 1.0625rem; /* 17 */
  --fs-lead: clamp(1.125rem, 0.4vw + 1rem, 1.3125rem);
  --fs-h3: clamp(1.1875rem, 0.4vw + 1.05rem, 1.375rem);
  --fs-h2: clamp(2rem, 2.4vw + 1.15rem, 3.25rem);
  --fs-h1: clamp(3.25rem, 6.2vw + 0.75rem, 7rem);
  --lh-body: 1.65;

  /* Spacing — 4px base */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;
  --section-y: clamp(4.5rem, 7vw + 1.5rem, 8.5rem);
  --head-gap: clamp(2.5rem, 5vw, 4.5rem);   /* section heading → content */

  /* Layout */
  --container: 76rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --measure: 38rem;
  --header-h: 4.5rem;

  /* Shape */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-reveal: 800ms;
}

/* Breakpoints: ≥1180 full nav · 1024 two-column layouts · 768 tablet · ≤429 small phone */

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.nav-open { overflow: hidden; }

h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
address { font-style: normal; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 2px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  padding: var(--s-3) var(--s-4); background: var(--navy); color: #fff;
  font-weight: 600; text-decoration: none; border-radius: var(--radius-sm);
}
.skip-link:focus { top: var(--s-3); }

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- 3. Type ---------- */
.section-title {
  font-size: var(--fs-h2); line-height: 1.12; font-weight: 700;
  letter-spacing: -0.028em; color: var(--navy);
  max-width: 20ch; text-wrap: balance;
}
.section-intro { max-width: var(--measure); font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); }
.section-head { display: grid; gap: var(--s-4); }
@media (min-width: 1024px) {
  .section-head { grid-template-columns: 5fr 6fr; gap: var(--s-8); align-items: end; }
}
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text); }

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0 var(--s-5);
  font: 600 var(--fs-sm)/1 var(--font); letter-spacing: 0.005em;
  text-decoration: none; cursor: pointer;
  border-radius: 6px; border: 1px solid transparent;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-hover); }
.btn--secondary { background: var(--bg); color: var(--navy); border-color: var(--border-strong); }
.btn--secondary:hover { border-color: var(--primary); color: var(--primary); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.6; cursor: progress; }

/* ---------- 5. Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--border); box-shadow: 0 6px 24px -18px rgba(11, 31, 51, 0.25); }
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); }

.brand { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.brand__logo { width: auto; height: 2.625rem; }

.site-nav { display: flex; align-items: center; gap: var(--s-5); }
.site-nav__list { display: flex; align-items: center; gap: clamp(0.875rem, 1.5vw, 1.75rem); }
.site-nav__link {
  position: relative; display: inline-block; padding: var(--s-2) 0;
  font-size: var(--fs-sm); font-weight: 500; color: var(--muted); text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.site-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px;
  background: var(--primary); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.site-nav__link:hover { color: var(--navy); }
.site-nav__link.is-active { color: var(--navy); }
.site-nav__link.is-active::after { transform: scaleX(1); }

.lang-switch { display: flex; gap: 2px; padding-left: var(--s-4); border-left: 1px solid var(--border); }
.lang-switch a {
  padding: var(--s-1) var(--s-2); border-radius: var(--radius-sm);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em;
  color: var(--muted); text-decoration: none;
}
.lang-switch a:hover { color: var(--navy); }
.lang-switch a[aria-current="true"] { color: var(--primary); background: var(--primary-soft); }

.nav-toggle {
  display: none; position: relative; width: 2.75rem; height: 2.75rem; margin-right: calc(-1 * var(--s-2));
  background: none; border: 0; cursor: pointer; color: var(--navy);
}
.nav-toggle__bar {
  position: absolute; left: 50%; width: 1.375rem; height: 2px; margin-left: -0.6875rem;
  background: currentColor; border-radius: 2px; transition: transform var(--dur) var(--ease);
}
.nav-toggle__bar:nth-of-type(2) { top: calc(50% - 4px); }
.nav-toggle__bar:nth-of-type(3) { top: calc(50% + 3px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-of-type(2) { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-of-type(3) { transform: translateY(-3.5px) rotate(-45deg); }

/* 8 items + language switch: burger below 1180px. */
@media (max-width: 1179px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: fixed; inset: var(--header-h) 0 0 0;
    flex-direction: column; align-items: stretch; justify-content: space-between; gap: var(--s-6);
    padding: var(--s-4) var(--gutter) var(--s-7);
    background: var(--bg); border-top: 1px solid var(--border); overflow-y: auto;
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  .site-nav.is-open {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__link {
    display: block; padding: var(--s-4) 0;
    font-size: 1.25rem; font-weight: 600; color: var(--navy);
    border-bottom: 1px solid var(--border);
  }
  .site-nav__link::after { display: none; }
  .site-nav__link.is-active { color: var(--primary); }
  .lang-switch { padding-left: 0; border-left: 0; }
  .lang-switch a { padding: var(--s-2) var(--s-3); font-size: var(--fs-sm); }
}
@media (max-width: 767px) { .brand__logo { height: 2.25rem; } }

/* ---------- 6. Sections ---------- */
.section { padding-block: var(--section-y); }
.section--soft { background: var(--surface); }
.section--tint { background: var(--surface-tint); }
.section--blue { background: var(--primary-soft); }

/* ---------- 7. Hero ---------- */
.hero {
  display: flex; align-items: center;
  min-height: calc(100svh - var(--header-h));
  padding-block: clamp(3rem, 8vh, 6rem);
  background: var(--bg);
}
.hero__inner { display: grid; gap: var(--s-8); align-items: center; }
/* Longer headline ("From Venture Building to Transactions"): slightly smaller scale, wider measure */
.hero__title {
  /* Each phrase on exactly one line: size follows the viewport (single column < 1024 px, half width above). */
  font-size: clamp(1.375rem, 7vw, 2.875rem); line-height: 1.12; font-weight: 800;
  letter-spacing: -0.035em; color: var(--navy);
}
.hero__title-line { display: block; white-space: nowrap; }   /* "Accelerating Businesses" / "Driving Transactions" */
@media (min-width: 1024px) { .hero__title { font-size: clamp(2rem, 3.1vw, 2.875rem); } }
.hero__tagline { margin-top: var(--s-6); max-width: 36rem; font-size: var(--fs-lead); line-height: 1.5; font-weight: 600; color: var(--navy); }
.hero__lead { margin-top: var(--s-4); max-width: 34rem; font-size: var(--fs-base); line-height: 1.65; color: var(--muted); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--s-8); }
}
@media (max-width: 767px) {
  .hero { min-height: auto; }
  .hero__actions .btn { flex: 1 1 14rem; }
}

/* Journey illustration — "Convergence to Scale": independent paths (founders, programs,
   financing mechanisms) converge into one upward movement. Decorative only: no text, no data.
   Uses the full logo spectrum (cyan → blue → violet → magenta) as thin strokes only. */
.journey { position: relative; width: 100%; max-width: 36rem; margin-inline: auto; }
.journey__svg { display: block; width: 100%; height: auto; overflow: visible; }
.journey__disc { fill: var(--surface-tint); }
.journey__path { fill: none; stroke-width: 2.25; stroke-linecap: round; opacity: 0.9; }
.journey__main { fill: none; stroke: url(#journey-main); stroke-width: 7; stroke-linecap: round; }
.journey__node { fill: var(--bg); stroke: var(--navy); stroke-width: 2.5; }
.journey__peak { fill: #D24BE8; stroke: var(--bg); stroke-width: 3; }

@media (max-width: 1023px) {
  .journey { max-width: 30rem; }
}

/* One orchestrated entrance: seeds appear, paths draw in, then the shared rise. */
@media (prefers-reduced-motion: no-preference) {
  .js .journey__seed { animation: fade-in 500ms var(--ease) both; animation-delay: calc(0.2s + var(--i) * 0.08s); }
  .js .journey__path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.3s var(--ease) both; animation-delay: calc(0.35s + var(--i) * 0.1s); }
  .js .journey__node, .js .journey__glow { animation: fade-in 500ms var(--ease) 1.4s both; }
  .js .journey__main { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.1s var(--ease) 1.5s both; }
  .js .journey__peak { animation: fade-in 400ms var(--ease) 2.5s both; }
}
/* Continuous, discreet life after the entrance (≈3 s). Static final state without JS / with reduced motion.
   Only stroke-dashoffset, opacity and transform are animated; desynchronised durations (organic, not mechanical).
   Paused while the hero is off-screen (.is-offscreen, set by sb3s.js). */
.journey__spark { fill: none; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0.001 2; stroke-dashoffset: 0; opacity: 0; }
.journey__shine { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.12 2; stroke-dashoffset: 0.12; opacity: 0; }
.journey__peak-halo { fill: #D24BE8; opacity: 0; }
.journey__glow, .journey__node, .journey__peak, .journey__peak-halo { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .js .journey__spark { animation: journey-spark var(--spark-dur, 8s) cubic-bezier(0.45, 0.05, 0.35, 1) infinite; animation-delay: var(--spark-delay, 3s); }
  .js .journey__spark:nth-child(1) { --spark-dur: 7.4s; --spark-delay: 2.8s; }
  .js .journey__spark:nth-child(2) { --spark-dur: 9.2s; --spark-delay: 5.1s; }
  .js .journey__spark:nth-child(3) { --spark-dur: 6.6s; --spark-delay: 3.6s; }
  .js .journey__spark:nth-child(4) { --spark-dur: 8.6s; --spark-delay: 6.3s; }
  .js .journey__spark:nth-child(5) { --spark-dur: 10s;  --spark-delay: 4.2s; }
  .js .journey__glow { animation: fade-in 500ms var(--ease) 1.4s both, journey-breathe 4.2s ease-in-out 2.6s infinite; }
  .js .journey__node { animation: fade-in 500ms var(--ease) 1.4s both, journey-node 4.2s ease-in-out 2.6s infinite; }
  .js .journey__main { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.1s var(--ease) 1.5s both, journey-intensity 11s ease-in-out 3s infinite; }
  .js .journey__shine { animation: journey-shine 7.8s cubic-bezier(0.4, 0, 0.3, 1) 3.2s infinite; }
  .js .journey__peak { animation: fade-in 400ms var(--ease) 2.5s both, journey-drift 6.4s ease-in-out 3s infinite alternate; }
  .js .journey__peak-halo { animation: journey-halo 4.8s ease-out 3.4s infinite; }
  .journey.is-offscreen * { animation-play-state: paused !important; }
}
@keyframes journey-spark {          /* travel left → centre, fade in/out, then a short rest (irregular rhythm) */
  0%   { stroke-dashoffset: 0;     opacity: 0; }
  10%  { opacity: 0.95; }
  72%  { opacity: 0.95; }
  82%  { stroke-dashoffset: -0.999; opacity: 0; }
  100% { stroke-dashoffset: -0.999; opacity: 0; }
}
@keyframes journey-breathe   { 0%, 100% { transform: scale(1); opacity: 0.75; } 50% { transform: scale(var(--breathe, 1.18)); opacity: 1; } }
@keyframes journey-node      { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes journey-intensity { 0%, 100% { opacity: 1; } 50% { opacity: 0.86; } }
@keyframes journey-shine {         /* a soft light runs along the growth curve, then rests */
  0%   { stroke-dashoffset: 0.12;  opacity: 0; }
  12%  { opacity: 0.55; }
  62%  { opacity: 0.55; }
  74%  { stroke-dashoffset: -1;    opacity: 0; }
  100% { stroke-dashoffset: -1;    opacity: 0; }
}
@keyframes journey-halo  { 0% { transform: scale(1); opacity: 0.28; } 70%, 100% { transform: scale(var(--halo, 2.1)); opacity: 0; } }
@keyframes journey-drift { from { transform: translate(0, 0); } to { transform: translate(var(--drift, 2px), calc(-1 * var(--drift, 2px))); } }
/* Tablet: smaller amplitudes. Mobile: essentials only (3 moving points, central pulse, light on the curve). */
@media (max-width: 1023px) { .journey { --breathe: 1.12; --halo: 1.7; --drift: 1.5px; } }
@media (max-width: 767px) {
  .journey__spark:nth-child(2), .journey__spark:nth-child(4) { display: none; }
  .js .journey__peak-halo { animation: none; }
  .js .journey__peak { animation: fade-in 400ms var(--ease) 2.5s both; }
}
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- 8. About ---------- */
.about__intro { display: grid; gap: var(--s-6); }
.about__text { display: grid; gap: var(--s-4); max-width: var(--measure); }
.about__text p:not(.lead) { color: var(--muted); }
@media (min-width: 1024px) {
  .about__intro { grid-template-columns: 5fr 6fr; gap: var(--s-8); align-items: start; }
}

.verticals { display: grid; margin-top: var(--head-gap); border-top: 1px solid var(--border); }
.vertical { position: relative; padding: var(--s-6) 0; }
.vertical + .vertical { border-top: 1px solid var(--border); }
.vertical::before {             /* short brand rule: royal blue / sky — the only differentiation */
  content: ""; position: absolute; top: -1px; left: 0; width: 3rem; height: 2px; background: var(--primary);
}
.vertical--2::before { background: var(--secondary); }
.vertical__title { font-size: var(--fs-h3); line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; color: var(--navy); max-width: 22ch; }
.vertical__text { margin-top: var(--s-3); max-width: 30rem; color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.tags li {
  padding: 0.3125rem 0.75rem; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.4;
  color: var(--navy); background: var(--surface); border: 1px solid var(--border);
}
@media (min-width: 768px) {
  .verticals { grid-template-columns: 1fr 1fr; }
  .vertical { padding: var(--s-7) var(--s-7) var(--s-2) 0; }
  .vertical + .vertical { border-top: 0; border-left: 1px solid var(--border); padding-left: var(--s-7); padding-right: 0; }
  .vertical--2::before { left: var(--s-7); }
}

/* ---------- 9. Expertise (light blue-grey band) ---------- */
.expertise__grid {
  display: grid; margin: var(--head-gap) 0 0; padding: 0; list-style: none;
  border-top: 1px solid var(--border-strong);
}
.expertise-item__index { display: block; margin-bottom: var(--s-3); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.04em; color: var(--primary); }
.expertise-item__tagline { margin-top: var(--s-2); font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.expertise-item {
  position: relative; padding: var(--s-6) 0;
  border-bottom: 1px solid var(--border-strong);
}
.expertise-item::before {
  content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 100%;
  background: var(--primary); transform: scaleX(0); transform-origin: left;
  transition: transform 500ms var(--ease);
}
.expertise-item:hover::before { transform: scaleX(1); }
.expertise-item__title {   /* black titles (per brief), blue on hover */
  font-size: var(--fs-h3); line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; color: #0A0F1A;
  transition: color var(--dur-fast) var(--ease);
}
.expertise-item:hover .expertise-item__title { color: var(--primary); }
.expertise-item__text { margin-top: var(--s-3); max-width: 32rem; color: var(--muted); }
.expertise-item__keywords { margin-top: var(--s-4); font-size: var(--fs-sm); font-weight: 600; color: var(--primary); }
@media (min-width: 768px) {
  .expertise__grid { grid-template-columns: 1fr 1fr; column-gap: var(--s-8); }
  .expertise-item { padding: var(--s-7) 0; }
}
/* Icons: client-supplied artwork, transparent background (no tile), cropped to the pictogram.
   Secondary to the title: 52px on desktop, 44px tablet, 38px mobile. */
.expertise-item__head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.expertise-item__head .expertise-item__index { margin-bottom: 0; }
.expertise-item__icon {
  --icon-tile: 2.375rem;
  display: block; flex-shrink: 0;
  width: var(--icon-tile); height: var(--icon-tile);
  transition: transform var(--dur) var(--ease);
}
.expertise-item__icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (prefers-reduced-motion: no-preference) {
  .expertise-item:hover .expertise-item__icon { transform: translateY(-2px); }
}
@media (min-width: 768px) { .expertise-item__icon { --icon-tile: 2.75rem; } }
@media (min-width: 1024px) { .expertise-item__icon { --icon-tile: 3.25rem; } }
/* Investment Banking: slightly more present, never aggressive —
   short permanent accent on the top rule, navy title, icon a touch larger, softer premium hover. */
.expertise-item--featured::before { transform: scaleX(0.14); }
.expertise-item--featured:hover::before { transform: scaleX(1); }
.expertise-item--featured .expertise-item__title { color: var(--navy); }
.expertise-item--featured .expertise-item__icon { --icon-tile: 2.625rem; }
@media (min-width: 768px) { .expertise-item--featured .expertise-item__icon { --icon-tile: 3rem; } }
@media (min-width: 1024px) { .expertise-item--featured .expertise-item__icon { --icon-tile: 3.5rem; } }
.expertise-item--featured .expertise-item__text { color: var(--text); }

/* ---------- 10. Programs (uniform editorial rows, status tag, Discover CTA) ---------- */
.program-list { margin-top: var(--head-gap); border-top: 1px solid var(--navy); }
.program {
  position: relative; display: grid; gap: var(--s-4);
  padding: var(--s-6) 0; border-bottom: 1px solid var(--border);
}
.program::before {               /* hover marker on the row's left edge */
  content: ""; position: absolute; left: calc(-1 * var(--s-4)); top: var(--s-6); bottom: var(--s-6);
  width: 2px; background: var(--primary); border-radius: 2px;
  transform: scaleY(0); transition: transform var(--dur) var(--ease);
}
.program:hover::before { transform: scaleY(1); }
.program__name { margin-top: var(--s-3); font-size: clamp(1.375rem, 1vw + 1.05rem, 1.75rem); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; color: var(--navy); }
.program__category { margin-top: var(--s-1); font-size: var(--fs-sm); color: var(--muted); }
.program__text { max-width: 32rem; color: var(--text); }
/* Card headline (max 2 lines) + preview (max 3 lines); the validated texts fit, the clamp is only a safety net. */
.program__headline {
  max-width: 32rem; margin-bottom: var(--s-2); font-weight: 700; line-height: 1.4; color: var(--navy);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.program__headline + .program__text {
  font-size: var(--fs-sm); line-height: 1.6; color: var(--muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
/* Below desktop width: full text (a clamp would cut the validated sentences mid-way). */
@media (max-width: 1023px) {
  .program__headline, .program__headline + .program__text { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
}
.program__meta { display: grid; gap: var(--s-1); margin-top: var(--s-4); font-size: var(--fs-sm); }
.program__meta div { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); }
.program__meta dt { color: var(--muted); }
.program__meta dd { font-weight: 600; color: var(--navy); }

/* Status tags: Actif / En cours / Terminé — Active / Ongoing / Completed */
.status {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 0.1875rem 0.625rem 0.1875rem 0.5rem; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.01em;
  color: var(--primary); background: var(--primary-soft);
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status--ongoing::before { background: var(--secondary); }
.status--completed { color: var(--muted); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }

/* Program CTA: light outlined pill with arrow */
.program__action { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); }
.program__cta {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 2.75rem; padding: 0 var(--s-4);
  font-size: var(--fs-sm); font-weight: 700; color: var(--primary); text-decoration: none;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.program__cta svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-fast) var(--ease); }
a.program__cta:hover { border-color: var(--primary); background: var(--primary-soft); }
a.program__cta:hover svg { transform: translateX(3px); }

@media (min-width: 768px) {
  .program { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: var(--s-7); padding: var(--s-7) 0; }
  .program__action { grid-column: 2; }
}
@media (min-width: 1024px) {
  .program { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); column-gap: var(--s-8); }
  .program__action { grid-column: auto; align-items: flex-end; }
  .program--static, .program--selectable { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}
/* Non-clickable cards (kept for reference): no hover marker, default cursor. */
.program--static::before { display: none; }
.program--static { cursor: default; }

/* ---- Selectable program rows (no navigation): one active row at a time, managed by sb3s.js ----
   Layers: ::after = soft tint (behind the content, bleeding into the gutter), ::before = SB3S gradient accent line.
   Only opacity / transform / background animate → no layout shift. */
.program--selectable { cursor: pointer; isolation: isolate; --p-dur: 360ms; --p-ease: cubic-bezier(0.22, 1, 0.36, 1); }
.program--selectable::after {
  content: ""; position: absolute; z-index: -1; inset: var(--s-2) calc(-1 * var(--s-4));
  border-radius: var(--radius); background: rgba(27, 95, 216, 0);
  transition: background-color var(--p-dur) var(--p-ease);
}
.program--selectable::before {
  width: 3px; background: linear-gradient(180deg, #1FB6E0 0%, #1B5FD8 50%, #7A3FE0 100%);
  transform: scaleY(0); transform-origin: top; opacity: 0;
  transition: transform var(--p-dur) var(--p-ease), opacity var(--p-dur) var(--p-ease);
}
.program--selectable:hover::before { transform: scaleY(0); }               /* no "link" marker on hover */
.program--selectable .program__id, .program--selectable .program__body {
  transition: transform var(--p-dur) var(--p-ease), opacity var(--p-dur) var(--p-ease);
}
.program--selectable .program__body { opacity: 0.78; }
.program--selectable .program__logos img { opacity: 0.8; transition: opacity var(--p-dur) var(--p-ease); }
.program--selectable .program__name { transition: color var(--p-dur) var(--p-ease); }

/* Name = the accessible toggle (aria-pressed); looks like the title, not like a button */
.program__select {
  all: unset; cursor: pointer; font: inherit; color: inherit; letter-spacing: inherit;
  border-radius: 4px;
}
.program__select:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }

/* Hover (inactive rows, pointer devices): "can be selected", never "opens a page" */
@media (hover: hover) {
  .program--selectable:not(.program--active):hover::after { background-color: rgba(27, 95, 216, 0.025); }
  .program--selectable:not(.program--active):hover .program__name { color: #0A1830; }
  .program--selectable:not(.program--active):hover .program__id { transform: translateX(2px); }
  .program--selectable:not(.program--active):hover .program__body { opacity: 0.9; }
}

/* Active row */
.program--active::after { background-color: rgba(27, 95, 216, 0.045); }
.program--active::before { transform: scaleY(1); opacity: 1; }
.program--active .program__name { color: var(--primary); }
.program--active .program__id, .program--active .program__body { transform: translateX(6px); }
.program--active .program__body { opacity: 1; }
.program--active .program__logos img { opacity: 1; }
/* Content comes in with a short stagger each time a row becomes active */
.program--active .program__headline { animation: program-in var(--p-dur) var(--p-ease) both; }
.program--active .program__text     { animation: program-in var(--p-dur) var(--p-ease) 50ms both; }
.program--active .program__meta     { animation: program-in var(--p-dur) var(--p-ease) 100ms both; }
.program--active .program__logos img { animation: program-logo-in var(--p-dur) var(--p-ease) 120ms both; }
@keyframes program-in { from { opacity: 0.25; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes program-logo-in { from { opacity: 0.4; transform: translateY(4px) scale(0.96); } to { opacity: 1; transform: none; } }

@media (max-width: 767px) {
  .program--selectable { --p-dur: 260ms; }
  .program--active .program__id, .program--active .program__body { transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) {
  .program--selectable { --p-dur: 120ms; }
  .program--selectable .program__id, .program--selectable .program__body,
  .program--active .program__id, .program--active .program__body { transform: none !important; }
  .program--selectable::before { transform: none; }
  .program--active .program__headline, .program--active .program__text,
  .program--active .program__meta, .program--active .program__logos img { animation: none; }
}

/* ---------- 12. Marquee mechanics (Partners logos + References cards) ---------- */
.marquee { position: relative; }
.marquee__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track { display: flex; width: max-content; }
.marquee__group { display: flex; align-items: center; flex-shrink: 0; gap: var(--marquee-gap); padding-right: var(--marquee-gap); }
.marquee__item { flex-shrink: 0; display: flex; align-items: center; justify-content: center; height: var(--marquee-h); }
.marquee__item img { width: auto; height: 100%; max-width: var(--marquee-max-w); object-fit: contain; }

.marquee__placeholder { display: grid; justify-items: center; gap: var(--s-2); }
.marquee__placeholder-box {
  display: block; width: var(--marquee-slot-w); height: calc(var(--marquee-h) - 1.5rem);
  border-radius: var(--radius-sm); border: 1px dashed var(--border-strong); background: rgba(255, 255, 255, 0.6);
}
.marquee__placeholder-name { font-size: var(--fs-xs); line-height: 1.2; color: var(--muted); white-space: nowrap; }

.marquee--partners  { --marquee-h: 6rem; --marquee-gap: clamp(3rem, 6vw, 5.5rem); --marquee-max-w: none; --marquee-slot-w: 6rem; --marquee-duration: 80s; --logo-scale: 1; }
/* Restrained, not greyscale: some official logos are solid colour blocks that turn into grey slabs. */
/* Per-logo optical height (from data.php: equal visual area, capped at native/2 → never upscaled).
   Full opacity: no fading, so official colours and fine text stay crisp. */
.marquee--partners .marquee__item img[style*="--logo-h"] {
  height: calc(var(--logo-h) * 1px * var(--logo-scale)); width: auto; max-width: none;
}

@media (max-width: 767px) {
  .marquee--partners  { --marquee-h: 4.25rem; --marquee-slot-w: 5rem; --logo-scale: 0.8; }
}

@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marquee var(--marquee-duration) linear infinite; will-change: transform; }
  .marquee[data-direction="right"] .marquee__track { animation-direction: reverse; }
  .marquee:hover .marquee__track,
  .marquee:focus-within .marquee__track,
  .marquee.is-paused .marquee__track,
  .marquee.is-offscreen .marquee__track { animation-play-state: paused; }
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Pause control (WCAG 2.2.2 — moving content can be stopped) */
.marquee__toggle {
  position: absolute; right: var(--gutter); bottom: calc(-1 * var(--s-7));
  width: 2.25rem; height: 2.25rem; padding: 0; cursor: pointer;
  border-radius: 50%; border: 1px solid var(--border-strong); background: var(--bg); color: var(--navy);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.marquee__toggle:hover { border-color: var(--primary); color: var(--primary); }
.marquee__toggle::before, .marquee__toggle::after {   /* pause icon: two bars */
  content: ""; position: absolute; top: 50%; width: 2px; height: 10px; margin-top: -5px; background: currentColor; border-radius: 1px;
}
.marquee__toggle::before { left: calc(50% - 4px); }
.marquee__toggle::after { left: calc(50% + 2px); }
.marquee__toggle[aria-pressed="true"]::before {       /* play icon: triangle */
  left: calc(50% - 3px); width: 0; height: 0; margin-top: -6px; border-radius: 0; background: none;
  border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor;
}
.marquee__toggle[aria-pressed="true"]::after { display: none; }

/* Reduced motion: static, natively scrollable row; duplicate hidden; no pause control needed */
@media (prefers-reduced-motion: reduce) {
  .marquee__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scrollbar-width: thin; }
  .marquee__group[aria-hidden="true"], .marquee__item[aria-hidden="true"] { display: none; }
  .marquee__group { padding-inline: var(--gutter); }
  .marquee__toggle { display: none; }
}

/* ---------- 13. Our References (rich-card marquee) ---------- */
/* Same marquee mechanics as Partners (section 12), opposite direction, slower; cards instead of logos. */
.references__strip { margin-top: var(--head-gap); padding-bottom: var(--s-7); }
/* ~8 cards visible on desktop; faster loop (one group ≈ 14 cards ≈ 55 s, ~45 px/s). */
.marquee--references { --marquee-gap: var(--s-4); --marquee-duration: 55s; }
.marquee--references .marquee__viewport {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.marquee--references .marquee__item { height: auto; align-items: stretch; }
.marquee--references .marquee__group { align-items: stretch; padding-block: var(--s-2) var(--s-4); }

/* Simplified card: the logo and the startup name are the two main elements. */
.ref-card {
  position: relative;               /* containing block for .visually-hidden inside the scroller */
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  width: clamp(8.75rem, calc((100vw - 8 * var(--s-4)) / 8), 13rem); height: 100%; padding: var(--s-4) var(--s-3);
  text-align: center;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ref-card:hover, .ref-card:focus-within {
  border-color: var(--border-strong);
  box-shadow: 0 14px 32px -22px rgba(11, 31, 51, 0.45);
  transform: translateY(-2px);
}
.ref-card__logo {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 5rem; padding: var(--s-2); overflow: hidden;
  background: #fff; border-radius: var(--radius);
}
/* Logos stay proportional (object-fit: contain), never stretched; cap 60 px high */
.ref-card__logo img { display: block; max-width: 100%; max-height: 3.75rem; width: auto; height: auto; object-fit: contain; }
.ref-card__name { font-size: 1.0625rem; line-height: 1.2; font-weight: 800; letter-spacing: -0.015em; color: var(--navy); }
/* Sector badges: one per sector, small and secondary to the name */
/* Same divider height on every card: the foot reserves room for two rows of badges + the optional "Discover" link. */
.marquee--references .ref-card__foot { justify-content: flex-start; min-height: 4.75rem; }
.ref-card__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.ref-tag {
  padding: 0.125rem 0.4375rem; border-radius: 999px;
  font-size: 0.6875rem; line-height: 1.35; font-weight: 600; white-space: nowrap;
  color: var(--primary); background: var(--primary-soft);
}
.ref-card__foot { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--s-3); margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--border); }
.ref-card__link { display: inline-flex; align-items: center; gap: var(--s-1); padding-block: var(--s-1); font-size: var(--fs-sm); font-weight: 700; color: var(--primary); text-decoration: none; }
.ref-card__link svg { width: 0.875rem; height: 0.875rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform var(--dur-fast) var(--ease); }
.ref-card__link:hover svg { transform: translate(2px, -2px); }

/* Mobile: usability first — no autoplay, native horizontal scroll with gentle snapping. */
@media (max-width: 767px) {
  .marquee--references .marquee__track { animation: none !important; }
  .marquee--references .marquee__viewport {
    overflow-x: auto; -webkit-mask-image: none; mask-image: none;
    scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: thin;
  }
  .marquee--references .marquee__group[aria-hidden="true"] { display: none; }
  .marquee--references .marquee__group { padding-inline: var(--gutter); gap: var(--s-3); }
  .marquee--references .marquee__item { scroll-snap-align: start; }
  .marquee--references .marquee__toggle { display: none; }
  .references__strip { padding-bottom: 0; }
  .ref-card { width: min(11.5rem, 46vw); }
}

/* ---------- 14. Partners ---------- */
.partners__strip { margin-top: var(--head-gap); padding-bottom: var(--s-7); }

/* ---------- 15. Team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); margin-top: var(--head-gap); }
.member__photo {
  position: relative; aspect-ratio: 4 / 5; margin-bottom: var(--s-4);
  border-radius: var(--radius); overflow: hidden; background: var(--surface-tint);
}
.member__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%;
  filter: grayscale(1) contrast(1.03);
  transition: filter 500ms var(--ease), transform 700ms var(--ease);
}
.member:hover .member__photo img { filter: grayscale(0.15); transform: scale(1.03); }
.member__photo--initials { display: grid; place-items: center; background: var(--primary-soft); }
.member__photo--initials::before {        /* concentric ring echoing the hero journey nodes */
  content: ""; position: absolute; width: 58%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(27, 95, 216, 0.22);
}
.member__initials { position: relative; font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem); font-weight: 700; letter-spacing: 0.02em; color: var(--primary); }
.member__name { font-size: var(--fs-base); line-height: 1.3; font-weight: 700; color: var(--navy); }
.member__role { margin-top: var(--s-1); max-width: 16rem; font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); }
.member__link { display: inline-block; margin-top: var(--s-2); padding-block: var(--s-1); font-size: var(--fs-sm); font-weight: 600; color: var(--primary); }
@media (min-width: 768px) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-6); } }
@media (max-width: 429px) { .team-grid { gap: var(--s-6) var(--s-4); } }

/* ---------- 16. Contact ---------- */
.contact__inner { display: grid; gap: var(--s-8); }
.contact__title { font-size: clamp(2.5rem, 4.5vw + 1rem, 4.75rem); line-height: 1.04; letter-spacing: -0.04em; max-width: 11ch; }
.contact__lead { margin-top: var(--s-5); max-width: 28rem; font-size: var(--fs-lead); color: var(--muted); }
.contact__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.contact__details { display: grid; gap: var(--s-5); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--border); max-width: 26rem; font-size: var(--fs-sm); }
.contact__details dt { font-size: var(--fs-xs); font-weight: 700; color: var(--navy); }
.contact__details dd { margin-top: var(--s-1); color: var(--muted); line-height: 1.6; }
.contact__details a { color: var(--primary); font-weight: 600; text-decoration: none; }
.contact__details a:hover { text-decoration: underline; text-underline-offset: 3px; }

.contact-form {
  display: grid; gap: var(--s-5); align-content: start;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.contact-form__title { font-size: var(--fs-h3); line-height: 1.3; font-weight: 700; color: var(--navy); }
.contact-form__row { display: grid; gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); }
.field label { font-size: var(--fs-sm); font-weight: 600; color: var(--navy); }
.field input, .field textarea, .field select {
  width: 100%; padding: 0.75rem 0.875rem;
  font: 400 var(--fs-base)/1.5 var(--font); color: var(--text);
  background: var(--bg); border: 1px solid var(--border-strong); border-radius: 6px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: #9AA8BC; }
/* Dropdown (profile): same look as inputs, custom chevron */
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; cursor: pointer; }
.select::after { content: ""; position: absolute; right: 1rem; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); pointer-events: none; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(27, 95, 216, 0.18);
}
.field .is-invalid { border-color: var(--error); }
.field__error { font-size: var(--fs-xs); font-weight: 600; color: var(--error); }
.field__error:empty { display: none; }
.contact-form__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.form-status { font-size: var(--fs-sm); font-weight: 600; color: var(--primary); }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--error); }

@media (min-width: 768px) { .contact-form__row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .contact__inner { grid-template-columns: 5fr 6fr; gap: var(--s-9); align-items: start; } }
@media (max-width: 429px) {
  .contact__actions .btn, .contact-form__footer .btn { flex: 1 1 100%; }
}

/* ---------- 17. Footer ---------- */
.site-footer { padding-block: var(--s-8) var(--s-6); background: var(--surface); border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--muted); }
.site-footer a { text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.site-footer a:hover { color: var(--primary); }
.site-footer__top { display: grid; gap: var(--s-7); }
.site-footer .brand__logo { height: 2rem; }
.site-footer__tagline { margin-top: var(--s-3); font-weight: 600; color: var(--navy); }
.site-footer__nav ul { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); }
.site-footer__nav a, .site-footer__contact a, .site-footer__bottom a { display: inline-block; padding-block: var(--s-1); } /* ≥24px target */
.site-footer__contact { display: grid; gap: var(--s-1); max-width: 20rem; }
.site-footer__contact a { color: var(--navy); font-weight: 600; }
.site-footer__bottom {
  display: flex; flex-direction: column; gap: var(--s-3);
  margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--border); font-size: var(--fs-xs);
}
.site-footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
@media (min-width: 768px) { .site-footer__bottom { flex-direction: row; justify-content: space-between; } }
@media (min-width: 1024px) { .site-footer__top { grid-template-columns: 3fr 5fr 3fr; gap: var(--s-8); align-items: start; } }

/* ---------- 17b. Program detail pages ---------- */
.program-hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem); background: linear-gradient(180deg, var(--primary-soft) 0%, var(--bg) 100%); }
.program-hero__back { display: inline-flex; align-items: center; gap: var(--s-2); padding-block: var(--s-1); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); text-decoration: none; }
.program-hero__back:hover { color: var(--primary); }
.program-hero__back svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.program-hero__group { margin-top: var(--s-7); }
.program-hero__title { margin-top: var(--s-2); max-width: 18ch; font-size: clamp(2.5rem, 5vw + 1rem, 5rem); line-height: 1.04; font-weight: 800; letter-spacing: -0.04em; color: var(--navy); text-wrap: balance; }
.program-hero__category { margin-top: var(--s-3); font-size: var(--fs-lead); font-weight: 600; color: var(--muted); }
.program-hero__lead { margin-top: var(--s-5); max-width: 40rem; font-size: var(--fs-lead); line-height: 1.6; }
.program-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-6); }
.btn.is-pending { opacity: 0.45; cursor: default; }
.program-hero__pending { font-size: var(--fs-xs); color: var(--muted); }

.program-page { padding-block: var(--s-7) var(--section-y); }
.program-page__inner { display: grid; gap: var(--s-3); }
.program-block {
  display: grid; gap: var(--s-4);
  padding-block: var(--s-6); border-top: 1px solid var(--border);
}
.program-block__title { font-size: var(--fs-h3); line-height: 1.3; font-weight: 700; color: var(--navy); }
.program-block__text { max-width: var(--measure); color: var(--text); }
.program-block__text + .program-block__text { color: var(--muted); }
.program-block__pending, .program-block__note { font-size: var(--fs-sm); color: var(--muted); }
.program-block__pending { padding: var(--s-4) var(--s-5); border: 1px dashed var(--border-strong); border-radius: var(--radius); max-width: var(--measure); }

.facts { display: grid; gap: 0; max-width: 46rem; }
.facts__row { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr; gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.facts__row dt { color: var(--muted); }
.facts__row dd { font-weight: 600; color: var(--navy); }

.figures { display: flex; flex-wrap: wrap; gap: var(--s-6) var(--s-8); }
.figures__item { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--s-2); }  /* dt before dd in markup */
.figures__item dd { font-size: clamp(2.5rem, 3vw + 1rem, 3.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--navy); }
.figures__item dt { font-size: var(--fs-sm); color: var(--muted); }

.alumni { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--s-3); }
.alumni__item { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--s-3); align-items: center; padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.alumni__logo { grid-row: span 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
.alumni__logo img { width: 100%; height: 100%; object-fit: contain; }
.alumni__name { font-size: var(--fs-sm); font-weight: 700; color: var(--navy); }
.alumni__meta { font-size: var(--fs-xs); color: var(--muted); }

.program-partners { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); }
.program-partners__item { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); font-weight: 600; color: var(--navy); }
.program-partners__item img, .program-partners__slot { width: 3.5rem; height: 3.5rem; border-radius: var(--radius-sm); flex-shrink: 0; }
/* Logos keep their proportions (wordmarks stay legible); transparent PNGs, no frame */
.program-partners__item img { width: auto; height: 2.75rem; max-width: 9rem; object-fit: contain; border-radius: 0; }
.program-partners__slot { border: 1px dashed var(--border-strong); background: var(--surface); }

/* 3rd ACT detail page (migrated content): hero key facts, lists, supported startups, resources */
.program-hero__facts { margin-top: var(--s-5); max-width: 40rem; }
.program-checklist { display: grid; gap: var(--s-3); max-width: var(--measure); }
.program-checklist li { position: relative; padding-left: var(--s-5); }
.program-checklist li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--primary); }
.program-block__flag { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.program-block .tags { margin-top: 0; }
.program-startups { padding-bottom: var(--s-7); min-width: 0; }
.program-resources { display: grid; gap: var(--s-3); justify-items: start; }
.program-resources__type { padding: 0.125rem 0.5rem; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; color: var(--primary); background: var(--primary-soft); }
/* Static row (mobile / reduced motion): the strip already sits in the container, no extra gutter */
@media (max-width: 767px) { .program-startups { padding-bottom: 0; } .program-startups .marquee__group { padding-inline: 0; } }
@media (prefers-reduced-motion: reduce) { .program-startups .marquee__group { padding-inline: 0; } }

.program-page__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--border); }
@media (max-width: 429px) {
  .facts__row { grid-template-columns: 1fr; gap: var(--s-1); }
  .program-page__cta .btn { flex: 1 1 100%; }
}

/* ---------- 17c. 3rd ACT: card partner logo, partners band, apply / pre-register ---------- */
/* Homepage cards: official partner logos, secondary (below the partner mention), native proportions */
.program__meta--logos div { flex-direction: column; gap: var(--s-2); }
.program__logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); }
.program__logos img { display: block; width: auto; max-width: 11rem; object-fit: contain; }

/* Partners band (detail page): light background, centred logos of homogeneous height, little text */
.program-partners-band { display: grid; justify-items: center; gap: var(--s-5); padding: clamp(2rem, 5vw, 3.5rem) var(--s-5); text-align: center; background: var(--surface); border-radius: var(--radius-lg); }
.program-partners-band__text { max-width: 40rem; font-size: var(--fs-sm); color: var(--muted); }
.program-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-6) clamp(3rem, 9vw, 7rem); }
.program-logos__item img { display: block; width: auto; height: 4.75rem; max-width: 10rem; object-fit: contain; }   /* ≤ native/2: crisp */
@media (max-width: 479px) { .program-logos { flex-direction: column; } }

/* Apply (closed = greyed, not clickable) / Pre-register (primary while applications are closed) */
.program-hero__actions .btn:disabled, .program-page__cta .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--secondary:disabled:hover { border-color: var(--border-strong); color: var(--navy); }
.btn:disabled:active { transform: none; }
.program-actions__note { font-size: var(--fs-xs); color: var(--muted); }

/* Pre-registration dialog (native <dialog>: focus trap, Esc to close) */
.prereg {
  width: min(46rem, calc(100% - 2 * var(--gutter))); max-height: calc(100dvh - 2rem);
  margin: auto; padding: 0; border: 0; border-radius: var(--radius-lg); background: transparent; overflow: auto; overscroll-behavior: contain;
}
.prereg::backdrop { background: rgba(11, 31, 51, 0.55); }
.prereg__form { background: var(--bg); }
.prereg__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); }
.prereg__program { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--primary); }
.prereg__close {
  display: grid; place-items: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem; padding: 0; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: 50%; background: var(--bg); color: var(--navy);
}
.prereg__close:hover { border-color: var(--primary); color: var(--primary); }
.prereg__close svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.prereg__notice { font-size: var(--fs-sm); color: var(--muted); }
.field__optional { font-weight: 400; color: var(--muted); }
.field[hidden] { display: none; }
.check { display: flex; align-items: flex-start; gap: var(--s-3); }
.field .check input { flex-shrink: 0; width: 1.125rem; height: 1.125rem; margin-top: 0.2rem; padding: 0; accent-color: var(--primary); cursor: pointer; }
.field .check label { font-weight: 400; color: var(--text); cursor: pointer; }
.field .check a { color: var(--primary); }

/* Privacy notice under forms (Law 09-08 information) */
.form-notice { font-size: var(--fs-xs); line-height: 1.55; color: var(--muted); }
.form-notice a { color: var(--primary); }

/* ---------- Legal pages (Legal Notice / Privacy Policy) — same hero as program pages, readable text column ---------- */
.legal-hero__title { max-width: 22ch; font-size: clamp(2.25rem, 4vw + 1rem, 3.75rem); }
.legal-hero__updated { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--muted); }
.legal { padding-block: var(--s-6) var(--section-y); }
.legal__body { max-width: 46rem; }
.legal__section { padding-block: var(--s-6); border-top: 1px solid var(--border); }
.legal__section:first-child { border-top: 0; padding-top: 0; }
.legal__title { margin-bottom: var(--s-3); font-size: var(--fs-h3); line-height: 1.3; font-weight: 700; color: var(--navy); }
.legal__num { color: var(--primary); }
.legal__section p { color: var(--text); line-height: 1.7; overflow-wrap: anywhere; }
.legal__section p + p, .legal__section p + .legal__list, .legal__list + p, .legal__section p + .legal__address, .legal__address + p { margin-top: var(--s-3); }
.legal__section strong { font-weight: 700; color: var(--navy); }
.legal__section a { color: var(--primary); }
.legal__list { display: grid; gap: var(--s-1); margin: 0; padding-left: 1.25rem; list-style: disc; color: var(--text); line-height: 1.6; }
.legal__list li::marker { color: var(--primary); }
.legal__address { padding: var(--s-3) var(--s-4); border-left: 2px solid var(--primary); background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.form-status.is-success { color: var(--primary); }

/* ---------- 17d. Horizontal transition homepage ⇄ program page ---------- */
/* Driven by the inline script of the layout (deterministic, every click, all browsers):
   leave = content slides out (home → left / program → right), then navigation on animationend;
   enter = new page content slides in from the opposite side. Header stays in place.
   Classes are always removed after the animation and on every page show. No motion if reduced. */
html.vt-leave-left body, html.vt-leave-right body, html.vt-enter-left body, html.vt-enter-right body { overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) {
  html.vt-leave-left main, html.vt-leave-left .site-footer   { animation: vt-leave-left 260ms cubic-bezier(0.4, 0, 0.2, 1) forwards; }
  html.vt-leave-right main, html.vt-leave-right .site-footer { animation: vt-leave-right 260ms cubic-bezier(0.4, 0, 0.2, 1) forwards; }
  html.vt-enter-right main, html.vt-enter-right .site-footer { animation: vt-enter-right 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  html.vt-enter-left main, html.vt-enter-left .site-footer   { animation: vt-enter-left 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
}
@keyframes vt-leave-left  { to   { transform: translateX(-6%); opacity: 0; } }
@keyframes vt-leave-right { to   { transform: translateX(8%);  opacity: 0; } }
@keyframes vt-enter-right { from { transform: translateX(10%); opacity: 0; } }
@keyframes vt-enter-left  { from { transform: translateX(-6%); opacity: 0; } }
/* Mobile: shorter movement, slightly shorter duration */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  html.vt-leave-left main, html.vt-leave-left .site-footer   { animation: vt-leave-left-sm 220ms cubic-bezier(0.4, 0, 0.2, 1) forwards; }
  html.vt-leave-right main, html.vt-leave-right .site-footer { animation: vt-leave-right-sm 220ms cubic-bezier(0.4, 0, 0.2, 1) forwards; }
  html.vt-enter-right main, html.vt-enter-right .site-footer { animation: vt-enter-right-sm 340ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  html.vt-enter-left main, html.vt-enter-left .site-footer   { animation: vt-enter-left-sm 340ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
}
@keyframes vt-leave-left-sm  { to   { transform: translateX(-3%); opacity: 0; } }
@keyframes vt-leave-right-sm { to   { transform: translateX(4%);  opacity: 0; } }
@keyframes vt-enter-right-sm { from { transform: translateX(5%);  opacity: 0; } }
@keyframes vt-enter-left-sm  { from { transform: translateX(-3%); opacity: 0; } }

/* ---------- 18. Reveal on scroll (JS only, soft) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0; transform: translateY(18px);
    transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }
}