/*
=========================================================
GLOBAL HEALTH EXPLORERS
HOMEPAGE CSS
Production Homepage
Clean unified architecture — September 2026

HTML SOURCE OF TRUTH:
index.html

DESIGN PRINCIPLES:
• Think Global. Act Local. Do It Now.
• Learning Global Health Today, Leading Tomorrow.
• Organic editorial design
• Healthy Living as the central GHE Hub
• 11-Hub Hero Mosaic
• Eight Learning Worlds
• Ten Detailed GHE Hubs
• Strong accessibility
• Responsive across desktop, tablet and mobile

IMPORTANT:
This stylesheet intentionally contains NO circular
GHE Hub Navigator.
=========================================================
*/


/* =========================================================
   01. ROOT VARIABLES
========================================================= */

:root {

    --navy: #102a43;
    --deep: #081a2a;

    --blue: #1769aa;
    --sky: #3fa7d6;
    --teal: #159a9c;
    --green: #3a9d5d;

    --gold: #f2b134;
    --purple: #7b61a8;
    --earth: #b97942;

    --cream: #f7f9fb;
    --white: #ffffff;

    --text: #243b53;
    --muted: #627d98;

    --border:
        rgba(16, 42, 67, 0.10);

    --border-strong:
        rgba(16, 42, 67, 0.16);

    --radius-xl: 35px;
    --radius-lg: 30px;
    --radius-md: 22px;
    --radius-sm: 14px;

    --shadow-soft:
        0 15px 45px rgba(16, 42, 67, 0.10);

    --shadow-card:
        0 10px 35px rgba(16, 42, 67, 0.08);

    --shadow-hover:
        0 24px 65px rgba(16, 42, 67, 0.18);

    --max-width: 1280px;

    --section-padding: 105px;

    --transition-fast:
        0.2s ease;

    --transition-medium:
        0.3s ease;

    --transition-slow:
        0.45s ease;
}


/* =========================================================
   02. GLOBAL RESET
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    padding: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--text);

    background:
        var(--white);

    line-height: 1.6;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


img {
    display: block;

    max-width: 100%;
}


a {
    color: inherit;

    text-decoration: none;
}


button,
input,
textarea,
select {
    font: inherit;
}


button {
    cursor: pointer;
}


::selection {
    background:
        rgba(21, 154, 156, 0.20);

    color:
        var(--navy);
}


/* =========================================================
   03. GLOBAL UTILITIES
========================================================= */

.section {
    width:
        min(94%, var(--max-width));

    margin:
        0 auto;

    padding:
        var(--section-padding) 0;
}


.section-kicker {
    display:
        inline-block;

    margin-bottom:
        12px;

    color:
        var(--teal);

    font-size:
        12px;

    line-height:
        1.2;

    font-weight:
        900;

    letter-spacing:
        1.7px;

    text-transform:
        uppercase;
}


.section-heading {
    max-width:
        820px;

    margin:
        0 auto 50px;

    text-align:
        center;
}


.section-heading h2 {
    margin:
        0 0 16px;

    color:
        var(--navy);

    font-size:
        clamp(36px, 4vw, 56px);

    line-height:
        1.05;

    letter-spacing:
        -1.2px;
}


.section-heading p {
    max-width:
        720px;

    margin:
        0 auto;

    color:
        var(--muted);

    font-size:
        17px;

    line-height:
        1.75;
}


.text-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--teal);

    font-weight:
        800;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}


.text-link:hover {
    color:
        var(--blue);

    transform:
        translateX(3px);
}


/* =========================================================
   04. BUTTONS
========================================================= */

.btn {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    min-height:
        48px;

    padding:
        12px 22px;

    border:
        2px solid transparent;

    border-radius:
        999px;

    font-size:
        14px;

    font-weight:
        800;

    line-height:
        1;

    white-space:
        nowrap;

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
}


.btn:hover {
    transform:
        translateY(-2px);
}


.btn-primary {
    color:
        var(--white);

    background:
        var(--teal);

    box-shadow:
        0 10px 28px rgba(21, 154, 156, 0.22);
}


.btn-primary:hover {
    background:
        #118486;

    box-shadow:
        0 14px 35px rgba(21, 154, 156, 0.30);
}


.btn-secondary {
    color:
        var(--navy);

    background:
        var(--white);

    border-color:
        rgba(16, 42, 67, 0.16);
}


.btn-secondary:hover {
    border-color:
        var(--teal);

    color:
        var(--teal);

    box-shadow:
        0 10px 28px rgba(16, 42, 67, 0.08);
}


.btn-light {
    color:
        var(--navy);

    background:
        var(--white);
}


.btn-light:hover {
    color:
        var(--teal);

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.15);
}


/* =========================================================
   05. HEADER / NAVIGATION
========================================================= */

.site-header {
    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    background:
        rgba(255, 255, 255, 0.94);

    border-bottom:
        1px solid rgba(16, 42, 67, 0.08);

    box-shadow:
        0 5px 25px rgba(16, 42, 67, 0.06);

    backdrop-filter:
        blur(14px);
}


.navbar {
    width:
        min(94%, var(--max-width));

    min-height:
        80px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}


.brand {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        11px;

    flex-shrink:
        0;
}


.brand-logo {
    width:
        56px;

    height:
        56px;

    overflow:
        hidden;

    border-radius:
        50%;

    background:
        var(--white);

    box-shadow:
        0 5px 18px rgba(16, 42, 67, 0.12);
}


.brand-logo-image {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.brand-name {
    color:
        var(--navy);

    font-size:
        15px;

    font-weight:
        900;

    line-height:
        1.15;

    max-width:
        145px;
}


.nav-links {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        3px;

    padding:
        5px;

    border-radius:
        999px;

    background:
        #0b2d4d;

    box-shadow:
        0 8px 25px rgba(8, 26, 42, 0.15);
}


.nav-link {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        9px 12px;

    border-radius:
        999px;

    color:
        rgba(255, 255, 255, 0.88);

    font-size:
        11.5px;

    font-weight:
        800;

    white-space:
        nowrap;

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}


.nav-link:hover {
    color:
        var(--white);

    background:
        rgba(255, 255, 255, 0.13);

    transform:
        translateY(-1px);
}


.nav-cta {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        11px 17px;

    border-radius:
        999px;

    color:
        var(--white);

    background:
        var(--teal);

    font-size:
        12px;

    font-weight:
        900;

    white-space:
        nowrap;

    box-shadow:
        0 8px 22px rgba(21, 154, 156, 0.20);

    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);
}


