/* ===============================================================
   NadarUnityHub landing theme.

   A LIGHT page inside a dark-first site. app.css is deliberately
   dark (see its header note) because its gold/cyan accent language
   depends on glow, and glow only reads against a dark surface. This
   sheet does not argue with that: it repaints one page — the
   homepage, when Site Settings has the NadarUnityHub template
   selected — and every rule is scoped under `body.nuh-page` so
   nothing here can reach the rest of the site.

   That scoping is load-bearing, not tidiness. The topbar and footer
   are rendered by includes/header.php and includes/footer.php for
   every page there is; the only reason it is safe to restyle them
   here is that the body class is set by index.php alone.

   Palette comes from the approved artwork: orange for action, deep
   blue for structure, a pale sky for ground. The orange used behind
   white text (--nuh-orange-ink) is a DARKER orange than the one used
   for fills — the artwork's #f47b20 carries white text at about
   3.3:1, which fails WCAG AA for button-sized type. Do not "restore"
   the brighter orange on anything that has text on it.
   =============================================================== */

body.nuh-page {
    /* Brand */
    --nuh-orange: #f47b20;
    --nuh-orange-soft: #ff9a4d;
    --nuh-orange-ink: #c2530a;     /* AA-safe behind white text */
    --nuh-blue: #1b56a4;
    --nuh-blue-deep: #14396e;
    --nuh-blue-soft: #4b8fd4;

    /* Ground */
    --nuh-sky-top: #eaf5fd;
    --nuh-sky-bottom: #d7e9f8;
    --nuh-card: #ffffff;
    --nuh-ink: #17324f;
    --nuh-ink-muted: #52708c;
    --nuh-line: rgba(27, 86, 164, 0.14);

    --nuh-shadow-sm: 0 2px 8px rgba(20, 57, 110, 0.08);
    --nuh-shadow-md: 0 10px 28px rgba(20, 57, 110, 0.13);
    --nuh-shadow-lg: 0 22px 54px rgba(20, 57, 110, 0.18);
    --nuh-radius: 16px;

    /* Deep blue, not sky — this is what shows in the 72px of bottom padding
       app.css reserves for the fixed .footer-nav. With the sky gradient here
       instead, a band of pale blue reappeared BELOW the dark footer at the end
       of the document, which read as the page starting again. The sky belongs
       to the content area, so it is painted on .page just below. */
    background: var(--nuh-ground, #0f2b53);
    color: var(--nuh-ink);
}

/* The content ground. Sized to the content rather than the viewport, so it
   ends exactly where the footer begins however short the page is — the login
   form is a third of a screen tall and must not trail a gradient past it. */
body.nuh-page .page {
    background: linear-gradient(180deg, #eaf7ff 0%, #dfeefb 28%, #d4ebfa 60%, #d1ebf8 100%);
}

/* app.css paints two full-bleed decorative layers on every page
   (body::before is a fixed gradient wash, body::after a star field).
   Both were drawn for the dark theme and turn this page muddy.
   Hidden rather than recoloured — they have no job here.

   The ambient scene (.kn-ambient) is stopped upstream in header.php so
   its stylesheet and script are never even fetched; the rule below is
   only a backstop for a cached page that still carries the markup. */
body.nuh-page::before,
body.nuh-page::after { display: none !important; }
body.nuh-page .kn-ambient { display: none !important; }

body.nuh-page .page {
    max-width: none;
    /* margin too, not just padding: app.css gives .page `margin: 1.5rem auto`,
       and with the body painted deep blue that margin showed as a dark band
       between the white top bar and the page. */
    margin: 0;
    padding: 0;
    /* Short pages (sign in, confirm email) would otherwise leave the ground
       ending a few hundred pixels down with the body's blue beneath it. */
    min-height: 60vh;
}

/* --- Top bar --------------------------------------------------- */
/* White, as in the artwork. The dark topbar's own gradient, glow and
   underline animations are all overridden here rather than disabled
   globally. */
body.nuh-page .topbar {
    background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(245,250,255,0.94) 100%);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(27, 86, 164, 0.14);
    box-shadow: 0 10px 24px rgba(20, 57, 110, 0.09);
}
body.nuh-page .topbar::after { display: none; }
body.nuh-page .brand span,
body.nuh-page .brand span:last-child {
    color: var(--nuh-blue-deep);
    background: none;
    -webkit-text-fill-color: currentColor;
    text-shadow: none;
    font-weight: 700;
}
/* ...except the accent word, which stays orange — "Nadar<em>Unity</em>Hub",
   as in the artwork. The rule above deliberately catches every span in the
   wordmark (app.css gradient-fills the last one), so this needs the extra
   specificity to survive it. */
body.nuh-page .brand span .brand-accent,
body.nuh-page .brand .brand-accent {
    color: var(--nuh-orange-ink);
    -webkit-text-fill-color: currentColor;
}
/* The drawn mark carries its own white ground; on a white bar it needs a
   soft lift, not the hard shadow app.css gives it against the dark one. */
body.nuh-page .brand-mark-hub { filter: drop-shadow(0 2px 5px rgba(20, 57, 110, 0.18)); }

body.nuh-page .topnav { display: flex; align-items: center; gap: 0.7rem; }
/* Restore the phone collapse. The display:flex above out-specifies app.css's
   mobile `.topnav { display:none }`, which left the drawer permanently open
   over the hero on a phone — the hamburger could never close it. Restated
   at the same specificity so closed means closed and .is-open still wins.
   The drawer itself is also re-skinned: app.css paints it purple-and-gold
   for the dark site, which is not this page's palette. */
@media (max-width: 600px) {
    body.nuh-page .topnav { display: none; }
    body.nuh-page .topnav.is-open { display: flex; }
    body.nuh-page .topnav {
        background: linear-gradient(180deg, #ffffff 0%, #f2f8fe 100%);
        border-bottom: 1px solid var(--nuh-line);
        box-shadow: 0 18px 40px rgba(20, 57, 110, 0.22);
    }
    body.nuh-page .topnav a { border-bottom: 1px dashed rgba(27, 86, 164, 0.18); }
    body.nuh-page .nav-toggle {
        background: #fff;
        border-color: var(--nuh-line);
        color: var(--nuh-blue-deep);
    }
    body.nuh-page .nav-toggle:hover,
    body.nuh-page .nav-toggle:focus-visible {
        border-color: var(--nuh-blue-soft);
        box-shadow: 0 0 12px rgba(27, 86, 164, 0.3);
    }
}
body.nuh-page .topnav a { color: var(--nuh-blue-deep); font-weight: 600; }
body.nuh-page .topnav a:hover,
body.nuh-page .topnav a:focus-visible { color: var(--nuh-orange-ink); text-shadow: none; }
body.nuh-page .topnav a.is-active { color: var(--nuh-orange-ink); }
body.nuh-page .topnav a.is-active::after { background: var(--nuh-orange); box-shadow: none; }
body.nuh-page .nav-toggle__bars,
body.nuh-page .nav-toggle__bars::before,
body.nuh-page .nav-toggle__bars::after { background: var(--nuh-blue-deep); }

/* The footer's app buttons and sign-off are styled in app.css, not here:
   that footer renders on every page, and rules scoped to body.nuh-page
   would have left them unstyled everywhere except the landing. Only the
   landing's own accent colour is overridden below. */
body.nuh-page .site-footer-store:hover { border-color: var(--nuh-orange-soft); }

/* --- Brand strapline -------------------------------------------------
   The second line under the wordmark. `display:block` on both halves so
   they stack; the anchor stays a single link covering the pair. */
body.nuh-page .brand-words { display: flex; flex-direction: column; line-height: 1.15; }
body.nuh-page .brand-strapline {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--nuh-ink-muted);
    white-space: nowrap;
}
@media (max-width: 600px) {
    /* The bar already carries a logo, a location chip and a menu button. */
    body.nuh-page .brand-strapline { display: none; }
}

/* --- Two-tone headline ------------------------------------------------
   The artwork's dark first line and orange second. Only applies when the
   headline setting contains a `|`; without one the title renders as a
   single run exactly as before. */
.nuh-hero__l1,
.nuh-hero__l2 { display: block; }
.nuh-hero__l2 { color: var(--nuh-orange-ink); }

/* --- Sign in / Join buttons -----------------------------------------
   Actions, not destinations, so they carry weight the nav links do not.
   Scoped under body.nuh-page because they are drawn for the light public
   bar; the dark member area keeps its plain text links. */
body.nuh-page .nav-auth {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1.05rem;
    min-height: 2.4rem;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    /* The nav's hover underline is drawn as a background gradient; on a
       filled button it appears as a stripe across the bottom. */
    background-image: none;
}
body.nuh-page .nav-auth--ghost {
    border: 1px solid var(--nuh-line);
    color: var(--nuh-blue-deep);
    background-color: #fff;
}
body.nuh-page .nav-auth--ghost:hover { border-color: var(--nuh-blue-soft); color: var(--nuh-blue-deep); }
body.nuh-page .nav-auth--join {
    background: linear-gradient(180deg, #ff9c47 0%, var(--nuh-orange) 30%, var(--nuh-orange-ink) 100%);
    color: #fff;
    box-shadow: 0 6px 14px rgba(194, 83, 10, 0.28);
}
body.nuh-page .nav-auth--join:hover { color: #fff; box-shadow: 0 9px 20px rgba(194, 83, 10, 0.38); }
body.nuh-page .topnav a.nav-auth::after { display: none; }

@media (max-width: 600px) {
    /* In the mobile drawer they stack with the rest of the menu, so the
       pill shape would read as an odd half-width row. */
    body.nuh-page .nav-auth { width: 100%; justify-content: center; margin-top: 0.3rem; }
}
@media (pointer: coarse) {
    body.nuh-page .nav-auth { min-height: 2.75rem; }
}

/* --- Location chip -------------------------------------------------
   One control in the top bar saying where you are; every listing then
   respects it. Built on <details>, so it opens, closes and is keyboard
   navigable with no JavaScript at all. */
body.nuh-page .loc-chip { position: relative; flex: 0 0 auto; }
body.nuh-page .loc-chip > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    min-height: 2.4rem;
    border: 1px solid var(--nuh-line);
    border-radius: 999px;
    background: #fff;
    color: var(--nuh-blue-deep);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    /* The default triangle sits oddly inside a pill. */
    list-style: none;
}
body.nuh-page .loc-chip > summary::-webkit-details-marker { display: none; }
body.nuh-page .loc-chip > summary:hover { border-color: var(--nuh-orange); }
body.nuh-page .loc-chip > summary .icon { width: 0.95rem; height: 0.95rem; color: var(--nuh-orange-ink); }
body.nuh-page .loc-chip > summary span {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.loc-chip__panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 60;
    width: min(17rem, calc(100vw - 2rem));
    padding: 0.9rem;
    background: #fff;
    border: 1px solid var(--nuh-line);
    border-radius: 12px;
    box-shadow: var(--nuh-shadow-lg);
}
.loc-chip__panel label { display: block; font-size: 0.82rem; font-weight: 700; color: var(--nuh-blue-deep); margin-bottom: 0.3rem; }
.loc-chip__panel input {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid rgba(27, 86, 164, 0.28);
    border-radius: 8px;
    font: inherit;
    color: var(--nuh-ink);
    /* Stated explicitly. This field is not inside a .form-group, so the
       light-theme input rule does not reach it and it was inheriting
       app.css's dark-theme fill — a near-black box in a white panel. */
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(20, 57, 110, 0.06);
}
.loc-chip__panel input:focus {
    outline: none;
    border-color: var(--nuh-orange);
    box-shadow: 0 0 0 3px rgba(244, 123, 32, 0.18);
}
.loc-chip__panel input::placeholder { color: #93a8bd; }
.loc-chip__hint { margin: 0.5rem 0 0.7rem; font-size: 0.78rem; color: var(--nuh-ink-muted); line-height: 1.4; }
.loc-chip__acts { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* --- "Showing near…" banner ----------------------------------------
   An applied filter has to be visible and dismissible, or somebody
   concludes the directory is empty when it is merely narrowed. */
.loc-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    background: rgba(27, 86, 164, 0.08);
    border: 1px solid rgba(27, 86, 164, 0.2);
    font-size: 0.9rem;
    color: var(--nuh-ink);
}
.loc-banner__icon .icon { width: 1rem; height: 1rem; color: var(--nuh-orange-ink); display: block; }
.loc-banner__clear { margin-left: auto; font-weight: 700; color: var(--nuh-blue); text-decoration: none; }
.loc-banner__clear:hover { color: var(--nuh-orange-ink); text-decoration: underline; }

@media (max-width: 600px) {
    /* The chip keeps its icon but drops the place name, which would
       otherwise push the wordmark and the menu button off a narrow bar. */
    body.nuh-page .loc-chip > summary span { display: none; }
    body.nuh-page .loc-chip > summary { padding: 0.4rem 0.6rem; }
    .loc-chip__panel { right: -0.5rem; }
}
@media (pointer: coarse) {
    body.nuh-page .loc-chip > summary { min-height: 2.75rem; }
}

/* --- Shared shell ---------------------------------------------- */
.nuh-wrap {
    width: min(1180px, 100% - 2.4rem);
    margin-inline: auto;
}

/* The artwork sets the sections close together. An earlier, roomier rhythm
   left ~200px of empty sky between the hero buttons and the first card. */
.nuh-section { padding: var(--nuh-section-pad, clamp(1.8rem, 3.4vw, 2.8rem)) 0; }

.nuh-h2 {
    font-family: var(--nuh-font-head, 'Poppins', 'Baloo 2', sans-serif);
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    line-height: 1.2;
    color: var(--nuh-blue-deep);
    margin: 0 0 0.4rem;
    text-align: center;
}
.nuh-sub {
    text-align: center;
    color: var(--nuh-ink-muted);
    margin: 0 auto clamp(1.4rem, 3vw, 2.2rem);
    max-width: 56ch;
}

/* A heading the artwork does not show, kept for the screen-reader outline.
   Clipped rather than `display:none` — a hidden heading is skipped by
   assistive technology, and then the section it labels has no name. Type
   copy into the matching setting and the heading becomes visible again. */
.nuh-h2--quiet {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- Buttons ---------------------------------------------------- */
.nuh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 1.8rem;
    min-height: 4rem;
    border-radius: var(--nuh-btn-radius, 12px);
    font-family: var(--nuh-font-head, 'Poppins', sans-serif);
    font-weight: 700;
    font-size: 1.08rem;
    line-height: 1.2;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    /* position + overflow carry the ::after sheen below; the focus outline
       is drawn outside the box and is not clipped by the overflow. */
    position: relative;
    overflow: hidden;
    transition: transform 0.16s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.nuh-btn:hover { transform: translateY(-2px); }
.nuh-btn:focus-visible { outline: 3px solid var(--nuh-blue); outline-offset: 3px; }

/* The sheen that sweeps across a button on hover. An overlay, so the
   gradient fills underneath stay untouched; on the white ghost button
   white-on-white simply never shows. It parks off the left edge and
   crosses only when invited — no idle motion. */
.nuh-btn::after {
    content: "";
    position: absolute;
    top: -10%;
    bottom: -10%;
    left: -45%;
    width: 36%;
    transform: skewX(-18deg) translateX(0);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.38) 50%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    transition: transform 0.55s ease;
}
.nuh-btn:hover::after,
.nuh-btn:focus-visible::after { transform: skewX(-18deg) translateX(460%); }

.nuh-btn--orange {
    background: linear-gradient(180deg, #ff9c47 0%, var(--nuh-orange) 28%, var(--nuh-orange-ink) 100%);
    color: #fff;
    box-shadow: 0 11px 22px rgba(194, 83, 10, 0.26), inset 0 1px 0 rgba(255,255,255,0.3);
}
.nuh-btn--orange:hover { box-shadow: 0 15px 30px rgba(194, 83, 10, 0.36), inset 0 1px 0 rgba(255,255,255,0.4); }

.nuh-btn--blue {
    background: linear-gradient(180deg, #71a5e4 0%, var(--nuh-blue-soft) 30%, var(--nuh-blue) 100%);
    color: #fff;
    box-shadow: 0 11px 22px rgba(20, 57, 110, 0.22), inset 0 1px 0 rgba(255,255,255,0.2);
}
.nuh-btn--blue:hover { box-shadow: 0 15px 30px rgba(20, 57, 110, 0.32), inset 0 1px 0 rgba(255,255,255,0.25); }

.nuh-btn--ghost {
    background: #fff;
    color: var(--nuh-blue-deep);
    border: 2px solid var(--nuh-line);
}
.nuh-btn--ghost:hover { border-color: var(--nuh-blue-soft); }

/* --- Hero ------------------------------------------------------- */
.nuh-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(2.6rem, 6vw, 4.6rem) 0 clamp(3rem, 7vw, 5.4rem);
    min-height: clamp(400px, 33vw, 560px);
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.12) 100%);
}
.nuh-hero > .nuh-wrap { width: min(1180px, 100% - 2.4rem); }
/* The illustrated backdrop. Absolutely positioned and sliced so it fills the
   hero at any height, with `isolation` creating a stacking context so it can
   sit behind the copy without escaping the section. */
/* The scene is drawn at roughly 2.8:1. Left at the height the copy alone
   needs, the hero came out near 4:1 and `slice` cropped the sky away, leaving
   a strip of grass through the middle of the headline. This gives the artwork
   its aspect back; the content stays vertically centred inside it. */
.nuh-hero--scenic {
    isolation: isolate;
    min-height: clamp(360px, 34vw, 520px);
    display: grid;
    align-items: center;
}
.nuh-hero--scenic .nuh-scene {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    display: block;
}
/* Navy headline over a painted sky needs a floor under it. A soft white wash
   behind the copy column only — the artwork's own text sits on pale sky, and
   this keeps that true however dark the uploaded scene ever gets. Fades out
   to the right so it never reads as a panel with an edge. */
.nuh-hero--scenic .nuh-hero__copy {
    position: relative;
}
.nuh-hero--scenic .nuh-hero__copy::before {
    content: '';
    position: absolute;
    inset: -8% -14% -10% -34%;
    z-index: -1;
    background: radial-gradient(60% 70% at 38% 50%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 72%);
    pointer-events: none;
}

.nuh-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.98fr);
    gap: clamp(1.4rem, 3vw, 2.6rem);
    align-items: center;
}
/* Grid and flex children default to `min-width: auto`, which is their
   MIN-CONTENT width — for a column containing "NadarUnityHub" set at
   46px that is about 345px, so the track refused to shrink below it and
   pushed the hero past a 320px viewport. The columns are already
   `minmax(0, …)`, but the children need telling too. */
