/* ============================================================
   PRISM HEALTH Design System v4 · "The Community Institution"
   White paper · Heart Beat maroon #861626 · Joy #690C1A · warm gold
   Poppins display / Roboto body, set big, warm, and plain.
   Reference points: PillPack simplicity, university-press polish.
   v4: maroon hero band on every page, transparent→solid header,
   FAQ accordions, steps, figures, CTA panels, photo-card grids.
   ============================================================ */

:root {
  --paper: #FFFFFF;
  --cream: #FAF6F0;
  --maroon: #861626;
  --maroon-deep: #690C1A;
  --maroon-ink: #4A0812;
  --maroon-soft: #F6E9EB;
  --gold: #C9971F;
  --gold-bright: #E9BC57;
  --gold-soft: #F5E9CF;
  --blush: #F3DCE0;
  --ink: #33302E;
  --ink-soft: #6E6862;
  --line: #E9E2DA;

  --f-display: 'Poppins', system-ui, sans-serif;
  --f-body: 'Roboto', system-ui, sans-serif;

  --w: 1120px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --sec: clamp(3.5rem, 8vw, 6.5rem);
  --r: 18px;
  --r-lg: 26px;
  --hdr-h: 88px;
  --shadow: 0 10px 30px rgba(105, 12, 26, 0.08);
  --shadow-lg: 0 22px 55px rgba(60, 8, 16, 0.16);
  --ease: cubic-bezier(0.25, 0.8, 0.35, 1);

  /* the signature maroon gradient, used by heroes, bands, CTA panels */
  --maroon-grad:
    radial-gradient(110% 90% at 88% -12%, rgba(201, 151, 31, 0.16), transparent 55%),
    radial-gradient(130% 110% at 8% 112%, rgba(30, 2, 8, 0.55), transparent 62%),
    linear-gradient(156deg, #8C1729 0%, #690C1A 48%, #4E0913 100%);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.15rem;            /* big type is the brief */
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--maroon); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--maroon-deep); }
ul, ol { padding-left: 1.2rem; }
::selection { background: var(--gold-soft); }

.wrap { width: min(var(--w), 100% - 2 * var(--pad)); margin-inline: auto; }

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--maroon-deep);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.4rem, 5.5vw, 3.9rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.35rem; }
p { margin-bottom: 1rem; }
.lead { font-size: clamp(1.2rem, 2vw, 1.35rem); color: var(--ink-soft); line-height: 1.65; }

