/* ============================================================
   Base — reset, typography, layout primitives, motion utilities
   CFSC web type: Barlow Semi Condensed (display, all-caps titles)
   + Source Sans 3 (H2/H3/body). Per CFSC Brand Standards.
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
/* The `hidden` attribute must always win, even over class-based `display`
   (e.g. .admin-only-bar{display:flex}) — otherwise gated elements leak. */
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.6;
  color:var(--ink-600);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ max-width:100%; height:auto; display:block; }
p{ margin:0 0 var(--s-4); }
a{ color:var(--green-700); text-decoration:none; }
a:hover{ color:var(--green-900); text-decoration:underline; text-underline-offset:2px; }
ul,ol{ margin:0 0 var(--s-4); padding-left:1.3em; }
li{ margin:0 0 var(--s-2); }
strong{ color:var(--ink-900); font-weight:700; }
button{ font-family:inherit; font-size:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:inherit; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; border-radius:6px; }
[id]{ scroll-margin-top:calc(var(--nav-h) + 16px); }

/* ===== Headings =====
   Display titles (.title/.h1/hero) — Barlow, heavy, ALL CAPS, tracked.
   Section headings (h2/h3) — Source Sans, title case, for readability. */
h1,h2,h3,h4{ color:var(--ink-900); margin:0 0 var(--s-4); line-height:1.14; }
.title,.h1,h1{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  letter-spacing:.01em; line-height:1.02;
  font-size:clamp(2.4rem,5vw,3.6rem);
}
h2,.h2{
  font-family:var(--font-body); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(1.7rem,3vw,2.3rem); line-height:1.16;
}
h3,.h3{ font-family:var(--font-body); font-weight:700; font-size:1.2rem; line-height:1.3; }
.display{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.01em; }
.lead{ font-weight:400; font-size:1.25rem; line-height:1.55; color:var(--ink-600); }
.caption{ font-weight:600; font-size:.9rem; color:var(--ink-300); }
.numeral{ font-family:var(--font-display); font-weight:800; font-variant-numeric:tabular-nums; line-height:1; }

/* ===== Eyebrow ===== */
.eyebrow{
  display:inline-flex; align-items:center; gap:.4em; font-weight:700; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.1em; color:var(--green-700);
  background:var(--green-100); padding:.4em .9em; border-radius:var(--r-chip); margin-bottom:var(--s-4);
}
.eyebrow--amber{ color:var(--amber-700); background:var(--amber-100); }
.eyebrow--navy{ color:#fff; background:var(--navy-700); }
.eyebrow svg{ width:1.1em; height:1.1em; }

/* ===== Layout ===== */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--s-5); }
.container--narrow{ max-width:860px; }
.section{ padding-block:var(--s-12); }
@media (max-width:760px){ .section{ padding-block:var(--s-10); } }
.section--soft{ background:var(--bg-soft); }
.section--sand{ background:var(--bg-sand); }
.section--dark{ background:var(--navy-700); color:#D7DEE8; }
.section--green{ background:var(--green-900); color:#CFE6DB; }
.section--dark h1,.section--dark h2,.section--dark h3,
.section--green h1,.section--green h2,.section--green h3{ color:#fff; }
.section--dark .lead,.section--green .lead{ color:#CFE0D9; }
.measure{ max-width:62ch; }
.center{ text-align:center; }
.center .lead,.center p{ margin-inline:auto; }
.stack-2>*+*{ margin-top:var(--s-2); }
.stack-3>*+*{ margin-top:var(--s-3); }
.stack-4>*+*{ margin-top:var(--s-4); }
.stack-5>*+*{ margin-top:var(--s-5); }
.stack-6>*+*{ margin-top:var(--s-6); }

.grid{ display:grid; gap:var(--s-5); }
/* minmax(0,…) so long unbroken content (e.g. a one-line nowrap title) can be
   clipped inside its column instead of blowing the grid past the page edge. */
@media (min-width:640px){ .grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:880px){
  .grid-3{ grid-template-columns:repeat(3,1fr); }
  .grid-4{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:879px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:639px){ .grid-3{ grid-template-columns:1fr; } }

.split{ display:grid; gap:var(--s-8); align-items:start; }
.hero .split{ align-items:center; }
@media (min-width:920px){ .split{ grid-template-columns:1.05fr .95fr; } }

.cluster{ display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center; }
.between{ display:flex; flex-wrap:wrap; gap:var(--s-4); align-items:center; justify-content:space-between; }

/* ===== Motion utilities =====
   Reveal only hides when JS is active (html.js), so no-JS users see everything. */
html.js .reveal{ opacity:0; transform:translateY(14px); transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
html.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html.js .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ===== Accessibility helpers ===== */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link{
  position:absolute; left:var(--s-4); top:-60px; z-index:300;
  background:var(--amber-500); color:var(--navy-700); font-weight:700;
  padding:.7em 1.1em; border-radius:0 0 12px 12px; text-decoration:none;
  transition:top var(--t-fast) var(--ease);
}
.skip-link:focus{ top:0; color:var(--navy-700); }