.nav-cta:hover {
    background:
        #118486;

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 30px rgba(21, 154, 156, 0.28);
}


/* =========================================================
   06. HERO
========================================================= */

.hero {
    position:
        relative;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #f6fbfd 0%,
            #eef8f8 48%,
            #f8fbfd 100%
        );
}


.hero::before {
    content:
        "";

    position:
        absolute;

    width:
        620px;

    height:
        620px;

    right:
        -260px;

    top:
        -250px;

    border-radius:
        50%;

    background:
        rgba(63, 167, 214, 0.08);

    pointer-events:
        none;
}


.hero::after {
    content:
        "";

    position:
        absolute;

    width:
        380px;

    height:
        380px;

    left:
        -220px;

    bottom:
        -220px;

    border-radius:
        50%;

    background:
        rgba(21, 154, 156, 0.06);

    pointer-events:
        none;
}


.hero-inner {
    position:
        relative;

    z-index:
        2;

    width:
        min(94%, var(--max-width));

    min-height:
        690px;

    margin:
        0 auto;

    padding:
        65px 0 75px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 0.94fr)
        minmax(540px, 1.06fr);

    gap:
        35px;

    align-items:
        center;
}


.hero-content {
    position:
        relative;

    z-index:
        3;

    max-width:
        650px;
}


.hero-brand-lockup {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        22px;

    padding:
        7px 12px 7px 7px;

    border:
        1px solid rgba(16, 42, 67, 0.08);

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, 0.75);

    box-shadow:
        0 8px 24px rgba(16, 42, 67, 0.06);
}


.hero-logo {
    width:
        42px;

    height:
        42px;

    overflow:
        hidden;

    border-radius:
        50%;
}


.hero-logo img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.hero-brand-text {
    display:
        flex;

    flex-direction:
        column;

    line-height:
        1.05;

    font-size:
        9px;

    letter-spacing:
        1.4px;

    color:
        var(--navy);
}


.hero-brand-text strong {
    font-weight:
        900;
}


.hero-brand-text span {
    color:
        var(--teal);

    font-weight:
        800;
}


.hero-kicker {
    display:
        block;

    margin-bottom:
        13px;

    color:
        var(--teal);

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        2px;
}


.hero h1 {
    margin:
        0;

    color:
        var(--navy);

    font-size:
        clamp(48px, 5.8vw, 76px);

    line-height:
        0.98;

    letter-spacing:
        -2.6px;
}


.hero h1 span {
    display:
        block;

    color:
        var(--teal);
}


.hero h2 {
    margin:
        23px 0 16px;

    color:
        var(--blue);

    font-size:
        clamp(21px, 2vw, 29px);

    line-height:
        1.15;

    letter-spacing:
        -0.4px;
}


.hero-description {
    max-width:
        590px;

    margin:
        0 0 28px;

    color:
        var(--muted);

    font-size:
        17px;

    line-height:
        1.75;
}


.hero-actions {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        12px;
}


.hero-principle {
    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin-top:
        25px;

    color:
        var(--navy);

    font-size:
        12px;

    font-weight:
        700;
}


.principle-line {
    width:
        34px;

    height:
        2px;

    flex:
        0 0 auto;

    background:
        var(--gold);
}


/* =========================================================
   07. HERO MOSAIC
   11 HUB ORGANIC EDITORIAL COMPOSITION

   IMPORTANT:
   THE GEOMETRY BELOW IS PRESERVED EXACTLY.
========================================================= */

.hero-mosaic {
    position:
        relative;

    width:
        min(100%, 660px);

    height:
        650px;

    justify-self:
        end;

    display:
        grid;

    grid-template-columns:
        repeat(16, minmax(0, 1fr));

    grid-template-rows:
        repeat(16, minmax(0, 1fr));

    gap:
        10px;

    isolation:
        isolate;
}


/* ---------------------------------------------------------
   Base Card
--------------------------------------------------------- */

.mosaic-card {
    position:
        relative;

    min-width:
        0;

    min-height:
        0;

    overflow:
        hidden;

    display:
        block;

    border:
        4px solid rgba(255, 255, 255, 0.96);

    border-radius:
        22px;

    background:
        #dfeaf1;

    box-shadow:
        0 12px 34px rgba(16, 42, 67, 0.12);

    isolation:
        isolate;

    transform-origin:
        center;

    text-decoration:
        none;

    transition:
        transform var(--transition-medium),
        box-shadow var(--transition-medium),
        border-color var(--transition-medium);
}


.mosaic-card img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transform:
        scale(1.001);

    filter:
        saturate(0.98);

    transition:
        transform 0.45s ease,
        filter 0.45s ease;
}


.mosaic-card::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    background:
        linear-gradient(
            180deg,
            rgba(8, 26, 42, 0) 38%,
            rgba(8, 26, 42, 0.18) 62%,
            rgba(8, 26, 42, 0.74) 100%
        );

    pointer-events:
        none;
}


.mosaic-card::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        8%;

    right:
        8%;

    height:
        2px;

    z-index:
        4;

    background:
        rgba(255, 255, 255, 0.75);

    border-radius:
        0 0 999px 999px;

    pointer-events:
        none;
}


/* ---------------------------------------------------------
   Labels
--------------------------------------------------------- */

.mosaic-label {
    position:
        absolute;

    left:
        12px;

    bottom:
        11px;

    z-index:
        5;

    max-width:
        calc(100% - 24px);

    padding:
        6px 10px;

    overflow:
        hidden;

    border-radius:
        999px;

    color:
        var(--navy);

    background:
        rgba(255, 255, 255, 0.94);

    font-size:
        10px;

    font-weight:
        900;

    line-height:
        1.1;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

    box-shadow:
        0 4px 14px rgba(8, 26, 42, 0.16);

    backdrop-filter:
        blur(5px);
}


/* =========================================================
   CENTREPIECE
========================================================= */

.mosaic-main {
    grid-column:
        6 / 12;

    grid-row:
        4 / 13;

    z-index:
        10;

    border-width:
        5px;

    border-radius:
        32px;

    box-shadow:
        0 24px 60px rgba(16, 42, 67, 0.22);

    animation:
        hero-float-main 7s ease-in-out infinite;
}


.mosaic-main::after {
    background:
        linear-gradient(
            180deg,
            rgba(8, 26, 42, 0) 30%,
            rgba(8, 26, 42, 0.14) 56%,
            rgba(8, 26, 42, 0.80) 100%
        );
}


