/*!
 * NDHR — public marketing site design system
 * Ported from the approved static demo (hsbr-apps-html-demos/demos/ndhr/v1).
 * Every value here is lifted verbatim from the demo's inline styles.
 *
 * This stylesheet is intentionally standalone: the public site loads NO
 * Bootstrap and NO Metronic, so the demo's own reset and CSS-Grid layout
 * survive untouched. The admin theme is unaffected.
 */

/* =========================================================================
   1. TOKENS
   ========================================================================= */
:root {
    /* brand */
    --ndhr-blue-900: #08254e;
    --ndhr-blue-800: #0a356f;
    --ndhr-blue-700: #0B3F86;
    --ndhr-blue-600: #0a4f9e;
    --ndhr-blue-500: #005AA9;
    --ndhr-blue-450: #0e63b8;
    --ndhr-blue-400: #11507f;
    --ndhr-teal-500: #0e6b8f;
    --ndhr-cyan-500: #11A7E8;
    --ndhr-cyan-400: #19a9ec;
    --ndhr-green-700: #1f8a4d;
    --ndhr-green-600: #28A745;
    --ndhr-green-500: #36b14a;
    --ndhr-lime-600: #72C61B;
    --ndhr-lime-500: #8fd64b;
    --ndhr-lime-400: #7ed11f;
    --ndhr-danger: #e0453a;

    /* text */
    --ndhr-text: #1F2937;
    --ndhr-heading: #16324f;
    --ndhr-body: #566472;
    --ndhr-body-soft: #5b6976;
    --ndhr-body-alt: #4c5a68;
    --ndhr-nav: #33475b;
    --ndhr-nav-drawer: #23364a;
    --ndhr-muted: #8a97a4;
    --ndhr-muted-2: #94a1ad;
    --ndhr-placeholder: #9aa7b4;
    --ndhr-stat-label: #52606e;
    --ndhr-serve-desc: #6a7783;
    --ndhr-point: #3c4b59;
    --ndhr-hero-micro: #65727f;
    --ndhr-wordmark-sub: #5b6b7b;

    /* on dark */
    --ndhr-on-dark: #d3e2f3;
    --ndhr-on-dark-soft: #cfe0f2;
    --ndhr-on-dark-why: #bcd2ea;
    --ndhr-on-dark-cta: #e4eefb;
    --ndhr-topbar-text: #dbe7f5;
    --ndhr-topbar-tag: #9fc3ec;
    --ndhr-breadcrumb: #a9c6ea;
    --ndhr-footer-text: #b9c8dc;
    --ndhr-footer-muted: #9fb3cd;
    --ndhr-footer-link: #bcccde;
    --ndhr-footer-icon: #cdd9e8;
    --ndhr-footer-sub: #7f9ec7;
    --ndhr-footer-chevron: #5d7a9d;
    --ndhr-footer-bottom: #8499b4;

    /* surfaces */
    --ndhr-bg: #ffffff;
    --ndhr-bg-alt: #f7f8fa;
    --ndhr-bg-input: #fbfcfd;
    --ndhr-bg-img: #eef2f6;
    --ndhr-border: #eef1f4;
    --ndhr-border-input: #e2e8ee;
    --ndhr-border-chip: #e6ebf0;
    --ndhr-border-map: #e3e9ef;
    --ndhr-border-burger: #e4e9ee;
    --ndhr-divider: #f0f3f6;
    --ndhr-divider-drawer: #f2f5f8;
    --ndhr-watermark-num: #f0f4f8;
    --ndhr-watermark-num-2: #f1f5f9;
    --ndhr-loader-track: #e3ebf3;

    /* gradients */
    --accent: #005AA9;
    --grad: linear-gradient(120deg, #0B3F86, #28A745);
    --grad-wordmark: linear-gradient(95deg, #005AA9 0%, #0B3F86 38%, #28A745 70%, #72C61B 100%);
    --grad-hero-accent: linear-gradient(95deg, #28A745, #72C61B);
    --grad-stat: linear-gradient(120deg, #005AA9, #28A745);
    --grad-hero-bg: linear-gradient(180deg, #ffffff 0%, #f3f7fb 100%);
    --grad-banner: linear-gradient(135deg, #0a356f 0%, #0B3F86 55%, #0e6b8f 115%);
    --grad-band: linear-gradient(135deg, #0B3F86 0%, #0a4f9e 55%, #0e6b8f 100%);
    --grad-band-why: linear-gradient(135deg, #0a356f 0%, #0B3F86 60%, #11507f 100%);
    --grad-cta: linear-gradient(120deg, #0B3F86 0%, #1f8a4d 70%, #72C61B 130%);
    --grad-badge-blue: linear-gradient(135deg, #0e63b8, #0B3F86);
    --grad-badge-green: linear-gradient(135deg, #36b14a, #28A745);
    --grad-badge-cyan: linear-gradient(135deg, #19a9ec, #005AA9);
    --grad-badge-lime: linear-gradient(135deg, #7ed11f, #28A745);

    /* Elevate U sub-brand — navy + green + gold */
    --eu-navy: #082a55;
    --eu-forest: #14603f;
    --eu-green: #1E7A4B;
    --eu-green-mid: #2f9d61;
    --eu-green-bright: #3fb968;
    --eu-gold: #C9A227;
    --eu-gold-light: #e3b93f;
    --eu-gold-ink: #10305c;
    --eu-panel-border: #eaeff4;
    --eu-challenge-text: #33475b;
    --eu-muted: #6a7783;
    --grad-eu-hero: linear-gradient(135deg, #082a55 0%, #0B3F86 54%, #14603f 120%);
    --grad-eu-band: linear-gradient(135deg, #082a55 0%, #0B3F86 58%, #14603f 125%);
    --grad-eu-cta: linear-gradient(120deg, #0B3F86 0%, #14603f 68%, #1E7A4B 122%);
    --grad-eu-quote: linear-gradient(120deg, #0B3F86, #14603f);
    --grad-eu-gold: linear-gradient(120deg, #C9A227, #e3b93f);
    --grad-badge-gold: linear-gradient(135deg, #e3b93f, #C9A227);
    --grad-badge-eu-green: linear-gradient(135deg, #2f9d61, #1E7A4B);

    /* layout */
    --ndhr-container: 1200px;
    --ndhr-container-narrow: 1140px;
    --ndhr-gutter: clamp(20px, 5vw, 56px);
    --ndhr-section-y: clamp(64px, 8vw, 108px);
    --ndhr-section-y-sm: clamp(58px, 7vw, 100px);
    --ndhr-band-y: clamp(60px, 7vw, 96px);
    --header-h: 108px;

    /* radii */
    --r-pill: 999px;
    --r-cta: 26px;
    --r-xl: 22px;
    --r-lg: 20px;
    --r-md: 18px;
    --r-sm: 16px;
    --r-badge: 15px;
    --r-badge-sm: 14px;
    --r-btn: 12px;
    --r-input: 11px;
    --r-tile: 10px;

    /* shadows */
    --sh-card: 0 6px 22px rgba(11, 63, 134, 0.05);
    --sh-card-sm: 0 5px 18px rgba(11, 63, 134, 0.05);
    --sh-card-hover: 0 18px 40px rgba(11, 63, 134, 0.12);
    --sh-card-hover-lg: 0 20px 44px rgba(11, 63, 134, 0.12);
    --sh-card-hover-sm: 0 16px 36px rgba(11, 63, 134, 0.11);
    --sh-btn: 0 12px 26px rgba(11, 63, 134, 0.22);
    --sh-btn-hover: 0 16px 32px rgba(11, 63, 134, 0.30);
    --sh-btn-white: 0 14px 30px rgba(0, 0, 0, 0.18);
    --sh-form: 0 16px 44px rgba(11, 63, 134, 0.08);
    --sh-hero-img: 0 26px 60px rgba(11, 63, 134, 0.12);
    --sh-img: 0 18px 44px rgba(11, 63, 134, 0.12);
    --sh-header: 0 1px 0 rgba(11, 63, 134, 0.06);
    --sh-header-scrolled: 0 8px 26px rgba(11, 63, 134, 0.10);

    /* motion */
    --t-fast: .18s ease;
    --t-base: .2s ease;
    --t-card: .25s ease;
    --t-reveal: .65s cubic-bezier(.22, .61, .36, 1);

    /* type */
    --font-head: 'Poppins', sans-serif;
    --font-body: 'Open Sans', system-ui, sans-serif;
    --fs-h1: clamp(33px, 5.2vw, 54px);
    --fs-h1-banner: clamp(32px, 4.6vw, 50px);
    --fs-h2: clamp(27px, 3.6vw, 40px);
    --fs-h2-sub: clamp(26px, 3.4vw, 38px);
    --fs-h2-cta: clamp(24px, 3.2vw, 36px);
    --fs-lead: clamp(16px, 1.5vw, 18px);
    --fs-stat: clamp(38px, 4.4vw, 52px);
    --fs-body: 17px;
    --fs-card: 15px;
    --fs-eyebrow: 13px;
}

/* =========================================================================
   2. BASE RESET (verbatim from the demo)
   ========================================================================= */
* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ndhr-text);
    background: var(--ndhr-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.75;
}

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }
input::placeholder, textarea::placeholder { color: var(--ndhr-placeholder); }
:focus-visible { outline: 2px solid var(--ndhr-cyan-500); outline-offset: 2px; }

/* Components set their own `display`, which would otherwise beat the UA's
   `[hidden] { display: none }` — the insights filter relies on this. */
[hidden] { display: none !important; }

/* `hidden` rather than `clip`: same effect here, but supported before Safari 16. */
.ndhr-site { width: 100%; overflow-x: hidden; background: var(--ndhr-bg); }

/* Locks the page while the mobile drawer is open. */
body.ndhr-no-scroll { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    html { scroll-behavior: auto; }
}

/* =========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================= */
.ndhr-container {
    max-width: var(--ndhr-container);
    margin: 0 auto;
    padding: 0 var(--ndhr-gutter);
}

.ndhr-container--narrow { max-width: var(--ndhr-container-narrow); }

.ndhr-section { padding: var(--ndhr-section-y) 0; }
.ndhr-section--sm { padding: var(--ndhr-section-y-sm) 0; }
.ndhr-section--band { padding: var(--ndhr-band-y) 0; }
.ndhr-section--alt { background: var(--ndhr-bg-alt); }
.ndhr-section--white { background: var(--ndhr-bg); }
.ndhr-section--rel { position: relative; overflow: hidden; }

/* Decorative watermark + blobs */
.ndhr-watermark {
    position: absolute;
    pointer-events: none;
    user-select: none;
}

.ndhr-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

/* Scroll reveal — JS flips these on */
[data-reveal] { will-change: opacity, transform; }

.ndhr-reveal-init {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity var(--t-reveal), transform var(--t-reveal);
}

.ndhr-reveal-in { opacity: 1; transform: none; }

/* =========================================================================
   4. LOADER
   ========================================================================= */
.ndhr-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--grad-hero-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    opacity: 1;
    transition: opacity .5s ease;
}

.ndhr-loader.is-hidden { opacity: 0; pointer-events: none; }

/* Only JS removes the splash, so without JS it would cover the whole site.
   `.ndhr-js` is set by an inline script in the layout the moment JS runs. */
html:not(.ndhr-js) .ndhr-loader { display: none; }

/* Same reasoning for the nav: the drawer needs JS, so without it fall back to
   showing the full nav (it wraps) rather than leaving no navigation at all. */
html:not(.ndhr-js) .ndhr-nav { display: flex !important; flex-wrap: wrap; }
html:not(.ndhr-js) .ndhr-burger { display: none !important; }
.ndhr-loader__mark { width: 88px; height: auto; filter: drop-shadow(0 10px 22px rgba(11, 63, 134, 0.18)); }
.ndhr-loader__label {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .26em;
    color: var(--ndhr-muted);
}

/* =========================================================================
   5. TOP BAR
   ========================================================================= */
.ndhr-topbar {
    background: var(--ndhr-blue-700);
    color: var(--ndhr-topbar-text);
    font-size: 13.5px;
}

.ndhr-topbar__inner {
    max-width: var(--ndhr-container);
    margin: 0 auto;
    padding: 9px var(--ndhr-gutter);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    align-items: center;
    justify-content: space-between;
}

.ndhr-topbar__group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    align-items: center;
}

.ndhr-topbar__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color var(--t-fast);
}

a.ndhr-topbar__item:hover { color: #ffffff; }
.ndhr-topbar__item i { color: var(--ndhr-lime-600); font-size: 13px; }

.ndhr-topbar__right { display: flex; align-items: center; gap: 14px; }

.ndhr-topbar__tagline {
    font-family: var(--font-head);
    font-weight: 600;
    letter-spacing: .12em;
    font-size: 12px;
    color: var(--ndhr-topbar-tag);
}

.ndhr-topbar__socials { display: inline-flex; gap: 10px; }
.ndhr-topbar__socials a { transition: color var(--t-fast); }
.ndhr-topbar__socials a:hover { color: var(--ndhr-lime-600); }

.ndhr-topbar__login {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 12.5px;
    transition: background var(--t-fast), color var(--t-fast);
}

.ndhr-topbar__login:hover { background: rgba(255, 255, 255, 0.14); color: #ffffff; }
.ndhr-topbar__login i { font-size: 12.5px; color: var(--ndhr-lime-600); }

/* =========================================================================
   6. HEADER
   ========================================================================= */
.ndhr-headroot { position: fixed; top: 0; left: 0; right: 0; z-index: 60; }
.ndhr-header-spacer { height: var(--header-h); }

/* site.js measures the real height into --header-h. These fallbacks keep the
   spacer close to reality before that runs (and if it never does) — the top bar
   wraps on phones, roughly doubling the header. */
@media (max-width: 767.98px) { :root { --header-h: 150px; } }
@media (max-width: 575.98px) { :root { --header-h: 195px; } }

.ndhr-header {
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    box-shadow: var(--sh-header);
    transition: box-shadow var(--t-card);
}

.ndhr-headroot.is-scrolled .ndhr-header { box-shadow: var(--sh-header-scrolled); }

.ndhr-header__inner {
    max-width: var(--ndhr-container);
    margin: 0 auto;
    padding: 12px var(--ndhr-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

/* Logo / wordmark */
.ndhr-logo { display: flex; align-items: center; gap: 13px; }
.ndhr-logo__mark { height: 46px; width: auto; }
.ndhr-logo__text { display: flex; flex-direction: column; line-height: 1; }

.ndhr-logo__name {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 25px;
    letter-spacing: .02em;
    background: var(--grad-wordmark);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--ndhr-blue-700);
}

.ndhr-logo__sub {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 8.5px;
    letter-spacing: .22em;
    color: var(--ndhr-wordmark-sub);
    margin-top: 3px;
}

/* Desktop nav */
.ndhr-nav { display: flex; align-items: center; gap: 21px; }

.ndhr-nav__link {
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 15px;
    color: var(--ndhr-nav);
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: color var(--t-fast);
}

.ndhr-nav__link:hover { color: var(--accent); }

.ndhr-nav__link.is-active {
    color: var(--ndhr-blue-500);
    font-weight: 700;
    border-bottom-color: var(--ndhr-lime-600);
}

/* Burger */
.ndhr-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--r-input);
    border: 1.5px solid var(--ndhr-border-burger);
    background: #fff;
    color: var(--ndhr-blue-700);
    cursor: pointer;
}

.ndhr-burger i { font-size: 23px; }

/* Mobile drawer */
.ndhr-drawer {
    display: none;
    border-top: 1px solid var(--ndhr-border);
    background: #fff;
    padding: 10px var(--ndhr-gutter) 22px;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 18px 30px rgba(11, 63, 134, 0.12);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
}

.ndhr-drawer.is-open { display: flex; }

.ndhr-drawer__link {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 16px;
    color: var(--ndhr-nav-drawer);
    padding: 13px 6px;
    border-bottom: 1px solid var(--ndhr-divider-drawer);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: color var(--t-fast);
}

.ndhr-drawer__link:hover { color: var(--accent); }
.ndhr-drawer__link.is-active { color: var(--ndhr-blue-500); }
.ndhr-drawer__link i { font-size: 13px; color: #b6c2cd; }
.ndhr-drawer__cta { margin-top: 14px; }

/* Header CTA button */
.ndhr-header__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: var(--r-input);
    background: var(--grad);
    color: #fff;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 14.5px;
    box-shadow: 0 8px 20px rgba(11, 63, 134, 0.20);
    transition: transform var(--t-base), box-shadow var(--t-base), filter var(--t-base);
}

.ndhr-header__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(11, 63, 134, 0.28);
    filter: brightness(1.05);
}

/* =========================================================================
   7. BUTTONS
   ========================================================================= */
.ndhr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 16px;
    border-radius: var(--r-btn);
    cursor: pointer;
    border: 0;
    transition: transform var(--t-base), box-shadow var(--t-base), filter var(--t-base), border-color var(--t-base), color var(--t-base), background var(--t-base);
}

.ndhr-btn--primary {
    padding: 15px 28px;
    background: var(--grad);
    color: #fff;
    box-shadow: var(--sh-btn);
}

.ndhr-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-btn-hover);
    filter: brightness(1.05);
}

.ndhr-btn--outline {
    padding: 14px 26px;
    background: #fff;
    border: 1.6px solid rgba(11, 63, 134, 0.22);
    color: var(--ndhr-blue-700);
}

.ndhr-btn--outline:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    color: var(--accent);
}

.ndhr-btn--white {
    padding: 16px 30px;
    border-radius: 13px;
    background: #fff;
    color: var(--ndhr-blue-700);
    font-weight: 700;
    box-shadow: var(--sh-btn-white);
}

.ndhr-btn--white:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
}

.ndhr-btn--ghost {
    padding: 15px 28px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.12);
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    color: #fff;
}

.ndhr-btn--ghost:hover { background: rgba(255, 255, 255, 0.22); }

.ndhr-btn--reset {
    margin-top: 26px;
    padding: 13px 26px;
    border-radius: var(--r-input);
    border: 1.6px solid rgba(11, 63, 134, 0.22);
    background: #fff;
    color: var(--ndhr-blue-700);
    font-size: 15px;
}

.ndhr-btn--reset:hover { border-color: var(--ndhr-blue-500); color: var(--ndhr-blue-500); }

.ndhr-btn--block { width: 100%; }

/* =========================================================================
   8. PAGE BANNER
   ========================================================================= */
.ndhr-banner {
    position: relative;
    overflow: hidden;
    background: var(--grad-banner);
    padding: clamp(54px, 7vw, 92px) 0 clamp(46px, 6vw, 74px);
}

.ndhr-banner__inner { position: relative; }

.ndhr-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    color: var(--ndhr-breadcrumb);
    margin-bottom: 16px;
    font-family: var(--font-head);
    font-weight: 500;
}

.ndhr-breadcrumb a { transition: color var(--t-fast); }
.ndhr-breadcrumb a:hover { color: #fff; }
.ndhr-breadcrumb i { font-size: 11px; }
.ndhr-breadcrumb__current { color: var(--ndhr-lime-500); }

.ndhr-banner__title {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: var(--fs-h1-banner);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
    color: #fff;
}

.ndhr-banner__lead {
    margin: 16px 0 0;
    font-size: var(--fs-lead);
    line-height: 1.7;
    color: var(--ndhr-on-dark);
}

.ndhr-banner__pills { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* =========================================================================
   9. SECTION HEADING
   ========================================================================= */
.ndhr-heading { max-width: 640px; }
.ndhr-heading--center { text-align: center; margin-left: auto; margin-right: auto; }

.ndhr-heading__eyebrow {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--fs-eyebrow);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ndhr-blue-500);
    margin-bottom: 14px;
}

.ndhr-heading__title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--fs-h2-sub);
    line-height: 1.16;
    margin: 0;
    color: var(--ndhr-blue-700);
}

.ndhr-heading--lg .ndhr-heading__title { font-size: var(--fs-h2); }
.ndhr-heading--tight .ndhr-heading__title { letter-spacing: -0.01em; }
.ndhr-heading--dark .ndhr-heading__title,
.ndhr-heading--left .ndhr-heading__title { line-height: 1.18; }
.ndhr-heading--sm .ndhr-heading__title { font-size: clamp(25px, 3.2vw, 36px); }

.ndhr-heading__subtitle {
    margin: 16px 0 0;
    font-size: var(--fs-body);
    line-height: 1.7;
    color: var(--ndhr-body);
}

.ndhr-heading--dark .ndhr-heading__eyebrow { color: var(--ndhr-lime-500); margin-bottom: 12px; }
.ndhr-heading--dark .ndhr-heading__title { color: #fff; }
.ndhr-heading--dark .ndhr-heading__subtitle { color: var(--ndhr-on-dark-soft); }

.ndhr-heading__badgerow { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }

/* =========================================================================
   10. GRIDS
   ========================================================================= */
/* Minimums match the demo exactly; they were lowered site-wide so nothing
   overflows on small phones. Distinct values: 150/178/180/200/220/240/250/275. */
.ndhr-grid { display: grid; gap: 24px; }
.ndhr-grid--275 { grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }
.ndhr-grid--250 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.ndhr-grid--250-26 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px; }
.ndhr-grid--240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.ndhr-grid--220 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; }
.ndhr-grid--200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; }
.ndhr-grid--200-20 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.ndhr-grid--190 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 17px; }
.ndhr-grid--180 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; }
.ndhr-grid--178 { grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 20px; }
.ndhr-grid--150 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 22px; }

/* =========================================================================
   11. CARDS
   ========================================================================= */
.ndhr-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--ndhr-border);
    border-radius: var(--r-lg);
    padding: 32px 28px;
    box-shadow: var(--sh-card);
    transition: transform var(--t-card), box-shadow var(--t-card);
}

