/* ===========================================================
   Chicago STEM Foundation — Global stylesheet
   Demystifying STEM. Empowering Futures.

   Structure
   01 Tokens        02 Reset / base     03 Layout helpers
   04 Typography    05 Buttons          06 Header
   07 Heroes        08 Bands & ribbons  09 Cards & grids
   10 Stats         11 Quote banner     12 Alternating blocks
   13 Process       14 Blog             15 Footer
   16 Motion        17 Responsive
   =========================================================== */

/* ---------- 01 Tokens ---------- */
:root {
  /* Brand */
  --navy:        #102B5C;
  --navy-deep:   #0A1D40;
  --navy-soft:   #1C3E7D;
  --teal:        #1497B5;
  --teal-deep:   #0E7C96;
  --purple:      #6231A5;
  --purple-deep: #4A2280;

  /* Neutrals.
     The brand is entirely cool — navy, teal, purple — so pure white
     and a blue-grey tint read as clinical. These neutrals carry a
     little warmth to balance that, while staying quiet enough that
     the brand colours still do the talking. */
  --white:   #FFFFFF;   /* kept for cards and the header, which sit above the page */
  --paper:   #FBF8F4;   /* page background, warm off-white */
  --mist:    #F4EFE9;   /* alternating sections, warm sand */
  --mist-2:  #EDE5DC;
  --line:    #E4DCD2;   /* warm border, matches the sand rather than fighting it */
  --line-cool: #DCE5EF; /* retained where a cool edge suits, e.g. over photography */
  --ink:     #1B2436;   /* a touch warmer than before, still AA on paper */
  --muted:   #5B6273;

  /* Signature gradients */
  --grad-ribbon: linear-gradient(90deg, var(--navy) 0%, var(--teal) 52%, var(--purple) 100%);
  --grad-band:   linear-gradient(100deg, var(--navy-deep) 0%, var(--navy) 30%, var(--navy-soft) 58%, var(--purple) 100%);
  --grad-footer: linear-gradient(115deg, var(--navy-deep) 0%, var(--navy) 45%, var(--purple-deep) 100%);
  --grad-text:   linear-gradient(90deg, var(--teal), var(--purple));

  /* Type */
  --font-display: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.15vw, 1.03rem);
  --step-1:  clamp(1.1rem, 1.02rem + 0.35vw, 1.3rem);
  --step-2:  clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --step-3:  clamp(1.8rem, 1.5rem + 1.4vw, 2.6rem);
  --step-4:  clamp(2.2rem, 1.6rem + 2.6vw, 3.9rem);

  /* Space & shape */
  --wrap: 1180px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 7vw, 6rem);
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(16, 43, 92, .06);
  --shadow-md: 0 14px 40px rgba(16, 43, 92, .12);
  --shadow-lg: 0 26px 70px rgba(16, 43, 92, .18);

  --header-h: 78px;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--teal-deep); text-decoration: none; }
a:hover { color: var(--purple); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff; padding: .8rem 1.2rem;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

.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;
}

/* ---------- 03 Layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: 1340px; }

.section { padding-block: var(--section-y); }
.section--mist { background: var(--mist); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.stack > * + * { margin-top: 1rem; }

/* ---------- 04 Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  line-height: 1.14;
  margin: 0;
  text-wrap: balance;
}

h1, .h1 {
  font-size: var(--step-4);
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
}
/* For long page titles that would otherwise break awkwardly at h1 scale */
.h1--long { font-size: var(--step-3); }

h2, .h2 { font-size: var(--step-3); font-weight: 700; letter-spacing: -.005em; }
h3, .h3 { font-size: var(--step-1); font-weight: 700; }
h4      { font-size: var(--step-0); font-weight: 700; }

p { margin: 0 0 1rem; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

.lede {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--teal-deep);
  line-height: 1.35;
  letter-spacing: -.01em;
  max-width: 30ch;
}
.lede .accent { color: var(--purple); }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0 0 .7rem;
}

.gradient-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.muted { color: var(--muted); }
.center { text-align: center; }
.center p { margin-inline: auto; }

.section-head--row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  max-width: none;
}
.section-head--row > div { flex: 1 1 40rem; }
.section-head--row > .link-more { padding-bottom: .5rem; }

.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head.center { margin-inline: auto; }

