/* ============================================================
   H.E.O EZIOKWU FOUNDATION — design system

   Warm, humane, trustworthy: a soft cream ground carrying white
   rounded cards, a deep forest green for action, sage tints for
   quiet emphasis, and photographs shown warm and full-colour.

   This file is the source of truth for the look. Take every
   colour, size, radius and shadow from the tokens below — never
   hard-code a hex or a px the tokens already carry.
   ============================================================ */

:root {
  /* — ground and surfaces — */
  --bg:          #f2f1e9;   /* the page: warm cream */
  --bg-soft:     #f7f6f1;   /* a section that steps forward from the page */
  --surface:     #ffffff;   /* a card */
  --surface-2:   #f7f7f4;   /* an inset panel inside a card (stat wells) */
  --tint:        #e9efe5;   /* sage wash: icon chips, quiet fills */

  /* — ink — */
  --ink:         #1b1c19;   /* headings */
  --body:        #55584f;   /* body copy */
  --muted:       #7d8177;   /* meta, captions */
  --faint:       #a3a69c;   /* the quietest legible step */

  /* — green: the brand hue, deepened for trust —
     --brand is the mark's own emerald, kept for small bright accents:
     status dots, active markers, links on dark. --green is the deep
     forest the buttons and headings take. */
  --brand:       #02a65e;
  --green:       #12633f;
  --green-hover: #0e5234;
  --green-press: #0a4229;
  --green-deep:  #0d3f2a;
  --sage:        #8fae8b;
  --sage-soft:   #e7efe4;
  --sage-line:   #cddcc8;

  /* — a warm second accent, used sparingly for warnings and giving — */
  --clay:        #b4622c;
  --clay-soft:   #f7ece3;

  /* — lines. This system draws few: cards do the separating — */
  --line:        rgba(27,28,25,0.08);
  --line-strong: rgba(27,28,25,0.14);

  /* — space, on a 4px base — */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-14: 56px; --s-16: 64px; --s-18: 72px;
  --s-22: 88px; --s-26: 104px;

  /* — radii. Everything is soft; actions are fully round — */
  --r-sm:    12px;
  --r:       18px;
  --r-lg:    24px;
  --r-pill:  999px;

  /* — elevation: barely there, warm-tinted — */
  --shadow-sm: 0 1px 2px rgba(27,28,25,0.04);
  --shadow:    0 1px 2px rgba(27,28,25,0.04), 0 8px 24px rgba(31,42,31,0.05);
  --shadow-lg: 0 2px 4px rgba(27,28,25,0.04), 0 18px 44px rgba(31,42,31,0.09);

  --measure: 1200px;
  --gutter: 32px;
  --header-h: 76px;

  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
          system-ui, sans-serif;
}

/* ── reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; min-width: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  /* `dvh` tracks the phone's shrinking address bar; `vh` is the fallback
     for anything that does not know the unit. */
  min-height: 100vh;
  min-height: 100dvh;
}

main { flex: 1 0 auto; }

img, svg, video { display: block; max-width: 100%; }
figure { margin: 0; }

/* ── type ─────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}

.hf-display  { font-size: clamp(38px, 4.6vw, 62px); line-height: 1.08; letter-spacing: -0.028em; }
.hf-title    { font-size: clamp(32px, 3.8vw, 50px); line-height: 1.12; letter-spacing: -0.026em; }
.hf-title-sm { font-size: clamp(28px, 3vw, 38px);   line-height: 1.15; }
.hf-h2       { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.16; letter-spacing: -0.024em; }
.hf-h3       { font-size: 22px; }

h1 { font-size: clamp(32px, 3.8vw, 50px); letter-spacing: -0.026em; }
h2 { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.022em; }
h3 { font-size: 21px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 15px; }

p { margin: 0 0 var(--s-4); color: var(--body); }

/* The lede — the paragraph under a title. */
.hf-lede {
  font-size: 17px;
  line-height: 1.7;
  color: var(--body);
  max-width: 56ch;
  margin-top: var(--s-5);
}

/* The kicker — a small pill above a heading, the system's signature.
   The dot is drawn, not typed, so it stays put at any text size. */
.hf-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--surface);
  color: var(--green);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 14px 7px 12px;
  border-radius: var(--r-pill);
  margin-bottom: var(--s-5);
  box-shadow: var(--shadow-sm);
}
.hf-kicker::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand);
  flex: none;
}
.hf-kicker-2 { color: var(--clay); }
.hf-kicker-2::before { background: var(--clay); }
/* On a photograph or a dark panel the pill needs its own ground. */
.hf-kicker-on-dark {
  background: rgba(255,255,255,0.16);
  color: #fff;
  backdrop-filter: blur(6px);
  box-shadow: none;
}
.hf-kicker-on-dark::before { background: #fff; }

.hf-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.hf-meta  { font-size: 14px; color: var(--muted); }
.hf-muted { color: var(--muted); }
.hf-quiet { color: var(--faint); }
.hf-num   { font-variant-numeric: tabular-nums; }

/* The currency symbol, emitted by the `naira` template filter — the
   glyph draws wider than its advance width, so it needs its own air. */
.hf-cur { letter-spacing: 0.12em; font-feature-settings: normal; }

blockquote {
  margin: 0;
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-weight: 500;
  text-wrap: pretty;
}

a { color: var(--green); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--green-hover); text-decoration: underline; }