.ndhr-card:hover { transform: translateY(-6px); box-shadow: var(--sh-card-hover); }

.ndhr-card--lgpad { padding: 34px 30px; }
.ndhr-card--smpad { padding: 30px 26px; border-radius: var(--r-md); }
.ndhr-card--xspad { padding: 26px 22px; border-radius: var(--r-md); }

.ndhr-card--hover-lg:hover { box-shadow: var(--sh-card-hover-lg); }
.ndhr-card--hover-5:hover { transform: translateY(-5px); }
.ndhr-card--hover-sm:hover { transform: translateY(-5px); box-shadow: var(--sh-card-hover-sm); }

.ndhr-card__title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    margin: 0 0 9px;
    color: var(--ndhr-heading);
}

.ndhr-card__title--lg { font-size: 20px; }
.ndhr-card__title--mb6 { margin-bottom: 6px; }
.ndhr-card__title--mb7 { margin-bottom: 7px; }
.ndhr-card__title--mb8 { margin-bottom: 8px; }
.ndhr-card__title--mb10 { margin-bottom: 10px; }
.ndhr-card__title--md { font-size: 18.5px; line-height: 1.25; }
.ndhr-card__title--md19 { font-size: 19px; line-height: 1.25; }
.ndhr-card__title--sm { font-size: 17.5px; }
.ndhr-card__title--xs { font-size: 16.5px; }

