/* ============================================================
   HOME — Housing Opportunity Management Enterprises
   Modern site stylesheet
   ============================================================ */

/* Atkinson Hyperlegible — designed by the Braille Institute for
   low-vision readers; self-hosted (SIL Open Font License).
   font-display: swap = text shows instantly in the fallback system
   font, then upgrades when the file loads. */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/atkinson-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/atkinson-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0;
}

:root {
  --navy: #0e2a47;
  --navy-800: #16395e;
  --blue: #1667b8;
  --blue-bright: #2a8fe0;
  --teal: #0e8f8a;
  --sun: #f5a623;
  --sun-soft: #fdeeD3;
  --bg: #f6f8fb;
  --card: #ffffff;
  --ink: #1c2733;
  --ink-soft: #52616f;
  --line: #e3e9f0;
  --radius: 14px;
  --shadow: 0 2px 6px rgba(14, 42, 71, 0.06), 0 12px 28px rgba(14, 42, 71, 0.08);
  --shadow-sm: 0 1px 3px rgba(14, 42, 71, 0.08);
  --max: 1120px;
  /* Larger base type for readability (A−/A+ buttons adjust this live). */
  font-size: 18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--blue); }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Utility bar ---------- */
.utility {
  background: var(--navy);
  color: #cfe0f2;
  font-size: 0.88rem;
}
.utility .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 54px;
  padding-top: 8px;
  padding-bottom: 8px;
  flex-wrap: wrap;
}
.utility a { color: #ffffff; text-decoration: none; }
.utility a:hover { text-decoration: underline; }
.utility .cs-line {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.utility .cs-line a {
  color: var(--sun);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.5px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  font-variant-numeric: tabular-nums;
}
.utility .cs-line a:hover,
.utility .cs-line a:focus-visible {
  color: #ffc960;
  text-decoration-thickness: 3px;
}
.utility a.utility-contact {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 22px;
  min-height: 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.utility a.utility-contact svg { flex-shrink: 0; }
.utility a.utility-contact:hover {
  background: var(--sun);
  border-color: var(--sun);
  color: var(--navy);
  text-decoration: none;
}
.utility .links { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.utility .links a {
  display: inline-block;
  padding: 7px 18px;
  border-radius: 999px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.10);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.utility .links a:hover {
  text-decoration: none;
  background: rgba(255, 255, 255, 0.22);
  border-color: #ffffff;
}
.utility .links a#lang-toggle {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--navy);
}
.utility .links a#lang-toggle:hover {
  background: var(--sun);
  border-color: var(--sun);
}

/* Compact top bar on phones — small pills, icon-only Listen/Contrast */
@media (max-width: 700px) {
  .utility .wrap { min-height: 0; padding-top: 6px; padding-bottom: 6px; gap: 8px; row-gap: 6px; }
  .utility a.utility-contact { padding: 5px 14px; min-height: 34px; font-size: 0.85rem; gap: 6px; }
  .utility a.utility-contact svg { width: 14px; height: 14px; }
  .a11y-tools { gap: 6px; }
  .a11y-tools button { padding: 4px 10px; min-height: 32px; font-size: 0.78rem; }
  .a11y-tools button.font-btn { min-width: 36px; }
  .a11y-tools #tts-btn span, .a11y-tools #hc-btn span { display: none; }
  .utility .links { gap: 6px; }
  .utility .links a#lang-toggle { padding: 5px 12px; font-size: 0.85rem; }
}

/* ---------- Accessibility toolbar (in utility bar) ---------- */
.a11y-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.a11y-tools button {
  background: rgba(255, 255, 255, 0.10);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  color: #ffffff;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 7px 14px;
  min-height: 38px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.a11y-tools button:hover { background: rgba(255, 255, 255, 0.25); border-color: #fff; }
.a11y-tools button.font-btn { min-width: 44px; font-variant-numeric: tabular-nums; }
.a11y-tools button[aria-pressed="true"] { background: var(--sun); border-color: var(--sun); color: var(--navy); }

/* ---------- High-contrast mode ---------- */
html.hc {
  --bg: #ffffff;
  --card: #ffffff;
  --ink: #000000;
  --ink-soft: #1a1a1a;
  --line: #333333;
  --blue: #0a4c99;
  --blue-bright: #0a4c99;
  --teal: #005450;
  --navy: #001428;
  --shadow: none;
  --shadow-sm: none;
}
html.hc body { background: #ffffff; }
html.hc a { text-decoration: underline; }
html.hc .card, html.hc .notice { border: 2px solid #000; box-shadow: none; }
html.hc .hero, html.hc .page-hero, html.hc .board-panel, html.hc footer.site { background: #001428; }
html.hc .hero p.lede, html.hc .page-hero p, html.hc .board-panel .bp-desc,
html.hc footer.site, html.hc footer.site a, html.hc .utility { color: #ffffff; }
html.hc .utility { background: #000000; }
html.hc .utility .links a, html.hc .a11y-tools button, html.hc .utility a.utility-contact { border-color: #ffffff; background: #000000; color: #ffffff; }
html.hc .utility a.utility-contact:hover { background: var(--sun); color: #000000; border-color: var(--sun); }
html.hc .kicker { color: #005450; }
html.hc .stat .num { background: none; -webkit-text-fill-color: #000; color: #000; }
html.hc .notice .chip, html.hc .programs .tag { border: 1px solid currentColor; }
html.hc nav.primary a { color: #000; }
html.hc .brand .name strong { background: none; -webkit-text-fill-color: #001428; color: #001428; }
html.hc .brand .name strong::after { background: #000000; }
html.hc .brand .mark { box-shadow: none; border: 2px solid #000; }
html.hc .filters button { color: #000; border-color: #333; }
html.hc .cta-band { background: #001428; }

/* ---------- Header / nav ---------- */
header.site {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--navy);
}
.brand .mark {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  padding: 4px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(14, 42, 71, 0.14), 0 5px 14px rgba(14, 42, 71, 0.16);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.brand:hover .mark {
  transform: rotate(-5deg) scale(1.06);
  box-shadow: 0 2px 5px rgba(14, 42, 71, 0.16), 0 9px 22px rgba(14, 42, 71, 0.22);
}
.brand .mark img { width: 100%; height: 100%; display: block; object-fit: contain; }
.brand .name { line-height: 1.25; }
.brand .name strong {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--navy);
  position: relative;
  padding-bottom: 3px;
}
/* Five-color underline — one stripe per house in the HOME star */
.brand .name strong::after {
  content: "";
  position: absolute;
  left: 1px; right: 1px; bottom: 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    #1B75BB 0 20%, #BE1E2D 20% 40%, #00A651 40% 60%,
    #F15A24 60% 80%, #FFD400 80% 100%);
}
/* Subtitle always stays on ONE line: nowrap, and on narrow screens the
   font scales down (vw) instead of wrapping. A+/A− sizes scale the rem
   side; the min() picks whichever keeps it fitting. */
.brand .name span {
  font-size: min(0.73rem, 2.4vw);
  font-weight: 600;
  color: var(--ink-soft);
  display: block;
  white-space: nowrap;
}
.brand .name span em { font-style: normal; font-weight: 800; color: var(--teal); }

nav.primary { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
nav.primary a {
  text-decoration: none;
  color: var(--navy);
  font-weight: 800;
  font-size: 0.88rem;
  padding: 8px 9px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
nav.primary a:hover { background: #eaf1f9; color: var(--blue); }
nav.primary a.cta {
  background: var(--sun);
  color: var(--navy);
}
nav.primary a.cta:hover { background: #ffb941; color: var(--navy); }

/* ---------- Hero ---------- */
/* Little-homes texture on the blue bands: outline + solid houses tiled,
   fading in from faint (left, behind text) to solid (right), with a
   very slow drift. Pure CSS/SVG — no images, no JS. */
.hero, .page-hero { position: relative; overflow: hidden; }
.hero > .wrap, .page-hero > .wrap { position: relative; z-index: 1; }
.hero::before, .page-hero::before {
  content: "";
  position: absolute;
  inset: -72px 0 0 0;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'><path d='M10 34 v-12 l10 -8 10 8 v12 h-13 v-5 h-4 v5 z' fill='none' stroke='%23ffffff' stroke-width='2'/><path d='M42 66 v-12 l10 -8 10 8 v12 h-13 v-5 h-4 v5 z' fill='%23ffffff'/></svg>");
  background-size: 72px 72px;
  opacity: 0.15;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 1) 72%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 1) 72%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes homes-drift { from { transform: translateY(0); } to { transform: translateY(72px); } }
  .hero::before, .page-hero::before { animation: homes-drift 90s linear infinite; }
}
html.hc .hero::before, html.hc .page-hero::before { display: none; }

.hero {
  background:
    radial-gradient(1000px 500px at 85% -10%, rgba(42, 143, 224, 0.35), transparent 60%),
    radial-gradient(700px 400px at 5% 110%, rgba(14, 143, 138, 0.30), transparent 60%),
    var(--navy);
  color: #fff;
  padding: 72px 0 96px;
}
.hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  line-height: 1.15;
  max-width: 640px;
  letter-spacing: -0.5px;
}
.hero p.lede {
  margin-top: 16px;
  max-width: 560px;
  font-size: 1.1rem;
  color: #d7e4f2;
}
.hero .since {
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 0.82rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-weight: 600;
}

/* ---------- Quick help cards ---------- */
.quick {
  margin-top: -56px;
  position: relative;
  z-index: 5;
  padding-bottom: 8px;
}
.quick .grid {
  display: grid;
  /* em-based minimum so cards grow (and wrap) with the A+ text size
     instead of letting text bleed out of fixed-width boxes */
  grid-template-columns: repeat(auto-fit, minmax(11em, 1fr));
  gap: 18px;
}
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  border: 1px solid var(--line);
}
a.card {
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: block;
}
a.card:hover { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(14,42,71,0.10), 0 18px 36px rgba(14,42,71,0.12); }
.card .icon {
  width: 58px; height: 58px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 1.75rem;
  margin-bottom: 14px;
  background: #eaf3fc;
}
.card h3 { font-size: 1.1rem; color: var(--navy); margin-bottom: 6px; }
.card p { font-size: 0.95rem; color: var(--ink-soft); }
.card p + p { margin-top: 12px; }
.card .go { margin-top: 12px; font-weight: 700; font-size: 0.88rem; color: var(--blue); }

/* Quick-help cards: identical size and shape, one accent color per card
   (echoing the five colors of the HOME star logo), with a gentle
   staggered entrance and a lively hover. */
.quick .grid { align-items: stretch; }
.quick .card {
  display: flex; flex-direction: column; height: 100%;
  position: relative; overflow: hidden;
  --accent: var(--blue);
}
.quick .card:nth-child(1) { --accent: #1B75BB; }  /* blue house */
.quick .card:nth-child(2) { --accent: #BE1E2D; }  /* red house */
.quick .card:nth-child(3) { --accent: #00A651; }  /* green house */
.quick .card:nth-child(4) { --accent: #F15A24; }  /* orange house */
.quick .card:nth-child(5) { --accent: #E3B505; }  /* yellow house (deepened for contrast) */
.quick .card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #ffffff));
}
.quick .card .icon {
  background: color-mix(in srgb, var(--accent) 12%, #ffffff);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 28%, #ffffff);
}
.quick a.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 22%, transparent),
              0 22px 44px rgba(14, 42, 71, 0.14);
}
.quick .card h3 { min-height: 2.4em; display: flex; align-items: center; }
.quick .card p { margin-bottom: 18px; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes card-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
  .quick .card { animation: card-rise 0.55s ease backwards; }
  .quick .card:nth-child(2) { animation-delay: 0.07s; }
  .quick .card:nth-child(3) { animation-delay: 0.14s; }
  .quick .card:nth-child(4) { animation-delay: 0.21s; }
  .quick .card:nth-child(5) { animation-delay: 0.28s; }
}
html.hc .quick .card .icon { background: #fff; box-shadow: inset 0 0 0 2px #000; }

/* "Talk to Us" — a slim full-width band under the four cards */
.quick .talk-band {
  --accent: #E3B505; /* yellow house — completes the logo's five colors */
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 16px 26px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.quick .talk-band::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #ffffff));
}
.quick .talk-band .icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 1.6rem;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--accent) 12%, #ffffff);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 28%, #ffffff);
}
.quick .talk-band .tb-text { flex: 1; min-width: 14em; }
.quick .talk-band h3 { font-size: 1.1rem; color: var(--navy); }
.quick .talk-band p { font-size: 0.95rem; color: var(--ink-soft); margin-top: 2px; }
.quick .talk-band .go {
  margin-left: auto;
  background: var(--blue);
  color: #ffffff;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.95rem;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.quick a.talk-band:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 22%, transparent),
              0 22px 44px rgba(14, 42, 71, 0.14);
}
.quick a.talk-band:hover .go { background: var(--blue-bright); }
@media (prefers-reduced-motion: no-preference) {
  .quick .talk-band { animation: card-rise 0.55s ease backwards 0.28s; }
}
html.hc .quick .talk-band { border: 2px solid #000; box-shadow: none; }
html.hc .quick .talk-band .icon { background: #fff; box-shadow: inset 0 0 0 2px #000; }
.quick .card .go {
  margin-top: auto;
  align-self: stretch;
  background: var(--blue);
  color: #ffffff;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.95rem;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: background 0.15s ease, transform 0.15s ease;
}
.quick a.card:hover .go { background: var(--blue-bright); transform: translateY(-1px); }

/* ---------- Sections ---------- */
section.band { padding: 72px 0; }
section.band.alt { background: #ffffff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kicker {
  color: var(--teal);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 0.78rem;
}
h2.title { font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--navy); margin: 6px 0 10px; letter-spacing: -0.3px; }
p.sub { color: var(--ink-soft); max-width: 640px; }

/* ---------- Programs ---------- */
.programs { display: grid; grid-template-columns: repeat(auto-fit, minmax(16em, 1fr)); gap: 20px; margin-top: 34px; }
.programs .card h3 { font-size: 1.15rem; }
.programs .tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--sun-soft);
  color: #8a5b00;
  margin-bottom: 12px;
}

/* ---------- Notices ---------- */
.notice-list { margin-top: 30px; display: grid; gap: 14px; }
.notice {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  padding: 18px 22px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.notice.pinned { border-left-color: var(--sun); background: #fffdf6; }
.notice .date {
  min-width: 86px;
  text-align: center;
  background: #eaf1f9;
  border-radius: 10px;
  padding: 8px 10px;
  flex-shrink: 0;
}
.notice .date .month { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--blue); letter-spacing: 1px; }
.notice .date .day { display: block; font-size: 1.5rem; font-weight: 800; color: var(--navy); line-height: 1.1; }
.notice .date .year { display: block; font-size: 0.75rem; color: var(--ink-soft); }
.notice .body { flex: 1; min-width: 240px; }
.notice .body h3 { font-size: 1.02rem; color: var(--navy); }
.notice .body p { font-size: 0.9rem; color: var(--ink-soft); margin-top: 4px; }
.notice .meta { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.notice .chip {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #e7f4f3;
  color: var(--teal);
}
.notice .chip.board { background: #eaf1f9; color: var(--blue); }
.notice .chip.hearing { background: #f3ecfa; color: #6c3fb5; }
.notice .chip.procurement { background: #fdeed3; color: #8a5b00; }
.notice .chip.alert { background: #fdeaea; color: #b3261e; }
.notice .links a { font-size: 0.88rem; font-weight: 700; text-decoration: none; }
.notice .links a + a { margin-left: 14px; }
.notice .pin-flag { font-size: 0.75rem; font-weight: 700; color: #8a5b00; }

.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.filters button {
  border: 1px solid var(--line);
  background: #fff;
  padding: 7px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--ink-soft);
}
.filters button.active { background: var(--navy); color: #fff; border-color: var(--navy); }

.btn {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 14px 30px;
  border-radius: 999px;
  border: none;
  font-size: 1rem;
  min-height: 44px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn:hover { background: var(--blue-bright); }
.btn.ghost { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.btn.ghost:hover { background: var(--navy); color: #fff; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5em, 1fr)); gap: 18px; margin-top: 34px; }
.stat {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 32px 18px 28px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--navy), var(--sun), var(--teal));
}
.stat::after {
  content: "";
  position: absolute;
  top: -55px; left: 50%;
  width: 190px; height: 130px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(245, 166, 35, 0.16), transparent);
  pointer-events: none;
}
.stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(14, 42, 71, 0.12), 0 22px 44px rgba(14, 42, 71, 0.14);
}
.stat .num {
  position: relative;
  font-size: clamp(2rem, 2vw + 1.2rem, 3rem);
  font-weight: 800;
  letter-spacing: -1.5px;
  white-space: nowrap;
  max-width: 100%;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(115deg, var(--navy) 5%, #d98a00 55%, var(--teal) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--navy); /* fallback for older browsers */
}
.stat .lbl { position: relative; font-size: 0.88rem; color: var(--ink-soft); margin-top: 8px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14.5em, 1fr)); gap: 20px; margin-top: 34px; }
.contact-grid h3 { color: var(--navy); font-size: 1.05rem; margin-bottom: 8px; }
.contact-grid p { font-size: 0.92rem; color: var(--ink-soft); }
.contact-grid a { font-weight: 700; text-decoration: none; }

/* ---------- Footer ---------- */
footer.site {
  background: var(--navy);
  color: #b9cbde;
  padding: 56px 0 32px;
  font-size: 0.9rem;
}
footer.site .cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
}
footer.site h4 { color: #fff; font-size: 0.95rem; margin-bottom: 12px; }
footer.site a { color: #cfe0f2; text-decoration: none; display: block; padding: 3px 0; }
footer.site a:hover { color: #fff; text-decoration: underline; }
footer.site .legal {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: 40px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.8rem;
}

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  background: var(--navy);
  color: #fff;
  padding: 48px 0;
}
.page-hero h1 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); letter-spacing: -0.4px; }
.page-hero p { color: #d7e4f2; margin-top: 8px; max-width: 640px; }
.page-hero p.lede { font-size: 1.35rem; font-weight: 600; max-width: 720px; }

/* ---------- Interior page helpers ---------- */
/* Stacked action buttons (Applicant Portal page) — front-page pill style.
   1fr rows + full height = the three buttons share the column evenly and
   the stack's top and bottom align exactly with the box beside it. */
.stack-btns { display: grid; gap: 14px; grid-auto-rows: 1fr; height: 100%; }
.stack-btns .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 56px;
  font-weight: 800;
  transition: background 0.15s ease, transform 0.15s ease;
}
.stack-btns .btn:hover { transform: translateY(-2px); }

/* Single oversized action (Resident Portal page) — one unmissable button,
   vertically centered against the box beside it */
.single-btn { display: flex; align-items: center; height: 100%; }
.single-btn .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 96px;
  font-size: 1.2rem;
  font-weight: 800;
  transition: background 0.15s ease, transform 0.15s ease;
}
.single-btn .btn:hover { transform: translateY(-2px); }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(17em, 1fr)); gap: 20px; margin-top: 34px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); gap: 20px; margin-top: 34px; }

.steps { display: grid; gap: 18px; margin-top: 34px; max-width: 760px; }
.step { display: flex; gap: 18px; align-items: flex-start; }
.step .n {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.step h3 { color: var(--navy); font-size: 1.05rem; }
.step p { font-size: 0.95rem; color: var(--ink-soft); margin-top: 4px; }

.check-list { list-style: none; margin-top: 20px; display: grid; gap: 10px; }
.check-list li { padding-left: 30px; position: relative; color: var(--ink-soft); font-size: 0.97rem; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 800; }

.cta-band {
  background: linear-gradient(120deg, var(--blue) 0%, var(--teal) 100%);
  border-radius: var(--radius);
  color: #fff;
  padding: 40px 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 56px;
}
.cta-band h2 { font-size: 1.5rem; letter-spacing: -0.3px; }
.cta-band p { color: #e3f1f0; margin-top: 6px; max-width: 560px; }
.cta-band .btn { background: #fff; color: var(--navy); flex-shrink: 0; }
.cta-band .btn:hover { background: var(--sun); }

/* ---------- Virtual board meeting panel ---------- */
.board-panel {
  background:
    radial-gradient(600px 300px at 90% -20%, rgba(42, 143, 224, 0.35), transparent 60%),
    radial-gradient(400px 250px at 0% 120%, rgba(14, 143, 138, 0.30), transparent 60%),
    var(--navy);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 40px;
}
.board-panel .bp-info { flex: 1; min-width: 280px; }
.board-panel .bp-kicker {
  color: var(--sun);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 0.75rem;
}
.board-panel h3 { font-size: 1.5rem; letter-spacing: -0.3px; margin: 6px 0 10px; }
.board-panel .bp-when { font-weight: 700; font-size: 0.98rem; color: #ffe1a8; }
.board-panel .bp-desc { margin-top: 10px; font-size: 0.92rem; color: #d7e4f2; max-width: 560px; }
.board-panel .bp-join { display: grid; gap: 14px; justify-items: stretch; min-width: 15em; }
.board-panel .bp-btn {
  background: var(--sun);
  color: var(--navy);
  text-align: center;
  font-size: 1.05rem;
  font-weight: 800;
  padding: 14px 30px;
}
.board-panel .bp-btn:hover { background: #ffc14d; }
.board-panel .bp-dial {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 0.92rem;
  display: grid;
  gap: 6px;
}
.board-panel .bp-dial a { color: #fff; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.board-panel .bp-dial strong { font-variant-numeric: tabular-nums; letter-spacing: 0.5px; }
/* When the panel leads a section (top of the notices page), sit flush
   at the top and put the gap below it instead. */
.wrap > .board-panel:first-child { margin-top: 0; margin-bottom: 44px; }

/* Demure variant — softer background, smaller headline, tighter padding.
   Used at the bottom of the notices page where it's a supporting cue,
   not the main event. */
.board-panel.demure {
  background: linear-gradient(180deg, #f6f8fb 0%, #eef3f9 100%);
  color: var(--ink);
  box-shadow: none;
  border: 1px solid var(--line);
  padding: 22px 26px;
  margin-top: 32px;
  gap: 22px;
}
.board-panel.demure .bp-kicker { color: var(--teal); font-size: 0.7rem; }
.board-panel.demure h3 { color: var(--navy); font-size: 1.1rem; letter-spacing: 0; }
.board-panel.demure .bp-when { color: var(--navy); font-size: 0.88rem; }
.board-panel.demure .bp-desc { color: var(--ink-soft); font-size: 0.88rem; }
.board-panel.demure .bp-join { min-width: 14em; gap: 10px; }
.board-panel.demure .bp-btn {
  font-size: 0.95rem;
  padding: 10px 22px;
  background: #ffffff;
  color: var(--blue);
  border: 1.5px solid var(--blue);
  font-weight: 700;
}
.board-panel.demure .bp-btn:hover {
  background: var(--blue);
  color: #ffffff;
  border-color: var(--blue);
}
/* High-contrast: outlined button gets a solid navy border so low-vision
   visitors still see a clear tap target. */
html.hc .board-panel.demure .bp-btn { background: #ffffff; color: #001428; border: 2px solid #001428; }
html.hc .board-panel.demure .bp-btn:hover { background: #001428; color: #ffffff; }
.board-panel.demure .bp-dial {
  background: rgba(14, 42, 71, 0.06);
  border-color: rgba(14, 42, 71, 0.12);
  color: var(--ink);
  font-size: 0.85rem;
  padding: 10px 14px;
}
.board-panel.demure .bp-dial a { color: var(--blue); }

/* ---------- Admin / notice publisher ---------- */
.admin-form { display: grid; gap: 18px; max-width: 720px; }
.admin-form label { font-weight: 700; font-size: 0.9rem; color: var(--navy); display: block; margin-bottom: 6px; }
.admin-form input, .admin-form select, .admin-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  background: #fff;
}
.admin-form textarea { min-height: 90px; resize: vertical; }
.admin-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.admin-output {
  background: #0e2a47;
  color: #d7e4f2;
  border-radius: 12px;
  padding: 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 8px;
}
.callout {
  background: var(--sun-soft);
  border: 1px solid #f2d9a4;
  border-radius: 12px;
  padding: 18px 22px;
  font-size: 0.92rem;
  margin-top: 24px;
}

@media (max-width: 760px) {
  footer.site .cols { grid-template-columns: 1fr 1fr; }
  .admin-form .row { grid-template-columns: 1fr; }
  header.site { position: static; }
  header.site .wrap { flex-direction: column; padding-top: 12px; padding-bottom: 12px; }
}