/* ==========================================================================
   Safe Mothers Initiative : main stylesheet
   Loads after tokens.css. Nothing here invents a colour or a size; every
   value traces back to a custom property in tokens.css.

   Order: layout > header > help bar > hero > sections > components > footer
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Layout primitives
   -------------------------------------------------------------------------- */

html {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.section {
  padding-block: clamp(3rem, 8vw, 6rem);
}
.section--tight { padding-block: clamp(2rem, 5vw, 3.5rem); }
.section--paper { background: var(--smi-paper); }
.section--white { background: var(--smi-white); }
.section--navy {
  background: var(--smi-navy-800);
  color: var(--smi-text-inverse);
}
.section--navy h2,
.section--navy h3 { color: var(--smi-white); }
.section--navy p { color: #DCE3F5; }

.section__head {
  max-inline-size: 62ch;
  margin-block-end: var(--smi-space-12);
}
.section__eyebrow {
  display: block;
  font-family: var(--smi-font-body);
  font-size: var(--smi-text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--smi-green-800);
  margin-block-end: var(--smi-space-3);
}
.section--navy .section__eyebrow { color: var(--smi-green-500); }

.grid { display: grid; gap: var(--smi-space-6); }
@media (min-width: 640px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.stack > * + * { margin-block-start: var(--smi-space-4); }

/* --------------------------------------------------------------------------
   2. Buttons
   Three levels only. A fourth fill colour would dilute the two that matter.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--smi-space-2);
  padding: var(--smi-space-3) var(--smi-space-6);
  font-family: var(--smi-font-body);
  font-size: var(--smi-text-base);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--smi-radius-pill);
  cursor: pointer;
  transition: transform var(--smi-dur-fast) var(--smi-ease),
              background-color var(--smi-dur-fast) var(--smi-ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--help {
  background: var(--smi-action-help-bg);
  color: var(--smi-action-help-text);
}
.btn--help:hover { background: var(--smi-navy-900); }

.btn--give {
  background: var(--smi-action-give-bg);
  color: var(--smi-action-give-text);
}
.btn--give:hover { background: #275C0A; }

.btn--quiet {
  background: transparent;
  color: var(--smi-action-quiet-text);
  border-color: var(--smi-action-quiet-border);
}
.btn--quiet:hover { background: var(--smi-navy-050); }

.section--navy .btn--quiet {
  color: var(--smi-white);
  border-color: rgba(255, 255, 255, 0.55);
}
.section--navy .btn--quiet:hover { background: rgba(255, 255, 255, 0.10); }

.btn--lg { padding: var(--smi-space-4) var(--smi-space-8); font-size: var(--smi-text-lg); }
.btn--block { display: flex; inline-size: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--smi-space-2);
  font-weight: 700;
  text-decoration: none;
  color: var(--smi-blue-700);
  border-block-end: 2px solid currentColor;
  padding-block-end: 2px;
}
.link-arrow:hover { color: var(--smi-navy-800); }

/* --------------------------------------------------------------------------
   3. Help bar : the signature element
   Renders twice. A strip at the top of the document on wide screens, and a
   fixed bar at the bottom of the viewport on phones where the thumb is.
   Both are readable with JavaScript disabled: the HTML carries the staffed
   hours as static text and JS upgrades it to a live status.
   -------------------------------------------------------------------------- */

.helpbar {
  background: var(--smi-navy-900);
  color: var(--smi-white);
  font-size: var(--smi-text-sm);
}
.helpbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--smi-space-3) var(--smi-space-6);
  padding-block: var(--smi-space-2);
}
.helpbar a { color: var(--smi-white); font-weight: 700; }

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--smi-space-2);
  font-weight: 700;
  white-space: nowrap;
}
.status__dot {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--smi-green-500);
  flex: none;
}
.status[data-state="closed"] .status__dot { background: #F5C542; }
.status[data-state="unknown"] .status__dot { background: #9AA5B8; }

/* The pulse is the one animated thing on the page. It signals "a person is
   there right now", which is the single most important fact on the site. */
.status[data-state="open"] .status__dot {
  animation: smi-pulse 2.4s var(--smi-ease) infinite;
}
@keyframes smi-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(80, 188, 26, 0.7); }
  60%      { box-shadow: 0 0 0 8px rgba(80, 188, 26, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .status[data-state="open"] .status__dot { animation: none; }
}

.helpbar__note { color: #C3CFEA; }

/* Fixed phone bar */
.helpbar--fixed {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 60;
  border-block-start: 3px solid var(--smi-green-500);
  box-shadow: 0 -6px 20px rgba(6, 24, 69, 0.28);
}
.helpbar--fixed .helpbar__inner {
  justify-content: space-between;
  padding-block: var(--smi-space-3);
  gap: var(--smi-space-3);
}
.helpbar--fixed .btn { padding-block: var(--smi-space-2); }

@media (min-width: 860px) { .helpbar--fixed { display: none; } }
@media (max-width: 859px) {
  .helpbar--top { display: none; }
  body { padding-block-end: 96px; }
}

/* --------------------------------------------------------------------------
   4. Header and navigation
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  inset-block-start: 0;
  z-index: 90;
  background: var(--smi-white);
  border-block-end: 1px solid var(--smi-hairline);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--smi-space-2);
  padding-block: var(--smi-space-2);
}
.header__logo { display: flex; align-items: center; text-decoration: none; }
.header__logo img { block-size: 52px; inline-size: auto; display: block; }

.header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--smi-space-2);
  flex: 1;
}

.header__cta { display: none; margin-left: var(--smi-space-4); }

.nav__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--smi-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  display: inline-block;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--smi-navy-800);
  padding: var(--smi-space-2) var(--smi-space-3);
  border-block-end: 3px solid transparent;
  border-radius: var(--smi-radius-sm);
}
.nav__link:hover {
  background: var(--smi-green-050);
  border-block-end-color: var(--smi-green-800);
}
.nav__link[aria-current="page"] {
  background: var(--smi-navy-050);
  border-block-end-color: var(--smi-navy-800);
}

/* Get Help is first, left, and visually louder than its neighbours. */
.nav__link--help {
  color: var(--smi-white);
  background: var(--smi-navy-800);
  padding-inline: var(--smi-space-4);
  border-radius: var(--smi-radius-pill);
  border-block-end: none;
}
.nav__link--help[aria-current="page"] {
  color: var(--smi-white);
  background: var(--smi-navy-800);
  border-block-end: none;
}
.nav__link--help:hover { background: var(--smi-navy-900); border-block-end: none; }

.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--smi-space-2);
  background: transparent;
  border: 2px solid var(--smi-navy-800);
  border-radius: var(--smi-radius-pill);
  color: var(--smi-navy-800);
  font-weight: 700;
  padding-inline: var(--smi-space-3);
}

.nav {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  z-index: 110;
  max-block-size: calc(100vh - 68px);
  overflow-y: auto;
  background: var(--smi-white);
  border-block-end: 1px solid var(--smi-hairline);
  box-shadow: var(--smi-shadow-lg);
  padding: var(--smi-space-4) var(--smi-gutter) var(--smi-space-8);
}
.nav[hidden] { display: none; }
.nav__link {
  border-block-end: none;
  border-block-end: 1px solid var(--smi-hairline);
  padding-block: var(--smi-space-4);
}
.nav__link--help { text-align: center; border-block-end: none; }
.nav__menu { position: relative; z-index: 2; }
.nav__item--help,
.nav__donate { min-inline-size: 0; }
.nav__item--help .nav__link,
.nav__donate .btn { inline-size: 100%; }

@media (max-width: 1199px) {
  .nav__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav__list > li:not(.nav__item--help):not(.nav__donate) { grid-column: 1 / -1; }
  .nav__donate { margin-block-start: 0; }
}

@media (min-width: 1200px) {
  .header__inner { gap: var(--smi-space-4); padding-block: var(--smi-space-3); }
  .header__logo img { block-size: 64px; }
  .header__actions { min-inline-size: 0; gap: var(--smi-space-3); }
  .nav__toggle { display: none; }
  .nav {
    position: static;
    min-inline-size: 0;
    max-block-size: none;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .nav__list { flex-direction: row; align-items: center; gap: var(--smi-space-1); }
  .nav__link { padding-block: var(--smi-space-2); padding-inline: var(--smi-space-2); }
  .nav__item--help { flex: 0 0 auto; min-inline-size: max-content; }
  .nav__item--help .nav__link,
  .nav__donate .btn { inline-size: auto; }
  .header__cta { display: block; }
}

/* --------------------------------------------------------------------------
   5. Hero : testimony, not a counter
  .nav__item--help { flex: 0 0 auto; }
  .nav__link--help { white-space: nowrap; }
   5. Hero : testimony, not a counter
   -------------------------------------------------------------------------- */

.person-grid {
  display: grid;
  gap: var(--smi-space-6);
}
@media (min-width: 760px) {
  .person-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .person-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.person {
  display: flex;
  flex-direction: column;
  background: var(--smi-white);
  border: 1px solid var(--smi-hairline);
  border-radius: var(--smi-radius-lg);
  box-shadow: var(--smi-shadow-sm);
  overflow: hidden;
  transition: transform var(--smi-dur) var(--smi-ease), box-shadow var(--smi-dur) var(--smi-ease);
}
.person:hover,
.person:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--smi-shadow-md);
}
.person__photo {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--smi-navy-050);
}
.person__body {
  padding: var(--smi-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--smi-space-4);
}
.person__name {
  margin: 0;
  font-size: var(--smi-text-xl);
  line-height: 1.2;
  color: var(--smi-navy-900);
}
.person__role {
  margin: 0;
  color: var(--smi-green-800);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.person__cta {
  margin-top: auto;
  align-self: flex-start;
}

.hero {
  background: transparent;
  color: var(--smi-white);
  min-block-size: min(640px, 88svh);
  padding-block: clamp(3rem, 9vw, 6.5rem) clamp(4.5rem, 12vw, 7rem);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.hero__slides {
  position: absolute;
  inset: 0;
}
.hero__slides { z-index: 0; }
.hero__slides--portrait {
  background: linear-gradient(90deg, var(--smi-navy-900) 0%, var(--smi-navy-800) 50%, var(--smi-navy-900) 100%);
}
.hero__slide {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.hero__slide.is-active { opacity: 1; }
.hero__slide--contain {
  object-fit: contain;
  object-position: center;
}
.hero__dots {
  position: absolute;
  inset-inline: var(--smi-space-5);
  inset-block-end: var(--smi-space-5);
  display: flex;
  justify-content: center;
  gap: var(--smi-space-2);
}
.hero__dot {
  inline-size: 2.5rem;
  block-size: 0.25rem;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
}
.hero__dot.is-active { background: var(--smi-green-500); }
.hero__dot:focus-visible { outline: 3px solid var(--smi-white); outline-offset: 4px; }

/* Ambient crescent lifted from the logo mark, at low opacity. It is the only
   decorative element on the page and it carries no information, so it is
   hidden from assistive technology. */
.hero__mark {
  position: absolute;
  inset-block-start: -18%;
  inset-inline-end: -12%;
  inline-size: min(52vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: clamp(18px, 4vw, 42px) solid var(--smi-blue-500);
  opacity: 0.14;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  max-inline-size: 46rem;
  margin-inline-start: 0;
  margin-inline-end: auto;
}

.hero__quote { margin: 0 0 var(--smi-space-8); }
.hero__krio {
  font-family: var(--smi-font-display);
  font-size: var(--smi-text-3xl);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--smi-white);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
  margin: 0;
  text-wrap: balance;
}
.hero__english {
  font-size: var(--smi-text-lg);
  line-height: 1.55;
  color: #C9D6F2;
  margin-block-start: var(--smi-space-4);
  max-inline-size: 40ch;
}
.hero__attrib {
  display: block;
  font-size: var(--smi-text-sm);
  font-style: normal;
  color: #9FB2DC;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  margin-block-start: var(--smi-space-4);
}
.hero__attrib::before { content: ""; }

.hero__headline {
  font-family: var(--smi-font-body);
  font-size: var(--smi-text-xl);
  font-weight: 700;
  color: var(--smi-white);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
  margin: 0 0 var(--smi-space-3);
  max-inline-size: 34ch;
}
.hero__sub {
  color: #C9D6F2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  margin-block-end: var(--smi-space-8);
  max-inline-size: 48ch;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--smi-space-3); }

.hero__rule {
  inline-size: 64px;
  block-size: 4px;
  background: var(--smi-green-500);
  border: 0;
  margin: 0 0 var(--smi-space-8);
}

/* --------------------------------------------------------------------------
   6. Impact figures
   Every figure carries the date it was measured. A number without a date is
   a claim; a number with a date is evidence.
   -------------------------------------------------------------------------- */

.stat { border-block-start: 4px solid var(--smi-green-500); padding-block-start: var(--smi-space-4); }
.stat__value {
  display: block;
  font-family: var(--smi-font-display);
  font-size: var(--smi-text-3xl);
  font-weight: 700;
  line-height: 1;
  color: var(--smi-navy-800);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  display: block;
  font-weight: 600;
  margin-block-start: var(--smi-space-2);
}
.stat__source {
  display: block;
  font-size: var(--smi-text-xs);
  color: var(--smi-text-muted);
  margin-block-start: var(--smi-space-1);
}

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  background: var(--smi-white);
  border: 1px solid var(--smi-hairline);
  border-radius: var(--smi-radius-lg);
  padding: var(--smi-space-6);
  block-size: 100%;
  transition: box-shadow var(--smi-dur) var(--smi-ease),
              border-color var(--smi-dur) var(--smi-ease);
}
.card:hover { box-shadow: var(--smi-shadow-md); border-color: var(--smi-blue-500); }
.card h3 { font-size: var(--smi-text-lg); margin-block-end: var(--smi-space-2); }
.card p { font-size: var(--smi-text-sm); color: var(--smi-text-muted); }
.card .link-arrow { margin-block-start: var(--smi-space-4); align-self: flex-start; }

.card__tag {
  display: inline-block;
  font-size: var(--smi-text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--smi-green-800);
  background: var(--smi-green-050);
  border-radius: var(--smi-radius-pill);
  padding: var(--smi-space-1) var(--smi-space-3);
  margin-block-end: var(--smi-space-3);
  align-self: flex-start;
}

.card__meta {
  font-size: var(--smi-text-xs);
  color: var(--smi-text-muted);
  margin-block-end: var(--smi-space-2);
}

.video-card { padding: 0; overflow: hidden; }
.video-card__frame {
  background: var(--smi-navy-900);
  aspect-ratio: 16 / 9;
}
.video-card__frame video {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.video-card h3,
.video-card p { margin-inline: var(--smi-space-6); }
.video-card h3 { margin-block-start: var(--smi-space-6); }
.video-card p { margin-block-end: var(--smi-space-6); }
.video-card__note { margin-block-start: var(--smi-space-6); }

.gallery-grid { margin-block-start: var(--smi-space-6); }
.gallery-card { padding: 0; overflow: hidden; }
.gallery-card img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  cursor: pointer;
}
.gallery-card img:focus-visible {
  outline: 4px solid var(--smi-green-500);
  outline-offset: -4px;
}
.gallery-card figcaption {
  padding: var(--smi-space-4);
  font-size: var(--smi-text-sm);
  color: var(--smi-text-muted);
}

.image-viewer {
  inline-size: min(92vw, 1100px);
  max-inline-size: 1100px;
  block-size: min(92svh, 820px);
  max-block-size: 92svh;
  padding: var(--smi-space-4);
  border: 0;
  background: transparent;
  overflow: hidden;
}
.image-viewer::backdrop { background: rgba(3, 12, 34, 0.92); }
.image-viewer__close {
  position: absolute;
  inset-block-start: var(--smi-space-4);
  inset-inline-end: var(--smi-space-4);
  z-index: 1;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 2px solid var(--smi-white);
  border-radius: 50%;
  background: var(--smi-navy-900);
  color: var(--smi-white);
  font-size: var(--smi-text-xl);
  line-height: 1;
  cursor: pointer;
}
.image-viewer__close:focus-visible { outline: 3px solid var(--smi-green-500); outline-offset: 3px; }
.image-viewer__image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* Numbered programme cards. The four programmes are a genuine progression,
   awareness through to policy, so the numbering encodes something true. */
.programme { position: relative; padding-block-start: var(--smi-space-8); }
.programme__num {
  position: absolute;
  inset-block-start: var(--smi-space-4);
  inset-inline-end: var(--smi-space-6);
  font-family: var(--smi-font-display);
  font-size: var(--smi-text-2xl);
  font-weight: 700;
  color: var(--smi-navy-100);
  line-height: 1;
}

/* --------------------------------------------------------------------------
   8. Story panel
   -------------------------------------------------------------------------- */

.story {
  background: var(--smi-white);
  border-inline-start: 6px solid var(--smi-green-500);
  border-radius: 0 var(--smi-radius-lg) var(--smi-radius-lg) 0;
  padding: var(--smi-space-8);
  box-shadow: var(--smi-shadow-sm);
}
.story blockquote {
  margin: 0;
  font-family: var(--smi-font-display);
  font-size: var(--smi-text-xl);
  line-height: 1.4;
  color: var(--smi-navy-800);
}
.story figcaption {
  margin-block-start: var(--smi-space-4);
  font-size: var(--smi-text-sm);
  color: var(--smi-text-muted);
}

/* --------------------------------------------------------------------------
   9. Forms
   -------------------------------------------------------------------------- */

.field { margin-block-end: var(--smi-space-5); }
.field label {
  display: block;
  font-weight: 700;
  margin-block-end: var(--smi-space-2);
}
.field__hint {
  display: block;
  font-size: var(--smi-text-sm);
  font-weight: 400;
  color: var(--smi-text-muted);
  margin-block-start: var(--smi-space-1);
}
.field input,
.field select,
.field textarea {
  inline-size: 100%;
  padding: var(--smi-space-3) var(--smi-space-4);
  font-family: inherit;
  font-size: var(--smi-text-base);
  color: var(--smi-ink);
  background: var(--smi-white);
  border: 2px solid #9AA5B8;
  border-radius: var(--smi-radius-md);
}
.field textarea { min-block-size: 8rem; resize: vertical; }
.field input:hover,
.field textarea:hover { border-color: var(--smi-navy-700); }

.field__error {
  display: block;
  font-size: var(--smi-text-sm);
  font-weight: 700;
  color: var(--smi-error);
  margin-block-start: var(--smi-space-2);
}
.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea,
.field[data-invalid="true"] select { border-color: var(--smi-error); }

.field--check { display: flex; gap: var(--smi-space-3); align-items: flex-start; }
.field--check input { inline-size: 24px; block-size: 24px; min-inline-size: 24px; flex: none; }
.field--check label { font-weight: 400; font-size: var(--smi-text-sm); }

.required { color: var(--smi-error); font-weight: 700; }

/* --------------------------------------------------------------------------
   10. Callouts
   -------------------------------------------------------------------------- */

.callout {
  border-radius: var(--smi-radius-lg);
  padding: var(--smi-space-6);
  border-inline-start: 6px solid;
}
.callout h3 { margin-block-end: var(--smi-space-2); font-size: var(--smi-text-lg); }
.callout p:last-child { margin-block-end: 0; }

.callout--urgent {
  background: #FFF4E5;
  border-color: var(--smi-closed);
}
.callout--urgent h3 { color: #7A4F00; }

.callout--calm {
  background: var(--smi-navy-050);
  border-color: var(--smi-navy-800);
}

.callout--todo {
  background: #FFF1F1;
  border-color: var(--smi-error);
  font-size: var(--smi-text-sm);
}
.callout--todo h3 { color: var(--smi-error); }

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--smi-navy-900);
  color: #C3CFEA;
  padding-block: var(--smi-space-16) var(--smi-space-8);
  font-size: var(--smi-text-sm);
}
.footer h2, .footer h3 {
  color: var(--smi-white);
  font-family: var(--smi-font-body);
  font-size: var(--smi-text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-block-end: var(--smi-space-4);
}
.footer a { color: var(--smi-white); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-block-end: var(--smi-space-3); }

.footer__grid {
  display: grid;
  gap: var(--smi-space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.6fr; } }

.footer__logo { background: var(--smi-white); border-radius: var(--smi-radius-md); padding: var(--smi-space-3); display: inline-block; }
.footer__logo img { block-size: 44px; inline-size: auto; display: block; }

.newsletter { display: flex; flex-wrap: wrap; gap: var(--smi-space-3); }
.newsletter input {
  flex: 1 1 12rem;
  padding: var(--smi-space-3) var(--smi-space-4);
  border: 2px solid #3A4A78;
  border-radius: var(--smi-radius-md);
  background: var(--smi-navy-800);
  color: var(--smi-white);
  font-family: inherit;
}
.newsletter input::placeholder { color: #8FA2CE; }

.footer__legal {
  margin-block-start: var(--smi-space-12);
  padding-block-start: var(--smi-space-6);
  border-block-start: 1px solid #2A3A66;
  display: flex;
  flex-wrap: wrap;
  gap: var(--smi-space-3) var(--smi-space-6);
  justify-content: space-between;
  font-size: var(--smi-text-xs);
}
.footer__legal ul { display: flex; flex-wrap: wrap; gap: var(--smi-space-4); }
.footer__legal li { margin: 0; }

/* --------------------------------------------------------------------------
   12. Print
   -------------------------------------------------------------------------- */

@media print {
  .helpbar--fixed, .header, .footer, .hero__mark { display: none !important; }
  body { padding: 0; background: #fff; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* ==========================================================================
   13. Icons
   One inlined sprite per page, referenced with <use>. Stroke and fill are
   inherited properties, so setting them here reaches the cloned content of
   every <use> instance.
   ========================================================================== */

.smi-sprite { display: none; }

.icon {
  inline-size: 1.15em;
  block-size: 1.15em;
  flex: none;
  vertical-align: -0.18em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Inline icons sitting beside text need a little air. */
.nav__link .icon,
.btn .icon,
.helpbar a .icon,
.helpbar__note .icon,
.footer h3 .icon,
.section__eyebrow .icon,
.callout h3 .icon,
.link-arrow .icon { margin-inline-end: var(--smi-space-2); }

.section__eyebrow .icon { inline-size: 1.05em; block-size: 1.05em; opacity: 0.9; }
.footer h3 .icon { opacity: 0.75; }
.callout h3 .icon { inline-size: 1.2em; block-size: 1.2em; }

/* Badge: the icon treatment on cards. Green ring by default, filling to solid
   navy on hover so the whole card reads as one interactive object. */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 46px;
  block-size: 46px;
  flex: none;
  border-radius: 50%;
  background: var(--smi-green-050);
  border: 2px solid var(--smi-green-100);
  color: var(--smi-green-800);
  margin-block-end: var(--smi-space-4);
  align-self: flex-start;
  transition: background-color var(--smi-dur) var(--smi-ease),
              border-color var(--smi-dur) var(--smi-ease),
              color var(--smi-dur) var(--smi-ease),
              transform var(--smi-dur) var(--smi-ease);
}
.icon-badge .icon { inline-size: 22px; block-size: 22px; stroke-width: 1.6; }

.card:hover .icon-badge,
.card:focus-within .icon-badge {
  background: var(--smi-navy-800);
  border-color: var(--smi-navy-800);
  color: var(--smi-white);
  transform: scale(1.06);
}

.section--navy .icon-badge {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--smi-green-500);
}

/* Programme cards already carry a number, so the badge sits alongside it. */
.programme .icon-badge { margin-block-start: var(--smi-space-2); }

/* The arrow in a "read more" link steps forward on hover. */
.link-arrow .icon {
  margin-inline: var(--smi-space-2) 0;
  transition: transform var(--smi-dur) var(--smi-ease);
}
.link-arrow:hover .icon { transform: translateX(4px); }

@media (forced-colors: active) {
  .icon-badge { background: transparent; border-color: currentColor; }
}

/* ==========================================================================
   14. Motion

   Restraint is the brief here. This is a site about postpartum depression,
   read by people who may be exhausted or distressed, so movement is slow,
   quiet and always downward-settling rather than bouncy. Nothing spins,
   nothing pops, nothing demands attention except the helpline dot.

   Everything is gated behind the `js` class on <html>, which is set before
   paint. With JavaScript off, no element is ever hidden.
   ========================================================================== */

/* --- Scroll reveal ------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
}

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.55s var(--smi-ease) calc(var(--reveal-i, 0) * 70ms),
    transform 0.55s var(--smi-ease) calc(var(--reveal-i, 0) * 70ms);
}

/* Once it has arrived, drop the compositor hint. */
.js [data-reveal].is-revealed { will-change: auto; }

/* --- Hero entrance ------------------------------------------------------- */
/* A short staged sequence on load: the mother's words first, then the rule
   drawing across, then the headline and actions. */

.js .hero__quote,
.js .hero__rule,
.js .hero__headline,
.js .hero__sub,
.js .hero__actions,
.js .hero__krio { opacity: 0; }

.js .is-ready .hero__quote,
.js .is-ready .hero__krio,
.js .is-ready .hero__headline,
.js .is-ready .hero__sub,
.js .is-ready .hero__actions {
  animation: smi-rise 0.7s var(--smi-ease) both;
}
.js .is-ready .hero__quote   { animation-delay: 0.05s; }
.js .is-ready .hero__krio    { animation-delay: 0.05s; }
.js .is-ready .hero__headline{ animation-delay: 0.32s; }
.js .is-ready .hero__sub     { animation-delay: 0.42s; }
.js .is-ready .hero__actions { animation-delay: 0.52s; }

.js .is-ready .hero__rule {
  opacity: 1;
  animation: smi-draw 0.6s var(--smi-ease) 0.22s both;
}

@keyframes smi-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes smi-draw {
  from { inline-size: 0; opacity: 0; }
  to   { inline-size: 64px; opacity: 1; }
}

/* --- Ambient hero mark --------------------------------------------------- */
/* The crescent from the logo drifts, very slowly. Purely atmospheric, and the
   first thing to go when reduced motion is requested. */

.hero__mark { animation: smi-drift 26s ease-in-out infinite; }

@keyframes smi-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-14px, 18px, 0) scale(1.04); }
}