.ndhr-card__desc {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--ndhr-body-soft);
}

.ndhr-card__desc--lg { font-size: 15.5px; line-height: 1.75; }
.ndhr-card__desc--md { font-size: 15px; }
.ndhr-card__desc--sm { font-size: 14px; line-height: 1.6; color: var(--eu-muted); }
.ndhr-card__desc--serve { font-size: 13.5px; line-height: 1.6; color: var(--ndhr-serve-desc); }
.ndhr-card__desc--tight { line-height: 1.65; }

/* Icon badge */
.ndhr-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 58px;
    height: 58px;
    border-radius: var(--r-badge);
    margin-bottom: 20px;
    color: #fff;
}

.ndhr-badge i { color: #fff; font-size: 25px; }

.ndhr-badge--62 { width: 62px; height: 62px; border-radius: var(--r-sm); }
.ndhr-badge--62 i { font-size: 27px; }
.ndhr-badge--60 { width: 60px; height: 60px; border-radius: var(--r-sm); }
.ndhr-badge--60 i { font-size: 26px; }
.ndhr-badge--56 { width: 56px; height: 56px; border-radius: var(--r-badge-sm); }
.ndhr-badge--56 i { font-size: 25px; }
.ndhr-badge--54 { width: 54px; height: 54px; border-radius: var(--r-badge-sm); margin-bottom: 0; }
.ndhr-badge--54 i { font-size: 24px; }
.ndhr-badge--52 { width: 52px; height: 52px; border-radius: var(--r-badge-sm); margin-bottom: 16px; }
.ndhr-badge--52 i { font-size: 23px; }
.ndhr-badge--50 { width: 50px; height: 50px; border-radius: 13px; margin-bottom: 0; }
.ndhr-badge--50 i { font-size: 21px; }

.ndhr-badge--blue { background: var(--grad-badge-blue); }
.ndhr-badge--green { background: var(--grad-badge-green); }
.ndhr-badge--cyan { background: var(--grad-badge-cyan); }
.ndhr-badge--lime { background: var(--grad-badge-lime); }

.ndhr-badge--glow-blue { box-shadow: 0 10px 22px rgba(0, 90, 169, 0.22); }
.ndhr-badge--glow-green { box-shadow: 0 10px 22px rgba(40, 167, 69, 0.22); }

/* Flat tinted badge (Who We Serve) */
.ndhr-tint {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: var(--r-badge-sm);
    margin-bottom: 16px;
}

.ndhr-tint i { font-size: 24px; }
.ndhr-tint--blue { background: rgba(0, 90, 169, 0.10); color: var(--ndhr-blue-500); }
.ndhr-tint--green { background: rgba(40, 167, 69, 0.12); color: var(--ndhr-green-600); }

/* Watermark numeral */
.ndhr-num {
    position: absolute;
    top: 24px;
    right: 28px;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 46px;
    line-height: 1;
    color: var(--ndhr-watermark-num);
    pointer-events: none;
}

.ndhr-num--40 { top: 22px; right: 26px; font-size: 40px; color: var(--ndhr-watermark-num-2); }
.ndhr-num--44 { font-size: 44px; color: var(--ndhr-watermark-num-2); }

/* Service card head (badge beside title) */
.ndhr-card__head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.ndhr-card__head .ndhr-badge { margin-bottom: 0; }

.ndhr-card__points {
    display: flex;
    flex-direction: column;
    gap: 9px;
    border-top: 1px solid var(--ndhr-divider);
    padding-top: 18px;
    margin-top: 18px;
}

/* =========================================================================
   12. CHECK ITEMS
   ========================================================================= */
.ndhr-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--ndhr-nav);
}