.nuh-hero__inner > * { min-width: 0; }
.nuh-hero__title {
    font-family: var(--nuh-font-head, 'Poppins', 'Baloo 2', sans-serif);
    font-size: clamp(2.3rem, 4.8vw, 4.1rem);
    line-height: 0.94;
    color: var(--nuh-blue-deep);
    margin: 0 0 0.8rem;
    letter-spacing: -0.04em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 16px 26px rgba(27, 86, 164, 0.08);
    /* "NadarUnityHub" is one unbreakable 13-character word at display
       size. On a 320px phone — and especially with the accessibility
       text scale turned up — there is no space it can break at, so
       without this it simply ran off the side. break-word only breaks
       when a word cannot fit on a line of its own, so ordinary headlines
       are untouched. */
    overflow-wrap: break-word;
}
.nuh-hero__title .nuh-mark-a { color: var(--nuh-orange-ink); }
.nuh-hero__title .nuh-mark-b { color: var(--nuh-blue); }
.nuh-hero__lede {
    font-size: clamp(1.02rem, 1.9vw, 1.28rem);
    font-weight: 600;
    color: var(--nuh-blue-deep);
    margin: 0 0 1.6rem;
    max-width: 34rem;
    line-height: 1.35;
}
/* The two hero calls to action.
   auto-fit + `minmax(min(100%, 13rem), 1fr)` rather than a fixed
   `repeat(2, ...)`: at 320px a hard two-up gave each button 134px of box
   and 76px of usable width for labels needing 166px and 217px, so
   "Become a Member" broke across three lines and "Create Your Community"
   was clipped outright by the sheen's `overflow: hidden`. The `min(100%,
   …)` term is what lets a track shrink below its own minimum when the
   container is narrower than it — without it auto-fit still refuses to go
   under 13rem and overflows instead. One row on a phone, two side by side
   from roughly 480px up. */
.nuh-hero__actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 0.85rem;
    max-width: 42rem;
}
.nuh-hero__welcome { margin: 1.1rem 0 0; color: var(--nuh-ink-muted); font-weight: 600; }

/* Artwork frame. Holds either an uploaded illustration or the built-in
   motif, at the same aspect either way so the hero does not reflow
   when one is swapped for the other. */
.nuh-hero__art {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--nuh-radius);
    overflow: hidden;
    background: linear-gradient(160deg, #fdfefe 0%, #e6f2fc 60%, #d6e9f9 100%);
    box-shadow: var(--nuh-shadow-md);
}
.nuh-hero__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.nuh-hero__art svg { width: 100%; height: 100%; display: block; }

/* The drawn composition is two overlapping drawings, not one filling a
   frame: the country behind, the devices in front and low-right, as in the
   artwork. So the framed card above is undone here — an UPLOADED image keeps
   it, because a photograph needs the frame and the drawings do not. */
.nuh-hero__art--drawn {
    aspect-ratio: auto;
    background: none;
    box-shadow: none;
    overflow: visible;
}
.nuh-hero__art--drawn::before {
   content: "";
   position: absolute;
   inset: 8% 9% 18% 8%;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(244, 123, 32, 0.18) 24%, rgba(255,255,255,0) 72%);
   z-index: -1;
   pointer-events: none;
}
.nuh-hero__art--drawn svg { width: auto; height: auto; }
/* The map is portrait and the tallest thing in the hero, so it sets the row
   height — and with it the gap between the buttons and the section below.
   Keep it modest: the devices are the subject, the country is the setting. */
.nuh-hero__art--drawn .nuh-map {
   width: 44%;
   max-width: 240px;
   display: block;
   filter: drop-shadow(0 10px 22px rgba(20, 57, 110, 0.18));
   will-change: transform;
   animation: nuh-float-map 7s ease-in-out infinite;
}
.nuh-hero__art--drawn .nuh-devices {
   position: absolute;
   right: 0;
   bottom: 4%;
   width: 78%;
   max-width: 410px;
   filter: drop-shadow(0 16px 30px rgba(20, 57, 110, 0.22));
   will-change: transform;
   animation: nuh-float-device 8s ease-in-out infinite alternate;
}
@keyframes nuh-float-map {
   0%, 100% { transform: translateY(0) rotate(-1deg); }
   50% { transform: translateY(-8px) rotate(1deg); }
}
@keyframes nuh-float-device {
   0%, 100% { transform: translateY(0) rotate(0deg); }
   50% { transform: translateY(-10px) rotate(1deg); }
}

/* The pins in the built-in motif breathe gently. Motion is small and
   opt-out — see the reduced-motion block at the foot of this file. */
.nuh-pin { transform-box: fill-box; transform-origin: center bottom; animation: nuh-pin-bob 3.4s ease-in-out infinite; }
.nuh-pin:nth-of-type(2n) { animation-delay: -1.1s; }
.nuh-pin:nth-of-type(3n) { animation-delay: -2.2s; }
@keyframes nuh-pin-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* --- Scene life ---------------------------------------------------
   The painted backdrop breathes: clouds drift, the birds glide, the
   water glints and the sun's halo swells. Every one of these classes
   lives on presentation SVG (nuh-art.php) and is pure decoration, so
   the whole set is switched off in one line under reduced motion at
   the foot of this file.

   The clouds and glints stagger themselves with negative inline
   animation-delays, so the set never pulses in unison. */
.nuh-cloud { animation: nuh-cloud-drift 16s ease-in-out infinite alternate; }
@keyframes nuh-cloud-drift {
    from { transform: translateX(-14px); }
    to   { transform: translateX(18px); }
}
.nuh-birds { animation: nuh-birds-glide 22s ease-in-out infinite; }
@keyframes nuh-birds-glide {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-70px, -12px); }
}
.nuh-glint { opacity: 0.12; animation: nuh-glint-shimmer 5.5s ease-in-out infinite; }
@keyframes nuh-glint-shimmer {
    0%, 100% { opacity: 0.12; }
    50%      { opacity: 0.55; }
}
.nuh-sun__halo {
    transform-box: fill-box;
    transform-origin: center;
    animation: nuh-sun-breathe 8s ease-in-out infinite;
}
@keyframes nuh-sun-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.12); }
}
.nuh-balloon { animation: nuh-balloon-float 11s ease-in-out infinite; }
@keyframes nuh-balloon-float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33%      { transform: translate(6px, -14px) rotate(1.5deg); }
    66%      { transform: translate(-6px, -6px) rotate(-1.5deg); }
}
/* Stars in the closing band. They rest dim and blink up, staggered by
   inline delays, so the night reads as alive rather than strobing. */
.nuh-star { opacity: 0.3; animation: nuh-star-twinkle 4.5s ease-in-out infinite; }
@keyframes nuh-star-twinkle {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 0.95; }
}

/* Parallax: unityhub.js slides these a few pixels against the scroll,
   as `translateY(...) scale(1.08)` inline. The scale is part of the
   contract — the slice-cropped drawing needs spare bleed so the slide
   never exposes the section edge. Gated on js-on so a page without the
   script keeps exactly the framing it has today. */
.js-on .nuh-hero--scenic > .nuh-scene,
.js-on .nuh-reach__scene svg { will-change: transform; }

/* --- Mid-page sky -------------------------------------------------
   One ambient layer behind BOTH card sections (paths and tools) —
   see nuh_art_mid_sky() for why it exists. The wrapper only gives the
   absolutely-positioned sky its bounds; the sections stack above it.

   The band paints its own gradient rather than borrowing .page's: the
   wave dividers at either end are filled with these exact two colours
   (#e4f2fc at the top, #d8ecfa at the bottom — see the template), and
   the seams only disappear if band and wave agree to the digit. */
.nuh-mid {
    position: relative;
    background: linear-gradient(180deg, #e4f2fc 0%, #d8ecfa 100%);
}
.nuh-mid__sky {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.nuh-mid__sky svg { width: 100%; height: 100%; display: block; }
.nuh-mid .nuh-section { position: relative; z-index: 1; }

/* --- Wave dividers ------------------------------------------------
   The hand-offs between backdrops (hero→mid, mid→reach, reach→ribbon)
   were straight cuts; each is now the next section's ground lapping
   over its neighbour, drawn by nuh_art_wave(). A --foot wave sits on
   its section's bottom edge, a --head wave hangs from the top; the
   1px overshoot swallows sub-pixel seams at fractional zoom levels. */
.nuh-wave {
    position: absolute;
    left: 0;
    right: 0;
    height: clamp(28px, 4.4vw, 62px);
    pointer-events: none;
    z-index: 1;
}
.nuh-wave--foot { bottom: -1px; }
.nuh-wave--head { top: -1px; }
.nuh-wave__svg { width: 100%; height: 100%; display: block; }
.nuh-wave__svg--flip { transform: scaleY(-1); }

/* --- Two pathways ----------------------------------------------- */
/* `minmax(min(100%, 300px), …)`, not `minmax(300px, …)`. auto-fit drops the
   column COUNT but never shrinks a track below its stated minimum, so inside
   .nuh-wrap — 281.6px at a 320px viewport — a bare 300px track overflowed by
   18px and was clipped by the page's overflow-x guard, cutting the card's
   right border off and throwing its centred button visibly off-axis. The
   min() lets the track give way when the container is the smaller of the two.
   Applied to every auto-fit grid on this page for the same reason. */
.nuh-paths {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(1rem, 2.5vw, 1.6rem);
}
.nuh-path {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(241,248,255,0.98) 100%);
    border: 1px solid var(--nuh-line);
    border-radius: calc(var(--nuh-radius) + 4px);
    box-shadow: 0 16px 34px rgba(20, 57, 110, 0.08), inset 0 1px 0 rgba(255,255,255,0.8);
    overflow: hidden;
    text-align: center;
    transition: transform 0.18s ease, box-shadow 0.22s ease;
}
.nuh-path:hover { transform: translateY(-4px); box-shadow: 0 20px 42px rgba(20, 57, 110, 0.12), inset 0 1px 0 rgba(255,255,255,0.9); }
.nuh-path__head { padding: 1.5rem 1.5rem 1.1rem; }
.nuh-path__head h3 {
    font-family: var(--nuh-font-head, 'Poppins', sans-serif);
    font-size: 1.5rem;
    color: var(--nuh-blue-deep);
    margin: 0 0 0.25rem;
    letter-spacing: -0.03em;
}
.nuh-path__head p { margin: 0; color: var(--nuh-ink-muted); font-size: 0.96rem; }
.nuh-path__art {
    /* Edge to edge, as in the artwork, where the illustration is the card
       rather than a picture inset into one. */
    margin: 0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: linear-gradient(150deg, #eaf4fd, #d4e8f8);
}
.nuh-path__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nuh-path__art svg { width: 100%; height: 100%; display: block; }
/* The button overlaps the foot of the illustration, as in the artwork —
   it sits ON the picture rather than in a band below it. The negative
   margin is what pulls it up; the stacking context keeps it above. */
.nuh-path__foot {
    padding: 0 1.2rem 1.3rem;
    margin-top: -1.5rem;
    position: relative;
    z-index: 1;
}
.nuh-path__foot .nuh-btn {
    width: min(100%, 260px);
    box-shadow: 0 8px 18px rgba(20, 57, 110, 0.28);
}

/* --- Management tools ------------------------------------------- */
.nuh-tools {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: clamp(1rem, 2.5vw, 1.4rem);
}
.nuh-tool {
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(243,250,255,0.98) 100%);
    border: 1px solid var(--nuh-line);
    border-radius: calc(var(--nuh-radius) + 4px);
    box-shadow: 0 14px 30px rgba(20, 57, 110, 0.08), inset 0 1px 0 rgba(255,255,255,0.9);
    padding: 1.5rem 1.2rem 1.2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    transition: transform 0.18s ease, box-shadow 0.22s ease;
}
.nuh-tool:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(20, 57, 110, 0.12), inset 0 1px 0 rgba(255,255,255,0.92); }
/* The artwork gives each tile a full-width illustration rather than an icon
   tile. Fixed aspect so the three cards line up whether a card is showing a
   drawing or an uploaded photograph. */
.nuh-tool__art {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 20 / 11;
    /* Sits under the heading now, not over it — see the note in the template. */
    margin: 0.45rem 0 0.2rem;
    background: linear-gradient(150deg, #eaf4fd, #d9eaf9);
}
.nuh-tool__art svg,
.nuh-tool__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nuh-tool h3 {
    font-family: var(--nuh-font-head, 'Poppins', sans-serif);
    font-size: 1.26rem;
    color: var(--nuh-blue-deep);
    margin: 0;
    letter-spacing: -0.02em;
}
.nuh-tool p { margin: 0; color: var(--nuh-ink-muted); font-size: 0.92rem; }
.nuh-tool__link {
    margin-top: auto;
    padding-top: 0.7rem;
    font-weight: 700;
    color: var(--nuh-blue);
    text-decoration: none;
}
.nuh-tool__link:hover { color: var(--nuh-orange-ink); text-decoration: underline; }
/* A capability the platform describes but has no screen for yet. Said
   plainly rather than dressed as a dead link. */
.nuh-tool__soon {
    margin-top: auto;
    padding-top: 0.7rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--nuh-ink-muted);
}

/* --- Reach band -------------------------------------------------- */
.nuh-reach {
    position: relative;
    overflow: hidden;
    /* No hairline borders any more: the mid sky's wave laps into the top of
       this band and the ribbon's wave takes the bottom, so a straight rule
       at either edge would just re-draw the seam the waves remove. The top
       padding clears the head wave's tallest point. */
    padding-top: clamp(2.6rem, 5.2vw, 4.2rem);
}
/* The scene sits behind the content, flipped so its skyline rises on the
   opposite side from the hero's — the same landscape seen from the other end
   of the page rather than the identical picture printed twice. */
.nuh-reach__scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    transform: scaleX(-1);
    /* Held back so navy text and the orange figures stay the subject. */
    opacity: 0.5;
}
.nuh-reach__scene svg { width: 100%; height: 100%; display: block; }
.nuh-reach > .nuh-reach__inner { position: relative; z-index: 1; }
.nuh-reach__inner {
   display: grid;
   grid-template-columns: minmax(0, 0.93fr) minmax(0, 1.07fr);
   gap: clamp(1.6rem, 4vw, 3.2rem);
   align-items: center;
}
.nuh-reach__art { border-radius: calc(var(--nuh-radius) + 4px); overflow: hidden; }
.nuh-reach__art svg { width: 100%; height: auto; display: block; }
.nuh-reach__art img { width: 100%; height: auto; display: block; border-radius: calc(var(--nuh-radius) + 4px); }
.nuh-reach__art .nuh-map {
   width: min(100%, 360px);
   margin-inline: auto;
   filter: drop-shadow(0 18px 34px rgba(20, 57, 110, 0.16));
}

/* Three figures now, not two — hubs, members and states. The gap is tighter
   than it was so all three sit on one row at desktop width; at two-and-one
   the divider on the wrapped item read as a stray vertical line. */
.nuh-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(0.8rem, 1.8vw, 1.5rem);
    margin: 1.2rem 0 1.4rem;
}
/* Icon on the left, figure and caption stacked beside it — the artwork's
   arrangement. The grid areas keep the icon vertically centred against the
   pair however long the caption wraps. */
.nuh-stat {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: "icon value" "icon label";
    align-items: center;
    gap: 0 0.7rem;
    text-align: left;
}
.nuh-stat + .nuh-stat {
    border-left: 2px solid var(--nuh-line);
    padding-left: clamp(0.8rem, 1.8vw, 1.5rem);
}
.nuh-stat__icon { grid-area: icon; width: 38px; height: 38px; color: var(--nuh-orange); }
.nuh-stat__icon--blue { color: var(--nuh-blue); }
.nuh-stat__icon svg { width: 100%; height: 100%; display: block; }
.nuh-stat__value {
    grid-area: value;
    font-family: var(--nuh-font-head, 'Poppins', sans-serif);
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 700;
    line-height: 1;
    color: var(--nuh-blue-deep);
    letter-spacing: -0.05em;
}
.nuh-stat__label {
    grid-area: label;
    margin-top: 0.2rem;
    font-weight: 700;
    color: var(--nuh-blue-deep);
    font-size: 0.98rem;
}
.nuh-stat:first-child .nuh-stat__label { color: var(--nuh-orange-ink); }
/* --- Live map pins ------------------------------------------------
   Only the reach map carries these. The pin's own <title> is the tooltip,
   so there is no JS and nothing to position. */
.nuh-map--live .nuh-datapin { transition: filter 0.18s ease; }
.nuh-map--live .nuh-datapin--link { cursor: pointer; }

/* The network between hubs. Drawn under the pins, and quiet — it is there
   to say "these places are connected", not to be read line by line. It
   drifts slowly so the map reads as alive rather than printed. */
.nuh-map__web { pointer-events: none; }
.nuh-map__web line { animation: nuh-web-flow 6s linear infinite; }
@keyframes nuh-web-flow {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -22; }
}

/* --- The hover / focus card ---------------------------------------
   Drawn by assets/js/nuh-map.js into the map's wrapper. Absolutely
   positioned over it, which is why the wrapper needs a position; both
   places the live map appears get one below. */
.nuh-reach__art,
.hub-map__art { position: relative; }

.nuh-mapcard {
    position: absolute;
    z-index: 20;
    min-width: 9rem;
    max-width: 14rem;
    padding: 0.55rem 0.75rem;
    background: #fff;
    border: 1px solid var(--nuh-line);
    border-radius: 10px;
    box-shadow: var(--nuh-shadow-md);
    /* The card follows the pointer between pins; it must never eat the
       hover it is reacting to. */
    pointer-events: none;
    font-size: 0.85rem;
    line-height: 1.35;
}
.nuh-mapcard strong { display: block; color: var(--nuh-blue-deep); }
.nuh-mapcard span { display: block; color: var(--nuh-ink-muted); font-size: 0.8rem; }
.nuh-mapcard em {
    display: block;
    margin-top: 0.2rem;
    font-style: normal;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--nuh-orange-ink);
}
/* A little tail, so the card reads as belonging to the pin under it. */
.nuh-mapcard::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 9px;
    height: 9px;
    margin-left: -4.5px;
    background: #fff;
    border-right: 1px solid var(--nuh-line);
    border-bottom: 1px solid var(--nuh-line);
    transform: rotate(45deg);
}

