/* ECF shared stylesheet — single source of truth for tokens, base type,
   nav, hero shell, buttons, sections, shared components, faq, footer, reveal.
   Extracted 2026-08-16 from index.html. Page-specific CSS stays in its page.
   Any change here reaches every page; do not re-declare these rules per page. */

:root{
    /* Palette migrated to the consolidated design instruction (16 Aug).
       Token NAMES are unchanged so no component is restyled; only values move.
       The historical "navy"/"gold" names now carry Ink and Copper. */
    --navy:        #0F2036;   /* Ink */
    --navy-2:      #1B2C41;   /* step, interpolated Ink -> Ink soft */
    --navy-3:      #26384A;   /* Ink soft */
    --gold:        #9E5822;   /* Copper — 4.55:1 on cream, clears AA for 11px eyebrows */
    --gold-dark:   #8A4C1E;   /* deeper copper: hover, fills, borders */
    --gold-deep:   #7F441A;   /* copper for TEXT on cream, ~6.3:1 */
    --gold-light:  #D9A066;   /* light copper, for use on Ink backgrounds */
    --cream:       #F6F1E8;   /* Cream */
    --cream-2:     #EDE6D9;   /* subtle alternating band, Cream -> Divider */
    --cream-3:     #D6CCBB;   /* Divider */
    --paper:       #FFFDF8;   /* Paper */
    --divider-strong: #B9AA93;
    /* Status amber. Deliberately NOT copper: it marks pending/placeholder
       state (IRS 1023 pill, placeholder banner, pending school cards) and must
       stay readable as a status, not as the brand accent. Passes AA on cream. */
    --status:        #B45309;
    --status-text:   #92400E;
    --status-bg:     rgba(180, 83, 9, 0.08);
    --status-bg-soft:rgba(180, 83, 9, 0.06);
    --status-border: rgba(180, 83, 9, 0.18);
    --light-blue:  #8FA7C7;
    --forest:      #075D45;
    --forest-dark: #034B37;
    --forest-tint: #C9DDD2;
    --ink:         #0F2036;   /* Ink */
    --ink-2:       #26384A;   /* Ink soft */
    --muted:       #4F5F70;   /* clears both --cream (5.8:1) and --cream-2 (5.2:1) */
    --white:        #FFFFFF;

    /* Type stacks */
    /* 4 Oct 2026: self-hosted. Cormorant Garamond carries display and serif
       (Cormorant SC has no italic cut, and the headline style leans on <em>).
       Source Sans 3 carries body; the old mono slot now uses it with tabular
       figures so numbers still align. */
    --display:     'Cormorant Garamond', 'Charter', Georgia, serif;
    --serif:       'Cormorant Garamond', 'Charter', Georgia, serif;
    --smallcaps:   'Cormorant SC', 'Cormorant Garamond', Georgia, serif;
    --sans:        'Source Sans 3', system-ui, -apple-system, sans-serif;
    --mono:        'Source Sans 3', system-ui, -apple-system, sans-serif;

    /* Spatial rhythm */
    --max:         1280px;
    --gutter:      max(24px, 4vw);
    --section-y:   clamp(80px, 14vh, 160px);
  }

:root{
    --bg:        var(--cream);
    --bg-2:      var(--cream-2);
    --fg:        var(--ink);
    --fg-muted:  var(--muted);
    --border:    rgba(15, 32, 54, 0.12);
  }

*,*::before,*::after{ box-sizing:border-box; }
/* 4 Oct 2026: figures align in Source Sans 3 wherever the old mono face sat */
[class*="stat__num"], .calc__value, .calc__input, .hero__credit, .status-band, .meta-label, .footer__meta{ font-variant-numeric: tabular-nums; }
.nav__brand > span:last-child{ font-family: var(--smallcaps); font-weight: 600; letter-spacing: 0.04em; }
/* The hidden attribute must beat component display rules. Without this, any
   element toggled via .hidden that also carries an explicit display (grid,
   flex, block) stays on screen while the DOM property reads true — which has
   now bitten this project three times (.hiw__heretag, .ec__fields, and the
   status/error blocks below). Keep the !important: it is what makes the
   attribute authoritative. */
[hidden]{ display: none !important; }

html{
    /* NO scroll-behavior:smooth — the reveal observer's transforms shift
       document height and cancel the in-flight animation (page moved ~26px
       and stopped). Anchors are handled explicitly in site.js. */
    scroll-padding-top: 88px;
  }

html,body{ margin:0; padding:0; }