/* --- Counters ------------------------------------------------------------ */

.stat__value { transition: color var(--smi-dur) var(--smi-ease); }
.stat { transition: border-color var(--smi-dur) var(--smi-ease); }
.stat:hover { border-block-start-color: var(--smi-navy-800); }

/* --- Cards --------------------------------------------------------------- */

.card { transform: translateZ(0); }
.card:hover, .card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--smi-shadow-md);
}

/* --- Mobile navigation --------------------------------------------------- */

@media (max-width: 1199px) {
  .js .nav:not([hidden]) { animation: smi-drop 0.28s var(--smi-ease) both; }
}
@keyframes smi-drop {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* --- The one non-negotiable ---------------------------------------------- */
/* Every animation above is switched off when the visitor asks for reduced
   motion, and every element lands in its final state immediately. */

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal].is-revealed {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js .hero__quote, .js .hero__krio, .js .hero__rule,
  .js .hero__headline, .js .hero__sub, .js .hero__actions,
  .js .is-ready .hero__quote, .js .is-ready .hero__krio,
  .js .is-ready .hero__rule, .js .is-ready .hero__headline,
  .js .is-ready .hero__sub, .js .is-ready .hero__actions {
    opacity: 1 !important;
    animation: none !important;
    inline-size: auto;
  }
  .js .is-ready .hero__rule { inline-size: 64px; }
  .hero__mark, .js .nav:not([hidden]) { animation: none !important; }
  .hero__slide { transition: none; }
  .card:hover, .card:focus-within, .btn:hover,
  .icon-badge, .link-arrow:hover .icon { transform: none !important; }
}

