/* ==========================================================================
   KIP Community Care Foundation — site styles
   Shape language: the arch (doorway/threshold), taken from the logo.
   ========================================================================== */

:root{
  /* KIP brand palette — Safe · Compassionate · Stable · Hopeful · Empowering.
     Legacy token names kept (--navy, --gold, --green) so the whole site
     re-skins from here; values now map to the KIP colours. */
  --navy:#1F4D4F;           /* Deep Teal — primary brand: headings, buttons, nav, links */
  --navy-deep:#163B3C;      /* darker teal — hover fills, footer, safety strip */
  --ink:#333333;            /* strong text — ledes, labels, inputs */
  --body:#4A4A4A;           /* Soft Charcoal — body text */
  --gold:#C98C8E;           /* Dusty Rose — accent (sparingly): eyebrows, icons, primary CTA */
  --gold-deep:#9E5457;      /* rose darkened for accent text — #C98C8E fails contrast */
  --gold-soft:#EFDCDC;      /* light rose wash */
  --green:#A7B59E;          /* Sage Green — calm markers, dots, borders */
  --green-deep:#2C6E62;     /* sage-teal — link hover + small labels, readable on ivory */
  --sage:#A7B59E;           /* Sage Green */
  --sage-soft:#E4E9DD;      /* soft sage — large section washes (keeps text readable) */
  --paper:#F6F3EC;          /* Warm Ivory — primary background */
  --paper-2:#ECE8DC;        /* subtle warm off-white — cards, gradients, image frames */
  --line:#E0DAC9;           /* warm hairline */
  --white:#fff;
  --alert:#8E2A2A;          /* safety red — 911/crisis, deliberately not re-branded */

  --arch: 50% 50% 5px 5px / 40% 40% 5px 5px;   /* doorway — images only */
  --arch-sm: 50% 50% 4px 4px / 42% 42% 4px 4px;  /* doorway — logo mark only */
  --r: 5px;                                       /* everything else stays flat */

  --wrap:1120px;
  --gutter:clamp(20px,5vw,48px);

  --f-display:"Fraunces",Georgia,"Times New Roman",serif;
  /* Client brand decision: the logo face (Fraunces) is used sitewide, for
     body copy as well as headings. Point this back at a sans stack to undo. */
  --f-body:"Fraunces",Georgia,"Times New Roman",serif;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:var(--f-body);
  font-size:1.1875rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

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

h1,h2,h3,h4{
  font-family:var(--f-display);
  color:var(--navy);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.012em;
  margin:0 0 .5em;
  font-variation-settings:"SOFT" 20,"WONK" 0;
}
h1{font-size:clamp(1.5rem,2.6vw,1.95rem)}
h2{font-size:clamp(1.5rem,2.6vw,1.95rem)}
h3{font-size:clamp(1.3rem,2.1vw,1.6rem)}
p{margin:0 0 1.1em}
a{color:var(--navy);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--green-deep)}

:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:3px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:680px}
.center{text-align:center}

/* ---------- skip + safety strip ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--navy);color:#fff;padding:12px 20px;
}
.skip:focus{left:0}

.safety-strip{
  background:var(--navy-deep);color:#E4EDEA;
  font-size:.875rem;line-height:1.5;
  padding:9px 0;
}
.safety-strip p{margin:0}
.safety-strip strong{color:#fff}
.safety-strip a{color:var(--gold);font-weight:700;text-decoration:none;white-space:nowrap}
.safety-strip a:hover{color:#fff;text-decoration:underline}
.sep{opacity:.45;padding:0 .45em}

/* ---------- header ---------- */
.site-header{
  background:var(--paper);border-bottom:1px solid var(--line);
  position:relative;z-index:60;
}
.header-inner{
  display:flex;align-items:center;gap:24px;
  padding-block:14px;
}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
/* brand icon (house + tree) shown beside the KIP wordmark */
.logo-mark-img{height:52px;width:auto;display:block;flex-shrink:0}
@media (max-width:560px){.logo-mark-img{height:44px}}
.logo-mark{
  width:38px;height:38px;flex-shrink:0;
  background:var(--navy);color:var(--gold);
  border-radius:var(--arch-sm);
  display:grid;place-items:center;
  font-family:var(--f-display);font-weight:700;font-size:.95rem;letter-spacing:.02em;
}
.logo-text{font-family:var(--f-display);font-weight:600;color:var(--navy);font-size:1.05rem;line-height:1.1}
.logo-text span{display:block;font-family:var(--f-body);font-weight:700;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-deep);margin-top:2px}

