/* ==========================================================================
   The Milk Bank: Buyer's Journey build
   Stylesheet v2, matched to themilkbank.org

   HOW TO RESTYLE THE WHOLE SITE
   Every color, typeface and radius is declared once in :root below. Change a
   value there and all pages update. Nothing else in this file needs editing.

   SOURCING OF THESE VALUES
   [CONFIRMED]  read directly from themilkbank.org
   [INFERRED]   best match, needs replacing with the real brand value
   ========================================================================== */

:root{

  /* --- Color ------------------------------------------------------------
     [CONFIRMED] TMB Blue #003659 and TMB Magenta #A10082 are from the
     supplied 2021 Brand Guide. DMX Purple #7C277D and Baby Cafe Teal
     #47C2C0 are approved secondary/program colors and are used sparingly. */

  --ground:      #f7f9fa;   /* [CONFIRMED] live site theme-color            */
  --paper:       #ffffff;
  --ground-alt:  #eef5f7;

  --indigo:      #003659;   /* [SAMPLED] utility bar, footer                */
  --indigo-deep: #002640;

  --blue:        #003659;   /* [SAMPLED] the logo blue, headings           */
  --blue-deep:   #002b48;
  --blue-wash:   #e8f1f5;

  --magenta:     #A10082;   /* [SAMPLED] primary call to action             */
  --magenta-deep:#7d0065;
  --magenta-wash:#f8eaf4;

  --teal:        #47C2C0;   /* [SAMPLED] eyebrows and accents               */
  --teal-deep:   #287f7e;
  --teal-wash:   #eaf8f7;

  --plum:        #7C277D;   /* [SAMPLED] third utility pill                 */

  --ink:         #2a2e33;
  --ink-soft:    #5a6169;
  --ink-faint:   #868e96;
  --rule:        #e0e4e8;
  --rule-strong: #c6ced6;

  --clinical:    #b23a48;   /* hospital cost / risk figures only            */
  --clinical-wash:#fbeced;
  --good:        #2e8b6f;

  /* --- Hero image -------------------------------------------------------
     Drop the approved hero photo at assets/img/hero.jpg and this is the
     only line that needs to change. Until then a brand gradient stands in. */

  /* Fallback only. The live hero uses a photograph; see .hero. */
  --hero-image: linear-gradient(120deg, #26206b 0%, #63277b 45%, #9b2a8c 100%);

  /* Hero photograph, from The Milk Bank's own homepage. The wash that keeps the
     headline legible lives on .hero::before, so tune the stops there. */

  /* --- Type -------------------------------------------------------------
     [SAMPLED] The live site sets headings in a geometric sans with a
     double-storey 'a'. Montserrat is the closest match. Replace if the
     brand guide names a different face. */

  --display: "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
  --body:    "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif;

  /* --- Shape and rhythm -------------------------------------------------
     [CONFIRMED] the live site is soft: rounded buttons, rounded cards. */

  --radius:    10px;
  --radius-lg: 16px;
  --pill:      999px;
  --shadow:    0 2px 14px rgba(42,46,51,.07);
  --shadow-lg: 0 6px 28px rgba(42,46,51,.10);

  --measure: 68ch;
  --shell:   1180px;
  --gutter:  clamp(20px, 5vw, 44px);
  --step:    clamp(30px, 4.5vw, 52px);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

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

a{ color:var(--blue-deep); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover{ color:var(--magenta-deep); }
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:3px solid var(--magenta); outline-offset:3px; border-radius:3px;
}

.shell{ max-width:var(--shell); margin:0 auto; padding-left:22px; padding-right:22px; padding-left:var(--gutter); padding-right:var(--gutter); }
.measure{ max-width:var(--measure); }

.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:12px; top:12px; z-index:99; background:var(--blue); color:#fff; padding:10px 16px; border-radius:var(--radius); }

/* ==========================================================================
   Utility bar + masthead   [CONFIRMED structure from live site]
   ========================================================================== */

.utility{ background:var(--indigo); }
.utility .shell{ display:flex; justify-content:flex-end; align-items:center; gap:14px; flex-wrap:wrap; padding-top:12px; padding-bottom:12px; }
.utility a{
  color:#fff; text-decoration:none; font-family:var(--display);
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:9px 22px; border-radius:var(--pill); background:var(--magenta);
  transition:filter .15s ease;
}
.utility a:nth-child(2){ background:#fff; color:var(--blue); }
.utility a:nth-child(3){ background:var(--magenta); }
.utility a:hover{ filter:brightness(1.12); color:#fff; }
.utility a:nth-child(2):hover,
.utility a:nth-child(2):focus-visible{ color:var(--magenta); filter:none; }
@media (max-width:620px){
  .utility .shell{ justify-content:center; gap:10px; }
  .utility a{ padding:8px 16px; font-size:11px; }
}

.masthead{ background:var(--paper); box-shadow:var(--shadow); position:sticky; top:0; z-index:40; }
.masthead__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:104px; }

.logo img{ height:72px; width:auto; display:block; }
.logo{ display:block; text-decoration:none; }
/* Between the mobile breakpoint and roughly 1200px the nav is at its tightest,
   so the logo steps down to keep them from colliding. */
@media (min-width:961px) and (max-width:1200px){
  .logo img{ height:60px; }
  .masthead__inner{ min-height:92px; }
}
/* Fallback wordmark if the logo image is unavailable */
.wordmark{ font-family:var(--display); font-size:23px; font-weight:700; color:var(--blue); text-decoration:none; line-height:1.1; }
.wordmark span{ display:block; font-size:10px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--magenta); margin-top:3px; }

.nav{ display:flex; align-items:center; gap:26px; }
.nav a{
  font-family:var(--display); font-size:14px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink); text-decoration:none;
  padding:8px 0; border-bottom:3px solid transparent; white-space:nowrap;
}
.nav a:hover{ color:var(--blue); border-bottom-color:var(--magenta); }
.nav a[aria-current="true"]{ color:var(--blue); border-bottom-color:var(--blue); }

/* --- Dropdown (Milk Donors) -------------------------------------------
   CSS-only: opens on hover and keyboard focus at desktop, becomes an
   indented list in the stacked mobile menu. No JavaScript. */
.nav .nav__item{ position:relative; display:inline-flex; align-items:center; padding:0; border:none; }
.nav .nav__item > a{ display:inline-flex; align-items:center; }
.nav .nav__item > a::after{
  content:""; width:7px; height:7px; margin-left:8px; flex:none;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px); opacity:.55; transition:transform .15s ease;
}
.nav .nav__item::after{ content:""; position:absolute; top:100%; left:0; width:100%; height:14px; display:none; }
.nav .nav__item:hover::after,
.nav .nav__item:focus-within::after{ display:block; }
.nav .nav__menu{
  position:absolute; top:calc(100% + 14px); left:0; z-index:60;
  width:300px; display:block;
  background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow-lg);
  padding:8px;
  opacity:0; visibility:hidden; transform:translateY(6px); pointer-events:none;
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
}
/* The two right-hand dropdowns would run past the viewport on narrower desktop
   widths, so they open leftwards from their own right edge. */
.nav .nav__item:nth-last-child(-n+2) .nav__menu{ left:auto; right:0; }

.nav .nav__item:hover .nav__menu,
.nav .nav__item:focus-within .nav__menu{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
.nav .nav__item:hover > a::after,
.nav .nav__item:focus-within > a::after{ transform:rotate(45deg) translateY(1px); }
.nav .nav__menu a{
  display:block; padding:11px 14px; margin:0; border-radius:6px;
  border-bottom:none; white-space:normal; text-transform:none; letter-spacing:0;
  font-family:var(--display); font-size:14px; font-weight:700; line-height:1.3; color:var(--ink);
}
.nav .nav__menu a small{ display:block; font-weight:400; font-size:12px; color:var(--ink-faint); margin-top:3px; }
.nav .nav__menu a:hover{ color:var(--blue-deep); background:var(--blue-wash); border-bottom:none; }
.nav .nav__menu a[aria-current="true"]{ background:var(--teal-wash); color:var(--blue-deep); }

/* The mobile accordion buttons are injected by site.js on every viewport, so
   they are hidden by default here and only revealed inside the mobile media
   query below. Without this they render as unstyled default buttons in the
   desktop nav. */
.nav__disclosure{ display:none; }

.nav-toggle{
  display:none; background:var(--blue); border:none; border-radius:var(--pill);
  font-family:var(--display); font-size:12px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:#fff; padding:11px 18px; cursor:pointer;
}
@media (max-width:960px){
  /* Keep the main actions in the header, with comfortable touch targets. */
  .utility .shell{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding-top:8px; padding-bottom:8px; }
  .utility a{ display:flex; align-items:center; justify-content:center; min-height:44px; padding:6px 8px; font-size:11px; line-height:1.25; letter-spacing:.055em; text-align:center; }
  .masthead__inner{ min-height:80px; gap:8px; padding-top:10px; padding-bottom:10px; }
  .masthead__inner > .logo{ margin-right:auto; min-width:0; }
  .nav-toggle{ display:block; flex:none; min-width:72px; min-height:44px; padding:10px 13px; }
  .nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); box-shadow:var(--shadow-lg);
    padding:0 var(--gutter) calc(16px + env(safe-area-inset-bottom,0px));
    max-height:calc(100vh - 80px);
    max-height:var(--mobile-nav-max-height,calc(100dvh - 80px));
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  }
  .nav[data-open="true"]{ display:flex; }
  .nav a{ padding:15px 0; border-bottom:1px solid var(--rule); }
  .logo img{ height:50px; }

  /* On mobile each section is a collapsed accordion. The sub-links only
     appear once the section heading is tapped, so the menu opens as six
     readable rows rather than a wall of every link on the site.
     Note the default here is OPEN: if the script fails to run, every link is
     still reachable. The script adds data-collapsed to close them. */
  .nav .nav__item{ display:block; position:relative; flex:none; width:100%; border-bottom:1px solid var(--rule); }
  .nav .nav__item > a{ display:flex; width:100%; min-height:52px; padding:14px 52px 14px 0; border-bottom:0; white-space:normal; line-height:1.5; }
  .nav .nav__item::after{ display:none; }
  .nav .nav__menu{
    position:static; width:auto; opacity:1; visibility:visible; transform:none;
    pointer-events:auto; box-shadow:none; background:transparent; border-radius:0;
    padding:0 0 8px 16px;
  }
  .nav .nav__item[data-collapsed="true"] .nav__menu{ display:none; }
  .nav .nav__menu a{ padding:12px 0; border-bottom:1px solid var(--rule); }
  .nav .nav__menu a small{ display:none; }

  /* The section heading carries its own disclosure control. */
  .nav .nav__item > a::after{ display:none; }
  .nav__disclosure{
    display:flex;
    position:absolute; top:0; right:0; width:52px; height:52px;
    background:none; border:none; padding:0; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .nav__disclosure::before{
    content:""; width:9px; height:9px;
    border-right:2px solid var(--blue); border-bottom:2px solid var(--blue);
    transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .18s ease;
  }
  .nav__item[data-collapsed="false"] .nav__disclosure::before{
    transform:rotate(225deg) translate(-3px,-3px);
  }
  .nav__disclosure:focus-visible{ outline:2px solid var(--blue); outline-offset:-4px; }
}

/* ==========================================================================
   Headings   [CONFIRMED pattern] small uppercase eyebrow, then a big bold
   heading. The live site uses this on every single section.
   ========================================================================== */

h1,h2,h3{ font-family:var(--display); font-weight:700; letter-spacing:-.015em; line-height:1.2; margin:0; color:var(--blue-deep); }
h4{ font-family:var(--display); font-size:13px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 10px; }

h1{ font-size:clamp(31px, 4.8vw, 48px); max-width:21ch; }
h1.wide{ max-width:27ch; }
h2{ font-size:clamp(25px, 3.3vw, 36px); margin-top:calc(var(--step) * .9); margin-bottom:14px; }
h3{ font-size:clamp(19px, 2.2vw, 23px); margin-top:calc(var(--step) * .7); margin-bottom:10px; }

.eyebrow{
  font-family:var(--display); font-size:14px; font-weight:700;
  letter-spacing:.11em; text-transform:lowercase; color:var(--magenta);
  margin:0 0 12px;
}
.eyebrow--blue{ color:var(--blue); }

.standfirst{ font-size:clamp(18px, 2.1vw, 21px); line-height:1.6; color:var(--ink-soft); margin:20px 0 0; max-width:56ch; }
.standfirst em{ font-style:italic; color:var(--blue); font-weight:600; }

/* ==========================================================================
   Article body
   ========================================================================== */

.pagehead{ background:var(--paper); padding:calc(var(--step) * 1.2) 0 var(--step); border-bottom:4px solid var(--magenta); }
.article{ padding:var(--step) 0 calc(var(--step) * 1.5); }
.article p,.article ul,.article ol{ max-width:var(--measure); }
.article p{ margin:0 0 1.05em; }
.article strong{ font-weight:700; color:var(--ink); }

.article ul,.article ol{ padding-left:1.2em; margin:0 0 1.3em; }
.article li{ margin-bottom:.6em; }
.article ul{ list-style:none; padding-left:0; }
.article ul li{ position:relative; padding-left:1.7em; }
.article ul li::before{
  content:""; position:absolute; left:.15em; top:.62em;
  width:8px; height:8px; border-radius:50%; background:var(--magenta);
}

.lede{ font-size:19.5px; line-height:1.65; color:var(--ink); }

/* ==========================================================================
   Stat block   [CONFIRMED pattern] icon, big number, italic caption.
   The icon URLs are the live site's own SVGs.
   ========================================================================== */