.mosaic-main .mosaic-label {
    left:
        17px;

    bottom:
        16px;

    padding:
        8px 14px;

    font-size:
        13px;

    letter-spacing:
        0.25px;
}


/* =========================================================
   SURROUNDING HUBS
========================================================= */

.mosaic-mental {
    grid-column:
        1 / 6;

    grid-row:
        1 / 5;

    transform:
        rotate(-2deg);

    animation:
        hero-float-one 6.5s ease-in-out infinite;
}


.mosaic-ncd {
    grid-column:
        12 / 17;

    grid-row:
        1 / 5;

    transform:
        rotate(2deg);

    animation:
        hero-float-two 7.2s ease-in-out infinite;
}


.mosaic-indigenous {
    grid-column:
        1 / 6;

    grid-row:
        5 / 10;

    transform:
        rotate(1.5deg);

    animation:
        hero-float-three 6.8s ease-in-out infinite;
}


.mosaic-personal-care {
    grid-column:
        12 / 17;

    grid-row:
        5 / 10;

    transform:
        rotate(-1.7deg);

    animation:
        hero-float-four 7.8s ease-in-out infinite;
}


.mosaic-infectious {
    grid-column:
        1 / 6;

    grid-row:
        10 / 15;

    transform:
        rotate(-2deg);

    animation:
        hero-float-five 7s ease-in-out infinite;
}


.mosaic-innovation {
    grid-column:
        12 / 17;

    grid-row:
        10 / 15;

    transform:
        rotate(2deg);

    animation:
        hero-float-six 8s ease-in-out infinite;
}


.mosaic-world {
    grid-column:
        1 / 6;

    grid-row:
        15 / 17;

    transform:
        rotate(-1.5deg);

    animation:
        hero-float-seven 7.5s ease-in-out infinite;
}


.mosaic-heroes {
    grid-column:
        6 / 9;

    grid-row:
        13 / 17;

    transform:
        rotate(1.5deg);

    animation:
        hero-float-eight 8s ease-in-out infinite;
}


.mosaic-awareness {
    grid-column:
        9 / 12;

    grid-row:
        13 / 17;

    transform:
        rotate(-1.5deg);

    animation:
        hero-float-nine 7.2s ease-in-out infinite;
}


.mosaic-teachers {
    grid-column:
        12 / 17;

    grid-row:
        15 / 17;

    transform:
        rotate(1.8deg);

    animation:
        hero-float-ten 6.7s ease-in-out infinite;
}


/* =========================================================
   MOSAIC HOVER
========================================================= */

.mosaic-card:hover {
    transform:
        translateY(-7px)
        scale(1.025);

    z-index:
        30;

    border-color:
        var(--white);

    box-shadow:
        var(--shadow-hover);
}


.mosaic-card:hover img {
    transform:
        scale(1.08);

    filter:
        saturate(1.06);
}


.mosaic-main:hover {
    transform:
        translateY(-8px)
        scale(1.018);

    z-index:
        40;
}


.mosaic-card:focus-visible {
    outline:
        3px solid var(--gold);

    outline-offset:
        4px;
}


/* =========================================================
   MOSAIC DECORATIVE DOTS
========================================================= */

.mosaic-dot {
    position:
        absolute;

    width:
        14px;

    height:
        14px;

    z-index:
        20;

    border-radius:
        50%;

    box-shadow:
        0 5px 15px rgba(16, 42, 67, 0.15);

    pointer-events:
        none;
}


.mosaic-dot-one {
    top:
        3%;

    right:
        1%;

    background:
        var(--gold);
}


.mosaic-dot-two {
    top:
        49%;

    left:
        -1%;

    background:
        var(--teal);
}


.mosaic-dot-three {
    right:
        17%;

    bottom:
        1%;

    background:
        var(--blue);
}


/* =========================================================
   MOSAIC ANIMATIONS
========================================================= */

@keyframes hero-float-main {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-8px);
    }
}


@keyframes hero-float-one {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-2deg);
    }

    50% {
        transform:
            translateY(-6px)
            rotate(-1deg);
    }
}


@keyframes hero-float-two {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(2deg);
    }

    50% {
        transform:
            translateY(-7px)
            rotate(3deg);
    }
}


@keyframes hero-float-three {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(1.5deg);
    }

    50% {
        transform:
            translateY(-5px)
            rotate(2.4deg);
    }
}


@keyframes hero-float-four {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-1.7deg);
    }

    50% {
        transform:
            translateY(-7px)
            rotate(-0.7deg);
    }
}


@keyframes hero-float-five {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-2deg);
    }

    50% {
        transform:
            translateY(-6px)
            rotate(-1deg);
    }
}


@keyframes hero-float-six {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(2deg);
    }

    50% {
        transform:
            translateY(-7px)
            rotate(2.8deg);
    }
}


@keyframes hero-float-seven {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-1.5deg);
    }

    50% {
        transform:
            translateY(-5px)
            rotate(-0.6deg);
    }
}


@keyframes hero-float-eight {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(1.5deg);
    }

    50% {
        transform:
            translateY(-6px)
            rotate(2.2deg);
    }
}


@keyframes hero-float-nine {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-1.5deg);
    }

    50% {
        transform:
            translateY(-6px)
            rotate(-0.6deg);
    }
}


@keyframes hero-float-ten {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(1.8deg);
    }

    50% {
        transform:
            translateY(-5px)
            rotate(2.7deg);
    }
}


/* =========================================================
   08. LEARNING WORLDS
   TRUE HORIZONTAL EDITORIAL CARDS
   DESKTOP: 2 × 4
========================================================= */

.learning-worlds {
    background:
        var(--white);
}


.world-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        28px;
}


.world-card {
    min-width:
        0;

    min-height:
        0;

    overflow:
        hidden;

    display:
        grid;

    grid-template-columns:
        minmax(190px, 42%)
        minmax(0, 1fr);

    border:
        1px solid var(--border);

    border-radius:
        24px;

    background:
        var(--white);

    box-shadow:
        var(--shadow-card);

    transition:
        transform var(--transition-medium),
        box-shadow var(--transition-medium),
        border-color var(--transition-medium);
}


.world-card:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(21, 154, 156, 0.22);

    box-shadow:
        var(--shadow-hover);
}


.world-card-image {
    position:
        relative;

    width:
        100%;

    min-width:
        0;

    min-height:
        235px;

    height:
        100%;

    overflow:
        hidden;

    background:
        #eaf1f5;
}


.world-card-image img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 0.45s ease;
}


.world-card:hover .world-card-image img {
    transform:
        scale(1.06);
}