/* ==========================================================================
   15. Navigation with dropdowns

   Built as <button aria-expanded> plus a <ul>, not a CSS hover menu. Hover
   menus cannot be opened by keyboard and behave badly on touch screens, and
   most of this audience is on a phone.

   On desktop the menu also opens on hover for speed, but the button remains
   the real control, so keyboard and screen reader users get the same result.
   ========================================================================== */

.nav__list { gap: var(--smi-space-6); }

.nav__link {
  font-size: var(--smi-text-sm);
  white-space: nowrap;
  padding: var(--smi-space-2) var(--smi-space-3);
}

.nav__item--has-menu { position: relative; }

.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--smi-space-1);
  background: none;
  border: 0;
  font-family: inherit;
  font-size: var(--smi-text-sm);
  font-weight: 800;
  color: var(--smi-navy-800);
  cursor: pointer;
}
.nav__trigger[aria-expanded="true"] {
  background: var(--smi-green-050);
  border-block-end-color: var(--smi-green-800);
}

.nav__chevron {
  inline-size: 0.85em;
  block-size: 0.85em;
  stroke-width: 2.4;
  transition: transform var(--smi-dur) var(--smi-ease);
}
.nav__trigger[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

.nav__menu {
  list-style: none;
  margin: 0;
  padding: var(--smi-space-2);
  background: var(--smi-white);
  border: 1px solid var(--smi-hairline);
  border-radius: var(--smi-radius-lg);
  box-shadow: var(--smi-shadow-lg);
}

.nav__menu a {
  display: flex;
  align-items: center;
  gap: var(--smi-space-3);
  padding: var(--smi-space-3) var(--smi-space-4);
  border-radius: var(--smi-radius-md);
  font-size: var(--smi-text-sm);
  font-weight: 600;
  color: var(--smi-navy-800);
  text-decoration: none;
}
.nav__menu a:hover,
.nav__menu a:focus-visible { background: var(--smi-navy-050); }
.nav__menu a .icon { color: var(--smi-green-800); }

@media (min-width: 1200px) {
  .nav__menu {
    position: absolute;
    inset-block-start: calc(100% + 10px);
    inset-inline-start: 0;
    inline-size: max-content;
    max-inline-size: 22rem;
    z-index: 90;
  }
  .js .nav__menu:not([hidden]) { animation: smi-drop 0.2s var(--smi-ease) both; }

  /* A small bridge so the pointer can travel from the button to the menu
     without crossing dead space and closing it. */
  .nav__item--has-menu::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    block-size: 12px;
  }
  .nav__donate { display: none; }  /* header__cta covers this on desktop */
}