.stats{ display:grid; gap:26px; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); margin:var(--step) 0 0; }
.stat{ text-align:center; }
.stat img{ height:66px; width:auto; margin:0 auto 16px; }
.stat__fig{ font-family:var(--display); font-size:clamp(31px, 4vw, 42px); font-weight:700; color:var(--blue); line-height:1; margin:0;
  /* Tabular figures keep the digits from jittering while counting up. */
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; display:inline-block; }
.stat__cap{ font-style:italic; font-size:15.5px; color:var(--ink-soft); margin:10px 0 0; }

/* The label device, used where a figure needs a source or a translation */
.label{
  max-width:var(--measure); margin:calc(var(--step) * .8) 0;
  background:var(--paper); border-radius:var(--radius-lg);
  border-left:6px solid var(--magenta); box-shadow:var(--shadow);
  padding:26px 30px;
}
.label__cap{ font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:lowercase; color:var(--magenta); margin:0 0 10px; }
.label__fig{ font-family:var(--display); font-size:clamp(28px, 4vw, 38px); font-weight:700; line-height:1.05; color:var(--blue); margin:0; text-wrap:balance; max-width:22ch; margin-inline:auto; }
.label__note{ font-size:16px; color:var(--ink-soft); margin:12px 0 0; max-width:52ch; }
.label__src{ font-size:13px; font-style:italic; color:var(--ink-faint); margin:12px 0 0; }
.label--clinical{ border-left-color:var(--clinical); }
.label--clinical .label__cap,.label--clinical .label__fig{ color:var(--clinical); }

/* ==========================================================================
   Centred band modifier
   Add class="band band--center" to centre a whole section. Constrained
   children get auto margins so they sit in the middle rather than hugging
   the left edge.
   ========================================================================== */

.band--center{ text-align:center; }
.band--center h2,
.band--center h3,
.band--center p,
.band--center .standfirst,
.band--center .measure{ margin-left:auto; margin-right:auto; }
.band--center .btnrow{ justify-content:center; }

/* In a centred band the label reads better with a rule across the top than
   a bar down one side. */
.band--center .label{
  margin-left:auto; margin-right:auto; text-align:center;
  border-left:none; border-top:6px solid var(--magenta);
}
.band--center .label--clinical{ border-top-color:var(--clinical); }
.band--center .label__note{ margin-left:auto; margin-right:auto; }

/* ==========================================================================
   Callouts, quotes, tables
   ========================================================================== */

.note{
  max-width:var(--measure); margin:calc(var(--step) * .75) 0;
  background:var(--blue-wash); border-radius:var(--radius-lg);
  padding:26px 30px;
}
.note h4{ color:var(--blue); }
.note p:last-child{ margin-bottom:0; }
.note--magenta{ background:var(--magenta-wash); }
.note--magenta h4{ color:var(--magenta-deep); }
.note--clinical{ background:var(--clinical-wash); }
.note--clinical h4{ color:var(--clinical); }

.pull{
  max-width:var(--measure); margin:calc(var(--step) * .85) 0;
  font-family:var(--display); font-size:clamp(21px, 2.7vw, 27px); font-weight:600;
  line-height:1.4; color:var(--blue-deep); border-left:6px solid var(--magenta);
  padding-left:26px;
}

.voice{
  background:var(--paper); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  padding:30px 30px 26px; font-size:19px; line-height:1.55; color:var(--ink); margin:0;
  border-top:5px solid var(--magenta);
}
.voice cite{ display:block; font-family:var(--display); font-size:13px; font-style:normal; font-weight:600; letter-spacing:.06em; color:var(--blue); margin-top:18px; }

.tablewrap{ max-width:var(--measure); overflow-x:auto; margin:calc(var(--step) * .8) 0; background:var(--paper); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:8px 24px 12px; }
table.data{ width:100%; min-width:460px; border-collapse:collapse; font-size:16px; }
table.data caption{ font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:lowercase; color:var(--magenta); text-align:left; padding:16px 0 12px; }
table.data th,table.data td{ text-align:left; padding:13px 16px 13px 0; border-bottom:1px solid var(--rule); vertical-align:top; }
table.data thead th{ font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--blue); border-bottom:2px solid var(--blue); }
table.data tbody th{ font-weight:400; color:var(--ink); }
table.data td.num{ font-family:var(--display); font-weight:700; font-variant-numeric:tabular-nums; }
table.data td.num--good{ color:var(--good); }
table.data td.num--poor{ color:var(--clinical); }

/* ==========================================================================
   Steps
   ========================================================================== */

.steps{ max-width:var(--measure); margin:var(--step) 0; counter-reset:step; padding:0; }
.steps > li{ list-style:none; position:relative; padding:0 0 30px 68px; margin:0; border-left:2px solid var(--rule); margin-left:19px; }
.steps > li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:-21px; top:-4px; width:40px; height:40px; border-radius:50%;
  background:var(--magenta); color:#fff;
  font-family:var(--display); font-size:16px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.steps > li:last-child{ border-left-color:transparent; padding-bottom:0; }
.steps h3{ margin-top:0; margin-bottom:6px; font-size:20px; }
.steps p:last-child{ margin-bottom:0; }

/* ==========================================================================
   The soft bridge: a sentence, never a button
   ========================================================================== */

.bridge{
  max-width:var(--measure); margin:calc(var(--step) * 1.2) 0 0;
  padding-top:28px; border-top:2px solid var(--rule);
  font-size:clamp(18px, 2.1vw, 21px); line-height:1.55; color:var(--ink-soft);
}
.bridge a{ color:var(--blue); font-weight:600; }
.bridge a::after{ content:" →"; }

/* ==========================================================================
   Buttons   [CONFIRMED] the live site uses rounded pill buttons
   ========================================================================== */

.btn{
  display:inline-block; font-family:var(--display); font-size:14px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  background:var(--magenta); color:#fff; text-decoration:none;
  padding:15px 32px; border-radius:var(--pill); border:2px solid var(--magenta);
  transition:background .15s ease, border-color .15s ease;
}
.btn:hover{ background:var(--magenta-deep); border-color:var(--magenta-deep); color:#fff; }
.btn--blue{ background:var(--blue); border-color:var(--blue); }
.btn--blue:hover{ background:var(--blue-deep); border-color:var(--blue-deep); }
.btn--ghost{ background:transparent; color:var(--blue); border-color:var(--blue); }
.btn--ghost:hover{ background:var(--blue); color:#fff; }
.btnrow{ display:flex; flex-wrap:wrap; gap:14px; margin:28px 0 0; }

.offer{
  background:var(--paper); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  border-top:6px solid var(--magenta);
  padding:34px 34px 36px; margin:calc(var(--step) * 1.1) 0 0; max-width:var(--measure);
}
.offer h3{ margin-top:0; }
.offer p{ max-width:none; }

/* Offer card with a photograph inside it. Text left, image right, and the
   image stacks above the text on narrow screens so the card leads with it. */
.offer--art{ padding:0; overflow:hidden; }
.offer__grid{ display:grid; grid-template-columns:1fr; }
.offer__body{ padding:34px 34px 36px; }
.offer__art{ display:block; }
.offer__art img{ width:100%; height:100%; object-fit:cover; object-position:58% 50%; display:block; }
@media (min-width:820px){
  .offer__grid{ grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); align-items:stretch; }
  .offer__body{ padding:38px 34px 40px 38px; align-self:center; }
}
@media (max-width:819px){
  .offer__art{ order:-1; }
  .offer__art img{ height:260px; max-height:38vh; }
}

/* ==========================================================================
   Cards
   ========================================================================== */

.cards{ display:grid; gap:24px; grid-template-columns:repeat(auto-fit, minmax(268px, 1fr)); margin:var(--step) 0 0; }
/* Each card carries its own accent via --card-accent, which drives the top
   rule, the label and the arrow together. The three colours match the three
   utility pills in the bar at the top of the page. */
.card{
  --card-accent:var(--blue);
  background:var(--paper); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  padding:32px 30px 30px; display:flex; flex-direction:column;
  text-decoration:none; color:inherit; border-top:5px solid var(--card-accent);
  transition:box-shadow .18s ease, transform .18s ease;
}
a.card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-3px); }

.card--magenta{ --card-accent:var(--magenta); }   /* matches Milk Express  */
.card--teal   { --card-accent:var(--teal);    }   /* matches Milk Depots   */
.card--plum   { --card-accent:var(--plum);    }   /* matches Donate Money  */

.card__cap{ font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:.09em; text-transform:lowercase; color:var(--card-accent, var(--magenta)); margin:0 0 12px; }
.card h3{ margin:0 0 10px; font-size:21px; }
.card p{ margin:0 0 20px; font-size:16px; color:var(--ink-soft); max-width:none; }
.card__go{ margin-top:auto; font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--card-accent, var(--blue)); }
.card__go::after{ content:" →"; }

/* ==========================================================================
   Recognition section: photograph beside a stacked list of first-person
   lines. Replaces the three-card layout, which left the "this is for you"
   links dangling at uneven heights below cards of unequal depth. Here the
   whole row is the link, so the alignment holds no matter how long a quote
   runs.
   ========================================================================== */

.recognition,
.split{
  display:grid; align-items:center;
  gap:clamp(30px, 5vw, 66px);
  grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr);
}
@media (max-width:920px){
  .recognition,
  .split{ grid-template-columns:1fr; gap:34px; }
  .recognition__art,
  .split__art{ order:2; max-width:460px; margin:0 auto; }
}

.recognition__art img,
.split__art img{ width:100%; height:auto; }
.split__art img{ border-radius:var(--radius-lg); }

/* A wider image column, for artwork that carries more detail. */
.split--art-wide{ grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); }
@media (max-width:920px){ .split--art-wide{ grid-template-columns:1fr; } }

/* Headings sitting in a narrow column need to come down a step. At the full
   section size they read as oversized against the reduced measure. */
.split__body h2{ font-size:clamp(22px, 2.5vw, 30px); }
.split__body p{ font-size:16.5px; }

.reco-list{
  background:var(--paper); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); overflow:hidden; margin-top:30px;
}
/* Recognition cards: the three audience doors, stacked beside the photograph.
   Reuses .card so they match the card styling used elsewhere on the site. */
/* Three doors across. The photograph that used to sit beside these was
   removed on 12 Aug 2026 because it also appears on four other pages. */
.recognition--full{ display:block; }
.reco-cards{ margin-top:28px; }
.reco-cards .card{ padding:28px 26px 24px; }
.reco-cards .card h3{ font-size:18.5px; line-height:1.35; margin:0 0 10px; text-wrap:balance; }
.reco-cards .card p{ font-size:15px; margin:0 0 18px; }
@media (max-width:860px){
  .reco-cards .card{ padding:22px 22px 20px; }
  .reco-cards .card h3{ font-size:17.5px; }
}

.reco{
  display:grid; grid-template-columns:1fr auto; gap:22px; align-items:center;
  padding:26px 28px; text-decoration:none; color:inherit;
  border-bottom:1px solid var(--rule);
  transition:background .16s ease;
}
.reco:last-child{ border-bottom:none; }
.reco:hover{ background:var(--teal-wash); color:inherit; }

.reco__cap{
  font-family:var(--display); font-size:12px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--magenta);
  margin:0 0 9px;
}
.reco__quote{ font-size:17.5px; line-height:1.5; color:var(--ink); margin:0; max-width:34ch; }