.world-number {
    position:
        absolute;

    top:
        14px;

    left:
        14px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        37px;

    height:
        28px;

    padding:
        0 9px;

    border-radius:
        999px;

    color:
        var(--navy);

    background:
        rgba(255, 255, 255, 0.94);

    font-size:
        11px;

    font-weight:
        900;

    box-shadow:
        0 5px 16px rgba(16, 42, 67, 0.12);
}


.world-card-content {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        27px 28px;
}


.world-card h3 {
    margin:
        0;

    color:
        var(--navy);

    font-size:
        21px;

    line-height:
        1.15;
}


.world-card p {
    min-height:
        0;

    margin:
        9px 0 18px;

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.6;
}


.world-card strong {
    margin-top:
        auto;

    color:
        var(--teal);

    font-size:
        13px;

    font-weight:
        900;
}


/* =========================================================
   09. DETAILED GHE HUBS
   TRUE HORIZONTAL EDITORIAL CARDS
   DESKTOP: 2 × 5
========================================================= */

.ghe-hubs {
    width:
        100%;

    max-width:
        none;

    padding-left:
        max(
            3%,
            calc((100% - var(--max-width)) / 2)
        );

    padding-right:
        max(
            3%,
            calc((100% - var(--max-width)) / 2)
        );

    background:
        linear-gradient(
            180deg,
            #f7fbfd 0%,
            #eef8f6 100%
        );
}


.ghe-hubs .section-heading {
    width:
        min(94%, var(--max-width));

    margin-left:
        auto;

    margin-right:
        auto;
}


.hub-grid {
    width:
        min(100%, var(--max-width));

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        32px;

    align-items:
        stretch;
}


.hub-card {
    min-width:
        0;

    min-height:
        0;

    display:
        grid;

    grid-template-columns:
        minmax(215px, 43%)
        minmax(0, 1fr);

    overflow:
        hidden;

    border:
        1px solid var(--border);

    border-radius:
        30px;

    background:
        var(--white);

    box-shadow:
        var(--shadow-card);

    transition:
        transform var(--transition-medium),
        box-shadow var(--transition-medium),
        border-color var(--transition-medium);
}


.hub-card:hover {
    transform:
        translateY(-7px);

    box-shadow:
        var(--shadow-hover);
}


/* ---------------------------------------------------------
   Hub Image
--------------------------------------------------------- */

.hub-card-image {
    position:
        relative;

    display:
        block;

    width:
        100%;

    height:
        100%;

    min-height:
        270px;

    overflow:
        hidden;

    background:
        #e6eef2;
}


.hub-card-image img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 0.45s ease;
}


.hub-card:hover .hub-card-image img {
    transform:
        scale(1.06);
}


.hub-badge {
    position:
        absolute;

    left:
        16px;

    top:
        16px;

    padding:
        7px 10px;

    border-radius:
        999px;

    color:
        var(--navy);

    background:
        rgba(255, 255, 255, 0.93);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        0.8px;

    box-shadow:
        0 5px 15px rgba(16, 42, 67, 0.13);
}


/* ---------------------------------------------------------
   Hub Content
--------------------------------------------------------- */

.hub-card-content {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        27px 29px;
}


.hub-kicker {
    display:
        block;

    margin-bottom:
        9px;

    color:
        var(--teal);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        1.25px;

    line-height:
        1.35;

    text-transform:
        uppercase;
}


.hub-card h3 {
    margin:
        0 0 13px;

    color:
        var(--navy);

    font-size:
        25px;

    line-height:
        1.08;

    letter-spacing:
        -0.5px;
}


.hub-card p {
    margin:
        0 0 18px;

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.65;
}


.hub-topics {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-bottom:
        20px;
}


.hub-topics span {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        27px;

    padding:
        5px 9px;

    border-radius:
        999px;

    color:
        var(--navy);

    background:
        #f1f6f8;

    font-size:
        10px;

    font-weight:
        800;

    line-height:
        1.2;
}


.hub-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        auto;

    color:
        var(--teal);

    font-size:
        13px;

    font-weight:
        900;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}


.hub-link:hover {
    color:
        var(--blue);

    transform:
        translateX(3px);
}


/* ---------------------------------------------------------
   Hub Variants
--------------------------------------------------------- */

.hub-card-healthy-living {
    border-top:
        5px solid var(--teal);
}


.hub-card-mental {
    border-top:
        5px solid var(--purple);
}


.hub-card-ncd {
    border-top:
        5px solid var(--blue);
}


.hub-card-indigenous {
    border-top:
        5px solid var(--earth);
}


.hub-card-world {
    border-top:
        5px solid var(--sky);
}


.hub-card-innovation {
    border-top:
        5px solid var(--gold);
}


.hub-card-heroes {
    border-top:
        5px solid var(--blue);
}


.hub-card-personal-care {
    border-top:
        5px solid var(--teal);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7fcfb 100%
        );
}


.hub-card-communicable {
    border-top:
        5px solid var(--teal);
}


.hub-card-awareness {
    border-top:
        5px solid var(--sky);
}


/*
   Personal Care uses the same true horizontal
   image treatment as the other Detailed GHE Hubs.

   Exact HTML image path remains:
   images/Personal-Care.jpg
*/

.hub-card-personal-care .hub-card-image {
    height:
        100%;

    min-height:
        270px;
}


.hub-feature-count {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin:
        0 0 18px;

    padding:
        13px 15px;

    border-radius:
        18px;

    background:
        #eef8f6;
}


.hub-feature-count strong {
    color:
        var(--teal);

    font-size:
        30px;

    line-height:
        1;

    font-weight:
        900;
}


.hub-feature-count span {
    color:
        var(--navy);

    font-size:
        11px;

    line-height:
        1.3;

    font-weight:
        800;
}


.hubs-more {
    width:
        min(100%, var(--max-width));

    margin:
        40px auto 0;

    display:
        flex;

    justify-content:
        center;
}


/* =========================================================
   10. FEATURE SECTIONS
========================================================= */

.feature-section {
    width:
        min(94%, var(--max-width));

    margin:
        0 auto;

    padding:
        100px 0;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap:
        65px;

    align-items:
        center;
}


.feature-image {
    position:
        relative;

    overflow:
        hidden;

    min-height:
        400px;

    border-radius:
        var(--radius-xl);

    background:
        #e8f0f4;

    box-shadow:
        var(--shadow-soft);
}


.feature-image img {
    width:
        100%;

    height:
        100%;

    min-height:
        400px;

    object-fit:
        cover;

    transition:
        transform 0.5s ease;
}