.ndhr-check i { color: var(--ndhr-green-600); font-size: 18px; flex: none; }

.ndhr-check--bullet {
    align-items: flex-start;
    font-size: 14.5px;
    color: var(--ndhr-point);
    line-height: 1.5;
}

.ndhr-check--bullet i { font-size: 16px; margin-top: 2px; }

.ndhr-check--inline { display: inline-flex; gap: 8px; }
.ndhr-check--inline i { font-size: inherit; }

.ndhr-checkgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px 22px;
    margin-top: 26px;
}

/* =========================================================================
   13. STATS
   ========================================================================= */
.ndhr-stats {
    background: var(--ndhr-bg-alt);
    border-top: 1px solid var(--ndhr-border);
    border-bottom: 1px solid var(--ndhr-border);
}

.ndhr-stats__inner {
    max-width: var(--ndhr-container);
    margin: 0 auto;
    padding: clamp(36px, 5vw, 54px) var(--ndhr-gutter);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 28px;
}

.ndhr-stat { text-align: center; }

.ndhr-stat__num {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: var(--fs-stat);
    line-height: 1;
    background: var(--grad-stat);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--ndhr-blue-500);
}

.ndhr-stat__label {
    margin-top: 10px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--ndhr-stat-label);
    letter-spacing: .01em;
}

