/* ===================================================================
   FUTURE BRIDGE INTERNATIONAL FOUNDATION — DESIGN SYSTEM
   Tokens, reset, typography, layout primitives
=================================================================== */

:root{
  --navy-950:#040F1C;
  --navy-900:#071C30;
  --navy-800:#0B2A45;
  --navy-700:#0F3A5C;
  --navy-600:#144A73;
  --navy-500:#1B5D8F;
  --navy-400:#2E78AD;
  --navy-300:#5C9BC7;
  --navy-200:#9CC3E0;
  --navy-100:#D3E5F2;
  --navy-050:#EEF5FA;

  --green-900:#063B27;
  --green-800:#0A5236;
  --green-700:#0C6B45;
  --green-600:#0F8654;
  --green-500:#12A163;
  --green-400:#1CBB74;
  --green-300:#4FD498;
  --green-200:#96E6BE;
  --green-100:#CDF3DF;
  --green-050:#EAFAF1;

  --sand-100:#F6F3EC;
  --sand-200:#EFE9DB;

  --white:#FFFFFF;
  --black:#000000;

  --font-display:'Fraunces', 'Iowan Old Style', 'Georgia', serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;

  --container:1280px;
  --container-narrow:820px;
  --container-wide:1440px;
  --gutter:clamp(20px, 5vw, 64px);

  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --radius-xl:32px;
  --radius-pill:999px;

  --ease:cubic-bezier(.22,.68,0,1);
  --dur-fast:.18s;
  --dur-med:.42s;
  --dur-slow:.9s;

  --shadow-sm:0 1px 2px rgba(7,28,48,.06), 0 1px 1px rgba(7,28,48,.04);
  --shadow-md:0 8px 24px -8px rgba(7,28,48,.16), 0 2px 8px -2px rgba(7,28,48,.08);
  --shadow-lg:0 24px 64px -20px rgba(7,28,48,.28), 0 8px 24px -8px rgba(7,28,48,.12);
  --shadow-glow-green:0 0 0 1px rgba(18,161,99,.18), 0 12px 32px -12px rgba(18,161,99,.35);

  color-scheme: light;
  --bg:#F6F9FB;
  --bg-raised:#FFFFFF;
  --bg-sunken:#EEF3F6;
  --bg-inverse:var(--navy-950);
  --surface:#FFFFFF;
  --surface-2:#F1F5F8;
  --glass-bg:rgba(255,255,255,.62);
  --glass-border:rgba(11,42,69,.10);
  --glass-blur:18px;
  --ink:#0B1F30;
  --ink-soft:#3E5468;
  --ink-faint:#6E8296;
  --ink-on-dark:#EAF3F9;
  --ink-on-dark-soft:#A9C1D3;
  --border:rgba(11,42,69,.11);
  --border-strong:rgba(11,42,69,.22);
  --brand:var(--navy-700);
  --brand-strong:var(--navy-900);
  --accent:var(--green-600);
  --accent-strong:var(--green-700);
  --link:var(--navy-600);
  --focus-ring:var(--green-500);
}