.feature-image:hover img {
    transform:
        scale(1.03);
}


.feature-content {
    max-width:
        600px;
}


.feature-content h2 {
    margin:
        0 0 20px;

    color:
        var(--navy);

    font-size:
        clamp(36px, 4vw, 54px);

    line-height:
        1.04;

    letter-spacing:
        -1.2px;
}


.feature-content p {
    margin:
        0 0 18px;

    color:
        var(--muted);

    font-size:
        16px;

    line-height:
        1.75;
}


.feature-section.reverse {
    direction:
        rtl;
}


.feature-section.reverse > * {
    direction:
        ltr;
}


.feature-section.soft {
    width:
        100%;

    padding-left:
        max(
            3%,
            calc((100% - var(--max-width)) / 2)
        );

    padding-right:
        max(
            3%,
            calc((100% - var(--max-width)) / 2)
        );

    background:
        var(--cream);
}


/* =========================================================
   11. GHBDC
========================================================= */

.ghbdc-section {
    position:
        relative;

    width:
        100%;

    max-width:
        none;

    padding-left:
        max(
            3%,
            calc((100% - var(--max-width)) / 2)
        );

    padding-right:
        max(
            3%,
            calc((100% - var(--max-width)) / 2)
        );

    color:
        var(--white);

    background:
        linear-gradient(
            135deg,
            #081a2a 0%,
            #102a43 55%,
            #0b4f58 100%
        );

    overflow:
        hidden;
}


.ghbdc-section::before {
    content:
        "";

    position:
        absolute;

    width:
        430px;

    height:
        430px;

    right:
        -190px;

    top:
        -210px;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius:
        50%;
}


.ghbdc-section::after {
    content:
        "";

    position:
        absolute;

    width:
        300px;

    height:
        300px;

    left:
        -160px;

    bottom:
        -160px;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius:
        50%;
}


.ghbdc-section .feature-image,
.ghbdc-section .feature-content {
    position:
        relative;

    z-index:
        2;
}


.ghbdc-section .feature-content h2 {
    color:
        var(--white);
}


.ghbdc-section .feature-content p {
    color:
        rgba(255, 255, 255, 0.76);
}


.ghbdc-section .section-kicker {
    color:
        var(--gold);
}


.ghbdc-section .feature-image {
    border:
        1px solid rgba(255, 255, 255, 0.12);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.24);
}


/* =========================================================
   12. YOUNG VOICES
========================================================= */

.young-voices {
    background:
        var(--white);
}


.young-voices-layout {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, 0.85fr);

    gap:
        55px;

    align-items:
        center;
}


.young-voices-image {
    overflow:
        hidden;

    min-height:
        430px;

    border-radius:
        var(--radius-xl);

    background:
        #e8f0f4;

    box-shadow:
        var(--shadow-soft);
}


.young-voices-image img {
    width:
        100%;

    height:
        100%;

    min-height:
        430px;

    object-fit:
        cover;

    transition:
        transform 0.5s ease;
}


.young-voices-image:hover img {
    transform:
        scale(1.035);
}


.young-voices-copy {
    max-width:
        540px;
}


.voice-number {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        48px;

    height:
        48px;

    margin-bottom:
        18px;

    border-radius:
        50%;

    color:
        var(--white);

    background:
        var(--teal);

    font-size:
        13px;

    font-weight:
        900;

    box-shadow:
        0 10px 25px rgba(21, 154, 156, 0.20);
}


.young-voices-copy h3 {
    margin:
        0 0 15px;

    color:
        var(--navy);

    font-size:
        clamp(30px, 3vw, 44px);

    line-height:
        1.05;

    letter-spacing:
        -0.8px;
}


.young-voices-copy p {
    margin:
        0 0 22px;

    color:
        var(--muted);

    font-size:
        16px;

    line-height:
        1.75;
}


/* =========================================================
   13. TOGETHER WE LEARN / LEAD
========================================================= */

.learn-lead-section {
    background:
        #f7fbfd;
}


.learn-lead-section .feature-content {
    order:
        1;
}


.learn-lead-section .feature-image {
    order:
        2;
}


/* =========================================================
   14. OUR STORY
========================================================= */

.story-section {
    position:
        relative;

    min-height:
        610px;

    display:
        flex;

    align-items:
        center;

    padding:
        110px max(
            3%,
            calc((100% - var(--max-width)) / 2)
        );

    overflow:
        hidden;

    color:
        var(--white);
}


.story-background {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    z-index:
        0;
}


.story-overlay {
    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    background:
        linear-gradient(
            90deg,
            rgba(8, 26, 42, 0.92) 0%,
            rgba(8, 26, 42, 0.76) 46%,
            rgba(8, 26, 42, 0.36) 100%
        );
}


.story-content {
    position:
        relative;

    z-index:
        2;

    width:
        min(100%, 650px);
}


.story-content .section-kicker {
    color:
        var(--gold);
}


.story-content h2 {
    margin:
        0 0 22px;

    color:
        var(--white);

    font-size:
        clamp(38px, 4.5vw, 60px);

    line-height:
        1.02;

    letter-spacing:
        -1.5px;
}


.story-content p {
    max-width:
        620px;

    margin:
        0 0 28px;

    color:
        rgba(255, 255, 255, 0.82);

    font-size:
        17px;

    line-height:
        1.8;
}


/* =========================================================
   15. FINAL CTA
========================================================= */

.final-cta {
    position:
        relative;

    overflow:
        hidden;

    padding:
        100px 0;

    background:
        linear-gradient(
            135deg,
            #eef8f7 0%,
            #f7fbfd 100%
        );
}


.final-cta-inner {
    width:
        min(94%, var(--max-width));

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap:
        60px;

    align-items:
        center;
}


.final-cta-image {
    overflow:
        hidden;

    border-radius:
        var(--radius-xl);

    box-shadow:
        var(--shadow-soft);
}


.final-cta-image img {
    width:
        100%;

    height:
        390px;

    object-fit:
        cover;

    transition:
        transform 0.5s ease;
}


.final-cta-image:hover img {
    transform:
        scale(1.035);
}


.final-cta-content {
    max-width:
        610px;
}


.final-cta-content h2 {
    margin:
        0 0 18px;

    color:
        var(--navy);

    font-size:
        clamp(38px, 4.4vw, 58px);

    line-height:
        1.02;

    letter-spacing:
        -1.4px;
}


.final-cta-content p {
    margin:
        0 0 26px;

    color:
        var(--teal);

    font-size:
        20px;

    font-weight:
        800;
}