.kicker {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

/* Signature: gold marker-underline, one key phrase, white sections only */
.hl {
  background-image: linear-gradient(to top, var(--gold-soft) 0%, var(--gold-soft) 38%, transparent 38%);
  border-radius: 2px;
  padding-inline: 0.08em;
}
/* Gold text accent for maroon heroes (replaces the underline there) */
.gold-txt { color: var(--gold-bright); }

/* Accessibility */
.skip-link {
  position: fixed; top: -4rem; left: 1.2rem; z-index: 300;
  background: var(--maroon-deep); color: #fff;
  padding: 0.7rem 1.2rem; border-radius: 999px;
  font-family: var(--f-display); font-weight: 500; text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* ---------- Buttons: friendly pills ---------- */
.btn {
  display: inline-block;
  font-family: var(--f-display); font-weight: 600; font-size: 1.02rem;
  padding: 0.9rem 1.9rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
              background 0.2s, color 0.2s, border-color 0.2s;
}
/* movement on hover is pointer-only; touch taps must not shift buttons */
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
}
.btn-maroon { background: var(--maroon); color: #fff; box-shadow: 0 6px 18px rgba(134, 22, 38, 0.28); }
.btn-maroon:hover { background: var(--maroon-deep); color: #fff; }
.btn-white { background: #fff; color: var(--maroon-deep); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.btn-white:hover { color: var(--maroon); }
.btn-quiet { background: transparent; color: var(--maroon-deep); border: 2px solid var(--line); }
.btn-quiet:hover { border-color: var(--maroon); color: var(--maroon); }
/* ghost pill for maroon surfaces */
.btn-ghost {
  background: rgba(255,255,255,0.07);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.55);
  backdrop-filter: blur(4px);
}
.btn-ghost:hover { background: #fff; color: var(--maroon-deep); border-color: #fff; }

/* ---------- Header: transparent over the hero, solid on scroll ---------- */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
              box-shadow 0.35s var(--ease);
}
.hdr-in {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  height: var(--hdr-h);
  transition: height 0.3s var(--ease);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; position: relative; z-index: 250; }
.brand img { height: 42px; width: auto; transition: height 0.3s var(--ease); }
.brand .logo-dark { display: none; }

.hdr-nav { display: flex; align-items: center; gap: 1.9rem; }
.hdr-nav > a, .nav-item > a {
  font-family: var(--f-display); font-weight: 500; font-size: 1rem;
  color: #fff; text-decoration: none;
  transition: color 0.25s;
}
@media (hover: hover) {
  .hdr-nav > a:hover, .nav-item > a:hover { color: var(--gold-bright); }
}
.hdr-nav > a[aria-current="page"], .nav-item > a[aria-current="page"] {
  color: var(--gold-bright);
}

/* dropdown (Our Clinics) */
.nav-item { position: relative; }
.nav-item > a { display: inline-flex; align-items: center; gap: 0.35rem; }
.nav-item .chev {
  width: 13px; height: 13px;
  stroke: currentColor; fill: none; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.3s var(--ease);
}
.nav-item:hover .chev, .nav-item:focus-within .chev { transform: rotate(180deg); }
.drop {
  position: absolute; top: 100%; left: 50%;
  transform: translate(-50%, 8px);
  padding-top: 1rem;             /* hover bridge over the gap */
  opacity: 0; pointer-events: none;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
  z-index: 110;
}
.nav-item:hover .drop, .nav-item:focus-within .drop {
  opacity: 1; pointer-events: auto;
  transform: translate(-50%, 0);
}
.drop-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 0.55rem;
  min-width: 250px;
  display: grid; gap: 0.1rem;
}
.drop-card a {
  display: block;
  font-family: var(--f-display); font-weight: 500; font-size: 0.98rem;
  color: var(--ink); text-decoration: none;
  padding: 0.6rem 0.95rem;
  border-radius: 11px;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
@media (hover: hover) {
  .drop-card a:hover { background: var(--maroon-soft); color: var(--maroon-deep); }
}
.drop-card a[aria-current="page"] { color: var(--maroon); }
.hdr-cta {
  padding: 0.65rem 1.5rem; font-size: 0.95rem;
  background: rgba(255,255,255,0.09);
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,0.55);
  backdrop-filter: blur(4px);
}
.hdr-cta:hover { background: #fff; color: var(--maroon-deep) !important; border-color: #fff; }

/* solid state, after scroll or with the mobile menu open */
.hdr.solid, .hdr.open {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 24px rgba(105, 12, 26, 0.06);
}
.hdr.solid .hdr-in { height: 68px; }
.hdr.solid .brand img { height: 34px; }
.hdr.solid .logo-light, .hdr.open .logo-light { display: none; }
.hdr.solid .logo-dark, .hdr.open .logo-dark { display: block; }
.hdr.solid .hdr-nav > a, .hdr.open .hdr-nav > a,
.hdr.solid .nav-item > a, .hdr.open .nav-item > a { color: var(--ink); }
@media (hover: hover) {
  .hdr.solid .hdr-nav > a:hover, .hdr.open .hdr-nav > a:hover,
  .hdr.solid .nav-item > a:hover, .hdr.open .nav-item > a:hover { color: var(--maroon); }
}
.hdr.solid .hdr-nav > a[aria-current="page"],
.hdr.open .hdr-nav > a[aria-current="page"],
.hdr.solid .nav-item > a[aria-current="page"],
.hdr.open .nav-item > a[aria-current="page"] { color: var(--maroon); }
.hdr.solid .hdr-cta, .hdr.open .hdr-cta {
  background: var(--maroon); color: #fff !important;
  border-color: var(--maroon);
  box-shadow: 0 6px 18px rgba(134, 22, 38, 0.28);
}
.hdr.solid .hdr-cta:hover, .hdr.open .hdr-cta:hover { background: var(--maroon-deep); border-color: var(--maroon-deep); }

.menu-btn {
  display: none;
  position: relative; z-index: 250; /* stays tappable above the open menu overlay */
  font-family: var(--f-display); font-weight: 600; font-size: 0.95rem;
  background: none; border: 2px solid rgba(255,255,255,0.55); border-radius: 999px;
  padding: 0.5rem 1.1rem; color: #fff; cursor: pointer;
  transition: color 0.25s, border-color 0.25s;
}
.hdr.solid .menu-btn, .hdr.open .menu-btn { color: var(--maroon-deep); border-color: var(--line); }
/* Menu sheet footer (motto + phone) is injected into the nav by site.js
   for the mobile sheet only. Hidden globally by default; it is revealed
   solely by `.hdr-nav.open .menu-foot` inside the mobile breakpoint, and
   `.open` never exists at desktop widths. Keeps it off the desktop header. */
.menu-foot { display: none; }

/* ---------- Hero band: the maroon signature, on every page ---------- */
.hero-band {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--maroon-grad);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero-band::before, .hero-band::after {
  content: "";
  position: absolute;
  width: 90vmax; height: 90vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.8;
  z-index: -1;
  will-change: transform;
}
.hero-band::before {
  background: radial-gradient(circle at 35% 35%, #A3283C 0%, #861626 45%, transparent 70%);
  top: -46vmax; left: -28vmax;
  animation: drift-a 36s ease-in-out infinite alternate;
}
.hero-band::after {
  background: radial-gradient(circle at 60% 60%, #7E1B2E 0%, rgba(201, 151, 31, 0.18) 52%, transparent 72%);
  bottom: -50vmax; right: -30vmax;
  animation: drift-b 44s ease-in-out infinite alternate;
}
@keyframes drift-a {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(9vmax, 7vmax) scale(1.18); }
}
@keyframes drift-b {
  from { transform: translate(0, 0) scale(1.1); }
  to   { transform: translate(-8vmax, -6vmax) scale(0.94); }
}
/* fine grain for the ultra-high-res feel */
.hero-band .grain, .cta-panel .grain, .band .grain, .strip .grain {
  position: absolute; inset: 0; z-index: -1;
  opacity: 0.05; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
/* faceted-triangle texture that echoes the Prism logo, whisper-quiet */
.hero-band .facet, .cta-panel .facet, .band .facet, .strip .facet {
  position: absolute; inset: 0; z-index: -1;
  opacity: 0.16; pointer-events: none;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.035) 25%, transparent 25%),
    linear-gradient(225deg, rgba(255,255,255,0.035) 25%, transparent 25%),
    linear-gradient(315deg, rgba(0,0,0,0.04) 25%, transparent 25%),
    linear-gradient(45deg, rgba(0,0,0,0.04) 25%, transparent 25%);
  background-size: 140px 140px;
}
.hero-band .kicker { color: var(--gold-soft); }
.hero-band h1 { color: #fff; text-wrap: balance; }
.hero-band .lead { color: var(--blush); }
.hero-band a:not(.btn) { color: #fff; }

/* Home variant: tall, centered, deep negative space */
.hero-band--home {
  min-height: min(92svh, 860px);
  text-align: center;
}
.hero-band--home .wrap { padding-block: calc(var(--hdr-h) + clamp(4rem, 10vh, 7rem)) clamp(9rem, 16vh, 12rem); }
.hero-band--home h1 { font-size: clamp(2.8rem, 6.5vw, 5rem); margin-bottom: 1.1rem; }
.hero-band--home .lead { max-width: 34rem; margin-inline: auto; }
.hero-band--home .kicker { display: flex; justify-content: center; }

/* Interior variant: shorter, left-aligned, generous */
.hero-band--page .wrap {
  padding-block: calc(var(--hdr-h) + clamp(3.5rem, 8vh, 6rem)) clamp(4rem, 9vh, 6.5rem);
}
.hero-band--page h1 { font-size: clamp(2.5rem, 5.5vw, 4.1rem); margin-bottom: 1rem; max-width: 18ch; }
.hero-band--page .lead { max-width: 40rem; }
.hero-band--page.center { text-align: center; }
.hero-band--page.center h1, .hero-band--page.center .lead { margin-inline: auto; }
.hero-band--page.center .kicker { display: flex; justify-content: center; }
.hero-band--page.center .hero-actions, .hero-band--page.center .hero-chips { justify-content: center; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; margin-top: 1.9rem; }

/* meta chips row for interior heroes */
.hero-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.7rem; }
.hero-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--f-display); font-weight: 500; font-size: 0.9rem;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(4px);
  padding: 0.42rem 1.05rem; border-radius: 999px;
}
.hero-chip svg { width: 16px; height: 16px; stroke: var(--gold-bright); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.hero-cue {
  position: absolute; left: 50%; bottom: 6.5rem; transform: translateX(-50%);
  width: 1px; height: 3.2rem;
  background: linear-gradient(rgba(255,255,255,0.75), transparent);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0% { transform: translateX(-50%) scaleY(0); transform-origin: top; }
  55% { transform: translateX(-50%) scaleY(1); transform-origin: top; }
  56% { transform-origin: bottom; }
  100% { transform: translateX(-50%) scaleY(0); transform-origin: bottom; }
}

/* ---------- Sections ---------- */
.sec { padding-block: var(--sec); }
.sec-cream { background: var(--cream); }
.sec-head { max-width: 44rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.sec-head.center { text-align: center; margin-inline: auto; }
.center { text-align: center; margin-inline: auto; }

/* Maroon band (interior sections, e.g. summer tour) */
.band {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--maroon-grad);
  color: #fff;
  padding-block: var(--sec);
}
.band h2, .band h3 { color: #fff; }
.band .kicker { color: var(--gold-soft); }
.band p { color: var(--blush); }
.band a:not(.btn) { color: #fff; }
.band .checks li::before { color: #FFD98A; }
.band .checks li { color: #F8E8EA; }

/* ---------- Portals (home sorting cards) ---------- */
.portals-float { position: relative; z-index: 2; margin-top: clamp(-6.5rem, -10vh, -5rem); }
.portals {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
  text-align: left;
}
.portal {
  position: relative;
  display: flex; flex-direction: column; gap: 0.4rem;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 24px;
  padding: 2.3rem 2.1rem 2rem;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.portal::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.portal:hover { transform: translateY(-6px); box-shadow: 0 28px 60px rgba(60, 8, 16, 0.2); }
.portal:hover::before { transform: scaleX(1); }
.portal-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--maroon-soft);
  display: grid; place-items: center;
  margin-bottom: 1rem;
  transition: background 0.35s var(--ease);
}
.portal-icon svg { width: 30px; height: 30px; stroke: var(--maroon); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.35s; }
.portal:hover .portal-icon { background: var(--maroon); }
.portal:hover .portal-icon svg { stroke: #fff; }
.portal h2 { font-size: 1.45rem; margin: 0; }
.portal p { color: var(--ink-soft); font-size: 1rem; margin: 0; flex: 1; }
.portal-arrow {
  font-family: var(--f-display); font-weight: 600; color: var(--maroon);
  margin-top: 1.1rem; display: inline-flex; align-items: center; gap: 0.45rem;
}
.portal-arrow .arr { transition: transform 0.35s var(--ease); }
.portal:hover .portal-arrow .arr { transform: translateX(6px); }

/* ---------- Home statement + counters ---------- */
.home-statement { text-align: center; padding-block: clamp(3.5rem, 8vw, 5.5rem) 0; }
.home-statement .statement {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  line-height: 1.5;
  color: var(--maroon-deep);
  max-width: 46rem; margin-inline: auto;
}
.home-statement a { white-space: nowrap; }
.home-statement .statement-more {
  margin-top: 0.9rem;
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
}
.stats-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; margin-top: 2.5rem;
  text-align: center;
}
.stats-row.four { grid-template-columns: repeat(4, 1fr); }
.stat-n {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  color: var(--maroon); line-height: 1;
}
.stat-l { color: var(--ink-soft); font-size: 1rem; margin-top: 0.4rem; }

/* ---------- Stat band (homepage counters, elevated) ---------- */
.stat-band {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: repeat(3, 1fr);
  max-width: 62rem;
  margin: clamp(2.2rem, 5vw, 3rem) auto 0;
  background: linear-gradient(180deg, #FFFDFA, var(--cream));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.9rem, 4vw, 2.8rem) clamp(0.8rem, 3vw, 1.6rem);
  box-shadow: var(--shadow);
}
.stat-band::before {
  content: "";
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 150px; height: 4px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
}
.stat-cell { text-align: center; padding: 0.5rem 1.4rem; }
.stat-cell + .stat-cell { border-left: 1px solid var(--line); }
.stat-ic {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--gold-soft);
  display: inline-grid; place-items: center;
  margin-bottom: 1.05rem;
}
.stat-ic svg { width: 25px; height: 25px; stroke: var(--gold); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stat-band .stat-n { font-size: clamp(2.4rem, 4.5vw, 3.4rem); letter-spacing: -0.02em; }
.stat-band .stat-l {
  font-family: var(--f-display); font-weight: 600;
  color: var(--maroon-deep); font-size: 1.08rem;
  margin-top: 0.45rem;
}
.stat-sub {
  color: var(--ink-soft); font-size: 0.92rem; line-height: 1.5;
  margin: 0.35rem auto 0; max-width: 15rem;
}

/* ---------- Contact modal (lightbox form) ---------- */
.contact-modal {
  border: none; padding: 0; background: transparent;
  width: min(780px, calc(100vw - 2rem));
  margin: auto;
}
.contact-modal:focus, .contact-modal:focus-visible { outline: none; }
.contact-modal::backdrop {
  background: rgba(46, 5, 12, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.contact-modal[open] { animation: modal-in 0.45s var(--ease); }
.contact-modal[open]::backdrop { animation: backdrop-in 0.45s ease; }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
}
@keyframes backdrop-in { from { opacity: 0; } }
.modal-card {
  position: relative;
  background: #fff;
  border-radius: var(--r-lg);
  padding: clamp(1.8rem, 3.5vw, 2.4rem) clamp(1.8rem, 4vw, 2.8rem);
  box-shadow: 0 40px 90px rgba(40, 4, 10, 0.35);
  max-height: calc(100svh - 3rem);
  overflow: auto;
}
.modal-close {
  position: absolute; top: 1.15rem; right: 1.15rem;
  width: 38px; height: 38px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--maroon-soft); color: var(--maroon-deep);
  font-family: var(--f-display); font-size: 1.05rem; line-height: 1;
  display: grid; place-items: center;
  transition: background 0.25s var(--ease), color 0.25s;
}
.modal-close:hover { background: var(--maroon); color: #fff; }
.modal-card h2 { font-size: clamp(1.45rem, 3vw, 1.8rem); margin-bottom: 0.4rem; }
.modal-lead { color: var(--ink-soft); font-size: 1rem; line-height: 1.6; margin-bottom: 1.3rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem 1rem; }
.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-family: var(--f-display); font-weight: 600;
  font-size: 0.88rem; color: var(--maroon-deep);
}
.field input, .field select, .field textarea {
  font-family: var(--f-body); font-size: 1rem; color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line); border-radius: 12px;
  padding: 0.62rem 0.95rem;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--maroon);
  box-shadow: 0 0 0 3px var(--maroon-soft);
  outline: none;
}
.field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23690C1A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 16px;
  padding-right: 2.6rem;
}
.field textarea { min-height: 84px; resize: vertical; }
.modal-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 1.25rem; }
.modal-note { font-size: 0.88rem; color: var(--ink-soft); margin: 1.1rem 0 0; }
.modal-note a { color: var(--maroon); }
.modal-success { display: none; text-align: center; padding: 1.6rem 0.5rem 0.8rem; }
.modal-success .stat-ic { margin-bottom: 1.2rem; }
.modal-success h2 { margin-bottom: 0.6rem; }
.modal-success p { color: var(--ink-soft); font-size: 1rem; max-width: 26rem; margin-inline: auto; }
.contact-modal.sent .modal-form { display: none; }
.contact-modal.sent .modal-success { display: block; }
/* short desktop viewports: compact the card so it never needs to scroll */
@media (min-width: 941px) and (max-height: 860px) {
  .modal-card { padding-block: 1.5rem; }
  .modal-lead { margin-bottom: 1rem; }
  .field textarea { min-height: 66px; }
  .modal-actions { margin-top: 1rem; }
  .modal-note { margin-top: 0.9rem; }
}

/* ---------- Photo frames (Rosa's photos go here) ---------- */
.photo {
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow);
  background: linear-gradient(145deg, #F3E2D3, #E9C9CE 55%, #D8A6AE);
}
.photo::before {
  content: "";
  position: absolute; inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9767F' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='7' width='18' height='13' rx='3'/><circle cx='12' cy='13' r='3.5'/><path d='M8.5 7l1.4-2.4h4.2L15.5 7'/></svg>") center / 42px no-repeat;
  opacity: 0.55;
}
.photo::after { content: ""; display: block; padding-top: 78%; }
.photo.tall::after { padding-top: 112%; }
.photo.wide::after { padding-top: 62%; }
.photo.square::after { padding-top: 100%; }
.photo img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.photo-cap {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 2;
  background: rgba(255, 255, 255, 0.92);
  color: var(--maroon-deep);
  font-family: var(--f-display); font-weight: 500; font-size: 0.85rem;
  padding: 0.45rem 0.95rem; border-radius: 999px;
}
.photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.photo-strip .photo:nth-child(2) { transform: translateY(1.4rem); }

/* ---------- Motto strip ---------- */
.motto { text-align: center; padding-block: clamp(2.5rem, 5vw, 4rem); }
.motto p {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--maroon-deep); margin: 0;
}

/* ---------- Cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.cards.two { grid-template-columns: repeat(2, 1fr); }
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 2rem 1.7rem;
  display: flex; flex-direction: column;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card-icon {
  width: 58px; height: 58px; border-radius: 16px;
  background: var(--maroon-soft);
  display: grid; place-items: center;
  margin-bottom: 1.3rem;
}
.card-icon svg { width: 30px; height: 30px; stroke: var(--maroon); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { margin-bottom: 0.6rem; }
.card p { color: var(--ink-soft); font-size: 1.02rem; flex: 1; }
.card .card-link { font-family: var(--f-display); font-weight: 600; font-size: 1rem; color: var(--maroon); text-decoration: none; }
.card .card-link:hover { text-decoration: underline; }
/* whole-card links (clinic tiles): the entire tile is the target */
a.card { text-decoration: none; color: inherit; cursor: pointer; }
a.card:hover { color: inherit; }
a.card:hover .card-link { text-decoration: underline; }
a.card:hover h3 { color: var(--maroon); }
a.card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* photo-topped card (clinic lanes, give missions) */
.card--photo { padding: 0; overflow: hidden; }
.card--photo .photo { border-radius: 0; box-shadow: none; }
.card--photo .photo::after { padding-top: 62%; }
.card--photo .card-body { padding: 1.6rem 1.7rem 1.8rem; display: flex; flex-direction: column; flex: 1; }
.card--photo .card-body p { flex: 1; }

/* ---------- Offer grid (what we offer, with icons) ---------- */
.offer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.offer {
  display: flex; gap: 1.1rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 1.25rem 1.4rem;
}
.offer-ic {
  flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--maroon-soft);
  display: grid; place-items: center;
}
.offer-ic svg { width: 22px; height: 22px; stroke: var(--maroon); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.offer b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; color: var(--maroon-deep); margin-bottom: 0.15rem; }
.offer p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.55; }