body{
    font-family:var(--sans);
    background:var(--bg);
    color:var(--fg);
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

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

a{ color:inherit; text-decoration:none; }
/* Inline body links. gold-deep (#7F441A) clears AA on all three cream tints
   (6.80 / 6.17 / 5.52); plain --gold does NOT (4.43 / 4.02 / 3.59) so never use it
   for body text. On navy both copper values fail, so navy sections invert to cream
   with the underline carrying the affordance. Hover deepens to ink rather than
   changing hue, since gold-deep is already the resting colour. */
/* Inline body links. Wrapped in :where() ON PURPOSE so the whole selector carries
   the specificity of a bare "a" (0,0,1). Written as p a:not([class]) it computes to
   0,1,2 and silently outranks every component rule of the form ".panel a" (0,1,1),
   which is how .callout a and .elig-grid__after a were both defeated. Any component
   that wants its own link colour now simply states it and wins.
   Colour: gold-deep (#7F441A) clears AA on all three cream tints (6.80/6.17/5.52).
   Plain --gold does NOT (4.43/4.02/3.59) — never use it for body text. Both copper
   values fail on navy, so dark surfaces invert to cream below; the two rules have
   equal specificity, so the inversion must stay AFTER the base rule. */
:where(.prose, p, li) a:where(:not([class])){ color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }
:where(.prose, p, li) a:where(:not([class])):hover{ color: var(--ink); text-decoration-thickness: 2px; }
/* .interest is deliberately absent: it renders on cream-2 in every file that
   uses it, so unclassed links there take the light-background rule above. */
:where(.section--navy, .footer, .callout, .income-block, .reframe, .split-block) :where(.prose, p, li) a:where(:not([class])){ color: var(--cream); }
:where(.section--navy, .footer, .callout, .income-block, .reframe, .split-block) :where(.prose, p, li) a:where(:not([class])):hover{ color: #fff; text-decoration-thickness: 2px; }

.skip-link{
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 100;
    padding: 0.875rem 1.25rem;
    background: var(--navy);
    color: var(--cream);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    border: 2px solid var(--gold);
    border-radius: 2px;
    transition: top 200ms ease;
  }

.skip-link:focus{
    top: 1rem;
    outline: none;
  }

:focus-visible{
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }

.nav__status:focus-visible{
    outline-offset: 4px;
  }

/* UI review 18 Oct 2026: on Ink backgrounds the copper ring is too faint, so
   use light copper there. Form fields set outline:none for their own border
   focus style, which hid keyboard focus; restore a visible ring. */
.section--navy :focus-visible, .footer :focus-visible, .hero--photo :focus-visible,
.status-band :focus-visible, .scm :focus-visible, .callout :focus-visible, .income-block :focus-visible{
    outline-color: var(--gold-light);
  }
input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline: 2px solid var(--gold) !important;
    outline-offset: 2px;
  }
.section--navy input:focus-visible, .hero--photo input:focus-visible,
.section--navy select:focus-visible, .section--navy textarea:focus-visible{
    outline-color: var(--gold-light) !important;
  }

@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }

.container{
    max-width: var(--max);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

.section{
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
  }

.section--cream{ background: var(--cream); color: var(--ink); }

.section--navy{ background: var(--navy); color: var(--cream); }

.section--cream-2{ background: var(--cream-2); color: var(--ink); }

.eyebrow{
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-deep);
    display: inline-block;
    margin-bottom: 1.5rem;
  }

.section--navy .eyebrow{ color: var(--gold-light); }

.display-1{
    font-family: var(--display);
    font-weight: 500;
    /* MEASURED CAP. The hero grid sits inside .hero__inner (max-width 1280), so
       the text column stops growing at 662px while a vw-based font keeps
       scaling. At the old 104px cap the line "federal tax bill into" needed
       ~837px and wrapped, turning an authored 4-line headline into 6 rendered
       lines and pushing the CTAs below the fold on wide screens.
       MEASURED at the 662px column: the widest authored line ("federal tax
       bill into") is 636px at 76px — only 4% headroom, too tight if Newsreader
       fails to load and Georgia substitutes. 70px puts it at 586px, ~12%
       headroom. Re-measure if the headline copy or the grid ratio changes. */
    font-size: clamp(38px, 5.2vw, 70px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--navy);
    margin: 0;
  }

.section--navy .display-1{ color: var(--cream); }

.display-1__line{
    display: block;
    overflow: hidden;
    /* Mask is exactly one line-height, which clips descenders/diacritics
       mid-animation. Bleed the box and pull it back. §2.10 */
    padding-block: 0.1em;
    margin-block: -0.1em;
  }

.display-1__inner{
    display: block;
    animation: rise 1000ms cubic-bezier(0.16, 0.84, 0.44, 1) both;
  }

.display-1__line:nth-child(1) .display-1__inner{ animation-delay: 150ms; }

.display-1__line:nth-child(2) .display-1__inner{ animation-delay: 300ms; }

.display-1__line:nth-child(3) .display-1__inner{ animation-delay: 450ms; }

.display-1__line:nth-child(4) .display-1__inner{ animation-delay: 600ms; }

@keyframes rise{
    from{ transform: translateY(110%); }
    to{ transform: translateY(0); }
  }

.hero__meta,
  .hero__lead-block,
  .hero__stats,
  .hero__cta-block{
    animation: fade-up 800ms ease 1100ms both;
  }

.hero__lead-block{ animation-delay: 1250ms; }

.hero__cta-block{ animation-delay: 1400ms; }

.hero__stats{ animation-delay: 1550ms; }

@keyframes fade-up{
    from{ opacity: 0; transform: translateY(16px); }
    to{ opacity: 1; transform: translateY(0); }
  }

@media (prefers-reduced-motion: reduce){
    .display-1__inner,
    .hero__meta,
    .hero__lead-block,
    .hero__stats,
    .hero__cta-block{
      transform: none !important;
      opacity: 1 !important;
      animation: none !important;
    }
  }

.skip-hero-anim .display-1__inner,
  .skip-hero-anim .hero__meta,
  .skip-hero-anim .hero__lead-block,
  .skip-hero-anim .hero__stats,
  .skip-hero-anim .hero__cta-block{
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
  }

.display-2{
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(36px, 5vw, 72px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--navy);
    margin: 0;
  }

.section--navy .display-2{ color: var(--cream); }

.display-3{
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1.15;
    color: var(--navy);
    margin: 0 0 1.5rem;
    letter-spacing: -0.015em;
  }

.section--navy .display-3{ color: var(--cream); }

.display-1 em, .display-2 em, .display-3 em{
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    color: var(--gold-deep);
    letter-spacing: 0;
  }

.section--navy .display-1 em,
  .section--navy .display-2 em,
  .section--navy .display-3 em{
    color: var(--gold-light);
  }

.lead{
    font-family: var(--sans);
    font-size: clamp(18px, 1.4vw, 22px);
    line-height: 1.5;
    font-weight: 400;
    color: var(--ink-2);
    max-width: 56ch;
    margin: 1.5rem 0 0;
  }

.section--navy .lead{ color: rgba(246, 241, 232, 0.85); }