/* ---------- 05 Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .85rem 1.6rem;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary   { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-soft); color: #fff; }

.btn--accent    { background: var(--teal-deep); color: #fff; }
.btn--accent:hover { background: var(--teal); color: #fff; }

.btn--secondary { background: #fff; color: var(--navy); border-color: var(--line); }
.btn--secondary:hover { border-color: var(--teal); color: var(--teal-deep); }

.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
.link-more svg { width: 13px; height: 13px; transition: transform .18s ease; }
.link-more:hover svg { transform: translateX(4px); }

/* ---------- 05b Forms ---------- */
.field { display: block; }
.field label {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--navy);
  margin-bottom: .35rem;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: .72rem .9rem;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.field textarea { resize: vertical; }

/* ---------- 06 Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 248, 244, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--header-h);
}
.brand { flex: 0 0 auto; margin-right: auto; }
.brand img { width: clamp(168px, 20vw, 232px); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.1rem); }
.nav__link {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
  padding-block: .35rem;
}
.nav__link:hover { color: var(--teal-deep); }
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--grad-text);
  transform: scaleX(0);
  transition: transform .2s ease;
}
.nav__link[aria-current="page"] { color: var(--navy); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.nav-toggle .bar,
.nav-toggle .bar::before,
.nav-toggle .bar::after {
  content: "";
  display: block;
  width: 20px; height: 2px;
  background: var(--navy);
  transition: transform .22s ease, opacity .22s ease;
}
.nav-toggle .bar { position: relative; }
.nav-toggle .bar::before { position: absolute; top: -6px; }
.nav-toggle .bar::after  { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] .bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .bar::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 07 Heroes ---------- */
/* Immersive image hero — Home */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--navy-deep);
  color: #fff;
  overflow: hidden;
  min-height: min(78vh, 620px);
  display: grid;
  align-items: center;
  padding-block: clamp(3rem, 8vw, 6.5rem);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(92deg, rgba(10,29,64,.96) 0%, rgba(16,43,92,.86) 42%, rgba(16,43,92,.25) 72%, rgba(98,49,165,.3) 100%);
}
/* Fallback texture if no photograph is supplied */
.hero__media { background: var(--grad-band); }
.hero::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  background: url("../img/skyline-light.svg") repeat-x bottom center / auto 100%;
  opacity: .22;
  z-index: -1;
  pointer-events: none;
}

.hero__orbit {
  position: absolute;
  right: -6%;
  top: 50%;
  translate: 0 -50%;
  width: min(560px, 52vw);
  opacity: .9;
  z-index: -1;
  pointer-events: none;
}
.hero__content { max-width: 52rem; position: relative; }
.hero h1 { color: #fff; margin-bottom: 1.1rem; }
.hero h1 .t { color: #35C4E0; }
.hero h1 .p { color: #B98CF0; }
.hero p { color: rgba(255,255,255,.9); max-width: 44ch; font-size: var(--step-1); }
.hero .btn-row { margin-top: 1.8rem; }

/* Split hero — interior pages */
.hero-split { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.5rem); }
.hero-split__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.8rem, 5vw, 4rem);
  align-items: center;
}
.hero-split h1 { margin-bottom: .6rem; }
.hero-split .lede { margin-bottom: 1.2rem; }
.hero-split .btn-row { margin-top: 1.6rem; }

.hero-split__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
  background: var(--grad-band);
}
.hero-split__media img { width: 100%; height: 100%; object-fit: cover; }