.reco__arrow{
  width:42px; height:42px; border-radius:50%; flex:none;
  border:2px solid var(--teal); color:var(--teal-deep);
  display:flex; align-items:center; justify-content:center;
  font-size:19px; line-height:1;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.reco:hover .reco__arrow{ background:var(--teal); border-color:var(--teal); color:#fff; }

@media (max-width:480px){
  .reco{ padding:22px 20px; gap:14px; }
  .reco__arrow{ width:36px; height:36px; font-size:17px; }
}

/* ==========================================================================
   Article furniture: jump links, self-check, section rhythm.
   Built for a reader on a phone who arrived from a specific search and needs
   to find her own situation quickly, not read top to bottom.
   ========================================================================== */

/* Jump links. She searched a specific question; let her get to it. */
.jump{ max-width:var(--measure); margin:0 0 var(--step); }
.jump h4{ margin-bottom:12px; }
.jump ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:9px; }
.article .jump ul li{ margin:0; padding:0 0 0 0; }
.article .jump ul li::before{ content:none; }
.jump a{
  display:inline-block; font-family:var(--display); font-size:13px; font-weight:600;
  color:var(--blue-deep); text-decoration:none; background:var(--paper);
  border:1px solid var(--rule-strong); border-radius:var(--pill); padding:8px 17px;
  transition:border-color .15s ease, color .15s ease;
}
.jump a:hover{ border-color:var(--magenta); color:var(--magenta-deep); }

/* Section rule, which gives the page a rhythm without adding chrome. */
/* margin-top sets the gap above the rule, padding-top the gap between the
   rule and the heading beneath it. */
.article h2{ padding-top:clamp(20px, 2.4vw, 30px); border-top:2px solid var(--rule); margin-top:calc(var(--step) * 1.15); }
.article h2:first-of-type{ border-top:none; padding-top:0; }

/* ---- Self-check ---------------------------------------------------------
   The recognition moment, made tangible. She ticks what sounds like her and
   the page tells her what the pattern means. Deliberately ends in
   recognition. There is no ask attached to it. */

.selfcheck{
  max-width:var(--measure); margin:calc(var(--step) * .9) auto;
  background:var(--paper); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  border-top:6px solid var(--magenta); padding:30px 32px 26px;
}
.selfcheck__cap{
  font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:.1em;
  text-transform:lowercase; color:var(--magenta); margin:0 0 6px;
}
.selfcheck h3{ margin:0 0 6px; font-size:22px; }
.selfcheck__hint{ font-size:15px; color:var(--ink-soft); margin:0 0 20px; }

.selfcheck ul{ list-style:none; margin:0; padding:0; }
.article .selfcheck ul li{ margin:0; padding:0 0 0 0; }
.article .selfcheck ul li::before{ content:none; }

.selfcheck label{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  padding:14px 0; border-bottom:1px solid var(--rule);
  font-size:16.5px; line-height:1.5; cursor:pointer;
}
.selfcheck li:last-child label{ border-bottom:none; }
.selfcheck input{
  appearance:none; -webkit-appearance:none;
  width:24px; height:24px; margin:2px 0 0; flex:none; cursor:pointer;
  border:2px solid var(--rule-strong); border-radius:6px; background:var(--paper);
  transition:background .15s ease, border-color .15s ease;
}
.selfcheck input:checked{ background:var(--magenta); border-color:var(--magenta); }
.selfcheck input:checked::after{
  content:"✓"; display:block; color:#fff; font-size:15px; line-height:20px; text-align:center;
}
.selfcheck label:hover input{ border-color:var(--magenta); }

.selfcheck__result{
  margin:22px 0 0; padding:20px 22px; border-radius:var(--radius);
  background:var(--magenta-wash); font-size:16.5px; line-height:1.55; color:var(--ink);
}
.selfcheck__result[hidden]{ display:none; }

/* The hidden attribute must beat any author display value.
   Without this, .rescard{display:flex} overrode the browser default
   [hidden]{display:none} and the Learn filters appeared to do nothing:
   the count changed but the cards stayed on screen. Global on purpose,
   so the same bug cannot reappear on any other component. */
[hidden]{ display:none !important; }
.selfcheck__result strong{ display:block; font-family:var(--display); font-weight:700; color:var(--magenta-deep); margin-bottom:5px; }

@media (max-width:520px){
  .selfcheck{ padding:24px 22px 22px; }
  .selfcheck label{ font-size:16px; gap:12px; }
}

/* ==========================================================================
   Problem Room page layout: alternating bands, like the homepage.
   The article was one long left-aligned column. This gives it the same
   left-to-right movement and background rhythm the homepage has, while
   keeping the Problem Room rules intact (no CTAs, one soft bridge).
   ========================================================================== */

/* Full-bleed two-column head: copy on the left, photograph on the right. */
.pr-head{ background:var(--paper); padding:calc(var(--step) * 1.3) 0 calc(var(--step) * 1.1); }
.pr-head__grid{
  display:grid; align-items:center; gap:clamp(30px, 5vw, 60px);
  grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
}
@media (max-width:900px){
  .pr-head__grid{ grid-template-columns:1fr; gap:30px; }
  .pr-head__art{ order:-1; max-width:520px; }
}
.pr-head__art{ position:relative; }
.pr-head__art img{
  width:100%; height:auto; max-height:440px; object-fit:cover;
  border-radius:var(--radius-lg);
}
.pr-head h1{ font-size:clamp(30px, 4.4vw, 46px); }
.pr-head .lede{ margin-top:20px; }

/* A section that is a band of its own, with a constrained text column. */
.pr-band{ padding:calc(var(--step) * 1.25) 0; }
.pr-band > .shell > .measure{ margin-left:0; }
.pr-band--paper{ background:var(--paper); }
.pr-band--wash{ background:var(--blue-wash); }
.pr-band--magentawash{ background:var(--magenta-wash); }

.pr-band h2{ border:none; padding:0; margin-top:0; }
/* Bigger section openers so each band's label is easy to see at a glance. */
.pr-band .eyebrow,
.pr-window .eyebrow{
  font-size:clamp(15px, 1.9vw, 18px); letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:16px;
}

/* Two-column: a lead statement on the left, supporting detail on the right.
   Replaces stacked paragraphs so the eye moves across, not just down. */
.pr-cols{
  display:grid; gap:clamp(26px, 4vw, 54px);
  grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);
  align-items:start;
}
@media (max-width:820px){ .pr-cols{ grid-template-columns:1fr; gap:22px; } }
.pr-cols__lead{
  font-family:var(--display); font-size:clamp(21px, 2.6vw, 27px); font-weight:600;
  line-height:1.3; color:var(--blue-deep); margin:0;
}
.pr-cols__body p:first-child{ margin-top:0; }

/* Feeling grid: the physical and the invisible cost, side by side as cards
   instead of buried in a paragraph. */
.feelgrid{ display:grid; gap:20px; grid-template-columns:1fr 1fr; margin-top:8px; }
@media (max-width:720px){ .feelgrid{ grid-template-columns:1fr; } }
.feelcard{
  background:var(--paper); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  padding:28px 28px 26px; border-top:5px solid var(--blue);
}
.feelcard--magenta{ border-top-color:var(--magenta); }
.feelcard h3{ margin:0 0 12px; font-size:19px; }
.feelcard p{ margin:0; font-size:16px; color:var(--ink-soft); }
.feelcard p + p{ margin-top:12px; }