.site-nav{margin-left:auto}
.site-nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.site-nav a{
  font-size:1rem;font-weight:500;color:var(--ink);
  text-decoration:none;padding-block:6px;border-bottom:2px solid transparent;
}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--navy);border-bottom-color:var(--gold)}
.site-nav a[aria-current="page"]{font-weight:700}

/* the phone number is treated as signage — it is the front door */
.header-phone{
  text-align:right;flex-shrink:0;text-decoration:none;
  padding-left:24px;border-left:1px solid var(--line);
}
.header-phone .lbl{
  display:block;font-size:.875rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:700;margin-bottom:1px;
}
.header-phone .num{
  display:block;font-family:var(--f-display);font-weight:600;
  font-size:1.3rem;color:var(--navy);line-height:1.05;
}
.header-phone:hover .num{color:var(--green-deep)}

.nav-toggle{display:none}
.nav-toggle svg{width:24px;height:24px;display:block}
.nav-toggle .i-close{display:none}
.nav-toggle[aria-expanded="true"] .i-open{display:none}
.nav-toggle[aria-expanded="true"] .i-close{display:block}

/* ---------- sections ---------- */
main{display:block}
section{padding-block:clamp(48px,7vw,84px)}
section.tight{padding-block:clamp(34px,4.5vw,52px)}
.band-paper2{background:var(--sage-soft)}
.band-navy{background:var(--navy);color:#D3E0DC}
.band-navy h2,.band-navy h3{color:#fff}
.band-navy a:not(.btn){color:var(--gold)}

/* Section headings. Most eyebrows ARE the heading for their section — they sit
   above a card grid, or above a smaller supporting line — so they carry heading
   weight. The one exception is the page-top kicker (an eyebrow directly above
   the h1), which keeps the small uppercase label treatment. */
.eyebrow{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.55rem,2.7vw,2rem);line-height:1.15;letter-spacing:-.012em;
  text-transform:none;color:var(--gold-deep);margin:0 0 .45em;
  font-variation-settings:"SOFT" 20,"WONK" 0;
}
.eyebrow:has(+ h1){
  font-family:var(--f-body);font-weight:700;
  font-size:clamp(1.55rem,2.7vw,2rem);line-height:1.15;letter-spacing:.02em;
  text-transform:uppercase;color:var(--gold-deep);margin:0 0 .35em;
  font-variation-settings:normal;
}
.band-navy .eyebrow{color:#fff}
.band-navy .eyebrow:has(+ h1){color:var(--gold)}
/* The line beneath a section heading is supporting copy, not the heading. */
.eyebrow + h2{font-size:clamp(1.2rem,2vw,1.5rem);color:var(--ink);margin:0 0 .55em}
.band-navy .eyebrow + h2{color:#fff}
.lede{font-size:clamp(1.2rem,2.1vw,1.45rem);line-height:1.6;color:var(--ink)}
.lede-sm{font-size:1.15rem;color:var(--gold-deep);margin:0 0 .6em}

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
  padding-block:clamp(44px,6.5vw,80px);
}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:center}
/* The homepage hero title is the one h1 that stays display-sized. */
.hero h1{font-size:clamp(2.1rem,5vw,3.4rem);margin-bottom:.35em}
.hero .lede{max-width:34ch}

.hero-call{
  display:inline-flex;flex-direction:column;gap:2px;
  text-decoration:none;margin:6px 0 18px;
  padding:16px 26px;background:var(--white);
  border:2px solid var(--navy);border-radius:var(--r);
}
.hero-call .lbl{font-size:10.5pt;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep);font-weight:700;line-height:1.15}
.hero-call .num{font-family:var(--f-display);font-size:clamp(1.1rem,1.8vw,1.6rem);font-weight:600;color:var(--navy);line-height:1.05}
.hero-call:hover{background:var(--navy)}
.hero-call:hover .num{color:#fff}
.hero-call:hover .lbl{color:var(--gold)}

.reassure{
  display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:0 0 4px;padding:0;
  font-size:1rem;font-weight:600;color:var(--green-deep);
}
.reassure li{display:flex;align-items:center;gap:7px}
.reassure li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--f-body);font-weight:700;font-size:1.0625rem;
  padding:14px 26px;border-radius:4px;text-decoration:none;border:2px solid transparent;
  cursor:pointer;line-height:1.2;
}
/* Primary CTA — Dusty Rose fill; the one warm "highlight" moment. Reads on
   both the ivory pages and the deep-teal bands it sits inside. */
