/* ==========================================================================
   ARCEM — "The Service Record"
   Design system built to the official Brand Guide v1.0
   Lapidary — Fraunces (carved-serif display + italic accent) + Inter Tight (body) · maroon / brass / neutrals
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Brand palette (exact, from guide) */
  --maroon:    #7A1F2B;   /* Arcem Maroon — primary, AAA on cloud/parchment */
  --oxblood:   #5E1822;   /* shadow / deep maroon */
  --brass:     #C79A4E;   /* accent — moments of recognition only */
  --brass-deep:#A87B2E;   /* darker brass for small text on light */
  --ink:       #211A1C;   /* Slate Ink — text */
  --parchment: #F3EEE3;   /* fill */
  --cloud:     #FBFAF7;   /* base / page */

  /* Derived */
  --maroon-hover: #93303D;
  --ink-80:  rgba(33,26,28,.82);
  --ink-60:  rgba(33,26,28,.62);
  --ink-45:  rgba(33,26,28,.45);
  --line:    rgba(33,26,28,.12);
  --line-strong: rgba(33,26,28,.20);
  --on-dark: #F3EEE3;
  --on-dark-70: rgba(243,238,227,.72);
  --on-dark-45: rgba(243,238,227,.62);
  --line-dark: rgba(243,238,227,.16);

  /* Type — Lapidary: Fraunces (carved serif: display + italic accent) + Inter Tight (grotesk body) */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --accent:  "Fraunces", Georgia, serif;
  --sans:    "Inter Tight", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --fraunces-display: "opsz" 144, "SOFT" 0, "WONK" 0;
  --fraunces-text:    "opsz" 72, "SOFT" 0, "WONK" 0;

  /* Fluid type scale */
  --fs-display: clamp(2.8rem, 1.75rem + 4.4vw, 5.4rem);
  --fs-h1:      clamp(2.6rem, 1.7rem + 4.0vw, 4.25rem);
  --fs-h2:      clamp(2.0rem, 1.4rem + 2.6vw, 3.0rem);
  --fs-h3:      clamp(1.22rem, 1.05rem + .7vw, 1.45rem);
  --fs-stat:    clamp(2.6rem, 1.6rem + 2.4vw, 3.25rem);
  --fs-lead:    clamp(1.12rem, 1.0rem + .55vw, 1.4rem);
  --fs-body:    1.0625rem;

  /* Spacing */
  --sp-8: .5rem;  --sp-12:.75rem; --sp-16:1rem; --sp-20:1.25rem;
  --sp-24:1.5rem; --sp-32:2rem;   --sp-40:2.5rem; --sp-48:3rem;
  --sp-64:4rem;   --sp-80:5rem;   --sp-96:6rem;   --sp-128:8rem;

  --container: 1200px;
  --container-wide: 1340px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 4px;
  --radius-lg: 10px;

  --section-y: clamp(5rem, 9.5vw, 9rem);
  --ease: cubic-bezier(.2,.7,.2,1);
  --shadow-card: 0 1px 2px rgba(33,26,28,.03), 0 10px 30px -24px rgba(33,26,28,.13);
  --spine-rule: rgba(122,31,43,.12);
  --keystone: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 22"><path d="M5 1 H21 L18 21 H8 Z" fill="%23C79A4E"/></svg>');
  --grain: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/></filter><rect width="160" height="160" filter="url(%23n)" opacity="0.5"/></svg>');
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce){ html { scroll-behavior: auto; } }
body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink-80);
  background: var(--cloud);
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img,svg { display:block; max-width:100%; }
img { height:auto; }
a { color: var(--maroon); text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }
h1,h2,h3,h4 { font-family: var(--display); color: var(--ink); line-height: 1.07; font-weight: 400; letter-spacing: -.021em; text-wrap: balance; font-variation-settings: var(--fraunces-text); }
::selection { background: var(--maroon); color: var(--cloud); }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: 760px; }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem,6vw,5rem); }
.section--parchment { background: var(--parchment); }
.skip-link {
  position:absolute; left:1rem; top:-3rem; z-index:200;
  background: var(--ink); color: var(--cloud); padding:.6rem 1rem; border-radius: var(--radius);
  transition: top .2s var(--ease);
}
.skip-link:focus { top:1rem; }
:focus-visible { outline: 2.5px solid var(--maroon); outline-offset: 3px; border-radius: 2px; }
.stat-band :focus-visible, .site-footer :focus-visible, .hero :focus-visible, .board-section :focus-visible { outline-color: var(--brass); }

/* ---------- Typography blocks ---------- */
.eyebrow {
  font-family: var(--sans); font-weight: 600; font-size: .72rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--maroon);
  display: inline-flex; align-items: center; gap: .6rem;
}
.eyebrow::before { content:""; width: 1.6rem; height: 1.5px; background: var(--brass); display:inline-block; }
.eyebrow--center { justify-content:center; }
.eyebrow--on-dark { color: var(--brass); }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-80); }
.muted { color: var(--ink-60); font-size: .95rem; }
.rule { border: 0; height: 2px; width: 3rem; background: var(--brass); margin-bottom: var(--sp-20); }

.section-head { max-width: 46rem; margin-bottom: clamp(var(--sp-32), 5vw, var(--sp-48)); }
.section-head h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-16); }
.section-head p { font-size: var(--fs-lead); color: var(--ink-60); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--maroon); --btn-fg: var(--cloud); --btn-bd: var(--maroon);
  display:inline-flex; align-items:center; gap:.6rem;
  font-family: var(--sans); font-weight:600; font-size:.95rem; letter-spacing:.01em;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd);
  padding:.85rem 1.5rem; border-radius: var(--radius);
  transition: transform .35s var(--ease), background .25s var(--ease), box-shadow .35s var(--ease), color .25s var(--ease);
}
.btn .btn__arrow { transition: transform .35s var(--ease); }
.btn:hover { background: var(--maroon-hover); border-color: var(--maroon-hover); transform: translateY(-1px); box-shadow: 0 6px 18px -10px rgba(122,31,43,.34); }
.btn:active { transform: scale(.985); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--lg { padding:1.05rem 1.9rem; font-size:1.02rem; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--maroon); --btn-bd: var(--line-strong); }
.btn--ghost:hover { background: var(--maroon); color: var(--cloud); border-color: var(--maroon); box-shadow:none; }
.btn--on-dark.btn--ghost { --btn-fg: var(--on-dark); --btn-bd: var(--line-dark); }
.btn--on-dark.btn--ghost:hover { background: var(--cloud); color: var(--ink); border-color: var(--cloud); }