/* ---------- Steps (how it works) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; counter-reset: step; }
.step {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 2rem 1.7rem 1.9rem;
  position: relative;
}
.step-n {
  font-family: var(--f-display); font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: var(--gold);
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-bottom: 1rem;
}
.step-n::after { content: ""; width: 2.2rem; height: 2px; background: var(--gold-soft); }
.step h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.step p { color: var(--ink-soft); font-size: 1rem; margin: 0; }

/* ---------- Figures (stat callouts with sources) ---------- */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.6rem 2rem; }
.figure { border-left: 3px solid var(--gold); padding-left: 1.3rem; }
.figure b {
  display: block;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  color: var(--maroon); line-height: 1.1;
}
.figure p { margin: 0.35rem 0 0.2rem; font-size: 1rem; line-height: 1.5; }
.figure .src { font-size: 0.85rem; color: var(--ink-soft); }

/* ---------- Checklist ---------- */
.checks {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem 2.2rem;
  max-width: 46rem;
}
.checks li { padding-left: 2.1rem; position: relative; font-size: 1.05rem; }
.checks li::before {
  content: "";
  position: absolute; left: 0; top: 0.32em;
  width: 1.25em; height: 1.25em;
  border-radius: 50%;
  background: var(--gold-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23996F0F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7'/></svg>") center / 60% no-repeat;
}
.band .checks li::before { background-color: rgba(255,255,255,0.14); }

/* ---------- Split (photo + text) ---------- */
.split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split.rev { grid-template-columns: 1.1fr 0.9fr; }
.split.rev .photo { order: 2; }

/* ---------- Step flow (vertical numbered sequence, centered measure) ----------
   A full-width alternative to .steps for long sequences (sexual-health
   "What to Expect"): maroon number circles joined by a thin rule. */
.step-flow { max-width: 44rem; margin-inline: auto; }
.flow-step { position: relative; padding: 0 0 2.1rem 4.3rem; }
.flow-step::before {
  content: "";
  position: absolute; left: 1.4rem; top: 3.1rem; bottom: 0.35rem;
  width: 1px; background: var(--line);
}
.flow-step:last-child { padding-bottom: 0; }
.flow-step:last-child::before { display: none; }
.flow-n {
  position: absolute; left: 0; top: 0;
  width: 2.8rem; height: 2.8rem; border-radius: 50%;
  background: var(--maroon); color: #fff;
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 600; font-size: 0.92rem;
}
.flow-step h3 { margin: 0.4rem 0 0.35rem; font-size: 1.15rem; }
.flow-step p { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.story-quote {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  line-height: 1.45; color: var(--maroon-deep);
  margin-bottom: 1.2rem;
}
.story-who { color: var(--ink-soft); font-size: 1rem; margin-bottom: 1.5rem; }

/* ---------- Visit panel ("what a visit can look like") ---------- */
.visit-panel {
  background: var(--cream);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  padding: clamp(2rem, 5vw, 3rem);
  max-width: 52rem;
}
.visit-panel .kicker { margin-bottom: 0.7rem; }
.visit-panel h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin-bottom: 1rem; }
.visit-panel p:last-child { margin-bottom: 0; }

/* ---------- FAQ accordion ---------- */
.faq { display: grid; gap: 0.9rem; max-width: 52rem; }
.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: box-shadow 0.3s var(--ease);
}
.faq-item[open] { box-shadow: var(--shadow); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: 1.2rem 1.5rem;
  font-family: var(--f-display); font-weight: 600; font-size: 1.08rem;
  color: var(--maroon-deep);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-x {
  flex: none; position: relative;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--maroon-soft);
  transition: background 0.3s var(--ease), transform 0.35s var(--ease);
}
.faq-x::before, .faq-x::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 14px; height: 2px; border-radius: 2px;
  background: var(--maroon);
  transform: translate(-50%, -50%);
  transition: transform 0.35s var(--ease), background 0.3s;
}
.faq-x::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-x { background: var(--maroon); transform: rotate(45deg); }
.faq-item[open] .faq-x::before, .faq-item[open] .faq-x::after { background: #fff; }
.faq-a { padding: 0 1.5rem 1.35rem; color: var(--ink-soft); font-size: 1.02rem; }
.faq-a p { margin-bottom: 0.6rem; }
.faq-a p:last-child { margin-bottom: 0; }

/* ---------- CTA panel ---------- */
.cta-panel {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--maroon-grad);
  color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(2.5rem, 6vw, 4rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.8rem;
  box-shadow: var(--shadow-lg);
}
.cta-panel h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 0.5rem; }
.cta-panel p { color: var(--blush); margin: 0; max-width: 34rem; }
.cta-panel .hero-actions { margin-top: 0; }