.body{
    font-size: 17px;
    line-height: 1.65;
    max-width: 64ch;
    color: var(--ink-2);
  }

.section--navy .body{ color: rgba(246, 241, 232, 0.82); }

.body-small{
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted);
  }

.border-hairline{
    border: 1px solid rgba(15, 32, 54, 0.12);
  }

.border-hairline-top{
    border-top: 1px solid rgba(15, 32, 54, 0.12);
  }

@media (min-resolution: 2dppx){
    .border-hairline{ border-width: 0.5px; }
    .border-hairline-top{ border-top-width: 0.5px; }
  }

.pull{
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(22px, 2.2vw, 32px);
    line-height: 1.4;
    color: var(--gold-deep);
    border-left: 3px solid var(--gold);
    padding: 0.5rem 0 0.5rem 1.5rem;
    margin: 2rem 0;
    max-width: 56ch;
  }

.section--navy .pull{
    color: var(--cream);
    border-left-color: var(--gold-light);
  }

.nav{
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(246, 241, 232, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    transition: background 250ms ease, border 250ms ease;
  }

.nav__inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
    padding: 1.25rem var(--gutter);
    /* Wider than --max on purpose: six links plus the status pill need ~1102px,
       which left only 65px between the wordmark and the first link at 1280. */
    max-width: 1440px;
    margin: 0 auto;
  }

.nav__brand{
    display: flex;
    align-items: center;
    gap: 0.875rem;
    font-family: var(--display);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 0.04em;
    color: var(--navy);
  }

.nav__brand-mark{
    width: auto;
    height: 30px;
    flex-shrink: 0;
    display: block;
  }

/* Hairline divider between the mark and the wordmark, per the lockup. */
.nav__brand-rule{
    width: 1.5px;
    height: 32px;
    background: var(--gold);
    flex-shrink: 0;
    border-radius: 1px;
  }

.nav__links{
    display: flex;
    gap: 1.25rem;
    align-items: center;
  }

.nav__status{
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--status-border);
    background: var(--status-bg);
    border-radius: 9999px;
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--status-text);
    white-space: nowrap;
  }

.nav__status-dot{
    width: 6px;
    height: 6px;
    background: var(--status);
    border-radius: 50%;
    animation: pulse-dot 2.4s ease-in-out infinite;
  }

@keyframes pulse-dot{
    0%, 100%{ opacity: 1; transform: scale(1); }
    50%{ opacity: 0.4; transform: scale(0.85); }
  }

@media (max-width: 900px){
    .nav__status-text{ display: none; }
    .nav__status{
      padding: 0.5rem 0.625rem;
      gap: 0.5rem;
    }
    .nav__status-dot{
      width: 7px;
      height: 7px;
    }
  }

@media (max-width: 1099px){
    .nav__inner{ gap: 1rem; }
    .nav__links{ gap: 0.75rem; }
    /* Desktop links collapse into the drawer (§2.9).
       The compliance status line lives in the footer strip, NOT in the nav.
       It was a 616px pill against a 1440px .nav__inner cap, so with six links
       the row wrapped to two lines at every desktop width. Do not put it back.
       MEASURED without it: brand 205 + links 542 + gaps 100 (5 x 20px between
       links) + inner padding 113 = ~960px required. Breakpoint is 1100px,
       which leaves ~140px of headroom. Re-measure before adding a seventh
       link or lengthening a label.
       Do NOT drop this below ~1000px: .nav__links has an intrinsic width of
       ~718px and the brand ~150px, so the row runs out of room well before
       720px and the links wrap to three lines. iPad portrait (768px) sits
       inside that gap and gets the drawer; landscape (1024px) does not. */
    .nav__link{ display: none; }
  }

.nav__toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; /* UI review 18 Oct 2026: 44px tap target (was 40) */
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--navy);
    cursor: pointer;
  }

@media (min-width: 1100px){
    .nav__toggle{ display: none; }
  }

.nav__toggle-bars{
    display: block;
    position: relative;
    width: 18px;
    height: 12px;
  }

.nav__toggle-bars span{
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transition: transform 240ms ease, opacity 180ms ease;
  }

.nav__toggle-bars span:nth-child(1){ top: 0; }

.nav__toggle-bars span:nth-child(2){ top: 5px; }

.nav__toggle-bars span:nth-child(3){ top: 10px; }

.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(1){
    transform: translateY(5px) rotate(45deg);
  }

.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(2){ opacity: 0; }

.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(3){
    transform: translateY(-5px) rotate(-45deg);
  }

.nav__drawer{
    display: none;
    border-top: 1px solid var(--border);
    background: var(--cream);
  }

.nav__drawer[data-open]{
    display: block;
    /* R1 C63: let the open menu scroll on short phone screens so the last link is reachable. */
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

@media (min-width: 1100px){
    .nav__drawer{ display: none !important; }
  }

.nav__drawer-inner{
    padding: 0.5rem var(--gutter) 1.5rem;
    display: flex;
    flex-direction: column;
  }

.nav__drawer-link{
    padding: 1rem 0;
    font-family: var(--display);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--navy);
    border-bottom: 1px solid var(--border);
  }

.nav__drawer-link:last-of-type{ border-bottom: none; }

.nav__drawer .btn{
    margin-top: 1.25rem;
    justify-content: center;
  }

.nav__link{
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--ink-2);
    transition: color 200ms ease;
    /* Degrade by overflowing, never by wrapping to multiple lines */
    white-space: nowrap;
    flex-shrink: 0;
  }

.nav__link:hover{ color: var(--gold-deep); }