@media (min-width: 1200px) {
  .header__cta {
    display: block;
    flex: none;
    margin-inline-start: var(--smi-space-2);
  }
  .header__cta .btn {
    padding: var(--smi-space-2) var(--smi-space-4);
    font-size: var(--smi-text-sm);
    white-space: nowrap;
  }
}

@media (max-width: 1199px) {
  .nav__trigger {
    inline-size: 100%;
    justify-content: space-between;
    padding-block: var(--smi-space-4);
    border-block-end: 1px solid var(--smi-hairline);
  }
  .nav__menu {
    border: 0;
    box-shadow: none;
    background: var(--smi-navy-050);
    border-radius: var(--smi-radius-md);
    margin-block: var(--smi-space-2);
  }
  .nav__menu a { padding-block: var(--smi-space-3); }
  .nav__donate { margin-block-start: 0; }
  .nav__donate .btn { inline-size: 100%; }
}

/* At the widest sizes the nine items need a little more breathing room. */
@media (min-width: 1200px) { .nav__list { gap: var(--smi-space-1); } }

/* ==========================================================================
   16. Team pages
   ========================================================================== */

.breadcrumb { margin-block-end: var(--smi-space-8); font-size: var(--smi-text-sm); }
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--smi-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  color: #9FB2DC;
}
.breadcrumb li + li::before { content: "/"; margin-inline-end: var(--smi-space-2); opacity: 0.6; }
.breadcrumb a { color: #C9D6F2; }
.breadcrumb [aria-current="page"] { color: var(--smi-white); font-weight: 600; }

.profile-hero {
  background: linear-gradient(180deg, var(--smi-navy-800) 0%, var(--smi-navy-900) 100%);
  color: var(--smi-white);
  padding-block: clamp(3rem, 8vw, 5rem);
  position: relative;
  overflow: hidden;
}

.profile-hero__inner {
  display: grid;
  gap: var(--smi-space-8);
}
@media (min-width: 900px) {
  .profile-hero__inner {
    grid-template-columns: minmax(280px, 420px) 1fr;
    align-items: center;
    gap: var(--smi-space-10);
  }
}

.profile-hero__photo {
  width: 100%;
  max-inline-size: 420px;
  border-radius: var(--smi-radius-lg);
  box-shadow: var(--smi-shadow-lg);
  object-fit: contain;
  object-position: center;
  aspect-ratio: 1;
  background: var(--smi-navy-050);
  display: block;
}

.profile-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--smi-space-4);
}
.profile-hero__name {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.05;
}
.profile-hero__role {
  margin: 0;
  color: var(--smi-blue-100);
  font-size: var(--smi-text-lg);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.profile-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--smi-space-3);
}
.profile-hero__actions .btn { min-width: 11rem; }

