/* ============================================================
   FSA — Florida Student Association · Landing page concept
   Palette pulled from the official seal:
     navy   #16455C  (ring / Florida outline field)
     navy-2 #0E3447  (deeper shade for footer / overlays)
     gold   #E0A92E  (Florida silhouette, FSA letters)
     cream  #F7F1DE  (warm paper)
     mist   #C3D2D6  (soft blue-gray neutral)
   Rule: gold text only ever sits on navy. On cream/white, gold
   is a background or rule, never type.
   ============================================================ */

:root {
  --navy: #16455c;
  --navy-2: #0e3447;
  --navy-3: #1d5470;
  --gold: #e0a92e;
  --gold-bright: #ecbc4b;
  --cream: #f7f1de;
  --paper: #fcfaf2;
  --mist: #c3d2d6;
  --mist-light: #e3ebed;
  --ink: #14303f;
  --ink-soft: #4a6473;

  --font-display: "Libre Franklin", "Helvetica Neue", sans-serif;
  --font-body: "Public Sans", "Helvetica Neue", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --maxw: 1180px;
  --radius: 6px;
}

html[data-display-font="Archivo"] {
  --font-display: "Archivo", "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- type ---------- */

h1, h2, h3 { font-family: var(--font-display); line-height: 1.06; letter-spacing: -0.015em; }

.kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.kicker::before {
  content: "";
  width: 34px;
  height: 4px;
  background: var(--gold);
}
.on-navy .kicker { color: var(--mist); }
.on-navy .kicker::before { background: var(--gold); }

.section-title {
  font-size: clamp(32px, 3.6vw, 46px);
  font-weight: 800;
  color: var(--navy);
  text-wrap: balance;
  max-width: 18ch;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  padding: 15px 28px;
  border-radius: var(--radius);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-gold {
  background: var(--gold);
  color: var(--navy-2);
}
.btn-gold:hover { background: var(--gold-bright); box-shadow: 0 6px 18px rgba(224, 169, 46, 0.35); }

.btn-navy {
  background: var(--navy);
  color: #fff;
}
.btn-navy:hover { background: var(--navy-3); box-shadow: 0 6px 18px rgba(22, 69, 92, 0.3); }

.btn-outline {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn-outline:hover { background: var(--navy); color: #fff; }

.btn .arrow { transition: transform 0.15s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- THE WAVE SCALE (seal water lines · 3 sanctioned tiers) ----------
   Canonical geometry, extracted verbatim from the triple-wave divider:
   96px tile · Q-crest with 6px control offset · gold stroke, round caps ·
   parallel in-phase ripples, 10px line spacing (one unit, countable lines).
     W3 major break    3 lines (1 / .6 / .35)  "new act"    max 2 per page
     W2 section break  2 lines (1 / .5)        "new scene"
     W1 component edge 1 line  (2px stroke)    "this unit ends"
   Only line count, weight, and opacity vary by tier; never the wavelength.
   Hard budget: max 4 section-divider waves per page (W1 card edges excluded).
   Never stack two wave dividers without content between them. ---------- */

/* W3 — major break (canonical; .wave-divider kept as legacy alias) */
.wave-divider,
.wave-w3 {
  height: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='36' viewBox='0 0 96 36'%3E%3Cpath d='M0 8 Q 12 2 24 8 T 48 8 T 72 8 T 96 8' fill='none' stroke='%23e0a92e' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M0 18 Q 12 12 24 18 T 48 18 T 72 18 T 96 18' fill='none' stroke='%23e0a92e' stroke-width='2.5' stroke-linecap='round' opacity='0.6'/%3E%3Cpath d='M0 28 Q 12 22 24 28 T 48 28 T 72 28 T 96 28' fill='none' stroke='%23e0a92e' stroke-width='2.5' stroke-linecap='round' opacity='0.35'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  width: 100%;
  margin: 0 auto;
}
.wave-divider.left { margin: 0; }

/* W2 — section break */
.wave-w2 {
  height: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='26' viewBox='0 0 96 26'%3E%3Cpath d='M0 8 Q 12 2 24 8 T 48 8 T 72 8 T 96 8' fill='none' stroke='%23e0a92e' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M0 18 Q 12 12 24 18 T 48 18 T 72 18 T 96 18' fill='none' stroke='%23e0a92e' stroke-width='2.5' stroke-linecap='round' opacity='0.5'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  width: 100%;
  margin: 0 auto;
}

/* W1 — component edge */
.wave-w1 {
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='16' viewBox='0 0 96 16'%3E%3Cpath d='M0 8 Q 12 2 24 8 T 48 8 T 72 8 T 96 8' fill='none' stroke='%23e0a92e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  width: 100%;
  margin: 0 auto;
}

html[data-waves="off"] .wave-divider,
html[data-waves="off"] .wave-w3,
html[data-waves="off"] .wave-w2,
html[data-waves="off"] .wave-w1 { visibility: hidden; }

/* ---------- wave motion ----------
   W2/W3 dividers are built from per-line layers (.wl): each layer is a
   repeat-x tile sized container + one tile, so a compositor-only
   translateX(-1 tile) loops with mathematically seamless phase (the Q/T
   chain matches endpoint AND slope across the tile edge). Drift is LINEAR
   only — any easing inside a loop reads as stutter. Adjacent lines run in
   opposite directions at different slow speeds (14s/18s/24s) so the water
   slides past itself instead of conveyor-belting. W1 component edges NEVER
   move — if everything ripples, nothing does. JS (waves.js) only toggles
   .is-flowing / .is-arriving; reduced motion gets fully static waves. */

.wave-w2, .wave-w3 { position: relative; overflow: hidden; --wave-tile: 96px; }
.wave-w2 { background-image: none; }
.wave-w3 { background-image: none; }
.wave-w2 > .wl, .wave-w3 > .wl {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: calc(100% + var(--wave-tile));
  background-repeat: repeat-x;
}

@keyframes wave-flow {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--wave-tile))); }
}

/* W3 lines — same tile as the combined geometry, one path each.
   Integer stroke widths + geometricPrecision: no sub-pixel shimmer in drift. */
.wave-w3 > .wl-1 {
  --wl-dur: 14s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='36' viewBox='0 0 96 36' shape-rendering='geometricPrecision'%3E%3Cpath d='M0 8 Q 12 2 24 8 T 48 8 T 72 8 T 96 8' fill='none' stroke='%23e0a92e' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.wave-w3 > .wl-2 {
  --wl-dur: 18s;
  --wl-dir: reverse;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='36' viewBox='0 0 96 36' shape-rendering='geometricPrecision'%3E%3Cpath d='M0 18 Q 12 12 24 18 T 48 18 T 72 18 T 96 18' fill='none' stroke='%23e0a92e' stroke-width='3' stroke-linecap='round' opacity='0.6'/%3E%3C/svg%3E");
}
.wave-w3 > .wl-3 {
  --wl-dur: 24s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='36' viewBox='0 0 96 36' shape-rendering='geometricPrecision'%3E%3Cpath d='M0 28 Q 12 22 24 28 T 48 28 T 72 28 T 96 28' fill='none' stroke='%23e0a92e' stroke-width='3' stroke-linecap='round' opacity='0.35'/%3E%3C/svg%3E");
}

/* W2 lines */
.wave-w2 > .wl-1 {
  --wl-dur: 14s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='26' viewBox='0 0 96 26' shape-rendering='geometricPrecision'%3E%3Cpath d='M0 8 Q 12 2 24 8 T 48 8 T 72 8 T 96 8' fill='none' stroke='%23e0a92e' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.wave-w2 > .wl-2 {
  --wl-dur: 24s;
  --wl-dir: reverse;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='26' viewBox='0 0 96 26' shape-rendering='geometricPrecision'%3E%3Cpath d='M0 18 Q 12 12 24 18 T 48 18 T 72 18 T 96 18' fill='none' stroke='%23e0a92e' stroke-width='3' stroke-linecap='round' opacity='0.5'/%3E%3C/svg%3E");
}

/* hover-driven flow — fine pointers only; waves.js adds/removes .is-flowing.
   LINEAR, constant velocity; middle line reversed for organic layering. */
@media (hover: hover) and (pointer: fine) {
  .is-flowing .wl { animation: wave-flow var(--wl-dur) linear infinite var(--wl-dir, normal); }
}

@media (prefers-reduced-motion: reduce) {
  .wave-w2 > .wl, .wave-w3 > .wl, .hero-waves > .wseg {
  position: absolute;
  inset: 0;
}
.hero-waves .wl {
    animation: none !important;
    transform: none !important;
  }
}

/* audited placements (home page only — interior pages get ZERO section waves).
   Exactly four wave moments: hero triple (in-band) · W1 under the presidents
   grid · W2 at the Priorities/Rally seam (anchored to the very top edge of
   the Rally band's navy, within its first ~12px, reading as the closing edge
   of Priorities) · W3 crowning the footer (~24–32px below its top edge).
   Section waves never sit on white/cream filler — always gold-on-navy
   INSIDE the dark band. */
.presidents .wave-w1 { margin-top: 40px; }
.rally > .wave-w2 {
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}
.footer > .wave-w3 {
  margin-top: 28px;
  pointer-events: none;
}

@media (max-width: 480px) {
  /* natural 72px-wavelength tiles — amplitude scales, stroke width does NOT
     (no background-size scaling, so no sub-pixel stroke shimmer in drift) */
  .wave-divider { height: 27px; background-size: 72px 27px; }
  .wave-w2, .wave-w3 { --wave-tile: 72px; }
  .wave-w3 { height: 27px; }
  .wave-w3 > .wl-1 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='27' viewBox='0 0 72 27' shape-rendering='geometricPrecision'%3E%3Cpath d='M0 6 Q 9 2 18 6 T 36 6 T 54 6 T 72 6' fill='none' stroke='%23e0a92e' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
  .wave-w3 > .wl-2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='27' viewBox='0 0 72 27' shape-rendering='geometricPrecision'%3E%3Cpath d='M0 14 Q 9 10 18 14 T 36 14 T 54 14 T 72 14' fill='none' stroke='%23e0a92e' stroke-width='3' stroke-linecap='round' opacity='0.6'/%3E%3C/svg%3E"); }
  .wave-w3 > .wl-3 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='27' viewBox='0 0 72 27' shape-rendering='geometricPrecision'%3E%3Cpath d='M0 22 Q 9 18 18 22 T 36 22 T 54 22 T 72 22' fill='none' stroke='%23e0a92e' stroke-width='3' stroke-linecap='round' opacity='0.35'/%3E%3C/svg%3E"); }
  .wave-w2 { height: 20px; }
  .wave-w2 > .wl-1 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='20' viewBox='0 0 72 20' shape-rendering='geometricPrecision'%3E%3Cpath d='M0 6 Q 9 2 18 6 T 36 6 T 54 6 T 72 6' fill='none' stroke='%23e0a92e' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
  .wave-w2 > .wl-2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='20' viewBox='0 0 72 20' shape-rendering='geometricPrecision'%3E%3Cpath d='M0 14 Q 9 10 18 14 T 36 14 T 54 14 T 72 14' fill='none' stroke='%23e0a92e' stroke-width='3' stroke-linecap='round' opacity='0.5'/%3E%3C/svg%3E"); }
  .wave-w1 { height: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='12' viewBox='0 0 72 12' shape-rendering='geometricPrecision'%3E%3Cpath d='M0 6 Q 9 3 18 6 T 36 6 T 54 6 T 72 6' fill='none' stroke='%23e0a92e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: auto; }
  .priority-card .pc-wave { height: 12px; background-size: 72px 12px; }
  .presidents .wave-w1 { margin-top: 28px; }
  .rally > .wave-w2 { top: 3px; }
  .footer > .wave-w3 { margin-top: 20px; }
}

/* ---------- sticky nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(252, 250, 242, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(22, 69, 92, 0.12);
  transition: box-shadow 0.2s ease;
}
.nav.scrolled { box-shadow: 0 4px 24px rgba(14, 52, 71, 0.12); }

.nav-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 76px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-right: auto;
}
.nav-brand img { width: 48px; height: 48px; }
.nav-brand .brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.15;
  color: var(--navy);
  letter-spacing: 0.01em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
}
.nav-links a {
  display: block;
  white-space: nowrap;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  color: var(--ink-soft);
  padding: 8px 9px;
  border-radius: 4px;
  transition: color 0.12s ease, background 0.12s ease;
}
.nav-links a:hover { color: var(--navy); background: var(--mist-light); }

/* nav dropdown groups — label is a real link, caret is a separate toggle */
.nav-group { position: relative; }
.nav-group-trigger {
  display: flex;
  align-items: center;
  border-radius: 4px;
}
.nav-links a.nav-group-label {
  padding-right: 2px;
  border-radius: 4px 0 0 4px;
}
.nav-caret-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-soft);
  padding: 0 9px 0 3px;
  border-radius: 0 4px 4px 0;
  transition: color 0.12s ease, background 0.12s ease;
}
.nav-group:hover .nav-group-label,
.nav-group:hover .nav-caret-btn,
.nav-group.open .nav-group-label,
.nav-group.open .nav-caret-btn,
.nav-group.active .nav-group-label,
.nav-group.active .nav-caret-btn { color: var(--navy); background: var(--mist-light); }
.nav-caret { font-size: 10px; line-height: 1; opacity: 0.6; transition: transform 0.15s ease; }
.nav-group.open .nav-caret { transform: rotate(180deg); }
.nav-drop {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  min-width: 215px;
  list-style: none;
  background: var(--paper);
  border: 1px solid rgba(22, 69, 92, 0.16);
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(14, 52, 71, 0.16);
  padding: 6px;
  display: none;
  z-index: 80;
}
.nav-drop::before {
  /* invisible hover bridge between trigger and panel */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}
.nav-group:hover .nav-drop,
.nav-group:focus-within .nav-drop,
.nav-group.open .nav-drop { display: block; }
.nav-drop a { padding: 9px 12px; }

.nav .btn { padding: 11px 20px; font-size: 15px; }

.nav-toggle { display: none; }

/* nav width tiers — keep the full link row on one line down to the hamburger breakpoint */
@media (max-width: 1260px) {
  .nav-inner { gap: 18px; }
  .nav-links a { font-size: 14px; padding: 8px 7px; }
  .nav .btn { padding: 10px 14px; font-size: 14px; }
}
@media (max-width: 1080px) and (min-width: 861px) {
  .nav-brand .brand-name { display: none; }
}

/* ---------- hero ---------- */

.hero {
  background: var(--cream);
  position: relative;
  overflow: hidden;
}
/* PROTECTED — the triple wave at the hero/stat seam (soft grandfathered W3
   variant): same paths, same opacities, same phase as the original combined
   tile, split into one .wl layer per line for independent drift. Stroke
   trimmed 2.5→2 site-wide rule: integer strokes only, no drift shimmer. */
.hero-waves {
  position: absolute;
  inset: auto 0 26px 0;
  height: 38px;
  overflow: hidden;
  --wave-tile: 96px;
  pointer-events: none;
}
.hero-waves > .wseg {
  position: absolute;
  inset: 0;
}
.hero-waves .wl {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: calc(100% + var(--wave-tile));
  background-repeat: repeat-x;
}
.hero-waves .wl-1 {
  --wl-dur: 14s; --wl-arrive: 10s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='38' viewBox='0 0 96 38' shape-rendering='geometricPrecision'%3E%3Cpath d='M0 8 Q 12 2 24 8 T 48 8 T 72 8 T 96 8' fill='none' stroke='%23e0a92e' stroke-width='2' stroke-linecap='round' opacity='0.35'/%3E%3C/svg%3E");
}
.hero-waves .wl-2 {
  --wl-dur: 18s; --wl-arrive: 13s;
  --wl-dir: reverse;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='38' viewBox='0 0 96 38' shape-rendering='geometricPrecision'%3E%3Cpath d='M0 19 Q 12 13 24 19 T 48 19 T 72 19 T 96 19' fill='none' stroke='%23e0a92e' stroke-width='2' stroke-linecap='round' opacity='0.5'/%3E%3C/svg%3E");
}
.hero-waves .wl-3 {
  --wl-dur: 24s; --wl-arrive: 16s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='38' viewBox='0 0 96 38' shape-rendering='geometricPrecision'%3E%3Cpath d='M0 30 Q 12 24 24 30 T 48 30 T 72 30 T 96 30' fill='none' stroke='%23e0a92e' stroke-width='2' stroke-linecap='round' opacity='0.35'/%3E%3C/svg%3E");
}
/* signature entrance: one slow pass on first page load, then stillness.
   One-shot (not a loop), so ease-in-out is correct here — it starts gently
   and settles gently; it ends at exactly one tile width = the same phase it
   started, so the handoff to rest is invisible. */
.hero-waves.is-arriving .wl {
  animation: wave-flow var(--wl-arrive) ease-in-out 1 var(--wl-dir, normal) both;
}
html[data-waves="off"] .hero-waves { visibility: hidden; }

.hero-inner {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 56px;
  align-items: center;
  padding: 96px 32px 120px;
}

.hero h1 {
  font-size: clamp(48px, 5.8vw, 84px);
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 26px;
  text-wrap: balance;
}
.hero h1 .voice {
  display: inline-block;
  background: var(--navy);
  color: var(--gold);
  padding: 0 0.22em;
  margin-left: -0.05em;
}

.hero-sub {
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 56ch;
  margin-bottom: 36px;
  text-wrap: pretty;
}
.hero-sub strong { color: var(--ink); }

.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* CRISPNESS CEILING: the seal source is a 660×660 raster, so 330px CSS is
   the largest size that stays sharp on 2× retina. Do not raise the cap
   without vector (or ≥2× larger raster) art. */
.hero-seal {
  --seal-w: clamp(240px, 24vw, 330px);
  justify-self: center;
  position: relative;
}
/* lift: warm light pooled behind the seal — soft radial, no hard ring */
.hero-seal::before {
  content: "";
  position: absolute;
  inset: -14%;
  background: radial-gradient(closest-side, rgba(224, 169, 46, 0.14), rgba(224, 169, 46, 0) 72%);
  z-index: 0;
}
.hero-seal img {
  width: var(--seal-w);
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 24px 48px rgba(14, 52, 71, 0.30));
}

/* ---------- hero disc (FINAL, baked per design review Jun 2026) ----------
   Treatment D: a viewport-scale navy circle anchored 40px left of the seal
   box, bleeding off the right viewport edge (top and bottom clipped by the
   hero's overflow:hidden); the seal sits just inside its left arc, gold on
   navy. The 5px bold gold rim paints border-box, inside the existing arc, so
   geometry is unchanged and the hero's overflow clips it cleanly at the
   stat-band seam. Other baked decisions: cream hero tone, no seal ring,
   deep-navy stat band (--navy-2, gold numerals 6.17:1, WCAG AA), soft seal
   glow (the .hero-seal::before radial), full-width wave across the disc. */
.hero-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-fx > .fxl {
  position: absolute;
  display: block;
  left: -40px;
  top: 50%;
  width: 100vw;
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--navy);
  border: 5px solid var(--gold);
}