/* Keyboard reachability for the pins that carry no link. */
.nuh-map--live .nuh-datapin:focus-visible {
    outline: 3px solid var(--nuh-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .nuh-map__web line { animation: none; }
}
.nuh-map--live .nuh-datapin--link:hover .nuh-pin,
.nuh-map--live .nuh-datapin--link:focus-visible .nuh-pin {
    /* The pin is already inside two transformed groups — one positioning it,
       one running the bob — so growing it here with a third transform would
       fight the keyframes and drop it to the map origin mid-hover. Brightness
       and a drop shadow give the same "this one is live" feedback and compose
       with the animation instead of replacing it. */
    filter: drop-shadow(0 3px 6px rgba(20, 57, 110, 0.45)) brightness(1.12);
}
.nuh-map--live .nuh-datapin--link:focus-visible {
    outline: 3px solid var(--nuh-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- The pins as text --------------------------------------------- */
.nuh-places {
    list-style: none;
    margin: 0 0 1.2rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}
.nuh-place > a,
.nuh-place__flat {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.32rem 0.5rem 0.32rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--nuh-line);
    background: #fff;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--nuh-blue-deep);
    text-decoration: none;
}
.nuh-place > a:hover,
.nuh-place > a:focus-visible {
    border-color: var(--nuh-orange);
    color: var(--nuh-orange-ink);
}
/* The count sits in its own chip. Orange where there is a hub to open, plain
   blue where the figure is members with no hub there yet — the same two
   colours the pins use, so the list and the map read as one thing. */
.nuh-place > a span,
.nuh-place__flat span {
    display: inline-grid;
    place-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: rgba(27, 86, 164, 0.12);
    color: var(--nuh-blue);
    font-size: 0.78rem;
    font-weight: 700;
}
.nuh-place--hub > a span {
    background: var(--nuh-orange-ink);
    color: #fff;
}
.nuh-place--more {
    align-self: center;
    font-size: 0.82rem;
    color: var(--nuh-ink-muted);
}

.nuh-reach__cta { text-align: center; }

/* --- Hub finder --------------------------------------------------- */
.nuh-finder {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin: 0 auto;
    max-width: 30rem;
}
.nuh-finder__input {
    flex: 1 1 14rem;
    min-width: 0;
    padding: 0.8rem 1rem;
    border: 2px solid var(--nuh-line);
    border-radius: 10px;
    background: #fff;
    color: var(--nuh-ink);
    font: inherit;
    font-size: 1rem;
}
.nuh-finder__input::placeholder { color: #8aa2b8; }
.nuh-finder__input:focus {
    outline: none;
    border-color: var(--nuh-orange);
    box-shadow: 0 0 0 3px rgba(244, 123, 32, 0.18);
}
.nuh-finder .nuh-btn { flex: 0 0 auto; }
.nuh-finder__hint {
    text-align: center;
    margin: 0.7rem 0 0;
    font-size: 0.88rem;
}
.nuh-finder__hint a { color: var(--nuh-blue); font-weight: 600; text-decoration: none; }
.nuh-finder__hint a:hover { color: var(--nuh-orange-ink); text-decoration: underline; }

/* --- Finder suggestions -------------------------------------------
   The type-ahead panel unityhub.js fills from hubs/suggest.php. It hangs
   off the form (which is the positioned ancestor) so it tracks the input
   row at every width; z-index lifts it over the reach band's content. */
.nuh-finder { position: relative; }
.nuh-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    background: #fff;
    border: 1px solid var(--nuh-line);
    border-radius: 12px;
    box-shadow: var(--nuh-shadow-lg);
    overflow: hidden;
    text-align: left;
}
.nuh-suggest__list { list-style: none; margin: 0; padding: 0.3rem; }
.nuh-suggest__list a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name seats" "where seats";
    gap: 0 0.6rem;
    align-items: center;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    text-decoration: none;
}
.nuh-suggest__list a:hover,
.nuh-suggest__list a:focus-visible { background: rgba(244, 123, 32, 0.09); }
.nuh-suggest__list a:focus-visible { outline: 2px solid var(--nuh-blue); outline-offset: -2px; }
.nuh-suggest__name {
    grid-area: name;
    font-weight: 700;
    color: var(--nuh-blue-deep);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nuh-suggest__where { grid-area: where; font-size: 0.8rem; color: var(--nuh-ink-muted); }
.nuh-suggest__seats {
    grid-area: seats;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(27, 86, 164, 0.1);
    color: var(--nuh-blue);
    font-size: 0.78rem;
    font-weight: 700;
}
.nuh-suggest__seats.is-full { background: rgba(82, 112, 140, 0.14); color: var(--nuh-ink-muted); }
.nuh-suggest__all,
.nuh-suggest__none {
    display: block;
    margin: 0;
    padding: 0.55rem 0.95rem;
    border-top: 1px solid var(--nuh-line);
    font-size: 0.85rem;
    color: var(--nuh-ink-muted);
}
.nuh-suggest__all { font-weight: 700; color: var(--nuh-blue); text-decoration: none; }
.nuh-suggest__all:hover, .nuh-suggest__all:focus-visible { color: var(--nuh-orange-ink); }
.nuh-suggest__none { border-top: 0; }
.nuh-suggest__none a { color: var(--nuh-blue); font-weight: 700; }

/* --- The join pathway ---------------------------------------------
   Three guided steps, walked left to right on a desktop and top to
   bottom on a phone. The dashed connector is drawn on the list items
   themselves (::before), so it exists only BETWEEN steps and never
   dangles past the first or last. */
.nuh-steps {
    list-style: none;
    counter-reset: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 1.6rem);
}
.nuh-step {
    position: relative;
    text-align: center;
    padding: 1.4rem 1.2rem 1.2rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(243,250,255,0.96) 100%);
    border: 1px solid var(--nuh-line);
    border-radius: calc(var(--nuh-radius) + 4px);
    box-shadow: 0 14px 30px rgba(20, 57, 110, 0.08), inset 0 1px 0 rgba(255,255,255,0.9);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
/* The connector: a dashed reach back toward the previous step. Borders
   cannot dash a single line this way, so it is a repeating gradient. */
.nuh-step + .nuh-step::before {
    content: "";
    position: absolute;
    top: 2.6rem;
    right: 100%;
    width: clamp(1rem, 2.5vw, 1.6rem);
    height: 3px;
    background: repeating-linear-gradient(90deg,
        var(--nuh-blue-soft) 0 7px, transparent 7px 13px);
    opacity: 0.7;
}
.nuh-step__num {
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    margin: 0 auto 0.2rem;
    border-radius: 50%;
    font-family: var(--nuh-font-head, 'Poppins', sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(180deg, #ff9c47 0%, var(--nuh-orange) 35%, var(--nuh-orange-ink) 100%);
    box-shadow: 0 8px 18px rgba(194, 83, 10, 0.3), inset 0 1px 0 rgba(255,255,255,0.35);
}
.nuh-step__num--blue {
    background: linear-gradient(180deg, #71a5e4 0%, var(--nuh-blue-soft) 35%, var(--nuh-blue) 100%);
    box-shadow: 0 8px 18px rgba(20, 57, 110, 0.28), inset 0 1px 0 rgba(255,255,255,0.3);
}
.nuh-step h3 {
    font-family: var(--nuh-font-head, 'Poppins', sans-serif);
    font-size: 1.15rem;
    color: var(--nuh-blue-deep);
    margin: 0;
    letter-spacing: -0.02em;
}
.nuh-step p { margin: 0; color: var(--nuh-ink-muted); font-size: 0.92rem; }
.nuh-step__link {
    margin-top: auto;
    padding-top: 0.5rem;
    font-weight: 700;
    color: var(--nuh-blue);
    text-decoration: none;
}
.nuh-step__link:hover { color: var(--nuh-orange-ink); text-decoration: underline; }

/* --- What's happening ---------------------------------------------
   The landing's live half: upcoming events beside the latest news.
   Two matched columns that collapse to one when only one kind of
   content exists (--one) or the screen is narrow. */
.nuh-live__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 1.6rem);
    align-items: start;
}
.nuh-live__grid--one {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
    margin-inline: auto;
}
.nuh-live__col {
    display: flex;
    flex-direction: column;
    min-width: 0;   /* a grid item defaults to min-width:auto, and the
                       nowrap event titles inside were pushing the whole
                       track wider than a phone screen */
    gap: 0.6rem;
    padding: 1.3rem 1.2rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(243,250,255,0.97) 100%);
    border: 1px solid var(--nuh-line);
    border-radius: calc(var(--nuh-radius) + 4px);
    box-shadow: 0 14px 30px rgba(20, 57, 110, 0.08), inset 0 1px 0 rgba(255,255,255,0.9);
}
.nuh-live__title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--nuh-font-head, 'Poppins', sans-serif);
    font-size: 1.15rem;
    color: var(--nuh-blue-deep);
    margin: 0 0 0.2rem;
}
.nuh-live__title .icon { width: 1.1rem; height: 1.1rem; color: var(--nuh-orange-ink); }
.nuh-live__all {
    margin-top: auto;
    padding-top: 0.5rem;
    align-self: flex-start;
    font-weight: 700;
    color: var(--nuh-blue);
    text-decoration: none;
}
.nuh-live__all:hover { color: var(--nuh-orange-ink); text-decoration: underline; }

/* An event row: a tear-off-calendar date beside the what and when. */
.nuh-event {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.55rem 0.6rem;
    border-radius: 10px;
    text-decoration: none;
    transition: background-color 0.16s ease;
}
.nuh-event:hover, .nuh-event:focus-visible { background: rgba(27, 86, 164, 0.07); }
.nuh-event__date {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    width: 3rem;
    border-radius: 9px;
    overflow: hidden;
    text-align: center;
    border: 1px solid var(--nuh-line);
    background: #fff;
    box-shadow: var(--nuh-shadow-sm);
}
.nuh-event__day {
    font-family: var(--nuh-font-head, 'Poppins', sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--nuh-blue-deep);
}
.nuh-event__mon {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(180deg, var(--nuh-orange) 0%, var(--nuh-orange-ink) 100%);
    padding: 0.14rem 0;
}
.nuh-event__body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.nuh-event__body strong {
    color: var(--nuh-blue-deep);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* On a phone the title wraps to two clamped lines instead: nowrap text is
   min-content pressure a 320px layout cannot absorb, and an ellipsis at
   twelve characters tells nobody what the event is. */
@media (max-width: 640px) {
    .nuh-event__body strong {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}
.nuh-event__body span { font-size: 0.84rem; color: var(--nuh-ink-muted); }

/* A news row: cover thumbnail, category, headline, date. */
.nuh-news {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem 0.6rem;
    border-radius: 10px;
    text-decoration: none;
    transition: background-color 0.16s ease;
}
.nuh-news:hover, .nuh-news:focus-visible { background: rgba(244, 123, 32, 0.08); }
.nuh-news__thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--nuh-line);
}
.nuh-news__body { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.nuh-news__cat {
    align-self: flex-start;
    padding: 0.06rem 0.5rem;
    border-radius: 999px;
    background: rgba(244, 123, 32, 0.13);
    color: var(--nuh-orange-ink);
    font-size: 0.72rem;
    font-weight: 700;
}
.nuh-news__body strong {
    color: var(--nuh-blue-deep);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nuh-news__date { font-size: 0.8rem; color: var(--nuh-ink-muted); }

/* ===================================================================
   The expanded homepage — module tiles, impact band, hub explorer,
   business promotion strip and search. See includes/landing-sections.php
   for why every figure here is counted rather than typed.
   =================================================================== */

/* --- Business promotion strip -------------------------------------- */
.nuh-promo {
    background: linear-gradient(135deg, var(--nuh-blue-deep) 0%, var(--nuh-blue) 100%);
    color: #fff;
    padding: clamp(1.4rem, 3vw, 2.2rem) 0;
}
.nuh-promo__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: clamp(1rem, 2.5vw, 1.8rem);
    align-items: center;
}
.nuh-promo__flag {
    display: inline-block;
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
/* Scoped under body.nuh-page, and that is load-bearing rather than tidy.
   The sheet's own `body.nuh-page h1, h2, h3, h4 { color: blue-deep }`
   further down has the SAME specificity as a bare `.nuh-promo__lead h2`
   and, being later, wins — which painted this heading navy on a navy
   band and made it invisible. Every heading and link on the two dark
   bands below therefore carries the body scope too. */
body.nuh-page .nuh-promo__lead h2 {
    font-family: var(--nuh-font-head, 'Poppins', sans-serif);
    font-size: clamp(1.3rem, 3vw, 1.9rem);
    color: #fff;
    margin: 0.5rem 0 0;
    line-height: 1.15;
}
.nuh-promo__feats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr));
    gap: 0.9rem;
    /* Spans the middle of the grid on a wide screen; on a narrow one it
       simply becomes another stacked block. */
    grid-column: span 1;
}
.nuh-promo__feats li { text-align: center; font-size: 0.8rem; }
.nuh-promo__feats strong { display: block; font-size: 0.85rem; }
.nuh-promo__feats span { color: rgba(255, 255, 255, 0.75); }
.nuh-promo__icon {
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: 0.35rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
}
.nuh-promo__icon .icon { width: 1.1rem; height: 1.1rem; color: #fff; }
.nuh-promo__cta {
    padding: 1.1rem 1.2rem;
    border-radius: var(--nuh-radius);
    background: linear-gradient(160deg, #1f9d63, #157a4b);
    text-align: center;
}
body.nuh-page .nuh-promo__cta h3 {
    font-family: var(--nuh-font-head, 'Poppins', sans-serif);
    font-size: 1.15rem;
    margin: 0 0 0.2rem;
    color: #fff;
}
.nuh-promo__cta p { margin: 0 0 0.8rem; font-size: 0.85rem; color: rgba(255,255,255,0.9); }

/* --- Hero proof points ----------------------------------------------- */
.nuh-facts {
    list-style: none;
    margin: 1.2rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.8rem, 2.4vw, 1.8rem);
}
.nuh-facts li { display: flex; align-items: center; gap: 0.5rem; }
.nuh-facts__icon {
    display: grid; place-items: center;
    width: 2rem; height: 2rem; border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: var(--nuh-shadow-sm);
    flex: 0 0 auto;
}
.nuh-facts__icon .icon { width: 0.95rem; height: 0.95rem; color: var(--nuh-orange-ink); }
.nuh-facts strong { display: block; color: var(--nuh-blue-deep); font-size: 0.95rem; line-height: 1.2; }
.nuh-facts li > span:last-child > span { font-size: 0.78rem; color: var(--nuh-ink-muted); }

/* --- Hero stat band ---------------------------------------------------
   The reference design's counted row under the buttons: a pill per live
   figure, each one a link to the screen that proves it.

   A flex row that WRAPS rather than a fixed four-track grid. The number of
   pills is not four — it is however many of the figures are above zero, so
   the row has to look deliberate at two, three or four; and the hero copy
   column is only about half the page on a desktop, so four pills already
   want two lines there. Wrapping gives both for free, and on a phone the
   pills stack into a tidy column without a media query.

   Translucent white rather than solid: the hero sits on the illustrated
   sky, and an opaque strip across it would read as a panel bolted on top
   of the scene instead of part of it. */
.nuh-band {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    /* Tight enough that all four figures make ONE line inside the hero's
       copy column at 1440 — at the previous spacing the fourth wrapped
       alone under the other three, which reads as a mistake rather than a
       row. They still wrap when a longer label or a fifth figure needs it. */
    gap: 0.45rem;
    max-width: 42rem;
}
.nuh-band > li { min-width: 0; }
.nuh-band__pill {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem 0.45rem 0.45rem;
    border-radius: 999px;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--nuh-line);
    box-shadow: var(--nuh-shadow-sm);
    /* Each figure keeps the colour its icon wears, so the pill and the
       chip are one object rather than a grey pill with a coloured dot. */
    --nuh-band-ink: var(--nuh-orange-ink);
    transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.18s ease;
}
.nuh-band__pill:hover,
.nuh-band__pill:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--nuh-shadow-md);
    border-color: var(--nuh-band-ink);
}
.nuh-band__pill--members    { --nuh-band-ink: var(--nuh-blue); }
.nuh-band__pill--businesses { --nuh-band-ink: #1c7a45; }
.nuh-band__pill--events     { --nuh-band-ink: #8c2f56; }
.nuh-band__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--nuh-band-ink) 12%, transparent);
}
/* color-mix is recent. Older engines fall back to the flat tint below,
   which is the same idea at one opacity for every pill. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .nuh-band__icon { background: rgba(27, 86, 164, 0.1); }
}
.nuh-band__icon .icon { width: 1.05rem; height: 1.05rem; color: var(--nuh-band-ink); }
.nuh-band__body { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
body.nuh-page .nuh-band__n {
    font-family: var(--nuh-font-head, 'Poppins', sans-serif);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--nuh-blue-deep);
    /* The count-up rewrites this text every frame; a tabular figure stops
       the pill twitching wider and narrower as the digits change. */
    font-variant-numeric: tabular-nums;
}
body.nuh-page .nuh-band__l {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--nuh-ink-muted);
    white-space: nowrap;
}
/* A pill is a link, so it carries the 44px target the rest of the page
   promises on touch. */
@media (pointer: coarse) {
    .nuh-band__pill { min-height: 2.75rem; }
}
@media (max-width: 420px) {
    /* One per line at the narrow end: two 150px pills side by side put the
       label on two lines and the row stopped reading as figures. */
    .nuh-band { gap: 0.45rem; }
    .nuh-band > li { width: 100%; }
    .nuh-band__pill { width: 100%; }
}

/* --- Promotional offer card (hero) -----------------------------------
   Sits over the hero artwork on a wide screen and drops below it on a
   narrow one, where overlaying would bury the map. */
