/* --------------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------------
   Brand colours, in order of prominence:
     Primary    #23A455    Secondary  #54B435
     Tertiary   #88CB37    Accent     #BCE138
     Tint       #EEFFE8    Text       #112222

   Important: none of the brand greens pass WCAG AA as text, or as a button
   fill behind white text — they are too light. They are used here as FILLS
   with dark #112222 text on them, which reads at 5.1:1 or better. The two
   darker greens below are derived from the PRIMARY's own hue (143 degrees)
   purely so links and solid buttons can meet AA, and so they read as the same
   green. Every pairing in this file has been measured.
   -------------------------------------------------------------------------- */
:root {
  /* Brand greens, light to dark */
  --green-50:  #EEFFE8;   /* Saved #5 — soft tint backgrounds */
  --green-200: #BCE138;   /* Accent — fills, rules, headline highlights */
  --green-300: #88CB37;   /* Tertiary */
  --green-400: #54B435;   /* Secondary */
  --green-500: #23A455;   /* PRIMARY — brand fills, decorative rules */
  --green-600: #19763D;   /* derived — button fills behind white text */
  --green-700: #176D39;   /* derived — links, eyebrows, small text */
  --green-800: #12542C;   /* derived — deep panels */

  /* Legacy names kept so existing rules keep working */
  --ink-900: #112222;     /* Text — the brand's near-black, all dark sections */
  --ink-800: #16302A;
  --ink-700: #12542C;
  --ink-600: #19763D;
  --ink-500: #176D39;
  --ink-400: #23A455;
  --ink-300: #54B435;
  --ink-200: #88CB37;
  --mist:    #EEFFE8;
  --mist-2:  #F4FBF2;

  /* Surfaces */
  --paper:   #F7FBF6;
  --white:   #FFFFFF;
  --line:    #D3E5D6;
  --line-2:  #B6D2BB;

  /* Text */
  --text:    #112222;
  --muted:   #47604F;
  --muted-2: #5A7260;

  /* Accent. Bright, so only ever a fill or a highlight on dark — never small
     text on white, where it sits at 1.5:1. */
  --gold:    #BCE138;
  --gold-2:  #A5C82A;

  /* RESERVED — help and crisis actions only. See note above.
     Deliberately darker than the brand greens so readers with red-green colour
     blindness can separate it by lightness. It is never the only signal: every
     help control also carries a phone or chat icon and says what it does. */
  --lifeline:      #B3261E;
  --lifeline-dark: #8E1D16;
  --lifeline-tint: #FBECEB;

  --ok: #23A455;

  /* Decorative rules and underlines. The accent sits at 1.4:1 against the page
     background and effectively vanishes there, so light surfaces use the
     primary green and dark surfaces switch to the accent. */
  --rule: #23A455;

  /* Type */
  --display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --body: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Scale */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.44rem);
  --step-2:  clamp(1.44rem, 1.30rem + 0.70vw, 1.95rem);
  --step-3:  clamp(1.73rem, 1.50rem + 1.15vw, 2.63rem);
  --step-4:  clamp(2.07rem, 1.70rem + 1.85vw, 3.55rem);
  --step-5:  clamp(2.49rem, 1.90rem + 2.95vw, 4.80rem);

  /* Space */
  --gap:      1rem;
  --gap-lg:   1.75rem;
  --section:  clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --shell:    1200px;
  --shell-narrow: 780px;

  --radius:   14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(6, 33, 42, .06), 0 2px 8px rgba(6, 33, 42, .05);
  --shadow:    0 4px 12px rgba(6, 33, 42, .07), 0 12px 32px rgba(6, 33, 42, .07);
  --shadow-lg: 0 8px 24px rgba(6, 33, 42, .10), 0 24px 60px rgba(6, 33, 42, .12);

  --ease: cubic-bezier(.22, .61, .36, 1);

  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* The hidden attribute must win. Any component rule that sets a display value
   (e.g. .brand__fallback { display: flex }) would otherwise override the user
   agent's [hidden] { display: none } and render the element anyway. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 .6em;
  color: var(--ink-900);
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); letter-spacing: -0.01em; }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--ink-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink-500); }

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

ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: .4em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

button, input, select, textarea { font: inherit; color: inherit; }

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

::selection { background: var(--ink-200); color: var(--ink-900); }

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 999;
  background: var(--ink-900);
  color: #fff;
  padding: .8rem 1.2rem;
  border-radius: 0 0 10px 10px;
  font-weight: 600;
  text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}
.shell--narrow { width: min(100% - 2.5rem, var(--shell-narrow)); }