::selection { background: var(--sage-soft); color: var(--green-deep); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ── layout ───────────────────────────────────────────────── */
.hf-sheet {
  max-width: var(--measure);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.hf-sheet-narrow { max-width: 820px; }
.hf-sheet-mid    { max-width: 1000px; }

.hf-section    { padding-top: var(--s-22); padding-bottom: var(--s-22); }
.hf-section-sm { padding-top: var(--s-14); padding-bottom: var(--s-14); }
.hf-section-tint { background: var(--bg-soft); }

.hf-rule        { border-top: 1px solid var(--line); }
.hf-rule-strong { border-top: 1px solid var(--line-strong); }
hr.hf-hr { height: 1px; border: 0; background: var(--line); margin: var(--s-10) 0; }

/* Grids collapse on their own content width, so nothing needs a
   breakpoint to stay readable on a phone. */
.hf-cols       { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.hf-cols-tight { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.hf-cols-stat  { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.hf-cols-wide  { gap: var(--s-8); }
.hf-stack      { display: flex; flex-direction: column; }
.hf-row        { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.hf-row-end    { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-8); flex-wrap: wrap; }

/* Holds a row's trailing group against the right edge — a search box
   opposite a set of filters, an action opposite a title. Once the row has
   wrapped there is no opposite edge left to hold it to, and the push only
   strands the control in the middle of an empty line. */
.hf-push { margin-left: auto; }
@media (max-width: 760px) {
  .hf-push { margin-left: 0; width: 100%; }
}

/* ── the card ─────────────────────────────────────────────── */
/* The workhorse. Sections are built from these, not from rules. */
.hf-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--s-8);
  box-shadow: var(--shadow-sm);
}
.hf-card-sm   { padding: var(--s-6); border-radius: var(--r); }
.hf-card-flush{ padding: 0; overflow: hidden; }
.hf-card-tint { background: var(--tint); box-shadow: none; }
.hf-card-dark {
  background: var(--green-deep);
  color: rgba(255,255,255,0.82);
}
.hf-card-dark h1, .hf-card-dark h2, .hf-card-dark h3, .hf-card-dark h4 { color: #fff; }
.hf-card-dark .hf-label, .hf-card-dark .hf-meta { color: rgba(255,255,255,0.6); }

/* Raise a card only when it is genuinely floating over something. */
.hf-float { box-shadow: var(--shadow-lg); }

/* A card that is a link lifts a little on hover. */
a.hf-card, .hf-card-link {
  display: block;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
a.hf-card:hover, .hf-card-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  text-decoration: none;
}

/* The inset well — a big figure sitting inside a card. */
.hf-well {
  background: var(--surface-2);
  border-radius: var(--r);
  padding: var(--s-5) var(--s-6);
}
.hf-well-figure {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4);
}
.hf-well-figure .n { font-size: clamp(30px, 3vw, 40px); line-height: 1.05; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.hf-well-figure .l { font-size: 14px; color: var(--muted); text-align: right; }

/* ── the bento ────────────────────────────────────────────── */
/* Cards and photographs at different heights, read as one block. The
   columns are independent stacks rather than a strict grid, so a tall card
   never leaves a hole beside a short one. */
.hf-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  /* Stretch, not start: the columns run to a common bottom edge so the
     block reads as one rectangle. Each column carries exactly one `.grow`
     child to absorb the slack. */
  align-items: stretch;
}
.hf-bento-col { display: flex; flex-direction: column; gap: var(--s-5); }

/* The card or photograph that takes up its column's spare height. */
.hf-bento .grow { flex: 1; }

@media (max-width: 1000px) {
  .hf-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .hf-bento { grid-template-columns: 1fr; }
}

/* ── the account sheet ────────────────────────────────────── */
/* A portrait and its facts beside the form that edits them. The columns
   part only while both still have room to be read. */
.hf-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-10);
  margin-top: var(--s-14);
  align-items: start;
}
@media (min-width: 880px) {
  .hf-profile-grid {
    grid-template-columns: minmax(260px, 1fr) minmax(0, 1.6fr);
    gap: var(--s-16);
  }
}
/* On a phone the portrait is a banner, not a 4:5 plate filling the
   first screen before a single field is visible. */
.hf-profile-portrait { width: 100%; aspect-ratio: 4 / 5; }
@media (max-width: 640px) {
  .hf-profile-portrait { aspect-ratio: 16 / 9; }
}

/* ── the icon chip ────────────────────────────────────────── */
/* A line icon in a soft sage disc — how this system marks a topic. */
.hf-icon-chip {
  width: 46px; height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tint);
  color: var(--green);
  font-size: 22px;
}
.hf-icon-chip-lg { width: 58px; height: 58px; font-size: 27px; }
.hf-icon-chip-clay { background: var(--clay-soft); color: var(--clay); }