/* =========================================================================
   14. HERO
   ========================================================================= */
.ndhr-hero {
    position: relative;
    overflow: hidden;
    background: var(--grad-hero-bg);
    padding: clamp(46px, 7vw, 86px) 0 clamp(56px, 8vw, 96px);
}

.ndhr-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(34px, 5vw, 64px);
    align-items: center;
}

.ndhr-hero__title {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: var(--fs-h1);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--ndhr-blue-700);
}

.ndhr-hero__accent {
    background: var(--grad-hero-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--ndhr-green-600);
}

.ndhr-hero__lead {
    margin: 22px 0 0;
    max-width: 560px;
    font-size: var(--fs-lead);
    line-height: 1.75;
    color: var(--ndhr-body-alt);
}

.ndhr-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* The claims row sets its own size; the shared check style must not re-assert 15px. */
.ndhr-hero__micro .ndhr-check { font-size: inherit; }

.ndhr-hero__micro {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: 30px;
    font-size: 14px;
    color: var(--ndhr-hero-micro);
}

.ndhr-hero__figure {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    min-height: 340px;
    box-shadow: var(--sh-hero-img);
    background: var(--ndhr-bg-img);
}

.ndhr-hero__figure img { width: 100%; height: 100%; object-fit: cover; }

.ndhr-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 63, 134, 0) 50%, rgba(11, 63, 134, 0.28));
    pointer-events: none;
}

.ndhr-hero__chip {
    position: absolute;
    left: 18px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--r-badge-sm);
    background: #fff;
    box-shadow: 0 14px 30px rgba(11, 63, 134, 0.16);
}

.ndhr-hero__chip-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: var(--r-input);
    background: var(--grad-badge-lime);
}

.ndhr-hero__chip-badge i { color: #fff; font-size: 20px; }

.ndhr-hero__chip-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 14px;
    color: var(--ndhr-heading);
    line-height: 1.2;
}

.ndhr-hero__chip-desc { font-size: 12px; color: var(--ndhr-muted); line-height: 1.4; }

/* Hero eyebrow pill */
.ndhr-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: var(--r-pill);
    background: rgba(0, 90, 169, 0.07);
    border: 1px solid rgba(0, 90, 169, 0.12);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .13em;
    color: var(--ndhr-blue-500);
    margin-bottom: 22px;
}

.ndhr-hero__eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ndhr-lime-600);
    display: inline-block;
}

/* =========================================================================
   15. IMAGE + TEXT SPLIT
   ========================================================================= */
.ndhr-split {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(34px, 5vw, 64px);
    align-items: center;
}

.ndhr-split--reverse .ndhr-split__figure { order: -1; }

.ndhr-split__figure {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    min-height: 300px;
    box-shadow: var(--sh-img);
    background: var(--ndhr-bg-img);
}

.ndhr-split__figure img { width: 100%; height: 100%; object-fit: cover; }

.ndhr-split__body {
    margin: 0 0 16px;
    font-size: var(--fs-body);
    line-height: 1.8;
    color: var(--ndhr-body);
}

/* =========================================================================
   16. GLASS CARDS (on dark bands)
   ========================================================================= */
.ndhr-glass {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--r-lg);
    padding: 34px 30px;
}

.ndhr-glass--blur {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.ndhr-glass__title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 21px;
    margin: 0 0 12px;
    color: #fff;
}

.ndhr-glass__body { margin: 0; font-size: 16px; line-height: 1.8; color: var(--ndhr-on-dark-soft); }

/* Why-card variant */
.ndhr-glass--why {
    text-align: center;
    padding: 30px 20px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: transform var(--t-card), background var(--t-card);
}

.ndhr-glass--why:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.09); }

.ndhr-glass__ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1.6px solid rgba(143, 214, 75, 0.6);
    margin-bottom: 18px;
}

.ndhr-glass__ring i { color: var(--ndhr-lime-500); font-size: 28px; }

.ndhr-glass--why .ndhr-glass__title { font-size: 16.5px; margin-bottom: 8px; }
.ndhr-glass--why .ndhr-glass__body { font-size: 14px; line-height: 1.65; color: var(--ndhr-on-dark-why); }

/* Step variant */
.ndhr-glass--step { border-radius: var(--r-md); padding: 30px 26px; }
.ndhr-glass--step .ndhr-glass__title { margin-bottom: 8px; }
.ndhr-glass--step .ndhr-glass__body { font-size: 14.5px; line-height: 1.65; }

.ndhr-glass__num {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 34px;
    line-height: 1;
    color: var(--ndhr-lime-500);
    margin-bottom: 14px;
}

.ndhr-glass--step .ndhr-glass__title { font-size: 18px; }

/* =========================================================================
   17. CTA BAND
   ========================================================================= */
.ndhr-cta-wrap { padding: clamp(20px, 4vw, 40px) var(--ndhr-gutter) clamp(48px, 6vw, 72px); }
.ndhr-cta-wrap--flush { padding-bottom: 0; }

.ndhr-cta {
    position: relative;
    overflow: hidden;
    max-width: var(--ndhr-container-narrow);
    margin: 0 auto;
    border-radius: var(--r-cta);
    background: var(--grad-cta);
    padding: clamp(40px, 5vw, 60px) clamp(28px, 5vw, 64px);
}

.ndhr-cta--lg { padding: clamp(40px, 5vw, 64px) clamp(28px, 5vw, 64px); }

.ndhr-cta__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 28px;
    align-items: center;
}

.ndhr-cta__title {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: var(--fs-h2-cta);
    line-height: 1.15;
    margin: 0;
    color: #fff;
}

.ndhr-cta--lg .ndhr-cta__title { font-size: clamp(26px, 3.4vw, 40px); }