.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .6); }
.section--dark { background: var(--ink-900); color: #D1E8D8; --rule: var(--gold); }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--mist { background: var(--mist-2); }

.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 1rem + 3vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 .85rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--rule);
  flex: none;
}
.section--dark .eyebrow { color: var(--ink-200); }
.section-head--center .eyebrow::before { display: none; }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--muted);
}
.section--dark .lede { color: #A0C2AC; }

.grid { display: grid; gap: var(--gap-lg); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink-600);
  --btn-fg: #fff;
  --btn-bd: var(--ink-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 50px;
  padding: .8rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-bd);
  border-radius: var(--radius-pill);
  font-family: var(--body);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink-700); --btn-bd: var(--line-2); }
.btn--ghost:hover { --btn-bg: var(--white); }

.btn--on-dark { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.4); }
.btn--on-dark:hover { --btn-bg: rgba(255,255,255,.1); }

.btn--gold { --btn-bg: var(--gold); --btn-fg: var(--ink-900); --btn-bd: var(--gold); }

/* RESERVED — help actions only */
.btn--lifeline { --btn-bg: var(--lifeline); --btn-fg: #fff; --btn-bd: var(--lifeline); }
.btn--lifeline:hover { --btn-bg: var(--lifeline-dark); --btn-bd: var(--lifeline-dark); }

.btn--sm { min-height: 42px; padding: .5rem 1.15rem; font-size: var(--step--1); }
.btn--block { width: 100%; }

.link-arrow {
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-600);
}
/* Inline rather than flex, so the arrow stays glued to the last word
   instead of being pushed to its own line in a narrow card. */
.link-arrow::after {
  content: "\00a0\2192";
  display: inline-block;
  transition: transform .2s var(--ease);
}
.link-arrow:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5. Utility bar
   -------------------------------------------------------------------------- */