.link-arrow {
  display:inline-flex; align-items:center; gap:.45rem; font-weight:600; color: var(--maroon);
  border-bottom: 1.5px solid transparent; padding-bottom: 2px; transition: border-color .25s var(--ease), gap .25s var(--ease);
}
.link-arrow svg { width:18px; height:18px; transition: transform .3s var(--ease); }
.link-arrow:hover { border-color: var(--brass); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Brand mark / wordmark ---------- */
.brand { display:inline-flex; align-items:center; gap:.7rem; }
.brand__mark { width: 30px; height: auto; flex:none; color: var(--maroon); }
.brand__name {
  font-family: var(--display); font-weight: 700; font-size: 1.32rem;
  letter-spacing: .14em; color: var(--ink); text-transform: uppercase; line-height:1;
}
.brand--on-dark .brand__name { color: var(--on-dark); }
.brand--on-dark .brand__mark { color: var(--on-dark); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top:0; z-index:100;
  background: rgba(251,250,247,.82);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -24px rgba(33,26,28,.5);
}
/* Fixed height — the scrolled state lifts via background/blur/shadow only
   (no height/padding animation, to avoid layout thrash on scroll). */
.site-header__inner { display:flex; align-items:center; justify-content:space-between; height: 74px; }
.nav { display:flex; align-items:center; gap: var(--sp-32); }
.nav__list { display:flex; align-items:center; gap: clamp(1rem,2.2vw,2rem); }
.nav__link {
  font-family: var(--sans); font-weight:500; font-size:.95rem; color: var(--ink-80);
  position:relative; padding: .4rem 0; transition: color .2s var(--ease);
}
.nav__link::after {
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background: var(--brass);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav__link:hover { color: var(--maroon); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--maroon); }
.nav__cta { margin-left: .4rem; }
.nav__toggle { display:none; align-items:center; justify-content:center; background:none; border:0; color: var(--ink); padding:.4rem; min-width:44px; min-height:44px; margin-right:-.4rem; }
.nav__toggle svg { width:26px; height:26px; }

.mobile-menu { display:none; position:fixed; inset:0; z-index:200; background: var(--oxblood);
  flex-direction:column; padding: 1.3rem var(--gutter) 2.4rem; overflow-y:auto; }
.mobile-menu.is-open { display:flex; }
html.menu-open { overflow:hidden; }
.mobile-menu__top { display:flex; align-items:center; justify-content:space-between; height:50px; }
.mobile-menu__brand { font-family:var(--display); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark); font-size:1.2rem; }
.mobile-menu__close { width:48px; height:48px; background:none; border:0; position:relative; color:var(--on-dark); margin-right:-.5rem; cursor:pointer; }
.mobile-menu__close::before, .mobile-menu__close::after { content:""; position:absolute; left:50%; top:50%; width:22px; height:2.5px; background:currentColor; border-radius:2px; }
.mobile-menu__close::before { transform:translate(-50%,-50%) rotate(45deg); }
.mobile-menu__close::after { transform:translate(-50%,-50%) rotate(-45deg); }
.mobile-menu__nav { flex:1; display:flex; flex-direction:column; justify-content:center; gap:.4rem; }
.mobile-menu__nav a { font-family:var(--display); font-weight:300; font-variation-settings:var(--fraunces-display);
  font-size:clamp(2.1rem, 10vw, 2.9rem); line-height:1.18; letter-spacing:-.02em; color:var(--on-dark); padding:.35rem 0; }
.mobile-menu__nav a:active { color:var(--brass); }
.mobile-menu__foot { display:flex; flex-direction:column; gap:1.2rem; }
.mobile-menu__foot .btn { width:100%; justify-content:center; }
.mobile-menu__pillars { text-align:center; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); font-weight:600; }

/* ---------- Blueprint grid background ---------- */
.gridlines { position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(var(--grid-c,rgba(243,238,227,.07)) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-c,rgba(243,238,227,.07)) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 0%, #000 35%, transparent 80%);
  mask-image: radial-gradient(120% 90% at 70% 0%, #000 35%, transparent 80%);
}

/* ---------- HERO ---------- */
.hero {
  position: relative; background: var(--oxblood); color: var(--on-dark);
  overflow: hidden; isolation:isolate;
  padding-top: clamp(3rem,7vw,6rem); padding-bottom: clamp(3.5rem,7vw,6.5rem);
}
.hero::before { /* flat, solemn oxblood ground — the single deep-dark anchor */
  content:""; position:absolute; inset:0; z-index:-2;
  background: var(--oxblood);
}
.hero__inner { display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; min-height: min(70vh, 640px); }
.hero__copy { max-width: 38rem; }
.hero__title {
  color: var(--on-dark); font-weight: 300; font-size: var(--fs-display);
  font-variation-settings: var(--fraunces-display);
  line-height: .98; letter-spacing: -.022em; margin:.7rem 0 1.5rem; text-wrap: balance;
}
.hero__title em { font-style: italic; color: var(--brass); position: relative; font-size: .96em; }
.hero__sub { font-size: var(--fs-lead); color: var(--on-dark-70); max-width: 34rem; margin-bottom: var(--sp-32); }
.hero__cta { display:flex; flex-wrap:wrap; gap: var(--sp-16); align-items:center; }
.hero__pillars { display:flex; gap: clamp(1.25rem,3vw,2.25rem); margin-top: var(--sp-40); padding-top: var(--sp-24); border-top:1px solid var(--line-dark); }
.hero__pillar { flex:1; position:relative; padding-left: var(--sp-24); }
.hero__pillar::before { content:""; position:absolute; left:0; top:.3rem; width:15px; height:13px; background: var(--keystone) center/contain no-repeat; }
.hero__pillar strong { display:block; font-family:var(--display); font-weight:500; font-size:1.08rem; letter-spacing:0; color: var(--on-dark); margin-bottom:.2rem; }
.hero__pillar span { font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color: var(--on-dark-45); font-weight:600; line-height:1.3; display:block; }

/* Hero arch artwork */
.hero__art { position:relative; display:flex; align-items:center; justify-content:center; min-height: 360px; }
.hero__arch { width: min(100%, 420px); height:auto; overflow:visible; }

/* ---------- Trust strip ---------- */
.trust-strip { background: var(--ink); color: var(--on-dark); padding-block: clamp(1.4rem,2.6vw,2rem); }
.trust-strip__inner { display:flex; align-items:center; gap: clamp(1.2rem,4vw,3rem); flex-wrap:wrap; }
.trust-strip__label { font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color: var(--brass); font-weight:600; flex:none; }
.trust-strip__items { display:flex; align-items:center; gap: clamp(1.2rem,3.5vw,2.8rem); flex-wrap:wrap; }
.trust-strip__item { font-family:var(--display); font-weight:500; font-size: clamp(.95rem,1.6vw,1.12rem); color: var(--on-dark-70); }

/* ---------- Mission ---------- */
.mission { display:grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem,5vw,4.5rem); align-items:start; }
.mission__title { font-size: var(--fs-h2); }
.mission__head { position: sticky; top: clamp(96px, 13vh, 132px); align-self: start; }
.mission__body { max-width: 38rem; }
html.anim-ready .mission__body p.reveal { transform: translateY(22px); }
.mission__body p { color: var(--ink-80); }
.mission__body p + p { margin-top: var(--sp-20); }
.mission__body .lead { color: var(--ink); }