/* The window: payoff idea on a dark band, like the homepage hospital call. */
.pr-window{ background:var(--blue); color:#fff; padding:calc(var(--step) * 1.5) 0; }
.pr-window h2{ color:#fff; border:none; padding:0; margin:0 0 18px; max-width:20ch; }
.pr-window .eyebrow{ color:#ffd0e0; }
.pr-window p{ color:#dcecf4; max-width:56ch; }
.pr-window .pull{ color:#fff; border-left-color:#ffd0e0; }


/* Photo inside the dark window band. */
.pr-window__grid{
  display:grid; align-items:center; gap:clamp(30px, 5vw, 60px);
  grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr);
}
@media (max-width:900px){
  .pr-window__grid{ grid-template-columns:1fr; gap:30px; }
  .pr-window__art{ order:-1; max-width:520px; }
}
.pr-window__art img{ width:100%; height:auto; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }

/* Accumulation band: a lead line across the top, then a figure panel beside
   a photo of equal height. Replaces the broken stacked-in-one-column layout. */
.mathband__lead{
  font-family:var(--display); font-size:clamp(21px, 2.7vw, 30px); font-weight:600;
  line-height:1.25; color:var(--blue-deep); margin:0 auto clamp(24px,3vw,36px); text-align:center;
  /* No narrow width cap. The line runs wide and wraps at about 2 lines
     instead of choking into a tall centered stack. */
  max-width:min(46ch, 100%); text-wrap:balance;
}
.mathband{
  display:grid; gap:0; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-lg); background:var(--paper);
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr);
}
@media (max-width:820px){ .mathband{ grid-template-columns:1fr; } }
.mathband__figure{
  padding:clamp(30px,4vw,44px); display:flex; flex-direction:column; justify-content:center;
  border-top:6px solid var(--clinical);
}
.mathband__cap{
  font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:.09em;
  text-transform:lowercase; color:var(--clinical); margin:0 0 12px;
}
.mathband__fig{
  font-family:var(--display); font-size:clamp(30px,4.4vw,44px); font-weight:700;
  line-height:1.05; color:var(--clinical); margin:0 0 16px; font-variant-numeric:tabular-nums;
}
.mathband__note{ font-size:16.5px; line-height:1.6; color:var(--ink-soft); margin:0; }
.mathband__art{ position:relative; min-height:280px; background:var(--ground); }
.mathband__art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:820px){ .mathband__art{ min-height:240px; order:-1; } }


/* How-it-feels band: an intro column on the left, two labelled cost rows on
   the right. Rows share one panel, so unequal text lengths sit naturally
   instead of leaving one card half-empty. No photo. */
.feel2{
  display:grid; gap:clamp(28px, 4vw, 56px);
  grid-template-columns:minmax(0, .82fr) minmax(0, 1.18fr);
  align-items:start;
}
@media (max-width:860px){ .feel2{ grid-template-columns:1fr; gap:26px; } }
.feel2__lead{
  font-family:var(--display); font-size:clamp(21px,2.5vw,28px); font-weight:600;
  line-height:1.3; color:var(--blue-deep); margin:0 0 16px;
}
.feel2__lead-sub{ font-size:16.5px; color:var(--ink-soft); margin:0; max-width:34ch; }

.costlist{
  background:var(--paper); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.cost{ padding:26px 30px; border-bottom:1px solid var(--rule); display:grid;
  grid-template-columns:auto 1fr; gap:20px; align-items:start; }
.cost:last-child{ border-bottom:none; }
.cost__num{
  font-family:var(--display); font-size:15px; font-weight:700; color:#fff;
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; flex:none; background:var(--blue);
}
.cost--magenta .cost__num{ background:var(--magenta); }
.cost__h{ font-family:var(--display); font-size:18px; font-weight:700; color:var(--blue-deep); margin:0 0 8px; }
.cost--magenta .cost__h{ color:var(--magenta-deep); }
.cost__p{ font-size:16px; line-height:1.6; color:var(--ink-soft); margin:0; }
.cost__p + .cost__p{ margin-top:10px; }

/* Problem Room action bar. A single soft action near the top and a real one
   at the end. Kept deliberately light so the page still reads as help, not a
   funnel: the top action is low-commitment, the bottom one earns the ask. */
.pr-actions{ display:flex; flex-wrap:wrap; gap:14px; margin:26px 0 0; }

/* Closing action band, sits just before the footer. */
.pr-close{ background:var(--magenta-wash); padding:calc(var(--step) * 1.4) 0; text-align:center; }
.pr-close .eyebrow{ color:var(--magenta); }
/* Headline spans wide across the band, then centers. Wraps at ~2 lines. */
.pr-close h2{ margin:0 auto 16px; color:var(--blue-deep); font-size:clamp(26px,3.4vw,40px); max-width:min(30ch, 100%); text-wrap:balance; }
.pr-close p{ color:var(--ink-soft); margin:0 auto; max-width:60ch; }
.pr-close .btnrow{ margin-top:28px; justify-content:center; }

/* ==========================================================================
   Sales Room components (hospitals page). Data-forward: big stat band, a
   comparison table, and a download callout. Cooler and more clinical than
   the Problem Room bands.
   ========================================================================== */

/* Big ROI figure band */
.roi{ text-align:center; }
.roi__fig{
  font-family:var(--display); font-weight:700; color:#fff; line-height:1.02;
  font-size:clamp(44px, 8vw, 92px); letter-spacing:-.03em; margin:0;
  max-width:16ch; margin-inline:auto; text-wrap:balance;
}
.roi__fig span{ color:#7fe0e4; }
.roi__sub{ color:#dcecf4; font-size:clamp(16px,1.8vw,20px); margin:26px auto 0; max-width:min(52ch,100%); line-height:1.6; text-wrap:balance; }
.roi__src{ font-family:var(--body); font-size:13px; color:#9fc0d4; margin:18px 0 0; }

/* Evidence stat trio, on white, no boxes */
.evidence{ display:grid; gap:clamp(30px,4vw,60px); grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin-top:calc(var(--step) * 1.3); align-items:start; }
.ev{ text-align:center; padding:0 8px; display:flex; flex-direction:column; align-items:center; }
/* Figures share a baseline via a fixed-height, bottom-aligned zone, then a
   clear gap to the label below. */
.ev__fig{ font-family:var(--display); font-size:clamp(34px,4.6vw,54px); font-weight:700; color:var(--blue); line-height:1; margin:0 0 28px; letter-spacing:-.02em; min-height:1.05em; display:flex; align-items:flex-end; }
.ev__fig--clinical{ color:var(--clinical); }
.ev__lab{ font-size:16px; color:var(--ink-soft); margin:0; max-width:30ch; margin-inline:auto; }
.ev__src{ font-family:var(--body); font-size:12.5px; color:var(--ink-faint); margin:10px 0 0; }

/* Reliability comparison table */
.compare{ max-width:760px; margin:var(--step) auto 0; background:var(--paper); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; }
.compare table{ width:100%; border-collapse:collapse; }
.compare th, .compare td{ padding:18px 22px; text-align:left; border-bottom:1px solid var(--rule); vertical-align:top; }
.compare thead th{ font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--blue); border-bottom:none; }
.compare thead th:last-child{ background:var(--blue-deep); }
.compare tbody th{ font-weight:400; color:var(--ink); font-family:var(--body); font-size:16px; }
.compare td{ font-size:16px; }
.compare .yes{ color:var(--good); font-weight:700; }
.compare .no{ color:var(--ink-faint); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td{ border-bottom:none; }
.compare__col-tmb{ background:var(--teal-wash); }

/* Endorsement logos / authority row */
.authority{ display:flex; flex-wrap:nowrap; justify-content:center; gap:clamp(8px,1.2vw,14px);
  margin:var(--step) auto 0; max-width:920px; }
@media (max-width:720px){ .authority{ flex-wrap:wrap; } }
.authority__chip{
  font-family:var(--display); font-size:clamp(12.5px,1.3vw,14px); font-weight:700; color:var(--blue-deep);
  background:var(--paper); border:1px solid var(--rule-strong); border-radius:var(--pill);
  padding:11px clamp(14px,1.8vw,22px); white-space:nowrap;
}

/* Download one-pager callout */
.download{
  max-width:860px; margin:var(--step) auto 0; background:var(--paper);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); border-left:6px solid var(--magenta);
  padding:36px 40px; display:grid; grid-template-columns:1.4fr 1fr; gap:36px; align-items:center;
}
@media (max-width:720px){ .download{ grid-template-columns:1fr; gap:24px; } }
.download__body h2{ margin:0 0 12px; font-size:clamp(22px,2.6vw,28px); max-width:20ch; line-height:1.2; text-wrap:balance; }
.download__body .eyebrow{ margin-bottom:10px; }
.download__body p{ margin:0; color:var(--ink-soft); font-size:16px; line-height:1.6; }
.download__action{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
@media (max-width:720px){ .download__action{ align-items:stretch; } }
.download__action .btn{ white-space:nowrap; }
.download__note{ margin:0; font-size:14px; color:var(--ink-faint); line-height:1.5; }

/* ==========================================================================
   Process steps: numbered cards in a row, for a short how-it-works flow.
   ========================================================================== */
.procsteps{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); margin-top:var(--step); }
.procstep{
  background:var(--paper); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  padding:30px 26px 28px; border-top:5px solid var(--teal); position:relative;
}
.procstep__n{
  font-family:var(--display); font-size:15px; font-weight:700; color:#fff;
  width:40px; height:40px; border-radius:50%; background:var(--teal);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.procstep:nth-child(2) .procstep__n{ background:var(--blue); }
.procstep:nth-child(2){ border-top-color:var(--blue); }
.procstep:nth-child(3) .procstep__n{ background:var(--magenta); }
.procstep:nth-child(3){ border-top-color:var(--magenta); }
.procstep:nth-child(4) .procstep__n{ background:var(--plum); }
.procstep:nth-child(4){ border-top-color:var(--plum); }
.procstep h3{ margin:0 0 10px; font-size:19px; }
.procstep p{ margin:0; font-size:16px; color:var(--ink-soft); }

/* Reassurance strip: small facts in a row on a tinted band. */
.assure{ display:grid; gap:clamp(28px,4vw,52px); grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); margin-top:calc(var(--step) * 1.25); }
.assure__item{ text-align:center; padding:0 10px; }
/* Icons float on the band. A slim divider between items instead of boxes,
   so this section reads differently from the boxed step cards below it. */
.assure__item + .assure__item{ position:relative; }
@media (min-width:760px){
  .assure__item + .assure__item::before{
    content:""; position:absolute; left:calc(clamp(28px,4vw,52px) / -2); top:14px; bottom:14px;
    width:1px; background:var(--rule-strong);
  }
}
.assure__icon{
  width:84px; height:84px; border-radius:50%; margin:0 auto 20px;
  display:flex; align-items:center; justify-content:center;
  background:var(--teal-wash);
}
.assure__item:nth-child(2) .assure__icon{ background:var(--blue-wash); }
.assure__item:nth-child(3) .assure__icon{ background:var(--magenta-wash); }
.assure__icon svg{ width:42px; height:42px; display:block; }
.assure__icon svg *{ stroke:var(--teal); }
.assure__item:nth-child(2) .assure__icon svg *{ stroke:var(--blue); }
.assure__item:nth-child(3) .assure__icon svg *{ stroke:var(--magenta); }
.assure__fig{ font-family:var(--display); font-size:clamp(26px,3.2vw,36px); font-weight:700; color:var(--blue); margin:0 0 10px; }
.assure__item:nth-child(3) .assure__fig{ font-size:clamp(24px,2.9vw,32px); }
.assure__lab{ font-size:15.5px; color:var(--ink-soft); margin:0; }

/* ==========================================================================
   Offer Room components (Become a Donor). Promise-first, then reassurance,
   then a numbered process. Conversion-oriented, unlike the Problem Room.
   ========================================================================== */

/* The named promise band. */
.promise{ background:var(--magenta-wash); }
.promise .eyebrow{ color:var(--magenta); }
.promise h2{ color:var(--blue-deep); font-size:clamp(28px,3.6vw,42px); }
.promise p{ color:var(--ink-soft); }
.promise .btnrow{ margin-top:28px; }
/* image sits comfortably in the right column of the promise grid */
.promise .pr-head__art img{ max-height:380px; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow); }

/* Reassurance grid: the specific fears, answered. */
.fears{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin-top:var(--step); }
.fear{ background:var(--paper); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:26px 26px 24px; border-left:4px solid var(--teal); }
.fear h3{ margin:0 0 10px; font-size:18px; }
.fear p{ margin:0; font-size:15.5px; color:var(--ink-soft); }

/* Numbered vertical process. */
.process{ max-width:var(--measure); margin:var(--step) auto 0; counter-reset:pstep; padding:0; }
.pstep{ list-style:none; position:relative; padding:0 0 30px 74px; margin:0; border-left:2px solid var(--rule); margin-left:22px; }
.pstep:last-child{ border-left-color:transparent; padding-bottom:0; }
.pstep::before{ counter-increment:pstep; content:counter(pstep); position:absolute; left:-24px; top:-4px; width:46px; height:46px; border-radius:50%; background:var(--blue); color:#fff; font-family:var(--display); font-size:18px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.pstep:nth-child(1)::before{ background:var(--teal); }
.pstep:nth-child(3)::before{ background:var(--magenta); }
.pstep:nth-child(4)::before{ background:var(--plum); }
.pstep h3{ margin:2px 0 8px; font-size:20px; }
.pstep p{ margin:0; color:var(--ink-soft); font-size:16px; }
.pstep .tag{ display:inline-block; font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--teal-deep); background:var(--teal-wash); border-radius:var(--pill); padding:4px 12px; margin-top:10px; }

/* ==========================================================================
   Recipient cards: the three kinds of families donor milk reaches.
   ========================================================================== */
.recip{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:var(--step); }
.recipcard{
  background:var(--paper); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  padding:32px 30px 30px; border-top:5px solid var(--magenta);
}
.recipcard:nth-child(2){ border-top-color:var(--blue); }
.recipcard:nth-child(3){ border-top-color:var(--teal); }
.recipcard__cap{ font-family:var(--display); font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--magenta); margin:0 0 6px; padding-bottom:16px; border-bottom:1px solid var(--rule); }
.recipcard:nth-child(2) .recipcard__cap{ color:var(--blue); }
.recipcard:nth-child(3) .recipcard__cap{ color:var(--teal-deep); }
.recipcard h3{ margin:18px 0 14px; font-size:21px; }
.recipcard p{ margin:0; font-size:16px; color:var(--ink-soft); }

/* Storage keep-times as clean rows, no table and no horizontal scroll. */
.keeps{ background:var(--paper); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden; }
.keeps__cap{ font-family:var(--display); font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--magenta); margin:0; padding:22px 24px 14px; }
.keep{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:16px 24px; border-top:1px solid var(--rule); }
.keep__where{ font-size:16px; color:var(--ink); min-width:0; flex:1 1 46%; }
.keep__time{ font-family:var(--display); font-weight:700; font-size:clamp(17px,2vw,20px); line-height:1.25; color:var(--blue); white-space:normal; text-align:right; flex:1 1 54%; min-width:0; overflow-wrap:anywhere; }
.keep__time--best{ color:var(--teal-deep); }
@media (max-width:560px){
  .keep{ flex-direction:column; align-items:flex-start; gap:5px; }
  .keep__where,.keep__time{ flex:none; width:100%; text-align:left; }
}

/* ==========================================================================
   Milk journey: a vertical numbered sequence tracing milk donor to baby.
   ========================================================================== */
.journey{ max-width:760px; margin:var(--step) auto 0; counter-reset:jstep; padding:0; }
.jstep{ list-style:none; position:relative; padding:0 0 34px 78px; margin:0; border-left:2px solid var(--rule); margin-left:24px; }
.jstep:last-child{ border-left-color:transparent; padding-bottom:0; }
.jstep::before{ counter-increment:jstep; content:counter(jstep); position:absolute; left:-25px; top:-4px; width:50px; height:50px; border-radius:50%; background:var(--blue); color:#fff; font-family:var(--display); font-size:19px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.jstep:nth-child(1)::before{ background:var(--teal); }
.jstep:nth-child(5)::before,.jstep:nth-child(6)::before{ background:var(--magenta); }
.jstep:last-child::before{ background:var(--plum); }
.jstep h3{ margin:4px 0 8px; font-size:21px; }
.jstep p{ margin:0; color:var(--ink-soft); font-size:16.5px; line-height:1.6; }
.jstep .jtag{ display:inline-block; font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--teal-deep); background:var(--teal-wash); border-radius:var(--pill); padding:4px 12px; margin-top:10px; }

/* ==========================================================================
   Honest comparison: two columns side by side, neither "winning".
   ========================================================================== */
.compare2{ display:grid; gap:22px; grid-template-columns:1fr 1fr; margin-top:var(--step); }
@media (max-width:760px){ .compare2{ grid-template-columns:1fr; } }
.compare2__col{ background:var(--paper); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:30px 30px 28px; border-top:5px solid var(--teal); }
.compare2__col--bank{ border-top-color:var(--blue); }
.compare2__cap{ font-family:var(--display); font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--teal-deep); margin:0 0 6px; }
.compare2__col--bank .compare2__cap{ color:var(--blue); }
.compare2__col h3{ margin:0 0 16px; font-size:22px; }
.compare2__list{ list-style:none; margin:0; padding:0; }
.compare2__list li{ position:relative; padding:9px 0 9px 26px; font-size:15.5px; line-height:1.5; color:var(--ink-soft); border-bottom:1px solid var(--rule); }
.compare2__list li:last-child{ border-bottom:none; }
.compare2__list li::before{ content:""; position:absolute; left:2px; top:15px; width:8px; height:8px; border-radius:50%; background:var(--teal); }
.compare2__col--bank .compare2__list li::before{ background:var(--blue); }

/* The "why screening exists" note, as a contained callout under compare2. */
.whynote{
  max-width:760px; margin:var(--step) auto 0; background:var(--paper);
  border-radius:var(--radius-lg); box-shadow:var(--shadow); border-left:5px solid var(--magenta);
  padding:26px 30px; display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start;
}
@media (max-width:600px){ .whynote{ grid-template-columns:1fr; gap:14px; } }
.whynote__fig{ font-family:var(--display); font-weight:700; color:var(--magenta-deep); line-height:1; font-size:clamp(34px,5vw,52px); white-space:nowrap; }
.whynote__body{ margin:0; font-size:16px; line-height:1.6; color:var(--ink-soft); }
.whynote__body strong{ color:var(--ink); }

/* ==========================================================================
   Pasteurization comparison table (Holder vs Retort). Clinical, scannable.
   ========================================================================== */
.ptable{ margin:var(--step) auto 0; max-width:820px; background:var(--paper); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden; }
.ptable__row{ display:grid; grid-template-columns:1.3fr 1fr 1fr; }
.ptable__row + .ptable__row{ border-top:1px solid var(--rule); }
.ptable__row--head{ background:var(--blue-wash); }
.ptable__cell{ padding:16px 20px; font-size:15.5px; line-height:1.45; }
.ptable__cell--label{ font-family:var(--display); font-weight:700; color:var(--ink); font-size:14.5px; }
.ptable__cell--head{ font-family:var(--display); font-weight:700; letter-spacing:.02em; font-size:13.5px; text-transform:uppercase; }
.ptable__cell--holder{ color:var(--blue-deep); }
.ptable__cell--retort{ color:var(--ink-soft); }
.ptable__cell strong{ color:var(--blue-deep); }
@media (max-width:640px){
  .ptable__row{ grid-template-columns:1fr; }
  .ptable__row--head{ display:none; }
  .ptable__cell{ padding:10px 18px; }
  .ptable__cell--label{ padding-top:18px; background:var(--blue-wash); }
  .ptable__cell--holder::before{ content:"Holder (what we use): "; font-weight:700; color:var(--blue-deep); }
  .ptable__cell--retort::before{ content:"Retort shelf-stable: "; font-weight:700; color:var(--ink-faint); }
}

/* ==========================================================================
   Evaluation checklist: numbered criteria rows, scannable buyer resource.
   ========================================================================== */
.checklist{ width:100%; max-width:1000px; margin:var(--step) auto 0; display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:stretch; }
@media (max-width:720px){ .checklist{ grid-template-columns:1fr; } }
.check{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; padding:26px 28px; background:var(--paper); border-radius:var(--radius-lg); box-shadow:var(--shadow); height:100%; }
.check__mark{ width:36px; height:36px; border-radius:50%; background:var(--teal-wash); color:var(--teal-deep); display:flex; align-items:center; justify-content:center; flex:none; }
.check__mark svg{ width:19px; height:19px; }
.check__body h3{ margin:0 0 7px; font-size:18px; line-height:1.25; }
.check__body p{ margin:0; color:var(--ink-soft); font-size:15px; line-height:1.5; }
.check__body .ask{ display:block; margin-top:9px; font-style:italic; color:var(--blue-deep); font-size:14.5px; }

/* ==========================================================================
   FAQ accordion. Native <details>/<summary> so it works with zero JS and
   stays accessible. Each item is a real objection a hesitant donor has.
   ========================================================================== */

.faq{ max-width:820px; margin:var(--step) auto 0; }
.faq__item{
  background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow);
  margin-bottom:14px; overflow:hidden;
}
.faq__item summary{
  list-style:none; cursor:pointer; padding:22px 26px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-family:var(--display); font-size:clamp(16px,1.9vw,18.5px); font-weight:700;
  color:var(--blue-deep);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:"+"; flex:none; font-family:var(--display); font-weight:700;
  font-size:26px; line-height:1; color:var(--magenta);
  transition:transform .2s ease;
}
.faq__item[open] summary::after{ content:"\2013"; }
.faq__item summary:hover{ color:var(--magenta-deep); }
.faq__body{ padding:0 26px 24px; }
.faq__body p{ margin:0 0 .8em; font-size:16.5px; line-height:1.65; color:var(--ink-soft); max-width:64ch; }
.faq__body p:last-child{ margin-bottom:0; }
.faq__body a{ color:var(--blue); font-weight:600; }

.faq__more{
  text-align:center; margin:calc(var(--step) * .9) auto 0; max-width:60ch;
  font-size:16.5px; color:var(--ink-soft);
}
.faq__more a{ color:var(--blue); font-weight:600; }