/* ---------- Trust list ---------- */
.trust-list {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1rem 2.5rem;
  max-width: 56rem;
}
.trust-list li {
  padding: 1.1rem 1.3rem;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  font-size: 1.02rem;
}
.trust-list b { font-family: var(--f-display); font-weight: 600; color: var(--maroon-deep); display: block; }

/* ---------- Timeline (about) ---------- */
.timeline { list-style: none; padding: 0 0 0 2rem; display: grid; gap: 1.7rem; position: relative; max-width: 48rem; }
.timeline::before {
  content: "";
  position: absolute; left: 0.45rem; top: 0.5rem; bottom: 0.5rem;
  width: 2px; background: var(--gold-soft);
}
.timeline li { position: relative; }
.timeline li::before {
  content: "";
  position: absolute; left: -2rem; top: 0.5em;
  width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--gold); border: 3px solid var(--gold-soft);
}
.timeline b { display: block; font-family: var(--f-display); font-weight: 600; color: var(--maroon-deep); font-size: 1.1rem; }
.timeline p { margin: 0.2rem 0 0; color: var(--ink-soft); font-size: 1rem; }

/* ---------- Leaders (about) ---------- */
.leaders { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; max-width: 56rem; }
.leader {
  display: flex; gap: 1.4rem; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.5rem 1.6rem;
}
.leader .photo { flex: none; width: 108px; border-radius: 50%; box-shadow: none; }
.leader .photo::after { padding-top: 100%; }
.leader .photo::before { background-size: 30px; }
.leader b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 1.12rem; color: var(--maroon-deep); }
.leader p { margin: 0.2rem 0 0; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.55; }

/* ---------- Entities (about, quiet) ---------- */
.entities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.entity {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 1.3rem 1.4rem;
  font-size: 0.95rem; color: var(--ink-soft); line-height: 1.55;
}
.entity b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 1rem; color: var(--maroon-deep); margin-bottom: 0.25rem; }

/* ---------- Partner names row ---------- */
.partners-row {
  display: flex; flex-wrap: wrap; gap: 0.8rem 2.4rem;
  align-items: center;
  font-family: var(--f-display); font-weight: 600; font-size: 1.02rem;
  color: var(--ink-soft);
}
.partners-row span { opacity: 0.75; }