.portrait {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--smi-radius-lg);
  background: var(--smi-navy-050);
  margin-block-end: var(--smi-space-4);
}
.portrait img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

.card--person { text-align: start; }
.card--person h3 { margin-block-end: var(--smi-space-1); }
.card--person .card__meta {
  color: var(--smi-green-800);
  font-weight: 700;
  margin-block-end: var(--smi-space-3);
}

/* The portrait lifts slightly with the card, which reads as one object. */
.card--person .portrait img { transition: transform 0.5s var(--smi-ease); }
.card--person:hover .portrait img { transform: scale(1.04); }

.hero--profile {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background: linear-gradient(180deg, var(--smi-navy-800) 0%, var(--smi-navy-900) 100%);
}

.profile__head {
  display: grid;
  gap: var(--smi-space-8);
  align-items: start;
  position: relative;
}
@media (min-width: 760px) {
  .profile__head { grid-template-columns: 260px 1fr; }
}

.portrait--lg { margin-block-end: 0; background: rgba(255,255,255,0.08); }

.profile__role {
  font-size: var(--smi-text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--smi-green-500);
  margin: 0 0 var(--smi-space-2);
}
.profile__name {
  font-family: var(--smi-font-display);
  font-size: var(--smi-text-2xl);
  color: var(--smi-white);
  margin: 0 0 var(--smi-space-4);
}
.profile__links { display: flex; flex-wrap: wrap; gap: var(--smi-space-3); }
.hero--profile .btn--quiet { color: var(--smi-white); border-color: rgba(255,255,255,0.55); }