.hero{
    padding-top: 8rem;
    padding-bottom: var(--section-y);
    /* 92vh used to live here, on every hero. It is right for the homepage, whose
       hero carries a four-line headline, the qualifier, two CTAs, the liability
       fine print, a photo column and the stat band. On an interior page the hero
       is a crumb, a two-line h1, a rule and a short lead — about 330px of content
       centred in a ~900px box, which left a large void above and below and pushed
       the page's actual content (the eligibility checker, for one) below the fold.
       The generous height is now opt-in via .hero--tall; this floor only binds on
       the very short heroes like /privacy and /terms. */
    min-height: 52vh;
    display: flex;
    align-items: center;
    background: var(--cream);
    position: relative;
  }

/* Full-viewport opening. Homepage only: its hero has the content to justify it. */
.hero--tall{ min-height: 92vh; }

.hero__inner{
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
    width: 100%;
  }

.hero__grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .hero__figure{ margin: 0; }
  .hero__img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 2px;
    background: var(--cream-2);
  }
  /* The mobile source is a portrait crop; give it a portrait box so the
     composition is not squeezed at 390px. */
  @media (max-width: 639px){
    .hero__img{ aspect-ratio: 4 / 5; }
  }
  .hero__caption{
    font-family: var(--serif);
    font-style: italic;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
    margin: 0.875rem 0 0;
    padding-left: 2.5rem;
    position: relative;
    max-width: 34ch;
  }
  .hero__caption::before{
    content: '';
    position: absolute;
    left: 0; top: 0.6em;
    width: 1.75rem; height: 1px;
    background: var(--gold);
  }
  @media (min-width: 1024px){
    .hero__grid{
      grid-template-columns: 7fr 5fr;
      gap: 4.5rem;
      align-items: end;
    }
  }

.hero__meta{
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-deep);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 1rem;
  }

.hero__meta-row{
    display: flex;
    gap: 0.75rem;
    align-items: center;
  }

.hero__meta-dot{ color: var(--gold-deep); }

.hero__eyebrow{
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 1.5rem;
  }

.hero__divider{
    width: 96px;
    height: 1px;
    background: var(--gold);
    margin: 2rem 0;
  }

.hero__cta-stack{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.875rem;
    margin-top: 2rem;
  }

@media (max-width: 1023px){
    .hero__cta-stack{
      flex-direction: row;
      flex-wrap: wrap;
      max-width: none;
      gap: 0.875rem;
      margin-top: 2rem;
    }
    .hero__cta-stack .btn{
      flex: 1 1 240px;
      min-width: 0;
      justify-content: center;
    }
  }

.btn{
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 1.75rem;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid var(--navy);
    background: transparent;
    color: var(--navy);
    cursor: pointer;
    transition: all 200ms ease;
    border-radius: 2px;
  }

.btn:hover{
    background: var(--navy);
    color: var(--cream);
  }

.btn--primary{
    background: var(--navy);
    color: var(--cream);
    border-color: var(--navy);
  }

.btn--primary:hover{
    background: var(--ink);
  }

.btn--gold{
    background: var(--gold);
    color: var(--cream);
    border-color: var(--gold);
  }

.btn--gold:hover{
    background: var(--gold-dark);
    border-color: var(--gold-dark);
  }

.btn--ghost-light{
    border-color: var(--cream);
    color: var(--cream);
  }

.btn--ghost-light:hover{
    background: var(--cream);
    color: var(--navy);
  }

.btn__arrow{
    width: 16px;
    height: 16px;
    transition: transform 200ms ease;
  }

.btn:hover .btn__arrow{ transform: translateX(3px); }

.stats{
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-top: 4rem;
  }

@media (min-width: 768px){
    .stats{
      grid-template-columns: repeat(4, 1fr);
      gap: 2rem;
    }
    /* Column-count modifiers live HERE, behind the breakpoint, never inline.
       An inline grid-template-columns beats the stylesheet at every width, so
       the mobile 1fr default can never take effect and the tracks overflow:
       1fr is minmax(auto, 1fr), and .stat__num is a fixed 48px, so "$1,700"
       has a ~155px min-content floor per track. Three floors plus two 32px
       gaps is 419px, which will not compress into a 316px phone column. */
    .stats--three{ grid-template-columns: repeat(3, 1fr); }
    .stats--two{ grid-template-columns: repeat(2, 1fr); }
  }

/* Hero stat band. Spans the full width BENEATH .hero__grid rather than adding a
   third column to it: the hero copy column already carries a four-line display-1,
   the load-bearing qualifier, two CTAs and the liability fine print, and the grid
   is a measured 7fr/5fr. A third track would compress the headline back into the
   overflow this hero was already fixed for once.
   .stat__num is clamp(48px, 5vw, 72px) at full size, which would out-shout the
   headline here, so this modifier reduces it. Column count still comes from
   .stats--three behind the 768px breakpoint — never inline. */
.hero__stats{
    margin-top: 3.25rem;
    padding-top: 2rem;
    border-top: 1px solid var(--cream-3);
  }
  .stats--hero{ margin-top: 0; gap: 2.25rem; }
  /* This band does NOT use .stats--three's 768px three-column switch, and must
     override both it and .stats' own four-column rule (which is why this
     declaration sits after that @media block — equal specificity, source order
     wins at every width). Reason: .stat__num is clamped at its 28px floor from
     768px all the way to 1077px while the column keeps shrinking with the
     viewport, so the old stat label needed 183px of text in a 154px box at
     768px and broke across two lines. No amount of tracking closes a
     29px gap. Three columns therefore start at 900px, where the container gives
     ~828px of content against the ~796px the row actually needs. Below that the
     band stacks, which is the right answer: a taller hero beats a word split
     across two lines. This is the same failure the note above warns about. */
  .stats--hero{ grid-template-columns: 1fr; }
  .stats--hero .stat__num{
    font-size: clamp(28px, 2.6vw, 38px);
    margin-bottom: 0.5rem;
    /* Negative tracking in em, not px: the numeral is sized in vw, so an em value
       scales with it. This buys back a few px at mid widths; it is not what makes
       the band fit — the 900px breakpoint above is. */
    letter-spacing: -0.015em;
  }
  .stats--hero .stat__label{ max-width: 30ch; }
  @media (min-width: 900px){
    .stats--hero{ grid-template-columns: repeat(3, 1fr); }
    .stats--hero .stat{ padding-right: 1.75rem; }
    .stats--hero .stat + .stat{
      padding-left: 1.75rem;
      border-left: 1px solid var(--cream-3);
    }
    .stats--hero .stat:last-child{ padding-right: 0; }
    /* Belt and braces on alignment. The breakpoint stops the wrap, but a longer
       numeral in future would break the shared label baseline again. Two explicit
       rows plus subgrid means row 1 sizes to the tallest numeral and every label
       starts at row 2 regardless, so a wrap can never stagger the band. Degrades
       to normal block flow where subgrid is unsupported. */
    .stats--hero{ grid-template-rows: auto auto; }
    .stats--hero .stat{
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 2;
      align-content: start;
    }
  }