/* ---------- Events list ---------- */
.event-row {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 1.5rem; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.4rem 1.6rem; margin-bottom: 1rem;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.event-row:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.event-date {
  text-align: center;
  font-family: var(--f-display);
  background: linear-gradient(160deg, var(--maroon-soft), #F9F1F2);
  border-radius: 14px;
  padding: 0.7rem 1rem; min-width: 82px;
}
.event-date b { display: block; font-size: 1.5rem; color: var(--maroon-deep); line-height: 1.1; }
.event-date span { font-size: 0.85rem; font-weight: 600; color: var(--maroon); text-transform: uppercase; letter-spacing: 0.06em; }
.event-row h3 { font-size: 1.15rem; margin-bottom: 0.15rem; }
.event-row p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }

/* Event tiles carry more than a one-line row: time, full address, a short
   description, and the walk-in promise. The grid stays the same three
   columns; only the middle column grows. */
.event-body { display: flex; flex-direction: column; gap: 0.3rem; }
.event-body h3 { margin-bottom: 0.25rem; }
.event-when { font-family: var(--f-display); font-weight: 600; color: var(--maroon) !important; }
.event-where { font-weight: 500; }
.event-desc { margin-top: 0.35rem !important; }
.event-langs, .event-walkup { font-size: 0.9rem !important; }
.event-walkup { color: var(--maroon-deep) !important; font-weight: 500; }
.event-row .event-cta { align-self: center; white-space: nowrap; }
.event-walkup-only {
  align-self: center; white-space: nowrap;
  font-family: var(--f-display); font-weight: 600; font-size: 0.95rem;
  color: var(--maroon-deep);
  background: var(--maroon-soft); border-radius: 999px;
  padding: 0.6rem 1.2rem; text-align: center;
}
.event-row--empty { grid-template-columns: 1fr auto; }

/* Skeleton: the calendar arrives over the network from either the sheet or
   the JSON fallback, so the space is held at the real tile height and the
   page never jumps when the tiles land. */
.event-row--skeleton { pointer-events: none; }
.event-row--skeleton:hover { transform: none; box-shadow: none; }
.sk {
  display: block; border-radius: 8px;
  background: linear-gradient(90deg, #F1EBEC 25%, #E7DEDF 37%, #F1EBEC 63%);
  background-size: 400% 100%;
  animation: sk-shimmer 1.5s ease-in-out infinite;
}
.sk-chip { width: 50px; height: 46px; border-radius: 10px; }
.sk-line { height: 0.85rem; margin-bottom: 0.55rem; width: 100%; }
.sk-line--title { height: 1.15rem; width: 62%; }
.sk-line--short { width: 40%; margin-bottom: 0; }
.sk-btn { width: 116px; height: 44px; border-radius: 999px; align-self: center; }
@keyframes sk-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* ---------- Carousel ---------- */
.carousel-shell { position: relative; }
.carousel {
  display: flex; gap: 1.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.car-item {
  flex: 0 0 min(340px, 78vw);
  scroll-snap-align: start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden;
}
.car-item .photo { border-radius: 0; box-shadow: none; }
/* Carousel tiles as whole-card links to /stories/field/ pages;
   same look, plus a visible focus ring and quiet hover lift */
a.car-item { color: inherit; text-decoration: none; display: block; transition: box-shadow 0.25s, transform 0.25s; }
a.car-item:hover { box-shadow: 0 10px 26px rgba(52, 7, 14, 0.1); transform: translateY(-2px); }
a.car-item:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.car-item .photo::after { padding-top: 74%; }
.car-body { padding: 1.2rem 1.3rem 1.4rem; }
.car-body h3 { font-size: 1.05rem; margin-bottom: 0.25rem; }
.car-body p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }
.car-nav { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 1.1rem; }
.car-btn {
  width: 48px; height: 48px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--maroon-soft); color: var(--maroon-deep);
  font-size: 1.25rem; font-family: var(--f-display);
  display: grid; place-items: center;
  transition: background 0.25s var(--ease), color 0.25s, transform 0.2s;
}
.car-btn:hover { background: var(--maroon); color: #fff; transform: translateY(-2px); }

/* ---------- Slim maroon call strip ---------- */
.strip {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--maroon-grad);
  color: #fff;
  padding-block: clamp(2.2rem, 5vw, 3.2rem);
}
.strip .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; }
.strip p { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.15rem, 2.2vw, 1.5rem); color: #fff; }

/* ---------- Partner strip (homepage last line) ---------- */
.partner-strip {
  border-top: 1px solid var(--line);
  padding-block: clamp(2rem, 4vw, 3rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.2rem;
}
.partner-strip p { margin: 0; max-width: 42rem; }

/* ---------- Prose (interior) ---------- */
.prose { max-width: 46rem; }
.prose h2 { margin: 2.4rem 0 0.9rem; font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.prose h2:first-child { margin-top: 0; }
.prose ul { margin-bottom: 1.2rem; }
.prose li { margin-bottom: 0.45rem; }
.note {
  background: var(--gold-soft); border-radius: 14px;
  padding: 1.1rem 1.4rem; font-size: 1rem; color: #6B5312;
}

/* ---------- Stories grid + press ---------- */
.stories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.story-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.story-card .photo { border-radius: 0; box-shadow: none; }
.story-card .photo::after { padding-top: 72%; }
.story-body { padding: 1.4rem 1.5rem; }
.story-body h3 { font-size: 1.12rem; margin-bottom: 0.4rem; }
.story-body p { color: var(--ink-soft); font-size: 0.98rem; margin: 0; }
a.story-card { color: inherit; text-decoration: none; display: block; transition: box-shadow 0.25s, transform 0.25s; }
a.story-card:hover { box-shadow: 0 10px 26px rgba(52, 7, 14, 0.1); transform: translateY(-2px); }
a.story-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.story-body .card-link { display: inline-block; margin-top: 0.7rem; }

/* ---------- Field-story gallery (image-forward, honest captions) ---------- */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.gallery .photo::after { padding-top: 68%; }
@media (max-width: 700px) { .gallery { grid-template-columns: 1fr; } }
.press-row {
  display: flex; justify-content: space-between; align-items: center; gap: 2rem;
  padding-block: 1.25rem; border-bottom: 1px solid var(--line);
}
.press-row h3 { font-size: 1.1rem; font-weight: 500; color: var(--ink); margin: 0; transition: color 0.2s; }
.press-row time { color: var(--ink-soft); font-size: 0.95rem; white-space: nowrap; }
a.press-row { text-decoration: none; }
a.press-row:hover h3 { color: var(--maroon); }
.press-tag {
  display: inline-block;
  font-family: var(--f-display); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--gold-soft); color: #6B5312;
  padding: 0.22rem 0.7rem; border-radius: 999px;
  margin-bottom: 0.45rem;
}

/* ---------- Health Notes (blog) ---------- */
.notes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.note-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.9rem 1.8rem;
  text-decoration: none;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.note-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.note-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.note-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; align-self: flex-start; }