/* ---------- Cards grid (what we do preview) ---------- */
.card-grid { display:grid; gap: var(--sp-24); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
.card {
  position:relative; background: var(--cloud); border:1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--sp-32) var(--sp-24) var(--sp-24);
  overflow:hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.section--parchment .card { background: var(--cloud); }
.card::before { /* keystone accent that grows on hover */
  content:""; position:absolute; top:0; left:0; width:100%; height:3px;
  background: var(--brass); transform: scaleX(0); transform-origin:left; transition: transform .45s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--line-strong); }
.card:hover::before { transform: scaleX(1); }
.card__icon {
  width: 54px; height:54px; color: var(--maroon);
  background: var(--parchment); border-radius: 13px; padding:11px; margin-bottom: var(--sp-20);
  transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.card:hover .card__icon { background: var(--maroon); color: var(--cloud); transform: translateY(-2px); }
.card__title { font-size: var(--fs-h3); margin-bottom:.5rem; color: var(--ink); }
.card__text { color: var(--ink-60); font-size: .98rem; line-height:1.6; }

/* ---------- Stat band (signature) ---------- */
.stat-band { position:relative; background: var(--maroon); color: var(--on-dark); overflow:hidden; padding-block: clamp(3.5rem,7vw,6rem); isolation:isolate; }
.stat-band::before { content:""; position:absolute; inset:0; z-index:-1; background: var(--maroon); }
.stat-band__head { max-width: 40rem; margin-bottom: clamp(var(--sp-32), 5vw, var(--sp-48)); }
.stat-band__head h2 { color: var(--on-dark); font-size: var(--fs-h2); margin-top:.7rem; }
.stat-band__grid { display:grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1.2rem,2.5vw,2rem); }
.stat { position:relative; padding-left: var(--sp-24); border-left:1px solid rgba(199,154,78,.18); }
.stat:first-child { border-left:0; padding-left:0; }
.stat__figure {
  font-family: var(--display); font-weight:300; font-size: var(--fs-stat); line-height:.95;
  font-variation-settings: var(--fraunces-display);
  color: var(--on-dark); letter-spacing:-.02em; font-variant-numeric: tabular-nums;
}
.stat__figure .u { color: var(--brass); }
.stat__label { margin-top:.7rem; font-size:.92rem; line-height:1.45; color: var(--on-dark-70); }

/* responsive stat band */
@media (max-width: 980px){ .stat-band__grid { grid-template-columns: repeat(2,1fr); gap: var(--sp-32) var(--sp-24); }
  .stat-band { --fs-stat: clamp(3.5rem, 2.0rem + 6.0vw, 5.4rem); }
  .stat:nth-child(odd){ border-left:0; padding-left:0; } }
@media (max-width: 520px){ .stat-band__grid { grid-template-columns: 1fr; } .stat{ border-left:0; padding-left:0; padding-top: var(--sp-16); border-top:1px solid var(--line-dark);} .stat:first-child{border-top:0;padding-top:0;} }

/* ---------- Page banner (inner pages) ---------- */
.page-banner { position:relative; background: var(--ink); color: var(--on-dark); overflow:hidden; isolation:isolate;
  padding-top: clamp(3.5rem,7vw,6rem); padding-bottom: clamp(3rem,6vw,5rem); }