.stat__num{
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(48px, 5vw, 72px);
    line-height: 1;
    color: var(--gold-deep);
    margin: 0 0 0.75rem;
    letter-spacing: 0;
  }

.section--navy .stat__num{ color: var(--gold-light); }

.stat__label{
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--ink-2);
    line-height: 1.5;
    margin: 0;
  }

.section--navy .stat__label{ color: rgba(246, 241, 232, 0.78); }

.steps{
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 4rem;
  }

@media (min-width: 768px){
    .steps{
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
    }
  }

.step{
    padding-top: 1.5rem;
    border-top: 1px solid rgba(15, 32, 54, 0.12);
  }

@media (min-resolution: 2dppx){
    .step{ border-top-width: 0.5px; }
  }

.section--navy .step{
    border-top-color: rgba(246, 241, 232, 0.14);
  }

.step__num{
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(15, 32, 54, 0.72);
    margin: 0 0 0.75rem;
  }

.section--navy .step__num{ color: rgba(246, 241, 232, 0.55); }

.step__when{
    font-family: var(--mono);
    font-size: 0.78125rem; /* 12.5px (UI review 18 Oct 2026, was 11px) */
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(15, 32, 54, 0.72);
    margin-bottom: 0.75rem;
  }

.section--navy .step__when{ color: rgba(246, 241, 232, 0.72); }

.meta-label{
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(15, 32, 54, 0.72);
  }

.section--navy .meta-label,
  .footer .meta-label{ color: rgba(246, 241, 232, 0.55); }

.step__title{
    font-family: var(--display);
    font-size: 28px;
    font-weight: 500;
    color: var(--navy);
    margin: 0 0 1rem;
    letter-spacing: 0.01em;
  }

.section--navy .step__title{ color: var(--cream); }

.step__body{
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0;
  }

.section--navy .step__body{ color: rgba(246, 241, 232, 0.78); }

.hiw__rail{
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-top: 4rem;
  }

.hiw__rail::before{
    content: '';
    position: absolute;
    left: 9%; right: 9%;
    top: 21px;
    height: 1px;
    background: var(--cream-3);
  }

.hiw__node{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 0.75rem;
  }

.hiw__dot{
    position: relative;
    z-index: 1;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--cream);
    border: 1px solid var(--cream-3);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono);
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--muted);
    flex-shrink: 0;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
  }

.hiw__node--you .hiw__dot{
    background: var(--forest);
    border-color: var(--forest);
    color: #fff;
  }

.hiw__node--here .hiw__dot{
    /* Copper is much darker than the retired gold, so ink-on-copper measured
       3.29:1. Deeper copper with cream text instead: 5.9:1. */
    background: var(--gold-dark);
    border-color: var(--gold-dark);
    color: var(--cream);
    box-shadow: 0 0 0 6px rgba(166, 93, 37, 0.18);
  }

.hiw__who{
    font-family: var(--mono);
    font-size: 12px; letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 1rem;
  }

.hiw__node--you .hiw__who{ color: var(--forest); }

.hiw__when{
    font-family: var(--mono);
    font-size: 12px; letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-top: 0.375rem;
  }

.hiw__what{
    font-family: var(--display);
    font-size: 20px; font-weight: 500;
    line-height: 1.2;
    color: var(--navy);
    margin: 0.5rem 0 0.5rem;
    letter-spacing: -0.01em;
  }

.hiw__detail{
    font-size: 13px; line-height: 1.55;
    color: var(--ink-2);
    margin: 0;
  }

.hiw__heretag{
    display: inline-block;
    margin-top: 0.75rem;
    background: var(--gold-dark);
    color: var(--cream);
    font-family: var(--mono);
    font-size: 12px; letter-spacing: 0.13em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 2px;
  }

@media (max-width: 900px){
    .hiw__rail{ grid-template-columns: 1fr; gap: 22px; }
    .hiw__rail::before{ display: none; }
    .hiw__node{
      display: grid;
      grid-template-columns: 42px 1fr;
      column-gap: 1.25rem;
      text-align: left;
      align-items: start;
      padding: 0;
    }
    .hiw__who{ margin-top: 0; }
  }

.hiw__panels{
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 4rem;
  }

@media (min-width: 900px){
    .hiw__panels{ grid-template-columns: 1.3fr 1fr; gap: 2rem; }
  }

.hiw__wrong{
    background: var(--forest);
    color: #fff;
    border-radius: 4px;
    padding: 2rem 2.25rem;
  }

.hiw__wrong-tag{
    font-family: var(--mono);
    font-size: 12px; letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--forest-tint);
    margin: 0 0 1rem;
  }

.hiw__wrong-text{
    font-family: var(--display);
    font-size: clamp(19px, 2vw, 23px);
    line-height: 1.45;
    color: #fff;
    margin: 0;
  }

.hiw__card{
    background: var(--cream-2);
    border: 1px solid var(--cream-3);
    border-radius: 4px;
    padding: 2rem 2.25rem;
  }