.nuh-offer {
    position: absolute;
    top: 0.5rem;
    right: 0;
    z-index: 3;
    width: min(13rem, 45%);
    padding: 0.9rem;
    text-align: center;
    background: #fff;
    border: 2px solid var(--nuh-orange);
    border-radius: var(--nuh-radius);
    box-shadow: var(--nuh-shadow-lg);
}
.nuh-offer__flag {
    display: block;
    margin: -1.5rem auto 0.5rem;
    width: fit-content;
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    background: #c62828;
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
body.nuh-page .nuh-offer__lead { display: block; color: var(--nuh-blue-deep); font-size: 0.85rem; }
.nuh-offer__value {
    display: block;
    font-family: var(--nuh-font-head, 'Poppins', sans-serif);
    font-size: clamp(1.6rem, 4vw, 2.3rem);
    font-weight: 700;
    line-height: 1;
    color: var(--nuh-orange-ink);
}
.nuh-offer__sub {
    display: block;
    margin: 0.3rem 0;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    background: var(--nuh-orange-ink);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}
.nuh-offer__until { display: block; margin-bottom: 0.5rem; font-size: 0.72rem; color: var(--nuh-ink-muted); }
@media (max-width: 860px) {
    .nuh-offer { position: static; width: auto; margin: 1rem 0 0; }
    .nuh-offer__flag { margin-top: 0; }
}

/* --- PHASE 1: hub section, two columns --------------------------------
   The offer card stands beside the explorer. Without an offer the grid is
   a single column, so the explorer never sits in a half-width gutter
   waiting for a card that is not coming. */
.nuh-explore__grid { display: grid; gap: clamp(1rem, 2.5vw, 1.6rem); }
.nuh-explore--split .nuh-explore__grid {
    grid-template-columns: minmax(min(100%, 210px), 0.32fr) minmax(0, 1fr);
    align-items: start;
}
.nuh-explore__main { min-width: 0; }
@media (max-width: 860px) {
    /* Stacked, the offer goes first — it is the louder message and the one
       the artwork leads with. */
    .nuh-explore--split .nuh-explore__grid { grid-template-columns: 1fr; }
}

/* --- Hub creation offer ----------------------------------------------- */
.nuh-hubcta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 1.2rem;
    border-radius: calc(var(--nuh-radius) + 2px);
    background: linear-gradient(135deg, #5b2ea6 0%, #7b3fd4 100%);
    color: #fff;
    text-align: left;
}
.nuh-hubcta__flag {
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}
body.nuh-page .nuh-hubcta strong {
    color: #fff;
    font-family: var(--nuh-font-head, 'Poppins', sans-serif);
    font-size: 1.25rem;
    line-height: 1.2;
}
.nuh-hubcta__badge {
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: #ffd15c;
    color: #4a2200;
    font-size: 0.78rem;
    font-weight: 700;
}
.nuh-hubcta__sub { font-size: 0.82rem; color: rgba(255, 255, 255, 0.85); }

/* --- Second business band ---------------------------------------------- */
/* The green is set by its LIGHTEST stop, not its darkest. The band used
   #157a4b -> #1f9d63, and white on that lighter end measures 3.46:1 —
   fine for the heading, which is large text, and a fail for the 0.92rem
   sub-line and the 0.78rem point labels sitting on the same gradient.
   #168250 is the lightest green that still clears 4.5:1 against white, so
   every size of text on this band passes rather than only the big one.
   If you brighten this, re-measure the light stop. */
.nuh-promo2 {
    background: linear-gradient(135deg, #0f5b38 0%, #168250 100%);
    color: #fff;
    padding: clamp(1.2rem, 3vw, 2rem) 0;
}
/* Four parts across: drawing, copy, the four points, the call to action.
   Grid rather than flex-wrap, so the points keep their own column instead
   of collapsing under the heading the moment the copy runs long. Falls to
   a single column below 900px, where four columns of anything is soup. */
.nuh-promo2__inner {
    display: grid;
    grid-template-columns: 8.5rem minmax(13rem, 1.3fr) minmax(14rem, 1.5fr) auto;
    align-items: center;
    gap: clamp(1rem, 2.6vw, 2rem);
}
@media (max-width: 1080px) {
    .nuh-promo2__inner { grid-template-columns: 7rem 1fr 1fr; }
    .nuh-promo2__cta { grid-column: 2 / -1; }
}
@media (max-width: 760px) {
    .nuh-promo2__inner { grid-template-columns: 1fr; text-align: center; }
    .nuh-promo2__cta { grid-column: auto; }
    .nuh-promo2__art { max-width: 9rem; margin: 0 auto; }
    .nuh-promo2__feats { justify-content: center; }
}
.nuh-promo2__art { min-width: 0; }
.nuh-megaphone { display: block; width: 100%; height: auto; }
body.nuh-page .nuh-promo2 h2 {
    color: #fff;
    font-family: var(--nuh-font-head, 'Poppins', sans-serif);
    font-size: clamp(1.2rem, 2.8vw, 1.7rem);
    margin: 0 0 0.2rem;
}
/* Opaque white, not 90%. Composited over the green, 0.9 alpha drops the
   effective contrast to 4.25:1 — under the line for text this size. The
   hierarchy against the heading comes from size and weight instead. */
.nuh-promo2 p { margin: 0; color: #fff; font-size: 0.92rem; }
/* The four points, each a circled icon over its label — the artwork's
   layout. Auto-fit rather than four fixed columns so three points share
   the space evenly instead of leaving a gap where a fourth would be. */
.nuh-promo2__feats {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    /* 5.4rem, not 6: at 6rem four columns needed 413px in a 402px track
       and the fourth point dropped to a second row on its own. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 5.4rem), 1fr));
    gap: 0.7rem 0.6rem;
}
.nuh-promo2__feats li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.25;
}
.nuh-promo2__ficon {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    /* Translucent white, so the badge reads on the green without needing a
       second brand colour that would fight the yellow button. */
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.32);
}
.nuh-promo2__feats .icon { width: 1.05rem; height: 1.05rem; color: #fff; }
.nuh-promo2__cta { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
/* Yellow, as the artwork has it: on a green band the site's orange button
   is too close in value to separate from the background, and this is the
   one thing in the band that must be found at a glance. */
body.nuh-page a.nuh-promo2__btn {
    background: #ffc632;
    border-color: #ffc632;
    color: #4a3200;
    font-weight: 700;
    white-space: nowrap;
}
body.nuh-page a.nuh-promo2__btn:hover { background: #ffd45c; border-color: #ffd45c; color: #4a3200; }
.nuh-promo2__note { font-size: 0.74rem; color: #fff; text-align: center; }

/* --- App panel ---------------------------------------------------------- */
/* The app panel is now its own column of .nuh-find__inner, with the drawn
   handset beside the copy. It keeps its card treatment because it is the
   one promotional thing in an otherwise functional section, and the border
   is what stops it reading as part of the search above it. */
.nuh-app {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
    align-items: center;
    gap: 0.8rem;
    padding: 1.1rem 1.2rem;
    background: var(--nuh-card);
    border: 1px solid var(--nuh-line);
    border-radius: var(--nuh-radius);
    box-shadow: var(--nuh-shadow-sm);
}
body.nuh-page .nuh-app strong {
    display: block;
    color: var(--nuh-blue-deep);
    font-family: var(--nuh-font-head, 'Poppins', sans-serif);
    font-size: 1.05rem;
}
.nuh-app__links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
/* Dark pills carrying the store name, the way a store badge reads. Not a
   reproduction of either company's official badge — those are trademarks
   with their own artwork and usage rules. */
/* .nuh-app__store is named in the exclusion list of the sheet's generic
   link rule (see "Links and muted text" near the end of this file), so
   this plain selector is enough — it is not competing with anything. */
body.nuh-page .nuh-app__store {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.8rem;
    border-radius: 9px;
    background: var(--nuh-blue-deep);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.86rem;
    line-height: 1.15;
    transition: background 0.18s ease, transform 0.18s ease;
}
body.nuh-page .nuh-app__store:hover { background: var(--nuh-blue); color: #fff; transform: translateY(-1px); }
.nuh-app__store .icon { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.nuh-app__store span { color: inherit; }
.nuh-app__store small {
    display: block;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    opacity: 0.75;
}
.nuh-app__art { align-self: end; }
/* The handset is cropped at the foot on purpose — it reads as a device
   rising into the card rather than a small picture floating in it. */
.nuh-appphone { display: block; width: 100%; max-height: 210px; margin-bottom: -1.1rem; }
@media (pointer: coarse) {
    body.nuh-page .nuh-app__store { min-height: 2.75rem; }
}
/* Under about 380px the two columns leave the buttons too narrow to read,
   so the drawing steps aside rather than squeezing the thing it is
   illustrating. */
@media (max-width: 380px) {
    .nuh-app { grid-template-columns: 1fr; }
    .nuh-app__art { display: none; }
}

/* --- Member quote -------------------------------------------------------- */
.nuh-quote {
    position: relative;
    margin: 0;
    padding: 1.2rem 1.2rem 1rem;
    background: var(--nuh-card);
    border: 1px solid var(--nuh-line);
    border-radius: calc(var(--nuh-radius) + 2px);
    box-shadow: var(--nuh-shadow-sm);
}
.nuh-quote__mark {
    position: absolute;
    top: 0.1rem;
    left: 0.8rem;
    font-family: var(--nuh-font-head, 'Poppins', serif);
    font-size: 2.6rem;
    line-height: 1;
    color: rgba(244, 123, 32, 0.35);
}
.nuh-quote p { margin: 0.7rem 0 0.7rem; color: var(--nuh-ink); line-height: 1.5; }
.nuh-quote footer { font-size: 0.85rem; }
body.nuh-page .nuh-quote strong { color: var(--nuh-blue-deep); }
.nuh-quote footer span { display: block; color: var(--nuh-ink-muted); font-size: 0.8rem; }

/* --- Quick actions ---------------------------------------------------
   Three next steps chosen for the visitor. Wide, tappable rows rather
   than small tiles: these are the primary path into the site, and a row
   can carry a line of explanation that a tile cannot. */
.nuh-quick-sec { --nuh-section-pad: clamp(1.2rem, 2.6vw, 1.8rem); }
.nuh-quick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: clamp(0.7rem, 1.8vw, 1rem);
}
.nuh-quick__card {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.95rem 1.1rem;
    border-radius: calc(var(--nuh-radius) + 2px);
    text-decoration: none;
    border: 1px solid var(--nuh-line);
    background: var(--nuh-card);
    box-shadow: var(--nuh-shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.22s ease;
}
.nuh-quick__card:hover { transform: translateY(-3px); box-shadow: var(--nuh-shadow-md); }
.nuh-quick__card--orange { border-color: rgba(244, 123, 32, 0.5); }
.nuh-quick__card--blue { border-color: rgba(27, 86, 164, 0.4); }
.nuh-quick__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: linear-gradient(150deg, rgba(244,123,32,0.16), rgba(27,86,164,0.14));
}
.nuh-quick__icon .icon { width: 1.2rem; height: 1.2rem; color: var(--nuh-orange-ink); }
.nuh-quick__body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
body.nuh-page .nuh-quick__body strong { color: var(--nuh-blue-deep); font-size: 1rem; }
.nuh-quick__body > span { font-size: 0.84rem; color: var(--nuh-ink-muted); line-height: 1.35; }
.nuh-quick__go { margin-left: auto; color: var(--nuh-blue); font-weight: 700; flex: 0 0 auto; }

/* --- Module launcher -------------------------------------------------
   Each area with a live figure and the two things you would do there.
   The card is a link with a row of secondary links under it, NOT a link
   inside a link — nesting anchors is invalid and browsers resolve it by
   silently dropping one, which is how a "quick action" stops working. */
.nuh-modules-sec { --nuh-section-pad: clamp(1.4rem, 3vw, 2.2rem); }
.nuh-modules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: clamp(0.7rem, 1.8vw, 1.1rem);
}
.nuh-module {
    display: flex;
    flex-direction: column;
    background: var(--nuh-card);
    border: 1px solid var(--nuh-line);
    border-radius: calc(var(--nuh-radius) + 2px);
    box-shadow: var(--nuh-shadow-sm);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.22s ease;
}
.nuh-module:hover { transform: translateY(-3px); box-shadow: var(--nuh-shadow-md); }
.nuh-module__main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1rem 0.8rem;
    text-decoration: none;
    flex: 1 1 auto;
}
.nuh-module__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    background: linear-gradient(150deg, rgba(244,123,32,0.16), rgba(27,86,164,0.14));
}
.nuh-module__icon .icon { width: 1.25rem; height: 1.25rem; color: var(--nuh-orange-ink); }
.nuh-module__head { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
body.nuh-page .nuh-module__head strong { color: var(--nuh-blue-deep); font-size: 1rem; }
/* A live figure is the point of the card, so it is coloured as data
   rather than as another line of muted prose. */
.nuh-module__stat { font-size: 0.85rem; font-weight: 700; color: var(--nuh-orange-ink); }
/* An empty module says what to do about it, quietly. */
.nuh-module__empty { font-size: 0.82rem; color: var(--nuh-ink-muted); line-height: 1.3; }
/* PHASE 6 — a module that is not built yet. Dashed rather than solid, and
   it does not lift on hover: the card has to look inert, because the one
   thing a visitor must not do is wait for it to respond. */
.nuh-module.is-soon {
    position: relative;
    background: transparent;
    border-style: dashed;
    box-shadow: none;
}
.nuh-module.is-soon:hover { transform: none; box-shadow: none; }
.nuh-module.is-soon .nuh-module__icon { background: rgba(27, 86, 164, 0.07); }
.nuh-module.is-soon .nuh-module__icon .icon { color: var(--nuh-ink-muted); }
body.nuh-page .nuh-module.is-soon .nuh-module__head strong { color: var(--nuh-ink-muted); }
.nuh-module__soon {
    position: absolute;
    top: 0.55rem;
    right: 0.6rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: rgba(27, 86, 164, 0.1);
    color: var(--nuh-blue-deep);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
/* Room for the chip on the title line only. Reserving it down the whole
   card squeezed the blurb into four ragged lines to clear something that
   is not beside it. */
body.nuh-page .nuh-module.is-soon .nuh-module__head strong { padding-right: 5.4rem; }
.nuh-module__acts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0 1rem 0.9rem;
}
body.nuh-page .nuh-module__acts a {
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(27, 86, 164, 0.08);
    border: 1px solid rgba(27, 86, 164, 0.16);
    color: var(--nuh-blue-deep);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}
body.nuh-page .nuh-module__acts a:hover {
    background: rgba(244, 123, 32, 0.13);
    border-color: rgba(244, 123, 32, 0.4);
    color: var(--nuh-orange-ink);
}

@media (pointer: coarse) {
    .nuh-module__acts a { min-height: 2.5rem; display: inline-flex; align-items: center; }
    .nuh-quick__card { min-height: 4rem; }
}

/* --- Impact band ------------------------------------------------------ */
.nuh-impact {
    background: linear-gradient(135deg, var(--nuh-blue) 0%, var(--nuh-blue-deep) 100%);
    color: #fff;
    padding: clamp(1.2rem, 3vw, 1.9rem) 0;
}
.nuh-impact__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(0.9rem, 3vw, 2rem);
}
body.nuh-page .nuh-impact__inner h2 {
    font-family: var(--nuh-font-head, 'Poppins', sans-serif);
    font-size: clamp(1.1rem, 2.4vw, 1.4rem);
    color: #fff;
    margin: 0;
    flex: 0 0 auto;
}
.nuh-impact__figures {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.9rem, 3vw, 2.2rem);
    flex: 1 1 auto;
}
/* These are anchors, so they also have to out-rank the sheet's generic
   `body.nuh-page .page a:not(.nuh-btn):not(.btn) { color: blue }`, which
   was painting the figures blue on a blue band. */
body.nuh-page .nuh-impact__fig,
body.nuh-page .page .nuh-impact__fig { text-decoration: none; color: #fff; }
body.nuh-page .nuh-impact__n {
    display: block;
    font-family: var(--nuh-font-head, 'Poppins', sans-serif);
    font-size: clamp(1.3rem, 3.2vw, 1.9rem);
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
}
body.nuh-page .nuh-impact__l { display: block; font-size: 0.8rem; color: rgba(255, 255, 255, 0.82); }
body.nuh-page .nuh-impact__fig:hover .nuh-impact__l { color: #fff; }
/* The artwork's icon beside each figure. Green, the accent the band does
   not otherwise use — orange is the buttons and white is the numbers, so
   green is what makes the icons read as a third thing rather than more of
   either. aria-hidden in the markup: the label already says what it is. */
body.nuh-page .nuh-impact__fig {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}
.nuh-impact__i {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
}
.nuh-impact__i .icon { width: 1.15rem; height: 1.15rem; color: #5fd39a; }
/* 38px on a phone: two short of the threshold, from a number stacked on a
   label with nothing else to give it height. The icon now supplies the
   height, but the guarantee stays — an emptied icon set must not quietly
   shrink the target again. */
@media (pointer: coarse) {
    body.nuh-page .nuh-impact__fig { min-height: 2.75rem; }
}

/* --- The module grid --------------------------------------------------
   The reference design's six coloured tiles near the foot of the page.
   Built in the markup from nuh_platform_modules(), so what these style is
   the same six modules platform.php lists.

   Three across, then two, then one. Written as explicit tracks rather than
   auto-fit: this grid is exactly six tiles, and 3/2/1 keeps every row full
   at every width — auto-fit would happily leave a lone tile stranded on a
   fourth row at some in-between size.

   The accent is one custom property per tile (--nuh-feat), which is why
   there is one rule per module here and not one rule per painted part.
   The six inks are colours the site already owns: the brand's orange and
   blue, and the four the hub categories and the promo band use. All hold
   4.5:1 on white — do not lighten them. */
.nuh-feats-sec { --nuh-section-pad: clamp(1.6rem, 3.2vw, 2.4rem); }
.nuh-feats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.7rem, 1.7vw, 1.1rem);
    margin-top: 1.4rem;
}
@media (max-width: 900px) {
    .nuh-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .nuh-feats { grid-template-columns: minmax(0, 1fr); }
}
.nuh-feat {
    --nuh-feat: var(--nuh-orange-ink);
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icon title" "icon blurb";
    column-gap: 0.9rem;
    row-gap: 0.25rem;
    align-content: start;
    padding: 1.15rem 2.2rem 1.15rem 1.15rem;
    text-decoration: none;
    background: var(--nuh-card);
    border: 1px solid var(--nuh-line);
    border-radius: calc(var(--nuh-radius) + 4px);
    box-shadow: var(--nuh-shadow-sm);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.18s ease;
}
/* A hairline of the tile's own colour along the top edge. Drawn as a
   pseudo-element rather than a border so it does not shift the card's box
   by 3px relative to a tile that has none. */
.nuh-feat::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--nuh-feat);
    opacity: 0.85;
}
.nuh-feat:hover,
.nuh-feat:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--nuh-shadow-md);
    border-color: color-mix(in srgb, var(--nuh-feat) 40%, var(--nuh-line));
}
.nuh-feat__icon {
    grid-area: icon;
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--nuh-feat) 12%, transparent);
    transition: background 0.18s ease;
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .nuh-feat__icon { background: rgba(27, 86, 164, 0.1); }
}
.nuh-feat__icon .icon { width: 1.35rem; height: 1.35rem; color: var(--nuh-feat); }
body.nuh-page .nuh-feat__title {
    grid-area: title;
    align-self: end;
    font-family: var(--nuh-font-head, 'Poppins', sans-serif);
    font-size: 1.02rem;
    line-height: 1.25;
    color: var(--nuh-blue-deep);
}
body.nuh-page .nuh-feat__blurb {
    grid-area: blurb;
    font-size: 0.86rem;
    line-height: 1.4;
    color: var(--nuh-ink-muted);
}
/* The arrow sits in the tile's own corner rather than after the blurb: the
   blurbs are one line at some widths and two at others, and an arrow that
   moved up and down the card with them made six tiles look misaligned. */
.nuh-feat__go {
    position: absolute;
    right: 0.95rem;
    bottom: 0.95rem;
    font-weight: 800;
    color: var(--nuh-feat);
    opacity: 0.55;
    transition: transform 0.18s ease, opacity 0.18s ease;
}
.nuh-feat:hover .nuh-feat__go,
.nuh-feat:focus-visible .nuh-feat__go { opacity: 1; transform: translateX(3px); }