.page-banner::before { content:""; position:absolute; inset:0; z-index:-1;
  background: radial-gradient(110% 120% at 85% -10%, rgba(122,31,43,.5) 0%, transparent 55%), linear-gradient(180deg,#241015,#1A0E12); }
.page-banner__inner { max-width: 52rem; padding-block: clamp(1.5rem,4vw,3rem); }
.page-banner__title { color: var(--on-dark); font-size: var(--fs-h1); font-weight:400; line-height:1.05; }
.page-banner__sub { color: var(--on-dark-70); font-size: var(--fs-lead); margin-top: var(--sp-16); max-width: 40rem; }
.page-banner__watermark { position:absolute; right: -2%; bottom:-30%; width: min(40vw,460px); opacity:.10; z-index:-1; color: var(--brass); }
.breadcrumbs { font-size:.8rem; color: var(--on-dark-45); margin-bottom: var(--sp-16); letter-spacing:.04em; }
.breadcrumbs a { color: var(--on-dark-70); }
.breadcrumbs a:hover { color: var(--brass); }

/* ---------- Initiatives (alternating) ---------- */
.initiative { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; padding-block: clamp(2.5rem,5vw,4.5rem); border-bottom:1px solid var(--line); }
.initiative:first-of-type { padding-top: 0; }
.initiative:last-of-type { border-bottom:0; }
.initiative--reverse .initiative__media { order: 2; }
.initiative__media { border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 4/3; background: var(--parchment); position:relative; }
.initiative__media img { width:100%; height:100%; object-fit:cover; filter: grayscale(1) contrast(1.02); transition: filter .6s var(--ease), transform .8s var(--ease); }
.initiative:hover .initiative__media img { filter: grayscale(.2); transform: scale(1.03); }
/* Photo placeholder (real photography pending) — reads as intentional, never broken */
.initiative__media--ph { display:flex; flex-direction:column; align-items:center; justify-content:center; gap: var(--sp-16); color: var(--ink-45);
  background-image: radial-gradient(120% 120% at 50% 0%, rgba(122,31,43,.05), transparent 60%), linear-gradient(rgba(33,26,28,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(33,26,28,.045) 1px,transparent 1px);
  background-size: cover, 30px 30px, 30px 30px; }
.initiative__media--ph svg { width:60px; height:60px; color: var(--maroon); opacity:.4; }
.initiative__media--ph span { font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; }
.initiative__title { font-size: var(--fs-h2); margin:.5rem 0 var(--sp-16); }
.initiative__body { color: var(--ink-80); font-size: var(--fs-lead); line-height:1.6; }
.tag { display:inline-block; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color: var(--ink-80);
  background: rgba(199,154,78,.20); padding:.3rem .7rem; border-radius:100px; margin-bottom:var(--sp-12); }

/* ---------- Board / leadership ---------- */
.board-grid { display:flex; flex-direction:column; gap: var(--sp-8); }
.board-card { overflow:hidden; border-radius:16px; transition: border-color .4s var(--ease); }
.board-card--person { position:relative; }
.board-card__strip { display:flex; align-items:center; gap:1.2rem; padding:1.25rem 1.6rem; max-height:180px; opacity:1; overflow:hidden;
  transition: max-height .5s var(--ease), opacity .3s var(--ease), padding .5s var(--ease); }
.board-card__avatar { width:68px; height:68px; border-radius:12px; overflow:hidden; flex:none; display:flex; align-items:center; justify-content:center; }
.board-card__avatar img { width:100%; height:100%; object-fit:cover; object-position:center 16%; display:block; }
.board-card__avatar svg { width:44%; height:auto; opacity:.5; }
.board-card__meta { flex:1; min-width:0; }
.board-card__name { font-family:var(--display); font-weight:400; font-variation-settings:var(--fraunces-text); font-size:1.15rem; color:var(--ink); margin:0; }
.board-card__role { font-size:.82rem; color:var(--maroon); font-weight:600; letter-spacing:.02em; margin:.2rem 0 0; }
.board-card__arrow { position:absolute; top:1.5rem; right:1.5rem; z-index:3; width:40px; height:40px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:none; background:none; border:0; padding:0; color:inherit; cursor:pointer; transition:background .3s var(--ease), transform .3s var(--ease); }
.board-card__expand { display:grid; grid-template-rows:0fr; transition: grid-template-rows .5s var(--ease); }
.board-card__expand-inner { overflow:hidden; display:flex; align-items:stretch; }
.board-card__portrait { width: clamp(280px, 36%, 400px); flex:none; overflow:hidden; }
.board-card__portrait img { width:100%; height:100%; min-height:360px; object-fit:cover; object-position:center 14%; display:block; }
.board-card__content { flex:1; padding: clamp(1.8rem, 3.4vw, 3.2rem); display:flex; flex-direction:column; justify-content:center; gap: var(--sp-16); }
.board-card__name-lg { font-family:var(--display); font-weight:400; font-variation-settings:var(--fraunces-text); font-size: clamp(1.95rem, 1.3rem + 2.1vw, 2.7rem); line-height:1.04; letter-spacing:-.02em; margin:0; }
.board-card__role-lg { font-family: var(--display); font-style: italic; font-variation-settings:var(--fraunces-text); font-weight:300; font-size: clamp(1.12rem, .95rem + .9vw, 1.5rem); line-height:1.25; letter-spacing:0; margin:0 0 var(--sp-8); }
.board-card__blurb { font-size: 1.02rem; line-height: 1.72; max-width: 50ch; }

/* ---------- Pull quote ---------- */
.pullquote { position:relative; background: var(--parchment); color: var(--ink); overflow:hidden; isolation:isolate; padding-block: clamp(4rem,8vw,7rem); }
.pullquote::before { content:""; position:absolute; inset:0; z-index:-1; background: radial-gradient(90% 120% at 50% 120%, rgba(122,31,43,.05),transparent 60%); }
.pullquote__inner { max-width: 54rem; margin-inline:auto; text-align:center; }
.pullquote blockquote { font-family: var(--display); font-weight:300; font-size: clamp(1.75rem,3.6vw,2.95rem); line-height:1.26; color: var(--ink); font-style: italic; font-variation-settings: var(--fraunces-text); }
.pullquote__mark { width: 64px; margin: 0 auto var(--sp-24); }
.pullquote cite { display:block; margin-top: var(--sp-24); font-style:normal; font-family:var(--sans); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color: var(--maroon); }

/* ---------- Partner rows ---------- */
.partner-row { display:grid; grid-template-columns: minmax(250px,.75fr) 1.5fr auto; gap: clamp(1rem,3vw,2.5rem); align-items:center;
  padding-block: var(--sp-32); border-bottom:1px solid var(--line); }
.partner-row:first-of-type { border-top:1px solid var(--line); }
.partner-row__name { font-family:var(--display); font-weight:600; font-size:1.45rem; color: var(--ink); }
.partner-row__desc { color: var(--ink-60); font-size:.98rem; }
.status-pill { justify-self:start; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; padding:.35rem .8rem; border-radius:100px; white-space:nowrap; }
.status-pill--confirmed { background: rgba(122,31,43,.1); color: var(--maroon); }
.status-pill--likely { background: rgba(199,154,78,.22); color: var(--ink-80); }
.status-pill--pending { background: rgba(33,26,28,.07); color: var(--ink-60); }

/* ---------- Placeholder block ---------- */
.placeholder-block { border:1px dashed var(--line-strong); border-radius: var(--radius-lg); padding: var(--sp-32); color: var(--ink-60); background: var(--cloud); }
.placeholder-block strong { display:block; font-family:var(--display); color: var(--ink); font-size:1.2rem; margin-bottom:.4rem; font-weight:600; }

/* ---------- Form ---------- */
.contact-grid { display:grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem,5vw,4.5rem); align-items:start; }
.contact-aside .lead { color: var(--ink); }
.contact-points { margin-top: var(--sp-32); display:grid; gap: var(--sp-20); }
.contact-point { display:flex; gap: var(--sp-16); align-items:flex-start; }
.contact-point svg { width:22px; height:22px; color: var(--maroon); flex:none; margin-top:3px; }
.contact-point strong { color: var(--ink); display:block; font-family:var(--sans); }
.contact-point span { color: var(--ink-60); font-size:.95rem; }
.form { display:grid; gap: var(--sp-20); background: var(--cloud); border:1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.6rem,3vw,2.4rem); box-shadow: var(--shadow-card); }
.field { display:grid; gap:.4rem; }
.field label { font-size:.85rem; font-weight:600; color: var(--ink); }
.field .opt { color: var(--ink-60); font-weight:400; }
.field input, .field textarea {
  font: inherit; font-size:1rem; color: var(--ink); background: var(--cloud);
  border:1.5px solid var(--line-strong); border-radius: var(--radius); padding:.8rem .9rem; width:100%;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus { outline:none; border-color: var(--maroon); box-shadow: 0 0 0 3px rgba(122,31,43,.12); }
.form__note { font-size:.82rem; color: var(--ink-60); }
.form__hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__status { font-size:.92rem; line-height:1.5; padding:.85rem 1.05rem; border-radius:10px; }
.form__status--ok  { color: var(--maroon); background: rgba(122,31,43,.07); border:1px solid rgba(122,31,43,.18); }
.form__status--err { color:#9a2420; background: rgba(154,36,32,.06); border:1px solid rgba(154,36,32,.22); }
.btn[disabled] { opacity:.6; cursor:default; pointer-events:none; }

/* ---------- CTA band ---------- */
.cta-band { position:relative; background: var(--parchment); color: var(--ink); overflow:hidden; isolation:isolate; padding-block: clamp(4rem,8vw,6.5rem); }
.cta-band::before { content:""; position:absolute; inset:0; z-index:-1; background: radial-gradient(100% 140% at 50% 0%, rgba(122,31,43,.045),transparent 60%); }
.cta-band__inner { max-width: 44rem; margin-inline:auto; text-align:center; }
.cta-band h2 { color: var(--ink); font-size: var(--fs-h2); font-weight:400; }
.cta-band p { color: var(--ink-80); font-size: var(--fs-lead); margin:var(--sp-16) auto var(--sp-32); max-width:34rem; }
.cta-band .hero__cta { justify-content:center; }

/* ---------- Footer ---------- */
.site-footer { position:relative; isolation:isolate; background: var(--ink); color: var(--on-dark-70); padding-block: var(--sp-64) var(--sp-32); }
.site-footer__top { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(2rem,5vw,4rem); padding-bottom: var(--sp-48); border-bottom:1px solid var(--line-dark); }
.site-footer__mission { margin-top: var(--sp-16); max-width: 26rem; font-size:.95rem; color: var(--on-dark-70); }
.site-footer__pillars { margin-top: var(--sp-20); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color: var(--brass); font-weight:600; }
.footer-col h3 { font-family: var(--sans); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color: var(--on-dark-45); font-weight:600; margin-bottom: var(--sp-16); }
.footer-col a { display:block; color: var(--on-dark-70); padding:.55rem 0; font-size:.96rem; transition: color .2s var(--ease); }
.footer-col a:hover { color: var(--brass); }
.site-footer__bottom { display:flex; align-items:center; justify-content:space-between; gap: var(--sp-16); flex-wrap:wrap; padding-top: var(--sp-32); font-size:.85rem; color: var(--on-dark-45); }

/* ==========================================================================
   Reveal animation states — FOUC-safe: hidden ONLY when JS+motion confirmed
   ========================================================================== */
html.anim-ready .reveal { opacity: 0; }
html.anim-ready .reveal[data-reveal="left"]  { transform: translateX(-18px); }
html.anim-ready .reveal[data-reveal="right"] { transform: translateX(18px); }
html.anim-ready .reveal:not([data-reveal]) { transform: translateY(15px); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .card-grid--4 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 880px){
  .nav__list, .nav__cta { display:none; }
  .nav__toggle { display:inline-flex; }
  .hero__inner { grid-template-columns: 1fr; min-height:0; }
  .hero__art { order:-1; min-height: 240px; margin-bottom: var(--sp-16); }
  .hero__arch { width: min(72%, 300px); }
  .mission { grid-template-columns: 1fr; gap: var(--sp-24); }
  .mission__head { position: static; }
  .initiative, .initiative--reverse { grid-template-columns: 1fr; }
  .initiative--reverse .initiative__media { order:-1; }
  .contact-grid { grid-template-columns: 1fr; }
  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .partner-row { grid-template-columns: 1fr; gap: var(--sp-12); }
  .status-pill { margin-top:.3rem; }
}
@media (max-width: 560px){
  .card-grid--4, .card-grid--3 { grid-template-columns: 1fr; }
  .board-card__expand-inner { flex-direction:column; }
  .board-card__portrait { width:100%; aspect-ratio:16/9; max-height:180px; }
  .board-section .board-card__content { border-left:none; border-top:1px solid rgba(243,238,227,.10); }
  .site-footer__top { grid-template-columns: 1fr; }
  .hero__pillars { flex-wrap:wrap; gap: var(--sp-16); }
  .hero__cta .btn { flex:1 1 auto; justify-content:center; }
  .trust-strip__inner { flex-direction:column; align-items:flex-start; gap: var(--sp-12); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .reveal { opacity:1 !important; transform:none !important; }
  .btn, .card, .board-card, .link-arrow svg, .btn__arrow, .initiative__media img { transition: none !important; }
  .board-card__expand, .board-card__arrow, .board-card__strip { transition: none !important; }
}
.no-js .reveal { opacity:1; transform:none; }

/* ---------- Legal prose rhythm (privacy / terms) ---------- */
.legal-body h2 { font-size: var(--fs-h3); margin: var(--sp-32) 0 var(--sp-12); }
.legal-body h2:first-of-type { margin-top: 0; }
.legal-body p { margin-bottom: var(--sp-24); }
.legal-body p:last-child { margin-bottom: 0; }
/* ---------- Seam between adjacent dark sections ---------- */
.page-banner + .stat-band { border-top: 1px solid var(--line-dark); }


/* ============================================================
   LAPIDARY PREMIUM LAYER — carved-serif restyle (Fraunces)
   ============================================================ */
/* Grain texture over the three rare dark anchors (hero / stat-band / footer) */
.hero::after, .stat-band::after, .site-footer::after {
  content:""; position:absolute; inset:0; z-index:-1;
  background-image: var(--grain); background-size:160px; mix-blend-mode:overlay; opacity:.045; pointer-events:none;
}
/* Carved opening: static lintel depth on the hero arch */
.hero__art .hero__arch { filter: drop-shadow(0 -2px 0 rgba(0,0,0,.20)); }

/* Hero headline: per-word split reveal */
.hero__title .w { display:inline-block; will-change: transform; }
html.anim-ready .hero__title .w { opacity:0; transform: translateY(.55em); }

/* Brass underline draws beneath the serif-italic emphasis word as the keystone seats */
.hero__title em::after {
  content:""; position:absolute; left:0; right:0; bottom:-.02em; height:2px;
  background: var(--brass); transform: scaleX(1); transform-origin:left;
}
html.anim-ready .hero__title em::after { transform: scaleX(var(--ul,0)); }

/* Hero cornerstone date line (Inter Tight small-caps, like a cornerstone inscription) */
.hero__cornerstone { margin-top: var(--sp-24); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color: var(--on-dark-45); }

/* CTA eyebrow now sits on a light ground */
.cta-band .eyebrow--on-dark { color: var(--maroon); }

/* Audited-ledger stat units stay carved */
.stat__figure .u { font-variation-settings: var(--fraunces-text); }

/* Scroll-direction-aware sticky header (premium contextual nav) */
.site-header { transition: transform .35s var(--ease), border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); }
.site-header.is-hidden { transform: translateY(-100%); }

/* Wordmark: Fraunces caps want a touch less tracking than the old serif */
.brand__name { letter-spacing: .1em; }


/* ============================================================
   ENTRY SEQUENCE — the cornerstone is laid (homepage preloader)
   ============================================================ */
.preloader { position:fixed; inset:0; z-index:2000; background:var(--oxblood); display:none; align-items:center; justify-content:center; }
html.anim-ready .preloader { display:flex; }
html.preloaded .preloader { display:none; }
.preloader__inner { display:flex; flex-direction:column; align-items:center; gap:1.7rem; will-change:opacity, transform; }
.preloader__arch { width:84px; height:auto; overflow:visible; }
.preloader__word { font-family:var(--display); font-weight:500; font-size:1.35rem; letter-spacing:.36em; text-indent:.36em; color:var(--on-dark); }
.preloader__track { width:116px; height:2px; background:rgba(243,238,227,.14); overflow:hidden; border-radius:2px; }
.pl-bar { display:block; height:100%; width:100%; background:var(--brass); transform:scaleX(0); transform-origin:left; }
@media (prefers-reduced-motion: reduce){ .preloader { display:none !important; } }


/* ============================================================
   IMPACT DASHBOARD — bento metrics (glass panels on maroon)
   ============================================================ */
.dash-grid { display:grid; gap: clamp(.7rem, 1.2vw, 1.05rem);
  grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(6.5rem, auto);
  grid-template-areas:
    "head head feat feat"
    "m1   m2   feat feat"
    "m3   m3   m4   m4"; }
.dash-head { grid-area: head; display:flex; flex-direction:column; justify-content:center; gap:.55rem; padding:.2rem; }
.dash-head h2 { color: var(--on-dark); font-size: var(--fs-h2); margin-top:.2rem; }
html.anim-ready .dash-card { opacity: 0; transform: translateY(26px); }
.dash-card { position:relative; overflow:hidden;
  background: rgba(251,250,247,.05); border:1px solid rgba(243,238,227,.12); border-radius:16px;
  padding: clamp(1.15rem,1.8vw,1.6rem); box-shadow: inset 0 1px 0 rgba(243,238,227,.06); }
.metric { display:flex; flex-direction:column; gap: var(--sp-16); }
.metric__tag { font-family:var(--sans); font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color: var(--on-dark-45); }
.metric__body { margin-top:auto; display:flex; flex-direction:column; gap:.45rem; }
.metric__figure { display:block; font-family:var(--display); font-weight:300; font-variation-settings: var(--fraunces-display);
  font-size: clamp(2.4rem, 3.6vw, 3.4rem); line-height:.92; letter-spacing:-.02em; color: var(--on-dark); font-variant-numeric: tabular-nums; }
.metric__figure .u { color: var(--brass); }
.metric__label { font-family:var(--sans); font-size:.9rem; line-height:1.4; color: var(--on-dark-70); }
.m-families{grid-area:m1;} .m-students{grid-area:m2;} .m-scholarships{grid-area:m3;} .m-feature{grid-area:feat;} .m-veterans{grid-area:m4;}
.m-feature .metric__figure { font-size: clamp(3.2rem, 5.5vw, 5rem); }
.m-feature::after { content:""; position:absolute; right:1.1rem; top:1.1rem; width:22px; height:18px; background: var(--keystone) center/contain no-repeat; opacity:.55; }
@media (max-width: 900px){
  .dash-grid { grid-template-columns: repeat(2,1fr); grid-template-areas: "head head" "feat feat" "m1 m2" "m3 m4"; }
}
@media (max-width: 540px){
  .dash-grid { grid-template-columns: 1fr; grid-template-areas: "head" "feat" "m1" "m2" "m3" "m4"; }
}

/* Numbers count up as each block animates into view (setupMetrics); no hover reveal. */


/* ============================================================
   WHAT WE DO — expandable service cards (titles fill, tap to expand)
   ============================================================ */
.svc-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(.8rem, 1.4vw, 1.2rem); }
.svc-card { position:relative; overflow:hidden; min-height: clamp(16rem, 36vh, 22rem);
  background: var(--cloud); border:1px solid var(--line); border-radius: 20px;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); }
.svc-card__btn { position:absolute; inset:0; z-index:3; width:100%; height:100%; background:none; border:0; cursor:pointer; border-radius:20px; }
.svc-card__btn:focus-visible { outline: 2.5px solid var(--brass); outline-offset:-4px; }
.svc-card:has(.svc-card__btn:hover), .svc-card:has(.svc-card__btn:focus-visible) { border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.svc-card .tag { position:relative; z-index:1; }
.svc-card__title { position:relative; z-index:1; font-family:var(--display); font-weight:400; font-variation-settings: var(--fraunces-text);
  font-size: clamp(1.5rem, 2.3vw, 2.25rem); line-height:1.06; letter-spacing:-.016em; color: var(--ink); max-width: 13ch; }
.svc-card__body { position:relative; z-index:1; display:grid; grid-template-rows: 1fr; max-width: 38ch; transition: grid-template-rows .45s var(--ease); }
.svc-card.is-collapsed .svc-card__body { grid-template-rows: 0fr; }
.svc-card__inner { overflow:hidden; }
.svc-card__inner p { padding-top: var(--sp-20); color: var(--ink-80); font-size: var(--fs-lead); line-height:1.5; opacity:1; transition: opacity .4s var(--ease) .06s; }
.svc-card.is-collapsed .svc-card__inner p { opacity:0; transition-delay: 0s; }
.svc-card__icon { position:absolute; right: clamp(1.4rem,2.4vw,2rem); bottom: clamp(1.4rem,2.4vw,2rem); width:50px; height:50px; border-radius:14px; background: var(--brass); z-index:2; pointer-events:none; transition: background .3s var(--ease); }
.svc-card__icon::before, .svc-card__icon::after { content:""; position:absolute; left:50%; top:50%; background: var(--ink); border-radius:2px; }
.svc-card__icon::before { width:17px; height:2.6px; transform: translate(-50%,-50%); }
.svc-card__icon::after { width:2.6px; height:17px; transform: translate(-50%,-50%); transition: transform .3s var(--ease), opacity .3s var(--ease); }
.svc-card:not(.is-collapsed) .svc-card__icon { background: var(--parchment); }
.svc-card:not(.is-collapsed) .svc-card__icon::after { transform: translate(-50%,-50%) scaleY(0); opacity:0; }
@media (max-width: 720px){
  .svc-grid { grid-template-columns: 1fr; }
  .svc-card { min-height: 8.5rem; padding-bottom: 4.9rem; }
  .svc-card__title { max-width: 18ch; }
}
@media (prefers-reduced-motion: reduce){
  .svc-card__body, .svc-card__inner p, .svc-card__icon::after { transition: none; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference){
  .svc-card.is-collapsed:hover, .svc-card.is-collapsed:focus-within { border-color: var(--line-strong); box-shadow: var(--shadow-card); }
  .svc-card.is-collapsed:hover .svc-card__body,
  .svc-card.is-collapsed:focus-within .svc-card__body { grid-template-rows: 1fr; }
  .svc-card.is-collapsed:hover .svc-card__inner p,
  .svc-card.is-collapsed:focus-within .svc-card__inner p { opacity: 1; transition-delay: .05s; }
  .svc-card.is-collapsed:hover .svc-card__icon,
  .svc-card.is-collapsed:focus-within .svc-card__icon { background: var(--parchment); }
  .svc-card.is-collapsed:hover .svc-card__icon::after,
  .svc-card.is-collapsed:focus-within .svc-card__icon::after { transform: translate(-50%,-50%) scaleY(0); opacity: 0; }
}


/* ============================================================
   BOARD — deep maroon glassmorphism, hover-expand strips
   ============================================================ */
.board-section {
  position: relative;
  overflow: hidden;
  color: var(--on-dark);
  background:
    radial-gradient(115% 80% at 16% -10%, rgba(199,154,78,.20), transparent 52%),
    radial-gradient(120% 90% at 88% 116%, rgba(122,31,43,.55), transparent 60%),
    linear-gradient(158deg, #6d1d27 0%, #5e1822 52%, #491119 100%);
}
.board-section .container { position: relative; }
.board-section .section-head h2 { color: var(--on-dark); }
.board-section .eyebrow { color: var(--cloud); }
.board-section .board-card {
  background: linear-gradient(152deg, rgba(251,250,247,.12), rgba(251,250,247,.045) 60%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid rgba(243,238,227,.16);
}
.board-section .board-card:hover { border-color: rgba(243,238,227,.30); }
.board-section .board-card__avatar { background: rgba(255,255,255,.06); border: 1px solid rgba(243,238,227,.12); color: var(--on-dark); }
.board-section .board-card__name { color: var(--on-dark); }
.board-section .board-card__role { color: var(--brass); }
.board-section .board-card__arrow { background: rgba(199,154,78,.12); border: 1px solid rgba(199,154,78,.22); color: var(--brass); }
.board-section .board-card__content { border-left: 1px solid rgba(243,238,227,.10); }
.board-section .board-card__blurb { color: rgba(243,238,227,.80); }
.board-section .board-card__name-lg { color: var(--on-dark); }
.board-section .board-card__role-lg { color: var(--brass); }
.board-section .board-card__more { color: var(--brass); border-color: rgba(199,154,78,.30); }
.board-section .board-card__more:hover { background: rgba(199,154,78,.15); }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .board-section .board-card--person:hover .board-card__expand { grid-template-rows: 1fr; }
  .board-section .board-card--person:hover .board-card__arrow { background: rgba(199,154,78,.30); transform: rotate(45deg); }
  .board-card--person:hover .board-card__strip { max-height:0; opacity:0; padding-top:0; padding-bottom:0; }
}
/* JS-driven pin-open (touch / keyboard / click) — works on every device */
.board-card--person.is-open .board-card__expand { grid-template-rows: 1fr; }
.board-section .board-card--person.is-open .board-card__arrow { background: rgba(199,154,78,.30); transform: rotate(45deg); }
.board-card--person.is-open .board-card__strip { max-height:0; opacity:0; padding-top:0; padding-bottom:0; }


/* ============================================================
   WHAT-WE-DO cards — documentary image header + maroon scrim
   ============================================================ */
.card-grid--4 .card { padding: 0; }
.card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--parchment); }
.card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; display: block;
  filter: saturate(.94) contrast(1.02); transition: transform .6s var(--ease); }
.card:hover .card__media img { transform: scale(1.045); }
.card__media::after { content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(94,24,34,.10) 0%, rgba(94,24,34,0) 34%, rgba(94,24,34,.05) 68%, rgba(94,24,34,.30) 100%); }
.card-grid--4 .card__body { padding: 0 var(--sp-24) var(--sp-24); }
.card-grid--4 .card__icon { margin-top: -30px; position: relative; z-index: 2;
  box-shadow: 0 8px 20px -10px rgba(33,26,28,.45); }