.hiw__card-tag{
    font-family: var(--mono);
    font-size: 12px; letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin: 0 0 1rem;
  }

.hiw__card-text{
    font-size: 15px; line-height: 1.6;
    color: var(--ink-2);
    margin: 0;
  }

.hiw__card-text strong{ color: var(--navy); font-weight: 600; }

.hiw__cta{
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: center;
    margin-top: 2.5rem;
    padding: 2rem 2.25rem;
    background: var(--cream-2);
    border-left: 3px solid var(--gold);
    border-radius: 2px;
  }

@media (min-width: 768px){
    .hiw__cta{ grid-template-columns: 1fr auto; gap: 2.5rem; }
  }

.hiw__cta-text{
    font-size: 15px; line-height: 1.6;
    color: var(--ink-2);
    margin: 0;
    max-width: 56ch;
  }

.hiw__cta-text strong{ color: var(--navy); font-weight: 600; }

.hiw__disc{
    font-size: 12px; line-height: 1.6;
    color: var(--muted);
    margin: 1.75rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cream-3);
    max-width: 78ch;
  }

.faq{
    margin-top: 4rem;
    max-width: 800px;
  }

.faq__item{
    border-bottom: 1px solid var(--cream-3);
    padding: 1.5rem 0;
  }

.section--navy .faq__item{ border-bottom-color: rgba(246, 241, 232, 0.1); }

.faq__q{
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    padding: 0.5rem 0;
  }

.faq__q::-webkit-details-marker{ display: none; }

.faq__q-text{
    font-family: var(--display);
    font-size: clamp(20px, 1.8vw, 26px);
    font-weight: 500;
    color: var(--navy);
    line-height: 1.3;
    letter-spacing: 0.005em;
    flex: 1;
  }

.section--navy .faq__q-text{ color: var(--cream); }

.faq__icon{
    width: 32px;
    height: 32px;
    border: 1px solid var(--gold-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 250ms ease;
  }

details[open] .faq__icon{
    transform: rotate(45deg);
    border-color: var(--gold);
  }

.faq__icon::before{
    content: '+';
    color: var(--gold-deep);
    font-size: 18px;
    line-height: 1;
  }

.section--navy .faq__icon{ border-color: var(--gold-light); }

.section--navy .faq__icon::before{ color: var(--gold-light); }

.faq__a{
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-2);
    margin: 1rem 4rem 0 0;
    max-width: 60ch;
  }

.section--navy .faq__a{ color: rgba(246, 241, 232, 0.82); }

.footer{
    background: var(--navy);
    color: rgba(246, 241, 232, 0.7);
    padding: 4rem var(--gutter) 2rem;
    font-size: 13px;
    line-height: 1.6;
  }

.footer__inner{
    max-width: var(--max);
    margin: 0 auto;
  }

.footer__top{
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(246, 241, 232, 0.1);
  }

@media (min-width: 768px){
    .footer__top{ grid-template-columns: 2fr 1fr 1fr 1fr; }
  }

.footer__brand{
    font-family: var(--display);
    font-size: 20px;
    color: var(--cream);
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
  }

.footer__col-title{
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: 1rem;
  }

.footer__link{
    display: block;
    color: rgba(246, 241, 232, 0.7);
    margin-bottom: 0.25rem;
    padding: 0.375rem 0; /* 18 Oct 2026: ~33px tap target on touch screens */
    transition: color 200ms ease;
  }

.footer__link:hover{ color: var(--cream); }

/* UI review 18 Oct 2026: 44px footer tap targets on phones (were ~33px). */
@media (max-width: 767px){
    .footer__link{ display: flex; align-items: center; min-height: 44px; padding: 0; margin-bottom: 0; }
  }

/* R1 C27: page-level p{} rules (privacy, terms) were turning the footer mission line dark on navy. */
.footer__top p, .footer > .footer__inner > p, .footer p{ color: rgba(246, 241, 232, 0.7); }

/* Social profile row (13 Sep 2026). The footer sits on Ink, so the icons take
   --cream per the marketing handoff, not a brand-coloured platform fill.
   Icons only, no text labels: with four or five channels the labels wrap below
   400px, and the handoff says drop labels before icons. */
.footer__social{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem; /* was 1.5rem; the 44px hit areas now carry the spacing */
    margin-left: -12px; /* keeps the first icon aligned with the column text */
    padding-top: 1.75rem;
  }

.footer__social-link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px; /* 18 Oct 2026: 44px tap target; icon stays 20px */
    min-height: 44px;
    color: rgba(246, 241, 232, 0.7);
    transition: color 200ms ease;
  }

.footer__social-link:hover{ color: var(--cream); }

.footer__social-link:focus-visible{
    outline: 2px solid var(--gold-light);
    outline-offset: 4px;
    border-radius: 2px;
  }

.footer__social-link svg{
    width: 20px;
    height: 20px;
    flex: none;
    display: block;
    fill: currentColor;
  }

.footer__meta{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem 1rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(246, 241, 232, 0.10);
  }

@media (min-resolution: 2dppx){
    .footer__top{ border-bottom-width: 0.5px; }
    .footer__meta{ border-top-width: 0.5px; }
  }

.footer__meta-sep{
    /* aria-hidden decorative divider, so WCAG 1.4.3 does not strictly apply,
       but 0.25 alpha was near-invisible. Raised for legibility. */
    color: rgba(246, 241, 232, 0.5);
    font-size: 12px;
  }

.footer__legal{
    padding-top: 1.25rem;
    font-size: 12px;
    color: rgba(246, 241, 232, 0.5);
    line-height: 1.6;
  }

/* R2 C65: credit and status conditions at a readable size on phones. */
@media (max-width: 639px){
    .footer__legal{ font-size: 15px; color: rgba(246, 241, 232, 0.7); }
    .footer .meta-label{ font-size: 13px; }
  }