.nuh-feat--hubs     { --nuh-feat: var(--nuh-orange-ink); }
.nuh-feat--members  { --nuh-feat: var(--nuh-blue); }
.nuh-feat--events   { --nuh-feat: #8c2f56; }
.nuh-feat--commerce { --nuh-feat: #1c7a45; }
.nuh-feat--comms    { --nuh-feat: #6d28d9; }
.nuh-feat--finance  { --nuh-feat: #0e6e8c; }

.nuh-feats__foot { text-align: center; margin: 1.4rem 0 0; }
@media (pointer: coarse) {
    .nuh-feat { min-height: 6rem; }
}

/* --- Hub explorer ------------------------------------------------------ */
.nuh-explore__head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1rem;
}
/* A scroller, not a JS carousel: it works with a finger, a trackpad, a
   scrollbar and the keyboard, and there is no state to get wrong.
   scroll-snap makes it stop on a card rather than mid-way. */
.nuh-hubrail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(min(78%, 230px), 230px);
    gap: 0.9rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 0.6rem;
    /* The rail is focusable so a keyboard user can scroll it; it needs a
       visible ring when they do. */
    border-radius: var(--nuh-radius);
}
.nuh-hubrail:focus-visible { outline: 3px solid var(--nuh-blue); outline-offset: 3px; }
/* The rail's arrow buttons, built by unityhub.js. The host gets relative
   positioning only once the buttons exist, so a no-JS page is untouched. */
.nuh-explore__main.has-railnav { position: relative; }
.nuh-hubrail__nav[hidden] { display: none; }
.nuh-hubrail__arrow {
    position: absolute;
    top: calc(50% + 1.4rem);   /* centred on the cards, not on the heading */
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--nuh-line);
    border-radius: 50%;
    background: var(--nuh-card);
    color: var(--nuh-blue-deep);
    box-shadow: var(--nuh-shadow-md);
    cursor: pointer;
    transition: background 0.16s ease, opacity 0.16s ease, transform 0.16s ease;
}
.nuh-hubrail__arrow svg { width: 1.1rem; height: 1.1rem; }
.nuh-hubrail__arrow:hover:not(:disabled) { background: var(--nuh-blue); color: #fff; transform: scale(1.06); }
/* Faded, not removed: a button that vanishes at the end of the rail makes
   the other one jump sideways. */
.nuh-hubrail__arrow:disabled { opacity: 0.28; cursor: default; box-shadow: var(--nuh-shadow-sm); }
/* Inset over the rail's own edges rather than hung in the margin: in the
   split layout the left margin is where the hub-creation card sits, and an
   arrow placed there landed on top of it. Sitting over the first and last
   card is also the clearer signal that it is THIS strip that scrolls. */
.nuh-hubrail__arrow--prev { left: 0.4rem; }
.nuh-hubrail__arrow--next { right: 0.4rem; }
/* On a touch screen the rail is swiped, and the buttons would only sit on
   top of the first and last card. */
@media (pointer: coarse) {
    .nuh-hubrail__nav { display: none; }
}
.nuh-hubcard {
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: var(--nuh-card);
    border: 1px solid var(--nuh-line);
    border-radius: var(--nuh-radius);
    box-shadow: var(--nuh-shadow-sm);
    text-decoration: none;
    color: var(--nuh-ink);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.22s ease;
}
.nuh-hubcard:hover { transform: translateY(-3px); box-shadow: var(--nuh-shadow-md); }
/* The photograph, with the badge and count sitting on it. A hub with no
   image gets a drawn gradient tinted from its own name (--hub-hue, set
   inline), so the card keeps its shape either way. */
.nuh-hubcard__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    background:
        linear-gradient(160deg,
            hsl(var(--hub-hue, 30) 70% 72%),
            hsl(calc(var(--hub-hue, 30) + 18) 55% 55%));
}
.nuh-hubcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nuh-hubcard__badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    /* Solid rather than translucent: over a photograph a tinted pill picks
       up whatever is behind it and the label becomes unreadable on exactly
       the cards that have an image. */
    background: #147a44;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
}
.nuh-hubcard__badge.is-new { background: var(--nuh-orange-ink); }
.nuh-hubcard__count {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgba(7, 28, 56, 0.72);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}
.nuh-hubcard strong { color: var(--nuh-blue-deep); font-size: 1rem; padding: 0.7rem 0.9rem 0; }
.nuh-hubcard__where { font-size: 0.82rem; color: var(--nuh-ink-muted); padding: 0 0.9rem; }
.nuh-hubcard__go {
    margin-top: auto;
    padding: 0.6rem 0.9rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--nuh-blue);
}
.nuh-explore__empty {
    text-align: center;
    padding: clamp(1.6rem, 4vw, 2.4rem);
    background: var(--nuh-card);
    border: 1px dashed var(--nuh-line);
    border-radius: var(--nuh-radius);
}
.nuh-explore__empty h3 { font-family: var(--nuh-font-head,'Poppins',sans-serif); color: var(--nuh-blue-deep); margin: 0 0 0.3rem; }

/* --- Search + why join -------------------------------------------------- */
.nuh-find__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(1.2rem, 3vw, 2.4rem);
    align-items: start;
}
.nuh-find__form { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.9rem 0 0.7rem; }
.nuh-find__form .nuh-finder__input { flex: 1 1 14rem; }
/* The "All India" selector. Styled to match the input beside it — a native
   select inherits the dark-theme field styling otherwise, exactly as the
   location chip's input did. */
.nuh-find__where {
    flex: 0 1 11rem;
    min-width: 0;
    padding: 0.8rem 0.7rem;
    border: 2px solid var(--nuh-line);
    border-radius: 10px;
    background: #fff;
    color: var(--nuh-ink);
    font: inherit;
    font-size: 0.95rem;
}
.nuh-find__where:focus {
    outline: none;
    border-color: var(--nuh-orange);
    box-shadow: 0 0 0 3px rgba(244, 123, 32, 0.18);
}
.nuh-find__pop { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0; }
/* --- PHASE 2: "Why join" as a band ------------------------------------
   Four reasons across the page with the quote beside them, as in the
   artwork — not a narrow list in a sidebar. */
.nuh-whysec__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(min(100%, 240px), 0.8fr);
    gap: clamp(1rem, 3vw, 2rem);
    align-items: start;
}
/* No quote configured: the reasons take the whole width rather than
   leaving a gap where a testimonial would have been. */
.nuh-whysec__grid.is-wide { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 860px) {
    .nuh-whysec__grid { grid-template-columns: 1fr; }
}
.nuh-why {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 0.6rem 1.2rem;
}
.nuh-why__row {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.6rem 0;
}
.nuh-why__row strong { display: block; color: var(--nuh-blue-deep); font-size: 0.95rem; }
.nuh-why__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: rgba(244, 123, 32, 0.13);
}
.nuh-why__icon .icon { width: 1rem; height: 1rem; color: var(--nuh-orange-ink); }

@media (pointer: coarse) {
    .nuh-module { min-height: 8rem; }
}

/* --- Sponsored slots ------------------------------------------------
   An advertisement has to be visibly an advertisement. The "Sponsored"
   label is a real element, not a title attribute or a faint watermark,
   and the card is deliberately quieter than the content around it — a
   thinner border, no lift on hover, no gradient. A community site whose
   ads impersonate its own cards spends the members' trust to earn a
   little more per click, which is a bad trade.

   Nothing here reserves space: ad_slot() returns an empty string when
   there is no ad or the viewer is on a paid plan, so no empty frame is
   ever drawn. */