.utility {
  background: var(--ink-900);
  color: #B1CFBB;
  font-size: var(--step--1);
}
.utility__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding-block: .55rem;
}
.utility__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.utility__list li { margin: 0; }
.utility a {
  color: #BED9C7;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding-block: .25rem;
}
.utility a:hover { color: #fff; text-decoration: underline; }
.utility svg { width: 15px; height: 15px; flex: none; opacity: .75; }

.social { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.social li { margin: 0; }
.social a {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  transition: background .18s var(--ease);
}
.social a:hover { background: rgba(255,255,255,.12); }
.social svg { width: 16px; height: 16px; opacity: .85; }

/* --------------------------------------------------------------------------
   6. Header + navigation
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 250, 249, .92);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 2px 20px rgba(17,34,34,.06); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.brand img { height: 46px; width: auto; }
.brand__fallback { display: flex; align-items: center; gap: .6rem; }
.brand__mark {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--ink-600);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -.03em;
}
.brand__text { line-height: 1.1; }
.brand__name {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.16rem;
  letter-spacing: -.03em;
  color: var(--ink-900);
}
.brand__sub {
  display: block;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 600;
}

.nav { display: flex; align-items: center; }
.nav__list {
  display: flex;
  align-items: center;
  gap: .15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list > li { margin: 0; position: static; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .7rem .85rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink-800);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.nav__link:hover { background: var(--mist); color: var(--ink-700); }
.nav__link[aria-current="page"] { color: var(--ink-500); }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  margin-top: 2.2rem;
  width: 18px; height: 2px;
  background: var(--gold);
}
.nav__caret { width: 10px; height: 10px; transition: transform .2s var(--ease); flex: none; }
.nav__item.is-open > .nav__link .nav__caret { transform: rotate(180deg); }

.header__actions { display: flex; align-items: center; gap: .5rem; flex: none; }

/* Mega menu — desktop */
.mega {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.nav__item:hover > .mega,
.nav__item:focus-within > .mega,
.nav__item.is-open > .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mega__inner {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 320px;
  gap: 2.5rem;
  padding: 2.25rem 0 2.5rem;
}
.mega__title {
  font-family: var(--body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 1rem;
}
.mega__list { list-style: none; margin: 0; padding: 0; }
.mega__list li { margin: 0 0 .1rem; }
.mega__list a {
  display: block;
  padding: .5rem .7rem;
  margin-left: -.7rem;
  border-radius: 8px;
  font-weight: 500;
  color: var(--ink-800);
  text-decoration: none;
}
.mega__list a:hover { background: var(--mist-2); color: var(--ink-500); }

.mega__aside {
  background: var(--ink-900);
  color: #BED9C7;
  border-radius: var(--radius);
  padding: 1.6rem;
  align-self: start;
}
.mega__aside p { font-size: .92rem; margin-bottom: 1.1rem; }
.mega__aside strong { color: #fff; }

/* Mobile nav */
.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--white);
  cursor: pointer;
  place-items: center;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 2px;
  background: var(--ink-800);
  position: relative;
  transition: background .2s var(--ease);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px; height: 2px;
  background: var(--ink-800);
  transition: transform .25s var(--ease), top .25s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  --rule: var(--gold);
  position: relative;
  background:
    radial-gradient(1000px 520px at 12% -10%, #12542C 0%, transparent 62%),
    radial-gradient(760px 420px at 92% 8%, #16302A 0%, transparent 58%),
    var(--ink-900);
  color: #D1E8D8;
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 5vw, 5.5rem) clamp(3.5rem, 2rem + 6vw, 6rem);
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(188,225,56,.6), transparent);
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.hero h1 { color: #fff; margin-bottom: .5rem; }
.hero h1 em {
  font-style: normal;
  color: var(--gold);
  display: block;
}
.hero__sub {
  font-size: var(--step-1);
  color: #A0C2AC;
  max-width: 46ch;
  margin-bottom: 2rem;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero__note {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: var(--step--1);
  color: #8FAE9A;
  max-width: 46ch;
}

/* Signature: the helpline is the typographic hero */
.lifeline-card {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  backdrop-filter: blur(6px);
}
.lifeline-card__head {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #A0C2AC;
  margin-bottom: 1.5rem;
}
.pulse {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #88CB37;
  box-shadow: 0 0 0 0 rgba(84,180,53,.6);
  animation: pulse 2.4s infinite;
  flex: none;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(84,180,53,.55); }
  70%  { box-shadow: 0 0 0 12px rgba(84,180,53,0); }
  100% { box-shadow: 0 0 0 0 rgba(84,180,53,0); }
}

.lifeline-number {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 1.1rem + 3.8vw, 3.1rem);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-decoration: none;
  line-height: 1.1;
  padding: .35rem 0;
  transition: color .18s var(--ease);
}
.lifeline-number:hover { color: var(--gold); }
.lifeline-label {
  display: block;
  font-size: var(--step--1);
  color: #8FAE9A;
  margin-bottom: .1rem;
}
.lifeline-card__row + .lifeline-card__row {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
.lifeline-card__foot {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

/* --------------------------------------------------------------------------
   8. Channels ("Find support now")
   -------------------------------------------------------------------------- */
.channel {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  text-decoration: none;
  color: inherit;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.channel:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--line-2);
  color: inherit;
}
.channel__icon {
  width: 48px; height: 48px;
  flex: none;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--lifeline-tint);
  color: var(--lifeline);
}
.channel__icon svg { width: 22px; height: 22px; }
.channel__kind {
  display: block;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.channel__value {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.14rem;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
  overflow-wrap: break-word;
}
/* Email addresses are longer than phone numbers and must not split
   across the domain, so they step down a size instead. */
.channel__value--email {
  font-size: .98rem;
  letter-spacing: 0;
  word-break: normal;
}

/* --------------------------------------------------------------------------
   9. Stats
   -------------------------------------------------------------------------- */
.stat {
  padding: 1.75rem 0;
  border-top: 3px solid var(--gold);
}
.stat__value {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.15rem);
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: #fff;
  margin-bottom: .4rem;
}
.stat__label {
  display: block;
  font-weight: 600;
  color: #BED9C7;
  margin-bottom: .5rem;
}
.stat__note { font-size: var(--step--1); color: #8FAE9A; }

/* --------------------------------------------------------------------------
   10. Cards
   -------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  height: 100%;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card h3 { margin-bottom: .55rem; }
.card p { color: var(--muted); font-size: .97rem; }
.card__foot { margin-top: auto; padding-top: 1.25rem; }

.card__tag {
  display: inline-block;
  align-self: flex-start;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-500);
  background: var(--mist);
  padding: .3rem .65rem;
  border-radius: var(--radius-pill);
  margin-bottom: .9rem;
}

/* Project card gets a rule that encodes the project's status */
.card--project { border-left: 3px solid var(--ink-400); }
.card--project.is-flagship { border-left-color: var(--gold); }

/* Post card */
.post {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  height: 100%;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.post:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.post__media { aspect-ratio: 16 / 9; background: var(--mist); overflow: hidden; }
.post__media img { width: 100%; height: 100%; object-fit: cover; }
.post__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.post__meta {
  font-size: var(--step--1);
  color: var(--muted-2);
  margin-bottom: .6rem;
  font-weight: 500;
}
.post h3 { font-size: 1.16rem; margin-bottom: .55rem; }
.post h3 a { color: inherit; text-decoration: none; }
.post h3 a:hover { color: var(--ink-500); }
.post p { font-size: .94rem; color: var(--muted); }
.post .link-arrow { margin-top: auto; padding-top: 1.1rem; }

/* --------------------------------------------------------------------------
   11. About / split blocks
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.split--media-first .split__media { order: -1; }

.split__media img { border-radius: var(--radius-lg); width: 100%; }
.media-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--mist);
  aspect-ratio: 4 / 3;
  position: relative;
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame__caption {
  position: absolute;
  left: 1rem; right: 1rem; bottom: 1rem;
  background: rgba(17,34,34,.82);
  color: #fff;
  padding: .7rem 1rem;
  border-radius: 10px;
  font-size: var(--step--1);
  backdrop-filter: blur(4px);
}

.tick-list { list-style: none; padding: 0; margin: 0 0 2rem; }
.tick-list li {
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: 1rem;
  color: var(--muted);
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .45em;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--mist);
  border: 1px solid var(--ink-200);
}
.tick-list li::after {
  content: "";
  position: absolute;
  left: 7px; top: calc(.45em + 6px);
  width: 5px; height: 9px;
  border-right: 2px solid var(--ink-500);
  border-bottom: 2px solid var(--ink-500);
  transform: rotate(42deg);
}
.section--dark .tick-list li { color: #A0C2AC; }

/* --------------------------------------------------------------------------
   12. Screening + document panels
   -------------------------------------------------------------------------- */
.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
}
.panel--accent { border-top: 4px solid var(--rule); }

.notice {
  background: var(--mist-2);
  border-left: 3px solid var(--ink-300);
  border-radius: 0 10px 10px 0;
  padding: 1.1rem 1.35rem;
  font-size: .94rem;
  color: var(--muted);
  margin-bottom: 1.75rem;
}
.notice strong { color: var(--ink-700); display: block; margin-bottom: .3rem; }

.doc-link {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.doc-link:hover { border-color: var(--ink-300); transform: translateY(-2px); box-shadow: var(--shadow-sm); color: inherit; }
.doc-link__icon {
  width: 46px; height: 46px;
  flex: none;
  border-radius: 10px;
  background: var(--mist);
  color: var(--ink-600);
  display: grid; place-items: center;
}
.doc-link__icon svg { width: 21px; height: 21px; }
.doc-link h3 { font-size: 1.06rem; margin: 0 0 .15rem; }
.doc-link span { font-size: var(--step--1); color: var(--muted-2); }

/* --------------------------------------------------------------------------
   13. Partners
   -------------------------------------------------------------------------- */
.partners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.partner {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 118px;
  padding: 1.25rem;
  background: var(--white);
  text-decoration: none;
  color: var(--muted);
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.35;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.partner:hover { background: var(--mist-2); color: var(--ink-600); }
.partner img { max-height: 58px; width: auto; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
.partner:hover img { filter: none; opacity: 1; }

/* --------------------------------------------------------------------------
   14. Newsletter
   -------------------------------------------------------------------------- */
.newsletter {
  background: var(--ink-800);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 1.2rem + 3vw, 3.25rem);
  color: #BED9C7;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}
.newsletter h2 { color: #fff; margin-bottom: .5rem; }
.newsletter p { font-size: .96rem; margin: 0; }

.form-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.form-row .field { flex: 1 1 220px; }

.field { display: block; margin-bottom: 1rem; }
.field > span {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  margin-bottom: .4rem;
  color: var(--ink-800);
}
.newsletter .field > span { color: #BED9C7; }

.input, .textarea, .select {
  width: 100%;
  min-height: 50px;
  padding: .75rem 1rem;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  color: var(--text);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--ink-400);
  box-shadow: 0 0 0 3px rgba(35,164,85,.22);
}
.textarea { min-height: 130px; resize: vertical; }

.form-note { font-size: .84rem; color: var(--muted-2); margin-top: .75rem; }
.newsletter .form-note { color: #8FAE9A; }

.form-status {
  margin-top: 1rem;
  padding: .85rem 1.1rem;
  border-radius: 10px;
  font-size: .93rem;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status[data-state="ok"] { background: #E6F7EC; color: #12542C; }
.form-status[data-state="error"] { background: var(--lifeline-tint); color: var(--lifeline-dark); }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--ink-900); color: #A0C2AC; padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 0; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.footer h4 {
  color: #fff;
  font-family: var(--body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: .55rem; }
.footer a { color: #A0C2AC; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer p { font-size: .93rem; }

.footer .brand__name { color: #fff; }
.footer .brand__sub { color: #85A590; }

.footer__map {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  aspect-ratio: 16 / 10;
}
.footer__map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.4); }

.footer__bar {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: .87rem;
}
.footer__bar ul { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.footer__bar li { margin: 0; }

.footer .social a { border: 1px solid rgba(255,255,255,.18); }

/* --------------------------------------------------------------------------
   16. Persistent lifeline bar (mobile)
   -------------------------------------------------------------------------- */
.lifeline-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(17,34,34,.10);
  padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom));
}
.lifeline-bar__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.lifeline-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  min-height: 54px;
  border-radius: 12px;
  text-decoration: none;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--lifeline);
  color: #fff;
}
.lifeline-bar a:nth-child(2) { background: var(--ink-600); }
.lifeline-bar a:nth-child(3) { background: var(--ink-800); }
.lifeline-bar svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   17. Help dialog
   -------------------------------------------------------------------------- */
.dialog {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(17,34,34,.6);
  backdrop-filter: blur(4px);
}
.dialog.is-open { display: flex; }
.dialog__box {
  position: relative;
  width: min(100%, 640px);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  box-shadow: var(--shadow-lg);
  animation: rise .28s var(--ease);
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.dialog__close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
  display: grid; place-items: center;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--muted);
}
.dialog__close:hover { background: var(--mist-2); color: var(--ink-700); }
.dialog h2 { font-size: var(--step-2); }

.dialog .channel { padding: 1rem; margin-bottom: .6rem; }

/* --------------------------------------------------------------------------
   18. Breadcrumb + page header (inner pages)
   -------------------------------------------------------------------------- */
.page-head {
  --rule: var(--gold);
  background:
    radial-gradient(700px 340px at 15% 0%, #12542C 0%, transparent 62%),
    var(--ink-900);
  color: #BED9C7;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}
.page-head h1 { color: #fff; font-size: var(--step-4); margin-bottom: .5rem; }
.page-head p { color: #A0C2AC; font-size: var(--step-1); max-width: 60ch; margin: 0; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  font-size: var(--step--1);
  color: #85A590;
}
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: .4rem; opacity: .5; }
.crumbs a { color: #A0C2AC; text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }

.prose { max-width: 68ch; }
.prose h2 { font-size: var(--step-2); margin-top: 2.5rem; }
.prose h3 { margin-top: 2rem; }
.prose > :first-child { margin-top: 0; }
.prose ol, .prose ul { color: var(--muted); }
.prose li { margin-bottom: .7rem; }

/* Numbered steps — used only where order genuinely matters (how a call works) */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; }
.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 3.6rem;
  padding-bottom: 2rem;
  margin: 0;
}
.steps > li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.24rem; top: 2.6rem; bottom: 0;
  width: 2px;
  background: var(--line);
}
.steps > li::after {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: var(--ink-600);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
}
.steps h3 { margin-bottom: .35rem; font-size: 1.1rem; }
.steps p { color: var(--muted); margin: 0; }

/* Accordion (FAQ) */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--ink-900);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ink-400);
  flex: none;
  transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding-bottom: 1.4rem; color: var(--muted); max-width: 68ch; }

/* --------------------------------------------------------------------------
   19. Scroll reveal
   -------------------------------------------------------------------------- */
/* Content is visible by default. The .js-reveal class is only added by
   main.js once it has confirmed it can animate, so a JS failure, an old
   browser, or a blocked script can never leave a section blank. */
.js-reveal .reveal { opacity: 0; transform: translateY(18px); }
.js-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}

/* --------------------------------------------------------------------------
   20. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .mega__inner { grid-template-columns: 1fr 1fr 280px; gap: 2rem; }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1.4fr; }
  .footer__map-col { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  :root { --header-h: 68px; }

  /* The utility bar would push the sticky header down the page, and the
     fixed nav panel is offset from the top of the viewport, not the header.
     Hiding it keeps the two aligned — and every number in it also appears
     in the hero, the channel cards and the fixed bar at the bottom. */
  .utility { display: none; }

  /* backdrop-filter makes the header a containing block, which would trap
     the fixed-position nav panel inside it. Solid background instead. */
  .header {
    background: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .nav-toggle { display: grid; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--paper);
    overflow-y: auto;
    padding: 1.25rem 1.25rem 6rem;
    transform: translateX(100%);
    transition: transform .3s var(--ease);
    display: block;
  }
  .nav.is-open { transform: none; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list > li { border-bottom: 1px solid var(--line); }
  .nav__link {
    width: 100%;
    justify-content: space-between;
    padding: 1rem .25rem;
    font-size: 1.06rem;
    border-radius: 0;
  }
  .nav__link:hover { background: none; }
  .nav__link[aria-current="page"]::after { display: none; }

  .mega {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-top: 0;
    background: none;
    display: none;
  }
  .nav__item.is-open > .mega { display: block; }
  .mega__inner {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: .25rem 0 1.5rem;
  }
  .mega__aside { display: none; }

  .header__actions .btn--lifeline { display: none; }

  .hero__inner { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split--media-first .split__media { order: 0; }
  .newsletter { grid-template-columns: 1fr; }

  .lifeline-bar { display: block; }
  body { padding-bottom: 74px; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__map-col { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .shell, .shell--narrow { width: min(100% - 1.75rem, var(--shell)); }
  .utility__inner { justify-content: center; }
  .utility__list { justify-content: center; }
  .hero__cta .btn { width: 100%; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer__bar { flex-direction: column; align-items: flex-start; }
  .steps > li { padding-left: 3.1rem; }
}

/* --------------------------------------------------------------------------
   21. Motion, print, forced colours
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .utility, .header, .lifeline-bar, .dialog, .footer__map, .newsletter { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .hero, .page-head, .section--dark { background: #fff !important; color: #000 !important; }
  .hero h1, .page-head h1, .section--dark h2 { color: #000 !important; }
  a::after { content: " (" attr(href) ")"; font-size: .8em; word-break: break-all; }
}

@media (forced-colors: active) {
  .btn, .card, .channel, .panel { border: 1px solid; }
}

/* ==========================================================================
   22. People (faculty, team) — added for the faculty directory
   ========================================================================== */
.person {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  height: 100%;
  text-decoration: none;
  color: inherit;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.person:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: inherit; }
.person__photo {
  aspect-ratio: 1 / 1;
  background: var(--mist);
  position: relative;
  overflow: hidden;
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* Initials stand in until a photograph is uploaded */
.person__initials {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.4rem;
  letter-spacing: -.03em;
  color: var(--ink-400);
  background: var(--mist);
}
.person__body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.person__name { font-size: 1.06rem; margin: 0 0 .35rem; }
.person__role { font-size: .89rem; color: var(--muted); margin: 0 0 1rem; line-height: 1.5; }
.person__body .link-arrow { margin-top: auto; font-size: .9rem; }

/* Profile header for a single person */
.profile-head { display: grid; grid-template-columns: 220px 1fr; gap: 2.5rem; align-items: start; }
.profile-head__photo {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255,255,255,.1);
  position: relative;
}
.profile-head__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.profile-head__initials {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 3.6rem;
  color: rgba(255,255,255,.55);
}
.creds {
  display: flex; flex-wrap: wrap; gap: .4rem;
  list-style: none; margin: 1rem 0 0; padding: 0;
}
.creds li {
  margin: 0;
  font-size: .82rem;
  font-weight: 600;
  padding: .3rem .7rem;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.12);
  color: #D1E8D8;
}

/* ==========================================================================
   23. Data tables (facilities, PHC lists)
   ========================================================================== */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  -webkit-overflow-scrolling: touch;
}
.data-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 640px; }
.data-table caption {
  text-align: left;
  padding: 1rem 1.25rem;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.data-table th, .data-table td { padding: .8rem 1.25rem; text-align: left; vertical-align: top; }
.data-table thead th {
  background: var(--mist-2);
  font-family: var(--body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-700);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
}
.data-table tbody tr + tr td { border-top: 1px solid var(--line); }
.data-table tbody tr:hover td { background: var(--mist-2); }
.data-table td:first-child { font-weight: 600; color: var(--ink-800); }

/* ==========================================================================
   24. Tabs
   ========================================================================== */
.tabs {
  display: flex;
  gap: .25rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2rem;
  /* Tightened on phones — see the directory intro rules below. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tab {
  flex: none;
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: .85rem 1.1rem;
  margin-bottom: -1px;
  font-family: var(--body);
  font-weight: 600;
  font-size: .95rem;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.tab:hover { color: var(--ink-600); }
.tab[aria-selected="true"] { color: var(--ink-500); border-bottom-color: var(--ink-500); }
.tab__count {
  display: inline-block;
  margin-left: .4rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted-2);
}
[role="tabpanel"][hidden] { display: none; }

/* ==========================================================================
   25. Provider directory
   ========================================================================== */
.dir-filters {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.dir-search { position: relative; }
.dir-search .input { padding-left: 2.75rem; }
.dir-search svg {
  position: absolute;
  left: 1rem; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--muted-2);
  pointer-events: none;
}
.dir-actions { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.75rem; }
.dir-count { color: var(--muted); font-size: .93rem; margin: 0 0 1.5rem; }

.dir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

.dir-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.dir-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--line-2);
  color: inherit;
}
.dir-card__banner { height: 74px; background: linear-gradient(135deg, var(--ink-500), var(--ink-700)); }
.dir-card__avatar {
  width: 76px; height: 76px;
  margin: -46px auto 0;
  border-radius: 18px;
  background: var(--mist);
  border: 4px solid var(--white);
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ink-600);
  position: relative;
  overflow: hidden;
}
/* Logos and photographs need opposite treatment.

   An organisation's logo usually has its own whitespace and often a
   transparent background, so cropping it to fill the square mangles it —
   contain it instead, on white, with a little breathing room.

   A person's photograph should fill the circle, so cover is right there. */
.dir-card__avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  background: var(--white);
}
/* A logo plate: wide enough that a typical 3:1 logo is actually readable at
   card size. Only applied when an organisation has supplied one. */
.dir-card__avatar--logo {
  width: 150px;
  border-radius: 14px;
}

.dir-card--person .dir-card__avatar { border-radius: 50%; }
.dir-card--person .dir-card__avatar img {
  object-fit: cover;
  object-position: top center;
  padding: 0;
}
.dir-card__body { padding: 1rem 1.25rem 1.25rem; text-align: center; flex: 1; }
.dir-card__name {
  font-size: 1.03rem;
  margin: 0 0 .3rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  justify-content: center;
  flex-wrap: wrap;
}
.dir-card__headline { font-size: .89rem; color: var(--muted); margin: 0 0 .6rem; line-height: 1.45; }
.dir-card__meta {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .85rem;
  color: var(--muted-2);
  margin: 0 0 .8rem;
}
.dir-card__foot {
  border-top: 1px solid var(--line);
  padding: .85rem;
  text-align: center;
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink-600);
}

.verified { color: var(--ink-400); display: inline-flex; flex: none; }
.verified svg { width: 15px; height: 15px; }

.chips { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; }
.chip {
  font-size: .76rem;
  font-weight: 600;
  padding: .28rem .65rem;
  border-radius: var(--radius-pill);
  background: var(--mist);
  color: var(--ink-600);
}
.chips--left { justify-content: flex-start; }

.dir-empty {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--muted);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
}
.dir-empty h3 { margin-bottom: .5rem; }