.ndhr-cta__body {
    margin: 14px 0 0;
    font-size: var(--fs-body);
    line-height: 1.7;
    color: var(--ndhr-on-dark-cta);
    max-width: 560px;
}

.ndhr-cta--lg .ndhr-cta__body { max-width: 620px; }
.ndhr-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Light notify strip */
.ndhr-notify-wrap { padding: 0 var(--ndhr-gutter) clamp(56px, 7vw, 88px); }

.ndhr-notify {
    max-width: var(--ndhr-container-narrow);
    margin: 0 auto;
    background: var(--ndhr-bg-alt);
    border: 1px solid var(--ndhr-border);
    border-radius: var(--r-xl);
    padding: clamp(30px, 4vw, 46px);
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 22px;
    align-items: center;
}

.ndhr-notify__title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(21px, 2.6vw, 28px);
    line-height: 1.2;
    margin: 0;
    color: var(--ndhr-blue-700);
}

.ndhr-notify__body { margin: 12px 0 0; font-size: 16px; line-height: 1.65; color: var(--ndhr-body); }
.ndhr-notify__actions { display: flex; justify-content: flex-start; }

/* =========================================================================
   18. PILLS / CHIPS
   ========================================================================= */
.ndhr-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: var(--r-pill);
    border: 1px solid var(--ndhr-border-chip);
    background: #fff;
    color: var(--ndhr-nav);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}

.ndhr-chip.is-active { background: var(--ndhr-blue-500); border-color: var(--ndhr-blue-500); color: #fff; }

.ndhr-chip--audience {
    padding: 8px 16px;
    font-size: 14px;
    cursor: default;
}

.ndhr-chip--audience i { color: var(--ndhr-green-600); font-size: 14px; }
.ndhr-chip--audience-alt { background: var(--ndhr-bg-alt); }

.ndhr-chip--jump {
    padding: 11px 20px;
    border-radius: var(--r-input);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 14.5px;
    gap: 9px;
}

.ndhr-chip--jump:hover { background: rgba(255, 255, 255, 0.2); }

.ndhr-chiprow { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.ndhr-note {
    text-align: center;
    font-size: 14.5px;
    color: var(--ndhr-muted);
    margin: 18px 0 0;
}

.ndhr-note i { color: var(--ndhr-lime-600); margin-right: 7px; }

/* Audience strip */
.ndhr-audience {
    margin-top: 34px;
    padding: 24px 26px;
    background: var(--ndhr-bg-alt);
    border-radius: var(--r-md);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
}

.ndhr-audience--bordered { background: #fff; border: 1px solid var(--ndhr-border); }

.ndhr-audience__label {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 14px;
    color: var(--ndhr-blue-700);
}

/* =========================================================================
   19. ARTICLE CARD
   ========================================================================= */
.ndhr-article {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ndhr-border);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-card);
    transition: transform var(--t-card), box-shadow var(--t-card);
}

.ndhr-article:hover { transform: translateY(-6px); box-shadow: var(--sh-card-hover-lg); }

.ndhr-article__media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--ndhr-bg-img);
    overflow: hidden;
    border-bottom: 1px solid var(--ndhr-border);
}

.ndhr-article__media img { width: 100%; height: 100%; object-fit: cover; }

.ndhr-article__cat {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 13px;
    border-radius: var(--r-pill);
    color: #fff;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.ndhr-article__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }

.ndhr-article__title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.35;
    margin: 0 0 10px;
    color: var(--ndhr-heading);
}

.ndhr-article__excerpt {
    margin: 0 0 18px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ndhr-body-soft);
    flex: 1;
}

.ndhr-article__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--ndhr-divider);
    padding-top: 16px;
}

.ndhr-article__meta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ndhr-muted);
}

.ndhr-article__more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ndhr-blue-500);
}

/* =========================================================================
   20. CONTACT CARDS / MAP
   ========================================================================= */
.ndhr-contact-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--ndhr-border);
    border-radius: var(--r-sm);
    padding: 22px;
    box-shadow: var(--sh-card-sm);
    transition: transform var(--t-base), box-shadow var(--t-base);
}

a.ndhr-contact-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(11, 63, 134, 0.10); }

.ndhr-contact-card__text { display: flex; flex-direction: column; }

.ndhr-contact-card__label {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ndhr-muted);
}

.ndhr-contact-card__value {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 17px;
    color: var(--ndhr-heading);
    margin-top: 3px;
    word-break: break-word;
}

.ndhr-contact-card__value--plain {
    font-weight: 400;
    font-family: var(--font-body);
    font-size: 15.5px;
    color: var(--ndhr-nav);
    line-height: 1.6;
}

.ndhr-map {
    position: relative;
    border-radius: var(--r-sm);
    overflow: hidden;
    border: 1px solid var(--ndhr-border-map);
    box-shadow: var(--sh-card-sm);
    min-height: 150px;
}

.ndhr-map iframe { width: 100%; height: 185px; border: 0; display: block; }
.ndhr-map--tall { min-height: 170px; }
.ndhr-map--tall iframe { height: 235px; }

/* =========================================================================
   21. FORMS
   ========================================================================= */
.ndhr-formcard {
    background: #fff;
    border: 1px solid var(--ndhr-border);
    border-radius: var(--r-xl);
    padding: clamp(26px, 3vw, 40px);
    box-shadow: var(--sh-form);
}

.ndhr-form { display: flex; flex-direction: column; gap: 18px; }

.ndhr-formrow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
}

.ndhr-field { display: flex; flex-direction: column; gap: 7px; }

.ndhr-field__label {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 14px;
    color: var(--ndhr-nav);
}

.ndhr-field__req { color: var(--ndhr-danger); }
.ndhr-field__opt { color: var(--ndhr-placeholder); font-weight: 400; }

.ndhr-input {
    padding: 13px 15px;
    border-radius: var(--r-input);
    border: 1.5px solid var(--ndhr-border-input);
    background: var(--ndhr-bg-input);
    outline: none;
    font-size: 15px;
    color: var(--ndhr-text);
    transition: border-color var(--t-fast);
    width: 100%;
}

.ndhr-input:focus { border-color: var(--ndhr-cyan-500); }
.ndhr-input.is-invalid { border-color: var(--ndhr-danger); }

textarea.ndhr-input { resize: vertical; min-height: 110px; line-height: 1.6; }
textarea.ndhr-input--tall { min-height: 120px; }

.ndhr-field__error { font-size: 12.5px; color: var(--ndhr-danger); }

.ndhr-form__note {
    text-align: center;
    font-size: 12.5px;
    color: var(--ndhr-muted-2);
    margin: 0;
    line-height: 1.6;
}

/* Success state */
.ndhr-success { text-align: center; padding: 34px 10px; }

.ndhr-success__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: var(--grad-badge-lime);
    margin-bottom: 22px;
    box-shadow: 0 14px 30px rgba(40, 167, 69, 0.28);
}