/* Mission hero: circular photo inside the STEM orbit */
.orbit-frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  max-width: 460px;
  margin-inline: auto;
  width: 100%;
}
.orbit-frame__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.orbit-frame__photo {
  width: 68%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--grad-band);
  box-shadow: var(--shadow-md);
}
.orbit-frame__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 08 Bands & ribbons ---------- */
.pillars {
  position: relative;
  /* Supplied artwork layered over the brand gradient, which shows through
     if the image is ever missing. Shorthand cannot take both, so these are
     declared as separate layers. */
  background-color: var(--navy);
  background-image: url("../img/gradient-bar.jpg"), var(--grad-band);
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
}
.pillars__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(2.2rem, 4vw, 3rem);
}
.pillar { display: flex; gap: 1rem; align-items: flex-start; }
.pillar__icon { flex: 0 0 auto; width: 34px; height: 34px; color: #7FE3F5; }
.pillar h3 {
  color: #fff;
  font-size: var(--step-0);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.pillar p { color: rgba(255,255,255,.82); font-size: var(--step--1); line-height: 1.6; }

/* Full-bleed gradient ribbon with skyline line art */
.ribbon {
  position: relative;
  background-color: var(--navy);
  background-image: url("../img/ribbon-bg.jpg"), var(--grad-footer);
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
  padding-block: clamp(2.6rem, 6vw, 4.2rem);
}
.ribbon > .wrap { position: relative; z-index: 1; }
.ribbon h2, .ribbon h3 { color: #fff; }
.ribbon p { color: rgba(255,255,255,.88); }

/* ---------- 09 Cards & grids ---------- */
.grid {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.6rem);
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}
.grid--4 { --cols: 4; }
.grid--3 { --cols: 3; }
.grid--2 { --cols: 2; }

.card {
  background: var(--mist);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: .7rem;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.card__icon { width: 40px; height: 40px; color: var(--teal-deep); }
.card__icon--purple { color: var(--purple); }
.card__icon--navy   { color: var(--navy); }
.card h3 {
  font-size: var(--step-0);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--navy);
}
.card p { font-size: var(--step--1); color: var(--muted); line-height: 1.65; }
.card .link-more { margin-top: auto; padding-top: .4rem; }

.card--center { align-items: center; text-align: center; }
.card--center p { max-width: 26ch; }

/* Whole-card link (Support page) */
.card--action { position: relative; background: var(--mist); }
.card--action:hover,
.card--action:focus-within {
  background: #fff;
  border-color: var(--teal);
  box-shadow: var(--shadow-md);
}
.card--action a::after { content: ""; position: absolute; inset: 0; }
.card--action a { color: var(--navy); }

.card--bare { background: #fff; border-color: var(--line); }

/* ---------- 10 Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
}
.stat { text-align: center; }
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}
.stat:nth-child(1) .stat__value { color: var(--navy); }
.stat:nth-child(2) .stat__value { color: var(--purple); }
.stat:nth-child(3) .stat__value { color: var(--teal-deep); }
.stat:nth-child(4) .stat__value { color: var(--purple-deep); }
.stat__label {
  font-size: var(--step--1);
  color: var(--muted);
  margin-top: .4rem;
}

/* ---------- 11 Quote banner ---------- */
.quote { max-width: 46rem; }
.quote__rule { width: 96px; height: 3px; background: var(--grad-text); border: 0; margin: 0 0 1.2rem; }
.quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
}
.quote figcaption { margin-top: 1.4rem; font-size: var(--step--1); color: rgba(255,255,255,.75); }

/* ---------- 12 Alternating image/text blocks ---------- */
.alt-block { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.8rem, 5vw, 4rem); align-items: center; }
.alt-block + .alt-block { margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.alt-block__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--grad-band);
  box-shadow: var(--shadow-sm);
}
.alt-block__media img { width: 100%; height: 100%; object-fit: cover; }
.alt-block--flip .alt-block__media { order: 2; }