.reveal{
    transform: translateY(24px);
    transition: transform 700ms ease;
  }

.reveal.in-view{
    transform: translateY(0);
  }

.grid-2{
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
  }

@media (min-width: 1024px){
    .grid-2{ grid-template-columns: 5fr 4fr; gap: 6rem; }
  }

.grid-2--reverse{
    direction: rtl;
  }

.grid-2--reverse > *{
    direction: ltr;
  }


/* ===== Shared subpage components (nav back, crumb, banner, school cards,
   cta strip, status card, three-commitments, interest form, footer links) ===== */

.display-1 em{
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    color: var(--gold-deep);
    letter-spacing: 0;
  }

.display-2 em{
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    color: var(--gold-deep);
    letter-spacing: 0;
  }

.section--navy .display-2 em{ color: var(--gold-light); }

.nav__back{
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--ink-2);
    transition: color 200ms ease;
  }

.nav__back:hover{ color: var(--gold-deep); }

.hero__crumb{
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }

.hero__crumb-rule{
    width: 24px;
    height: 1px;
    background: var(--gold);
  }

.status-card{
    background: var(--cream-2);
    border-left: 3px solid var(--gold);
    padding: 1.5rem 1.75rem;
    max-width: 640px;
    margin-top: 2rem;
  }

.status-card__label{
    font-size: 12px; /* UI review 18 Oct 2026 (was 11px) */
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 0.625rem;
  }

.status-card__text{
    font-family: var(--serif);
    font-style: italic;
    font-size: 18px;
    line-height: 1.5;
    color: var(--ink);
    margin: 0;
  }

.commitments-three{
    margin-top: 4rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--cream-3);
    border-top: 2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
  }

/* from partner-schools.html */
@media (min-width: 768px){
    .commitments-three{ grid-template-columns: repeat(3, 1fr); }
  }

.commitment-three{
    background: var(--cream);
    padding: 3rem 2.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

.commitment-three__num{
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: 56px;
    line-height: 1;
    color: var(--gold-deep);
    margin: 0 0 0.625rem;
    letter-spacing: 0;
  }

.commitment-three__title{
    font-family: var(--display);
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 500;
    color: var(--navy);
    margin: 0;
    letter-spacing: 0.005em;
    line-height: 1.15;
  }

.commitment-three__title em{
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    color: var(--gold-deep);
    letter-spacing: 0;
  }

.commitment-three__body{
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0;
  }

.interest{
    background: var(--cream-2);
    padding: var(--section-y) var(--gutter);
  }

.interest__inner{
    max-width: 720px;
    margin: 0 auto;
  }

.interest__title{
    font-family: var(--display);
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 500;
    color: var(--navy);
    margin: 0 0 1rem;
    line-height: 1.1;
    letter-spacing: 0.01em;
  }

.interest__title em{
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    color: var(--gold-deep);
    letter-spacing: 0;
  }

.interest__desc{
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0 0 2.5rem;
    max-width: 60ch;
  }

.interest__form{
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

.interest__field{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

.interest__label{
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-deep);
  }

.interest__input,
  .interest__select,
  .interest__textarea{
    padding: 0.875rem 1rem;
    font-family: var(--sans);
    font-size: 15px;
    border: 1px solid var(--cream-3);
    background: var(--cream);
    color: var(--ink);
    outline: none;
    transition: border-color 200ms ease;
    border-radius: 2px;
    width: 100%;
  }

.interest__input:focus,
  .interest__select:focus,
  .interest__textarea:focus{
    border-color: var(--gold);
  }

.interest__textarea{
    min-height: 120px;
    resize: vertical;
    font-family: var(--sans);
    line-height: 1.5;
  }

.interest__submit-row{
    margin-top: 1rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
  }

.interest__btn{
    padding: 1rem 2rem;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid var(--navy);
    background: var(--navy);
    color: var(--cream);
    cursor: pointer;
    transition: all 200ms ease;
    border-radius: 2px;
  }

.interest__btn:hover{ background: var(--ink); }

.interest__legal{
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
  }

/* .interest renders on cream-2. It is excluded from the dark-section link rule
   near the top of this file, so unclassed links inside it inherit gold-deep. */

.interest__success{
    background: var(--cream);
    border: 1px solid var(--gold);
    padding: 2.5rem;
    text-align: center;
    margin-top: 2rem;
    display: none;
  }

.interest__success.is-visible{ display: block; }

.interest__error{
    font-size: 15px;
    line-height: 1.5;
    color: #8C2F1E;
    margin: 1rem 0 0;
  }

.interest__success-title{
    font-family: var(--display);
    font-size: 28px;
    font-weight: 500;
    color: var(--navy);
    margin: 0 0 0.625rem;
  }

.interest__success-title em{
    font-family: var(--serif);
    font-style: italic;
    color: var(--gold-deep);
  }

.banner{
    background: var(--status-bg-soft);
    border: 1px solid var(--status-border);
    border-left-width: 3px;
    border-left-color: var(--status);
    padding: 1.25rem 1.5rem;
    margin: 2.5rem 0 0;
    max-width: 64ch;
  }

/* from churches.html */
@media (min-resolution: 2dppx){
    .banner{ border-width: 0.5px; border-left-width: 3px; }
  }

.banner__label{
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--status-text);
    margin: 0 0 0.5rem;
    display: block;
  }

.banner__text{
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0;
  }

.schools{
    padding: clamp(3rem, 6vw, 5rem) 0 var(--section-y);
  }

.schools__grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 3rem;
  }