/* ── the statistic ────────────────────────────────────────── */
.hf-stat-value {
  font-size: clamp(32px, 3.4vw, 44px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hf-stat-value-lg { font-size: clamp(38px, 4vw, 54px); }
.hf-stat-label { font-size: 14px; color: var(--muted); margin-top: var(--s-2); }
.hf-stat-delta { font-size: 13px; color: var(--green); margin-top: var(--s-1); }

/* ── buttons ──────────────────────────────────────────────── */
.hf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  padding: 13px 24px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .16s ease, color .16s ease,
              border-color .16s ease, box-shadow .16s ease;
}
.hf-btn:hover { text-decoration: none; }
.hf-btn i { font-size: 1.15em; }

.hf-btn-primary {
  background: var(--green); color: #fff;
  /* The inner hairline is what gives the reference's buttons their
     slightly inset, tactile edge. */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
}
.hf-btn-primary:hover  { background: var(--green-hover); color: #fff; }
.hf-btn-primary:active { background: var(--green-press); }

.hf-btn-give { background: var(--clay); color: #fff; }
.hf-btn-give:hover { background: #9c5324; color: #fff; }

.hf-btn-outline { color: var(--ink); border-color: var(--line-strong); background: transparent; }
.hf-btn-outline:hover { border-color: var(--green); color: var(--green); background: var(--sage-soft); }

.hf-btn-white { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.hf-btn-white:hover { background: #fff; color: var(--green); }

.hf-btn-ghost { color: var(--green); padding-inline: var(--s-3); }
.hf-btn-ghost:hover { background: var(--sage-soft); }

.hf-btn-sm  { font-size: 14px; padding: 10px 18px; }
.hf-btn-lg  { font-size: 16px; padding: 16px 30px; }
.hf-btn-block { width: 100%; }
.hf-btn:disabled, .hf-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* The filter chip — a pill carrying a selected state. */
.hf-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--surface);
  color: var(--body);
  border: 1px solid transparent;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.hf-chip:hover { color: var(--green); text-decoration: none; }
.hf-chip.is-on, .hf-chip[aria-pressed="true"] {
  background: var(--green); color: #fff; border-color: var(--green);
}
.hf-chip.is-on:hover { background: var(--green-hover); color: #fff; }

/* ── status ───────────────────────────────────────────────── */
/* Status is a soft tinted pill, with a dot carrying the colour. */
.hf-status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 13px;
  font-weight: 600;
  padding: 5px 13px 5px 11px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
  /* A pill placed straight into a grid or flex track would otherwise be
     stretched to the full column width. */
  justify-self: start;
  align-self: center;
  width: fit-content;
}
.hf-status::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}
.hf-status-go   { background: var(--sage-soft); color: var(--green); }
.hf-status-wait { background: var(--clay-soft); color: var(--clay); }
.hf-status-stop { background: #fbeae6; color: #a8452a; }
.hf-status-done { background: var(--surface-2); color: var(--muted); }

/* ── forms ────────────────────────────────────────────────── */
/* Fields are soft rounded boxes — this system has no ruled forms. */
.hf-field { display: flex; flex-direction: column; gap: var(--s-2); }
.hf-field > span, .hf-field > label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.hf-req { color: var(--clay); }

.hf-input, .hf-select, .hf-textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 12px 15px;
  font-family: var(--font);
  font-size: 15px;
  color: var(--ink);
  caret-color: var(--green);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.hf-input::placeholder, .hf-textarea::placeholder { color: var(--faint); }
.hf-input:hover, .hf-select:hover, .hf-textarea:hover { border-color: var(--sage); }
.hf-input:focus-visible, .hf-select:focus-visible, .hf-textarea:focus-visible {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--sage-soft);
  outline: none;
}
.hf-textarea { line-height: 1.6; resize: vertical; min-height: 110px; }
.hf-select { appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%237d8177' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* On a card the field needs an edge that reads against white. */
.hf-card .hf-input, .hf-card .hf-select, .hf-card .hf-textarea { background: var(--surface-2); }

.hf-check { display: flex; gap: var(--s-3); align-items: flex-start; cursor: pointer; }
.hf-check input[type="checkbox"], .hf-check input[type="radio"] {
  width: 20px; height: 20px; accent-color: var(--green);
  margin-top: 2px; flex: none;
}
.hf-help  { font-size: 13px; color: var(--muted); }
.hf-error { color: #a8452a; font-size: 14px; display: flex; gap: var(--s-2); align-items: center; }

/* ── tables ───────────────────────────────────────────────── */
/* A table lives inside a card, so it draws only row rules. */
.hf-table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-6) var(--s-2);
  box-shadow: var(--shadow-sm);
}
.hf-table {
  min-width: 640px;
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.hf-table th {
  text-align: left;
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.hf-table td {
  padding: var(--s-4) var(--s-4) var(--s-4) 0;
  border-bottom: 1px solid var(--line);
  color: var(--body);
  vertical-align: middle;
}
.hf-table tr:last-child td { border-bottom: none; }
.hf-table th:last-child, .hf-table td:last-child { padding-right: 0; }
.hf-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.hf-table tbody tr:hover { background: var(--surface-2); }

/* ── the ruled list ───────────────────────────────────────── */
.hf-list > *       { border-top: 1px solid var(--line); padding: var(--s-5) 0; }
.hf-list > *:first-child { border-top: none; }
.hf-list-tight > * { border-top: 1px solid var(--line); padding: var(--s-3) 0; }
.hf-list-tight > *:first-child { border-top: none; }

/* ── photographs ──────────────────────────────────────────── */
/* Warm and full-colour, always in a soft frame. */
.hf-photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--tint);
}
.hf-photo img { width: 100%; height: 100%; object-fit: cover; }
.hf-photo-sm { border-radius: var(--r); }

/* Where a photograph will go but none exists yet. */
.hf-photo-empty {
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 30% 30%, rgba(143,174,139,0.22), transparent 60%),
    var(--tint);
  display: grid;
  place-items: center;
  color: var(--sage);
  font-size: 30px;
}

/* A photograph used as a backdrop for content laid over it. The image is
   taken out of flow so it covers the whole frame however the content on top
   is laid out — left in flow it becomes a sibling of that content, gets
   shrunk by the flex/grid track, and its height:100% collapses against the
   auto-height parent. */
.hf-photo-bg > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* A placeholder standing in for the photograph always fills its frame,
   whichever mode the frame is in. */
.hf-photo > .hf-photo-empty {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* A photograph carrying text: the gradient keeps it legible. */
.hf-photo-overlay::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(18,30,20,0.42) 0%, rgba(18,30,20,0.12) 38%, rgba(12,24,14,0.78) 100%);
  pointer-events: none;
}
.hf-photo-caption {
  position: absolute; inset: auto 0 0 0;
  z-index: 2;
  padding: var(--s-10);
  color: #fff;
}
.hf-photo-caption h1, .hf-photo-caption h2, .hf-photo-caption p { color: #fff; }
.hf-photo-caption p { color: rgba(255,255,255,0.84); }

/* ── the hero ─────────────────────────────────────────────── */
/* Runs the full width of the viewport; the content inside is held to the
   measure so the headline and buttons line up with every section below. */
.hf-hero {
  position: relative;
  width: 100%;
  min-height: min(82vh, 680px);
  overflow: hidden;
  background: var(--tint);
  display: flex;
}
.hf-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hf-hero > .hf-photo-empty { position: absolute; inset: 0; border-radius: 0; }

/* ── the password reveal ──────────────────────────────────── */
/* The eye sits inside the box rather than beside it, so a password field
   still lines up with every other field in a stack. The input keeps room
   on the right for it. */
.hf-pw { position: relative; display: block; }
.hf-pw-input { width: 100%; padding-right: 48px; }
.hf-pw-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font-size: 19px;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}
.hf-pw-eye:hover { color: var(--ink); background: var(--surface-2); }
.hf-pw-eye:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.hf-pw-eye[aria-pressed="true"] { color: var(--green); }

/* ── the hero slider ──────────────────────────────────────── */
/* The slides stack in one layer and cross-fade. Only opacity moves, so
   the browser can composite the transition rather than repaint the
   photograph on every frame. */
.hf-hero-slides { position: absolute; inset: 0; }
.hf-hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms ease-in-out;
}
.hf-hero-slide.is-on { opacity: 1; }

/* The sector name rides in the kicker; swapping it should not make the
   line jump, so only its text fades. */
#hfHeroKicker, #hfHeroLede { transition: opacity 300ms ease; }
.hf-hero.is-swapping #hfHeroKicker,
.hf-hero.is-swapping #hfHeroLede { opacity: 0; }

.hf-hero-dots {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-7);
  align-items: center;
}
.hf-hero-dot {
  width: 30px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.38);
  cursor: pointer;
  transition: background 240ms ease, width 240ms ease;
}
.hf-hero-dot:hover { background: rgba(255, 255, 255, 0.62); }
.hf-hero-dot.is-on { background: #fff; width: 46px; }
.hf-hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* With motion turned down the hero holds on its first slide rather than
   cross-fading; the dots still move it by hand. */
@media (prefers-reduced-motion: reduce) {
  .hf-hero-slide { transition: none; }
  #hfHeroKicker, #hfHeroLede { transition: none; }
}

.hf-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--s-10) var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-10);
}