/* ==========================================================================
   Bands
   ========================================================================== */

.band{ padding:calc(var(--step) * 1.4) 0; }
.band--paper{ background:var(--paper); }
.band--wash{ background:var(--blue-wash); }
.band--pinkwash{ background:var(--magenta-wash); }
.band--blue{ background:var(--blue); color:#fff; }
.band--blue h2,.band--blue h3{ color:#fff; }
.band--blue p{ color:#dcecf4; }
.band--blue .eyebrow{ color:#ffd0e0; }
.band--blue .btn--ghost{ color:#fff; border-color:#fff; }
.band--blue .btn--ghost:hover{ background:#fff; color:var(--blue); }

/* Hero: full-bleed photograph, dark scrim on the reading side, white type,
   and the purple swoosh that divides it from the section below. */
.hero{
  position:relative;
  background-color:var(--indigo);
  /* Scrim is the FIRST background layer, not a ::before overlay. Keeping it in
     the same stack guarantees it paints with the photo in every engine. */
  background-image:
    linear-gradient(100deg, rgba(0,54,89,.92) 0%, rgba(0,54,89,.86) 28%, rgba(0,54,89,.70) 45%, rgba(0,54,89,.42) 62%, rgba(161,0,130,.18) 82%, rgba(161,0,130,.08) 100%),
    url("../img/hero-nursing.jpg");
  background-size:cover, cover;
  background-position:center, 36% 42%;
  background-repeat:no-repeat, no-repeat;
  /* Plain px first as a floor for engines that drop calc(), then the calc for
     everything modern. The swoosh is absolutely positioned over the bottom, so
     the copy needs real clearance beneath it. */
  padding:34px 0 140px;
  padding:calc(var(--step) * 1.05) 0 calc(var(--step) * 2.75);
  min-height:340px;
  min-height:clamp(340px, 24vw, 400px);
  isolation:isolate;
}
.hero::before{ content:none; }
@media (max-width:760px){
  .hero{ padding-bottom:calc(var(--step) * 3); }
}
.hero__inner{ max-width:60ch; }
/* Each sentence is its own line. Three beats: surplus, need, connection. so nothing orphans on a line of its own no matter the viewport. */
.hero h1{ max-width:24ch; font-size:clamp(25px, 2.95vw, 37px); line-height:1.16; color:#fff; margin-bottom:4px; }
.hero h1 span,
.hero h1 em{ display:block; }
.hero h1 em{ font-style:italic; color:#fff; }
@media (min-width:900px){
  .hero__inner{ max-width:min(52ch, 54%); }
}
@media (max-width:1024px){
  /* Copy sits over the photo on narrow screens, so the wash turns vertical. */
  .hero{
    background-image:
      linear-gradient(180deg, rgba(0,54,89,.88) 0%, rgba(0,54,89,.78) 42%, rgba(0,54,89,.62) 72%, rgba(124,39,125,.72) 100%),
      url("../img/hero-nursing.jpg");
    /* Copy overlays the photo here, so keep the baby centred rather than
       pushed right where the text would sit on top of the face. */
    background-position:center, 58% 74%;
  }
}
.hero .eyebrow{ color:#f3a7df; font-size:15px; letter-spacing:.14em; text-transform:uppercase; }
.hero .standfirst{ color:#f4f7f8; font-size:clamp(15.5px, 1.4vw, 17px); line-height:1.55; max-width:44ch; margin-top:14px; }
.hero .standfirst em{ color:#fff; }
.hero .btn--ghost{ color:#fff; border-color:#fff; }
.hero .btn--ghost:hover{ background:#fff; color:var(--indigo); }

/* The swoosh */
.hero__swoosh{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:clamp(50px, 7vw, 100px); display:block; }

/* Audience cards sit below the hero photo rather than on top of it */
/* .hero-tracks removed 12 Aug 2026: the audience-track cards duplicated the
   "Is this you?" section, which now carries the three doors as stacked cards. */

/* ==========================================================================
   Newsletter band   [CONFIRMED] "Never Miss a Drop" sits above the footer
   ========================================================================== */

.newsletter{ background:var(--magenta-wash); padding:calc(var(--step) * 1.1) 0; text-align:center; }
.newsletter h2{ margin-top:0; max-width:26ch; margin-left:auto; margin-right:auto; }
.newsletter .btnrow{ justify-content:center; }

/* ==========================================================================
   Checklist tool
   ========================================================================== */

.check__why{ font-size:15.5px; color:var(--ink-soft); margin:0 0 18px; max-width:none; }
.check__fields{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }
@media (max-width:620px){ .check__fields{ grid-template-columns:1fr; } }
.check__fields label{ font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:6px; }
.check__fields input{ width:100%; font-family:var(--body); font-size:16px; color:var(--ink); background:var(--ground); border:1px solid var(--rule-strong); border-radius:var(--radius); padding:11px 13px; }
.toolbar{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:26px 0 0; }
.toolbar__msg{ font-size:14px; font-style:italic; color:var(--ink-faint); }

/* ==========================================================================
   Footer   [CONFIRMED] four-column layout from the live site
   ========================================================================== */

.foot{ background:var(--blue-deep); color:#c9dbe6; padding:calc(var(--step) * 1.3) 0 calc(var(--step) * .9); font-size:15.5px; }
.foot a{ color:#eaf3f8; text-decoration:none; }
.foot a:hover{ color:#fff; text-decoration:underline; }
.foot__grid{ display:grid; gap:36px; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); }
.foot h4{ color:#fff; font-size:15px; letter-spacing:.06em; text-transform:none; margin-bottom:16px; }
.foot ul{ list-style:none; margin:0; padding:0; }
.foot li{ margin-bottom:10px; }
.foot__contact p{ margin:0 0 14px; line-height:1.7; }
.foot__social{
  display:flex; gap:10px; margin-top:18px; flex-wrap:wrap;
  list-style:none; padding:0;
}
.foot__social li{ margin:0; }
.foot__social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.12); border-bottom:none;
  transition:background .15s, transform .15s;
}
.foot__social a:hover,
.foot__social a:focus-visible{ background:rgba(255,255,255,.26); transform:translateY(-1px); }
.foot__social a:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.foot__social svg{ width:18px; height:18px; display:block; fill:#fff; }

.foot__legal{ margin-top:calc(var(--step) * 1.1); padding-top:24px; border-top:1px solid rgba(255,255,255,.16); font-size:13.5px; color:#9ab8c9; line-height:1.8; }

.ext::after{ content:" ↗"; font-size:.75em; color:inherit; opacity:.7; }

/* ==========================================================================
   Print
   ========================================================================== */

@media print{
  :root{ --ground:#fff; --paper:#fff; }
  body{ background:#fff; color:#000; font-size:11pt; }
  .utility,.masthead,.foot,.bridge,.offer,.btnrow,.toolbar,.nav-toggle,.skip,.newsletter{ display:none !important; }
  .article{ padding:0; }
  .check{ break-inside:avoid; border:1px solid #999; box-shadow:none; }
  .check__fields input{ border:1px solid #999; background:#fff; }
  a{ color:#000; text-decoration:none; }
}

/* ==========================================================================
   LEARN HUB (/learn/)
   Filter chips plus resource cards. Replaces the reverse-chronological blog
   with a self-navigation system: filter by who you are and where you are in
   your thinking. No dates, no bylines, by design.
   ========================================================================== */

.learnhead,
.abouthead{ text-align:center; }
/* Align actions with the centered page intro; other button rows retain their layout. */
.abouthead > .btnrow{ justify-content:center; }
.learnhead h1{
  margin:0 auto; max-width:min(30ch, 100%); text-wrap:balance;
}
.abouthead h1{ margin:0 auto; max-width:min(34ch, 100%); text-wrap:balance; }
.learnhead .lede,
.abouthead .lede{ margin:20px auto 0; max-width:64ch; }
.learnhead .eyebrow,
.abouthead .eyebrow{ width:100%; margin-left:auto; margin-right:auto; }

.filters{ max-width:900px; margin:0 auto; text-align:center; }
.filters__row + .filters__row{ margin-top:34px; }
.filters__q{
  font-family:var(--display); font-size:15px; font-weight:700;
  color:var(--blue-deep); margin:0 0 14px; letter-spacing:.01em;
}
.chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.chip{
  font-family:var(--display); font-size:14px; font-weight:600; line-height:1.3;
  color:var(--ink-soft); background:var(--paper);
  border:1px solid var(--rule-strong); border-radius:var(--pill);
  padding:11px 20px; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.chip:hover{ border-color:var(--blue); color:var(--blue-deep); }
.chip[aria-pressed="true"]{
  background:var(--blue); border-color:var(--blue); color:#fff;
}
.filters__status{
  font-family:var(--display); font-size:14px; font-weight:600;
  color:var(--ink-soft); margin:30px 0 0;
}
.filters__status button{
  font:inherit; color:var(--magenta-deep); background:none; border:none;
  padding:0 0 1px; margin-left:6px; cursor:pointer;
  border-bottom:1px solid currentColor;
}
.filters__status button:hover{ color:var(--blue-deep); }

.reslist{
  display:grid; gap:22px; margin-top:calc(var(--step) * .9);
  grid-template-columns:repeat(auto-fit, minmax(296px, 1fr));
}
.rescard{
  display:flex; flex-direction:column; text-decoration:none;
  background:var(--paper); border-radius:var(--radius-lg);
  padding:26px 26px 22px; box-shadow:var(--shadow);
  transition:box-shadow .15s, transform .15s;
}
.rescard:hover{ box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.rescard:hover h3{ color:var(--magenta-deep); }
.rescard__tags{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:15px; }
.rescard__tags span{
  font-family:var(--display); font-size:11px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  border-radius:var(--pill); padding:5px 11px; line-height:1.4;
}
.tag--donor{ background:var(--teal-wash); color:var(--teal-deep); }
.tag--hospital{ background:var(--blue-wash); color:var(--blue-deep); }
.tag--family{ background:var(--magenta-wash); color:var(--magenta-deep); }
.tag--stage{ background:#f0f2f4; color:var(--ink-soft); }
.rescard h3{
  font-family:var(--display); font-size:20px; font-weight:700; line-height:1.3;
  color:var(--blue-deep); margin:0 0 10px; transition:color .15s;
}
.rescard p{ font-size:15.5px; line-height:1.6; color:var(--ink-soft); margin:0 0 18px; flex:1; }
.rescard__meta{
  font-family:var(--display); font-size:13px; font-weight:600;
  color:var(--ink-faint); display:flex; align-items:center; gap:8px;
}
.rescard__meta::after{
  content:""; width:7px; height:7px; margin-left:auto;
  border-top:2px solid var(--magenta); border-right:2px solid var(--magenta);
  transform:rotate(45deg); transition:transform .15s;
}
.rescard:hover .rescard__meta::after{ transform:rotate(45deg) translate(3px,-3px); }

.reslist__empty{
  text-align:center; color:var(--ink-soft); margin:var(--step) auto 0;
  max-width:46ch; font-size:16px;
}

/* Dark band: the three front doors, for readers who would rather not filter */
.startgrid{
  display:grid; gap:18px; margin-top:calc(var(--step) * .9);
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}
.startdoor{
  display:block; text-decoration:none; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22); border-radius:var(--radius-lg);
  padding:24px 24px 20px; transition:background .15s, border-color .15s;
}
.startdoor:hover{ background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.5); }
.startdoor__cap{
  font-family:var(--display); font-size:11px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:#ffd0e0;
  margin:0 0 10px;
}
.startdoor h3{
  font-family:var(--display); font-size:19px; font-weight:700; line-height:1.35;
  color:#fff; margin:0 0 8px;
}
.startdoor p{ font-size:15px; line-height:1.6; color:#dcecf4; margin:0; max-width:none; }

/* ==========================================================================
   ABOUT PAGE
   Secondary link row under the closing CTA: the reports, the team and the
   board, which live on the current live site.
   ========================================================================== */
.abouthead .authority{ justify-content:center; margin-top:26px; flex-wrap:wrap; }
.abouthead .authority__chip{ white-space:normal; max-width:100%; text-align:center; line-height:1.45; }
.abouthead__body{ max-width:66ch; margin:22px auto 0; }

.aboutlinks{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px;
  margin:34px auto 0; padding-top:26px; max-width:820px;
  border-top:1px solid rgba(155,42,140,.22);
}
.aboutlinks a{
  font-family:var(--display); font-size:14.5px; font-weight:700;
  color:var(--blue-deep); text-decoration:none; display:inline-flex; align-items:center;
}
.aboutlinks a::after{
  content:""; width:6px; height:6px; margin-left:8px;
  border-top:2px solid var(--magenta); border-right:2px solid var(--magenta);
  transform:rotate(45deg); transition:transform .15s;
}
.aboutlinks a:hover{ color:var(--magenta-deep); }
.aboutlinks a:hover::after{ transform:rotate(45deg) translate(3px,-3px); }

/* --- Values, matching the live About page's layout ------------------------
   A large wordmark-style heading with a magenta rule running off to the right,
   then icon-left / text-right rows rather than cards. */
.valuehead{ display:flex; align-items:center; gap:clamp(18px,3vw,40px); }
.valuehead h2{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(38px,6.4vw,80px); line-height:1; letter-spacing:.01em;
  color:var(--indigo); margin:0; border:none; padding:0; flex:none;
}
.valuehead__rule{
  position:relative; flex:1; height:6px; border-radius:var(--pill);
  background:var(--magenta); margin-right:13px;
}
.valuehead__rule::after{
  content:""; position:absolute; right:-13px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%; background:var(--magenta);
}
@media (max-width:560px){ .valuehead__rule{ display:none; } }

.valuelist{ display:grid; gap:clamp(38px,5vw,62px); margin-top:calc(var(--step) * 1.1); }
.valuerow{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(24px,4vw,56px); align-items:start;
}
.valuerow__icon{ width:clamp(88px,9vw,124px); flex:none; }
.valuerow__icon img{ width:100%; height:auto; }
.valuerow__body h3{
  font-family:var(--display); font-size:clamp(19px,2.1vw,24px); font-weight:700;
  color:var(--ink); margin:0 0 14px; line-height:1.3;
}
.valuerow__body p{ margin:0; color:var(--ink-soft); max-width:70ch; }
@media (max-width:640px){
  .valuerow{ grid-template-columns:1fr; gap:18px; }
  .valuerow__icon{ width:84px; }
}

/* Icon above each About stat figure, as on the live site */
.ev__icon{ width:clamp(56px,6vw,74px); height:auto; margin:0 auto 20px; display:block; }

/* ==========================================================================
   OUR TEAM (/our-team/)
   Roster cards with the biography behind a native <details> expander, which
   reproduces the live page's plus-symbol behaviour with no JavaScript.
   ========================================================================== */
.team{
  display:grid; gap:22px; margin-top:var(--step);
  grid-template-columns:repeat(auto-fit, minmax(330px, 1fr));
}
.person{
  background:var(--paper); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  padding:26px 26px 22px;
  display:flex; flex-direction:column;
  /* Every card the same height, including the six with no biography and so no
     footer link. Content is free to exceed this; nothing is clipped. */
  min-height:225px;
}
.person__top{ display:flex; align-items:center; gap:18px; padding-bottom:20px; }
/* Reserve a constant block for name, role and credentials so a two-line name or
   a long credential string does not make one card taller than the next. Sized
   for the longest entry in the roster: two-line name, two-line role, two-line
   credentials. Re-measure if the roster gains a longer title. */
.person__top > div{ min-height:118px; display:flex; flex-direction:column; justify-content:center; }
.person__shot{
  width:82px; height:82px; border-radius:50%; object-fit:cover; flex:none;
  background:var(--blue-wash);
}
.person__shot--initials{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; font-size:25px; letter-spacing:.02em;
  color:#fff; background:var(--blue);
}
.person:nth-child(4n+2) .person__shot--initials{ background:var(--teal-deep); }
.person:nth-child(4n+3) .person__shot--initials{ background:var(--magenta); }
.person:nth-child(4n+4) .person__shot--initials{ background:var(--plum); }

.person h3{
  font-family:var(--display); font-size:18px; font-weight:700; line-height:1.3;
  color:var(--blue-deep); margin:0 0 5px;
}
.person__role{ font-size:15px; line-height:1.45; color:var(--ink-soft); margin:0; }
.person__creds{
  font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--teal-deep); margin:8px 0 0; line-height:1.5;
}

.person__bio{ margin-top:auto; border-top:1px solid var(--rule); padding-top:14px; }
.person__bio summary{
  list-style:none; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:12px; position:relative;
  font-family:var(--display); font-size:14px; font-weight:700;
  color:var(--magenta-deep);
}
.person__bio summary::-webkit-details-marker{ display:none; }
.person__bio summary::after{
  content:""; flex:none; width:20px; height:20px; border-radius:50%;
  background:var(--magenta-wash); position:relative;
}
.person__bio summary:hover{ color:var(--blue-deep); }
.person__biobody p{ font-size:15px; line-height:1.65; color:var(--ink-soft); margin:14px 0 0; }
.person__mail{ font-size:14.5px; margin:14px 0 0; word-break:break-word; }
.person__mail--bare{ margin-top:auto; padding-top:14px; border-top:1px solid var(--rule); }

/* Plus turning to minus, drawn rather than typed so it stays centred */
.person__bio summary::before{
  content:""; position:absolute; right:0; top:50%; z-index:1;
  width:9px; height:9px; pointer-events:none;
  background:
    linear-gradient(var(--magenta-deep),var(--magenta-deep)) center/9px 2px no-repeat,
    linear-gradient(var(--magenta-deep),var(--magenta-deep)) center/2px 9px no-repeat;
  transform:translate(-5.5px,-50%);
}
.person__bio[open] summary::before{
  background:linear-gradient(var(--magenta-deep),var(--magenta-deep)) center/9px 2px no-repeat;
}

@media (max-width:820px){
  /* Endorsement chips are a nowrap row by default, which overflows a phone.
     Let them wrap and let each chip's own text wrap too. */
  /* Switch from flex to inline-block so the chips wrap in every engine,
     not just ones with reliable flex-wrap. */
  .authority{ display:block; text-align:center; }
  .authority__chip{
    display:inline-block; margin:0 4px 8px;
    white-space:normal; text-align:center; line-height:1.45;
    max-width:100%;
  }
  /* Buttons that are nowrap by default can exceed a narrow column. */
  .download__action .btn,
  .joblisting__actions .btn{ white-space:normal; }
}

@media (max-width:420px){
  .person__top{ gap:14px; }
  .person__shot{ width:66px; height:66px; }
  .person__shot--initials{ font-size:21px; }
}

/* ==========================================================================
   BOARD OF DIRECTORS (/board-of-directors/)
   Officers reuse the team card. The full board and the advisory committee are
   name-and-affiliation only on the live site, so they get a compact card with
   no avatar rather than forty identical initials circles.
   ========================================================================== */
.person--exec .person__cap{
  font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--magenta-deep); margin:0 0 6px;
}
.person--exec .person__top > div{ min-height:96px; }
.person--board .person__top > div{ min-height:82px; }
.person--board{ min-height:0; }
.person--exec .person__creds{ margin-top:6px; }

.roster{
  display:grid; gap:16px; margin-top:var(--step);
  grid-template-columns:repeat(auto-fit, minmax(272px, 1fr));
}
.rostercard{
  display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--rule);
  border-radius:var(--radius); padding:20px 22px 18px;
  /* One height for every card, whether or not the name wraps, the affiliation
     is present, or there is a profile link. Content may exceed it safely. */
  min-height:158px;
}
.rostercard h3{
  font-family:var(--display); font-size:16.5px; font-weight:700; line-height:1.35;
  color:var(--blue-deep); margin:0;
}
.rostercard p{ font-size:14.5px; line-height:1.5; color:var(--ink-soft); margin:8px 0 0; }
.rostercard__link{ margin-top:auto; padding-top:14px; }
.rostercard__link a{
  font-family:var(--display); font-size:13px; font-weight:700;
  color:var(--magenta-deep); text-decoration:none; border:none;
  display:inline-flex; align-items:center;
}
.rostercard__link a::after{
  content:""; width:6px; height:6px; margin-left:7px;
  border-top:2px solid currentColor; border-right:2px solid currentColor;
  transform:rotate(45deg); transition:transform .15s;
}
.rostercard__link a:hover{ color:var(--blue-deep); }
.rostercard__link a:hover::after{ transform:rotate(45deg) translate(2px,-2px); }

/* ==========================================================================
   CONTACT (/contact/)
   Form plus the practical details, side by side.
   ========================================================================== */
.urgent{
  max-width:56ch; margin:22px auto 0; font-size:16.5px; line-height:1.6;
  color:var(--ink-soft);
}
.urgent a{ font-weight:700; color:var(--magenta-deep); }

.contactgrid{
  display:grid; gap:clamp(30px, 4vw, 58px); align-items:start;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr);
}
@media (max-width:860px){ .contactgrid{ grid-template-columns:1fr; } }

.field{ margin-bottom:20px; }
.field label{
  display:block; font-family:var(--display); font-size:14px; font-weight:700;
  color:var(--blue-deep); margin-bottom:8px;
}
.field label span{ font-weight:600; color:var(--ink-faint); }
.field input,
.field select,
.field textarea{
  width:100%; font-family:var(--body); font-size:16px; line-height:1.5;
  color:var(--ink); background:var(--paper);
  border:1px solid var(--rule-strong); border-radius:var(--radius);
  padding:13px 15px; transition:border-color .15s, box-shadow .15s;
}
.field textarea{ resize:vertical; min-height:140px; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(42,107,168,.18);
}
.field__row{ display:grid; gap:18px; grid-template-columns:1fr 1fr; }

/* Consent checkbox row.
   .field input is width:100%, which is right for text inputs and wrong for a
   checkbox, so the consent row gets its own scope rather than an inline patch. */
.consent{
  display:flex; gap:12px; align-items:flex-start;
  margin:2px 0 22px; padding:14px 16px;
  background:var(--magenta-wash); border-radius:var(--radius);
}
.consent input[type="checkbox"]{
  width:19px; height:19px; flex:0 0 19px;
  margin:1px 0 0; padding:0;
  accent-color:var(--magenta); cursor:pointer;
}
.consent span{
  font-family:var(--body); font-size:14.5px; line-height:1.6;
  font-weight:400; color:var(--ink-soft); cursor:pointer;
}

@media (max-width:560px){ .field__row{ grid-template-columns:1fr; } }

/* Honeypot: present for bots, off-screen for people and screen readers skip it
   because it carries no meaningful label in the tab order. */
.form__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__note{ font-size:14px; line-height:1.6; color:var(--ink-soft); margin:18px 0 0; max-width:52ch; }
.form button[type="submit"]{ border:none; cursor:pointer; }

.deets{
  background:var(--paper); border:1px solid var(--rule);
  border-radius:var(--radius-lg); padding:30px 30px 26px;
}
.deets h3{
  font-family:var(--display); font-size:19px; font-weight:700;
  color:var(--blue-deep); margin:0 0 12px;
}
.deets__addr{ font-size:16px; line-height:1.65; color:var(--ink-soft); margin:0 0 22px; }
.deets__sub{
  font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-faint); margin:24px 0 10px;
}
.deets__list{
  display:grid; grid-template-columns:auto 1fr; gap:8px 18px;
  margin:0; font-size:16px;
}
.deets__list dt{ font-family:var(--display); font-size:14px; font-weight:700; color:var(--ink-soft); align-self:center; }
.deets__list dd{ margin:0; color:var(--ink); }
.deets__list a{ color:var(--blue-deep); font-weight:700; }
.deets__note{
  font-size:14px; line-height:1.6; color:var(--ink-soft);
  margin:24px 0 0; padding-top:18px; border-top:1px solid var(--rule);
}

/* ==========================================================================
   DONATE MONEY (/donate-money/)
   Amount picker and donor UI. No payment processor is connected yet; the
   submit routes to /contact/ until one is chosen.
   ========================================================================== */
.givegrid{
  display:grid; gap:clamp(30px, 4vw, 56px); align-items:start;
  grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr);
}
@media (max-width:860px){ .givegrid{ grid-template-columns:1fr; } }

.give__form{
  background:var(--paper); border:1px solid var(--rule);
  border-radius:var(--radius-lg); padding:clamp(24px,3vw,34px); box-shadow:var(--shadow);
}
.give__form fieldset{ border:none; margin:0 0 26px; padding:0; }
.give__form legend{
  font-family:var(--display); font-size:14px; font-weight:700;
  color:var(--blue-deep); margin-bottom:12px; padding:0;
}

.give__freq{ display:flex; }
.freq{ flex:1; }
.freq input{ position:absolute; opacity:0; pointer-events:none; }
.freq span{
  display:block; text-align:center; cursor:pointer;
  font-family:var(--display); font-size:15px; font-weight:600; color:var(--ink-soft);
  padding:12px; border:1px solid var(--rule-strong);
}
.freq:first-child span{ border-radius:var(--pill) 0 0 var(--pill); }
.freq:last-child span{ border-radius:0 var(--pill) var(--pill) 0; border-left:none; }
.freq input:checked + span{ background:var(--blue); border-color:var(--blue); color:#fff; }
.freq input:focus-visible + span{ outline:2px solid var(--blue-deep); outline-offset:2px; }

.tiers{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tier{ cursor:pointer; display:block; }
.tier input{ position:absolute; opacity:0; pointer-events:none; }
.tier__amt{
  display:block; font-family:var(--display); font-size:22px; font-weight:700;
  color:var(--blue-deep);
}
.tier__out{ display:block; font-size:13.5px; color:var(--ink-soft); margin-top:2px; }
.tier > input + span,
.tier:not(.tier--custom){
  border:1px solid var(--rule-strong); border-radius:var(--radius);
  padding:14px 16px; transition:border-color .15s, box-shadow .15s, background .15s;
}
.tier:has(input:checked){
  border-color:var(--blue); background:var(--blue-wash);
  box-shadow:0 0 0 2px var(--blue) inset;
}
.tier:has(input:focus-visible){ outline:2px solid var(--blue-deep); outline-offset:2px; }
.tier--custom{
  display:flex; align-items:center; gap:8px; margin-top:12px;
  border:1px solid var(--rule-strong); border-radius:var(--radius); padding:6px 16px;
}
.tier--custom .tier__amt{ font-size:20px; }
.tier--custom input{
  position:static; opacity:1; pointer-events:auto; flex:1; border:none;
  font-family:var(--body); font-size:16px; padding:10px 4px; background:transparent;
}
.tier--custom input:focus{ outline:none; }
.tier--custom:focus-within{ border-color:var(--blue); box-shadow:0 0 0 2px var(--blue) inset; }

.give__submit{ width:100%; border:none; cursor:pointer; margin-top:4px; }
.give__stub{
  font-size:14px; line-height:1.6; color:var(--ink-soft);
  background:var(--wash); border-radius:var(--radius);
  padding:14px 16px; margin:16px 0 0;
}
.give__secure{ font-size:13px; line-height:1.6; color:var(--ink-faint); margin:18px 0 0; }

.give__aside .label{ margin-bottom:24px; }
.give__uses{ list-style:none; margin:0; padding:0; }
.give__uses li{
  position:relative; padding:0 0 14px 30px; font-size:15.5px; line-height:1.55;
  color:var(--ink-soft);
}
.give__uses li::before{
  content:""; position:absolute; left:0; top:7px; width:16px; height:9px;
  border-left:2.5px solid var(--teal-deep); border-bottom:2.5px solid var(--teal-deep);
  transform:rotate(-45deg);
}
.card__link{ margin:16px 0 0; }
.card__link a{
  font-family:var(--display); font-size:14px; font-weight:700;
  color:var(--magenta-deep); text-decoration:none; display:inline-flex; align-items:center;
}
.card__link a::after{
  content:""; width:6px; height:6px; margin-left:7px;
  border-top:2px solid currentColor; border-right:2px solid currentColor;
  transform:rotate(45deg); transition:transform .15s;
}
.card__link a:hover{ color:var(--blue-deep); }
.card__link a:hover::after{ transform:rotate(45deg) translate(2px,-2px); }

/* ==========================================================================
   STORE LOCATOR PLACEHOLDER (/milk-donors/drop-off/, /families/milk-express/)
   Stands in for the third-party map widget until the client's account is wired.
   ========================================================================== */
.locator{
  background:var(--paper); border:2px dashed var(--rule-strong);
  border-radius:var(--radius-lg); padding:clamp(36px,6vw,72px) 24px;
  text-align:center; margin-top:var(--step);
}
.locator__inner{ max-width:46ch; margin:0 auto; }
.locator__pin{ width:48px; height:48px; color:var(--blue); margin:0 auto 18px; display:block; }
.locator__title{
  font-family:var(--display); font-size:19px; font-weight:700;
  color:var(--blue-deep); margin:0 0 10px;
}
.locator__note{ font-size:15.5px; line-height:1.6; color:var(--ink-soft); margin:0; }
.locator__note a{ font-weight:700; color:var(--magenta-deep); }

/* ==========================================================================
   RECEIVE MILK (/families/receive-milk/)
   The one first step, then the three numbered options.
   ========================================================================== */
.firststep{
  background:var(--paper); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  padding:clamp(28px,4vw,44px); max-width:760px; margin:0 auto;
}
.firststep__note{
  font-size:14px; line-height:1.6; color:var(--ink-soft);
  margin:22px 0 0; padding-top:18px; border-top:1px solid var(--rule);
}

.ways{ display:grid; gap:20px; margin-top:var(--step); }
.way{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,3vw,34px);
  background:var(--paper); border:1px solid var(--rule);
  border-radius:var(--radius-lg); padding:clamp(22px,3vw,32px); align-items:start;
}
.way__num{
  font-family:var(--display); font-size:34px; font-weight:700; line-height:1;
  color:#fff; background:var(--blue); border-radius:50%;
  width:58px; height:58px; display:flex; align-items:center; justify-content:center;
  margin:0; flex:none;
}
.way:nth-child(2) .way__num{ background:var(--teal-deep); }
.way:nth-child(3) .way__num{ background:var(--magenta); }
.way__body h3{
  font-family:var(--display); font-size:20px; font-weight:700; line-height:1.3;
  color:var(--blue-deep); margin:0 0 10px;
}
.way__body > p{ font-size:16px; line-height:1.6; color:var(--ink-soft); margin:0 0 12px; max-width:64ch; }
.way__meta{
  font-size:14.5px; line-height:1.55; color:var(--ink-soft);
  background:var(--wash); border-radius:var(--radius); padding:12px 15px; margin:0 0 12px;
}
.way__meta--flag{
  background:var(--magenta-wash); color:var(--magenta-deep); font-weight:600;
}
.way .card__link{ margin:14px 0 0; }
@media (max-width:560px){
  .way{ grid-template-columns:1fr; gap:14px; }
  .way__num{ width:48px; height:48px; font-size:26px; }
}

/* Tighter head for pages that lead straight into content, and the horizontal
   three-column variant of the ways grid used on /families/receive-milk/. */
.pr-head--tight{ padding-bottom:calc(var(--step) * 0.5); }

.ways--cols{
  grid-template-columns:repeat(3, 1fr); gap:20px; align-items:stretch;
}
.ways--cols .way{
  display:flex; flex-direction:column; grid-template-columns:none;
  padding:26px 26px 22px;
}
.way__head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.ways--cols .way__num{ margin:0; width:44px; height:44px; font-size:22px; flex:none; }
.ways--cols .way h3{
  font-family:var(--display); font-size:18px; font-weight:700; line-height:1.25;
  color:var(--blue-deep); margin:0;
}
.ways--cols .way > p{ font-size:15px; line-height:1.55; color:var(--ink-soft); margin:0 0 12px; max-width:none; }
.ways--cols .way .way__meta{ margin:0 0 12px; font-size:13.5px; padding:11px 13px; }
.ways--cols .way .card__link{ margin-top:auto; padding-top:4px; }
@media (max-width:820px){ .ways--cols{ grid-template-columns:1fr; } }

/* ==========================================================================
   MEDICAL RELIEF FUND (/families/medical-relief-fund/)
   Eligibility line, and Tre's story as text-left / responsive-video-right.
   ========================================================================== */
.relief__elig{
  max-width:56ch; margin:22px auto 0; font-size:16px; line-height:1.6;
  color:var(--ink-soft);
}
.relief__elig strong{ color:var(--blue-deep); }

.storysplit{
  display:grid; gap:clamp(30px,4vw,54px); align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
}
@media (max-width:860px){ .storysplit{ grid-template-columns:1fr; } }
.storysplit__text p{ font-size:16.5px; line-height:1.65; color:var(--ink-soft); max-width:52ch; }

/* Responsive 16:9 video wrapper: the iframe fills it at any width. */
.videoframe{
  position:relative; width:100%; padding-top:56.25%;
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-lg); background:#000;
}
.videoframe iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

/* Large pull-quote for testimonials on the dark pr-window band. */
.bigquote{
  max-width:1200px; width:94%; margin:0 auto 28px; text-align:center; border:none; padding:0;
}
.bigquote p{
  font-family:var(--display); font-size:clamp(24px,3.6vw,42px); line-height:1.3;
  color:#fff; margin:0 0 22px; text-wrap:balance;
}
.bigquote cite{
  font-style:normal; font-size:15px; color:#dcecf4; font-family:var(--body);
}

/* ==========================================================================
   SAFETY STANDARDS (/safety-standards/)
   ========================================================================== */
/* Four-across layer grid on wide screens, two-up on mid, one on mobile. */
.safety-grid{ grid-template-columns:repeat(4, 1fr); }
@media (max-width:1080px){ .safety-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px){ .safety-grid{ grid-template-columns:1fr; } }

.safety-pillars{ margin-top:var(--step); }

/* Donor-screening callout below the FDA split. */
.screenbox{
  margin-top:var(--step); background:var(--paper); border:1px solid var(--rule);
  border-left:5px solid var(--blue); border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,34px); max-width:760px;
}
.screenbox h3{
  font-family:var(--display); font-size:19px; font-weight:700; color:var(--blue-deep);
  margin:0 0 10px;
}
.screenbox p{ font-size:16px; line-height:1.6; color:var(--ink-soft); margin:0 0 14px; }

/* Safety page additions: photo-with-quote, 2x2 pillars, closing collage. */
.pillars-2x2{ grid-template-columns:repeat(2, 1fr); max-width:900px; margin-left:auto; margin-right:auto; }
@media (max-width:640px){ .pillars-2x2{ grid-template-columns:1fr; } }

.photoquote{
  margin:var(--step) auto 0; max-width:900px;
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg);
}
.photoquote__img{ line-height:0; }
.photoquote__img img{ width:100%; height:auto; display:block; }
.photoquote blockquote{
  margin:0; padding:clamp(24px,3.4vw,38px);
  background:var(--blue-deep); color:#fff; border:none; text-align:center;
}
.photoquote blockquote p{
  font-size:clamp(15px,1.6vw,18.5px); line-height:1.6; margin:0 auto 14px; color:#fff; max-width:70ch;
}
.photoquote blockquote cite{ font-style:normal; font-size:14px; color:#dcecf4; }

.closesplit{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(30px,4vw,56px); align-items:center; text-align:left;
}
.closesplit__text .eyebrow{ margin-left:0; }
.closesplit__text h2{ margin-left:0; margin-right:0; max-width:22ch; }
.closesplit__text p{ margin-left:0; margin-right:0; }
.closesplit__text .btnrow{ justify-content:flex-start; }
.closesplit__art img{
  display:block; width:100%; height:auto; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
}
@media (max-width:820px){
  .closesplit{ grid-template-columns:1fr; text-align:center; }
  .closesplit__art{ order:-1; max-width:420px; margin:0 auto; }
  .closesplit__text .eyebrow, .closesplit__text h2, .closesplit__text p{ margin-left:auto; margin-right:auto; }
  .closesplit__text h2{ max-width:min(28ch,100%); }
  .closesplit__text .btnrow{ justify-content:center; }
}

/* ==========================================================================
   HEALTHCARE PROFESSIONAL RESOURCES (/healthcare-professional-resources/)
   ========================================================================== */
.contactline{
  background:var(--wash); border-radius:var(--radius); padding:14px 18px;
  font-size:15.5px; line-height:1.6; color:var(--ink-soft); margin:0 0 16px;
}
.contactline strong{ color:var(--blue-deep); }

/* Clinical indications: a compact multi-column checklist. */
.indications{ max-width:820px; margin:0 auto var(--step); }
.indications ul{
  list-style:none; margin:0; padding:0;
  columns:2; column-gap:40px;
}
.indications li{
  position:relative; padding:0 0 10px 26px; break-inside:avoid;
  font-size:15.5px; line-height:1.5; color:var(--ink-soft);
}
.indications li::before{
  content:""; position:absolute; left:0; top:6px; width:14px; height:8px;
  border-left:2.5px solid var(--teal-deep); border-bottom:2.5px solid var(--teal-deep);
  transform:rotate(-45deg);
}
@media (max-width:560px){ .indications ul{ columns:1; } }

/* HCP page: compact ordering row, packaging list, slim safety strip. */
.orderrow{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,3vw,44px);
  align-items:start; max-width:960px; margin:0 auto;
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,34px);
}
@media (max-width:720px){ .orderrow{ grid-template-columns:1fr; } }
.orderrow__lead{ margin:0 0 14px; font-size:15.5px; color:var(--ink-soft); }
.channellist{ list-style:none; margin:0; padding:0; }
.channellist li{ padding:9px 0; border-bottom:1px solid var(--rule); font-size:16px; color:var(--ink-soft); }
.channellist li:last-child{ border-bottom:none; }
.channellist__k{
  display:inline-block; min-width:58px; font-family:var(--display); font-weight:700;
  color:var(--blue-deep);
}
.channellist__note{ font-size:13.5px; color:var(--ink-faint); }
.orderrow__timing{ background:var(--wash); border-radius:var(--radius); padding:18px 20px; }
.orderrow__timing h3{ font-family:var(--display); font-size:16px; font-weight:700; color:var(--blue-deep); margin:0 0 8px; }
.orderrow__timing p{ margin:0; font-size:14.5px; line-height:1.55; color:var(--ink-soft); }

.packaging{ max-width:960px; margin:22px auto 0; }
.packaging__label{ font-family:var(--display); font-weight:700; color:var(--blue-deep); font-size:15px; margin:0 0 10px; }
.packaging__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:720px){ .packaging__list{ grid-template-columns:1fr; } }
.packaging__list li{ font-size:14.5px; line-height:1.5; color:var(--ink-soft); padding-left:16px; position:relative; }
.packaging__list li::before{ content:""; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:50%; background:var(--teal-deep); }

.safety-strip__inner{
  display:flex; align-items:center; gap:clamp(20px,3vw,40px);
  max-width:1000px; margin:0 auto;
}
.safety-strip__inner p{ font-size:14.5px; line-height:1.6; }
@media (max-width:760px){ .safety-strip__inner{ flex-direction:column; align-items:flex-start; } }

/* HCP ordering, simplified: three calm channel blocks + plain notes. */
.orderchannels{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  max-width:760px; margin:0 auto;
}
@media (max-width:600px){ .orderchannels{ grid-template-columns:1fr; } }
.orderchannel{
  text-align:center; background:var(--paper); border:1px solid var(--rule);
  border-radius:var(--radius); padding:20px 16px;
}
.orderchannel__k{
  font-family:var(--display); font-size:12.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--magenta-deep); margin:0 0 6px;
}
.orderchannel__v{ font-size:16px; color:var(--blue-deep); font-weight:600; margin:0; word-break:break-word; }
.orderchannel__v a{ color:var(--blue-deep); }
.ordernote{
  max-width:640px; margin:20px auto 0; text-align:center;
  font-size:14px; line-height:1.6; color:var(--ink-faint);
}
.ordernote--pack{ margin-top:12px; }
.ordernote--pack strong{ color:var(--ink-soft); }

/* Four-across card grid (volunteer opportunities), reflows 2-up then 1-up. */
.cards--4{ grid-template-columns:repeat(4, 1fr); }
@media (max-width:1000px){ .cards--4{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .cards--4{ grid-template-columns:1fr; } }

/* Clean single-column check list for use inside a split text column. */
.ticklist{ list-style:none; margin:18px 0 0; padding:0; }
.ticklist li{
  position:relative; padding:0 0 12px 30px; font-size:16.5px; line-height:1.5;
  color:var(--ink-soft);
}
.ticklist li:last-child{ padding-bottom:0; }
.ticklist li::before{
  content:""; position:absolute; left:2px; top:6px; width:15px; height:9px;
  border-left:2.5px solid var(--teal-deep); border-bottom:2.5px solid var(--teal-deep);
  transform:rotate(-45deg);
}

/* Press kit: the "please" courtesy panel beside the proper-reference copy. */
.pressplease{
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,32px); align-self:start;
}
.pressplease__label{
  font-family:var(--display); font-size:15px; font-weight:700; color:var(--blue-deep);
  margin:0 0 6px;
}
.pressplease .ticklist{ margin-top:12px; }

/* ==========================================================================
   PRIVACY POLICY / legal body (/privacy-policy/)
   Readable long-form legal text. Left-aligned, comfortable measure.
   ========================================================================== */
.legal{ max-width:760px; margin:0 auto; }
.legal > p{ font-size:16px; line-height:1.7; color:var(--ink-soft); margin:0 0 18px; }
.legal h2{
  font-family:var(--display); font-size:19px; font-weight:700; color:var(--blue-deep);
  line-height:1.35; margin:32px 0 12px; max-width:none;
}
.legal ul{ margin:0 0 18px; padding:0 0 0 22px; }
.legal li{ font-size:15.5px; line-height:1.6; color:var(--ink-soft); margin:0 0 10px; }
.legal a{ color:var(--magenta-deep); }
.legal__exec{
  background:var(--wash); border-radius:var(--radius); padding:20px 22px;
  margin:30px 0 18px;
}
.legal__exec-label{
  font-family:var(--display); font-size:12.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--blue-deep); margin:0 0 8px;
}
.legal__exec p{ font-size:15.5px; line-height:1.6; color:var(--ink-soft); margin:0; }
.legal__note{ font-weight:600; color:var(--ink)!important; }
.legal__updated{ font-size:14px; color:var(--ink-faint)!important; font-style:italic; margin-top:8px!important; }

/* ==========================================================================
   CAREERS (/careers/)
   ========================================================================== */
.btn--sm{ padding:10px 20px; font-size:14px; }

.joblist{ max-width:820px; margin:0 auto; display:grid; gap:16px; }
.joblisting{
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  background:var(--paper); border:1px solid var(--rule); border-left:5px solid var(--blue);
  border-radius:var(--radius-lg); padding:clamp(22px,3vw,30px);
}
.joblisting__body h3{
  font-family:var(--display); font-size:20px; font-weight:700; color:var(--blue-deep);
  line-height:1.3; margin:0 0 4px;
}
.joblisting__meta{
  font-size:13.5px; font-weight:600; color:var(--magenta-deep); margin:0 0 10px;
  letter-spacing:.02em;
}
.joblisting__body p{ font-size:15.5px; line-height:1.6; color:var(--ink-soft); margin:0; max-width:60ch; }
.joblisting__actions{ display:flex; flex-direction:column; gap:10px; flex:none; }
.joblisting__actions .btn{ white-space:nowrap; text-align:center; }
@media (max-width:680px){
  .joblisting{ flex-direction:column; align-items:stretch; }
  .joblisting__body p{ max-width:none; }
  .joblisting__actions{ flex-direction:column; }
  .joblisting__actions .btn{ flex:none; width:100%; white-space:normal; }
}
.joblist--empty{
  max-width:640px; margin:0 auto; text-align:center; background:var(--paper);
  border:1px dashed var(--rule-strong); border-radius:var(--radius-lg); padding:32px 28px;
}
.joblist--empty p{ font-size:16px; line-height:1.6; color:var(--ink-soft); margin:0; }
.joblist__how{
  max-width:640px; margin:var(--step) auto 0; text-align:center;
  font-size:15px; color:var(--ink-soft);
}

.linkedincta{
  max-width:820px; margin:0 auto; background:var(--blue-wash);
  border-radius:var(--radius-lg); padding:clamp(28px,4vw,44px);
}

/* ==========================================================================
   MOBILE REFINEMENTS  (added 12 Aug 2026)
   Reviewed at 390px. Three things needed fixing: button rows ran off the
   right edge, the four-column comparison table had nowhere to go, and a few
   blocks kept desktop padding on a narrow screen.
   ========================================================================== */

@media (max-width:560px){
  /* Buttons stack full width and centre, so a long label can never push a
     sibling off-screen. This is the main fix. */
  .btnrow,
  .pr-actions,
  .hero .btnrow{
    justify-content:center;
    gap:12px;
  }
  .btnrow > .btn,
  .pr-actions > .btn{
    flex:1 1 100%;
    text-align:center;
    padding-left:18px; padding-right:18px;
  }
  /* Utility bar pills wrap centred rather than crowding the right edge. */
  .utility .shell{ justify-content:center; }

  /* Cards and panels lose the desktop padding that eats a narrow screen. */
  .card{ padding:24px 22px 22px; }
  .offer__body{ padding:26px 22px 24px; }
  .reco-cards .card h3{ font-size:17px; }

  /* Long addresses and emails should wrap, not overflow. */
  .foot a, .measure, .card p{ overflow-wrap:anywhere; }

  /* Enough room for the swoosh under the stacked buttons, no more. The swoosh
     is clamp(50px,7vw,100px) tall, so this leaves a small margin. */
  .hero{ padding-bottom:108px; min-height:0; }
  .hero h1{ font-size:clamp(26px, 7.4vw, 34px); }
}

@media (max-width:760px){
  /* The comparison table has four columns and cannot usefully reflow, so it
     scrolls horizontally instead of squashing to unreadable. */
  .compare{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .compare table{ min-width:640px; }
  .compare th, .compare td{ padding:14px 16px; font-size:15px; }
}

@media (max-width:420px){
  /* Smallest common handsets. */
  .btn{ font-size:13px; letter-spacing:.06em; }
  .card h3{ font-size:18px; }
}


/* ==========================================================================
   Sept. 8, 2026 implementation pass: brand-guide palette, stories/resources
   ========================================================================== */
.resource-library{ margin-top:var(--step); }
.resource-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:26px; }
.resource-item{ background:var(--paper); border:1px solid var(--rule); border-top:5px solid var(--blue); border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow); }
.resource-item:nth-child(2n){ border-top-color:var(--magenta); }
.resource-item:nth-child(3n){ border-top-color:var(--plum); }
.resource-item h3{ margin:4px 0 8px; }
.resource-item p{ color:var(--ink-soft); font-size:15.5px; }
.resource-item .card__cap{ color:var(--blue); }
@media(max-width:900px){ .resource-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:620px){ .resource-grid{ grid-template-columns:1fr; } }

.storygrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:var(--step); }
.storycard{ background:var(--paper); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--rule); display:flex; flex-direction:column; }
.storycard__img{ aspect-ratio:16/10; width:100%; object-fit:cover; object-position:center; }
.storycard__body{ padding:24px 26px 26px; display:flex; flex-direction:column; flex:1; }
.storycard__body blockquote{ margin:0 0 14px; font-size:18px; line-height:1.55; color:var(--ink); }
.storycard__who{ margin-top:auto; font-family:var(--display); font-weight:700; color:var(--blue); }
.storycard__role{ color:var(--ink-soft); font-size:14px; margin-top:2px; }
@media(max-width:760px){ .storygrid{ grid-template-columns:1fr; } }

/* Replace the crowded business-card treatment with an editorial directory. */
.team{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:46px; row-gap:0; }
.person{ background:transparent; border:0; border-bottom:1px solid var(--rule-strong); border-radius:0; box-shadow:none; padding:28px 0; min-height:0; }
.person__top{ padding-bottom:14px; align-items:center; }
.person__shot{ width:92px; height:92px; border-radius:50%; }
.person__top > div{ min-height:0; }
.person__creds{ font-size:12px; letter-spacing:.04em; margin-top:5px; }
.person__bio{ margin-top:4px; padding-top:12px; }
.person--board{ padding:20px 0; }
.person--board .person__shot{ width:72px; height:72px; }
@media(max-width:820px){ .team{ grid-template-columns:1fr; } }

/* Safety page: more visual separation and stronger step hierarchy. */
.safety-grid .way{ border:1px solid var(--rule); border-top:5px solid var(--blue); box-shadow:var(--shadow); background:var(--paper); }
.safety-grid .way:nth-child(2){ border-top-color:var(--magenta); }
.safety-grid .way:nth-child(3){ border-top-color:var(--plum); }
.safety-grid .way:nth-child(4){ border-top-color:var(--blue); }
.safety-grid .way__num{ box-shadow:0 0 0 7px var(--blue-wash); }
.safety-highlight{ margin-top:28px; background:var(--blue); color:#fff; border-radius:var(--radius-lg); padding:24px 28px; display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; }
.safety-highlight strong{ font-family:var(--display); font-size:20px; }
.safety-highlight p{ margin:0; color:#fff; }
.safety-highlight__mark{ width:54px; height:54px; border-radius:50%; background:var(--magenta); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; font-size:24px; }
@media(max-width:620px){ .safety-highlight{ grid-template-columns:1fr; } }

.fee-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:var(--step); }
.fee-card{ background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius-lg); padding:24px; border-top:5px solid var(--blue); }
.fee-card:nth-child(2n){ border-top-color:var(--magenta); }
.fee-card:nth-child(3n){ border-top-color:var(--plum); }
.fee-card h3{ margin-top:0; }
.fee-card p{ color:var(--ink-soft); }
@media(max-width:850px){ .fee-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .fee-grid{ grid-template-columns:1fr; } }

.ptable--bio{max-width:900px;overflow-x:auto;}
.ptable--bio .ptable__row{grid-template-columns:1.5fr repeat(3,1fr);min-width:720px;}
@media (max-width:640px){.ptable--bio .ptable__row{grid-template-columns:1.5fr repeat(3,1fr);}.ptable--bio .ptable__row--head{display:grid;}.ptable--bio .ptable__cell{padding:12px 14px;}.ptable--bio .ptable__cell--holder::before,.ptable--bio .ptable__cell--retort::before{content:none;}}

.authority--logos{display:flex;justify-content:center;align-items:center;gap:28px;flex-wrap:wrap;margin-top:28px;}
.authority__logo{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--rule);border-radius:10px;padding:10px 14px;min-height:76px;min-width:100px;}
.authority__logo img{max-height:54px;max-width:110px;width:auto;}
.authority__logo--wide img{max-width:170px;}
@media(max-width:620px){.authority--logos{gap:14px}.authority__logo{min-height:64px}.authority__logo img{max-height:44px}}


/* APPROVED MEDIA LIBRARY - Sept 8 2026 */
.media-preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:28px}
.media-preview-grid figure{margin:0;background:var(--paper);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.media-preview-grid img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.media-preview-grid figcaption{padding:11px 14px;font-family:var(--display);font-weight:700;color:var(--blue);font-size:14px}
.media-video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:30px}
.media-video-card{background:var(--paper);border-radius:18px;padding:14px 14px 18px;box-shadow:var(--shadow)}
.media-video-card video,.media-feature video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#000;border-radius:12px}
.media-video-card h3{margin:14px 4px 5px}.media-video-card p{margin:0 4px}
.media-feature{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,64px);align-items:center}
.media-feature--reverse .media-feature__copy{order:2}.media-feature--reverse .media-feature__video{order:1}
.media-feature__copy h2{margin-top:0}.media-feature__video{border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
@media(max-width:760px){.media-preview-grid,.media-video-grid,.media-feature{grid-template-columns:1fr}.media-feature--reverse .media-feature__copy,.media-feature--reverse .media-feature__video{order:initial}}

.press-logo-preview{display:block;width:min(190px,80%);height:auto;margin:0 0 14px}

/* 2026-09-09 current-site audit additions */
.supporter-logo{display:block;max-width:420px;width:min(100%,420px);height:auto;margin:1.5rem auto 0}
.person__fact{margin-top:1rem;padding:.8rem 1rem;border-left:4px solid var(--magenta,#A10082);background:rgba(0,54,89,.05);font-size:.95rem}
.give__hosted h2{margin-top:.25rem}.mini-card{display:grid;grid-template-columns:72px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid rgba(0,54,89,.15)}.mini-card strong{font-size:1.2rem;color:#A10082}.mini-card span{align-self:center}

/* Round 2 client edits */
.label--teal{border-left-color:var(--teal);}
.label--teal .label__cap,.label--teal .label__fig{color:var(--teal-deep);}
.selfcheck ul{display:grid;gap:10px;}
.selfcheck li{margin:0;}
.video-link{display:block;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);}
.video-link img{display:block;width:100%;height:auto;}
.qgiv-embed-container{max-width:100%;margin:18px auto;}

/* Round 2 completion pass: resource requests, trust seal, clickable media */
.foot__trust{margin-top:18px;display:flex;justify-content:flex-start;align-items:center}
.foot__trust img{width:86px;height:86px;object-fit:contain;background:#fff;border-radius:2px}
.media-preview-grid figure a{display:block}
.media-preview-grid figure a:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.volunteer-photo-grid img{aspect-ratio:4/3}
@media(max-width:760px){.foot__trust{justify-content:center}}


/* Candid seal integrated with footer legal line */
.foot__legalrow{
  margin-top:calc(var(--step) * 1.1);
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.16);
  display:flex;
  align-items:center;
  gap:18px;
}
.foot__legalrow .foot__legal{
  margin-top:0;
  padding-top:0;
  border-top:0;
  flex:1;
}
.foot__legalrow .foot__trust{
  margin-top:0;
  flex:0 0 auto;
  justify-content:flex-start;
}
.foot__legalrow .foot__trust img{
  width:74px;
  height:74px;
}
@media(max-width:760px){
  .foot__legalrow{align-items:flex-start;gap:14px;}
  .foot__legalrow .foot__trust{justify-content:flex-start;}
  .foot__legalrow .foot__trust img{width:64px;height:64px;}
}