@media (prefers-reduced-motion: reduce){ .card:hover .card__media img { transform: none; } }


/* ============================================================
   FEATURE IMAGERY — legacy / stories / partner (maroon scrim)
   ============================================================ */
.mission__media { position: relative; margin: var(--sp-32) 0 0; aspect-ratio: 5 / 4;
  border-radius: var(--radius-lg); overflow: hidden; background: var(--oxblood); }
.mission__media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.04); }
.mission__media::after { content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(94,24,34,.10), rgba(94,24,34,.34)); mix-blend-mode: multiply; }
@media (max-width: 880px){ .mission__media { aspect-ratio: 16 / 10; } }

.story-feature { position: relative; margin-top: var(--sp-40); border-radius: var(--radius-lg); overflow: hidden;
  min-height: clamp(300px, 42vh, 420px); display: flex; align-items: flex-end; padding: clamp(1.8rem, 4vw, 3rem);
  background-color: var(--oxblood); background-size: cover; background-position: center; }
.story-feature::before { content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(36,16,21,.28) 0%, rgba(36,16,21,.55) 55%, rgba(36,16,21,.82) 100%); }
.story-feature__inner { position: relative; z-index: 1; max-width: 48ch; }
.story-feature__inner strong { display:block; font-family: var(--display); font-weight:400;
  font-variation-settings: var(--fraunces-text); font-size: var(--fs-h3); color: var(--on-dark); margin-bottom: .5rem; }