/* The trust marks, held to the top right of the measure. */
.hf-hero-marks {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-2);
}

/* The promise and the giving card share the bottom line. */
.hf-hero-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-8);
  flex-wrap: wrap;
}
.hf-hero-copy { flex: 1 1 460px; max-width: 660px; color: #fff; }
.hf-hero-copy h1 { color: #fff; }
.hf-hero-copy p  { color: rgba(255,255,255,0.86); }

.hf-hero-card { flex: 0 1 350px; padding: var(--s-6); }

@media (max-width: 900px) {
  .hf-hero { min-height: 0; }
  .hf-hero-inner { padding-top: var(--s-16); padding-bottom: var(--s-8); gap: var(--s-8); }
  .hf-hero-marks { align-items: flex-start; }
  .hf-hero-card { flex-basis: 100%; }
}

/* The corner brackets on a cause photograph, from the reference. */
.hf-bracket::before, .hf-bracket::after {
  content: "";
  position: absolute;
  width: 34px; height: 34px;
  border: 1.5px solid rgba(255,255,255,0.7);
  z-index: 2;
  pointer-events: none;
}
.hf-bracket::before { top: 14px; left: 14px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.hf-bracket::after  { top: 14px; right: 14px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }

/* ── the progress bar ─────────────────────────────────────── */
.hf-bar { height: 8px; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; }
.hf-bar > span { display: block; height: 100%; background: var(--green); border-radius: var(--r-pill); }
.hf-bar-2 > span { background: var(--clay); }

/* ── the step rail (application wizard) ───────────────────── */
.hf-steps { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.hf-step {
  flex: 1 1 160px;
  min-width: 0;
  background: var(--surface);
  border-radius: var(--r);
  padding: var(--s-4) var(--s-5);
  box-shadow: var(--shadow-sm);
  border: 1px solid transparent;
}
.hf-step .n { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.hf-step .t { font-size: 15px; font-weight: 600; color: var(--muted); margin-top: var(--s-1); }
.hf-step.is-done { background: var(--sage-soft); }
.hf-step.is-done .n, .hf-step.is-done .t { color: var(--green); }
.hf-step.is-on { background: var(--green); }
.hf-step.is-on .n { color: rgba(255,255,255,0.7); }
.hf-step.is-on .t { color: #fff; }

/* ── the timeline (portal) ────────────────────────────────── */
.hf-timeline { display: flex; align-items: flex-start; gap: var(--s-3); }
.hf-timeline > div { flex: 1; min-width: 0; }
.hf-timeline .track { height: 6px; background: var(--surface-2); border-radius: var(--r-pill); margin-bottom: var(--s-3); }
.hf-timeline .is-done .track { background: var(--green); }
.hf-timeline .is-next .track { background: var(--sage); }

/* ── notices ──────────────────────────────────────────────── */
.hf-notice {
  padding: var(--s-5) var(--s-6);
  background: var(--surface);
  border-radius: var(--r);
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
  box-shadow: var(--shadow-sm);
}
.hf-notice-go   { background: var(--sage-soft); color: var(--green-deep); box-shadow: none; }
.hf-notice-stop { background: var(--clay-soft); color: #8f4a22; box-shadow: none; }

/* ── header ───────────────────────────────────────────────── */
.hf-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
}
.hf-header-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--s-4) var(--gutter);
  display: flex; align-items: center;
  gap: var(--s-4);
  min-height: var(--header-h);
}
.hf-brand { display: flex; align-items: center; gap: var(--s-3); flex: none; color: var(--ink); }
.hf-brand:hover { color: var(--ink); text-decoration: none; }
.hf-brand-mark {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--tint); color: var(--green);
  display: grid; place-items: center; font-size: 20px; flex: none;
  overflow: hidden;
}
.hf-brand-mark img { width: 100%; height: 100%; object-fit: cover; }
/* The two lines stack — they are inline spans in the markup, so the
   display has to come from here. */
.hf-brand .name { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.hf-brand .sub  { display: block; font-size: 11px; color: var(--muted); letter-spacing: 0.04em; line-height: 1.2; }

/* The navigation is one pill holding the links; the current page is a
   white pill inside it, with a dot. */
.hf-nav {
  display: flex; align-items: center; gap: 2px;
  margin: 0 auto;
  background: var(--surface);
  border-radius: var(--r-pill);
  padding: 5px;
  box-shadow: var(--shadow-sm);
}
.hf-nav a {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: 14px; font-weight: 500;
  color: var(--body);
  padding: 8px 15px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.hf-nav a:hover { color: var(--green); background: var(--sage-soft); text-decoration: none; }
.hf-nav a.is-on { color: var(--ink); background: var(--bg); font-weight: 600; }
.hf-nav a.is-on::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand); flex: none;
}

.hf-header-actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }

/* ── the account menu ─────────────────────────────────────── */
/* A <details>, so it works with JavaScript switched off. The marker is
   removed on all three engines — Safari still uses the WebKit
   pseudo-element, Firefox and Chrome honour ::marker. */
.hf-menu { position: relative; flex: none; }
.hf-menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  user-select: none;
}
.hf-menu > summary::-webkit-details-marker { display: none; }
.hf-menu > summary::marker { content: ""; }
.hf-menu > summary::before { display: none; }
.hf-menu-name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hf-menu-caret { font-size: 13px; transition: transform 160ms ease; }
.hf-menu[open] .hf-menu-caret { transform: rotate(180deg); }

.hf-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 236px;
  background: var(--surface);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: var(--s-2);
  z-index: 50;
  display: flex;
  flex-direction: column;
  animation: hfRiseIn 160ms ease-out;
}
/* Links and the sign-out button are the same control in two elements, so
   they are styled together rather than drifting apart. */