/* ---------- wave / rim handoff ----------
   The hero divider is rendered as TWO synchronized copies of the same
   animating lines: a gold copy (.wseg-gold) clipped to the cream side of the
   disc rim, and a cream-tinted copy (.wseg-cream, .wlc art) clipped to the
   disc side. The radial clip masks live on the STATIONARY .wseg wrappers,
   never on the drifting .wl lines themselves (a mask on the animated element
   travels with its transform, which made the handoff point slide off the rim
   mid-drift). Both copies share identical keyframes, durations, and
   start/stop timing (waves.js), so they move as one continuous wave whose
   color changes exactly at the rim at every frame.
   The mask boundary sits at the rim centerline (--disc-r minus 2.5px, with a
   1px anti-alias ramp), hiding the seam under the 5px gold stroke. The disc
   circle (--disc-cx/cy/r, px relative to .hero-waves) is measured by
   waves.js; the fallback parks it far off-canvas so the gold copy is
   full-width and the cream copy hidden until it runs. */
.hero-waves > .wseg-gold {
  -webkit-mask-image: radial-gradient(circle at var(--disc-cx, -300vw) var(--disc-cy, 0px), transparent calc(var(--disc-r, 0px) - 3px), #000 calc(var(--disc-r, 0px) - 2px));
  mask-image: radial-gradient(circle at var(--disc-cx, -300vw) var(--disc-cy, 0px), transparent calc(var(--disc-r, 0px) - 3px), #000 calc(var(--disc-r, 0px) - 2px));
}
.hero-waves > .wseg-cream {
  -webkit-mask-image: radial-gradient(circle at var(--disc-cx, -300vw) var(--disc-cy, 0px), #000 calc(var(--disc-r, 0px) - 3px), transparent calc(var(--disc-r, 0px) - 2px));
  mask-image: radial-gradient(circle at var(--disc-cx, -300vw) var(--disc-cy, 0px), #000 calc(var(--disc-r, 0px) - 3px), transparent calc(var(--disc-r, 0px) - 2px));
}
.hero-waves .wlc.wl-1 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='38' viewBox='0 0 96 38' shape-rendering='geometricPrecision'%3E%3Cpath d='M0 8 Q 12 2 24 8 T 48 8 T 72 8 T 96 8' fill='none' stroke='%23f7f1de' stroke-width='2' stroke-linecap='round' opacity='0.22'/%3E%3C/svg%3E"); }
.hero-waves .wlc.wl-2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='38' viewBox='0 0 96 38' shape-rendering='geometricPrecision'%3E%3Cpath d='M0 19 Q 12 13 24 19 T 48 19 T 72 19 T 96 19' fill='none' stroke='%23f7f1de' stroke-width='2' stroke-linecap='round' opacity='0.32'/%3E%3C/svg%3E"); }
.hero-waves .wlc.wl-3 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='38' viewBox='0 0 96 38' shape-rendering='geometricPrecision'%3E%3Cpath d='M0 30 Q 12 24 24 30 T 48 30 T 72 30 T 96 30' fill='none' stroke='%23f7f1de' stroke-width='2' stroke-linecap='round' opacity='0.22'/%3E%3C/svg%3E"); }

/* ---------- stat band ---------- */

.stat-band { background: var(--navy-2); }
.stat-band-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0 32px;
}
.stat {
  padding: 34px 28px;
  border-left: 1px solid rgba(195, 210, 214, 0.18);
}
.stat:first-child { border-left: none; }
.stat .num {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 800;
  color: var(--gold);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.stat .label {
  font-size: 14px;
  color: var(--mist);
  margin-top: 4px;
  text-wrap: balance;
}

/* ---------- constitution section ---------- */

.constitution {
  background: var(--navy);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.constitution .wrap {
  padding-top: 104px;
  padding-bottom: 104px;
  position: relative;
}
.constitution h2 {
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 800;
  color: #fff;
  margin-bottom: 36px;
  max-width: 20ch;
}
.constitution blockquote {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.1vw, 28px);
  font-weight: 500;
  line-height: 1.45;
  max-width: 30em;
  border-left: 4px solid var(--gold);
  padding-left: 32px;
  text-wrap: pretty;
}
.constitution blockquote em {
  font-style: normal;
  color: var(--gold-bright);
  font-weight: 700;
}
.constitution .citation {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--mist);
  margin-top: 34px;
  padding-left: 36px;
}

/* ---------- board ---------- */

.board { padding: 104px 0 110px; background: var(--paper); }
.board-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 52px;
  flex-wrap: wrap;
}
.board-head p { max-width: 46ch; color: var(--ink-soft); text-wrap: pretty; }

.board-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.board-card {
  background: #fff;
  border: 1px solid rgba(22, 69, 92, 0.14);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.board-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(14, 52, 71, 0.14);
}
.board-card .photo {
  aspect-ratio: 4 / 3.4;
  position: relative;
}
.board-card .meta {
  padding: 14px 16px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.meta-text { display: flex; flex-direction: column; min-width: 0; }

.sga-seal {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px dashed rgba(22, 69, 92, 0.4);
  background: rgba(227, 235, 237, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 8.5px;
  line-height: 1.25;
  color: var(--ink-soft);
}

.officer-tag {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--mist-light);
  padding: 3px 8px;
  border-radius: 3px;
  align-self: flex-start;
  margin-bottom: 6px;
}
.board-card .name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--navy);
}
.board-card .school {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-top: 2px;
}

.board-card.featured {
  grid-column: span 2;
  grid-row: span 1;
  background: var(--navy);
  border-color: var(--navy);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.board-card.featured .photo { aspect-ratio: auto; height: 100%; min-height: 230px; }
.board-card.featured .meta {
  padding: 26px 26px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.board-card.featured .chair-tag {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy-2);
  background: var(--gold);
  padding: 4px 10px;
  border-radius: 3px;
  align-self: flex-start;
  margin-bottom: 14px;
}
.board-card.featured .name-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.board-card.featured .sga-seal {
  border-color: rgba(195, 210, 214, 0.55);
  background: rgba(195, 210, 214, 0.12);
  color: var(--mist);
}
.board-card.featured .name { color: #fff; font-size: 22px; }
.board-card.featured .school { color: var(--mist); font-size: 14px; margin-top: 6px; }
.board-card.featured .bog {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(195, 210, 214, 0.25);
  font-size: 13.5px;
  color: var(--gold-bright);
  font-weight: 600;
}

/* ---------- timeline ---------- */

/* ---------- timeline ---------- */

.record { background: var(--mist-light); padding: 104px 0 96px; overflow: hidden; }
.record .section-title { margin-bottom: 14px; }
.record-head { margin-bottom: 56px; }
.record-head p { color: var(--ink-soft); max-width: 52ch; text-wrap: pretty; }

.timeline-scroller {
  overflow-x: auto;
  cursor: grab;
  padding-bottom: 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--navy) transparent;
}
.timeline-scroller.dragging { cursor: grabbing; user-select: none; }

.timeline {
  display: flex;
  gap: 0;
  position: relative;
  padding-top: 22px;
  width: max-content;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 29px;
  left: 24px;
  right: 24px;
  height: 3px;
  background: var(--navy);
  opacity: 0.25;
}

.milestone {
  width: 300px;
  flex-shrink: 0;
  padding: 0 24px;
  position: relative;
}
.milestone .dot {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--gold);
  border: 3.5px solid var(--navy);
  position: relative;
  z-index: 1;
  margin-bottom: 18px;
}
.milestone .year {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  color: var(--navy);
  margin-bottom: 8px;
}
.milestone .desc {
  font-size: 15px;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.milestone .desc strong { color: var(--ink); }

/* ---------- priorities ---------- */

.priorities { padding: 104px 0 110px; }
.priorities-head { margin-bottom: 52px; }
.priorities-head p { color: var(--ink-soft); max-width: 50ch; text-wrap: pretty; }

.priority-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
/* wave-edge cards: cream surface "torn" along a two-crest wave from the seal */
.priority-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius) var(--radius) 0 0;
  filter: drop-shadow(0 2px 5px rgba(14, 52, 71, 0.08));
  transition: transform 0.18s ease, filter 0.18s ease;
}
.priority-card:hover {
  transform: translateY(-4px);
  filter: drop-shadow(0 14px 18px rgba(14, 52, 71, 0.14));
}
.priority-card .pc-body {
  flex: 1 1 auto;
  background: var(--cream);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 26px 26px 14px;
}
/* W1 component edge at canonical wavelength; cream fill keeps the torn edge */
.priority-card .pc-wave {
  display: block;
  width: 100%;
  height: 16px;
  flex: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='16' viewBox='0 0 96 16'%3E%3Cpath d='M0 9 Q 12 3 24 9 T 48 9 T 72 9 T 96 9 L 96 0 L 0 0 Z' fill='%23f7f1de'/%3E%3Cpath d='M0 9 Q 12 3 24 9 T 48 9 T 72 9 T 96 9' fill='none' stroke='%23e0a92e' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
}
.priority-card h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
  text-wrap: balance;
}
.priority-card p { font-size: 14.5px; color: var(--ink-soft); text-wrap: pretty; }