.story-feature__inner p { color: rgba(243,238,227,.80); font-size: 1rem; line-height: 1.6; }

.cta-band--image { background-color: var(--oxblood); background-size: cover; background-position: center 28%; }
.cta-band--image::after { content:""; position:absolute; inset:0; z-index:0;
  background: linear-gradient(180deg, rgba(36,16,21,.60), rgba(36,16,21,.80)); }
.cta-band--image .cta-band__inner { position: relative; z-index: 1; }
.cta-band--image h2 { color: var(--on-dark); }
.cta-band--image p { color: rgba(243,238,227,.82); }
.cta-band--image .eyebrow--on-dark { color: var(--brass); }


/* ============================================================
   BOARD headshots + full-bio modal + partner logos
   ============================================================ */
.board-card__more { display:inline-flex; align-items:center; gap:.5rem; align-self:flex-end; margin-top: var(--sp-8);
  background:none; border:1px solid transparent; border-radius:6px; padding:.5rem 1rem; cursor:pointer;
  font-family: var(--sans); font-weight:600; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  transition: gap .25s var(--ease), background .25s var(--ease); }
.board-card__more:hover { gap:.7rem; }
.board-card__more svg { transition: transform .25s var(--ease); }
.board-card__more:hover svg { transform: translateX(3px); }