.btn-primary{background:var(--gold);color:#3E2A2B;border-color:var(--gold)}
.btn-primary:hover{background:var(--gold-deep);color:#fff;border-color:var(--gold-deep)}
.btn-navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-navy:hover{background:var(--navy-deep);color:#fff}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}

/* ---------- image placeholders (arch = doorway) ---------- */
.img-slot{
  position:relative;background:var(--paper-2);
  border:2px dashed #BFAF88;border-radius:var(--arch);
  display:grid;place-items:center;text-align:center;
  padding:28% 22px 28px;min-height:300px;overflow:hidden;
}
.img-slot.rect{border-radius:var(--r);min-height:200px;padding:24px 22px}
.img-slot .slot-inner{max-width:34ch}
.img-slot .slot-icon{
  font-family:var(--f-display);font-size:1.6rem;color:var(--gold-deep);
  display:block;margin-bottom:8px;
}
.img-slot .slot-name{
  display:block;font-weight:700;color:var(--navy);font-size:.9375rem;
  word-break:break-word;margin-bottom:4px;
}
.img-slot .slot-meta{display:block;font-size:.8125rem;color:#7A705C;line-height:1.45}
.img-slot.tall{min-height:400px}
.img-slot.wide{min-height:320px}
.img-slot.portrait{min-height:240px;padding:34% 14px 18px}
.img-slot.portrait .slot-name{font-size:.8125rem}
.img-slot.portrait .slot-meta{font-size:.75rem}

/* ---------- cards ---------- */
.grid{display:grid;gap:22px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.door{
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:30px 26px 26px;
  display:flex;flex-direction:column;
  border-top:4px solid var(--gold);
}
.door h3{margin-bottom:.35em}
.door p{font-size:1.05rem;margin-bottom:1.2em}
.door .go{
  margin-top:auto;font-weight:700;color:var(--navy);text-decoration:none;
  font-size:.9375rem;
}
.door .go::after{content:" →"}
.door .go:hover{color:var(--green-deep)}
.door:hover{border-color:#CFC5AE}

.pcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px}
.pcard h3{color:var(--navy);margin-bottom:.3em}
.pcard p:last-child{margin-bottom:0}

/* ---------- steps / lists ---------- */
.plain-list{list-style:none;margin:0 0 1.2em;padding:0}
.plain-list li{position:relative;padding-left:26px;margin-bottom:.6em}
.plain-list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:9px;height:9px;border-radius:50%;background:var(--gold);
}
.check-list li::before{background:var(--green)}

.numbered{counter-reset:s;list-style:none;margin:0 0 1.2em;padding:0}
.numbered li{counter-increment:s;position:relative;padding-left:44px;margin-bottom:.9em}
.numbered li::before{
  content:counter(s);position:absolute;left:0;top:-1px;
  width:30px;height:30px;border-radius:50%;
  background:var(--navy);color:var(--gold);
  font-family:var(--f-display);font-weight:600;font-size:.9rem;
  display:grid;place-items:center;
}

/* ---------- callouts ---------- */
.callout{
  background:var(--white);border:1px solid var(--line);border-left:5px solid var(--gold);
  border-radius:4px;padding:22px 24px;margin:0 0 1.4em;
}
.callout p:last-child{margin-bottom:0}
.callout h3{font-size:1.3rem;margin-bottom:.35em}
.callout.green{border-left-color:var(--green)}
.callout.alert{border-left-color:var(--alert);background:#FDF6F4}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;
  font-family:var(--f-display);font-size:clamp(1.2rem,2.2vw,1.45rem);
  font-weight:700;color:var(--navy);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-family:var(--f-body);font-size:1.5rem;font-weight:400;color:var(--gold-deep);line-height:1;
}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--green-deep)}
.faq .answer{padding:0 0 22px;max-width:70ch}
.faq .answer p:last-child{margin-bottom:0}

/* ---------- team ---------- */
/* ---------- founders ---------- */
.founders{grid-template-columns:repeat(2,1fr);gap:20px}
.person{
  display:flex;gap:20px;align-items:flex-start;height:100%;
  text-align:left;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);
  padding:26px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.person::before{
  /* slim brand rule down the side */
  content:"";align-self:stretch;flex:0 0 3px;border-radius:3px;
  background:linear-gradient(var(--navy),var(--sage));
}
.person:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(31,77,79,.10);
  border-color:#CFE0D9;
}
.person-avatar{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:60px;height:60px;
  background:var(--navy);color:var(--paper);
  font-family:var(--f-display);font-weight:600;font-size:1.2rem;letter-spacing:.01em;
  border-radius:var(--arch-sm);            /* doorway motif, from the KIP logo */
}
.person-body{min-width:0}
.person h3{font-size:1.12rem;margin-bottom:.15em}
.person .role{
  font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:700;margin:0 0 .7em;
}
.person p{font-size:.9375rem}
.person p:last-child{margin-bottom:0}

/* ---------- forms ---------- */
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,4vw,38px);max-width:680px}
.field{margin-bottom:20px}
.field label{display:block;font-weight:700;color:var(--ink);margin-bottom:6px;font-size:1rem}
.field .hint{display:block;font-weight:400;color:#6A6F7A;font-size:.9375rem;margin-top:2px}
.field input[type=text],.field input[type=email],.field select,.field textarea{
  width:100%;padding:12px 14px;font-family:var(--f-body);font-size:1.0625rem;
  border:2px solid #D6CDBA;border-radius:4px;background:var(--paper);color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);outline:none}
.field textarea{min-height:110px;resize:vertical}
.radio-row{display:flex;gap:20px;margin-top:6px}
.radio-row label{display:flex;align-items:center;gap:7px;font-weight:400}

/* checkbox + radio controls — custom-drawn so they carry the brand */
.radio-row label{
  padding:9px 14px;border:1.5px solid var(--line);border-radius:var(--r);
  background:var(--white);cursor:pointer;line-height:1.3;
  transition:border-color .15s ease,background-color .15s ease;
}
.radio-row label:hover{border-color:var(--green-deep);background:var(--paper)}
.radio-row label:has(input:checked){border-color:var(--navy);background:var(--sage-soft)}
.radio-row input[type=checkbox],.radio-row input[type=radio]{
  appearance:none;-webkit-appearance:none;margin:0;flex:0 0 auto;
  width:20px;height:20px;border:2px solid #B9AF9A;border-radius:4px;
  background:var(--white);display:grid;place-content:center;cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease;
}
.radio-row input[type=radio]{border-radius:50%}
.radio-row input[type=checkbox]::before,.radio-row input[type=radio]::before{
  content:"";background:var(--white);transform:scale(0);
  transition:transform .12s ease-in-out;
}
.radio-row input[type=checkbox]::before{
  width:12px;height:12px;
  clip-path:polygon(14% 44%,0 59%,38% 100%,100% 22%,84% 7%,38% 68%);
}
.radio-row input[type=radio]::before{width:9px;height:9px;border-radius:50%}
.radio-row input:checked{background:var(--navy);border-color:var(--navy)}
.radio-row input:checked::before{transform:scale(1)}
.radio-row input:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .radio-row label,.radio-row input,.radio-row input::before{transition:none}
}

/* ---------- placeholder text token ---------- */
.ph{
  background:#FFF3B0;color:#5C4A00;font-weight:700;
  padding:1px 7px;border-radius:3px;font-size:.9em;
  border:1px dashed #D4B72E;overflow-wrap:break-word;
}
.ph-block{
  display:block;background:#FFF9DB;border:1px dashed #D4B72E;
  color:#5C4A00;padding:14px 16px;border-radius:4px;margin:0 0 1.2em;
  font-size:.9375rem;line-height:1.55;white-space:normal;
}
.ph-block strong{color:#4A3B00}

/* ---------- footer ---------- */
.site-footer{background:var(--navy);color:#CBD8D3;padding-block:52px 30px;font-size:1rem}
.site-footer h4{
  font-family:var(--f-body);font-size:1.15rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold);margin:0 0 .9em;font-weight:700;
}
.site-footer a{color:#DDE7E3;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px}
.footer-grid ul{list-style:none;margin:0;padding:0}
.footer-grid li{margin-bottom:.55em}
.footer-brand .logo-text{color:#fff}
.footer-brand .logo-mark{background:var(--gold);color:var(--navy)}
.footer-tag{font-family:var(--f-display);font-size:1.15rem;color:#fff;margin:12px 0 6px}
/* footer brand: name + motto lockup, centred, sits transparently on navy.
   Uses the display face so it matches the header logo wordmark. */
.footer-brandlink{display:block;text-align:center;text-decoration:none}
.footer-wordmark{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--f-display);font-weight:600;text-transform:none;
  letter-spacing:.01em;font-size:clamp(1rem,2.2vw,1.15rem);color:#ECE6D7;line-height:1.2;
}
.footer-wordmark::before,.footer-wordmark::after{
  content:"";flex:0 0 20px;height:2px;border-radius:2px;background:var(--sage);opacity:.75;
}
.footer-brandlink:hover .footer-wordmark{color:#fff}
.footer-motto{text-align:center;
  text-transform:uppercase;letter-spacing:.02em;font-weight:700;
  font-size:.65rem;line-height:1.65;margin:14px 0 4px;
}
/* Each phrase stays whole: the line breaks between them, never inside one. */
.footer-motto span{display:inline-block;white-space:nowrap}
.footer-motto .c1{color:#9FD3C7}
.footer-motto .c2{color:#B9C6AF}
.footer-motto .c3{color:#DDA9AB}
.footer-help{
  background:rgba(255,255,255,.07);border-left:3px solid var(--gold);
  padding:14px 16px;border-radius:4px;margin-top:20px;font-size:.875rem;line-height:1.55;
}
.footer-help a{color:var(--gold);font-weight:700;white-space:nowrap}
.land{
  border-top:1px solid rgba(255,255,255,.16);margin-top:38px;padding-top:22px;
  font-size:.8125rem;line-height:1.6;color:#A7B8B3;
}
.legal{
  border-top:1px solid rgba(255,255,255,.16);margin-top:20px;padding-top:18px;
  font-size:.8125rem;color:#A7B8B3;display:flex;flex-wrap:wrap;gap:6px 0;
}
/* dot separators between the bottom legal items */
.legal>span+span::before{content:"·";padding:0 12px;color:#6E817C}

/* ---------- utility ---------- */
.mt0{margin-top:0}
.mb0{margin-bottom:0}
.stack>*+*{margin-top:1.1em}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
}
/* Header collapses to a menu button *before* the horizontal nav can crowd the
   phone number. This covers iPads (portrait and landscape) and small laptops,
   where six links + logo + phone would otherwise overflow or wrap awkwardly. */
@media (max-width:1080px){
  /* header sticks to the top on tablets/phones so the menu + phone are always reachable */
  .site-header{position:sticky;top:0;transition:box-shadow .2s ease}
  .site-header.stuck{box-shadow:0 3px 14px rgba(31,77,79,.12)}
  .nav-toggle{
    display:grid;place-items:center;margin-left:auto;
    width:44px;height:44px;background:var(--navy);color:#fff;
    border:none;border-radius:8px;cursor:pointer;order:2;
  }
  .nav-toggle:hover{background:var(--navy-deep)}
  .header-inner{flex-wrap:wrap;gap:12px}
  .logo{flex:1 1 auto;min-width:0}
  .site-nav{
    margin-left:0;order:5;flex-basis:100%;display:none;
    border-top:1px solid var(--line);padding-top:6px;margin-top:0;
  }
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column;gap:0}
  .site-nav a{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
  /* phone gets its own full-width row so it is never clipped */
  .header-phone{
    order:3;flex-basis:100%;margin-left:0;text-align:center;
    padding:12px 0 4px;border-left:none;border-top:1px solid var(--line);
    overflow:hidden;max-height:70px;opacity:1;
    transition:max-height .28s ease,opacity .2s ease,padding .28s ease;
  }
  .header-phone .num{font-size:1.6rem}
  /* once the header is pinned, collapse the phone row smoothly so the sticky
     bar stays slim; it eases back open when scrolled to the top */
  .site-header.stuck .header-phone{
    max-height:0;opacity:0;padding-top:0;padding-bottom:0;border-top-color:transparent;
  }
}
@media (max-width:1080px) and (prefers-reduced-motion:reduce){
  .header-phone{transition:none}
}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero .img-slot{min-height:260px}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .founders{grid-template-columns:1fr}
}
@media (max-width:560px){
  .grid-4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}
/* Very small phones: keep the logo wordmark from overflowing the header. */
@media (max-width:380px){
  .logo-text{font-size:.95rem}
  .header-phone .num{font-size:1.4rem}
}

/* Large screens (big monitors, 4K, TVs): scale the whole UI up proportionally
   so text and spacing don't shrink into an unreadable strip in the middle. */
@media (min-width:1600px){
  html{font-size:106.25%}         /* ~17px base */
  :root{--wrap:1280px}
}
@media (min-width:2400px){
  html{font-size:112.5%}          /* ~18px base */
  :root{--wrap:1400px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

@media print{
  .safety-strip,.site-nav{display:none}
}

/* ---------- filled images (keeps the arch once a real photo is added) ---- */
.img-slot-filled{
  width:100%;border-radius:var(--arch);object-fit:cover;display:block;
}
.img-slot-filled.rect{border-radius:var(--r);aspect-ratio:5/3}
.img-slot-filled.tall{aspect-ratio:9/11}
.img-slot-filled.wide{aspect-ratio:21/9}
.img-slot-filled.portrait{aspect-ratio:1/1;margin-bottom:14px}

/* ---------- programs: full-width rows (image left, text right) ---------- */
/* Below 900px each card falls back to the stacked image-over-text layout. */
@media (min-width:900px){
  .program-rows .pcard{
    display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);
    column-gap:32px;align-items:center;
  }
  .program-rows .pcard > img{margin-bottom:0!important}
}
.pcard-body > :last-child{margin-bottom:0}



/* ---------- about: banner as a section background ---------- */
/* The about banner sits behind the "Our purpose" copy, filling the whole
   section and washed back so the text stays readable on top of it. */
.about-hero{
  position:relative;
  background-image:url("images/about-banner.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:#D9E2DF;
}
/* Black overlay: darkens the photo so the copy reads cleanly on top of it. */
.about-hero::before{
  content:"";position:absolute;inset:0;
  background:rgba(0,0,0,.8);
  pointer-events:none;
}
.about-hero > .wrap{position:relative;z-index:1}
.about-hero h1{color:#fff}
/* --gold is too dark over the photo (2.5:1); the soft tint keeps the pink
   identity and clears AA at 5.2:1. */
.about-hero .eyebrow{color:var(--gold-soft)}
.about-hero .lede{color:#EAF0EE}

/* Founders statement: a long pull-quote, set apart with the same left rule
   the callouts use. */
.founders-quote{
  margin:0;padding:4px 0 4px 22px;
  border-left:3px solid var(--sage);
}
.founders-quote p{font-size:1.05rem;line-height:1.7}

/* ---------- nav submenu ("Get involved") ---------- */
.site-nav .has-sub{position:relative}
.site-nav .subnav{
  display:none;position:absolute;top:100%;left:0;z-index:60;
  flex-direction:column;gap:0;min-width:190px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:6px 0;box-shadow:0 8px 22px rgba(31,77,79,.14);
}
/* opens on hover, and on keyboard focus so it is reachable without a mouse */
.site-nav .has-sub:hover > .subnav,
.site-nav .has-sub:focus-within > .subnav{display:flex}
.site-nav .subnav a{
  display:block;padding:9px 16px;font-size:.95rem;
  white-space:nowrap;border-bottom:none;
}
.site-nav .subnav a:hover{color:var(--navy);background:var(--paper-2);border-bottom-color:transparent}

/* In the mobile menu there is no hover, so the two links simply sit
   indented under their parent. */
@media (max-width:1080px){
  .site-nav .subnav{
    display:flex;position:static;min-width:0;
    background:transparent;border:none;box-shadow:none;
    padding:0 0 0 16px;
  }
  .site-nav .subnav a{padding:11px 0;font-size:1rem;border-bottom:1px solid var(--line)}
}

/* ---------- pull quote ---------- */
/* A closing line for a page: a small sage rule with a rose diamond on it,
   then the quote set large in the display face. */
.quote-section{padding-block:clamp(38px,5vw,60px)}
.pullquote{margin:0 auto;text-align:center}
.quote-rule{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:24px}
.quote-rule::before,.quote-rule::after{
  content:"";width:64px;height:1px;background:var(--sage);
}
.quote-rule span{
  width:9px;height:9px;flex:0 0 9px;
  background:var(--gold);border-radius:2px;transform:rotate(45deg);
}
.pullquote blockquote{margin:0}
.pullquote p{
  margin:0;font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.05rem,2.3vw,1.7rem);line-height:1.45;
  letter-spacing:-.01em;color:var(--navy);
  font-variation-settings:"SOFT" 30,"WONK" 1;
}
/* on the dark band the quote and its rule invert */
.band-navy .pullquote p{color:#fff}
.band-navy .quote-rule::before,.band-navy .quote-rule::after{background:rgba(255,255,255,.35)}


/* ---------- media row: image left, copy right ---------- */
/* Keeps the photo in the reading flow instead of floating centred, and
   fills the space beside it with the section's opening copy. */
.media-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:34px;align-items:stretch;margin:26px 0;
}
/* The photo takes its height from the copy beside it, so neither column is
   left with dead space. min-height keeps it from going letterbox-thin. */
.media-row > img{
  width:100%;height:100%;min-height:300px;display:block;
  object-fit:cover;object-position:center;
  border-radius:var(--r);
  box-shadow:0 14px 30px -14px rgba(31,77,79,.42);
}
.media-row > img.tall-crop{object-position:center 38%}
.media-row > div > :last-child{margin-bottom:0}
@media (max-width:860px){
  .media-row{grid-template-columns:1fr;gap:20px}
  .media-row > img,.media-row > img.tall-crop{height:auto;aspect-ratio:16/10;min-height:0}
}

/* Honeypot field for the Netlify forms — hidden from people, visible to bots. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}