/* ============================================================
   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;
  min-height: 100vh;
}

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; }

/* ── 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 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; }

.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; }

.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-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. */
  .hf-header-inner { flex-wrap: wrap; }
  .hf-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 44px; height: 44px;
    background: var(--surface); border: none;
    border-radius: 50%; color: var(--ink); cursor: pointer;
    font-size: 22px; box-shadow: var(--shadow-sm);
  }
  .hf-header-inner .hf-nav,
  .hf-header-inner .hf-header-actions { display: none; }
  .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);
  }
  .hf-header-inner.is-open .hf-nav a { font-size: 16px; padding: 11px 14px; border-radius: var(--r-sm); }
  .hf-header-inner.is-open .hf-header-actions {
    display: flex; width: 100%; margin-top: var(--s-3);
    flex-wrap: wrap;
  }
}

@media (max-width: 560px) {
  .hf-lede { font-size: 16px; }
  .hf-card { padding: var(--s-5); }
  .hf-btn { padding: 12px 20px; }
}

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

@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); }