/* =========================================================
   Part 1: shared theme rules (a copy of css/theme-ecitizen.css).
   The public pages load only this file, so they make one request instead of two.
   The members and committee pages still load css/theme-ecitizen.css.
   If you change css/theme-ecitizen.css, copy the same change here.
   ========================================================= */
/* =========================================================
   eCitizen-style theme (preview, October 2026)
   Colours matched to accounts.ecitizen.go.ke: white header, cool greys, deep teal bands,
   green "Register" buttons, blue text links and a near-black footer.
   eCitizen's green (#5EB164) is too light for white text, so buttons use #3F8344 (same hue, AA contrast);
   the light green is kept for icons and small accents.
   Loaded after css/style.css (and css/portal.css), so it only overrides.
   ========================================================= */
@font-face {
    font-family: "Lexend";
    src: url("../fonts/lexend-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 900; font-style: normal; font-display: swap;
}
/* Fallback while Lexend downloads: Arial (or Roboto on Android) resized to Lexend's
   measurements, so the text takes the same space and nothing jumps when Lexend arrives. */
@font-face {
    font-family: "Lexend Fallback";
    src: local("Arial"), local("ArialMT"), local("Arimo"), local("Liberation Sans"),
         local("Roboto"), local("Roboto Regular"), local("Roboto-Regular"), local("Helvetica Neue"), local("Helvetica");
    size-adjust: 110.6%;
    ascent-override: 90.4%;
    descent-override: 22.6%;
    line-gap-override: 0%;
}
:root {
    --green:       #3F8344;   /* buttons */
    --green-deep:  #2F6A34;   /* hover */
    --green-night: #1B454B;   /* deep teal: banners and dark bands */
    --green-rgb:   63, 131, 68;
    --leaf:        #E6F2E7;   /* pale green: menu highlight and hover (was eCitizen's #5EB164, too strong behind text) */
    --accent:      #5EB164;   /* eCitizen's light green: thin accent lines only */
    --teal:        #1B454B;
    --teal-deep:   #12343A;
    --link:        #2563EB;   /* text links, "View all" */
    --mint:        #7ECF92;   /* accent on dark backgrounds */
    --red:         #C62828;   /* Get help and urgent things */
    --urgent:      #C62828;
    --ink:         #111827;
    --muted:       #4B5563;
    --stone:       #F3F4F6;   /* grey sections */
    --line:        #E5E7EB;
    --line-soft:   #F3F4F6;
    --msitu:       #1B454B;
    --msitu-2:     #111827;   /* headings are near-black, like eCitizen */
    --mahindi:     #7ECF92;
    --damu:        #2563EB;
    --charcoal:    #282F28;
    --footer:      #282F28;
    --radius:      12px;
    --shadow:      0 1px 2px rgba(17, 24, 39, .05);
    --font-display: "Lexend", "Lexend Fallback", "Segoe UI", Roboto, Arial, sans-serif;
    --font-body:    "Lexend", "Lexend Fallback", "Segoe UI", Roboto, Arial, sans-serif;
    --font-brand:   "Lexend", "Lexend Fallback", "Segoe UI", Roboto, Arial, sans-serif;
}
body { font-family: var(--font-body); color: var(--ink); letter-spacing: .005em; }
h1, h2, h3, h4, .section-title { font-family: var(--font-display); color: var(--ink); letter-spacing: .01em; font-weight: 600; }
a { color: var(--link); }
a:hover { color: #1D4ED8; }
.eyebrow { color: var(--green); letter-spacing: .02em; }

/* Buttons: rounded pills, normal case */
.btn { border-radius: 999px; text-transform: none; letter-spacing: .01em; font-weight: 500; }
.btn-gold, .btn-damu, .btn-maize { background: var(--green); border-color: var(--green); color: #fff; }
.btn-gold:hover, .btn-gold:focus, .btn-damu:hover, .btn-damu:focus, .btn-maize:hover, .btn-maize:focus { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.btn-ghost { background: #fff; border-color: #fff; color: var(--ink); }
.btn-ghost:hover, .btn-ghost:focus { background: #F3F4F6; border-color: #F3F4F6; color: var(--ink); }
.btn-outline-ink { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-outline-ink:hover, .btn-outline-ink:focus { border-color: var(--ink); color: var(--ink); background: #fff; }
.btn-help, .topbar .topbar-help { border-radius: 999px !important; }

/* Header: white, light grey top bar */
.topbar { background: var(--stone); color: var(--muted); border-bottom: 1px solid var(--line); }
.topbar a { color: var(--ink); font-weight: 500; }
.topbar a:hover, .topbar a:focus { color: var(--ink); }
.topbar-contact span { color: var(--muted); }
.site-nav { border-bottom: 1px solid var(--line); box-shadow: none; }
.site-nav .nav-link { color: var(--ink); font-weight: 500; }
.site-nav .nav-link.active, .site-nav .nav-link:hover { color: var(--green); }
.brand-text { color: var(--ink); font-weight: 600; }

/* Photo banners: a dark see-through layer over the photo (or the landscape drawing until photos arrive) */
/* Page banners: the photo (once downloaded) sits on top of the landscape drawing, so a picture always shows */
.hero .carousel-item, .page-hero {
    background:
        linear-gradient(90deg, rgba(17, 24, 39, .84) 0%, rgba(17, 24, 39, .6) 50%, rgba(17, 24, 39, .3) 100%),
        var(--slide-photo, var(--banner-photo, none)) center / cover no-repeat,
        url("../images/hero-landscape.svg") 70% 60% / cover no-repeat,
        var(--teal) !important;
}
@media (max-width: 767px) {
    .page-hero { background:
        linear-gradient(180deg, rgba(17, 24, 39, .55) 0%, rgba(17, 24, 39, .82) 100%),
        var(--banner-photo, none) center / cover no-repeat,
        url("../images/hero-landscape.svg") 70% 60% / cover no-repeat,
        var(--teal) !important; }
}
/* Home slides: darker on the left where the words are, the picture shows on the right */
.u-hero .carousel-item {
    background:
        linear-gradient(90deg, rgba(17, 24, 39, .86) 0%, rgba(17, 24, 39, .62) 42%, rgba(17, 24, 39, .12) 78%, rgba(17, 24, 39, 0) 100%),
        var(--slide-photo, url("../images/hero-landscape.svg")) 70% center / cover no-repeat,
        var(--teal) !important;
}
@media (max-width: 767px) {
    .u-hero .carousel-item {
        background:
            linear-gradient(180deg, rgba(17, 24, 39, .35) 0%, rgba(17, 24, 39, .72) 40%, rgba(17, 24, 39, .86) 100%),
            var(--slide-photo, url("../images/hero-landscape.svg")) 72% center / cover no-repeat,
            var(--teal) !important;
    }
}
.u-hero, .page-hero { background-color: var(--teal); }
.u-hero h1, .u-hero h2, .page-hero h1 { font-weight: 500; letter-spacing: .02em; }
.u-slide-label, .hero-place { color: #fff; opacity: .9; }
.u-slide-lead, .hero-lead { color: #F3F4F6; }

/* Cards: white, thin grey border, no heavy shadow */
.h-card, .portfolio, .path-card, .form-card, .fact-panel, .mv-card, .u-board, .u-quick-list a, .benefit {
    border: 1px solid var(--line) !important; border-radius: 8px !important; box-shadow: none !important; }
.h-card h3, .portfolio h2, .path-card h3 { color: var(--ink); font-weight: 600; }
.h-card > a:last-child, .u-head-row > a { color: var(--link); font-weight: 500; }
.h-ico { --c: var(--teal); }
.u-quick-list strong { color: var(--ink); }

/* Grey sections */
.section-soft { background: var(--stone) !important; }
.home > .section:not(.section-soft) { background: #fff !important; }   /* home sections alternate white and grey */
.home > .section.u-finder { background: var(--teal, #1B454B) !important; }   /* the help finder stays dark: white text */

/* Action buttons in the page banners */
.hero-actions { margin-top: 1.5rem; }
.page-hero .hero-actions .btn { min-height: 48px; }
@media (max-width: 575px) { .hero-actions .btn { width: 100%; justify-content: center; } }

/* Deep teal bands */
.section-dark, .objective-band, .cta, .donate-band, .host-band, .section-green, .u-next { background: var(--teal) !important; }

/* Footer: near-black, like eCitizen */
.site-footer { background: var(--footer) !important; color: #D1D5DB; border-top: 0; }
.site-footer a { color: #fff; }
.footer-motto { color: var(--mint) !important; }

/* Members and committee areas */
.app-top, .pt-head, .auth-intro, .profile-band, .drawer-head { background: var(--teal) !important; }
.side button.on, .drawer-nav button.on { box-shadow: inset 4px 0 0 var(--green) !important; }
.tabbar button.on { color: var(--green) !important; }

/* ---------- Icons (two-tone set, October 2026) ---------- */
.h-ico svg { color: #fff; }
.h-ico-maize svg { color: var(--teal, #1B454B); }
.h-contact svg { color: var(--damu); }
.u-tiles svg { box-sizing: border-box; width: 46px; height: 46px; padding: 9px; border-radius: 12px; color: #1D4ED8; background: #E5EDFD; }
.u-tiles svg.ut-green { color: #2F6B34; background: #E6F2E7; }
.u-tiles svg.ut-teal  { color: #1B454B; background: #E0EEEF; }
.u-tiles svg.ut-red   { color: #B71C1C; background: #FBE7E7; }
.u-tiles svg.ut-amber { color: #A0520B; background: #FDF0DC; }
.u-tiles a:hover svg { transform: scale(1.06); }
.u-tiles svg { transition: transform .15s ease; }
@media (max-width: 575.98px) { .u-tiles svg { width: 40px; height: 40px; padding: 8px; } }
.auth-points svg { box-sizing: border-box; width: 46px; height: 46px; padding: 9px; border-radius: 12px; background: rgba(255, 255, 255, .12); color: #C3E6C5; margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .u-tiles svg { transition: none; } }

/* ---------- Closing call-to-action band (was unstyled: dark text on teal) ---------- */
.cta { padding: 3.5rem 0; color: #E5ECE6; }
.cta h2 { margin-bottom: .5rem; }
.cta p { color: #D6E3DF; max-width: 40rem; margin: 0 auto 1.5rem; }
.cta .cta-actions { justify-content: center; }

/* ---------- Membership: "What members receive" as white cards on grey ---------- */
#benefits .benefits { gap: 1rem; }
#benefits .benefit { background: #fff; padding: 1.25rem 1.3rem; border-top: 1px solid var(--line); }
#benefits .benefit h3 { display: block; color: var(--ink); font-size: 1.12rem; font-weight: 600; line-height: 1.35; }
#benefits .benefit h3::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--green); margin-right: .55rem; vertical-align: .12em; }
#benefits .benefit h3 .tag { display: table; margin-top: .45rem; background: #E6F2E7; color: #2F6B34; font-weight: 600; }
#benefits .benefit p { color: var(--muted); opacity: 1; }
#benefits .benefits-lead { color: var(--muted); }
#benefits .benefits-lead .tag { background: #E6F2E7; color: #2F6B34; }

/* ---------- Members and committee menus: clearer text ---------- */
.drawer-nav > button, .drawer-group summary { color: var(--ink); font-weight: 700; font-size: 1.02rem; }
.drawer-group > button, .drawer-group > a { color: var(--ink); font-weight: 600; font-size: 1rem; }
.drawer-nav button.on, .side button.on { background: var(--leaf) !important; color: var(--teal) !important; font-weight: 700; }
.drawer-nav button:hover, .drawer-group summary:hover, .drawer-group > a:hover, .side button:hover { background: #F3F4F6; }
.drawer-nav button.on:hover, .side button.on:hover { background: var(--leaf); }
.drawer-nav > button svg, .drawer-group summary > svg:first-child, .side button svg { color: var(--green); }
.drawer-group summary .chev { color: #4B5563; }
.side button { color: var(--ink); font-weight: 600; }
.side-label { color: #4B5563; }

/* =========================================================
   Part 2: the public website design (Umoja)
   ========================================================= */
/* =========================================================
   KENEWA public website design "Umoja" (approved October 2026)
   Loaded after style.css and theme-ecitizen.css on the 21 public pages only.
   NOT loaded by the Members area (portal.html), the Committee area (admin.html,
   editor-guide.html) or the sign-in pages (login.html, register.html), which keep their own look.
   Change colours in one place: the --u-* tokens below.
   Idea: deep night-green and gold, big confident type, generous space,
   elevated cards, and a kanga stripe in the logo colours as KENEWA's signature.
   ========================================================= */
:root {
    --u-night: #11231B;        /* header, bands, footer */
    --u-night-2: #183126;      /* raised surfaces on dark */
    --u-green: #2F6B3D;        /* primary on light (white text 6.4:1) */
    --u-green-deep: #24552F;
    --u-gold: #CC9E4E;         /* primary on dark, accents (dark text 6.8:1) */
    --u-gold-light: #E9C98A;
    --u-cream: #F7F3EA;        /* soft sections */
    --u-red: #B23B35;          /* Get help and urgent only (white text 5.9:1) */
    --u-ink: #16201A;
    --u-muted: #4B5348;
    --u-line: #E6E1D4;
    --u-radius: 22px;
    --u-shadow: 0 1px 2px rgba(17, 35, 27, .06), 0 18px 40px -18px rgba(17, 35, 27, .28);
    --u-stripe: repeating-linear-gradient(90deg, #393B32 0 22px, #B23B35 22px 44px, #00753A 44px 66px, #CC9E4E 66px 88px);

    --green: var(--u-green); --green-deep: var(--u-green-deep); --green-rgb: 47, 107, 61;
    --link: var(--u-green); --damu: var(--u-green); --msitu: var(--u-night); --msitu-2: var(--u-ink); --teal: var(--u-night);
    --ink: var(--u-ink); --muted: var(--u-muted); --stone: var(--u-cream); --line: var(--u-line); --line-soft: #EFEBE1;
    --red: var(--u-red); --urgent: var(--u-red); --mahindi: var(--u-gold-light); --mint: var(--u-gold-light); --orange: var(--u-gold-light);
    --font-display: "Lexend", "Lexend Fallback", "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- type ---------- */
body { color: var(--u-ink); font-size: 1.0625rem; line-height: 1.7; }
h1, h2, h3, h4 { color: var(--u-ink); }
a { color: var(--u-green); text-underline-offset: 3px; }
.section-title { font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.03em; color: var(--u-ink); }
.section-title::before { content: ""; display: block; width: 88px; height: 6px; border-radius: 3px; background: var(--u-stripe); margin-bottom: 1.1rem; }
.text-center .section-title::before, .section-title.text-center::before, .u-finder .section-title::before { margin-inline: auto; }
.eyebrow, .hero-place { background: none !important; padding: 0 !important; color: var(--u-green) !important; font-weight: 700 !important; font-size: .82rem !important;
    letter-spacing: .14em !important; text-transform: uppercase; }
.page-hero .hero-place, .u-slide-label, .u-next .eyebrow, .objective-band .eyebrow, .section-dark .eyebrow, .section-green .eyebrow { color: var(--u-gold-light) !important; }

/* ---------- focus: dark ring plus gold halo, visible on light and dark ---------- */
:focus-visible { outline: 3px solid var(--u-ink) !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px var(--u-gold-light) !important; border-radius: 8px; }
.site-nav :focus-visible, .u-hero :focus-visible, .page-hero :focus-visible, .site-footer :focus-visible, .u-finder :focus-visible, .u-next :focus-visible, .topbar :focus-visible {
    outline-color: #fff !important; box-shadow: 0 0 0 7px rgba(204, 158, 78, .85) !important; }

/* ---------- buttons ---------- */
.btn { border-radius: 999px; font-weight: 700; min-height: 50px; padding-inline: 1.5rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.btn-sm { min-height: 40px; padding-inline: 1rem; }
.btn-gold, .btn-maize { background: var(--u-green); border: 2px solid var(--u-green); color: #fff; box-shadow: 0 10px 22px -12px rgba(47, 107, 61, .8); }
.btn-gold:hover, .btn-maize:hover { background: var(--u-green-deep); border-color: var(--u-green-deep); color: #fff; }
.u-hero .btn-maize, .page-hero .btn-maize, .u-finder .btn, .u-next .btn-maize { background: var(--u-gold); border-color: var(--u-gold); color: #16201A; box-shadow: none; }
.u-hero .btn-maize:hover, .page-hero .btn-maize:hover, .u-finder .btn:hover { background: var(--u-gold-light); border-color: var(--u-gold-light); color: #16201A; }
.btn-outline-ink { border: 2px solid var(--u-ink); color: var(--u-ink); background: transparent; }
.btn-outline-ink:hover { background: var(--u-ink); color: #fff; }
.btn-ghost, .btn-ghost:focus { border: 2px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .06); color: #fff !important; }
.btn-ghost:hover { background: #fff; color: var(--u-ink) !important; }

/* ---------- header: dark and confident ---------- */
.topbar { background: #0B1812; border: 0; font-size: .84rem; }
.topbar, .topbar a, .topbar-contact span { color: #C9D3CB !important; }
.topbar a:hover { color: #fff !important; }
@media (min-width: 1200px) { .topbar .topbar-help { display: none; } }   /* computers: the red Get help is in the main menu; phones keep this one */
.site-nav { background: var(--u-night) !important; border-bottom: 0; padding: .85rem 0; box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.site-nav .brand-text { color: #fff !important; border-left-color: rgba(255, 255, 255, .2) !important; }
.site-nav .brand-logo { background: #fff; border-radius: 50%; padding: 2px; }
.site-nav .nav-link { color: #E6ECE7 !important; font-weight: 600; padding: .55rem .85rem !important; border-radius: 999px; background: transparent !important; }
.site-nav .nav-link:hover { color: #fff !important; background: rgba(255, 255, 255, .08) !important; }
.site-nav .nav-link.active { color: #fff !important; box-shadow: inset 0 -3px 0 var(--u-gold) !important; border-radius: 0; }
.site-nav .btn-help { background: var(--u-red); border-color: var(--u-red); color: #fff; }
.site-nav .navbar-toggler { border-color: rgba(255, 255, 255, .4); }
.site-nav .navbar-toggler-icon { filter: invert(1); }
.site-nav .dropdown-menu { border-radius: 18px; box-shadow: var(--u-shadow); }
.site-nav .mega-menu[data-bs-popper] { border-top: 4px solid var(--u-gold) !important; }
.mega-head { color: var(--u-green); }
@media (max-width: 1199px) {
    .site-nav .navbar-collapse { background: var(--u-night); }
    .site-nav .dropdown-menu { background: var(--u-night-2); border: 0; box-shadow: none; }
    .site-nav .dropdown-item, .mega-head { color: #E6ECE7 !important; }
    .site-nav .dropdown-item:hover, .site-nav .dropdown-item:focus { background: rgba(255, 255, 255, .08) !important; color: #fff !important; }
}

/* ---------- home hero ---------- */
.u-hero .carousel-item { min-height: clamp(600px, 86vh, 760px);
    background: linear-gradient(100deg, rgba(11, 24, 18, .96) 0%, rgba(11, 24, 18, .82) 46%, rgba(11, 24, 18, .25) 100%),
                var(--slide-photo, none) center / cover no-repeat, var(--u-night) !important; }
.u-hero h1, .u-hero h2 { font-size: clamp(2.5rem, 6.4vw, 4.8rem) !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: -0.04em !important; max-width: 14ch; }
.u-slide-lead { font-size: 1.25rem; color: #DCE5DE; }
.u-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--u-stripe); z-index: 2; }
.u-quick { margin-top: -4.5rem; }
.u-quick-list { gap: 1.1rem; }
.u-quick-list a { border-radius: var(--u-radius); box-shadow: var(--u-shadow); padding: 1.35rem 1.3rem; border: 0; border-top: 4px solid var(--u-gold); transition: transform .2s; }
.u-quick-list a:hover { transform: translateY(-3px); }
.u-quick-list .h-ico { background: var(--u-night) !important; }
.u-quick-list .h-ico svg { stroke: var(--u-gold-light) !important; color: var(--u-gold-light) !important; }

/* ---------- page banners ---------- */
.page-hero { padding: clamp(4.5rem, 10vw, 7.5rem) 0 clamp(4rem, 9vw, 6.5rem) !important;
    background: linear-gradient(100deg, rgba(11, 24, 18, .95) 0%, rgba(11, 24, 18, .8) 48%, rgba(11, 24, 18, .3) 100%),
                var(--banner-photo, none) center / cover no-repeat, var(--u-night) !important; }
.page-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--u-stripe); }
.page-hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.2rem) !important; font-weight: 700 !important; line-height: 1.02; letter-spacing: -0.035em !important; max-width: 15ch; }
.page-hero .hero-lead { font-size: 1.2rem; color: #DCE5DE; }

/* ---------- sections ---------- */
.section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
.section-soft { background: var(--u-cream); }

/* ---------- cards: elevated, borderless ---------- */
.h-card, .u-board, .u-news-card, .u-promo, .path-card, .fact-panel, .form-card, .h-join-form, .res-group, .portfolio, .h-people li, .mv-card, .benefit {
    border: 0 !important; border-radius: var(--u-radius) !important; box-shadow: var(--u-shadow) !important; background: #fff; }
.h-card, .u-news-card, .u-promo, .u-tiles a { transition: transform .2s ease, box-shadow .2s ease; }
.h-card:hover, .u-news-card:hover, .u-promo:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(17,35,27,.06), 0 28px 50px -22px rgba(17,35,27,.4) !important; }
.u-promo img, .u-news-card img { transition: transform .5s ease; }
.u-promo:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .h-card:hover, .u-news-card:hover, .u-promo:hover, .u-promo:hover img, .u-quick-list a:hover { transform: none; } }
.h-ico { background: var(--u-night) !important; }
.h-ico svg { stroke: var(--u-gold-light) !important; color: var(--u-gold-light) !important; }
.u-cards-4 .h-card > .btn { align-self: flex-start; }
.h-join-form { border-top: 0 !important; }
.h-join-form::before { content: ""; display: block; height: 8px; margin: calc(-1 * clamp(1.25rem, 3vw, 2rem)) calc(-1 * clamp(1.25rem, 3vw, 2rem)) 1.5rem; border-radius: 22px 22px 0 0; background: var(--u-stripe); }
.u-news-card { border-top: 0 !important; }
.u-news-when, .h-mm, .h-role, .u-head-row > a, .h-card > a:last-child, .u-news-card a, .u-promo a { color: var(--u-green) !important; }
.u-tiles a { border: 0; border-radius: 18px; box-shadow: var(--u-shadow); }
.u-tiles svg { background: #EEF3EE !important; color: var(--u-green) !important; stroke: var(--u-green) !important; }
.u-port-list a { background: #fff; border-left: 0; border-radius: 16px; box-shadow: var(--u-shadow); }
.u-port-list a::before { content: ""; display: block; width: 28px; height: 4px; border-radius: 2px; background: var(--u-gold); margin-bottom: .55rem; }
.u-notices li::before { color: var(--u-green); }
.u-boards-grid { align-items: start; }                     /* no empty block under the noticeboard */
.h-dateblock { background: var(--u-night) !important; }
.h-dateblock .h-dd { color: #fff !important; }
.h-dateblock .h-mm { color: var(--u-gold-light) !important; }

/* ---------- Chairperson's welcome ---------- */
.u-welcome { background: var(--u-cream); }
.u-chair img { border-radius: 28px; box-shadow: var(--u-shadow); }
.h-stats div { flex-direction: column !important; justify-content: flex-start; }
.h-stats dd { order: -1; color: var(--u-green) !important; font-size: clamp(2.6rem, 5vw, 3.4rem) !important; }

/* ---------- dark bands ---------- */
.u-next { background: var(--u-night) !important; }
.u-next .countdown-grid > div, .u-next-count > div { background: var(--u-night-2); border-color: rgba(204, 158, 78, .35) !important; }
.u-next .countdown-grid span { color: var(--u-gold-light); }
.countdown-grid small, .u-next-count small { color: #E6ECE7 !important; }
.u-finder { background: radial-gradient(circle at 50% -20%, rgba(204, 158, 78, .28), transparent 55%), var(--u-night) !important; }
.u-finder .form-control { border-radius: 999px; min-height: 56px; padding-inline: 1.4rem; }

/* ---------- photos ---------- */
.h-gallery .gallery .tile { border-radius: 22px !important; }

/* ---------- footer ---------- */
.site-footer { background: var(--u-night) !important; position: relative; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--u-stripe); }
.footer-head { border-bottom-color: var(--u-gold) !important; }
.footer-motto, .ack-label { color: var(--u-gold-light) !important; }   /* acknowledgement label was 2.6:1, now 10:1 */
.footer-ack { max-width: none !important; background: var(--u-night-2) !important; border-left-color: var(--u-gold) !important; border-radius: 0 16px 16px 0; }
.social a { border-color: rgba(255, 255, 255, .25); }

/* ---------- reading tools: keep clear of content on phones ---------- */
@media (max-width: 767px) {   /* phones: icon only, the label stays for screen readers */
    .rt-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .rt-btn { padding: .4rem .75rem; } }

/* ---------- top bar on tablets: nothing wraps ---------- */
.topbar-links a { white-space: nowrap; }
@media (max-width: 991px) { .topbar-contact span { display: none; } }
.u-tiles a { border: 1px solid var(--u-line) !important; }


/* ---------- page header: top bar and menu in one <header> ----------
   Phones and tablets: the whole header stays at the top, so the red Get help is always one tap away.
   Computers: the top bar scrolls away and the menu stays. */
.site-header { position: sticky; top: 0; z-index: 1030; }
.site-header .site-nav { position: static; }
.topbar-inner { min-height: 40px; }
@media (min-width: 1200px) { .site-header { top: -40px; } .topbar-inner { height: 40px; } }

/* ---------- home on phones: help cards two by two, online services as a swipeable row ---------- */
@media (max-width: 575.98px) {
    .u-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .7rem !important; }
    .u-cards-4 .h-card { padding: 1rem .9rem !important; }
    .u-cards-4 .h-card .h-ico { width: 40px; height: 40px; margin-bottom: .6rem; }
    .u-cards-4 .h-card h3 { font-size: 1rem; }
    .u-cards-4 .h-card p { font-size: .88rem; line-height: 1.45; margin-bottom: .8rem; }
    .u-cards-4 .h-card .btn { min-height: 40px; padding: .3rem .9rem; font-size: .88rem; }
    .u-tiles { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: .7rem; padding: .25rem .1rem 1rem;
        margin-inline: -.75rem; padding-inline: .75rem; scrollbar-width: thin; }
    .u-tiles > li { flex: 0 0 44%; scroll-snap-align: start; }
    .u-tiles a { flex-direction: column; align-items: flex-start; min-height: 116px; }
    .u-self .u-head-row::after { content: "Swipe for more \2192"; font-size: .85rem; color: var(--u-muted); width: 100%; }
}

/* ---------- Welfare page: support types as cards ---------- */
.support-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0 1rem; }
.support-cards .support { border: 0; background: #fff; border-radius: 18px; box-shadow: var(--u-shadow); padding: 1.2rem 1.2rem 1.3rem; }
.support-cards .support h3 { color: var(--u-ink); font-size: 1.1rem; margin: .7rem 0 .35rem; }
.support-cards .support p { font-size: .97rem; color: var(--u-muted); }
.support-ic { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--u-night); }
.support-ic svg { fill: none; stroke: var(--u-gold-light); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 575.98px) { .support-cards { grid-template-columns: 1fr; } }

/* ---------- Photos page: the mosaic shown until members' photos are added ---------- */
.gallery-stock { margin-top: 1.5rem; }
.gallery-stock .gallery { margin-top: 0 !important; }

/* home: upcoming events titles are now h3 (correct heading order under the h2) */
.h-up-text h3 { font-size: 1.08rem; font-weight: 700; color: var(--u-ink); margin: 0 0 .15rem; }