.hf-menu-panel a,
.hf-menu-panel button {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.hf-menu-panel a:hover,
.hf-menu-panel button:hover { background: var(--surface-2); text-decoration: none; }
.hf-menu-panel a:focus-visible,
.hf-menu-panel button:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.hf-menu-panel i { font-size: 18px; color: var(--muted); flex: none; }
.hf-menu-panel form { margin: 0; }
.hf-menu-panel button { color: var(--clay); }
.hf-menu-panel button i { color: var(--clay); }

.hf-menu-sep { height: 1px; background: var(--rule); margin: var(--s-2) 6px; }
.hf-menu-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--faint);
  padding: 4px 14px 2px;
}

.hf-nav-toggle { display: none; }

/* ── footer ───────────────────────────────────────────────── */
.hf-footer {
  background: var(--green-deep);
  color: rgba(255,255,255,0.7);
  margin-top: auto;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.hf-footer a { color: rgba(255,255,255,0.7); }
.hf-footer a:hover { color: #fff; }
.hf-footer .accent { color: var(--sage); }
.hf-footer .hf-label { color: rgba(255,255,255,0.45); }
.hf-footer h2, .hf-footer .name { color: #fff; }
.hf-footer .hf-brand-mark { background: rgba(255,255,255,0.12); color: #fff; }

@keyframes hfRiseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hf-rise { animation: hfRiseIn 320ms ease-out; }

/* ── narrow sheets ────────────────────────────────────────── */
@media (max-width: 1040px) {
  .hf-nav { gap: 0; padding: 4px; }
  .hf-nav a { padding: 8px 11px; font-size: 13px; }
}

@media (max-width: 900px) {
  :root { --gutter: 20px; }
  .hf-section { padding-top: var(--s-14); padding-bottom: var(--s-14); }
  .hf-section-sm { padding-top: var(--s-10); padding-bottom: var(--s-10); }
  .hf-card { padding: var(--s-6); }
  .hf-photo-caption { padding: var(--s-6); }
  .hf-timeline { flex-direction: column; gap: var(--s-4); }

  /* The header collapses to a disclosure — the pill nav is too long to
     wrap. The panel is part of the sticky header rather than a separate
     overlay, so the brand and the close control never leave the screen;
     it scrolls internally when the menu is taller than the phone. */
  .hf-header-inner { flex-wrap: wrap; }
  .hf-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 46px; height: 46px;
    background: var(--surface); border: none;
    border-radius: 50%; color: var(--ink); cursor: pointer;
    font-size: 22px; box-shadow: var(--shadow-sm);
    flex: none;
  }
  .hf-nav-toggle:active { background: var(--sage-soft); }
  .hf-header-inner .hf-nav,
  .hf-header-inner .hf-header-actions { display: none; }

  /* The open panel is one scroll region holding the links and the two
     actions, so a short phone never strands "Donate" below the fold. */
  .hf-header-inner.is-open {
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: max(var(--s-5), env(safe-area-inset-bottom));
  }
  .hf-header-inner.is-open .hf-nav {
    display: flex; flex-direction: column; align-items: stretch;
    width: 100%; margin: var(--s-3) 0 0; border-radius: var(--r);
    padding: var(--s-3);
    box-shadow: var(--shadow);
  }
  .hf-header-inner.is-open .hf-nav a {
    font-size: 16px; padding: 13px 16px; border-radius: var(--r-sm);
    min-height: 48px;
  }
  /* The actions share the full width between them, so they read as the
     end of the menu rather than as loose pills left of a gap. */
  .hf-header-inner.is-open .hf-header-actions {
    display: flex; width: 100%; margin-top: var(--s-3);
    gap: var(--s-3);
    flex-wrap: wrap;
  }
  .hf-header-inner.is-open .hf-header-actions .hf-btn {
    flex: 1 1 140px;
    min-height: 48px;
    font-size: 15px;
  }
  /* In the drawer there is nothing to drop *over*: the panel joins the
     scroll region instead, so a long menu cannot end up off-screen with
     no way to reach it. */
  .hf-header-inner.is-open .hf-menu { flex: 1 1 100%; }
  .hf-header-inner.is-open .hf-menu > summary { width: 100%; justify-content: center; }
  .hf-header-inner.is-open .hf-menu-panel {
    position: static;
    width: 100%;
    margin-top: var(--s-2);
    min-width: 0;
    animation: none;
  }
  .hf-header-inner.is-open .hf-menu-panel a,
  .hf-header-inner.is-open .hf-menu-panel button { min-height: 48px; font-size: 16px; }

  /* The scrim dims the page the menu is covering and is what an outside
     tap lands on. It sits under the header, over everything else. */
  .hf-nav-scrim {
    position: fixed; inset: 0;
    background: rgba(13,32,22,0.38);
    backdrop-filter: blur(2px);
    z-index: 35;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
  }
  body.hf-nav-open .hf-nav-scrim { opacity: 1; visibility: visible; }
}

/* Above the breakpoint the scrim must never exist — the pill nav is
   always visible and nothing is covering the page. */
@media (min-width: 901px) {
  .hf-nav-scrim { display: none; }
}

/* While a drawer is open the page behind it must not scroll away under
   the reader's thumb. Used by the public header and the console rail. */
body.hf-nav-open { overflow: hidden; }

@media (max-width: 560px) {
  .hf-lede { font-size: 16px; }
  .hf-card { padding: var(--s-5); }
  .hf-card-sm { padding: var(--s-5); }
  .hf-btn { padding: 12px 20px; }
  .hf-section { padding-top: var(--s-12); padding-bottom: var(--s-12); }
  .hf-well { padding: var(--s-4) var(--s-5); }
  /* The brand's second line costs a whole row on a narrow header and
     says nothing the logo has not already said. */
  .hf-brand .sub { display: none; }
  .hf-brand .name { font-size: 16px; }
}

/* Sticky asides only stick where there is a column to stick beside. */
@media (max-width: 980px) {
  .hf-aside { position: static !important; }
}

/* ============================================================
   THE PHONE
   Everything above lays out fluidly, so this section is not a
   second design — it is the handful of things a touch screen
   needs that a desktop pointer does not: text a phone browser
   will not zoom, targets a thumb can hit, and room for the
   hardware's own furniture.
   ============================================================ */

/* Safari zooms the whole page when a control it is focusing draws
   below 16px, and never zooms back out. Every control the site owns
   therefore steps up to 16px on a narrow sheet — including the ones
   Bootstrap and the console bring with them. */
@media (max-width: 900px) {
  .hf-input, .hf-select, .hf-textarea,
  .form-control, .form-select,
  .cs-search, .cs-control,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea {
    font-size: 16px;
  }
  /* The taller text needs the field to grow with it. */
  .hf-input, .hf-select, .hf-textarea { padding: 13px 15px; }
  .hf-select { padding-right: 40px; }
}

/* A thumb is about 9mm across; anything it must hit gets 44px of
   height. Scoped to coarse pointers so the desktop scale is untouched. */
@media (pointer: coarse) {
  .hf-btn, .hf-chip, .cs-control, .cs-decision {
    min-height: 44px;
  }
  .hf-btn-sm { min-height: 40px; }

  /* Standalone links in a stack — footer columns, "read more" trails —
     are targets too, and they sit far too close together at their
     natural line height. */
  .hf-footer .hf-stack a,
  .hf-nav a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Hovering cannot happen, so a card that lifts on hover only ever
     shows the lift stuck mid-tap. */
  a.hf-card:hover, .hf-card-link:hover { transform: none; }
}

/* An email address or a long reference has nowhere to break on a narrow
   column, and would otherwise push the whole card sideways. */
@media (max-width: 640px) {
  .hf-table td, .hf-list, .hf-card, .hf-notice { overflow-wrap: anywhere; }
}

/* A table wider than the phone scrolls inside its card. The gradient on
   the right edge is what tells the reader there is more to see; it
   disappears once the scroll reaches the end. */
@media (max-width: 900px) {
  .hf-table-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    background-image: linear-gradient(to left, var(--surface), rgba(255,255,255,0));
    background-position: right center;
    background-size: 36px 100%;
    background-repeat: no-repeat;
    background-attachment: local, scroll;
  }
  .hf-table-wrap { padding-left: var(--s-5); padding-right: var(--s-5); }
}

/* The hero's gradient is tuned for a wide frame, where the copy sits in
   the dark band along the bottom. On a phone the same copy is twice as
   tall and rides up into the clear middle of the photograph, so the
   scrim has to carry the whole height. */
@media (max-width: 720px) {
  .hf-hero { min-height: min(88svh, 640px); }
  .hf-hero.hf-photo-overlay::after {
    background: linear-gradient(180deg,
      rgba(13,26,16,0.58) 0%,
      rgba(13,26,16,0.50) 45%,
      rgba(10,22,13,0.86) 100%);
  }
  .hf-hero-inner { gap: var(--s-6); padding-top: var(--s-10); }
  /* Two marks, a kicker, a headline, a lede and two buttons is a lot of
     stacked pill for a 390px column. */
  .hf-hero-marks { gap: var(--s-1); }
  .hf-hero .hf-kicker { font-size: 11px; padding: 6px 12px 6px 10px; margin-bottom: var(--s-4); }
}

/* Phones with a rounded or notched display keep their own furniture at
   the edges. The footer and the fixed staff dock are what reach it. */
@supports (padding: env(safe-area-inset-bottom)) {
  .hf-footer { padding-bottom: env(safe-area-inset-bottom); }
  .hf-sheet {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
}

/* The staff dock floats over the bottom of every page. Without this the
   last card on a page sits underneath it and cannot be reached. */
body:has(.hf-dock) main { padding-bottom: var(--s-22); }

/* Motion is decoration here; a reader who has asked for less gets the
   same layout arriving without the travel. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hf-rise { animation: none; }
  .hf-nav-scrim { transition: none; }
}

@media print {
  .hf-header, .hf-footer, .hf-btn { display: none; }
  body { background: #fff; }
  .hf-card { box-shadow: none; border: 1px solid var(--line); }
}

/* ============================================================
   BOOTSTRAP BRIDGE
   Bootstrap still carries the grid on the deeper pages. Its visual
   layer is retuned here so an un-rewritten template reads as this
   system rather than as Bootstrap.
   ============================================================ */

.btn {
  font-family: var(--font);
  font-weight: 600;
  border-radius: var(--r-pill);
  border-width: 1px;
  font-size: 15px;
  padding: 12px 22px;
}
.btn-lg { font-size: 16px; padding: 15px 28px; }
.btn-sm { font-size: 14px; padding: 9px 17px; }

.btn-primary, .btn-success {
  background: var(--green); border-color: var(--green); color: #fff;
}
.btn-primary:hover, .btn-success:hover,
.btn-primary:focus, .btn-success:focus,
.btn-primary:active, .btn-success:active {
  background: var(--green-hover); border-color: var(--green-hover); color: #fff;
  transform: none; box-shadow: none;
}
.btn-outline-primary, .btn-outline-success {
  border-color: var(--line-strong); color: var(--ink); background: transparent;
}
.btn-outline-primary:hover, .btn-outline-success:hover,
.btn-outline-primary:active, .btn-outline-success:active {
  background: var(--sage-soft); border-color: var(--green); color: var(--green);
  transform: none; box-shadow: none;
}
.btn-secondary, .btn-light, .btn-white {
  background: var(--surface); border-color: transparent; color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover, .btn-light:hover, .btn-white:hover {
  background: #fff; color: var(--green);
}
.btn-danger { background: var(--clay); border-color: var(--clay); color: #fff; }
.btn-danger:hover { background: #9c5324; border-color: #9c5324; }

.card {
  border: none;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  background: var(--surface);
  transition: transform .18s ease, box-shadow .18s ease;
  overflow: hidden;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.card-body { padding: var(--s-6); }
.card-header, .card-footer { background: transparent; border-color: var(--line); padding: var(--s-5) var(--s-6); }
.card-title { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.card-text  { color: var(--body); }
.card-img-top { border-radius: 0; }

.form-control, .form-select {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: 12px 15px;
  font-family: var(--font);
  font-size: 15px;
  color: var(--ink);
}
.form-control:focus, .form-select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--sage-soft);
  background: var(--surface);
}
textarea.form-control { line-height: 1.6; }
.form-label { font-family: var(--font); font-weight: 500; font-size: 14px; color: var(--ink); margin-bottom: var(--s-2); }
.form-text  { color: var(--muted); font-size: 13px; }
.form-check-input:checked { background-color: var(--green); border-color: var(--green); }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--sage-soft); border-color: var(--green); }
.invalid-feedback { color: #a8452a; font-size: 14px; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--clay); background-image: none; }

.badge {
  font-family: var(--font);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  border-radius: var(--r-pill);
  padding: 5px 12px;
}
.badge.bg-success, .badge.text-bg-success { background: var(--sage-soft) !important; color: var(--green) !important; }
.badge.bg-warning, .badge.text-bg-warning { background: var(--clay-soft) !important; color: var(--clay) !important; }
.badge.bg-danger,  .badge.text-bg-danger  { background: #fbeae6 !important; color: #a8452a !important; }
.badge.bg-secondary, .badge.text-bg-secondary { background: var(--surface-2) !important; color: var(--body) !important; }
.badge.bg-primary, .badge.text-bg-primary { background: var(--sage-soft) !important; color: var(--green) !important; }
.badge.bg-info, .badge.text-bg-info { background: var(--surface-2) !important; color: var(--body) !important; }

.alert { border-radius: var(--r); border: none; font-size: 15px; padding: var(--s-4) var(--s-5); }
.alert-success { background: var(--sage-soft); color: var(--green-deep); }
.alert-info    { background: var(--surface);   color: var(--body); box-shadow: var(--shadow-sm); }
.alert-warning { background: var(--clay-soft); color: #8f4a22; }
.alert-danger  { background: #fbeae6;          color: #a8452a; }

.table { font-size: 15px; color: var(--body); }
.table > :not(caption) > * > * { background: transparent; }
.table th {
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; border-bottom-color: var(--line);
}
.table td { border-bottom-color: var(--line); }
.table-hover > tbody > tr:hover > * { background: var(--surface-2); }

.page-link {
  color: var(--green); border: none; border-radius: var(--r-pill) !important;
  font-family: var(--font); font-size: 14px; font-weight: 500;
  margin: 0 2px; background: transparent; padding: 9px 15px;
}
.page-link:hover { background: var(--sage-soft); color: var(--green); }
.page-item.active .page-link { background: var(--green); color: #fff; }

.text-muted, .text-secondary { color: var(--muted) !important; }
.text-success, .text-primary { color: var(--green) !important; }
.text-danger, .text-warning  { color: var(--clay) !important; }
.bg-light { background: var(--bg-soft) !important; }
.bg-white { background: var(--surface) !important; }
.rounded, .rounded-3, .rounded-4 { border-radius: var(--r) !important; }
.rounded-pill { border-radius: var(--r-pill) !important; }
.rounded-lg, .rounded-xl { border-radius: var(--r-lg) !important; }
.shadow, .shadow-lg { box-shadow: var(--shadow) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--font); font-weight: 700; letter-spacing: -0.028em; line-height: 1.1;
  color: var(--ink);
}
.lead { font-size: 17px; line-height: 1.7; color: var(--body); }
.fw-bold { font-weight: 700 !important; }
.fw-semibold, .fw-medium { font-weight: 600 !important; }

/* The old dark-slab page hero becomes a soft cream opener. */
.page-hero {
  background: var(--bg);
  padding: var(--s-14) 0 var(--s-10);
}
.page-hero::before { display: none; }
.page-hero, .page-hero h1, .page-hero h2, .page-hero .text-white,
.page-hero .display-1, .page-hero .display-2, .page-hero .display-3,
.page-hero .display-4, .page-hero .display-5, .page-hero .display-6 { color: var(--ink) !important; }
.page-hero p, .page-hero .lead { color: var(--body) !important; }
.page-hero a { color: var(--green); }
.page-hero .breadcrumb-item, .page-hero .breadcrumb-item + .breadcrumb-item::before { color: var(--muted); }

.section-label {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: var(--surface); color: var(--green);
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 7px 14px; border-radius: var(--r-pill);
  margin-bottom: var(--s-5); box-shadow: var(--shadow-sm);
}
.section-heading { font-size: clamp(26px, 2.8vw, 38px); font-weight: 600; letter-spacing: -0.024em; color: var(--ink); }
.section-subheading { font-size: 17px; color: var(--body); max-width: 56ch; }
.section { padding: var(--s-22) 0; }
.section-lg { padding: var(--s-26) 0; }

.icon-pill {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--tint) !important; color: var(--green) !important;
  font-size: 22px; display: inline-flex; align-items: center; justify-content: center;
}

.messages-container {
  position: static; width: auto;
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--s-4) var(--gutter) 0;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--sage-line); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--sage); }

/* ============================================================
   TOKEN COMPATIBILITY

   Templates carry a lot of inline `var(--…)`, written against the two
   earlier systems. Rather than rewrite hundreds of style attributes,
   the old names are mapped onto the current palette here. New work
   should use the tokens at the top of this file; these exist so that
   nothing written earlier renders wrong.
   ============================================================ */

:root {
  /* Spacing steps the templates use that the base scale skips.
     (s-7/9/11 were referenced but never defined before, so those
     declarations were silently dropped — they resolve properly now.) */
  --s-7:  28px;
  --s-9:  36px;
  --s-11: 44px;

  /* Broadsheet's ground and rules. */
  --paper:       var(--bg);
  --rule:        var(--line);
  --rule-strong: var(--line);
  --rule-heavy:  var(--line-strong);
  --rule-field:  var(--line-strong);
  --rule-dark:   rgba(255,255,255,0.14);
  --radius:      var(--r-sm);

  /* Broadsheet's neutral ramp, re-pointed at the warm greys. */
  --n-100: #ffffff;
  --n-200: var(--surface-2);
  --n-300: #e6e6df;
  --n-400: #c9cabf;
  --n-500: var(--faint);
  --n-600: var(--muted);
  --n-700: var(--body);
  --n-800: #3f423b;
  --n-900: var(--ink);

  /* Broadsheet's green ramp. --green itself is the deep forest above. */
  --green-100:    var(--sage-soft);
  --green-200:    var(--sage-soft);
  --green-300:    var(--sage);
  --green-600:    var(--green-hover);
  --green-700:    var(--green);
  --green-dark:   var(--green-hover);
  --green-darker: var(--green-deep);
  --green-light:  var(--sage-soft);
  --green-bright: var(--sage);

  /* Broadsheet's second accent. */
  --orange:     var(--clay);
  --orange-700: #8f4a22;
  --orange-300: #dda877;

  /* The original 2026-04 system, still referenced by a few legacy
     staff templates. */
  --dark:    var(--ink);
  --dark-2:  #3f423b;
  --dark-3:  var(--body);
  --gray:    var(--muted);
  --gray-light: var(--faint);
  --border:  var(--line-strong);
  --white:   var(--surface);
}

/* `--surface` meant a tinted panel in Broadsheet and means a white card
   here, so panels that used it as a fill get the page's soft step
   instead of disappearing into the card behind them. */
.hf-section-tint { background: var(--bg-soft); }

/* ============================================================
   THE PHONE, CONTINUED
   The Bootstrap bridge above re-declares the control sizes, and it
   is later in this file than the phone section, so the one rule a
   phone genuinely cannot do without is repeated here at the end.
   ============================================================ */
@media (max-width: 900px) {
  .form-control, .form-select { font-size: 16px; padding: 13px 15px; }
  .form-control-sm, .form-select-sm { font-size: 16px; }
}