/* ===================================================================
   Robotics Technical Education Foundation, Inc. (RTEF)
   2026 redesign — navy + gold identity on a light-first canvas.
   System architecture adapted from the NCFC implementation of the
   2026 web-design research (fluid type, WCAG 2.2 AA, motion guards).
   Fonts: Space Grotesk (display) + Inter (body), self-hosted.
   =================================================================== */

/* ---------- Fonts ---------- */
@font-face { font-family:'Inter'; font-weight:400 700; font-style:normal; font-display:swap; src:url('../assets/fonts/inter-latin.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-weight:500 700; font-style:normal; font-display:swap; src:url('../assets/fonts/space-grotesk-latin.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  /* Navy anchor (FIRST blue / Team Krunch navy) */
  --navy:#0c2545; --navy-700:#143458; --navy-800:#0a1f3c; --navy-900:#07172e;
  /* Gold accent (Krunch flag gold; "award-winning") — used as FILLS/highlights, never text on white */
  --gold:#f5a524; --gold-600:#e0941a; --gold-bright:#ffc24b; --gold-soft:rgba(245,165,36,.14);
  /* Accessible link/icon blue on light */
  --blue:#155fb8; --blue-50:#eaf2fc;
  /* Light canvas */
  --bg:#f5f8fc; --surface:#ffffff; --surface-2:#eef3f9; --gray:#f1f5f9;
  /* Text (AA verified on white) */
  --ink:#0e2440; --body:#39495c; --muted:#5d6f86; --border:#e3eaf2; --border-2:#d2dde9;
  /* On navy */
  --on-navy:#d8e4f1; --on-navy-muted:#a7c0d8;

  /* Fluid type scale (Utopia clamp pattern, from NCFC) */
  --step--1:clamp(0.84rem,0.82rem + 0.12vw,0.92rem);
  --step-0: clamp(1.02rem,0.99rem + 0.16vw,1.13rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.36vw,1.4rem);
  --step-2: clamp(1.42rem,1.28rem + 0.66vw,1.9rem);
  --step-3: clamp(1.72rem,1.5rem + 1.05vw,2.5rem);
  --step-4: clamp(2.05rem,1.7rem + 1.7vw,3.25rem);
  --step-5: clamp(2.5rem, 1.95rem + 2.7vw,4.4rem);

  --radius:16px; --r-sm:10px; --r-lg:24px; --pill:999px;
  --maxw:1200px; --maxw-read:730px;
  --shadow-sm:0 2px 6px rgba(12,37,69,.06),0 8px 24px rgba(12,37,69,.06);
  --shadow-md:0 8px 24px rgba(12,37,69,.10),0 18px 48px rgba(12,37,69,.10);
  --shadow-lg:0 28px 70px rgba(7,23,46,.30);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--body);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--step-0); line-height:1.7; -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { color:var(--blue); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3,h4 { font-family:'Space Grotesk','Inter',sans-serif; font-weight:700; color:var(--ink); line-height:1.12; margin:0 0 .5em; letter-spacing:-.01em; }
h1 { font-size:var(--step-4); }
h2 { font-size:var(--step-3); }
h3 { font-size:var(--step-1); }
p { margin:0 0 1.1em; }
[id] { scroll-margin-top:92px; }

.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.container--read { max-width:var(--maxw-read); }
section { padding:clamp(54px,7vw,96px) 0; }
section.tight { padding:clamp(40px,5vw,64px) 0; }

/* ---------- Accessibility ---------- */
:focus-visible { outline:3px solid var(--blue); outline-offset:3px; border-radius:6px; }
.hero :focus-visible, .band-navy :focus-visible, .site-footer :focus-visible, .site-header .btn-donate:focus-visible { outline-color:var(--gold-bright); }
.skip-link { position:absolute; left:-999px; top:0; background:var(--navy); color:#fff; padding:12px 18px; border-radius:0 0 8px 0; z-index:500; }
.skip-link:focus { left:0; }
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .js .reveal { opacity:1 !important; transform:none !important; }
}

/* ---------- Reveal on scroll ---------- */
.js .reveal { opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity:1; transform:none; }
.js .reveal.d1 { transition-delay:.08s; } .js .reveal.d2 { transition-delay:.16s; } .js .reveal.d3 { transition-delay:.24s; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:13px 28px;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:var(--step-0);
  border:none; border-radius:var(--pill); cursor:pointer; text-align:center;
  transition:transform .18s var(--ease), box-shadow .18s ease, background .18s ease;
}
.btn:hover { transform:translateY(-2px); text-decoration:none; }
.btn-gold { background:var(--gold); color:var(--navy-900); box-shadow:0 8px 20px rgba(245,165,36,.34); }
.btn-gold:hover { background:var(--gold-bright); box-shadow:0 12px 28px rgba(245,165,36,.42); }
.btn-navy { background:var(--navy); color:#fff; box-shadow:0 8px 20px rgba(12,37,69,.26); }
.btn-navy:hover { background:var(--navy-800); }
.btn-outline { background:transparent; color:var(--navy); box-shadow:inset 0 0 0 1.6px var(--border-2); }
.btn-outline:hover { box-shadow:inset 0 0 0 1.6px var(--navy); background:var(--surface); }
.btn-ghost { background:transparent; color:#fff; box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.5); }
.btn-ghost:hover { background:rgba(255,255,255,.10); box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.85); }
.btn-lg { min-height:56px; padding:16px 36px; font-size:var(--step-1); }

/* ---------- Eyebrow ---------- */
.eyebrow {
  display:inline-flex; align-items:center; gap:9px;
  background:var(--gold-soft); color:var(--navy);
  font-family:'Space Grotesk',sans-serif; font-size:var(--step--1); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:7px 16px; border-radius:var(--pill);
  margin-bottom:18px; border:1px solid rgba(245,165,36,.34);
}
.eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(245,165,36,.22); }
.band-navy .eyebrow, .hero .eyebrow, .cta-card .eyebrow, .page-hero .eyebrow { background:rgba(245,165,36,.16); color:var(--gold-bright); border-color:rgba(255,194,75,.36); }

.section-head { max-width:760px; margin:0 auto clamp(34px,4vw,52px); text-align:center; }
.section-head .lead { font-size:var(--step-1); color:var(--muted); margin:0; }
.band-navy .section-head .lead { color:var(--on-navy); }

/* ---------- Header ---------- */
.site-header { position:sticky; top:0; z-index:200; background:rgba(255,255,255,.85); backdrop-filter:saturate(1.6) blur(12px); border-bottom:1px solid var(--border); transition:box-shadow .25s, background .25s; }
.site-header.scrolled { box-shadow:0 6px 24px rgba(12,37,69,.09); background:rgba(255,255,255,.95); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:72px; }
.brand { display:inline-flex; align-items:center; gap:12px; }
.brand img { height:44px; width:auto; }
.brand .wordmark { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.02rem; color:var(--ink); line-height:1.1; letter-spacing:-.01em; }
.brand .wordmark small { display:block; font-size:.66rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.main-nav { display:flex; align-items:center; gap:6px; }
.main-nav a { position:relative; color:var(--navy); font-weight:600; font-size:.98rem; padding:9px 14px; border-radius:var(--pill); }
.main-nav a:hover { text-decoration:none; color:var(--blue); }
.main-nav a[aria-current="page"] { color:var(--navy); }
.main-nav a[aria-current="page"]::after { content:""; position:absolute; left:14px; right:14px; bottom:3px; height:2px; background:var(--gold); border-radius:2px; }
.btn-donate { display:inline-flex; align-items:center; gap:7px; min-height:42px; padding:8px 20px; margin-left:6px; background:var(--gold); color:var(--navy-900); font-family:'Space Grotesk',sans-serif; font-weight:700; border-radius:var(--pill); box-shadow:0 6px 16px rgba(245,165,36,.32); transition:transform .16s var(--ease), box-shadow .16s; }
.btn-donate:hover { transform:translateY(-2px); text-decoration:none; color:var(--navy-900); background:var(--gold-bright); }
.nav-toggle { display:none; width:46px; height:46px; border:1px solid var(--border-2); border-radius:10px; background:#fff; cursor:pointer; padding:0; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content:""; display:block; width:22px; height:2px; background:var(--navy); margin:0 auto; position:relative; transition:transform .2s, opacity .2s; }
.nav-toggle span::before { position:absolute; top:-7px; } .nav-toggle span::after { position:absolute; top:7px; }
.nav-toggle.open span { background:transparent; }
.nav-toggle.open span::before { transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span::after { transform:translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden; color:#fff; background:linear-gradient(165deg,var(--navy-700) 0%,var(--navy) 52%,var(--navy-900) 100%); padding:clamp(30px,3.6vw,52px) 0 clamp(32px,3.6vw,52px); }
.hero::before { content:""; position:absolute; inset:0; background:url('../assets/img/abstract-1920.webp') center/cover no-repeat; opacity:.18; mix-blend-mode:luminosity; pointer-events:none; }
.hero::after { content:""; position:absolute; top:-26%; right:-8%; width:600px; height:600px; background:radial-gradient(circle,rgba(245,165,36,.20),transparent 62%); pointer-events:none; }
.hero > .container { position:relative; z-index:1; }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,60px); align-items:center; }
.hero h1 { color:#fff; font-size:var(--step-5); margin-bottom:14px; }
.hero h1 .hl { color:var(--gold-bright); }
.hero .subhead { font-size:var(--step-1); color:var(--on-navy); margin-bottom:26px; max-width:36ch; }
.hero-cta { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:30px; }
.hero-media { position:relative; }
.hero-media img { width:100%; height:auto; aspect-ratio:5/4; object-fit:cover; object-position:center; border-radius:var(--r-lg); box-shadow:var(--shadow-lg); background:var(--navy-800); }
.hero-media .badge-float { position:absolute; left:16px; bottom:16px; background:#fff; color:var(--navy); border-radius:14px; padding:11px 15px; box-shadow:var(--shadow-md); display:flex; align-items:center; gap:10px; font-weight:700; }
.hero-media .badge-float img { width:34px; height:auto; border-radius:0; box-shadow:none; aspect-ratio:auto; }
.hero-media .badge-float small { display:block; font-weight:600; font-size:.72rem; color:var(--muted); }

/* Trust strip */
.trust-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:14px 14px; padding-top:16px; border-top:1px solid rgba(255,255,255,.14); }
.trust-strip .ts { display:flex; flex-direction:column; }
.trust-strip b { font-family:'Space Grotesk',sans-serif; font-size:1.2rem; color:var(--gold-bright); line-height:1.1; }
.trust-strip span { font-size:var(--step--1); color:var(--on-navy-muted); }

/* ---------- Page hero (subpages) ---------- */
.page-hero { position:relative; overflow:hidden; color:#fff; text-align:center; background:linear-gradient(165deg,var(--navy-700),var(--navy) 55%,var(--navy-900)); padding:clamp(48px,6vw,88px) 0 clamp(40px,5vw,60px); }
.page-hero::before { content:""; position:absolute; inset:0; background:url('../assets/img/abstract-1920.webp') center/cover; opacity:.14; mix-blend-mode:luminosity; }
.page-hero::after { content:""; position:absolute; top:-32%; left:50%; transform:translateX(-50%); width:680px; height:520px; background:radial-gradient(circle,rgba(245,165,36,.16),transparent 62%); pointer-events:none; }
.page-hero > .container { position:relative; z-index:1; }
.page-hero h1 { color:#fff; font-size:var(--step-4); margin:0 auto 14px; max-width:760px; text-wrap:balance; }
.page-hero .subhead { color:var(--on-navy); font-size:var(--step-1); max-width:58ch; margin:0 auto; text-wrap:pretty; }

/* ---------- Mission / brand logos ---------- */
.mission-text { font-size:var(--step-1); color:var(--body); }
.brand-logos { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:40px; margin-top:30px; }
.brand-logos figure { margin:0; text-align:center; }
.brand-logos img { height:74px; width:auto; margin:0 auto 8px; }
.brand-logos figcaption { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }

/* ---------- Cards ---------- */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); transition:transform .2s var(--ease), box-shadow .2s; }
.card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.card img { width:100%; height:190px; object-fit:cover; }
.card-body { padding:22px 24px 26px; }
.card-body h3 { margin-bottom:.35em; }
.card-body p { margin:0; color:var(--body); font-size:var(--step-0); }
.card-kicker { font-family:'Space Grotesk',sans-serif; font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); }

/* ---------- Navy bands ---------- */
.band-navy { position:relative; overflow:hidden; background:linear-gradient(160deg,var(--navy-700),var(--navy) 60%,var(--navy-900)); color:#fff; }
.band-navy h2 { color:#fff; }
.band-navy::before { content:""; position:absolute; inset:0; background:url('../assets/img/abstract-1920.webp') center/cover; opacity:.10; mix-blend-mode:luminosity; }
.band-navy > .container { position:relative; z-index:1; }

/* Impact stats */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.stat b { display:block; font-family:'Space Grotesk',sans-serif; font-size:var(--step-4); color:var(--gold-bright); line-height:1; }
.stat span { display:block; margin-top:8px; color:var(--on-navy); font-size:var(--step-0); }

/* ---------- Support CTA band ---------- */
.cta-card { background:linear-gradient(150deg,var(--navy),var(--navy-900)); color:#fff; border-radius:var(--r-lg); padding:clamp(34px,5vw,56px); text-align:center; box-shadow:var(--shadow-lg); position:relative; overflow:hidden; }
.cta-card h2 { color:#fff; }
.cta-card p { color:var(--on-navy); max-width:62ch; margin:0 auto 24px; }
.cta-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- Prose (About/Support) ---------- */
.prose { font-size:var(--step-0); color:var(--body); }
.prose p { margin:0 0 1.2em; }
.prose a { color:var(--blue); text-decoration:underline; font-weight:600; }
.prose h2 { margin-top:1.4em; }
.prose h3 { font-size:var(--step-1); color:var(--ink); margin:1.6em 0 .5em; }
.prose ul { margin:0 0 1.3em; padding-left:1.25em; }
.prose li { margin-bottom:.55em; }
.surface-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(26px,4vw,44px); box-shadow:var(--shadow-sm); }
.need-cols { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.address { font-style:normal; font-weight:600; color:var(--ink); line-height:1.6; margin:8px 0; }

/* ---------- Contact form ---------- */
.contact-grid { display:grid; grid-template-columns:1.25fr .9fr; gap:40px; align-items:start; }
.form { display:grid; gap:16px; }
.field { display:flex; flex-direction:column; }
.field label { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.9rem; color:var(--ink); margin-bottom:6px; }
.field input, .field textarea { font-family:inherit; font-size:var(--step-0); padding:12px 14px; border:1px solid var(--border-2); border-radius:var(--r-sm); background:#fff; color:var(--ink); }
.field input:focus, .field textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(21,95,184,.16); }
.field textarea { resize:vertical; min-height:140px; }
.form-confirm { display:none; background:#e7f6ec; border:1px solid #aedcbb; color:#1c6b37; padding:14px 16px; border-radius:var(--r-sm); margin-bottom:6px; font-weight:600; }
.form-confirm.show { display:block; }
.contact-aside { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-sm); }
.contact-aside .row { display:flex; gap:12px; align-items:flex-start; margin-bottom:16px; }
.contact-aside .row svg { width:20px; height:20px; color:var(--blue); flex:none; margin-top:3px; }

/* ---------- Footer ---------- */
.site-footer { background:var(--navy-900); color:var(--on-navy); padding:clamp(44px,6vw,68px) 0 34px; }
.footer-top { display:flex; flex-wrap:wrap; justify-content:space-between; gap:28px; align-items:flex-start; margin-bottom:26px; }
.footer-brand { max-width:340px; }
.footer-brand img { height:42px; width:auto; margin-bottom:16px; background:#fff; padding:9px 13px; border-radius:12px; box-shadow:0 4px 14px rgba(0,0,0,.18); }
.footer-brand p { color:var(--on-navy-muted); font-size:var(--step--1); margin:0; }
.footer-cols { display:flex; gap:54px; flex-wrap:wrap; }
.footer-col h4 { color:#fff; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:12px; }
.footer-col a { display:block; color:var(--on-navy); font-size:var(--step--1); padding:5px 0; }
.footer-col a:hover { color:var(--gold-bright); text-decoration:none; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding-top:22px; }
.footer-bottom .disclaimer { font-size:.72rem; line-height:1.7; color:var(--on-navy-muted); max-width:920px; margin:0 0 12px; }
.footer-bottom .copy { font-size:.78rem; color:var(--on-navy-muted); margin:0; }

/* ---------- Responsive ---------- */
@media (max-width:920px) {
  .nav-toggle { display:block; }
  .main-nav { position:fixed; inset:72px 0 auto 0; flex-direction:column; align-items:stretch; gap:0; background:#fff; border-bottom:1px solid var(--border); box-shadow:var(--shadow-md); padding:10px 18px 18px; transform:translateY(-130%); transition:transform .25s; max-height:calc(100vh - 72px); overflow:auto; }
  .main-nav.open { transform:translateY(0); }
  .main-nav a { padding:14px 8px; border-bottom:1px solid var(--border); border-radius:0; }
  .main-nav a[aria-current="page"]::after { display:none; }
  .btn-donate { margin:12px 8px 0; justify-content:center; }
  .hero-grid { grid-template-columns:1fr; gap:32px; }
  .hero-media { order:-1; }
  .grid-3 { grid-template-columns:1fr; }
  .stats { grid-template-columns:1fr 1fr; gap:28px 18px; }
  .need-cols { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; gap:28px; }
}
@media (max-width:520px) {
  .stats { grid-template-columns:1fr; }
  .trust-strip { grid-template-columns:repeat(2,1fr); }
  .hero-media .badge-float { left:8px; }
}