.note-tag {
  align-self: flex-start;
  font-family: var(--f-display); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--maroon-soft); color: var(--maroon-deep);
  padding: 0.25rem 0.75rem; border-radius: 999px;
}
.note-tag--pillar { background: var(--gold-soft); color: #6B5312; }
.note-card h3 { font-size: 1.22rem; margin: 1rem 0 0.5rem; transition: color 0.2s; }
.note-card:hover h3 { color: var(--maroon); }
.note-card p { color: var(--ink-soft); font-size: 0.98rem; margin: 0; flex: 1; }
.note-meta {
  color: var(--ink-soft); font-size: 0.88rem;
  margin-top: 1.2rem; padding-top: 1rem;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.note-meta .card-link { font-size: 0.95rem; }

/* ---------- Article layout (Health Notes + press releases) ---------- */
.art-meta {
  color: var(--blush); font-size: 0.98rem;
  font-family: var(--f-display); font-weight: 500;
  margin-top: 1.2rem;
}
.art-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.art-body { max-width: 44rem; }
.art-back {
  font-family: var(--f-display); font-weight: 600; font-size: 0.92rem;
  margin-bottom: 1.8rem;
}
.art-back a { text-decoration: none; color: var(--ink-soft); }
.art-back a:hover { color: var(--maroon); }
.art-body .lead-p {
  font-size: clamp(1.18rem, 1.8vw, 1.3rem); line-height: 1.65;
  color: var(--ink-soft);
  padding-bottom: 1.7rem; margin-bottom: 1.9rem;
  border-bottom: 1px solid var(--line);
}
.art-body > .photo { margin-bottom: 2.2rem; }
.art-body h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.7rem);
  margin: 2.7rem 0 0.95rem;
  padding-top: 1.15rem;
  position: relative;
}
.art-body h2::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 46px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
}
.art-body ul { list-style: none; padding: 0; margin-bottom: 1.2rem; }
.art-body ul li { position: relative; padding-left: 1.7rem; margin-bottom: 0.6rem; }
.art-body ul li::before {
  content: "";
  position: absolute; left: 0.15rem; top: 0.62em;
  width: 8px; height: 8px; border-radius: 2.5px;
  background: var(--gold);
  transform: rotate(45deg);
}
/* "The short version" summary panel */
.tldr {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.5rem 1.7rem 1.3rem;
  margin-bottom: 2.2rem;
}
.tldr > b {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--f-display); font-weight: 600; font-size: 0.85rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.9rem;
}
.tldr > b svg { width: 17px; height: 17px; stroke: var(--gold); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tldr ul { margin-bottom: 0; }
.tldr ul li { font-size: 1.02rem; margin-bottom: 0.5rem; }
.tldr ul li::before {
  border-radius: 50%; transform: none;
  width: 1.15em; height: 1.15em; top: 0.28em; left: 0;
  background: var(--gold-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23996F0F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7'/></svg>") center / 60% no-repeat;
}
.tldr ul li { padding-left: 2rem; }
/* pillar chip (article hero) */
.pillar-chip {
  display: inline-flex; align-items: center;
  font-family: var(--f-display); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-soft);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.32rem 0.9rem; border-radius: 999px;
  margin-top: 1.1rem;
}
/* "Free at Prism events" callout */
.free-callout {
  display: flex; align-items: center; gap: 1.2rem;
  background: var(--gold-soft);
  border-radius: var(--r);
  padding: 1.35rem 1.6rem;
  margin-top: 2.6rem;
}
.free-callout .offer-ic { flex: none; background: #fff; }
.free-callout .offer-ic svg { stroke: var(--gold); }
.free-callout b {
  display: block;
  font-family: var(--f-display); font-weight: 600; font-size: 1.02rem;
  color: var(--maroon-deep); margin-bottom: 0.15rem;
}
.free-callout p { margin: 0; font-size: 0.93rem; color: #6B5312; line-height: 1.5; }
.free-callout > div { flex: 1; }
.free-callout .btn { flex: none; padding: 0.55rem 1.4rem; font-size: 0.9rem; white-space: nowrap; }
@media (max-width: 700px) {
  .free-callout { flex-direction: column; align-items: flex-start; }
}
/* sources footer */
.art-sources { margin-top: 2.4rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.art-sources > b {
  display: block;
  font-family: var(--f-display); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.7rem;
}
.art-sources ul { list-style: none; padding: 0; margin: 0; }
.art-body .art-sources li { padding-left: 0; margin-bottom: 0.35rem; font-size: 0.9rem; color: var(--ink-soft); }
.art-body .art-sources li::before { content: none; }
.art-sources a { color: var(--maroon); text-decoration-thickness: 1px; }
/* author / signature block */
.art-author {
  display: flex; gap: 1.1rem; align-items: center;
  margin-top: 3rem; padding-top: 1.7rem;
  border-top: 1px solid var(--line);
}
.art-author .offer-ic { flex: none; }
.art-author b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 1rem; color: var(--maroon-deep); }
.art-author p { margin: 0.1rem 0 0; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.55; }
/* sticky sidebar */
.art-aside {
  position: sticky; top: calc(var(--hdr-h) + 1.2rem);
  display: grid; gap: 1.2rem;
}
.aside-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.5rem 1.6rem;
}
.aside-card > b {
  display: block;
  font-family: var(--f-display); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.aside-card p { font-size: 0.96rem; color: var(--ink-soft); line-height: 1.6; margin-bottom: 0.9rem; }
.aside-card p:last-child { margin-bottom: 0; }
.aside-card .btn { padding: 0.6rem 1.4rem; font-size: 0.95rem; }
.fact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.85rem; }
.fact-list b {
  display: block;
  font-family: var(--f-display); font-weight: 600; font-size: 0.74rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--maroon);
}
.fact-list li { font-size: 0.98rem; color: var(--ink); line-height: 1.5; }
.aside-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.15rem; }
.aside-links a {
  display: block;
  font-family: var(--f-display); font-weight: 500; font-size: 0.96rem;
  color: var(--ink); text-decoration: none;
  padding: 0.45rem 0.6rem; margin-inline: -0.6rem;
  border-radius: 10px;
  transition: background 0.2s, color 0.2s;
}
.aside-links a:hover { background: var(--maroon-soft); color: var(--maroon-deep); }
@media (max-width: 940px) {
  .art-grid { grid-template-columns: 1fr; }
  .art-aside { position: static; }
}

/* ---------- Cookie notice: floating maroon bar, rounded, quiet ---------- */
.cookie-bar {
  position: fixed; left: 50%; z-index: 200;
  /* normal spacing + iOS safe area (Safari/Chrome bottom toolbar) */
  bottom: calc(1.2rem + env(safe-area-inset-bottom));
  width: min(860px, calc(100vw - 2rem));
  background: var(--maroon-grad);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r);
  box-shadow: 0 20px 55px rgba(40, 4, 10, 0.4);
  padding: 1rem 1.4rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.1rem, 3vw, 2rem);
  opacity: 0; transform: translate(-50%, 130%);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.cookie-bar.show { opacity: 1; transform: translate(-50%, 0); }