/* Collage (Home welcome section) */
.collage {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: .8rem;
  aspect-ratio: 4 / 3.2;
}
.collage figure { margin: 0; border-radius: var(--r-md); overflow: hidden; background: var(--grad-band); }
.collage figure:first-child { grid-row: span 2; }
.collage img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 13 Process timeline ---------- */
.process {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  counter-reset: step;
}
.process__step { position: relative; padding-top: 2.6rem; }
.process__step::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  top: 0; left: 0;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 800;
  color: var(--purple);
  letter-spacing: .06em;
}
.process__step::after {
  content: "";
  position: absolute;
  top: 1.85rem; left: 0; right: 0;
  height: 2px;
  background: var(--grad-ribbon);
  opacity: .35;
}
.process__step:last-child::after { background: var(--purple); opacity: .5; }
.process__step h3 {
  font-size: var(--step-0);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.process__step p { font-size: var(--step--1); color: var(--muted); line-height: 1.6; }

/* ---------- 14 Blog ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1.2rem, 3vw, 2rem); }
.post-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.post-card:hover { box-shadow: var(--shadow-md); border-color: var(--teal); }
.post-card__media { aspect-ratio: 16/9; background: var(--grad-band); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 1.3rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.post-card__meta { font-size: var(--step--1); color: var(--muted); }
.post-card__tag {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--purple); background: #F0EAFA;
  padding: .25rem .6rem; border-radius: var(--r-pill);
}
.post-card h3 { font-size: var(--step-1); }
.post-card h3 a { color: var(--navy); }
.post-card h3 a::after { content: ""; position: absolute; inset: 0; }
.post-card p { font-size: var(--step--1); color: var(--muted); }

.article { max-width: 68ch; margin-inline: auto; }
.article h2 { font-size: var(--step-2); margin-top: 2.4rem; margin-bottom: .8rem; }
.article h3 { margin-top: 1.8rem; margin-bottom: .5rem; }
.article p, .article li { font-size: var(--step-1); line-height: 1.75; }
.article ul, .article ol { padding-left: 1.3rem; }
.article li { margin-bottom: .5rem; }
.article blockquote {
  margin: 2rem 0;
  padding-left: 1.4rem;
  border-left: 3px solid var(--teal);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.4;
}
.article__meta { color: var(--muted); font-size: var(--step--1); margin-bottom: 1.5rem; }
.article__figure { margin: 2rem 0; }
.article__figure img { border-radius: var(--r-md); width: 100%; }
.article__figure figcaption { font-size: var(--step--1); color: var(--muted); margin-top: .6rem; }

/* ---------- 15 Footer ---------- */
.footer {
  position: relative;
  background-color: var(--navy-deep);
  background-image: url("../img/footer-bg.jpg"), var(--grad-footer);
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
  padding-block: clamp(2.5rem, 5vw, 3.4rem);
}
.footer__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3.2rem);
  align-items: start;
}
.footer__brand img {
  width: clamp(180px, 22vw, 240px);
  filter: brightness(0) invert(1);
}
.footer h3 {
  color: #fff;
  font-size: var(--step-0);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .6rem;
}
.footer p { color: rgba(255,255,255,.85); font-size: var(--step--1); }
.footer .btn-row { margin-top: 1.1rem; }

.social { display: flex; gap: .6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.social a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  color: #fff;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.social a:hover { background: #fff; color: var(--navy); border-color: #fff; }
.social svg { width: 16px; height: 16px; }

.footer__contact { font-size: var(--step--1); color: rgba(255,255,255,.85); line-height: 1.9; }
.footer__contact a { color: rgba(255,255,255,.9); }
.footer__contact a:hover { color: #7FE3F5; }

.footer__legal {
  position: relative; z-index: 1;
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,.22);
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: space-between;
  font-size: var(--step--1);
  color: rgba(255,255,255,.7);
}
.footer__legal a { color: rgba(255,255,255,.8); }
.footer__legal nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }

/* ---------- 16 Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- 17 Responsive ---------- */
@media (max-width: 1000px) {
  .grid--4 { --cols: 2; }
  .process { grid-template-columns: repeat(3, 1fr); row-gap: 2rem; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  :root { --header-h: 68px; }

  .nav-toggle { display: grid; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: .5rem var(--gutter) 1.4rem;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav[data-open="true"] { opacity: 1; transform: none; visibility: visible; }
  .nav__link { padding: .95rem 0; border-bottom: 1px solid var(--line); font-size: var(--step-0); }
  .nav__link::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--teal-deep); }
  .nav .btn { margin-top: 1rem; }

  .split,
  .hero-split__grid,
  .alt-block { grid-template-columns: 1fr; }
  .alt-block--flip .alt-block__media { order: 0; }
  .hero-split__grid > .hero-split__media,
  .hero-split__grid > .orbit-frame { order: -1; }

  .pillars__grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
  .post-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer__inner { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .grid--4, .grid--3, .grid--2 { --cols: 1; }
  .process { grid-template-columns: 1fr; }
  .process__step { padding-top: 0; padding-left: 3.2rem; }
  .process__step::before { top: .1rem; }
  .process__step::after { display: none; }
  .post-grid { grid-template-columns: 1fr; }
  .collage { aspect-ratio: 4 / 3; }
  .hero { min-height: auto; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .footer .btn { width: auto; }
  .footer .btn-row { flex-direction: row; }
}

@media print {
  .site-header, .footer, .nav-toggle { display: none; }
}

/* ===========================================================
   18 Program pages — dual-team robotics
   Used by robotics.html. Team accents sit inside the brand range.
   =========================================================== */
:root {
  --team-bro: #0B47E0;   /* Brogrammers blue */
  --team-dev: #7010D6;   /* Develop(h)ers purple */
}

/* Two team logos side by side */
.teams {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
}
.team {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: .9rem;
  border-top: 4px solid var(--team-accent, var(--teal));
}
.team--bro { --team-accent: var(--team-bro); }
.team--dev { --team-accent: var(--team-dev); }
.team__logo { width: min(340px, 100%); margin-bottom: .3rem; }
.team p { font-size: var(--step--1); color: var(--muted); }
.team__note {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--team-accent);
}

/* Key-facts strip */
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.8rem);
}
.fact { display: flex; gap: .85rem; align-items: flex-start; }
.fact__icon { flex: 0 0 auto; width: 28px; height: 28px; color: var(--teal-deep); }
.fact h3 {
  font-size: var(--step--1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: .2rem;
}
.fact p {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.35;
}

/* Partner logo row.
   Each logo sits in a fixed-height box and scales inside it, so wordmarks
   of very different proportions still read as the same visual weight. */
.partners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(1rem, 2.4vw, 1.8rem);
  max-width: 900px;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.partners li {
  display: grid;
  place-items: center;
  padding: 1.2rem 1.4rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  min-height: 148px;
}
.partners a, .partners span { display: grid; place-items: center; width: 100%; }
.partners img {
  max-height: 88px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
/* Optical sizing: the tall stacked mark needs more room than the wordmarks */
.partners img[data-mark="stacked"] { max-height: 112px; }
.partners a:hover img { opacity: .78; transition: opacity .18s ease; }

.partners__note {
  font-size: var(--step--1);
  color: var(--muted);
  margin-top: 1.2rem;
}

/* Applications-not-yet-open state */
.notice {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  background: var(--mist);
  border: 1px solid var(--line);
  border-left: 4px solid var(--purple);
  border-radius: var(--r-sm);
  padding: 1.1rem 1.3rem;
}
.notice p { font-size: var(--step--1); color: var(--muted); }
.notice strong { color: var(--navy); }
.btn[aria-disabled="true"] {
  opacity: .55;
  pointer-events: none;
  cursor: default;
}

@media (max-width: 1000px) { .facts { grid-template-columns: repeat(2, 1fr); row-gap: 1.6rem; } }
@media (max-width: 860px)  { .teams { grid-template-columns: 1fr; } }
@media (max-width: 620px)  { .facts { grid-template-columns: 1fr; } }

/* ---------- 20 Light hero (home) ----------
   The mockup's home hero is a bright photograph with navy type, not a
   dark overlay. The scrim fades white from the left so the copy stays
   legible while the skyline and the orbit ring keep their color. */
.hero--light {
  background: linear-gradient(180deg, #F7FAFD 0%, #E9F1F8 100%);
  color: var(--ink);
  min-height: min(72vh, 600px);
}
.hero--light .hero__media { background: linear-gradient(160deg, #EDF3F9 0%, #DCE8F4 100%); }
.hero--light .hero__media img { object-position: center 55%; }
/* The scrim has to hold long enough for the body copy, not just the
   headline — the paragraph is smaller and lower contrast, and the
   photograph is brightest exactly where it sits. */
.hero--light .hero__media::after {
  background: linear-gradient(95deg,
    rgba(255,255,255,.98) 0%,
    rgba(255,255,255,.96) 34%,
    rgba(255,255,255,.86) 46%,
    rgba(255,255,255,.35) 60%,
    rgba(255,255,255,.02) 76%,
    rgba(255,255,255,0) 100%);
  z-index: 2;
}
/* A photograph is supplied, so the skyline stand-in is no longer needed */
.hero--light::before { display: none; }

.hero--light h1 { color: var(--navy); }
.hero--light h1 .t { color: var(--teal-deep); }
.hero--light h1 .p { color: var(--purple); }
.hero--light p { color: var(--muted); max-width: 40ch; }

/* Mirrored on the horizontal axis: the ring's break then sits low-left,
   clear of the headline, instead of cutting across the words. */
.hero__orbit--flip { transform: scaleY(-1); }

.hero--light .hero__orbit {
  right: 4%;
  width: min(500px, 46vw);
  opacity: 1;
  z-index: -1;
}

.btn--outline {
  background: rgba(255,255,255,.7);
  color: var(--purple);
  border-color: var(--purple);
}
.btn--outline:hover { background: var(--purple); color: #fff; border-color: var(--purple); }

@media (max-width: 900px) {
  /* Copy moves over the middle of the photo, so fade white downward instead */
  .hero--light { min-height: auto; }
  .hero--light .hero__orbit {
    right: -26%;
    top: auto;
    bottom: -8%;
    translate: 0 0;
    width: min(360px, 68vw);
    opacity: .34;
  }
  .hero--light .hero__media::after {
    background: linear-gradient(180deg,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.9) 55%,
      rgba(255,255,255,.72) 100%);
  }
}

/* ---------- 21 Shaped artwork ----------
   Photographs supplied with a shaped edge (a curve cut into the image).
   These must not be cropped or framed — the shape is meant to read against
   the page — so the frame, radius, and shadow are removed and the image
   keeps its own aspect ratio. Declared last so it overrides the media
   containers it is applied to. The section behind it must be white. */
.media-shaped {
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
  background: none;
  overflow: visible;
}
.media-shaped img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ===========================================================
   22 Forms
   Generated from the shared schema by assets/js/forms.js.
   =========================================================== */
.form { max-width: 46rem; }
.form__section {
  border: 0;
  border-top: 1px solid var(--line);
  padding: 1.8rem 0 0;
  margin: 0 0 1.6rem;
}
.form__section:first-of-type { border-top: 0; padding-top: 0; }
.form__section legend {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--navy);
  padding: 0;
  margin-bottom: 1.1rem;
}

.form .field { margin-bottom: 1.15rem; }
.form .field label,
.form .field__legend {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--navy);
  margin-bottom: .35rem;
}
.field__help {
  font-size: var(--step--1);
  color: var(--muted);
  margin: 0 0 .4rem;
  line-height: 1.5;
}
.form input, .form select, .form textarea {
  width: 100%;
  padding: .72rem .9rem;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form textarea { resize: vertical; min-height: 6rem; }
.form input:focus, .form select:focus, .form textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(20, 151, 181, .18);
  outline: none;
}

/* Checkboxes and groups */
.check { display: flex; align-items: flex-start; gap: .65rem; margin-bottom: .5rem; }
.check input[type="checkbox"] {
  width: 1.15rem; height: 1.15rem;
  flex: 0 0 auto; margin-top: .18rem;
  accent-color: var(--teal-deep);
}
.check label {
  margin-bottom: 0 !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  line-height: 1.5;
}
.checkgroup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0 1.4rem;
}
/* Radio options are long sentences here, so they stack full width */
.checkgroup--radio { grid-template-columns: 1fr; }
.check input[type="radio"] {
  width: 1.15rem; height: 1.15rem;
  flex: 0 0 auto; margin-top: .18rem;
  accent-color: var(--teal-deep);
}
.field--invalid .checkgroup { 
  border-left: 3px solid #B3261E;
  padding-left: .8rem;
  margin-left: -.8rem;
}

/* Errors */
.field__help--after { margin: .1rem 0 0 1.8rem; }

.field__error {
  font-size: var(--step--1);
  color: #B3261E;
  margin: .35rem 0 0;
  min-height: 0;
}
.field__error:empty { display: none; }
.field--invalid input,
.field--invalid select,
.field--invalid textarea { border-color: #B3261E; }
.field--invalid .field__help--after { margin: .1rem 0 0 1.8rem; }

.field__error { display: block; }

/* Honeypot — hidden from people and from screen readers,
   but present in the DOM for automated form fillers. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__captcha { margin: 1.2rem 0; }
.form__actions { margin-top: 1.6rem; }
.form__actions .btn:disabled { opacity: .6; cursor: progress; }

.form__status {
  margin-top: .9rem;
  font-size: var(--step--1);
  color: var(--muted);
}
.form__status:empty { display: none; }
.form__status--error { color: #B3261E; font-weight: 600; }

.form__success {
  border: 1px solid var(--teal);
  border-left: 4px solid var(--teal-deep);
  background: var(--mist);
  border-radius: var(--r-md);
  padding: clamp(1.4rem, 3vw, 2rem);
}
.form__success h3 { margin-bottom: .5rem; }
.form__success p { color: var(--muted); }

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

/* ===========================================================
   23 Donation embed (Donorbox)
   =========================================================== */

/* The donation form is tall and variable in height, so this block
   aligns to the top rather than centring like the other alt-blocks. */
.alt-block--donate { align-items: start; }

/* Wrapper for the donation widget. The widget draws its own card,
   so this only reserves space and positions it. */
.donate-embed { min-height: 420px; }

/* The header is sticky, so anchor targets need clearance or the
   heading lands underneath it. */
[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

@media (max-width: 860px) {
  .donate-embed { min-height: 380px; }
  /* On one column the form goes first — a donor who has already decided
     shouldn't have to scroll past four paragraphs of persuasion. */
  .alt-block--donate .donate-embed { order: -1; margin-bottom: 1.6rem; }
}

/* ===========================================================
   24 Donation widget (Stripe Checkout)
   =========================================================== */
.donate {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.3rem, 3vw, 1.9rem);
}

/* Frequency toggle */
.donate__freq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
  padding: .3rem;
  background: var(--mist);
  border-radius: var(--r-sm);
  margin-bottom: 1.3rem;
}
.donate__freq-btn {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .7rem .5rem;
  border: 0;
  border-radius: calc(var(--r-sm) - 1px);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.donate__freq-btn.is-active {
  background: #fff;
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}

/* Amount buttons */
.donate__amounts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  margin-bottom: .8rem;
}
.donate__amount {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  padding: .85rem .3rem;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--navy);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.donate__amount:hover { border-color: var(--teal); }
.donate__amount.is-active {
  border-color: var(--teal-deep);
  background: var(--teal-deep);
  color: #fff;
}

.donate__note {
  font-size: var(--step--1);
  color: var(--muted);
  min-height: 1.4em;
  margin: 0 0 1rem;
}

/* Custom amount */
.donate__custom label {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--navy);
  margin-bottom: .35rem;
}
.donate__custom-field { position: relative; }
.donate__currency {
  position: absolute;
  left: .9rem; top: 50%;
  translate: 0 -50%;
  color: var(--muted);
  font-weight: 600;
}
.donate__custom-field input {
  width: 100%;
  padding: .72rem .9rem .72rem 1.9rem;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.donate__custom-field input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(20,151,181,.18);
  outline: none;
}

.donate__fees { margin: 1.1rem 0 0; }
.donate__fees label { font-size: var(--step--1); }

.donate__actions { margin-top: 1.3rem; }
.donate__submit { width: 100%; font-size: var(--step-0); padding: 1rem 1.4rem; }
.donate__submit:disabled { opacity: .55; cursor: not-allowed; }

.donate__status {
  margin: .8rem 0 0;
  font-size: var(--step--1);
  color: var(--muted);
  line-height: 1.55;
}
.donate__status:empty { display: none; }
.donate__status--error { color: #B3261E; font-weight: 600; }

.donate__secure {
  margin: 1.1rem 0 0;
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.55;
  border-top: 1px solid var(--line);
  padding-top: .9rem;
}

@media (max-width: 520px) {
  .donate__amounts { grid-template-columns: repeat(2, 1fr); }
}

/* The shaped-edge treatment was removed. The two robotics photographs
   still carry their curve baked into the file, and .media-shaped
   displays those uncropped — see section 21. */

/* ===========================================================
   25 Embedded video
   Responsive 16:9 wrapper. The YouTube iframe is loaded only
   when the person clicks — a bare embed sets cookies and pulls
   ~700KB from Google on every page view, whether or not anyone
   watches. The facade below is a poster image and a play button.
   =========================================================== */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--navy-deep);
  box-shadow: var(--shadow-md);
}
.video iframe,
.video img,
.video button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video img { object-fit: cover; }

.video__play {
  display: grid;
  place-items: center;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background-color .2s ease;
}
.video__play::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(10,29,64,.35), rgba(16,43,92,.55));
  transition: opacity .2s ease;
}
.video__play:hover::before { opacity: .7; }

.video__icon {
  position: relative;
  width: clamp(58px, 8vw, 84px);
  height: clamp(58px, 8vw, 84px);
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
  transition: transform .2s ease;
}
.video__play:hover .video__icon { transform: scale(1.07); }
.video__icon svg { width: 38%; height: 38%; fill: var(--navy); }

.video__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.6rem 1.4rem 1.1rem;
  background: linear-gradient(transparent, rgba(10,29,64,.85));
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .04em;
  text-align: left;
}

/* ---------- 26 Hero video ----------
   Sits on top of the still image, which remains as the poster and as
   the fallback when no video file is present. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  z-index: 1;   /* under the scrim, which is z-index 2 */
}
.hero__media img { position: relative; z-index: 0; }

/* Respect a stated preference for reduced motion: no autoplaying
   footage, just the still. This is an accessibility requirement, not
   a nicety — moving backgrounds trigger symptoms for some people. */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}