/* from churches.html */
@media (min-width: 720px){
    .schools__grid{ grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
  }

/* from churches.html */
@media (min-width: 1024px){
    .schools__grid{ grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  }

.school-card{
    background: var(--white);
    border: 1px solid rgba(15, 32, 54, 0.12);
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: border-color 200ms ease, transform 200ms ease;
  }

/* from churches.html */
@media (min-resolution: 2dppx){
    .school-card{ border-width: 0.5px; }
  }

.school-card:hover{
    border-color: rgba(166, 93, 37, 0.5);
    transform: translateY(-1px);
  }

.school-card__monogram{
    width: 48px;
    height: 48px;
    border: 1px solid rgba(15, 32, 54, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--gold-deep);
    background: var(--cream);
  }

/* from churches.html */
@media (min-resolution: 2dppx){
    .school-card__monogram{ border-width: 0.5px; }
  }

.school-card__name{
    font-family: var(--display);
    font-size: 22px;
    font-weight: 500;
    color: var(--navy);
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin: 0;
  }

.school-card__meta{
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 0.875rem;
    align-items: center;
  }

.school-card__meta-sep{
    color: rgba(15, 32, 54, 0.45);
    font-size: 12px;
  }

.school-card__body{
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0;
  }

.school-card__status{
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(15, 32, 54, 0.08);
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(15, 32, 54, 0.72);
  }

/* from churches.html */
@media (min-resolution: 2dppx){
    .school-card__status{ border-top-width: 0.5px; }
  }

.school-card__status--pending{ color: var(--status-text); }

.cta-strip{
    background: var(--navy);
    color: var(--cream);
    padding: clamp(3rem, 6vw, 5rem) var(--gutter);
  }

.cta-strip__inner{
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
  }

/* from churches.html */
@media (min-width: 768px){
    .cta-strip__inner{ grid-template-columns: 1fr auto; gap: 3rem; }
  }

.cta-strip__title{
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--cream);
  }

.cta-strip__title em{
    font-style: italic;
    color: var(--gold-light);
    font-weight: 500;
    letter-spacing: 0;
  }

/* from families.html */
@media (min-width: 768px){
    .commitments-three{ grid-template-columns: repeat(3, 1fr); }
  }

/* from eligibility.html */
@media (min-resolution: 2dppx){
    .banner{ border-width: 0.5px; border-left-width: 3px; }
  }

/* from eligibility.html */
@media (min-width: 720px){
    .schools__grid{ grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
  }

/* from eligibility.html */
@media (min-width: 1024px){
    .schools__grid{ grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  }

/* from eligibility.html */
@media (min-resolution: 2dppx){
    .school-card{ border-width: 0.5px; }
  }

/* from eligibility.html */
@media (min-resolution: 2dppx){
    .school-card__monogram{ border-width: 0.5px; }
  }

/* from eligibility.html */
@media (min-resolution: 2dppx){
    .school-card__status{ border-top-width: 0.5px; }
  }

/* from eligibility.html */
@media (min-width: 768px){
    .cta-strip__inner{ grid-template-columns: 1fr auto; gap: 3rem; }
  }

/* from schools.html */
@media (min-resolution: 2dppx){
    .banner{ border-width: 0.5px; border-left-width: 3px; }
  }

/* from schools.html */
@media (min-width: 720px){
    .schools__grid{ grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
  }

/* from schools.html */
@media (min-width: 1024px){
    .schools__grid{ grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  }

/* from schools.html */
@media (min-resolution: 2dppx){
    .school-card{ border-width: 0.5px; }
  }

/* from schools.html */
@media (min-resolution: 2dppx){
    .school-card__monogram{ border-width: 0.5px; }
  }

/* from schools.html */
@media (min-resolution: 2dppx){
    .school-card__status{ border-top-width: 0.5px; }
  }

/* from schools.html */
@media (min-width: 768px){
    .cta-strip__inner{ grid-template-columns: 1fr auto; gap: 3rem; }
  }

.footer__links{ display: flex; gap: 0.25rem 1.5rem; flex-wrap: wrap; margin-top: 1rem; font-size: 12px; }

.footer__links a{ color: rgba(246, 241, 232, 0.7); text-decoration: none; display: inline-block; padding: 0.5rem 0; } /* 18 Oct 2026: taller tap target */

.footer__links a:hover{ color: var(--cream); }

/* Subpage-authored refinements folded in with the extraction (2026-08-16). */
@media (prefers-reduced-motion: reduce){
  .reveal{ transform: none; }
}

/* Current-page marker for the sitewide nav (added when the doors were carried
   onto interior pages). */
.nav__link--current{ color: var(--gold-deep); }
.nav__drawer-link--current{ color: var(--gold-deep); }

/* .body-small carries --muted, which is authored for cream. Any instance placed
   on a dark panel needs the light-on-dark value or it fails contrast (the
   calculator disclaimer measured 2.58:1). Scoped here so it cannot recur. */
.calc__panel .body-small,
.split-block .body-small,
.income-block .body-small,
.section--navy .body-small{ color: rgba(246, 241, 232, 0.72); }
/* Emphasis inside a dark panel: var(--navy) is the default for cream and goes
   invisible here. */
.calc__panel .body-small strong,
.split-block .body-small strong,
.income-block .body-small strong,
.section--navy .body-small strong{ color: var(--gold-light); }

/* UI review 18 Oct 2026: keep "501(c)(3)" lowercase inside uppercase labels. */
.nocase{ text-transform: none; }
/* Footnote markers must not open up the line spacing. */
sup{ line-height: 0; }

/* R2-C30: footer mission width lives here, not inline (the /credit-calculator
   CSP has style-src 'self', which blocks style attributes). */
.footer__mission{ max-width: 32ch; }
/* R3-C03: 44px phone tap targets for the header logo, back link and contact links. */
@media (max-width: 767px){
    .nav__brand{ min-height: 44px; }
    .nav__back{ display: inline-flex; align-items: center; min-height: 44px; }
    .tap-link{ display: inline-flex; align-items: center; min-height: 44px; }
  }