.ndhr-success__icon i { color: #fff; font-size: 42px; }

.ndhr-success__title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 24px;
    margin: 0 0 10px;
    color: var(--ndhr-blue-700);
}

.ndhr-success__body {
    margin: 0 auto;
    max-width: 380px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ndhr-body);
}

/* Contact split */
.ndhr-contact-split {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(26px, 4vw, 44px);
    align-items: start;
}

.ndhr-contact-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }

/* =========================================================================
   22. FOOTER
   ========================================================================= */
.ndhr-footer { background: var(--ndhr-blue-900); color: var(--ndhr-footer-text); }

.ndhr-footer__inner {
    max-width: var(--ndhr-container);
    margin: 0 auto;
    padding: clamp(50px, 6vw, 76px) var(--ndhr-gutter) 36px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px 32px;
}

.ndhr-footer__logo { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.ndhr-footer__logo img { height: 44px; width: auto; }

.ndhr-footer__name {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 23px;
    letter-spacing: .02em;
    color: #fff;
    line-height: 1;
}

.ndhr-footer__sub {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 8px;
    letter-spacing: .20em;
    color: var(--ndhr-footer-sub);
    margin-top: 3px;
}

.ndhr-footer__blurb {
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--ndhr-footer-muted);
    max-width: 320px;
    margin: 0 0 18px;
}

.ndhr-footer__socials { display: flex; gap: 11px; }

.ndhr-footer__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--r-tile);
    background: rgba(255, 255, 255, 0.08);
    color: var(--ndhr-footer-icon);
    transition: background var(--t-base), color var(--t-base);
}

.ndhr-footer__social:hover { background: var(--ndhr-lime-600); color: var(--ndhr-blue-900); }

.ndhr-footer__heading {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .02em;
    color: #fff;
    margin: 0 0 18px;
}

.ndhr-footer__links { display: flex; flex-direction: column; gap: 11px; }

.ndhr-footer__link {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    color: var(--ndhr-footer-muted);
    transition: color var(--t-fast);
}

.ndhr-footer__link:hover { color: var(--ndhr-lime-500); }
.ndhr-footer__link i { font-size: 11px; color: var(--ndhr-footer-chevron); }
.ndhr-footer__link--service { font-size: 14px; line-height: 1.5; align-items: flex-start; }

.ndhr-footer__contact { display: flex; flex-direction: column; gap: 14px; }

.ndhr-footer__contact-row {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 14.5px;
    color: var(--ndhr-footer-link);
    transition: color var(--t-fast);
}

a.ndhr-footer__contact-row:hover { color: var(--ndhr-lime-500); }
.ndhr-footer__contact-row i { color: var(--ndhr-lime-600); margin-top: 3px; flex: none; }
.ndhr-footer__contact-row span { word-break: break-word; }
.ndhr-footer__contact-row--muted { color: var(--ndhr-footer-muted); line-height: 1.6; }

.ndhr-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); }

.ndhr-footer__bottom-inner {
    max-width: var(--ndhr-container);
    margin: 0 auto;
    padding: 20px var(--ndhr-gutter);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--ndhr-footer-bottom);
}

.ndhr-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ndhr-footer__legal a { transition: color var(--t-fast); }
.ndhr-footer__legal a:hover { color: #fff; }
.ndhr-footer__sep { opacity: .45; }

.ndhr-footer__credit { color: var(--ndhr-lime-500); font-weight: 600; }
.ndhr-footer__credit:hover { color: #ffffff; }

/* =========================================================================
   23. ELEVATE U (sub-brand)
   ========================================================================= */

/* --- extensions to shared components --------------------------------- */
.ndhr-badge--gold { background: var(--grad-badge-gold); }
.ndhr-badge--eu-green { background: var(--grad-badge-eu-green); }

.ndhr-tint--gold { background: rgba(201, 162, 39, 0.14); color: var(--eu-gold); }
.ndhr-tint--eu-green { background: rgba(30, 122, 75, 0.12); color: var(--eu-green); }

/* Accent stripe on the "areas of development" cards. */
.ndhr-card--accent { border-top-width: 4px; border-top-style: solid; }

/* Compact grey card used by the partnership grid. */
.ndhr-card--compact .ndhr-card__title { margin-bottom: 7px; }

.ndhr-card--compact {
    background: var(--ndhr-bg-alt);
    padding: 26px 22px;
    border-radius: var(--r-md);
}

.ndhr-btn--gold {
    padding: 16px 30px;
    border-radius: 13px;
    background: var(--grad-eu-gold);
    color: var(--eu-gold-ink);
    font-weight: 700;
    box-shadow: 0 14px 30px rgba(201, 162, 39, 0.32);
}

.ndhr-btn--gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(201, 162, 39, 0.42);
}

.ndhr-btn--ghost-light {
    padding: 15px 28px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.1);
    border: 1.6px solid rgba(255, 255, 255, 0.45);
    color: #fff;
}

.ndhr-btn--ghost-light:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); }

/* Dark "How It Works" cards: same glass shell, tighter metrics, gold icon ring. */
.ndhr-glass--eu {
    border-radius: var(--r-md);
    padding: 30px 26px;
    transition: transform var(--t-card), background var(--t-card);
}

.ndhr-glass--eu:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.1); }
.ndhr-glass--eu .ndhr-glass__title { font-size: 17px; margin-bottom: 8px; }
.ndhr-glass--eu .ndhr-glass__body { font-size: 14.5px; line-height: 1.65; }

.ndhr-glass__ring--gold {
    width: 56px;
    height: 56px;
    border-color: rgba(227, 185, 63, 0.55);
}

.ndhr-glass__ring--gold i { color: var(--eu-gold-light); font-size: 25px; }

/* --- hero ------------------------------------------------------------- */
.ndhr-eu-hero {
    position: relative;
    overflow: hidden;
    background: var(--grad-eu-hero);
    padding: clamp(46px, 6vw, 74px) 0;
}

.ndhr-eu-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 4vw, 54px);
    align-items: center;
}

.ndhr-eu-hero__title {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(30px, 4.4vw, 48px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
    color: #fff;
}

.ndhr-eu-hero__accent { color: var(--eu-green-bright); }

.ndhr-eu-hero__lead {
    margin: 18px 0 0;
    font-family: var(--font-head);
    font-weight: 500;
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.6;
    color: var(--ndhr-topbar-text);
}

.ndhr-eu-hero__pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* Two hero pills: the gold one carries the age range, the plain one the parent brand. */
.ndhr-pill-eu {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--r-pill);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--ndhr-on-dark-soft);
}

.ndhr-pill-eu i { font-size: 13px; }