/* Provider profile */
.profile-hero {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 2rem;
}
.profile-hero__banner { height: 130px; background: linear-gradient(135deg, var(--ink-500), var(--ink-800)); }
/* flex-start, not flex-end: the avatar's negative top margin is what lifts it
   over the banner, and flex-end cancels that out — the avatar just sits below
   the banner and the whole effect is lost. */
.profile-hero__inner {
  padding: 0 clamp(1.25rem, 1rem + 2vw, 2.25rem) clamp(1.5rem, 1rem + 2vw, 2.25rem);
  display: flex;
  gap: 1.75rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.profile-hero__avatar {
  width: 128px; height: 128px;
  margin-top: -64px;
  border-radius: 24px;
  border: 5px solid var(--white);
  background: var(--mist);
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--ink-600);
  flex: none;
  overflow: hidden;
}
.profile-hero__avatar { position: relative; }
.profile-hero__avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
  background: var(--white);
}
.profile-hero__avatar--logo {
  width: 210px;
  border-radius: 18px;
}

.profile-hero--person .profile-hero__avatar { border-radius: 50%; }
.profile-hero--person .profile-hero__avatar img {
  object-fit: cover;
  object-position: top center;
  padding: 0;
}
.profile-hero__text { flex: 1 1 320px; padding-top: 1.25rem; }
.profile-hero__name { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .3rem; font-size: var(--step-3); }
.profile-hero__headline { font-size: var(--step-1); color: var(--muted); margin-bottom: .7rem; }
.profile-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1.25rem; font-size: .92rem; color: var(--muted-2); }
.pill {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: var(--radius-pill);
  background: var(--ink-700);
  color: #fff;
}
.profile-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