.bio-modal[hidden] { display:none; }
.bio-modal { position: fixed; inset:0; z-index: 300; display:flex; align-items:center; justify-content:center;
  padding: clamp(1rem, 4vw, 2.5rem); }
.bio-modal__scrim { position:absolute; inset:0; background: rgba(33,16,20,.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.bio-modal__panel { position:relative; z-index:1; width: min(640px, 100%); max-height: 86vh; overflow-y:auto;
  background: var(--cloud); border-radius: 22px; padding: clamp(1.6rem, 4vw, 2.6rem);
  box-shadow: 0 40px 90px -30px rgba(20,6,10,.7); outline: none; }
.bio-modal__close { position:absolute; top: 1rem; right: 1rem; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border:0; background: var(--parchment); color: var(--ink); border-radius: 12px; cursor:pointer; transition: background .25s, color .25s; }
.bio-modal__close:hover { background: var(--maroon); color: var(--cloud); }
.bio-modal__head { display:flex; align-items:center; gap: var(--sp-20); margin-bottom: var(--sp-24); padding-right: 2.6rem; }
.bio-modal__photo { width: 92px; height: 92px; flex:none; border-radius: 16px; object-fit:cover; object-position:center 16%; }
.bio-modal__name { font-family: var(--display); font-weight:400; font-variation-settings: var(--fraunces-text); font-size: var(--fs-h3); color: var(--ink); line-height:1.1; }
.bio-modal__role { color: var(--maroon); font-weight:600; font-size:.86rem; letter-spacing:.02em; margin-top:.3rem; }
.bio-modal__body p { color: var(--ink-80); line-height: 1.65; font-size: 1rem; }
.bio-modal__body p + p { margin-top: var(--sp-16); }
@media (prefers-reduced-motion: no-preference){
  .bio-modal:not([hidden]) .bio-modal__panel { animation: bioIn .35s var(--ease); }
  @keyframes bioIn { from { opacity:0; transform: translateY(16px); } }
}

.partner-row__id { display:flex; align-items:center; gap: var(--sp-16); }
.partner-row__logo { width:62px; height:62px; flex:none; background: var(--cloud); border:1px solid var(--line);
  border-radius: 14px; display:flex; align-items:center; justify-content:center; padding:8px; }
.partner-row__logo img { max-width:100%; max-height:100%; object-fit:contain; display:block; }