/* =========================================================
   16. NEWS TICKER
========================================================= */

.news-ticker {
    position:
        relative;

    z-index:
        20;

    width:
        100%;

    display:
        flex;

    align-items:
        stretch;

    min-height:
        52px;

    overflow:
        hidden;

    color:
        var(--white);

    background:
        #0b2d4d;
}


.news-ticker-label {
    position:
        relative;

    z-index:
        3;

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        0 20px;

    color:
        var(--white);

    background:
        var(--teal);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        1px;
}


.news-pulse {
    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(--gold);

    box-shadow:
        0 0 0 5px rgba(242, 177, 52, 0.12);

    animation:
        news-pulse 1.8s ease-in-out infinite;
}


.news-ticker-track {
    flex:
        1;

    min-width:
        0;

    overflow:
        hidden;
}


.news-ticker-content {
    display:
        inline-flex;

    align-items:
        center;

    min-width:
        max-content;

    height:
        52px;

    animation:
        news-scroll 32s linear infinite;
}


.ticker-item {
    padding:
        0 18px;

    color:
        rgba(255, 255, 255, 0.92);

    font-size:
        12px;

    font-weight:
        700;

    white-space:
        nowrap;

    transition:
        color var(--transition-fast);
}


.ticker-item:hover {
    color:
        var(--gold);
}


.ticker-separator {
    color:
        rgba(255, 255, 255, 0.35);

    font-size:
        13px;
}


@keyframes news-scroll {

    0% {
        transform:
            translateX(0);
    }

    100% {
        transform:
            translateX(-50%);
    }
}


@keyframes news-pulse {

    0%,
    100% {
        transform:
            scale(1);

        opacity:
            1;
    }

    50% {
        transform:
            scale(0.72);

        opacity:
            0.6;
    }
}


/* =========================================================
   17. FOOTER
========================================================= */

.site-footer {
    color:
        rgba(255, 255, 255, 0.78);

    background:
        #081a2a;
}


.footer-inner {
    width:
        min(94%, var(--max-width));

    margin:
        0 auto;

    padding:
        75px 0 55px;

    display:
        grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1fr;

    gap:
        45px;
}


.footer-brand {
    max-width:
        360px;
}


.footer-logo {
    width:
        58px;

    height:
        58px;

    margin-bottom:
        16px;

    overflow:
        hidden;

    border-radius:
        50%;

    background:
        var(--white);
}


.footer-logo-image {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.footer-brand h3 {
    margin:
        0 0 7px;

    color:
        var(--white);

    font-size:
        21px;

    line-height:
        1.2;
}


.footer-tagline {
    margin:
        0 0 10px;

    color:
        rgba(255, 255, 255, 0.75);

    font-size:
        13px;

    line-height:
        1.5;
}


.footer-motto {
    margin:
        0 0 22px;

    color:
        var(--gold);

    font-size:
        12px;

    font-weight:
        800;
}


.footer-registration {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

    color:
        rgba(255, 255, 255, 0.50);

    font-size:
        10px;

    line-height:
        1.45;
}


.footer-registration strong {
    color:
        rgba(255, 255, 255, 0.74);

    font-size:
        11px;
}


.footer-column {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        8px;
}


.footer-column h4 {
    margin:
        0 0 8px;

    color:
        var(--white);

    font-size:
        13px;

    font-weight:
        900;

    letter-spacing:
        0.7px;
}


.footer-column a {
    color:
        rgba(255, 255, 255, 0.58);

    font-size:
        12px;

    line-height:
        1.5;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}


.footer-column a:hover {
    color:
        var(--white);

    transform:
        translateX(3px);
}


.footer-bottom {
    width:
        min(94%, var(--max-width));

    margin:
        0 auto;

    padding:
        22px 0;

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    border-top:
        1px solid rgba(255, 255, 255, 0.08);

    color:
        rgba(255, 255, 255, 0.42);

    font-size:
        10px;
}


/* =========================================================
   18. LARGE TABLET
========================================================= */

@media (max-width: 1180px) {

    :root {
        --max-width:
            1080px;
    }


    .navbar {
        gap:
            12px;
    }


    .nav-links {
        gap:
            1px;
    }


    .nav-link {
        padding:
            8px 9px;

        font-size:
            10.5px;
    }


    .hero-inner {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(500px, 1.1fr);

        gap:
            25px;
    }


    .hero-mosaic {
        width:
            min(100%, 590px);

        height:
            610px;

        gap:
            9px;
    }


    .world-grid {
        gap:
            22px;
    }


    .world-card {
        grid-template-columns:
            minmax(175px, 40%)
            minmax(0, 1fr);
    }


    .world-card-image {
        min-height:
            220px;
    }


    .world-card-content {
        padding:
            24px;
    }


    .hub-grid {
        gap:
            26px;
    }


    .hub-card {
        grid-template-columns:
            minmax(190px, 41%)
            minmax(0, 1fr);
    }


    .hub-card-image,
    .hub-card-personal-care .hub-card-image {
        min-height:
            250px;
    }


    .hub-card-content {
        padding:
            24px 25px 25px;
    }


    .feature-section {
        gap:
            45px;
    }


    .young-voices-layout {
        gap:
            40px;
    }


    .footer-inner {
        gap:
            30px;
    }
}


/* =========================================================
   19. TABLET / NARROW DESKTOP
========================================================= */

@media (max-width: 1050px) {

    .nav-links {
        display:
            none;
    }


    .navbar {
        min-height:
            72px;
    }


    .brand-logo {
        width:
            50px;

        height:
            50px;
    }


    .hero-inner {
        grid-template-columns:
            1fr;

        min-height:
            auto;

        padding:
            70px 0 80px;

        gap:
            50px;
    }


    .hero-content {
        max-width:
            760px;

        margin:
            0 auto;

        text-align:
            center;
    }


    .hero-brand-lockup {
        margin-left:
            auto;

        margin-right:
            auto;
    }


    .hero-description {
        margin-left:
            auto;

        margin-right:
            auto;
    }


    .hero-actions {
        justify-content:
            center;
    }


    .hero-principle {
        justify-content:
            center;
    }


    .hero-mosaic {
        width:
            min(100%, 620px);

        height:
            570px;

        margin:
            0 auto;

        justify-self:
            center;
    }


    /*
       Learning Worlds remain genuinely horizontal
       at tablet/narrow-desktop widths.
    */

    .world-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            22px;
    }


    .world-card {
        grid-template-columns:
            minmax(150px, 39%)
            minmax(0, 1fr);
    }


    .world-card-image {
        min-height:
            210px;
    }


    .world-card-content {
        padding:
            22px;
    }


    /*
       Detailed Hubs remain 2 × 5 and horizontal.
    */

    .hub-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            24px;
    }


    .hub-card {
        grid-template-columns:
            minmax(160px, 40%)
            minmax(0, 1fr);
    }


    .hub-card-image,
    .hub-card-personal-care .hub-card-image {
        min-height:
            235px;
    }


    .hub-card-content {
        padding:
            23px;
    }


    .hub-card h3 {
        font-size:
            22px;
    }


    .hub-card p {
        font-size:
            13px;

        line-height:
            1.6;
    }


    .feature-section {
        grid-template-columns:
            1fr;

        padding:
            80px 0;
    }


    .feature-content {
        max-width:
            760px;
    }


    .feature-image {
        min-height:
            360px;
    }


    .feature-image img {
        min-height:
            360px;
    }


    .young-voices-layout {
        grid-template-columns:
            1fr;
    }


    .young-voices-copy {
        max-width:
            760px;
    }


    .young-voices-image,
    .young-voices-image img {
        min-height:
            380px;
    }


    .final-cta-inner {
        grid-template-columns:
            1fr;
    }


    .final-cta-content {
        max-width:
            760px;
    }


    .footer-inner {
        grid-template-columns:
            1.5fr
            1fr
            1fr;

        row-gap:
            40px;
    }
}