.profile-cols { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; align-items: start; }

.dl { margin: 0; }
.dl dt {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: 1.1rem;
}
.dl dt:first-child { margin-top: 0; }
.dl dd { margin: .25rem 0 0; color: var(--ink-800); }

.panel--note { background: var(--mist-2); border-color: var(--line-2); }
.panel + .panel { margin-top: 1.5rem; }
.panel h2 { font-size: var(--step-1); margin-bottom: 1rem; }

.plain-list { list-style: none; padding: 0; margin: 0; }
.plain-list li { position: relative; padding-left: 1.4rem; margin-bottom: .6rem; color: var(--muted); }
.plain-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-300);
}

/* --------------------------------------------------------------------------
   Directory intro — guidance and provider sign-up, side by side
   --------------------------------------------------------------------------
   Two audiences arrive at the directory: people looking for care, and
   providers wanting a listing. The sign-up used to sit below the whole grid,
   so a provider had to scroll past every card to find it. Both now answer
   above the fold.
   -------------------------------------------------------------------------- */
.dir-intro {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
  margin-bottom: 2.25rem;
}
/* The two cards stretch to match each other. The guidance is the shorter of
   the pair, so centre it rather than leaving a block of dead space below. */
.dir-intro > .notice {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dir-cta {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.dir-cta .eyebrow { margin-bottom: .55rem; }
.dir-cta h2 { font-size: var(--step-1); margin-bottom: .45rem; }
.dir-cta p { font-size: .93rem; color: var(--muted); margin-bottom: 1.35rem; }
.dir-cta .btn { align-self: flex-start; margin-top: auto; }

@media (max-width: 900px) {
  .dir-intro { grid-template-columns: 1fr; gap: .85rem; margin-bottom: 1.5rem; }

  /* Tighten the guidance on a phone so adding the sign-up above it doesn't
     push the search box off the screen for the people who came to search. */
  .dir-intro > .notice {
    padding: .95rem 1.1rem;
    font-size: .89rem;
    line-height: 1.55;
  }

  /* On a phone the full card would push the search box off the screen, so it
     collapses to a single compact row: heading plus button. The description is
     dropped rather than shrunk — the registration page says all of it again,
     and a help-seeker scrolling to the search shouldn't have to read past it. */
  .dir-cta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    padding: 1.1rem 1.25rem;
  }
  .dir-cta .eyebrow,
  .dir-cta p { display: none; }
  .dir-cta h2 { font-size: 1.06rem; margin: 0; }
  .dir-cta .btn { margin-top: 0; }
}

@media (max-width: 900px) {
  #directory .tabs { margin-bottom: 1.25rem; }
  #directory .dir-filters { margin-bottom: 1rem; }
  #directory .dir-actions { margin-bottom: 1.25rem; }
}

@media (max-width: 480px) {
  .dir-cta { flex-direction: column; align-items: stretch; text-align: center; }
  .dir-cta .btn { width: 100%; }
}

/* ==========================================================================
   26. Coming soon / placeholder state
   ========================================================================== */
.coming-soon {
  text-align: center;
  max-width: 54ch;
  margin-inline: auto;
  padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 1.5rem;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.coming-soon__mark {
  width: 60px; height: 60px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: var(--mist);
  display: grid; place-items: center;
  color: var(--ink-500);
}
.coming-soon__mark svg { width: 26px; height: 26px; }
.coming-soon p { color: var(--muted); }

/* ==========================================================================
   27. Article / post typography
   ========================================================================== */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  align-items: center;
  font-size: .92rem;
  color: #A0C2AC;
  margin-top: 1rem;
}
.article-body { max-width: 70ch; }
.article-body h2 { font-size: var(--step-2); margin-top: 2.75rem; }
.article-body h3 { margin-top: 2rem; }
.article-body > :first-child { margin-top: 0; }
.article-body ol, .article-body ul { color: var(--muted); }
.article-body ol li, .article-body ul li { margin-bottom: .8rem; }
.article-body strong { color: var(--ink-900); }
.article-body a { color: var(--ink-500); }

.share { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.share span { font-weight: 600; font-size: .92rem; color: var(--muted); }

.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
}
.post-nav a {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.35rem;
  text-decoration: none;
  background: var(--white);
  transition: border-color .2s var(--ease);
}
.post-nav a:hover { border-color: var(--ink-300); }
.post-nav small { display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); font-weight: 700; margin-bottom: .3rem; }
.post-nav strong { color: var(--ink-800); font-weight: 600; }
.post-nav a:last-child { text-align: right; }

/* ==========================================================================
   28. Responsive additions
   ========================================================================== */
@media (max-width: 1080px) {
  .dir-filters { grid-template-columns: 1fr 1fr 1fr; }
  .dir-search { grid-column: 1 / -1; }
  .profile-cols { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .profile-head { grid-template-columns: 160px 1fr; gap: 1.5rem; }
}

@media (max-width: 640px) {
  .dir-card__avatar--logo { width: 130px; }
  .profile-hero__avatar--logo { width: 150px; }
  .dir-filters { grid-template-columns: 1fr 1fr; }
  .profile-head { grid-template-columns: 1fr; }
  .profile-head__photo { max-width: 180px; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav a:last-child { text-align: left; }
  .profile-hero__avatar { width: 96px; height: 96px; margin-top: -48px; }
}