/* ---------- rally ---------- */

.rally {
  position: relative;
  color: #fff;
  /* swap in a new band photo here — one line (path relative to this CSS file) */
  --rally-photo: url("rally-capitol.jpg");
}
.rally .photo-bg {
  position: absolute;
  inset: 0;
  background-color: var(--navy-2);
  /* readability gradient over the navy-duotone Capitol photo */
  background-image:
    linear-gradient(
      100deg,
      rgba(14, 52, 71, 0.96) 0%,
      rgba(14, 52, 71, 0.9) 45%,
      rgba(14, 52, 71, 0.52) 74%,
      rgba(14, 52, 71, 0.22) 100%
    ),
    var(--rally-photo);
  background-size: auto, 135%;
  background-position: 0 0, 0% 26%;
  background-repeat: no-repeat, no-repeat;
}
@media (max-width: 860px) {
  .rally .photo-bg {
    background-size: auto, cover;
    background-position: 0 0, 50% 26%;
    background-image:
      linear-gradient(
        115deg,
        rgba(14, 52, 71, 0.95) 0%,
        rgba(14, 52, 71, 0.9) 55%,
        rgba(14, 52, 71, 0.84) 100%
      ),
      var(--rally-photo);
  }
}
.rally .wrap {
  position: relative;
  z-index: 1;
  padding-top: 110px;
  padding-bottom: 110px;
}
.rally h2 {
  font-size: clamp(34px, 3.8vw, 52px);
  font-weight: 900;
  color: #fff;
  margin-bottom: 20px;
}
.rally h2 .tally { color: var(--gold-bright); }
.rally p {
  font-size: 18px;
  color: var(--mist-light);
  max-width: 54ch;
  margin-bottom: 34px;
  text-wrap: pretty;
}
.rally p strong { color: #fff; }

/* ---------- footer ---------- */

.footer { background: var(--navy-2); color: var(--mist); display: flow-root; /* contain the crown's margin — no collapse, no paper strip above the navy */ }
.footer a { text-decoration: none; transition: color 0.12s ease; }
.footer a:hover { color: #fff; }

.footer-main {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding: 44px 32px 56px;
}
.footer-brand { display: flex; flex-direction: column; gap: 18px; }
.footer-brand .footer-logo-link { display: inline-flex; width: max-content; }
.footer-brand img { width: 84px; height: 84px; }
.footer-brand .tagline { font-size: 14px; max-width: 30ch; text-wrap: pretty; }

.footer h2 {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--gold-bright);
  margin-bottom: 18px;
  font-weight: 700;
}
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }

.footer .social-row { display: flex; gap: 12px; margin-top: 20px; }
.footer .social-row a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(195, 210, 214, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--mist);
}
.footer .social-row a:hover { border-color: var(--gold); color: var(--gold); }

.footer-universities {
  border-top: 1px solid rgba(195, 210, 214, 0.18);
  padding: 30px 0 36px;
}
.footer-universities .uni-strip {
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px 0;
  justify-content: space-between;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: rgba(195, 210, 214, 0.65);
}

.footer-legal {
  border-top: 1px solid rgba(195, 210, 214, 0.18);
  padding: 22px 32px;
  display: flex;
  justify-content: space-between;
  gap: 8px 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(195, 210, 214, 0.7);
}
.footer-legal a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- reveal on scroll ---------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal.in { opacity: 1; transform: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 1020px) {
  .board-grid { grid-template-columns: repeat(3, 1fr); }
  .board-card.featured { grid-column: span 3; }
  .priority-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-main { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  /* backdrop-filter creates a containing block that would clip the
     fixed full-screen menu — use a solid bar on phones instead */
  .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--paper); }
  .nav-links, .nav .btn { display: none; }
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 14px 12px;
    min-width: 46px;
    min-height: 46px;
    cursor: pointer;
  }
  .nav-toggle span {
    width: 22px;
    height: 2.5px;
    background: var(--navy);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  /* hamburger morphs into an X while the menu is open — the close button */
  .nav.open .nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .nav.open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--navy);
    padding: 20px 24px 48px;
    overflow-y: auto;
    z-index: 99;
  }
  .nav.open .nav-links > li { width: 100%; }
  .nav.open .nav-links a {
    color: var(--mist-light);
    font-size: 19px;
    font-weight: 700;
    min-height: 52px;
    display: flex;
    align-items: center;
    padding: 8px 18px;
    border-left: 3px solid transparent;
    border-radius: 0 6px 6px 0;
  }
  .nav.open .nav-links a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
  .nav.open .nav-links a.active {
    color: var(--gold-bright);
    border-left-color: var(--gold);
    background: rgba(255, 255, 255, 0.06);
  }
  /* dropdown groups: label navigates, caret expands the group inline.
     Re-declare hover/open/active colors here — the desktop dropdown rules
     paint --mist-light backgrounds that are unreadable on the navy overlay. */
  .nav.open .nav-group-trigger { display: flex; align-items: stretch; }
  .nav.open .nav-links a.nav-group-label { flex: 1; border-radius: 0 6px 6px 0; }
  .nav.open .nav-group:hover .nav-group-label,
  .nav.open .nav-group.open .nav-group-label {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
  }
  .nav.open .nav-group.active .nav-group-label {
    color: var(--gold-bright);
    border-left-color: var(--gold);
    background: rgba(255, 255, 255, 0.06);
  }
  .nav.open .nav-caret-btn,
  .nav.open .nav-group:hover .nav-caret-btn,
  .nav.open .nav-group.open .nav-caret-btn,
  .nav.open .nav-group.active .nav-caret-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    color: var(--mist);
    background: none;
    border-radius: 6px;
  }
  .nav.open .nav-group.open .nav-caret-btn { color: #fff; background: rgba(255, 255, 255, 0.06); }
  .nav.open .nav-caret { display: block; font-size: 14px; opacity: 0.85; }
  .nav.open .nav-drop {
    display: block;
    position: static;
    margin: 0;
    padding: 0;
    min-width: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.28s ease, visibility 0s linear 0.28s;
  }
  .nav.open .nav-group.open .nav-drop {
    max-height: 220px;
    padding-bottom: 8px;
    visibility: visible;
    transition: max-height 0.28s ease, visibility 0s;
  }
  .nav.open .nav-drop a {
    font-size: 17px;
    font-weight: 600;
    min-height: 48px;
    padding-left: 38px;
  }
  .nav.open .nav-drop::before { content: none; }
  @media (prefers-reduced-motion: reduce) {
    .nav.open .nav-drop,
    .nav.open .nav-group.open .nav-drop { transition: none; }
  }
  .hero-inner { grid-template-columns: 1fr; padding-top: 64px; padding-bottom: 96px; }
  /* mobile hero is TEXT-ONLY: the nav already carries the logo; a second
     seal below the CTAs duplicates branding and costs a screen of scroll */
  .hero-seal { display: none; }
  .stat-band-inner { grid-template-columns: 1fr 1fr; }
  /* row 1: the two counts side by side; row 2: Est. 1976 as a centered capstone */
  .stat { border-left: none; border-top: none; padding: 26px 22px; }
  .stat:nth-child(2) { border-left: 1px solid rgba(195, 210, 214, 0.18); }
  .stat:nth-child(3) {
    grid-column: span 2;
    border-top: 1px solid rgba(195, 210, 214, 0.18);
    text-align: center;
  }
  .board-grid { grid-template-columns: repeat(2, 1fr); }
  .board-card.featured { grid-column: span 2; grid-template-columns: 1fr; }
  .board-card.featured .photo { aspect-ratio: 16/9; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 20px; }
  .priority-grid { grid-template-columns: 1fr; }
  .board-grid { grid-template-columns: 1fr; }
  .board-card.featured { grid-column: span 1; }
  .footer-main { grid-template-columns: 1fr; gap: 36px; padding: 56px 20px 10px; }
  .footer-universities { padding: 18px 0 24px; }
  .footer-legal { padding: 22px 20px; }
  .hero h1 { font-size: clamp(34px, 11vw, 46px); }
  .hero-sub { font-size: 16.5px; }
  .hero-inner { padding-top: 48px; padding-bottom: 80px; }
  .hero-ctas .btn { width: 100%; justify-content: center; min-height: 50px; }
  .stat { padding: 24px 16px; }
  .stat .num { font-size: clamp(21px, 6.4vw, 26px); }
  .footer .social-row a { width: 44px; height: 44px; }
}

/* footer university links: two tappable columns on phones */
@media (max-width: 700px) {
  .footer-universities .uni-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
  }
  .footer-universities .uni-strip a {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 14px;
  }
}