/* =========================================================
   20. MOBILE
========================================================= */

@media (max-width: 760px) {

    :root {
        --section-padding:
            70px;
    }


    .site-header {
        position:
            relative;
    }


    .navbar {
        width:
            94%;

        min-height:
            68px;
    }


    .brand-name {
        display:
            none;
    }


    .brand-logo {
        width:
            48px;

        height:
            48px;
    }


    .nav-cta {
        padding:
            9px 13px;

        font-size:
            10.5px;
    }


    .hero-inner {
        width:
            94%;

        padding:
            60px 0 65px;
    }


    .hero h1 {
        font-size:
            clamp(42px, 11vw, 58px);

        letter-spacing:
            -1.7px;
    }


    .hero h2 {
        font-size:
            20px;
    }


    .hero-description {
        font-size:
            15px;
    }


    .hero-actions {
        flex-direction:
            column;

        width:
            100%;
    }


    .hero-actions .btn {
        width:
            min(100%, 280px);
    }


    .hero-principle {
        align-items:
            flex-start;

        text-align:
            left;

        font-size:
            11px;
    }


    /* -----------------------------------------------------
       Mobile Mosaic
       PRESERVED — NO DESKTOP GEOMETRY CHANGES
    ----------------------------------------------------- */

    .hero-mosaic {
        width:
            100%;

        height:
            auto;

        margin-top:
            5px;

        display:
            grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-template-rows:
            none;

        gap:
            10px;
    }


    .mosaic-card {
        min-height:
            145px;

        border-width:
            3px;

        border-radius:
            19px;

        transform:
            none !important;

        animation:
            none !important;
    }


    .mosaic-main {
        grid-column:
            1 / -1;

        grid-row:
            auto;

        min-height:
            245px;

        border-width:
            4px;

        border-radius:
            25px;
    }


    .mosaic-main .mosaic-label {
        font-size:
            12px;
    }


    .mosaic-mental,
    .mosaic-ncd,
    .mosaic-indigenous,
    .mosaic-personal-care,
    .mosaic-infectious,
    .mosaic-innovation,
    .mosaic-world,
    .mosaic-heroes,
    .mosaic-awareness,
    .mosaic-teachers {
        grid-column:
            auto;

        grid-row:
            auto;
    }


    .mosaic-teachers {
        grid-column:
            1 / -1;

        min-height:
            150px;
    }


    .mosaic-card:hover,
    .mosaic-main:hover {
        transform:
            translateY(-4px)
            scale(1.01) !important;
    }


    .mosaic-dot {
        display:
            none;
    }


    /* -----------------------------------------------------
       Section Heading
    ----------------------------------------------------- */

    .section-heading {
        margin-bottom:
            38px;
    }


    .section-heading h2 {
        font-size:
            clamp(34px, 9vw, 46px);

        letter-spacing:
            -0.8px;
    }


    .section-heading p {
        font-size:
            15px;
    }


    /* -----------------------------------------------------
       Learning Worlds
       Vertical mobile presentation
    ----------------------------------------------------- */

    .world-grid {
        grid-template-columns:
            1fr;

        gap:
            20px;
    }


    .world-card {
        display:
            flex;

        flex-direction:
            column;
    }


    .world-card-image {
        width:
            100%;

        height:
            auto;

        min-height:
            0;

        aspect-ratio:
            16 / 9;
    }


    .world-card-content {
        padding:
            21px 22px 23px;
    }


    .world-card p {
        min-height:
            auto;
    }


    /* -----------------------------------------------------
       Detailed Hubs
       Vertical mobile presentation
    ----------------------------------------------------- */

    .ghe-hubs {
        padding-left:
            3%;

        padding-right:
            3%;
    }


    .hub-grid {
        grid-template-columns:
            1fr;

        gap:
            22px;
    }


    .hub-card {
        display:
            flex;

        flex-direction:
            column;
    }


    .hub-card-image,
    .hub-card-personal-care .hub-card-image {
        width:
            100%;

        height:
            auto;

        min-height:
            0;

        aspect-ratio:
            16 / 9;
    }


    .hub-card-content {
        padding:
            22px;
    }


    /* -----------------------------------------------------
       Features
    ----------------------------------------------------- */

    .feature-section {
        width:
            94%;

        padding:
            70px 0;

        gap:
            35px;
    }


    .feature-section.reverse {
        direction:
            ltr;
    }


    .feature-image,
    .feature-image img {
        min-height:
            300px;
    }


    .feature-content h2 {
        font-size:
            clamp(34px, 9vw, 46px);
    }


    .feature-content p {
        font-size:
            15px;
    }


    .ghbdc-section {
        width:
            100%;

        padding-left:
            3%;

        padding-right:
            3%;
    }


    /* -----------------------------------------------------
       Young Voices
    ----------------------------------------------------- */

    .young-voices-image,
    .young-voices-image img {
        min-height:
            300px;
    }


    .young-voices-copy h3 {
        font-size:
            clamp(30px, 8vw, 40px);
    }


    /* -----------------------------------------------------
       Story
    ----------------------------------------------------- */

    .story-section {
        min-height:
            570px;

        padding:
            85px 3%;
    }


    .story-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(8, 26, 42, 0.91),
                rgba(8, 26, 42, 0.70)
            );
    }


    .story-content h2 {
        font-size:
            clamp(35px, 9vw, 48px);
    }


    .story-content p {
        font-size:
            15px;
    }


    /* -----------------------------------------------------
       Final CTA
    ----------------------------------------------------- */

    .final-cta {
        padding:
            70px 0;
    }


    .final-cta-inner {
        width:
            94%;

        gap:
            35px;
    }


    .final-cta-image img {
        height:
            300px;
    }


    .final-cta-content h2 {
        font-size:
            clamp(35px, 9vw, 48px);
    }


    /* -----------------------------------------------------
       News
    ----------------------------------------------------- */

    .news-ticker {
        display:
            block;
    }


    .news-ticker-label {
        min-height:
            38px;

        padding:
            0 15px;

        font-size:
            9px;
    }


    .news-ticker-content {
        height:
            44px;
    }


    .ticker-item {
        font-size:
            11px;

        padding:
            0 13px;
    }


    /* -----------------------------------------------------
       Footer
    ----------------------------------------------------- */

    .footer-inner {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        padding:
            60px 0 45px;

        gap:
            35px 25px;
    }


    .footer-brand {
        grid-column:
            1 / -1;

        max-width:
            100%;
    }


    .footer-bottom {
        flex-direction:
            column;

        align-items:
            flex-start;
    }
}