.profile__layout { display: grid; gap: var(--smi-space-12); }
@media (min-width: 960px) {
  .profile__layout { grid-template-columns: 1.6fr 1fr; }
}

.profile__section { margin-block-end: var(--smi-space-12); }
.profile__section:last-child { margin-block-end: 0; }
.profile__section h2 {
  display: flex;
  align-items: center;
  gap: var(--smi-space-3);
  font-size: var(--smi-text-xl);
  padding-block-end: var(--smi-space-3);
  border-block-end: 3px solid var(--smi-green-100);
}
.profile__section h2 .icon { color: var(--smi-green-800); }

.profile__aside { display: grid; gap: var(--smi-space-6); align-content: start; }
@media (min-width: 960px) {
  .profile__aside { position: sticky; inset-block-start: 96px; }
}

.ticklist { list-style: none; margin: 0; padding: 0; }
.ticklist li {
  position: relative;
  padding-inline-start: var(--smi-space-8);
  margin-block-end: var(--smi-space-3);
}
.ticklist li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.5em;
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--smi-green-500);
}

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--smi-space-4);
}
.pager__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: var(--smi-navy-800);
  padding: var(--smi-space-3) var(--smi-space-4);
  border-radius: var(--smi-radius-md);
}
.pager__link:hover { background: var(--smi-white); }
.pager__link--next { text-align: end; }
.pager__label {
  font-size: var(--smi-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--smi-text-muted);
}
.pager__name { font-weight: 700; }