[data-theme="dark"]{
  color-scheme: dark;
  --bg:#050F1A;
  --bg-raised:#0A1C2C;
  --bg-sunken:#030A12;
  --bg-inverse:#F6F9FB;
  --surface:#0C2032;
  --surface-2:#102838;
  --glass-bg:rgba(12,32,50,.55);
  --glass-border:rgba(220,235,245,.10);
  --glass-blur:20px;
  --ink:#EAF3F9;
  --ink-soft:#AFC5D6;
  --ink-faint:#7C93A6;
  --ink-on-dark:#0B1F30;
  --ink-on-dark-soft:#3E5468;
  --border:rgba(220,235,245,.10);
  --border-strong:rgba(220,235,245,.18);
  --brand:var(--navy-300);
  --brand-strong:var(--navy-100);
  --accent:var(--green-400);
  --accent-strong:var(--green-300);
  --link:var(--navy-200);
  --focus-ring:var(--green-400);
  --shadow-md:0 8px 28px -10px rgba(0,0,0,.55), 0 2px 10px -2px rgba(0,0,0,.4);
  --shadow-lg:0 30px 70px -24px rgba(0,0,0,.65), 0 10px 30px -10px rgba(0,0,0,.5);
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,h6,p,figure{ margin:0; }
h1,h2,h3,h4,h5,h6{ overflow-wrap:break-word; word-break:break-word; }
input,textarea,select{ font:inherit; color:inherit; }

:focus-visible{
  outline:2.5px solid var(--focus-ring);
  outline-offset:3px;
  border-radius:4px;
}

::selection{ background:var(--green-200); color:var(--navy-900); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:16px; top:-60px; z-index:1000;
  background:var(--navy-900); color:#fff; padding:12px 20px;
  border-radius:var(--radius-sm); transition:top .2s var(--ease);
  font-weight:600; font-size:.9rem;
}
.skip-link:focus{ top:16px; }

/* ---------- Typography ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-strong);
  font-weight:500;
}
.eyebrow::before{
  content:"";
  width:22px; height:1.5px;
  background:currentColor;
  display:inline-block;
}
.eyebrow.on-dark{ color:var(--green-300); }

h1,.h1{
  font-family:var(--font-display);
  font-weight:560;
  letter-spacing:-.01em;
  line-height:1.04;
  color:var(--ink);
  font-size:clamp(2.4rem, 4.6vw, 4.4rem);
}
h2,.h2{
  font-family:var(--font-display);
  font-weight:540;
  letter-spacing:-.008em;
  line-height:1.08;
  color:var(--ink);
  font-size:clamp(1.9rem, 3.2vw, 3rem);
}
h3,.h3{
  font-family:var(--font-display);
  font-weight:520;
  line-height:1.18;
  color:var(--ink);
  font-size:clamp(1.4rem, 1.9vw, 1.7rem);
}
h4,.h4{
  font-family:var(--font-body);
  font-weight:650;
  line-height:1.3;
  color:var(--ink);
  font-size:1.08rem;
}
.lede{
  font-size:clamp(1.06rem, 1.5vw, 1.28rem);
  line-height:1.55;
  color:var(--ink-soft);
  font-weight:400;
  max-width:56ch;
}
.body-text{ color:var(--ink-soft); max-width:62ch; }
.body-text p + p{ margin-top:1.1em; }
.mono-tag{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.02em;
  color:var(--ink-faint);
}
strong{ font-weight:650; color:var(--ink); }
.italic-accent{ font-style:italic; font-family:var(--font-display); }
.text-link{
  color:var(--link);
  font-weight:600;
  border-bottom:1.5px solid var(--border-strong);
  transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.text-link:hover{ border-color:var(--accent-strong); color:var(--accent-strong); }

/* ---------- Layout ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container-narrow{
  width:100%;
  max-width:var(--container-narrow);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container-wide{
  width:100%;
  max-width:var(--container-wide);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block: clamp(64px, 9vw, 128px); position:relative; }
.section-tight{ padding-block: clamp(44px, 6vw, 76px); position:relative; }
.section-header{
  display:flex; flex-direction:column; gap:18px;
  max-width:760px;
  margin-bottom:clamp(36px, 5vw, 64px);
}
.section-header.center{ align-items:center; text-align:center; margin-inline:auto; }
.section-alt{ background:var(--bg-sunken); }
.section-inverse{
  background:var(--navy-950);
  color:var(--ink-on-dark);
}
.section-inverse h1,.section-inverse h2,.section-inverse h3{ color:#fff; }
.section-inverse .body-text,.section-inverse .lede{ color:var(--ink-on-dark-soft); }

.grid{ display:grid; gap:var(--gutter); min-width:0; }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }
.cols-6{ grid-template-columns:repeat(6,1fr); }
@media (max-width:1024px){
  .cols-3,.cols-4{ grid-template-columns:repeat(2,1fr); }
  .cols-6{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:640px){
  .cols-2,.cols-3,.cols-4,.cols-6{ grid-template-columns:1fr; }
}

/* Defensive fix: grid/flex items default to min-width:auto, which sizes to their
   content's unshrinkable minimum (e.g. nowrap text or a long button). This lets
   every grid/flex column and item in the layout shrink properly instead of
   forcing the row — and the whole page — wider than the viewport. */
.grid > *, .container > *, .container-narrow > *, .container-wide > *,
.hero-grid > *, .stat-strip > *, .pathway > *, .field-row > *, .chip-group > *,
.subpage-shell > *, .newsletter-grid > *, .footer-top > *, .cta-banner-grid > *,
.split > *, .academy-banner > *, .impact-options > *, .involve-grid > *, .steps > *,
.area-row, .metric-grid > *, .report-grid > *, .contact-grid > *, .legal-shell > *,
.two-up > *{ min-width:0; }

.stack{ display:flex; flex-direction:column; }
.gap-xs{ gap:8px; } .gap-sm{ gap:14px; } .gap-md{ gap:22px; } .gap-lg{ gap:36px; } .gap-xl{ gap:56px; }
.hidden{ display:none !important; }
@media (max-width:900px){ .hide-mobile{ display:none !important; } }
@media (min-width:901px){ .hide-desktop{ display:none !important; } }

.divider{ height:1px; background:var(--border); border:0; margin:0; }

/* bridge-arc divider */
.arc-divider{ width:100%; height:56px; overflow:hidden; }
.arc-divider svg{ width:100%; height:100%; display:block; }
.arc-divider path{ stroke:var(--border-strong); fill:none; stroke-width:1.5; }