.cookie-bar p {
  font-size: 0.78rem; color: var(--blush); line-height: 1.55;
  margin: 0;
}
.cookie-bar b { font-family: var(--f-display); font-weight: 600; color: #fff; }
.cookie-bar a { color: var(--gold-bright); }
.cookie-bar a:hover { color: #fff; }
.cookie-actions { display: flex; align-items: center; gap: 0.6rem; flex: none; }
.cookie-actions .btn { padding: 0.5rem 1.4rem; font-size: 0.85rem; white-space: nowrap; }
@media (max-width: 760px) {
  .cookie-bar { flex-direction: column; align-items: flex-start; gap: 0.85rem; bottom: calc(0.8rem + env(safe-area-inset-bottom)); }
  .cookie-actions { align-self: stretch; }
  .cookie-actions .btn { flex: 1; text-align: center; }
}

/* ---------- Footer ---------- */
.ftr { background: var(--maroon-ink); color: #F2DFE2; padding-block: clamp(3rem, 6vw, 4.5rem) 1.5rem; }
.ftr-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; }
.ftr img { height: 46px; width: auto; margin-bottom: 1rem; }
.ftr-motto { font-family: var(--f-display); font-weight: 500; color: #fff; font-size: 1.05rem; }
.ftr h3 { color: var(--gold-soft); font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1rem; }
.ftr ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.ftr a { color: #F2DFE2; text-decoration: none; font-size: 1rem; }
.ftr a:hover { color: #fff; text-decoration: underline; }
.ftr-legal {
  border-top: 1px solid rgba(255,255,255,0.18);
  padding-top: 1.4rem;
  font-size: 0.88rem; color: #DCB9BF;
}
.ftr-legal p { margin-bottom: 0.4rem; }
.ftr-legal a { font-size: 0.88rem; }

/* ---------- Motion: load choreography + staggered reveals ---------- */
[data-load] { opacity: 0; transform: translateY(24px); }
[data-load].go { opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.rv { opacity: 0; transform: translateY(22px); }
.rv.in { opacity: 1; transform: none; transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  :root { --hdr-h: 74px; }
  .portals { grid-template-columns: 1fr; }
  .split, .split.rev, .cards, .cards.two, .stories-grid, .leaders, .entities, .notes-grid { grid-template-columns: 1fr; }
  .split.rev .photo { order: 0; }
  .offer-grid, .steps { grid-template-columns: 1fr; }
  .checks, .trust-list { grid-template-columns: 1fr; }
  .stats-row, .stats-row.four { grid-template-columns: 1fr 1fr; gap: 1.2rem 0.8rem; }
  .stat-band { grid-template-columns: 1fr; gap: 1.6rem; }
  .stat-cell + .stat-cell { border-left: none; border-top: 1px solid var(--line); padding-top: 1.6rem; }
  .form-grid { grid-template-columns: 1fr; }
  .photo-strip { grid-template-columns: 1fr; }
  .photo-strip .photo:nth-child(2) { transform: none; }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
  .hero-band--home { min-height: 0; }
  .hero-band--home .wrap { padding-block: calc(var(--hdr-h) + 3.5rem) 8.5rem; }
  .hero-cue { bottom: 5.5rem; }
  .menu-btn { display: block; }
  /* Open menu: the header must NOT carry backdrop-filter here; a filter
     turns .hdr into the containing block for this fixed overlay, which
     pins it to the header box and lets the page bleed through. Solid
     white, viewport-sized, above everything except the skip link. */
  .hdr.open, .hdr.solid.open {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    z-index: 240; /* above the cookie banner (200); skip link (300) stays on top */
  }
  /* ---- The menu sheet: a considered full-screen surface ---- */
  .hdr-nav {
    position: fixed; inset: 0; z-index: 235;
    height: 100dvh;
    background: #fff;
    overflow-y: auto;
    overflow-x: hidden; /* only the vertical axis scrolls, never a horizontal shift */
    overscroll-behavior: contain;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: calc(var(--hdr-h) + 1.6rem) clamp(1.8rem, 8vw, 3rem)
             calc(1.5rem + env(safe-area-inset-bottom));
    gap: 0;
    display: none;
  }
  .hdr-nav.open { display: flex; }
  .hdr-nav.open > a:not(.hdr-cta), .hdr-nav.open .nav-item > a {
    color: var(--maroon-deep);
    font-size: clamp(1.55rem, 6vw, 1.8rem);
    font-weight: 600;
    padding: 0.45rem 0;
    letter-spacing: -0.01em;
  }
  .hdr-nav.open > a[aria-current="page"], .hdr-nav.open .nav-item > a[aria-current="page"] { color: var(--gold); }
  /* the last nav item keeps clear air before the separator; a section
     break, never a crowding line (leftover height on tall screens lands
     here too, via the CTA's auto margin) */
  .hdr-nav.open > a:nth-last-of-type(2) { margin-bottom: 2.4rem; }
  /* no hover-dependent styling inside the sheet; tap feedback is a
     quiet background tint on :active, nothing moves */
  .hdr-nav.open > a:not(.hdr-cta):hover, .hdr-nav.open .nav-item > a:hover { color: var(--maroon-deep); }
  .hdr-nav.open > a[aria-current="page"]:hover, .hdr-nav.open .nav-item > a[aria-current="page"]:hover { color: var(--gold); }
  .hdr-nav.open > a:not(.hdr-cta):active, .hdr-nav.open .nav-item > a:active,
  .hdr-nav.open .drop-card a:active { background: var(--maroon-soft); border-radius: 10px; }
  .hdr-nav.open .hdr-cta:hover { background: var(--maroon); border-color: var(--maroon); box-shadow: 0 6px 18px rgba(134, 22, 38, 0.28); }
  .hdr-nav.open .hdr-cta:active { background: var(--maroon-deep); border-color: var(--maroon-deep); }
  /* Inside the open sheet: NO transform on anything, unconditionally.
     Not hover-gated on purpose; hover:hover can be true at mobile width
     (narrow desktop window, iPad + trackpad), and the desktop dropdown
     rule `.nav-item:hover .drop { transform: translate(-50%,0) }` (0,3,0,
     ungated) would otherwise slide the clinic panel off the left frame on
     hover/focus. !important beats that specificity. Hover may still tint
     color/background (those set no transform); the entrance animation is
     opacity-only, so it's unaffected. */
  .hdr-nav.open, .hdr-nav.open * { transform: none !important; }
  /* clinic sub-links: a soft grouped panel under Our Clinics */
  .nav-item { width: 100%; }
  .nav-item .chev { display: none; }
  .drop {
    position: static; transform: none; opacity: 1; pointer-events: auto;
    padding-top: 0;
  }
  .drop-card {
    box-shadow: none;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.35rem 1.2rem;
    margin: 0.3rem 0 0.9rem;
    min-width: 0; gap: 0;
    display: block;
  }
  .drop-card a {
    font-size: 1.08rem; font-weight: 500;
    color: var(--ink); padding: 0.8rem 0; border-radius: 0;
    white-space: normal; /* long clinic names wrap inside the sheet panel */
  }
  .drop-card a + a { border-top: 1px solid var(--line); }
  /* Initiatives: single row in the sheet; its initiative links live on
     the /programs/ hub, one tap away (same logic as the nixed "All
     programs" row). Two expanded panels would make the menu a link wall. */
  .nav-item--programs .drop { display: none; }
  /* full-width CTA anchored to the bottom of the sheet, hairline above */
  .hdr-nav.open .hdr-cta {
    margin-top: auto;
    position: relative;
    width: 100%; text-align: center;
    padding: 1rem 1.5rem; font-size: 1.08rem;
    background: var(--maroon); color: #fff !important;
    border-color: var(--maroon);
    box-shadow: 0 6px 18px rgba(134, 22, 38, 0.28);
  }
  .hdr-nav.open .hdr-cta::before {
    content: "";
    position: absolute; top: -1.5rem; left: 0; right: 0;
    height: 1px; background: var(--line);
  }
  .hdr-nav.open .hdr-cta { margin-bottom: 0; }
  /* quiet footer touch under the CTA (base hide is global, above) */
  .hdr-nav.open .menu-foot {
    display: block;
    margin-top: 1.1rem;
    text-align: center;
    font-size: 0.85rem; line-height: 1.6;
    color: var(--ink-soft);
  }
  .hdr-nav.open .menu-foot a {
    color: var(--maroon); text-decoration: none;
    font-family: var(--f-display); font-weight: 600;
    display: inline-block; padding: 0.3rem 0.5rem;
  }
  /* entrance choreography: opacity-only stagger, deliberately NO
     transform, so a container child can never be left translated /
     off-canvas and can never trigger horizontal overflow in the sheet */
  @keyframes menu-item-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .hdr-nav.open > * { animation: menu-item-in 0.45s var(--ease) backwards; }
  .hdr-nav.open > *:nth-child(1) { animation-delay: 0.05s; }
  .hdr-nav.open > *:nth-child(2) { animation-delay: 0.14s; }
  .hdr-nav.open > *:nth-child(3) { animation-delay: 0.23s; }
  .hdr-nav.open > *:nth-child(4) { animation-delay: 0.32s; }
  .hdr-nav.open > *:nth-child(5) { animation-delay: 0.41s; }
  .hdr-nav.open > *:nth-child(6) { animation-delay: 0.5s; }
  .hdr-nav.open > *:nth-child(7) { animation-delay: 0.58s; }
  .hdr-nav.open > *:nth-child(8) { animation-delay: 0.66s; }
  /* comfortable tap targets in the stacked footer */
  .ftr ul { gap: 0.1rem; }
  .ftr ul a { display: inline-block; padding-block: 0.55rem; }
  .ftr-legal a { display: inline-block; padding-block: 0.7rem; }
  .cookie-actions .btn { min-height: 44px; }
}
/* Mobile button treatment (consistent site-wide): action buttons go
   full-width and stack, with no stranded left-aligned pills. */
@media (max-width: 700px) {
  .hero-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-actions .btn { width: 100%; text-align: center; }
  .strip .wrap { flex-direction: column; align-items: stretch; text-align: left; }
  .strip .btn { width: 100%; text-align: center; }
  .partner-strip { flex-direction: column; align-items: stretch; }
  .partner-strip .btn { width: 100%; text-align: center; }
  .cta-panel { flex-direction: column; align-items: stretch; }
  .aside-card .btn { width: 100%; text-align: center; }
  .free-callout .btn { width: 100%; text-align: center; }
}

@media (max-width: 560px) {
  .event-row { grid-template-columns: auto 1fr; }
  .event-row .btn { grid-column: 1 / -1; text-align: center; }
  /* the walk-ins pill stands in for the button when an event has no
     registration link, so it drops to its own full-width row too */
  .event-walkup-only, .sk-btn { grid-column: 1 / -1; width: 100%; }
  .event-row--empty { grid-template-columns: 1fr; }
  .ftr-grid { grid-template-columns: 1fr; }
  .stats-row, .stats-row.four { grid-template-columns: 1fr 1fr; }
  .portal { padding: 1.8rem 1.5rem 1.7rem; }
  .hero-band--home .wrap { padding-block: calc(var(--hdr-h) + 3rem) 7.5rem; }
  .hero-band--home h1 { font-size: 2.5rem; }
  .card, .step { padding: 1.7rem 1.4rem; }
  .card--photo .card-body { padding: 1.4rem 1.4rem 1.6rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-load], .rv { opacity: 1 !important; transform: none !important; }
  .hero-band::before, .hero-band::after { animation: none; }
  .hero-cue { animation: none; opacity: 0.4; }
  .carousel { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.001s !important; animation-duration: 0.001s !important; }
}

/* ---------- Proof layer (partner names & logos; placeholder-graceful) ---------- */
.proof-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; }
.proof-chip {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 0.5rem 1.15rem;
  font-family: var(--f-display); font-weight: 500; font-size: 1rem;
  color: var(--ink); white-space: nowrap;
}
.proof-chip img { height: 22px; width: auto; display: block; }
.logo-wall { margin-top: 0.5rem; }
.wall-search-label { display: block; font-family: var(--f-display); font-weight: 600; font-size: 1rem; color: var(--maroon-deep); margin-bottom: 0.5rem; }
.wall-search {
  width: 100%; max-width: 24rem; font: inherit; font-size: 1.05rem;
  padding: 0.7rem 1.2rem; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink);
}
.wall-search:focus { outline: 2px solid var(--maroon); outline-offset: 2px; }
.wall-group h3 { margin: 1.8rem 0 0.8rem; font-size: 1.15rem; }
.wall-list { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.wall-empty { color: var(--ink-soft); margin-top: 1.2rem; }

/* ---------- Giving band + donation form (/give/) ---------- */
.give-band .lead { margin-top: 1rem; }
.give-band-note { margin-top: 1.2rem; color: var(--ink-soft); font-size: 0.95rem; max-width: 30rem; }
/* the form is the column's own block, with no stacked top margin beside the copy */
.give-band .donate-embed { margin-top: 0; }
@media (max-width: 940px) {
  .give-band .donate-embed { margin-top: clamp(1.6rem, 5vw, 2.2rem); }
}
.donate-embed {
  margin: clamp(2rem, 5vw, 2.8rem) auto 0; max-width: 31rem;
  display: flex; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 0.75rem; overflow: hidden;
}
.donate-embed iframe { display: block; width: 100%; margin-inline: auto; border: 0; border-radius: 12px; }
.donate-embed dbox-widget { display: block; width: 100%; margin-inline: auto; }
/* Donorbox pins its own width below ~600px; let its card be the card there. */
@media (max-width: 600px) {
  .donate-embed { padding: 0; background: none; border: 0; }
}
/* Donorbox holds a 320px floor, wider than the wrap on the smallest phones,
   let the form break out to the viewport there so nothing is clipped. */
@media (max-width: 360px) {
  .donate-embed { width: 100vw; margin-inline: calc(50% - 50vw); }
}
.donate-note { text-align: center; max-width: 34rem; margin: 1.2rem auto 0; color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- From the Field: editorial feature layout ---------- */
.feature-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(430px, 66vh, 660px);
  display: flex; align-items: flex-end;
  background: var(--maroon-grad);
}
.feature-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.feature-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to bottom, rgba(30, 4, 8, 0.5) 0%, rgba(30, 4, 8, 0.08) 34%, rgba(30, 4, 8, 0.82) 100%);
}
.feature-hero .wrap { position: relative; z-index: 1; padding-block: calc(var(--hdr-h) + 4.5rem) 2.8rem; }
.feature-hero .kicker { color: var(--gold-bright); }
.feature-hero h1 { color: #fff; font-size: clamp(2.3rem, 5.2vw, 3.6rem); max-width: 16ch; line-height: 1.08; }
.feature-hero .dek { color: rgba(255, 255, 255, 0.92); font-size: clamp(1.05rem, 1.7vw, 1.25rem); max-width: 40rem; margin-top: 0.9rem; }
.feature-hero .hero-cap {
  position: absolute; right: 1.1rem; bottom: 1.1rem; z-index: 1;
  background: rgba(255, 255, 255, 0.92); color: var(--ink);
  font-size: 0.78rem; font-weight: 500;
  padding: 0.35rem 0.85rem; border-radius: 99px;
}

/* article body: comfortable reading measure */
.article-measure { max-width: 42rem; margin-inline: auto; }
.article-measure p { margin-top: 1.15rem; line-height: 1.72; }
.lede { font-size: 1.22rem; line-height: 1.75; }
.lede-drop::first-letter {
  font-family: var(--f-display); font-weight: 600;
  font-size: 3.3em; line-height: 0.82;
  float: left; padding: 0.07em 0.14em 0 0;
  color: var(--maroon);
}

/* editorial figures: caption below, gold rule, italic */
.ed-fig { margin: 0; }
.ed-fig .photo::after { padding-top: 66%; }
.ed-fig figcaption {
  font-style: italic; font-size: 0.92rem; color: var(--ink-soft);
  margin-top: 0.7rem; padding-left: 0.75rem; border-left: 3px solid var(--gold);
}
.mono img { filter: grayscale(1); }

/* image rhythm: wide band + offset pair */
.img-band { width: min(1180px, calc(100% - 2.4rem)); margin-inline: auto; }
.img-band .photo::after { padding-top: 52%; }
.img-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; width: min(62rem, 100%); margin-inline: auto; }
.img-pair .ed-fig:nth-child(2) { margin-top: 2.4rem; }
.img-pair .ed-fig .photo::after { padding-top: 74%; }
@media (max-width: 700px) {
  .img-pair { grid-template-columns: 1fr; }
  .img-pair .ed-fig:nth-child(2) { margin-top: 0; }
}

/* fact band: one big verified number */
.fact-band { text-align: center; }
.fact-band .fact-n {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(3.4rem, 8vw, 5.2rem); line-height: 1;
  color: var(--gold-bright);
}
.fact-band .fact-l { margin-top: 0.7rem; font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: rgba(255, 255, 255, 0.94); max-width: 34rem; margin-inline: auto; }

/* pull-line: our own words, design emphasis only */
.pull-line {
  max-width: 34rem; margin-inline: auto; text-align: center;
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.38;
  color: var(--maroon-deep);
}
.pull-line::before {
  content: ""; display: block; width: 54px; height: 3px; border-radius: 2px;
  background: var(--gold); margin: 0 auto 1.3rem;
}

/* series navigation: prev / next story cards */
.series-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
a.series-card {
  display: flex; gap: 1.1rem; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.1rem 1.3rem; color: inherit; text-decoration: none;
  transition: box-shadow 0.25s, transform 0.25s;
}
a.series-card:hover { box-shadow: 0 10px 26px rgba(52, 7, 14, 0.1); transform: translateY(-2px); }
a.series-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.series-card .thumb { flex: none; width: 88px; height: 66px; border-radius: 10px; overflow: hidden; background: var(--gold-soft); }
.series-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.series-card .s-k {
  display: block; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 0.25rem;
}
.series-card b { font-family: var(--f-display); font-weight: 600; color: var(--maroon-deep); line-height: 1.3; }
.series-card.next { flex-direction: row-reverse; text-align: right; }
@media (max-width: 700px) {
  .series-nav { grid-template-columns: 1fr; }
  .series-card.next { flex-direction: row; text-align: left; }
}