.ad-card {
    display: block;
    position: relative;
    margin: 1rem 0;
    padding: 0.9rem;
    background: #fbfdff;
    border: 1px dashed var(--nuh-line);
    border-radius: var(--nuh-radius);
}
.ad-card__tag {
    display: inline-block;
    margin-bottom: 0.5rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(82, 112, 140, 0.14);
    color: var(--nuh-ink-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ad-card__link {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    text-decoration: none;
    color: inherit;
}
.ad-card__img {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--nuh-line);
}
.ad-card__body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.ad-card__title { color: var(--nuh-blue-deep); line-height: 1.3; }
.ad-card__text { font-size: 0.88rem; color: var(--nuh-ink-muted); }
.ad-card__by {
    font-size: 0.78rem;
    color: var(--nuh-ink-muted);
    opacity: 0.85;
}
.ad-card__link:hover .ad-card__title { text-decoration: underline; }
.ad-card__link:focus-visible { outline: 3px solid var(--nuh-blue); outline-offset: 3px; }

/* An advertisement is not part of the document a reader wants to keep. */
@media print { .ad-card { display: none !important; } }

/* --- Member dashboard header --------------------------------------
   Names the strip of personal panels under the marketing page. Spans
   the whole grid so the panels flow beneath it. */
body.nuh-page .nuh-dash-head {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0.4rem 0.2rem 0;
}
body.nuh-page .nuh-dash-head h2 {
    font-family: var(--nuh-font-head, 'Poppins', sans-serif);
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    color: var(--nuh-blue-deep);
    margin: 0 0 0.15rem;
}
body.nuh-page .nuh-dash-head p { margin: 0; color: var(--nuh-ink-muted); font-size: 0.95rem; }

/* --- Entrances -----------------------------------------------------
   Guarded on `js-on`, which assets/js/unityhub.js sets on <html> as its
   first act. Without the script — blocked, failed, reduced-motion — the
   class never lands and these rules never apply, so the cards are simply
   visible. Hiding first and revealing later is how content disappears
   permanently for people whose JS did not run. */
.js-on .nuh-reveal {
    opacity: 0;
    transform: translateY(18px);
}
.js-on .nuh-reveal.is-shown {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Cards in a row arrive in sequence rather than as a block. */
.js-on .nuh-paths .nuh-reveal:nth-child(2).is-shown,
.js-on .nuh-tools .nuh-reveal:nth-child(2).is-shown,
.js-on .nuh-live__grid .nuh-reveal:nth-child(2).is-shown,
.js-on .nuh-steps .nuh-reveal:nth-child(2).is-shown { transition-delay: 0.08s; }
.js-on .nuh-tools .nuh-reveal:nth-child(3).is-shown,
.js-on .nuh-steps .nuh-reveal:nth-child(3).is-shown { transition-delay: 0.16s; }

/* --- Closing banner ---------------------------------------------- */
/* Full-bleed in the artwork: the band spans the window and butts up against
   the footer, closing the page. Not a card in the content column. */
/* The artwork closes on a RIBBON, not a plain band: an orange bar narrower
   than the page, with its ends folded back against a darker strip behind it.
   Built from the element plus one pseudo-element rather than an image, so it
   scales and recolours with the theme.

   The dark strip is painted on the section, the ribbon on the inner div. */
.nuh-cta {
    margin: clamp(2rem, 5vw, 3.4rem) 0 0;
    /* Extra headroom over the artwork's band: the top now carries the light
       ground's wave lapping in, and the stars need sky to sit in before the
       ribbon starts. */
    padding: clamp(2.6rem, 5.6vw, 4.4rem) 0 0;
    background: linear-gradient(180deg, var(--nuh-blue-deep) 0%, #0f1d3a 100%);
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}
/* The night scene (nuh_art_night_sky): stars above, the skyline silhouette
   anchored to the band's foot, everything behind the ribbon. */
.nuh-cta__sky {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.nuh-cta__sky svg { width: 100%; height: 100%; display: block; }
/* --- PHASE 3: closing band --------------------------------------------
   Message and button side by side on the deep blue, as in the artwork.
   The ribbon styles below are kept but no longer used by the template —
   left in place because switching back is then a markup change rather
   than a rewrite. */
.nuh-cta__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0.9rem, 3vw, 2rem);
    padding-bottom: clamp(1.6rem, 4vw, 2.6rem);
    text-align: left;
}
.nuh-cta__copy { flex: 1 1 22rem; min-width: 0; }
body.nuh-page .nuh-cta__inner h2 {
    color: #fff;
    font-family: var(--nuh-font-head, 'Poppins', sans-serif);
    font-size: clamp(1.25rem, 3.2vw, 1.9rem);
    line-height: 1.2;
    margin: 0 0 0.3rem;
}
.nuh-cta__inner p { margin: 0; color: rgba(255, 255, 255, 0.88); }
.nuh-cta__btn { flex: 0 0 auto; }
@media (max-width: 600px) {
    .nuh-cta__inner { text-align: center; justify-content: center; }
    .nuh-cta__btn { width: 100%; }
}

.nuh-cta__ribbon {
    position: relative;
    z-index: 1;
    width: min(1100px, 100% - 3.6rem);
    margin: 0 auto;
    padding: clamp(1.6rem, 3.4vw, 2.6rem) clamp(1.4rem, 4vw, 3rem);
    background: linear-gradient(180deg, #ff9f4d 0%, var(--nuh-orange) 20%, var(--nuh-orange-ink) 100%);
    /* The middle term is the ribbon's own light spilling into the night
       around it — without it the bright bar sat ON the dark band; with it
       the bar sits IN it. */
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.18), 0 0 90px rgba(244, 123, 32, 0.3), inset 0 1px 0 rgba(255,255,255,0.3);
    clip-path: polygon(
       0 0, 100% 0, 100% 100%,
       calc(100% - 26px) calc(100% - 14px),
       26px calc(100% - 14px), 0 100%
    );
}
/* The darker fold behind each end, which is what makes it read as folded
   rather than merely notched. */
.nuh-cta__ribbon::before,
.nuh-cta__ribbon::after {
    content: "";
    position: absolute;
    bottom: -14px;
    width: 30px;
    height: 14px;
    background: #8f3d06;
}
.nuh-cta__ribbon::before { left: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.nuh-cta__ribbon::after { right: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.nuh-cta h2 {
    font-family: var(--nuh-font-head, 'Poppins', 'Baloo 2', sans-serif);
    font-size: clamp(1.4rem, 3.6vw, 2.1rem);
    margin: 0 0 0.4rem;
    color: #fff;
}
.nuh-cta p { margin: 0 0 1.2rem; color: rgba(255, 255, 255, 0.94); }
/* The artwork's ribbon has no button, so the sub-line is usually the last
   thing in the band — without this it leaves a gap under itself. */
.nuh-cta p:last-child { margin-bottom: 0; }
.nuh-cta .nuh-btn--ghost { background: #fff; color: var(--nuh-orange-ink); border-color: #fff; }

/* --- Member strip ------------------------------------------------ */
/* Signed-in members keep their own panels below the marketing page.
   Those come from app.css's .card, which is dark — given a light
   surface here so the page does not change theme halfway down. */
body.nuh-page .card {
    background: var(--nuh-card);
    border: 1px solid var(--nuh-line);
    box-shadow: var(--nuh-shadow-sm);
    color: var(--nuh-ink);
}
body.nuh-page .card h3,
body.nuh-page .card h4 { color: var(--nuh-blue-deep); }
body.nuh-page .card a { color: var(--nuh-blue); }
body.nuh-page .card a:hover { color: var(--nuh-orange-ink); }
body.nuh-page .nuh-member-strip {
    width: min(1180px, 100% - 2.4rem);
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 1.2rem;
    align-items: start;
}

/* --- Public forms (sign in, register, application status) ---------
   These pages are reached straight from the landing, so they carry the
   same theme. They are built from app.css's generic components — .card,
   .auth-card, .form-group, .btn, .flash — every one of which is painted
   for the dark surface, so each needs a light counterpart here.

   Scoped under body.nuh-page like everything else, which is why the same
   components stay dark everywhere else in the app. The member area and
   the admin console are deliberately NOT given this treatment: they are
   the dark application, and this is its public face. */

body.nuh-page .auth-card {
    background: var(--nuh-card);
    border: 1px solid var(--nuh-line);
    box-shadow: var(--nuh-shadow-md);
    border-radius: var(--nuh-radius);
}
body.nuh-page .auth-hero {
    background: linear-gradient(135deg, var(--nuh-blue) 0%, var(--nuh-blue-deep) 100%);
    color: #fff;
}
/* The hero's decorative sweep is drawn in gold-on-purple for the dark
   theme. Kept, but dropped to a whisper so it reads as light on blue
   rather than as a second, clashing palette. */
body.nuh-page .auth-hero .kn-sweep,
body.nuh-page .auth-hero svg[aria-hidden="true"]:not(.icon) { opacity: 0.18; }
body.nuh-page .auth-hero .icon {
    color: #fff;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}
body.nuh-page .auth-hero h1 { color: #fff; }

body.nuh-page .form-group label { color: var(--nuh-blue-deep); }
/* box-shadow has to be restated, not just the background. premium.css gives
   every field an inset violet glow for the dark theme; left alone it sits on
   top of a white fill and the field reads as lavender with a purple ring. */
body.nuh-page .form-group input,
body.nuh-page .form-group select,
body.nuh-page .form-group textarea,
body.nuh-page .list-filter input {
    background: #fff;
    color: var(--nuh-ink);
    border: 1px solid rgba(27, 86, 164, 0.28);
    box-shadow: inset 0 1px 2px rgba(20, 57, 110, 0.06);
}
body.nuh-page .form-group input::placeholder,
body.nuh-page .form-group textarea::placeholder { color: #93a8bd; }
body.nuh-page .form-group input:focus,
body.nuh-page .form-group select:focus,
body.nuh-page .form-group textarea:focus {
    border-color: var(--nuh-blue);
    box-shadow: 0 0 0 3px rgba(27, 86, 164, 0.18);
    outline: none;
}
/* app.css inverts the native date/time picker glyphs so they show up on a
   dark field. On a white one that inversion hides them again. */
body.nuh-page .form-group input[type="date"]::-webkit-calendar-picker-indicator,
body.nuh-page .form-group input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: none; }
body.nuh-page .field-hint,
body.nuh-page .cell-sub { color: var(--nuh-ink-muted); }

body.nuh-page .btn {
    background: linear-gradient(180deg, var(--nuh-orange) 0%, var(--nuh-orange-ink) 100%);
    color: #fff;
    border: 0;
    box-shadow: 0 6px 16px rgba(194, 83, 10, 0.28);
    text-shadow: none;
}
body.nuh-page .btn:hover { box-shadow: 0 10px 22px rgba(194, 83, 10, 0.38); filter: none; }
body.nuh-page .btn-secondary {
    background: #fff;
    color: var(--nuh-blue-deep);
    border: 2px solid var(--nuh-line);
    box-shadow: none;
}
body.nuh-page .btn-secondary:hover {
    color: var(--nuh-blue-deep);
    border-color: var(--nuh-blue-soft);
    box-shadow: none;
}

/* Status messages. app.css tints these for a dark ground, where a pale
   text colour on a near-transparent wash is legible; on white the same
   pair is not, so both are restated as dark text on a tinted card. */
body.nuh-page .flash-success {
    background: #e8f7ee;
    color: #145c33;
    border: 1px solid #b7e3c8;
    border-left: 3px solid #1c8a4c;
    box-shadow: none;
}
body.nuh-page .flash-error {
    background: #fdecea;
    color: #8a1c14;
    border: 1px solid #f5c2bd;
    border-left: 3px solid #c0392b;
    box-shadow: none;
}

/* --- Footer -------------------------------------------------------
   The dark purple-and-gold footer belongs to the classic theme. Behind a
   blue-and-orange page it reads as a third palette arriving at the end,
   so it is restated in the brand's own deep blue — the artwork's footer.
   Only the surfaces change; the layout is app.css's throughout. */
body.nuh-page .site-footer {
    /* margin-top: 0 — app.css sets `margin: 3rem 0 0`, which on this theme
       showed as a band of the body's deep blue between the page ground and
       the footer, reading as two footers stacked. The content ground now runs
       straight into the footer, as in the artwork. */
    margin-top: 0;
    background: linear-gradient(180deg, var(--nuh-blue-deep) 0%, var(--nuh-ground, #0f2b53) 100%);
    border-top: 0;
    color: rgba(255, 255, 255, 0.86);
}
body.nuh-page .site-footer::before,
body.nuh-page .site-footer::after { display: none; }
body.nuh-page .site-footer h4 { color: #fff; }
body.nuh-page .site-footer a { color: rgba(255, 255, 255, 0.86); }
body.nuh-page .site-footer a:hover { color: var(--nuh-orange-soft); }
body.nuh-page .site-footer p,
body.nuh-page .site-footer span { color: rgba(255, 255, 255, 0.74); }
body.nuh-page .site-footer-brand strong { color: #fff; }
/* The wordmark's accent word again — brighter here, because on this deep
   blue the AA-safe dark orange used on white would disappear. */
body.nuh-page .site-footer .brand-accent { color: var(--nuh-orange-soft); }
body.nuh-page .site-footer-social a {
    border-color: rgba(255, 255, 255, 0.28);
    color: rgba(255, 255, 255, 0.9);
}
body.nuh-page .site-footer-social a:hover {
    border-color: var(--nuh-orange-soft);
    color: var(--nuh-orange-soft);
}
body.nuh-page .site-footer-base { border-top-color: rgba(255, 255, 255, 0.14); }
body.nuh-page .site-footer-note,
body.nuh-page .site-footer-addr { color: rgba(255, 255, 255, 0.74); }

/* The fixed bar pinned to the bottom of every viewport. It is .footer-nav /
   .footer-link — NOT .bottom-nav, which does not exist in this codebase. */
body.nuh-page .footer-nav {
    background: var(--nuh-ground, #0f2b53);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    /* app.css casts a violet glow UPWARD out of this bar
       (box-shadow: 0 -6px 40px rgba(150,70,240,.55)). Against the dark theme
       it reads as light spilling off the bar; against this one it painted a
       purple haze across the bottom of the footer. Restated in the brand's
       own blue rather than removed, so the bar keeps its lift. */
    box-shadow: 0 -6px 28px rgba(15, 43, 83, 0.5);
}
body.nuh-page .footer-link { color: rgba(255, 255, 255, 0.76); }
body.nuh-page .footer-link.is-active,
body.nuh-page .footer-link:hover { color: var(--nuh-orange-soft); }
body.nuh-page .footer-submenu {
    background: var(--nuh-ground, #0f2b53);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

/* The application tracker on the post-registration page. */
body.nuh-page .approval-step-marker {
    background: var(--nuh-blue);
    color: #fff;
    border-color: var(--nuh-blue);
}
body.nuh-page .approval-step-name { color: var(--nuh-blue-deep); }
body.nuh-page .approval-step-meta { color: var(--nuh-ink-muted); }

/* --- Narrow screens ---------------------------------------------- */
@media (max-width: 860px) {
    .nuh-hero__inner,
    .nuh-reach__inner { grid-template-columns: 1fr; }
    /* Copy leads on a phone; the artwork follows it rather than
       pushing the headline below the fold. */
    .nuh-hero__art { order: 2; }
    .nuh-hero__copy { order: 1; }
    /* No button sizing here: .nuh-hero__actions is a GRID, so the
       `flex: 1 1 220px` this rule used to carry was inert and the two-up
       layout survived all the way down to 320px. The grid template itself
       now collapses — see the note on .nuh-hero__actions. */
    /* The map/devices pair keeps its overlap but stops reserving desktop
       height, which on a phone was mostly empty sky. */
    .nuh-hero__art--drawn { min-height: 210px; }
    .nuh-hero__art--drawn .nuh-map { max-width: 190px; }
    .nuh-reach__art .nuh-map { width: min(100%, 220px); }

    /* One column each on a phone: the pathway, and events-beside-news. */
    .nuh-live__grid { grid-template-columns: 1fr; }

    /* The join pathway walks downward on a phone, so the connector turns
       vertical: a short dashed drop from the step above into this one. */
    .nuh-steps { grid-template-columns: 1fr; }
    .nuh-step + .nuh-step::before {
        top: auto;
        bottom: 100%;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        width: 3px;
        height: clamp(1rem, 2.5vw, 1.6rem);
        background: repeating-linear-gradient(180deg,
            var(--nuh-blue-soft) 0 7px, transparent 7px 13px);
    }
}

@media (max-width: 520px) {
    /* Side by side, the two figures and the rule between them no longer fit;
       stacked, the rule reads as a stray line, so it goes. */
    .nuh-stat + .nuh-stat { border-left: 0; padding-left: 0; }
}

/* --- Touch targets -------------------------------------------------
   Keyed on the input device, not the screen width: a tablet in landscape
   is 1024px wide and still driven by fingers, while a narrow desktop
   window is not. Every size below was measured on a real render — the
   comment gives what it was.

   These are the controls a visitor actually navigates with, so each one
   is brought to roughly 44px, the smallest target a fingertip hits
   reliably. Nothing here changes the mouse-driven layout. */
@media (pointer: coarse) {
    /* Was ~31px, and it carries Accept / Decline / Remove / Leave this
       hub — irreversible actions sitting 6px apart in .hub-list__act. */
    .nuh-btn--sm {
        min-height: 2.75rem;
        padding: 0.6rem 1.1rem;
    }
    .hub-list__act { gap: 0.6rem; }

    /* The reach band's state links (~32px) and the directory's state
       filters (~34px) — the main way into "a community near me", and
       both wrap to several rows on a phone with 8px between them. */
    .nuh-place > a,
    .nuh-place__flat,
    .hub-state {
        min-height: 2.75rem;
        padding-block: 0.6rem;
    }
    .nuh-places { gap: 0.6rem; }
    .hub-states { gap: 0.6rem; }

    /* Suggestion rows in the finder's type-ahead. */
    .nuh-suggest__list a { min-height: 2.75rem; }

    /* The "read more" links that close each card — 29-32px of bare text,
       and on the journey steps they are the only way onward. Made into
       inline-flex boxes so min-height has something to act on; align-items
       keeps the label optically where it was rather than centring it in a
       taller box and opening a gap above. */
    .nuh-step__link,
    .nuh-tool__link,
    .nuh-live__all {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
    }

    /* The directory's category filter chips (Education, Culture, Seats
       free…) at 22px. Only anchors are touched — .badge-pill is also worn
       by static status badges, which are not targets and must not grow.
       min-width as well as height: a one-word chip ("All") comes out a
       fraction under 40px wide, which is the same near-miss sideways. */
    .chip-row a,
    a.badge-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.75rem;
        min-width: 2.75rem;
        padding-block: 0.5rem;
    }
}

/* Table action links ("Details", "View") are one word of body text —
   17px tall on a phone. The padding grows the target, negative margin
   keeps the row height as designed. */
@media (pointer: coarse) {
    .table-scroll td a {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
        padding-inline: 0.4rem;
        margin-block: -0.6rem;
    }
}

/* --- Legibility ----------------------------------------------------
   Body copy and metadata that sat at 13.1-13.8px on a phone. These are
   prose and figures a member reads, not badge chrome, so they come up to
   14px+ on small screens while the desktop scale is left alone. */
@media (max-width: 600px) {
    .hub-card__desc { font-size: 0.9rem; }
    .hub-card__foot { font-size: 0.88rem; }
    .nuh-tool__soon { font-size: 0.88rem; }
}

/* --- Print ---------------------------------------------------------
   The scroll-reveal entrances hold their elements at opacity 0 until the
   observer sees them. Printing never scrolls, so a visitor who loaded the
   homepage and pressed Ctrl+P got the hero and then six blank frames where
   the journey steps and capability cards should have been — verified, not
   theorised. Anything still waiting to be revealed is simply shown here.

   The rest of this block is what a printed page actually wants: the
   painted scenery, the fixed bottom bar and the type-ahead panel are all
   screen furniture, and the cards drop their shadows and keep their
   borders so they read as boxes in ink rather than grey smudges. */
@media print {
    .js-on .nuh-reveal,
    .nuh-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .nuh-hero .nuh-scene,
    .nuh-mid__sky,
    .nuh-reach__scene,
    .nuh-cta__sky,
    .nuh-wave,
    .nuh-suggest,
    body.nuh-page .footer-nav { display: none !important; }
    .nuh-path,
    .nuh-tool,
    .nuh-step,
    .nuh-live__col {
        box-shadow: none !important;
        border: 1px solid #999 !important;
        break-inside: avoid;
    }
    /* White ground and dark ink, whatever the theme was doing on screen. */
    body.nuh-page,
    body.nuh-page .page,
    .nuh-mid { background: #fff !important; }
    .nuh-hero__title,
    .nuh-h2 { color: #000 !important; }
}

@media (prefers-reduced-motion: reduce) {
    .nuh-pin { animation: none; }
    /* The backdrop stands still: no drifting clouds, gliding birds,
       shimmering water or breathing sun. The glints keep their resting
       opacity, so the drawing itself is unchanged — only the motion goes. */
    .nuh-cloud,
    .nuh-birds,
    .nuh-glint,
    .nuh-sun__halo,
    .nuh-balloon,
    .nuh-star { animation: none; }
    .nuh-star { opacity: 0.6; }
    .nuh-btn::after { display: none; }
    /* Belt and braces: the script bails out before setting `js-on` under
       reduced motion, so these should already be inert. Restated in case a
       cached page still carries the class from a previous preference. */
    .js-on .nuh-reveal { opacity: 1; transform: none; transition: none; }
    .nuh-btn,
    .nuh-path,
    .nuh-tool { transition: none; }
    .nuh-btn:hover,
    .nuh-path:hover,
    .nuh-tool:hover { transform: none; }
    /* The hero's stat pills and the module tiles lift on hover and the
       tile's arrow slides. The colour changes stay — they are what says
       "this is a link" — only the movement goes. */
    .nuh-band__pill,
    .nuh-feat,
    .nuh-feat__go { transition: none; }
    .nuh-band__pill:hover,
    .nuh-band__pill:focus-visible,
    .nuh-feat:hover,
    .nuh-feat:focus-visible { transform: none; }
    .nuh-feat:hover .nuh-feat__go,
    .nuh-feat:focus-visible .nuh-feat__go { transform: none; }
}

/* ===============================================================
   Hubs — directory, hub page and the lead's request queue.

   These screens are public (or member-facing) and reached from the
   landing, so they run on the same light ground and are styled here
   rather than in app.css. Everything stays under body.nuh-page for
   the same reason as the rest of this sheet.
   =============================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.nuh-btn--sm { padding: 0.45rem 0.9rem; font-size: 0.86rem; border-radius: 8px; }

/* --- Search ------------------------------------------------------ */
.hub-search {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    margin: 0 auto clamp(1.4rem, 3vw, 2rem);
    max-width: 640px;
}
.hub-search input[type="search"] {
    flex: 1 1 260px;
    padding: 0.8rem 1rem;
    font-size: 1rem;
    color: var(--nuh-ink);
    background: #fff;
    border: 1px solid rgba(27, 86, 164, 0.28);
    border-radius: 10px;
    box-shadow: inset 0 1px 2px rgba(20, 57, 110, 0.06);
}
.hub-search input[type="search"]:focus {
    outline: none;
    border-color: var(--nuh-blue);
    box-shadow: 0 0 0 3px rgba(27, 86, 164, 0.18);
}
.hub-count { text-align: center; color: var(--nuh-ink-muted); margin: 0 0 1rem; font-size: 0.92rem; }

/* --- Directory grid ---------------------------------------------- */
.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: clamp(0.9rem, 2vw, 1.3rem);
}
.hub-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.2rem;
    background: var(--nuh-card);
    border: 1px solid var(--nuh-line);
    border-radius: var(--nuh-radius);
    box-shadow: var(--nuh-shadow-sm);
    text-decoration: none;
    color: var(--nuh-ink);
    transition: transform 0.18s ease, box-shadow 0.22s ease;
}
.hub-card:hover { transform: translateY(-3px); box-shadow: var(--nuh-shadow-md); }
/* The cover band, on the cards that have one. Negative margins pull it out
   to the card's edges without changing the padding every other child of
   this flex column depends on. */
.hub-card.has-cover { overflow: hidden; }
.hub-card__cover {
    display: block;
    margin: -1.2rem -1.2rem 0.5rem;
    aspect-ratio: 16 / 7;
    background: var(--nuh-line);
}
.hub-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hub-card__pin {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    align-self: flex-start;
    padding: 0.2rem 0.6rem 0.2rem 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--nuh-orange-ink);
    background: rgba(244, 123, 32, 0.12);
    border-radius: 999px;
}
.hub-card__pin .icon { width: 0.95rem; height: 0.95rem; }
.hub-card__name { font-family: var(--nuh-font-head, 'Poppins', sans-serif); font-size: 1.1rem; color: var(--nuh-blue-deep); }
.hub-card__where { font-size: 0.88rem; color: var(--nuh-ink-muted); }
/* The branch tree on a card: "Part of Chennai Hub" / "135 local branches". */
.hub-card__tree { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; font-weight: 600; color: var(--nuh-blue, #1557d0); }
.hub-card__tree .icon { width: 0.95rem; height: 0.95rem; flex: none; }
.hub-card__desc { font-size: 0.86rem; color: var(--nuh-ink-muted); }
/* Directory: every country's chapter in one list, and "the branches of X". */
.hub-country-pick { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; margin: 0 0 1rem; }
.hub-country-pick label { font-weight: 600; font-size: 0.92rem; }
.hub-country-pick select { min-height: 44px; padding: 0.4rem 0.7rem; border-radius: 10px; border: 1px solid var(--nuh-line, #d6dbe6); background: var(--nuh-card, #fff); color: inherit; font: inherit; max-width: 100%; }
.hub-parent-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0 0 1rem; padding: 0.7rem 0.9rem; border-radius: 12px; background: var(--nuh-blue-soft, rgba(21, 87, 208, 0.08)); font-weight: 600; }
.hub-parent-bar .icon { width: 1.1rem; height: 1.1rem; color: var(--nuh-blue, #1557d0); }
.hub-count__more { display: block; margin-top: 0.2rem; font-size: 0.88rem; }
.hub-card__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.6rem;
    margin-top: auto;
    padding-top: 0.7rem;
    font-size: 0.82rem;
}
.hub-card__seats { font-weight: 700; color: var(--nuh-blue); }
/* A full hub is not a failure state, so it is muted rather than red — it
   still tells the reader not to bother clicking hopefully. */
.hub-card__seats.is-full { color: var(--nuh-ink-muted); font-weight: 600; }
.hub-card__lead { color: var(--nuh-ink-muted); }

/* --- Empty state + closing prompt -------------------------------- */
.hub-empty,
.hub-cta {
    text-align: center;
    padding: clamp(1.6rem, 4vw, 2.6rem);
    background: var(--nuh-card);
    border: 1px solid var(--nuh-line);
    border-radius: var(--nuh-radius);
    box-shadow: var(--nuh-shadow-sm);
}
.hub-cta { margin-top: clamp(1.6rem, 4vw, 2.6rem); }
.hub-empty h2,
.hub-cta h2 { font-family: var(--nuh-font-head, 'Poppins', sans-serif); color: var(--nuh-blue-deep); margin: 0 0 0.4rem; }
.hub-empty p,
.hub-cta p { color: var(--nuh-ink-muted); margin: 0 0 1.1rem; }

/* --- Hub page ----------------------------------------------------- */
.hub-back { margin: 0 0 0.8rem; font-size: 0.9rem; }
.hub-back a { color: var(--nuh-blue); text-decoration: none; font-weight: 600; }
.hub-back a:hover { color: var(--nuh-orange-ink); }

.hub-head {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    align-items: flex-start;
    justify-content: space-between;
    padding: clamp(1.2rem, 3vw, 1.8rem);
    background: var(--nuh-card);
    border: 1px solid var(--nuh-line);
    border-radius: var(--nuh-radius);
    box-shadow: var(--nuh-shadow-sm);
}
.hub-head__name {
    font-family: var(--nuh-font-head, 'Poppins', sans-serif);
    font-size: clamp(1.4rem, 3.4vw, 2rem);
    color: var(--nuh-blue-deep);
    margin: 0 0 0.3rem;
}
.hub-head__where {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0 0 0.6rem;
    color: var(--nuh-ink-muted);
    font-weight: 600;
}
.hub-head__where .icon { width: 1rem; height: 1rem; color: var(--nuh-orange-ink); }
.hub-head__desc { margin: 0; color: var(--nuh-ink); max-width: 62ch; }
.hub-head__stat { text-align: center; min-width: 120px; }
.hub-head__count {
    display: block;
    font-family: var(--nuh-font-head, 'Poppins', sans-serif);
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 700;
    line-height: 1;
    color: var(--nuh-orange-ink);
}
.hub-head__count span { font-size: 0.55em; color: var(--nuh-ink-muted); }
.hub-head__label { display: block; margin-top: 0.3rem; font-size: 0.85rem; color: var(--nuh-ink-muted); }

.hub-join {
    margin: 1.2rem 0;
    padding: clamp(1rem, 2.5vw, 1.4rem);
    background: rgba(255, 255, 255, 0.72);
    border: 1px dashed rgba(27, 86, 164, 0.3);
    border-radius: var(--nuh-radius);
}
.hub-join .form-group { max-width: 460px; }
.hub-join__blocked { margin: 0 0 0.6rem; color: var(--nuh-ink-muted); font-weight: 600; }

.hub-panel {
    margin-top: 1.4rem;
    padding: clamp(1rem, 2.5vw, 1.4rem);
    background: var(--nuh-card);
    border: 1px solid var(--nuh-line);
    border-radius: var(--nuh-radius);
    box-shadow: var(--nuh-shadow-sm);
}
.hub-panel h2 {
    font-family: var(--nuh-font-head, 'Poppins', sans-serif);
    font-size: 1.15rem;
    color: var(--nuh-blue-deep);
    margin: 0 0 0.8rem;
}
.hub-note { color: var(--nuh-ink-muted); margin: 0; }
.hub-note a { color: var(--nuh-blue); font-weight: 600; }

.hub-list { list-style: none; margin: 0; padding: 0; }
.hub-list__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--nuh-line);
}
.hub-list__row:last-child { border-bottom: 0; }
.hub-list__who { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.hub-list__who > span { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.hub-list__who strong { color: var(--nuh-blue-deep); }
.hub-list__act { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.hub-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.hub-tag {
    display: inline-block;
    align-self: flex-start;
    padding: 0.1rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    background: var(--nuh-blue);
    border-radius: 999px;
}

/* --- Live search states ------------------------------------------
   The directory's search updates in place. These rules only style the
   feedback; with JavaScript off none of them ever apply, and the form
   below them is an ordinary GET that reloads the page. */
.hub-search { position: relative; }

/* A quiet, non-blocking indicator. Deliberately NOT a spinner that
   replaces the results: the previous list stays readable while the
   next one is fetched, because a search that empties the screen on
   every keystroke feels broken even when it is fast. */
.hub-search__spinner {
    position: absolute;
    right: -1.4rem;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border: 2px solid rgba(27, 86, 164, 0.25);
    border-top-color: var(--nuh-blue);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
.hub-search.is-searching .hub-search__spinner {
    opacity: 1;
    animation: nuh-spin 0.7s linear infinite;
}
@keyframes nuh-spin { to { transform: rotate(360deg); } }

/* The results area dims a touch while a newer search is in flight, so
   the list on screen reads as "about to change" rather than current. */
.hub-search.is-searching ~ [data-hub-results-area] { opacity: 0.55; }
[data-hub-results-area] { transition: opacity 0.15s ease; }

.field-status { display: block; margin-top: 0.3rem; font-size: 0.82rem; color: var(--nuh-ink-muted); }
.field-status.is-checking { color: var(--nuh-ink-muted); }
.field-status.is-ok { color: #1c7a45; font-weight: 600; }

/* The spinner hangs 1.4rem outside .hub-search, which is fine only while the
   search box is genuinely narrower than its wrapper. .hub-search maxes out at
   640px, so from there down to the point .nuh-wrap stops being the constraint
   the offset lands outside the viewport — and between 601px and 640px the
   body's overflow-x guard has already stopped applying, so it produced a real
   horizontal scrollbar the moment anyone typed. Hidden across that whole
   range, not just under 560px. */
@media (max-width: 680px) {
    .hub-search__spinner { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hub-search.is-searching .hub-search__spinner { animation: none; }
    [data-hub-results-area] { transition: none; }
}

/* ===============================================================
   The rest of the front of the site.

   Events, News, About Us, Gallery, Search, the directory and the
   forum are all reached from the landing, and until now every one of
   them dropped the visitor back into the dark theme mid-journey.
   This section gives their components a light counterpart.

   Scope note: the ADMIN CONSOLE is deliberately excluded. It is a
   different tool with its own dense, data-heavy design, it is never
   linked from the public pages, and re-skinning thirty-odd screens
   of tables and forms is a large change no visitor would ever see.
   Everything here is still under body.nuh-page, so the console keeps
   its own look whatever happens in this file.
   =============================================================== */

/* --- Page headers ------------------------------------------------ */
body.nuh-page .dashboard-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: clamp(1.1rem, 3vw, 1.6rem);
    margin-bottom: 1.2rem;
    background: var(--nuh-card);
    border: 1px solid var(--nuh-line);
    border-radius: var(--nuh-radius);
    box-shadow: var(--nuh-shadow-sm);
}
body.nuh-page .dashboard-header h1 {
    font-family: 'Poppins', sans-serif;
    color: var(--nuh-blue-deep);
    margin: 0 0 0.15rem;
}
body.nuh-page .dashboard-header p { margin: 0; color: var(--nuh-ink-muted); }
body.nuh-page .icon-badge {
    background: linear-gradient(150deg, rgba(244, 123, 32, 0.16), rgba(27, 86, 164, 0.14));
    color: var(--nuh-orange-ink);
    border: 0;
    box-shadow: none;
}
body.nuh-page .icon-badge .icon { color: var(--nuh-orange-ink); filter: none; }

/* Headings inside content, which app.css paints gold. */
body.nuh-page h1,
body.nuh-page h2,
body.nuh-page h3,
body.nuh-page h4 { color: var(--nuh-blue-deep); }
body.nuh-page .page > h1 { -webkit-text-fill-color: currentColor; }

/* --- Badges ------------------------------------------------------- */
/* app.css builds these as light text on a translucent wash, which needs
   a dark ground underneath. Restated as dark text on a solid tint. */
body.nuh-page .badge-pill {
    background: rgba(27, 86, 164, 0.1);
    color: var(--nuh-blue-deep);
    border: 1px solid rgba(27, 86, 164, 0.18);
    box-shadow: none;
    text-shadow: none;
}
body.nuh-page .badge-active { background: #e8f7ee; color: #145c33; border-color: #b7e3c8; }
body.nuh-page .badge-pending { background: #fff4e2; color: #8a5410; border-color: #f3d8ac; }
body.nuh-page .badge-rejected,
body.nuh-page .badge-suspended { background: #fdecea; color: #8a1c14; border-color: #f5c2bd; }
body.nuh-page .badge-gradient {
    background: linear-gradient(135deg, var(--nuh-orange), var(--nuh-orange-ink));
    color: #fff;
    border: 0;
}

/* --- Tables -------------------------------------------------------- */
body.nuh-page .table-scroll {
    background: var(--nuh-card);
    border: 1px solid var(--nuh-line);
    border-radius: var(--nuh-radius);
}
body.nuh-page table { color: var(--nuh-ink); }
body.nuh-page th {
    background: rgba(27, 86, 164, 0.06);
    color: var(--nuh-blue-deep);
    border-bottom: 1px solid var(--nuh-line);
}
body.nuh-page td { border-bottom: 1px solid var(--nuh-line); }
body.nuh-page tr:hover td { background: rgba(27, 86, 164, 0.04); }
body.nuh-page .name-row { color: var(--nuh-ink); }

/* --- Filter boxes --------------------------------------------------- */
body.nuh-page .list-filter input {
    background: #fff;
    color: var(--nuh-ink);
    border: 1px solid rgba(27, 86, 164, 0.28);
    box-shadow: inset 0 1px 2px rgba(20, 57, 110, 0.06);
}
body.nuh-page .list-filter .icon { color: var(--nuh-blue); }
body.nuh-page .list-filter-empty { color: var(--nuh-ink-muted); }

/* --- News ----------------------------------------------------------- */
body.nuh-page .news-card {
    background: var(--nuh-card);
    border: 1px solid var(--nuh-line);
    box-shadow: var(--nuh-shadow-sm);
    color: var(--nuh-ink);
    transition: transform 0.18s ease, box-shadow 0.22s ease;
}
body.nuh-page .news-card:hover { transform: translateY(-3px); box-shadow: var(--nuh-shadow-md); }
body.nuh-page .news-card strong { color: var(--nuh-blue-deep); }
body.nuh-page .news-card-excerpt,
body.nuh-page .news-card-date { color: var(--nuh-ink-muted); }
body.nuh-page .news-card.is-featured { border-color: rgba(244, 123, 32, 0.45); }

/* --- Gallery -------------------------------------------------------- */
body.nuh-page .gallery-item {
    background: var(--nuh-card);
    border: 1px solid var(--nuh-line);
    box-shadow: var(--nuh-shadow-sm);
}
body.nuh-page .gallery-item-caption {
    background: linear-gradient(180deg, rgba(20, 57, 110, 0), rgba(20, 57, 110, 0.82));
    color: #fff;
}
/* The lightbox stays DARK on purpose. A photograph is judged against a
   neutral dark surround, and a white overlay would tint every image on
   the page. This is the one place the light theme does not follow. */

/* --- Member directory ------------------------------------------------ */
body.nuh-page .directory-card {
    background: var(--nuh-card);
    border: 1px solid var(--nuh-line);
    box-shadow: var(--nuh-shadow-sm);
    color: var(--nuh-ink);
    transition: transform 0.18s ease, box-shadow 0.22s ease;
}
body.nuh-page .directory-card:hover { transform: translateY(-3px); box-shadow: var(--nuh-shadow-md); }
body.nuh-page .directory-card strong { color: var(--nuh-blue-deep); }
body.nuh-page .directory-meta,
body.nuh-page .directory-skills { color: var(--nuh-ink-muted); }
body.nuh-page .directory-photo { border-color: var(--nuh-line); box-shadow: none; }
body.nuh-page .kin-badge { background: rgba(244, 123, 32, 0.14); color: var(--nuh-orange-ink); }

/* --- Events ---------------------------------------------------------- */
body.nuh-page .capacity-meter {
    background: rgba(27, 86, 164, 0.12);
    border: 1px solid var(--nuh-line);
}
body.nuh-page .capacity-meter > span,
body.nuh-page .capacity-meter i {
    background: linear-gradient(90deg, var(--nuh-blue), var(--nuh-orange));
}

/* --- Chips ------------------------------------------------------------ */
body.nuh-page .chip-row a,
body.nuh-page .chip-row span {
    background: rgba(27, 86, 164, 0.08);
    color: var(--nuh-blue-deep);
    border: 1px solid rgba(27, 86, 164, 0.16);
}
body.nuh-page .chip-row a:hover { background: rgba(244, 123, 32, 0.14); color: var(--nuh-orange-ink); }

/* --- Content pages (About Us and friends) ----------------------------- */
body.nuh-page .cms-richtext { color: var(--nuh-ink); }
body.nuh-page .cms-richtext h2,
body.nuh-page .cms-richtext h3 { color: var(--nuh-blue-deep); }
body.nuh-page .cms-richtext a { color: var(--nuh-blue); }
body.nuh-page .cms-richtext a:hover { color: var(--nuh-orange-ink); }
body.nuh-page .cms-richtext blockquote {
    border-left: 3px solid var(--nuh-orange);
    background: rgba(244, 123, 32, 0.07);
    color: var(--nuh-ink);
}
body.nuh-page .eyebrow { color: var(--nuh-orange-ink); }
/* The page hero's decorative blobs are gold-and-violet glows built for the
   dark theme; on white they are muddy smears. */
body.nuh-page .blob-field,
body.nuh-page .blob { display: none; }
body.nuh-page .hero,
body.nuh-page .hero-content { color: var(--nuh-ink); }
body.nuh-page .hero h1 { color: var(--nuh-blue-deep); }

/* --- Links and muted text --------------------------------------------- */
body.nuh-page .cell-sub,
body.nuh-page .muted { color: var(--nuh-ink-muted); }
/* Anything button-shaped is excluded here rather than fought downstream.
   The exclusion list is the mechanism: a link that paints its own
   background needs to own its text colour too, and a rule tying on
   specificity but declared later beats it silently — the app-store pills
   came out brand blue on navy at a contrast of 1.64, which is unreadable
   and which nothing about the CSS made obvious. Add new button-like link
   classes to this list; do not escalate selectors to out-rank it. */
/* Component links (class c-…, assets/css/components.css) carry their own
   colour — a card or a filter chip is not a text link. So does everything
   inside the Global homepage (.g-page, assets/css/global.css): its links are
   gold buttons, white-on-navy ghosts and tiles, each colouring itself. */
body.nuh-page .page a:not(.nuh-btn):not(.btn):not(.nuh-app__store):not([class^="c-"]):not([class*=" c-"]):not(:is(.g-page, .cx-page) a) { color: var(--nuh-blue); }
body.nuh-page .page a:not(.nuh-btn):not(.btn):not(.nuh-app__store):not([class^="c-"]):not([class*=" c-"]):not(:is(.g-page, .cx-page) a):hover { color: var(--nuh-orange-ink); }


/* ===============================================================
   Multi-location visibility on the directory.

   The homepage map answers "is there a community near me?"; this one
   answers "where exactly, and what do I click?". Same drawing, same
   data — the difference is that here every pin sits beside a list
   that says the same thing in words.
   =============================================================== */

.hub-map {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(1rem, 3vw, 2.2rem);
    align-items: center;
    margin: 0 0 clamp(1.4rem, 3vw, 2rem);
    padding: clamp(1rem, 2.5vw, 1.6rem);
    background: var(--nuh-card);
    border: 1px solid var(--nuh-line);
    border-radius: var(--nuh-radius);
    box-shadow: var(--nuh-shadow-sm);
}
.hub-map__art svg { width: 100%; height: auto; display: block; }
.hub-map__lead { margin: 0 0 0.9rem; color: var(--nuh-ink); }
.hub-map__lead strong { color: var(--nuh-orange-ink); font-size: 1.15em; }

/* The pins as text. This is the version that works on a phone, with a
   keyboard, and in a screen reader — the SVG pins are 12px targets. */
.hub-states {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.hub-state {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem 0.35rem 0.75rem;
    background: rgba(27, 86, 164, 0.07);
    border: 1px solid rgba(27, 86, 164, 0.16);
    border-radius: 999px;
    color: var(--nuh-blue-deep);
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    transition: background-color 0.16s ease, border-color 0.16s ease;
}
.hub-state:hover { background: rgba(244, 123, 32, 0.12); border-color: rgba(244, 123, 32, 0.4); }
.hub-state span {
    min-width: 1.5rem;
    padding: 0 0.35rem;
    text-align: center;
    background: var(--nuh-orange-ink);
    color: #fff;
    border-radius: 999px;
    font-size: 0.78rem;
}
/* The state the list is currently filtered to. */
.hub-state.is-on {
    background: var(--nuh-blue-deep);
    border-color: var(--nuh-blue-deep);
    color: #fff;
}

/* --- Near me ------------------------------------------------------- */
.hub-near {
    margin: 0 auto clamp(1.2rem, 3vw, 1.8rem);
    padding: clamp(0.9rem, 2.2vw, 1.3rem);
    max-width: 640px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px dashed rgba(27, 86, 164, 0.32);
    border-radius: var(--nuh-radius);
    text-align: center;
}
.hub-near label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 700;
    color: var(--nuh-blue-deep);
}
.hub-near__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}
.hub-near__row input {
    flex: 1 1 200px;
    max-width: 260px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    color: var(--nuh-ink);
    background: #fff;
    border: 1px solid rgba(27, 86, 164, 0.28);
    border-radius: 10px;
    box-shadow: inset 0 1px 2px rgba(20, 57, 110, 0.06);
}
.hub-near__row input:focus {
    outline: none;
    border-color: var(--nuh-blue);
    box-shadow: 0 0 0 3px rgba(27, 86, 164, 0.18);
}
.hub-near__note,
.hub-near__none { margin: 0.7rem 0 0; font-size: 0.9rem; color: var(--nuh-ink-muted); }
.hub-near__none a { font-weight: 700; }

/* Why a card is in a "nearest first" list. */
.hub-card__near {
    align-self: flex-start;
    padding: 0.12rem 0.55rem;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--nuh-blue-deep);
    background: rgba(27, 86, 164, 0.1);
    border-radius: 999px;
}

@media (max-width: 780px) {
    /* The map above the list, not beside it — at this width a half-width
       India is smaller than the pins drawn on it. */
    .hub-map { grid-template-columns: 1fr; }
}


/* --- Hub settings: the one-way actions ------------------------------
   Handing a hub over and leaving it are irreversible, so they sit in
   their own card away from the ordinary Save button rather than as two
   more buttons beside it. */
body.nuh-page .card.hub-danger { border-color: rgba(198, 40, 40, 0.28); }
body.nuh-page .card.hub-danger h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    margin: 0 0 0.5rem;
}
.hub-head__acts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0 0; }

/* --- The journey timeline (leaderboard page) ------------------------
   A single left rail with one dot per milestone. Every entry is read
   from a record another feature keeps; the styles only line them up. */
.nuh-journey { list-style: none; margin: 0; padding: 0; position: relative; }
.nuh-journey::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--nuh-line, rgba(27, 86, 164, 0.14));
}
.nuh-journey__step {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    padding: 0.45rem 0;
    position: relative;
}
.nuh-journey__dot {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    border: 2px solid var(--nuh-blue, #1b56a4);
    color: var(--nuh-blue, #1b56a4);
    z-index: 1;
}
.nuh-journey__dot .icon { width: 15px; height: 15px; }
.nuh-journey__body { display: flex; flex-direction: column; gap: 0.05rem; padding-top: 0.25rem; }

/* Badge chips on the same page. */
.badge-row { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.5rem; }
.badge-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 700;
    background: rgba(244, 123, 32, 0.12);
    color: var(--nuh-orange-ink, #c2530a);
    border: 1px solid rgba(244, 123, 32, 0.3);
}
.badge-chip .icon { width: 0.95rem; height: 0.95rem; }

/* --- Hub creation wizard: the type cards ---------------------------- */
.hub-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.6rem;
}
.hub-cat { display: block; cursor: pointer; }
.hub-cat input { position: absolute; opacity: 0; }
.hub-cat__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem 0.9rem;
    border: 2px solid var(--nuh-line, rgba(27, 86, 164, 0.14));
    border-radius: 12px;
    background: #fff;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.hub-cat__body strong { color: var(--nuh-blue-deep, #14396e); }
.hub-cat__body span { font-size: 0.8rem; color: var(--nuh-ink-muted, #52708c); }
.hub-cat input:checked + .hub-cat__body {
    border-color: var(--nuh-orange, #f47b20);
    background: rgba(244, 123, 32, 0.06);
}
.hub-cat input:focus-visible + .hub-cat__body {
    outline: 3px solid var(--nuh-blue, #1b56a4);
    outline-offset: 2px;
}

/* Category chip on directory cards. */
.hub-card__cat {
    align-self: flex-start;
    padding: 0.12rem 0.55rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--nuh-orange-ink, #c2530a);
    background: rgba(244, 123, 32, 0.12);
    border-radius: 999px;
}

/* The directory's filter chips sit centred over the search box. */
.hub-filter-row { justify-content: center; margin-bottom: 0.9rem; }

/* The lead's at-a-glance strip. */
.hub-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
    color: var(--nuh-ink-muted, #52708c);
    font-size: 0.92rem;
}
.hub-stats-row strong { color: var(--nuh-orange-ink, #c2530a); font-size: 1.15em; }

/* --- Community-type accents ------------------------------------------
   Each hub type carries its own colour, threaded through its page header
   and its directory chip, so the three streams read as three kinds of
   place rather than one list wearing different labels.

   The hues sit OUTSIDE the brand's orange/blue pair on purpose — a type
   accent that reuses a brand colour stops meaning anything. All three
   inks hold 4.5:1 on white; do not lighten them.

     education      scholarly blue-teal
     culture        heritage maroon
     social_impact  field green
   'general' takes no accent — the brand itself is its identity. */

.hub-head--cat-education     { --hubcat: #0e6e8c; }
.hub-head--cat-culture       { --hubcat: #8c2f56; }
.hub-head--cat-social_impact { --hubcat: #1c7a45; }

.hub-head[class*="hub-head--cat-"] {
    border-top: 4px solid var(--hubcat);
}
.hub-head[class*="hub-head--cat-"] .hub-head__where .icon { color: var(--hubcat); }
.hub-head[class*="hub-head--cat-"] .hub-head__count { color: var(--hubcat); }

.hub-card__cat--education     { background: rgba(14, 110, 140, 0.12); color: #0e6e8c; }
.hub-card__cat--culture       { background: rgba(140, 47, 86, 0.12);  color: #8c2f56; }
.hub-card__cat--social_impact { background: rgba(28, 122, 69, 0.12);  color: #1c7a45; }

/* The wizard's cards pick up the same accents when selected, so the
   colour a founder chooses is the colour their hub then wears. */
.hub-cat input[value="education"]:checked + .hub-cat__body     { border-color: #0e6e8c; background: rgba(14, 110, 140, 0.06); }
.hub-cat input[value="culture"]:checked + .hub-cat__body       { border-color: #8c2f56; background: rgba(140, 47, 86, 0.06); }
.hub-cat input[value="social_impact"]:checked + .hub-cat__body { border-color: #1c7a45; background: rgba(28, 122, 69, 0.06); }

/* ===================================================================
   The vision sections (October 2026): Purpose, Together, Your path.
   Built on the page's own tokens; every colour carries its fallback so
   the sections read correctly wherever unityhub.css is loaded.
   =================================================================== */
.nuh-purpose__kicker {
    margin: 0 0 0.35rem; text-align: center; text-transform: uppercase; letter-spacing: 0.12em;
    font-size: 0.78rem; font-weight: 700; color: var(--nuh-orange-ink, #c2530a);
}
.nuh-purpose__lede { max-width: 46rem; margin-left: auto; margin-right: auto; }
.nuh-purpose__grid {
    display: grid; gap: 1.1rem; margin-top: 1.6rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.nuh-purpose__card {
    display: flex; flex-direction: column; gap: 0.55rem; padding: 1.4rem 1.3rem 1.2rem;
    background: var(--nuh-card, #fff); border: 1px solid var(--nuh-line, rgba(27, 86, 164, 0.14));
    border-radius: var(--nuh-radius, 16px); box-shadow: var(--nuh-shadow-sm, 0 2px 8px rgba(20, 57, 110, 0.08));
}
.nuh-purpose__card h3 { margin: 0; font-size: 1.15rem; color: var(--nuh-blue-deep, #14396e); }
.nuh-purpose__card p { margin: 0; color: var(--nuh-ink-muted, #52708c); font-size: 0.95rem; line-height: 1.55; flex: 1; }
.nuh-purpose__icon {
    display: inline-grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 0.9rem;
    background: rgba(244, 123, 32, 0.12); color: var(--nuh-orange-ink, #c2530a);
}
.nuh-purpose__icon .icon { width: 1.35rem; height: 1.35rem; }
.nuh-purpose__go {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem;
    font-weight: 700; color: var(--nuh-blue, #1b56a4); text-decoration: none;
}
.nuh-purpose__go:hover { text-decoration: underline; }

.nuh-together__grid {
    list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.9rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.nuh-together__fig {
    display: grid; justify-items: center; text-align: center; gap: 0.2rem; padding: 1.2rem 0.8rem;
    background: var(--nuh-card, #fff); border: 1px solid var(--nuh-line, rgba(27, 86, 164, 0.14));
    border-radius: var(--nuh-radius, 16px);
}
.nuh-together__icon { color: var(--nuh-orange-ink, #c2530a); }
.nuh-together__icon .icon { width: 1.5rem; height: 1.5rem; }
.nuh-together__n {
    font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); font-weight: 800; line-height: 1.1;
    color: var(--nuh-blue-deep, #14396e); font-variant-numeric: tabular-nums;
}
.nuh-together__l { color: var(--nuh-ink-muted, #52708c); font-size: 0.9rem; }

.nuh-pathways__steps {
    list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); counter-reset: none;
}
.nuh-pathways__step {
    position: relative; display: flex; gap: 0.85rem; padding: 1.2rem 1.1rem;
    background: var(--nuh-card, #fff); border: 1px solid var(--nuh-line, rgba(27, 86, 164, 0.14));
    border-radius: var(--nuh-radius, 16px);
}
.nuh-pathways__step.is-done { border-color: rgba(10, 120, 60, 0.35); background: linear-gradient(180deg, rgba(16, 150, 80, 0.06), var(--nuh-card, #fff)); }
.nuh-pathways__step.is-next { border-color: var(--nuh-orange, #f47b20); box-shadow: 0 0 0 3px rgba(244, 123, 32, 0.15); }
.nuh-pathways__num {
    flex: none; display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%;
    background: var(--nuh-blue-deep, #14396e); color: #fff; font-weight: 800;
}
.nuh-pathways__step.is-done .nuh-pathways__num { background: #0f7a3d; }
.nuh-pathways__num .icon { width: 1.1rem; height: 1.1rem; }
.nuh-pathways__body { min-width: 0; display: grid; gap: 0.4rem; align-content: start; }
.nuh-pathways__body h3 { margin: 0; display: flex; align-items: center; gap: 0.45rem; font-size: 1.08rem; color: var(--nuh-blue-deep, #14396e); }
.nuh-pathways__icon { color: var(--nuh-orange-ink, #c2530a); display: inline-flex; }
.nuh-pathways__icon .icon { width: 1.05rem; height: 1.05rem; }
.nuh-pathways__body p { margin: 0; color: var(--nuh-ink-muted, #52708c); font-size: 0.93rem; line-height: 1.5; }
.nuh-pathways__state { font-weight: 700; color: #0f6b37 !important; font-size: 0.88rem !important; }
.nuh-pathways__state--next { color: var(--nuh-orange-ink, #c2530a) !important; }
.nuh-pathways__links { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; }
.nuh-pathways__links a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; color: var(--nuh-blue, #1b56a4); }

/* --- One header for the whole site, in the homepage design's dress ---------
   apply_public_theme() adds tpl-<design> to every public page's body, so the
   sign-in page, the event list and the hub directory wear the same header as
   the homepage instead of changing look one click in. Colours come from the
   theme tokens (Site Settings → Theme), with each design's preset as the
   fallback. body.ui3.tpl-*: one class up on ui.css, which loads after this. */
body.ui3.tpl-connect .ui-pubbar { background: #fff; }
body.ui3.tpl-connect .ui-pubnav__link { color: var(--nuh-ink, #0a2a64); }
body.ui3.tpl-connect .ui-pubnav__link.is-current {
    background: transparent;
    color: var(--nuh-blue, #1557d0);
    border-radius: 0;
    box-shadow: inset 0 -3px 0 var(--nuh-blue, #1557d0);
}
body.ui3.tpl-connect .ui-pubbar .ui-btn--brand { background: var(--nuh-blue, #1557d0); color: #fff; }
body.ui3.tpl-connect .ui-pubbar .ui-btn--brand:hover { background: var(--nuh-blue-deep, #0d3885); color: #fff; }

body.ui3.tpl-global .ui-pubnav__link { color: var(--nuh-blue-deep, #13284a); }
body.ui3.tpl-global .ui-pubnav__link.is-current {
    background: transparent;
    color: var(--nuh-blue-deep, #13284a);
    border-radius: 0;
    box-shadow: inset 0 -2px 0 var(--nuh-orange, #c9973f);
}
body.ui3.tpl-global .ui-pubbar .ui-btn--brand,
body.ui3.tpl-global .ui-pubbar .ui-btn--brand:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--nuh-orange, #c9973f) 70%, #fff3d4), var(--nuh-orange, #c9973f));
    color: var(--nuh-ink, #0e1e38);
}


/* ===============================================================
   The hub directory's world map (includes/world-map.php,
   assets/js/hub-world.js): a World / home-country switch above two
   map panels, the world drawn on the dotted map the homepage uses,
   and every country with a chapter as a pin. Pins are placed in
   percentages of the 720 x 268 map box; the zoom moves land and pins
   with one transform and the pins undo it (--z) to stay finger-sized.
   =============================================================== */

.hub-atlas { margin: 0 0 clamp(1.4rem, 3vw, 2rem); scroll-margin-top: 80px; }
.hub-atlas .hub-map { margin: 0; }
.hub-atlas__switch {
    display: inline-flex;
    gap: 4px;
    margin: 0 0 0.75rem;
    padding: 4px;
    background: rgba(27, 86, 164, 0.08);
    border-radius: 999px;
}
.hub-atlas__switch a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 40px;
    padding: 0.3rem 1.05rem;
    border-radius: 999px;
    color: var(--nuh-blue-deep, #14396e);
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    transition: background-color 0.16s ease, box-shadow 0.16s ease;
}
.hub-atlas__switch a:hover { background: rgba(255, 255, 255, 0.6); }
.hub-atlas__switch a.is-on {
    background: var(--nuh-card, #fff);
    color: var(--nuh-orange-ink, #c2530a);
    box-shadow: var(--nuh-shadow-sm, 0 2px 8px rgba(20, 57, 110, 0.08));
}
.hub-atlas__switch .icon { width: 1.05em; height: 1.05em; }

.hub-map--world { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; }

/* --- The map itself --- */
.hw { position: relative; min-width: 0; }
/* One row that scrolls sideways, so the zoom never pushes the map down a screen on a phone. */
.hw__zooms { display: flex; gap: 0.35rem; margin: 0 0 0.6rem; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.hw__zooms::-webkit-scrollbar { display: none; }
.hw__zooms .hw__zoom { flex: 0 0 auto; white-space: nowrap; }
.hw__zooms[hidden] { display: none; }
.hw__zoom {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 32px;
    padding: 0.2rem 0.7rem;
    border: 1px solid var(--nuh-line, rgba(27, 86, 164, 0.14));
    border-radius: 999px;
    background: var(--nuh-card, #fff);
    color: var(--nuh-blue-deep, #14396e);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.hw__zoom:hover { border-color: rgba(244, 123, 32, 0.5); }
.hw__zoom.is-on { background: var(--nuh-blue-deep, #14396e); border-color: var(--nuh-blue-deep, #14396e); color: #fff; }
.hw__zoom .icon { width: 1em; height: 1em; }
.hw__stage {
    position: relative;
    aspect-ratio: 720 / 268;
    overflow: hidden;
    border-radius: 12px;
    background: radial-gradient(120% 150% at 50% 0%, #f5faff 0%, #e4eefa 100%);
    box-shadow: inset 0 0 0 1px rgba(27, 86, 164, 0.08);
    cursor: default;
}
.hw__inner {
    --z: 1;
    position: absolute;
    inset: 0;
    transform-origin: 0 0;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hw__land {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(27, 86, 164, 0.3), rgba(27, 86, 164, 0.5));
    -webkit-mask: var(--map) center / 100% 100% no-repeat;
    mask: var(--map) center / 100% 100% no-repeat;
}
/* Zoomed in, the dots grow with the land; lighter, so the pins stay the thing you see. */
.hw.is-zoomed .hw__land { opacity: 0.55; }
.hw__arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hw__arc {
    fill: none;
    stroke: var(--nuh-orange, #f47b20);
    stroke-width: 1.4;
    stroke-dasharray: 3 5;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    opacity: 0.85;
    animation: hw-flow 1.8s linear infinite;
}
@keyframes hw-flow { to { stroke-dashoffset: -16; } }
.hw__waiting,
.hw__live { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.hw__live li { list-style: none; }

.hw-pin {
    position: absolute;
    width: calc(12px * var(--s, 1));
    height: calc(12px * var(--s, 1));
    border-radius: 50%;
    background: var(--nuh-orange, #f47b20);
    box-shadow: 0 0 0 3px rgba(244, 123, 32, 0.25), 0 2px 6px rgba(20, 57, 110, 0.3);
    transform: translate(-50%, -50%) scale(calc(1 / var(--z, 1)));
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.16s ease, background-color 0.16s ease;
    pointer-events: auto;   /* the layers they sit in are pass-through, so one never hides the other's pins */
}
.hw-pin.is-home {
    background: var(--nuh-blue-deep, #14396e);
    box-shadow: 0 0 0 4px rgba(20, 57, 110, 0.2), 0 0 0 9px rgba(244, 123, 32, 0.22);
}
.hw-pin.is-waiting {
    width: 5px;
    height: 5px;
    background: rgba(20, 57, 110, 0.5);
    box-shadow: none;
}
.hw-pin.is-waiting:hover,
.hw-pin.is-waiting.is-active { background: var(--nuh-orange, #f47b20); box-shadow: 0 0 0 3px rgba(244, 123, 32, 0.3); }
.hw-pin.is-growing::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 2px solid var(--nuh-orange, #f47b20);
    border-radius: 50%;
    animation: hw-pulse 2.4s ease-out infinite;
    pointer-events: none;
}
@keyframes hw-pulse { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(2.4); opacity: 0; } }
.hw-pin.is-own { outline: 2px dashed var(--nuh-blue, #1b56a4); outline-offset: 3px; }
.hw-pin.is-selected {
    z-index: 2;
    width: 14px;
    height: 14px;
    background: var(--nuh-orange-ink, #c2530a);
    outline: 3px solid var(--nuh-orange-ink, #c2530a);
    outline-offset: 3px;
}
.hw-pin.is-active { z-index: 3; box-shadow: 0 0 0 5px rgba(244, 123, 32, 0.45), 0 2px 8px rgba(20, 57, 110, 0.35); }
.hw-pin:focus-visible { outline: 3px solid var(--nuh-blue, #1b56a4); outline-offset: 3px; z-index: 3; }

/* --- The card --- */
.hw-card {
    position: absolute;
    z-index: 5;
    width: min(270px, 100%);
    padding: 0.75rem 0.9rem 0.85rem;
    background: var(--nuh-card, #fff);
    border: 1px solid var(--nuh-line, rgba(27, 86, 164, 0.14));
    border-radius: 12px;
    box-shadow: var(--nuh-shadow-md, 0 10px 28px rgba(20, 57, 110, 0.13));
    color: var(--nuh-ink, #17324f);
    font-size: 0.88rem;
}
.hw-card[hidden] { display: none; }
.hw-card__name { display: block; padding-right: 2rem; font-size: 1.02rem; color: var(--nuh-blue-deep, #14396e); }
.hw-card__x {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--nuh-ink-muted, #52708c);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}
.hw-card__x:hover { background: rgba(27, 86, 164, 0.08); }
.hw-card dl { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.8rem; margin: 0.5rem 0 0.7rem; }
.hw-card dt { color: var(--nuh-ink-muted, #52708c); }
.hw-card dd { margin: 0; font-weight: 600; text-align: right; }
.hw-card p { margin: 0.4rem 0 0.7rem; color: var(--nuh-ink-muted, #52708c); line-height: 1.45; }
.hw-card__badge {
    display: inline-block;
    margin: 0.35rem 0 0;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: rgba(244, 123, 32, 0.14);
    color: var(--nuh-orange-ink, #c2530a);
    font-size: 0.74rem;
    font-weight: 700;
}
.hw-card__go { min-height: 38px; padding: 0.35rem 1rem; font-size: 0.88rem; }

.hw__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    margin: 0.6rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--nuh-ink-muted, #52708c);
    font-size: 0.78rem;
}
.hw__legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.hw__key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--nuh-orange, #f47b20); }
.hw__key--home { background: var(--nuh-blue-deep, #14396e); }
.hw__key--growing { background: transparent; border: 2px solid var(--nuh-orange, #f47b20); }
.hw__key--waiting { width: 6px; height: 6px; background: rgba(20, 57, 110, 0.5); }

/* --- Beside the map --- */
.hub-globe-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}
.hub-globe-stats li { padding: 0.65rem 0.7rem; border-radius: 12px; background: rgba(27, 86, 164, 0.06); }
.hub-globe-stats strong { display: block; font-size: 1.4rem; line-height: 1.1; color: var(--nuh-blue-deep, #14396e); }
.hub-globe-stats span { display: block; margin-top: 0.2rem; font-size: 0.76rem; line-height: 1.3; color: var(--nuh-ink-muted, #52708c); }
.hub-map__h { margin: 0 0 0.45rem; font-size: 0.95rem; color: var(--nuh-blue-deep, #14396e); }
.hub-map__note { margin: 0 0 0.9rem; font-size: 0.88rem; color: var(--nuh-ink-muted, #52708c); line-height: 1.5; }
.hub-map__links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hub-where { display: grid; gap: 0.2rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.hub-where a {
    display: grid;
    grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.45rem;
    border-radius: 8px;
    color: var(--nuh-ink, #17324f);
    font-size: 0.88rem;
    text-decoration: none;
}
.hub-where a:hover { background: rgba(244, 123, 32, 0.08); }
.hub-where__name { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.hub-where__bar { height: 6px; overflow: hidden; border-radius: 999px; background: rgba(27, 86, 164, 0.1); }
.hub-where__bar i {
    display: block;
    width: var(--w);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--nuh-orange, #f47b20), var(--nuh-orange-soft, #ff9a4d));
}
.hub-where__n { font-size: 0.78rem; color: var(--nuh-ink-muted, #52708c); white-space: nowrap; }
.hub-country-pick--side { justify-content: flex-start; margin: 0 0 0.9rem; }
.hub-country-pick--side label { flex-basis: 100%; }
.hub-country-pick--side select { flex: 1 1 10rem; }

/* The country the list is filtered to. */
.hub-spot__kicker {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    color: var(--nuh-orange-ink, #c2530a);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.hub-spot__kicker .icon { width: 1.1em; height: 1.1em; }
.hub-spot__h { margin: 0.15rem 0 0.7rem; font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--nuh-blue-deep, #14396e); }
.hub-spot__facts { display: grid; gap: 0.1rem; margin: 0 0 0.8rem; }
.hub-spot__facts div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--nuh-line, rgba(27, 86, 164, 0.14));
}
.hub-spot__facts dt { color: var(--nuh-ink-muted, #52708c); }
.hub-spot__facts dd { margin: 0; font-weight: 700; text-align: right; }
.hub-spot__note { margin: 0 0 0.9rem; font-size: 0.88rem; line-height: 1.5; color: var(--nuh-ink-muted, #52708c); }
.hub-spot__note--up { display: flex; align-items: center; gap: 0.4rem; color: var(--nuh-orange-ink, #c2530a); font-weight: 600; }
.hub-spot__more { margin: 0.9rem 0 0; font-size: 0.86rem; }

@media (max-width: 780px) {
    /* minmax(0, ...), not 1fr: the zoom row is one line that scrolls, and a
       plain 1fr column would grow to fit it and push the page sideways. */
    .hub-map--world { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    /* A phone: the card sits under the map rather than over it — the map is
       barely taller than the card would be. */
    .hw-card { position: relative; width: auto; margin-top: 0.6rem; }   /* relative: the close button is placed inside it */
    .hw-pin.is-waiting { width: 4px; height: 4px; }
    .hub-globe-stats strong { font-size: 1.15rem; }
    .hub-atlas__switch { display: flex; }
    .hub-atlas__switch a { flex: 1 1 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .hw__inner,
    .hw-pin { transition: none; }
    .hw__arc,
    .hw-pin.is-growing::after { animation: none; }
}

/* ===============================================================
   Registration: the membership plan step (auth/register.php).
   Radio cards - the whole card is the target - with the native
   radio kept visible, so the choice reads as a choice everywhere.
   =============================================================== */
.reg-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.75rem; }
.reg-plan {
    position: relative;
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.95rem 1rem;
    border: 2px solid var(--nuh-line, rgba(27, 86, 164, 0.14));
    border-radius: 14px;
    background: var(--nuh-card, #fff);
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.reg-plan:hover { border-color: rgba(27, 86, 164, 0.35); }
.reg-plan input[type="radio"] { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin: 0.2rem 0 0; accent-color: var(--nuh-blue, #1b56a4); }
.reg-plan:has(input:checked) {
    border-color: var(--nuh-blue, #1b56a4);
    box-shadow: 0 0 0 3px rgba(27, 86, 164, 0.15), var(--nuh-shadow-sm, 0 2px 8px rgba(20, 57, 110, 0.08));
}
.reg-plan:has(input:focus-visible) { outline: 3px solid var(--nuh-blue, #1b56a4); outline-offset: 2px; }
.reg-plan.is-featured { border-color: rgba(244, 123, 32, 0.45); }
.reg-plan__body { display: grid; gap: 0.3rem; min-width: 0; }
.reg-plan__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; color: var(--nuh-ink, #17324f); font-size: 1rem; }
.reg-plan__tag {
    padding: 0.08rem 0.5rem;
    border-radius: 999px;
    background: rgba(244, 123, 32, 0.14);
    color: var(--nuh-orange-ink, #c2530a);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.reg-plan__price { font-size: 1.35rem; font-weight: 800; line-height: 1.15; color: var(--nuh-blue-deep, #14396e); }
.reg-plan__tagline { font-size: 0.86rem; line-height: 1.4; color: var(--nuh-ink-muted, #52708c); }
.reg-plan__features { display: grid; gap: 0.2rem; margin-top: 0.2rem; font-size: 0.84rem; color: var(--nuh-ink, #17324f); }
.reg-plan__features span { display: flex; gap: 0.35rem; align-items: flex-start; }
.reg-plan__features .icon { flex: 0 0 auto; width: 0.95rem; height: 0.95rem; margin-top: 0.15rem; color: #1f8a4c; }
.reg-plan--later { border-style: dashed; }
.reg-plan-note { display: flex; gap: 0.45rem; align-items: center; margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--nuh-ink-muted, #52708c); }
.reg-plan-note .icon { width: 1rem; height: 1rem; flex: 0 0 auto; }

/* The membership fee on the application page (auth/pending-approval.php). */
.reg-fee { margin: 0 0 1rem; padding: 1rem 1.1rem; border: 1px solid var(--nuh-line, rgba(27, 86, 164, 0.14)); border-radius: 14px; text-align: left; background: rgba(27, 86, 164, 0.04); }
.reg-fee__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; }
.reg-fee__amount { font-size: 1.4rem; font-weight: 800; color: var(--nuh-blue-deep, #14396e); }
.reg-fee__state { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; }
.reg-fee__state--paid { background: rgba(31, 138, 76, 0.12); color: #17663a; }
.reg-fee__state--unpaid { background: rgba(244, 123, 32, 0.14); color: var(--nuh-orange-ink, #c2530a); }
.reg-fee__state--verifying { background: rgba(27, 86, 164, 0.1); color: var(--nuh-blue-deep, #14396e); }
.reg-fee p { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--nuh-ink-muted, #52708c); }
.reg-fee .icon { width: 1rem; height: 1rem; }