.ndhr-pill-eu--gold {
    background: rgba(227, 185, 63, 0.14);
    border-color: rgba(227, 185, 63, 0.4);
    color: var(--eu-gold-light);
}
.ndhr-eu-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* Brand lockup: mark + ELEVATE U wordmark + tagline. */
.ndhr-lockup { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.ndhr-lockup img { height: 68px; width: auto; }
.ndhr-lockup__text { display: flex; flex-direction: column; line-height: 1; }

.ndhr-lockup__name {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 31px;
    letter-spacing: .01em;
    color: #fff;
}

.ndhr-lockup__name span { color: var(--eu-green-bright); }

.ndhr-lockup__tagline {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 9.5px;
    letter-spacing: .24em;
    color: var(--ndhr-topbar-tag);
    margin-top: 6px;
}

/* Reusable image frame (hero + partnership banner). */
.ndhr-frame {
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.ndhr-frame img { width: 100%; height: auto; display: block; }

.ndhr-frame--wide {
    border-radius: var(--r-xl);
    box-shadow: 0 20px 50px rgba(11, 63, 134, 0.14);
    border: 1px solid var(--ndhr-border);
    margin-bottom: 36px;
}

.ndhr-eu-name { color: var(--ndhr-blue-700); }

/* --- pillar strip ----------------------------------------------------- */
.ndhr-pillars {
    background: var(--ndhr-bg-alt);
    border-bottom: 1px solid var(--ndhr-border);
}

.ndhr-pillars__inner {
    max-width: var(--ndhr-container);
    margin: 0 auto;
    padding: clamp(30px, 4vw, 44px) var(--ndhr-gutter);
}

.ndhr-pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 11px;
}

.ndhr-pillar__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ndhr-pillar__icon i { font-size: 23px; }

.ndhr-pillar__label {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.35;
    color: var(--ndhr-heading);
}

/* --- about + challenges panel ---------------------------------------- */
.ndhr-eu-about {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: clamp(32px, 5vw, 60px);
    align-items: start;
}

.ndhr-challenges {
    background: var(--ndhr-bg-alt);
    border: 1px solid var(--ndhr-border);
    border-radius: var(--r-lg);
    padding: clamp(26px, 3vw, 34px);
}

.ndhr-challenges__title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 19px;
    margin: 0 0 6px;
    color: var(--ndhr-blue-700);
}

.ndhr-challenges__sub {
    margin: 0 0 20px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--eu-muted);
}

.ndhr-challenges__list { display: flex; flex-direction: column; gap: 12px; }

.ndhr-challenge {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--eu-panel-border);
    border-radius: 13px;
    padding: 14px 16px;
    font-size: 15px;
    color: var(--eu-challenge-text);
    line-height: 1.5;
}

.ndhr-challenge i { color: var(--eu-gold); font-size: 18px; margin-top: 2px; flex: none; }

.ndhr-quote {
    margin-top: 22px;
    padding: 18px 20px;
    border-radius: var(--r-badge-sm);
    background: var(--grad-eu-quote);
    color: #fff;
}

.ndhr-quote p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.55;
}

.ndhr-quote span { color: var(--eu-green-bright); }

/* --- dark band + CTA -------------------------------------------------- */
.ndhr-eu-band {
    position: relative;
    overflow: hidden;
    background: var(--grad-eu-band);
    padding: clamp(60px, 8vw, 104px) 0;
}

.ndhr-cta--eu { background: var(--grad-eu-cta); padding: clamp(40px, 5vw, 62px) clamp(28px, 5vw, 60px); }
.ndhr-cta--eu .ndhr-cta__title { font-size: clamp(25px, 3.2vw, 37px); line-height: 1.16; }
.ndhr-cta-wrap--eu { padding-bottom: clamp(56px, 7vw, 88px); }

.ndhr-cta__inner--centered {
    display: block;
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}

.ndhr-cta__inner--centered .ndhr-cta__body { margin: 16px auto 0; max-width: 600px; }
.ndhr-cta__inner--centered .ndhr-cta__actions { justify-content: center; margin-top: 30px; }
.ndhr-cta__inner--centered .ndhr-btn--gold { padding: 17px 32px; font-size: 16.5px; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24); }
.ndhr-cta__inner--centered .ndhr-btn--gold:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3); }
.ndhr-cta__inner--centered .ndhr-btn--ghost-light {
    padding: 16px 30px;
    font-size: 16.5px;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.5);
}
.ndhr-cta__inner--centered .ndhr-btn--ghost-light:hover { background: rgba(255, 255, 255, 0.22); }

.ndhr-cta__footnote {
    margin: 22px 0 0;
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ndhr-on-dark-why);
}

/* =========================================================================
   24. MISC
   ========================================================================= */
.ndhr-section-actions { display: flex; justify-content: center; margin-top: 44px; }
.ndhr-mb-44 { margin-bottom: 44px; }
.ndhr-mb-48 { margin-bottom: 48px; }
.ndhr-mb-50 { margin-bottom: 50px; }
.ndhr-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================================
   25. RESPONSIVE — the demo's 992px JS breakpoint, as a media query
   ========================================================================= */
/* The nav collapses earlier than the page body: with 8 items the menu crowds
   on tablets, so the demo moved the burger to 1180px while every two-column
   layout still flips at 992px. */
@media (max-width: 1179.98px) {
    .ndhr-nav { display: none; }
    .ndhr-burger { display: inline-flex; }
}

@media (max-width: 991.98px) {
    .ndhr-hero__grid,
    .ndhr-split,
    .ndhr-cta__inner,
    .ndhr-notify,
    .ndhr-contact-split,
    .ndhr-eu-hero__grid,
    .ndhr-eu-about { grid-template-columns: 1fr; }

    .ndhr-split--reverse .ndhr-split__figure { order: 0; }
    .ndhr-hero__chip { display: none; }
}

@media (max-width: 575.98px) {
    .ndhr-topbar__right { width: 100%; justify-content: space-between; }
    .ndhr-num { font-size: 38px; }

    /* min-height + aspect-ratio forces a minimum WIDTH, which clips the image
       on narrow screens. Let it scale instead. */
    .ndhr-hero__figure,
    .ndhr-split__figure { min-height: 0; }

    /* 275px leaves only 5px inside a 320px viewport, and overflows below it. */
    .ndhr-grid--275 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}


/* =========================================================================
   26. TOUCH TARGETS
   =========================================================================
   Desktop metrics are lifted from the design; on touch pointers the same
   controls need a usable hit area, so pad them without moving anything.
   ========================================================================= */
@media (pointer: coarse) {
    .ndhr-topbar__socials { gap: 4px; }
    .ndhr-topbar__socials a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        min-height: 40px;
        margin: -8px 0;
    }

    .ndhr-topbar__login { padding: 9px 14px; }
    .ndhr-topbar__item { padding: 6px 0; }
    .ndhr-breadcrumb a { padding: 8px 0; }
    .ndhr-footer__link,
    .ndhr-footer__contact-row { padding: 7px 0; }
    .ndhr-footer__legal a { padding: 8px 0; }
    .ndhr-article__more { padding: 6px 0; }
}