/* =========================================================
   21. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .navbar {
        width:
            94%;
    }


    .nav-cta {
        padding:
            8px 11px;

        font-size:
            10px;
    }


    .hero-inner {
        padding:
            50px 0 55px;
    }


    .hero-brand-lockup {
        margin-bottom:
            18px;
    }


    .hero-logo {
        width:
            38px;

        height:
            38px;
    }


    .hero-brand-text {
        font-size:
            8px;
    }


    .hero-kicker {
        font-size:
            10px;

        letter-spacing:
            1.5px;
    }


    .hero h1 {
        font-size:
            clamp(38px, 11vw, 48px);
    }


    .hero h2 {
        margin-top:
            18px;

        font-size:
            18px;
    }


    .hero-description {
        font-size:
            14px;
    }


    /* -----------------------------------------------------
       Small Mobile Mosaic
       PRESERVED
    ----------------------------------------------------- */

    .hero-mosaic {
        gap:
            8px;

        margin-top:
            0;
    }


    .mosaic-card {
        min-height:
            125px;

        border-radius:
            17px;
    }


    .mosaic-main {
        min-height:
            215px;

        border-radius:
            22px;
    }


    .mosaic-label {
        left:
            8px;

        bottom:
            8px;

        max-width:
            calc(100% - 16px);

        padding:
            5px 8px;

        font-size:
            8.5px;
    }


    .mosaic-main .mosaic-label {
        font-size:
            11px;
    }


    .mosaic-teachers {
        min-height:
            130px;
    }


    .section-heading {
        margin-bottom:
            32px;
    }


    .section-heading h2 {
        font-size:
            34px;
    }


    /* -----------------------------------------------------
       Learning Worlds
    ----------------------------------------------------- */

    .world-card-image {
        aspect-ratio:
            16 / 9;

        height:
            auto;
    }


    .world-card-content {
        padding:
            20px;
    }


    /* -----------------------------------------------------
       Detailed Hubs
    ----------------------------------------------------- */

    .hub-card-image,
    .hub-card-personal-care .hub-card-image {
        aspect-ratio:
            16 / 9;

        height:
            auto;
    }


    .hub-card-content {
        padding:
            20px;
    }


    .hub-card h3 {
        font-size:
            23px;
    }


    .feature-section {
        padding:
            60px 0;
    }


    .feature-image,
    .feature-image img {
        min-height:
            250px;
    }


    .story-section {
        min-height:
            540px;

        padding:
            70px 3%;
    }


    .story-content h2 {
        font-size:
            36px;
    }


    .final-cta-image img {
        height:
            250px;
    }


    .final-cta-content h2 {
        font-size:
            36px;
    }


    .footer-inner {
        grid-template-columns:
            1fr;

        padding:
            50px 0 40px;
    }


    .footer-column {
        width:
            100%;
    }


    .footer-bottom {
        padding:
            18px 0;
    }
}


/* =========================================================
   22. VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .nav-cta {
        padding:
            8px 9px;

        font-size:
            9px;
    }


    .hero h1 {
        font-size:
            35px;

        letter-spacing:
            -1px;
    }


    .hero h2 {
        font-size:
            17px;
    }


    .mosaic-card {
        min-height:
            115px;
    }


    .mosaic-main {
        min-height:
            195px;
    }


    .mosaic-teachers {
        min-height:
            120px;
    }


    .mosaic-label {
        font-size:
            8px;
    }


    .mosaic-main .mosaic-label {
        font-size:
            10px;
    }
}


/* =========================================================
   23. ACCESSIBILITY
========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline:
        3px solid var(--gold);

    outline-offset:
        4px;
}


@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior:
            auto;
    }


    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }


    .news-ticker-content {
        animation:
            none !important;

        transform:
            none !important;
    }
}


/* =========================================================
   24. PRINT
========================================================= */

@media print {

    .site-header {
        position:
            static;

        box-shadow:
            none;
    }


    .hero {
        background:
            var(--white);
    }


    .hero-mosaic,
    .news-ticker {
        display:
            none;
    }


    .site-footer {
        color:
            #000;

        background:
            var(--white);
    }


    .footer-column a,
    .footer-brand,
    .footer-bottom {
        color:
            #000;
    }
}


/*
=========================================================
END OF HOMEPAGE CSS

There is deliberately NO:
• circular Hub Navigator
• orbit system
• connector system
• duplicate mobile Mosaic
• obsolete 430px Mosaic grid
• legacy 8-card Mosaic positioning

LEARNING WORLDS:
• TRUE HORIZONTAL editorial cards on desktop
• 2-column desktop layout
• 2-column tablet layout
• 1-column mobile layout
• landscape image panels
• image left / content right on desktop

DETAILED GHE HUBS:
• TRUE HORIZONTAL editorial cards on desktop
• 2-column desktop layout
• 2-column tablet layout
• 1-column mobile layout
• image left / content right on desktop
• landscape image panels
• 16:9 mobile imagery

HERO MOSAIC:
• Desktop geometry preserved
• Mobile geometry preserved
• No changes to mosaic positioning
=========================================================
*/