/* ============================================================
   GLOBAL HEALTH EXPLORERS
   WATER, SANITATION & ENVIRONMENT
   ============================================================ */


/* ============================================================
   ROOT
   ============================================================ */

:root {

    --we-navy: #123c52;
    --we-deep: #0b2f42;
    --we-blue: #176b87;
    --we-cyan: #39a9c6;
    --we-light-blue: #e9f7fb;

    --we-water: #247da5;
    --we-water-light: #dff2f8;

    --we-green: #39795c;
    --we-green-light: #eaf5ef;

    --we-teal: #258a88;
    --we-teal-light: #e4f4f3;

    --we-yellow: #d9a72e;
    --we-yellow-light: #fff7dc;

    --we-red: #bd5148;
    --we-red-light: #faecea;

    --we-orange: #d47a32;
    --we-orange-light: #fff0e4;

    --we-purple: #65578e;
    --we-purple-light: #f0edf8;

    --we-white: #ffffff;
    --we-off-white: #f7fafb;
    --we-grey-50: #f3f6f7;
    --we-grey-100: #e8eef0;
    --we-grey-200: #d5e0e4;
    --we-grey-500: #71838b;
    --we-grey-700: #40535c;
    --we-text: #20343d;

    --we-shadow:
        0 12px 35px rgba(17, 53, 68, 0.09);

    --we-shadow-soft:
        0 5px 18px rgba(17, 53, 68, 0.07);

    --we-radius: 18px;
    --we-radius-small: 11px;

    --we-max-width: 1180px;

}


/* ============================================================
   RESET
   ============================================================ */

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


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    padding: 0;

    font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    color: var(--we-text);
    background: var(--we-white);

    line-height: 1.65;

    -webkit-font-smoothing: antialiased;
}


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


button,
a {
    font: inherit;
}


button {
    cursor: pointer;
}


a {
    color: inherit;
    text-decoration: none;
}


h1,
h2,
h3,
h4,
p {
    margin-top: 0;
}


h1,
h2,
h3,
h4 {
    line-height: 1.18;
}


/* ============================================================
   CONTAINER
   ============================================================ */

.we-container {
    width: min(
        calc(100% - 40px),
        var(--we-max-width)
    );

    margin-inline: auto;
}


/* ============================================================
   HEADER
   ============================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

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

    border-bottom:
        1px solid var(--we-grey-100);

    backdrop-filter: blur(12px);
}


.header-inner {
    width: min(
        calc(100% - 40px),
        1380px
    );

    min-height: 76px;

    margin-inline: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}


.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    flex-shrink: 0;
}


.brand-logo {
    width: 45px;
    height: 45px;

    object-fit: contain;
}


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

    font-size: 1rem;
    font-weight: 800;

    white-space: nowrap;
}


.main-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 4px;
}


.main-navigation a {
    position: relative;

    padding: 9px 11px;

    color: var(--we-grey-700);

    font-size: 0.88rem;
    font-weight: 650;

    border-radius: 8px;

    transition:
        color 0.2s ease,
        background 0.2s ease;
}


.main-navigation a:hover {
    color: var(--we-blue);
    background: var(--we-light-blue);
}


.main-navigation a.active {
    color: var(--we-blue);
}


.main-navigation a.active::after {
    content: "";

    position: absolute;

    left: 11px;
    right: 11px;
    bottom: 2px;

    height: 2px;

    background: var(--we-cyan);

    border-radius: 99px;
}


.nav-toggle {
    display: none;

    width: 45px;
    height: 42px;

    padding: 8px;

    border:
        1px solid var(--we-grey-200);

    border-radius: 9px;

    background: var(--we-white);
}


.nav-toggle span {
    display: block;

    width: 100%;
    height: 2px;

    margin: 5px 0;

    background: var(--we-navy);
}


/* ============================================================
   HERO
   ============================================================ */

.we-hero {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #e9f7fb 0%,
            #f7fbfc 54%,
            #e8f3f1 100%
        );

    border-bottom:
        1px solid var(--we-grey-100);
}


.we-hero::after {
    content: "";

    position: absolute;

    right: -150px;
    top: -150px;

    width: 470px;
    height: 470px;

    border-radius: 50%;

    border:
        1px solid rgba(36, 125, 165, 0.12);

    box-shadow:
        0 0 0 55px rgba(36, 125, 165, 0.025),
        0 0 0 110px rgba(36, 125, 165, 0.018);

    pointer-events: none;
}


.we-hero-content {
    position: relative;
    z-index: 1;

    max-width: 860px;

    padding:
        92px 0
        88px;
}


.we-eyebrow,
.section-kicker {
    display: inline-block;

    color: var(--we-blue);

    font-size: 0.76rem;
    font-weight: 800;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}


.we-hero h1 {
    max-width: 900px;

    margin:
        13px 0
        18px;

    color: var(--we-deep);

    font-size:
        clamp(2.65rem, 6vw, 5rem);

    letter-spacing: -0.045em;
}


.we-hero h1 span {
    display: block;

    color: var(--we-blue);
}


.we-hero-lead {
    max-width: 720px;

    margin-bottom: 12px;

    color: var(--we-navy);

    font-size:
        clamp(1.35rem, 2.3vw, 1.75rem);

    font-weight: 700;
}


.we-hero-text {
    max-width: 760px;

    margin-bottom: 30px;

    color: var(--we-grey-700);

    font-size: 1.05rem;
}


.we-pathway {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    color: var(--we-blue);

    font-size: 0.86rem;
    font-weight: 750;
}


.path-arrow {
    color: var(--we-grey-500);
}


/* ============================================================
   SECTIONS
   ============================================================ */

.we-section {
    padding:
        92px 0;
}


.we-section:nth-of-type(even) {
    background: var(--we-off-white);
}


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

    margin-bottom: 48px;
}


.section-heading.centered {
    margin-inline: auto;

    text-align: center;
}


.section-heading h2,
.data-detective-header h2 {
    margin:
        10px 0
        17px;

    color: var(--we-deep);

    font-size:
        clamp(2rem, 4vw, 3rem);

    letter-spacing: -0.03em;
}


.section-heading p {
    margin-bottom: 0;

    color: var(--we-grey-700);

    font-size: 1.04rem;
}


/* ============================================================
   FOUR PILLARS
   ============================================================ */

.we-four-pillars {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 18px;
}


.pillar-card {
    padding: 28px;

    background: var(--we-white);

    border:
        1px solid var(--we-grey-100);

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

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

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.pillar-card:hover {
    transform: translateY(-4px);

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


.pillar-number {
    margin-bottom: 25px;

    color: var(--we-cyan);

    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}


.pillar-card h3 {
    margin-bottom: 10px;

    color: var(--we-navy);

    font-size: 1.3rem;
}


.pillar-card p {
    margin-bottom: 0;

    color: var(--we-grey-700);

    font-size: 0.93rem;
}


/* ============================================================
   WATER SECTION
   ============================================================ */

.water-section {
    background:
        linear-gradient(
            180deg,
            #f9fcfd 0%,
            #edf8fb 100%
        );
}


.global-stat-card {
    display: grid;

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

    align-items: center;

    max-width: 900px;

    margin:
        0 auto
        50px;

    padding: 34px 40px;

    background: var(--we-white);

    border:
        1px solid var(--we-grey-100);

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

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


.stat-main,
.stat-secondary {
    display: flex;
    align-items: center;

    gap: 22px;
}


.stat-main strong,
.stat-secondary strong {
    color: var(--we-blue);

    font-size: 2.55rem;
    line-height: 1;

    white-space: nowrap;
}


.stat-secondary strong {
    color: var(--we-green);
}


.stat-main span,
.stat-secondary span {
    color: var(--we-grey-700);

    font-size: 0.91rem;
    line-height: 1.45;
}


.stat-divider {
    width: 1px;
    height: 60px;

    margin: 0 35px;

    background: var(--we-grey-200);
}


/* ============================================================
   MAP INVESTIGATION
   ============================================================ */

.map-investigation {
    padding:
        clamp(22px, 4vw, 44px);

    background: var(--we-white);

    border:
        1px solid var(--we-grey-100);

    border-radius:
        24px;

    box-shadow:
        0 18px 50px
        rgba(17, 53, 68, 0.08);
}


.map-introduction {
    max-width: 800px;

    margin-bottom: 30px;
}


.investigation-label {
    display: inline-block;

    margin-bottom: 9px;

    color: var(--we-red);

    font-size: 0.72rem;
    font-weight: 850;

    letter-spacing: 0.13em;
    text-transform: uppercase;
}


.map-introduction h3 {
    margin-bottom: 10px;

    color: var(--we-deep);

    font-size:
        clamp(1.65rem, 3vw, 2.25rem);
}


.map-introduction p {
    margin-bottom: 0;

    color: var(--we-grey-700);
}


/* ============================================================
   MAP
   ============================================================ */

.global-water-map {
    margin:
        0 auto
        28px;

    padding: 15px;

    background: var(--we-grey-50);

    border:
        1px solid var(--we-grey-200);

    border-radius:
        15px;
}


.global-water-map img {
    width: 100%;
    height: auto;

    border-radius: 9px;
}


.global-water-map figcaption {
    padding:
        13px 5px 2px;

    color: var(--we-grey-500);

    font-size: 0.77rem;
    line-height: 1.5;

    text-align: center;
}


/* ============================================================
   MAP LEGEND
   ============================================================ */

.map-legend {
    padding: 25px;

    background: var(--we-off-white);

    border-radius: var(--we-radius-small);
}


.map-legend h4 {
    margin-bottom: 18px;

    color: var(--we-navy);

    font-size: 1rem;
}


.legend-grid {
    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 13px;
}


.legend-item {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    color: var(--we-grey-700);

    font-size: 0.79rem;
    line-height: 1.4;
}


.legend-swatch {
    flex: 0 0 17px;

    width: 17px;
    height: 17px;

    margin-top: 2px;

    border-radius: 4px;

    border:
        1px solid rgba(0, 0, 0, 0.08);
}


.legend-red .legend-swatch {
    background: #c75b52;
}


.legend-yellow .legend-swatch {
    background: #e1b42e;
}


.legend-light-blue .legend-swatch {
    background: #72b8d2;
}


.legend-dark-blue .legend-swatch {
    background: #185d82;
}


.legend-grey .legend-swatch {
    background: #a6abad;
}


/* ============================================================
   MAP COMPARISONS
   ============================================================ */

.map-comparisons {
    display: grid;

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

    gap: 18px;

    margin-top: 22px;
}


.comparison-card {
    padding: 28px;

    background: var(--we-red-light);

    border-left:
        5px solid var(--we-red);

    border-radius:
        0
        var(--we-radius-small)
        var(--we-radius-small)
        0;
}


.comparison-card.comparison-positive {
    background: var(--we-green-light);

    border-left-color: var(--we-green);
}


.comparison-tag {
    display: inline-block;

    margin-bottom: 12px;

    color: var(--we-red);

    font-size: 0.68rem;
    font-weight: 850;

    letter-spacing: 0.12em;
}


.comparison-positive .comparison-tag {
    color: var(--we-green);
}


.comparison-card h4 {
    margin-bottom: 9px;

    color: var(--we-deep);

    font-size: 1.35rem;
}


.comparison-card p {
    margin-bottom: 12px;

    color: var(--we-grey-700);

    font-size: 0.91rem;
}


.comparison-card p:last-child {
    margin-bottom: 0;
}


.comparison-question {
    font-weight: 700;
}


/* ============================================================
   THINKING BOX
   ============================================================ */

.thinking-box {
    display: grid;

    grid-template-columns:
        58px 1fr;

    gap: 20px;

    margin-top: 22px;

    padding: 27px;

    background:
        linear-gradient(
            135deg,
            var(--we-navy),
            var(--we-blue)
        );

    color: var(--we-white);

    border-radius: var(--we-radius);
}


.thinking-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

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

    border-radius: 50%;

    font-size: 1.4rem;
    font-weight: 850;
}


.thinking-box span {
    display: block;

    margin-bottom: 6px;

    font-size: 0.68rem;
    font-weight: 850;

    letter-spacing: 0.13em;
}


.thinking-box h4 {
    max-width: 760px;

    margin-bottom: 10px;

    font-size: 1.28rem;
}


.thinking-box p {
    max-width: 820px;

    margin-bottom: 0;

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

    font-size: 0.91rem;
}


/* ============================================================
   SERVICE LADDER
   ============================================================ */

.service-section {
    background: var(--we-white);
}


.service-ladder {
    max-width: 900px;

    margin:
        0 auto
        28px;
}


.service-step {
    position: relative;

    display: grid;

    grid-template-columns:
        58px 1fr;

    gap: 20px;

    padding: 26px 28px;

    background: var(--we-off-white);

    border-left:
        4px solid var(--we-water);

    border-bottom:
        1px solid var(--we-grey-200);
}


.service-step:first-child {
    border-radius:
        var(--we-radius-small)
        var(--we-radius-small)
        0
        0;
}


.service-step:last-child {
    border-radius:
        0
        0
        var(--we-radius-small)
        var(--we-radius-small);

    border-bottom: 0;
}


.service-top {
    background: var(--we-water-light);
}


.step-number {
    color: var(--we-water);

    font-size: 0.8rem;
    font-weight: 900;
}


.service-step h3 {
    margin-bottom: 7px;

    color: var(--we-navy);

    font-size: 1.18rem;
}


.service-step p {
    margin-bottom: 0;

    color: var(--we-grey-700);

    font-size: 0.9rem;
}


.data-literacy-note {
    display: flex;

    gap: 8px;

    max-width: 900px;

    margin-inline: auto;

    padding: 20px 23px;

    background: var(--we-yellow-light);

    border:
        1px solid rgba(217, 167, 46, 0.3);

    border-radius: var(--we-radius-small);

    color: var(--we-grey-700);

    font-size: 0.91rem;
}


/* ============================================================
   SPLIT SECTIONS
   ============================================================ */

.split-section {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 60px;

    align-items: center;
}


.split-content h2 {
    margin:
        10px 0
        18px;

    color: var(--we-deep);

    font-size:
        clamp(2rem, 4vw, 2.8rem);

    letter-spacing: -0.03em;
}


.split-content p {
    color: var(--we-grey-700);

    font-size: 1rem;
}


.big-number {
    display: inline-flex;
    align-items: baseline;

    gap: 14px;

    margin-top: 13px;
}


.big-number strong {
    color: var(--we-teal);

    font-size: 4rem;
    line-height: 1;
}


.big-number span {
    color: var(--we-grey-500);

    font-size: 0.86rem;
}


/* ============================================================
   CONNECTION CARD
   ============================================================ */

.connection-card {
    padding: 35px;

    background: var(--we-teal-light);

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

    border:
        1px solid rgba(37, 138, 136, 0.12);
}


.connection-card h3 {
    margin-bottom: 24px;

    color: var(--we-navy);

    font-size: 1.4rem;
}


.connection-flow {
    display: flex;
    flex-direction: column;

    gap: 9px;
}


.connection-flow span {
    padding: 11px 14px;

    background: var(--we-white);

    border-radius: 8px;

    color: var(--we-grey-700);

    font-size: 0.87rem;
    font-weight: 700;

    text-align: center;
}


.connection-flow b {
    color: var(--we-teal);

    text-align: center;
}


.connection-card p {
    margin:
        22px 0
        0;

    color: var(--we-grey-700);

    font-size: 0.9rem;
}


/* ============================================================
   HYGIENE
   ============================================================ */

.hygiene-section {
    background: var(--we-off-white);
}


.hygiene-stat {
    display: grid;

    grid-template-columns:
        250px 1fr;

    align-items: center;

    gap: 40px;

    max-width: 900px;

    margin-inline: auto;

    padding: 42px;

    background: var(--we-white);

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

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


.hygiene-number {
    color: var(--we-green);

    font-size: 5rem;
    font-weight: 850;

    line-height: 1;

    text-align: center;
}


.hygiene-stat h3 {
    margin-bottom: 10px;

    color: var(--we-navy);

    font-size: 1.5rem;
}


.hygiene-stat p {
    color: var(--we-grey-700);

    font-size: 0.95rem;
}


/* ============================================================
   HEALTH CONNECTIONS
   ============================================================ */

.health-section {
    background: var(--we-white);
}


.health-connections {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;
}


.health-card {
    padding: 27px;

    border:
        1px solid var(--we-grey-100);

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

    background: var(--we-white);

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


.health-card > span {
    display: block;

    margin-bottom: 23px;

    color: var(--we-cyan);

    font-size: 0.72rem;
    font-weight: 900;

    letter-spacing: 0.1em;
}


.health-card h3 {
    margin-bottom: 9px;

    color: var(--we-navy);

    font-size: 1.18rem;
}


.health-card p {
    margin-bottom: 0;

    color: var(--we-grey-700);

    font-size: 0.89rem;
}


/* ============================================================
   INEQUALITY
   ============================================================ */

.inequality-section {
    background: var(--we-off-white);
}


.inequality-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;
}


.inequality-card {
    min-height: 190px;

    padding: 28px;

    background: var(--we-white);

    border:
        1px solid var(--we-grey-100);

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

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


.inequality-card h3 {
    margin-bottom: 10px;

    color: var(--we-purple);

    font-size: 1.2rem;
}


.inequality-card p {
    margin-bottom: 0;

    color: var(--we-grey-700);

    font-size: 0.9rem;
}


.equity-question {
    margin-top: 28px;

    padding:
        30px 34px;

    background: var(--we-purple-light);

    border-left:
        5px solid var(--we-purple);

    border-radius:
        0
        var(--we-radius)
        var(--we-radius)
        0;
}


.equity-question span {
    display: block;

    margin-bottom: 8px;

    color: var(--we-purple);

    font-size: 0.69rem;
    font-weight: 900;

    letter-spacing: 0.13em;
}


.equity-question h3 {
    margin-bottom: 0;

    color: var(--we-deep);

    font-size: 1.4rem;
}


/* ============================================================
   ENVIRONMENT
   ============================================================ */

.environment-section {
    background: var(--we-white);
}


.environment-split {
    align-items: start;
}


.environment-web {
    display: grid;

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

    gap: 13px;
}


.environment-node {
    min-height: 100px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 18px;

    background: var(--we-green-light);

    border:
        1px solid rgba(57, 121, 92, 0.13);

    border-radius: var(--we-radius-small);

    color: var(--we-green);

    font-weight: 750;

    text-align: center;
}


.environment-question {
    margin-top: 50px;

    padding: 30px;

    background: var(--we-light-blue);

    border-radius: var(--we-radius);
}


.environment-question h3 {
    margin-bottom: 8px;

    color: var(--we-navy);

    font-size: 1.45rem;
}


.environment-question p {
    max-width: 850px;

    margin-bottom: 0;

    color: var(--we-grey-700);
}


/* ============================================================
   FACILITIES
   ============================================================ */

.facilities-section {
    background:
        linear-gradient(
            180deg,
            #f7fbf9,
            #ffffff
        );
}


.facility-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;
}


.facility-card {
    padding: 32px;

    background: var(--we-white);

    border:
        1px solid var(--we-grey-100);

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

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


.facility-number {
    margin-bottom: 17px;

    color: var(--we-green);

    font-size: 2.6rem;
    font-weight: 850;

    line-height: 1;
}


.facility-card h3 {
    margin-bottom: 9px;

    color: var(--we-navy);
}


.facility-card p {
    margin-bottom: 0;

    color: var(--we-grey-700);

    font-size: 0.9rem;
}


.school-action {
    margin-top: 28px;

    padding: 34px;

    background: var(--we-green-light);

    border-radius: var(--we-radius);
}


.school-action > span {
    display: block;

    margin-bottom: 8px;

    color: var(--we-green);

    font-size: 0.68rem;
    font-weight: 900;

    letter-spacing: 0.13em;
}


.school-action h3 {
    margin-bottom: 8px;

    color: var(--we-navy);

    font-size: 1.45rem;
}


.school-action p {
    max-width: 850px;

    margin-bottom: 0;

    color: var(--we-grey-700);
}


/* ============================================================
   DATA DETECTIVE
   ============================================================ */

.data-detective-section {
    background:
        linear-gradient(
            135deg,
            #f2f7fa,
            #eef7f4
        );
}


.data-detective-header {
    max-width: 800px;

    margin-bottom: 45px;
}


.data-detective-header p {
    color: var(--we-grey-700);

    font-size: 1rem;
}


.detective-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 15px;
}


.detective-question {
    display: grid;

    grid-template-columns: 38px 1fr;

    gap: 14px;

    align-items: start;

    min-height: 120px;

    padding: 24px;

    background: var(--we-white);

    border:
        1px solid var(--we-grey-100);

    border-radius: var(--we-radius-small);
}


.detective-question > span {
    color: var(--we-blue);

    font-size: 0.74rem;
    font-weight: 900;
}


.detective-question h3 {
    margin-bottom: 0;

    color: var(--we-navy);

    font-size: 1rem;
}


.detective-challenge {
    margin-top: 22px;

    padding: 27px;

    background: var(--we-navy);

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

    color: var(--we-white);
}


.detective-challenge strong {
    display: block;

    margin-bottom: 8px;

    color: #9fd9e7;

    font-size: 0.72rem;

    letter-spacing: 0.12em;
}


.detective-challenge p {
    max-width: 880px;

    margin-bottom: 0;

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

    font-size: 0.94rem;
}


/* ============================================================
   SDG
   ============================================================ */

.sdg-section {
    background: var(--we-white);
}


.sdg-header {
    display: grid;

    grid-template-columns:
        110px 1fr;

    gap: 28px;

    align-items: center;

    margin-bottom: 42px;
}


.sdg-badge {
    width: 100px;
    height: 100px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: #279a9c;

    color: var(--we-white);

    border-radius: 12px;
}


.sdg-badge span {
    font-size: 0.7rem;
    font-weight: 850;
}


.sdg-badge strong {
    font-size: 2.9rem;
    line-height: 1;
}


.sdg-header h2 {
    margin:
        7px 0
        8px;

    color: var(--we-deep);

    font-size:
        clamp(1.9rem, 4vw, 2.8rem);
}


.sdg-header p {
    margin-bottom: 0;

    color: var(--we-grey-700);
}


.sdg-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 16px;
}


.sdg-grid article {
    padding: 27px;

    background: var(--we-off-white);

    border-radius: var(--we-radius-small);

    border-top:
        4px solid #279a9c;
}


.sdg-grid article > span {
    color: #279a9c;

    font-size: 0.78rem;
    font-weight: 900;
}


.sdg-grid h3 {
    margin:
        8px 0
        7px;

    color: var(--we-navy);

    font-size: 1.08rem;
}


.sdg-grid p {
    margin-bottom: 0;

    color: var(--we-grey-700);

    font-size: 0.87rem;
}


/* ============================================================
   QUIZ
   ============================================================ */

.quiz-section {
    background:
        linear-gradient(
            180deg,
            #eef8fb,
            #f8fbfc
        );
}


.quiz-header {
    max-width: 800px;

    margin-bottom: 38px;
}


.quiz-header h2 {
    margin:
        9px 0
        13px;

    color: var(--we-deep);

    font-size:
        clamp(2rem, 4vw, 3rem);

    letter-spacing: -0.03em;
}


.quiz-header p {
    margin-bottom: 0;

    color: var(--we-grey-700);
}


.quiz-progress {
    max-width: 900px;

    margin:
        0 auto
        18px;

    color: var(--we-grey-500);

    font-size: 0.78rem;
    font-weight: 750;
}


.quiz-progress-bar {
    height: 7px;

    margin-top: 8px;

    overflow: hidden;

    background: var(--we-grey-200);

    border-radius: 99px;
}


#quiz-progress-fill {
    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--we-cyan),
            var(--we-blue)
        );

    border-radius: 99px;

    transition:
        width 0.35s ease;
}


.quiz-container {
    max-width: 900px;

    margin-inline: auto;
}


.quiz-question {
    display: none;

    padding: 36px;

    background: var(--we-white);

    border:
        1px solid var(--we-grey-100);

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

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


.quiz-question.active {
    display: block;
}


.question-number {
    display: inline-block;

    margin-bottom: 12px;

    color: var(--we-blue);

    font-size: 0.76rem;
    font-weight: 900;

    letter-spacing: 0.12em;
}


.quiz-question h3 {
    margin-bottom: 25px;

    color: var(--we-deep);

    font-size:
        clamp(1.3rem, 2.5vw, 1.65rem);
}


.quiz-options {
    display: grid;

    gap: 10px;
}


.quiz-options button {
    width: 100%;

    padding: 15px 17px;

    background: var(--we-white);

    border:
        1px solid var(--we-grey-200);

    border-radius: 10px;

    color: var(--we-grey-700);

    font-size: 0.91rem;

    text-align: left;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}


.quiz-options button:hover:not(:disabled) {
    border-color: var(--we-cyan);

    background: var(--we-light-blue);

    transform: translateX(3px);
}


.quiz-options button:disabled {
    cursor: default;
}


.quiz-options button.correct-answer {
    border-color: var(--we-green);

    background: var(--we-green-light);

    color: var(--we-green);

    font-weight: 700;
}


.quiz-options button.selected-correct {
    box-shadow:
        inset 4px 0 0 var(--we-green);
}


.quiz-options button.selected-incorrect {
    border-color: var(--we-red);

    background: var(--we-red-light);

    color: var(--we-red);

    box-shadow:
        inset 4px 0 0 var(--we-red);
}


.quiz-feedback {
    min-height: 25px;

    margin-top: 16px;

    font-size: 0.87rem;
    font-weight: 700;
}


.quiz-feedback.correct {
    color: var(--we-green);
}


.quiz-feedback.incorrect {
    color: var(--we-red);
}


.quiz-controls {
    display: flex;
    justify-content: space-between;

    gap: 15px;

    margin-top: 18px;
}


.quiz-button,
.quiz-restart {
    padding:
        12px 20px;

    border: 0;

    border-radius: 9px;

    background: var(--we-navy);

    color: var(--we-white);

    font-size: 0.86rem;
    font-weight: 750;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


.quiz-button:hover:not(:disabled),
.quiz-restart:hover {
    transform: translateY(-2px);
}


.quiz-button:disabled {
    opacity: 0.35;

    cursor: not-allowed;
}


.quiz-result {
    display: none;

    margin-top: 18px;

    padding: 40px;

    background:
        linear-gradient(
            135deg,
            var(--we-navy),
            var(--we-blue)
        );

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

    color: var(--we-white);

    text-align: center;
}


.quiz-result.visible {
    display: block;
}


.result-score {
    display: flex;
    flex-direction: column;

    gap: 4px;

    margin-bottom: 18px;
}


.result-score span {
    color: rgba(255, 255, 255, 0.7);

    font-size: 0.78rem;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.1em;
}


.result-score strong {
    font-size: 3.2rem;

    line-height: 1;
}


.quiz-result h3 {
    margin-bottom: 9px;

    font-size: 1.55rem;
}


.quiz-result p {
    max-width: 650px;

    margin:
        0 auto
        22px;

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


.quiz-restart {
    background: var(--we-white);

    color: var(--we-navy);
}


/* ============================================================
   REFLECTION
   ============================================================ */

.reflection-section {
    background: var(--we-white);
}


.reflection-card {
    padding:
        clamp(35px, 6vw, 65px);

    background:
        linear-gradient(
            135deg,
            #edf8fb,
            #edf6f0
        );

    border-radius:
        26px;

    text-align: center;
}


.reflection-label {
    display: inline-block;

    margin-bottom: 14px;

    color: var(--we-blue);

    font-size: 0.68rem;
    font-weight: 900;

    letter-spacing: 0.1em;
}


.reflection-card h2 {
    margin-bottom: 14px;

    color: var(--we-deep);

    font-size:
        clamp(2rem, 4vw, 3rem);

    letter-spacing: -0.03em;
}


.reflection-card > p {
    max-width: 750px;

    margin:
        0 auto
        30px;

    color: var(--we-grey-700);

    font-size: 1rem;
}


.reflection-prompts {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 12px;
}


.reflection-prompts div {
    display: flex;
    flex-direction: column;

    gap: 4px;

    padding: 18px;

    background: var(--we-white);

    border-radius: 11px;
}


.reflection-prompts strong {
    color: var(--we-blue);

    font-size: 0.88rem;
}


.reflection-prompts span {
    color: var(--we-grey-700);

    font-size: 0.78rem;
}


/* ============================================================
   NEXT TOPICS
   ============================================================ */

.we-next-section {
    padding:
        25px 0
        65px;

    background: var(--we-white);
}


.next-topic-grid {
    display: grid;

    grid-template-columns:
        1fr 1.5fr;

    gap: 15px;
}


.next-topic-card {
    display: flex;
    flex-direction: column;

    gap: 7px;

    padding: 25px;

    background: var(--we-off-white);

    border:
        1px solid var(--we-grey-100);

    border-radius: var(--we-radius-small);

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.next-topic-card:hover {
    transform: translateY(-3px);

    background: var(--we-light-blue);
}


.next-topic-card span {
    color: var(--we-grey-500);

    font-size: 0.66rem;
    font-weight: 850;

    letter-spacing: 0.1em;
}


.next-topic-card strong {
    color: var(--we-navy);

    font-size: 1rem;
}


.next-topic-featured {
    background: var(--we-navy);
}


.next-topic-featured span {
    color: rgba(255, 255, 255, 0.65);
}


.next-topic-featured strong {
    color: var(--we-white);
}


/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
    background: var(--we-deep);

    color: var(--we-white);
}


.footer-main {
    display: grid;

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

    gap: 55px;

    padding:
        65px 0
        45px;
}


.footer-brand img {
    width: 62px;
    height: 62px;

    margin-bottom: 17px;

    object-fit: contain;
}


.footer-brand p {
    max-width: 560px;

    margin-bottom: 0;

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

    font-size: 0.86rem;
}


.footer-links {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 9px;
}


.footer-links h3 {
    margin-bottom: 8px;

    color: var(--we-white);

    font-size: 0.92rem;
}


.footer-links a {
    color: rgba(255, 255, 255, 0.68);

    font-size: 0.82rem;

    transition: color 0.2s ease;
}


.footer-links a:hover {
    color: var(--we-white);
}


.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        22px 0
        25px;

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


.footer-bottom p {
    margin-bottom: 0;

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

    font-size: 0.74rem;
}


/* ============================================================
   RESPONSIVE — 1100px
   ============================================================ */

@media (max-width: 1100px) {

    .main-navigation a {
        padding-inline: 8px;

        font-size: 0.8rem;
    }


    .we-four-pillars {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .legend-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }


    .health-connections,
    .inequality-grid,
    .facility-grid,
    .sdg-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .reflection-prompts {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* ============================================================
   RESPONSIVE — 850px
   ============================================================ */

@media (max-width: 850px) {

    .header-inner {
        min-height: 68px;
    }


    .nav-toggle {
        display: block;
    }


    .main-navigation {
        position: absolute;

        left: 20px;
        right: 20px;
        top: calc(100% + 1px);

        display: none;
        flex-direction: column;
        align-items: stretch;

        padding: 12px;

        background: var(--we-white);

        border:
            1px solid var(--we-grey-100);

        border-radius:
            0
            0
            13px
            13px;

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


    .main-navigation.nav-open {
        display: flex;
    }


    .main-navigation a {
        padding: 12px;

        font-size: 0.9rem;
    }


    .main-navigation a.active::after {
        display: none;
    }


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

        gap: 35px;
    }


    .environment-split {
        gap: 30px;
    }


    .global-stat-card {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .stat-divider {
        width: 100%;
        height: 1px;

        margin: 0;
    }


    .stat-main,
    .stat-secondary {
        justify-content: center;
    }


    .map-comparisons {
        grid-template-columns: 1fr;
    }


    .hygiene-stat {
        grid-template-columns: 1fr;

        gap: 20px;

        text-align: center;
    }


    .hygiene-stat p {
        text-align: left;
    }


    .footer-main {
        grid-template-columns: 1fr 1fr;
    }


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

}


/* ============================================================
   RESPONSIVE — 650px
   ============================================================ */

@media (max-width: 650px) {

    .we-container {
        width: min(
            calc(100% - 28px),
            var(--we-max-width)
        );
    }


    .we-section {
        padding:
            65px 0;
    }


    .we-hero-content {
        padding:
            65px 0
            60px;
    }


    .we-hero h1 {
        font-size: 2.55rem;
    }


    .we-pathway {
        align-items: flex-start;

        flex-direction: column;

        gap: 3px;
    }


    .path-arrow {
        display: none;
    }


    .we-four-pillars,
    .health-connections,
    .inequality-grid,
    .facility-grid,
    .detective-grid,
    .sdg-grid,
    .reflection-prompts {
        grid-template-columns: 1fr;
    }


    .legend-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .map-investigation {
        padding: 18px;
    }


    .map-comparisons {
        gap: 13px;
    }


    .thinking-box {
        grid-template-columns: 1fr;

        gap: 13px;
    }


    .thinking-icon {
        width: 44px;
        height: 44px;
    }


    .service-step {
        grid-template-columns:
            38px 1fr;

        gap: 13px;

        padding:
            22px 19px;
    }


    .data-literacy-note {
        flex-direction: column;
    }


    .environment-web {
        grid-template-columns: 1fr;
    }


    .sdg-header {
        grid-template-columns: 75px 1fr;

        gap: 17px;
    }


    .sdg-badge {
        width: 72px;
        height: 72px;
    }


    .sdg-badge strong {
        font-size: 2.2rem;
    }


    .quiz-question {
        padding: 24px 20px;
    }


    .quiz-controls {
        flex-direction: column-reverse;
    }


    .quiz-button {
        width: 100%;
    }


    .next-topic-grid {
        grid-template-columns: 1fr;
    }


    .footer-main {
        grid-template-columns: 1fr;
    }


    .footer-brand {
        grid-column: auto;
    }


    .footer-bottom {
        flex-direction: column;

        align-items: flex-start;
    }

}


/* ============================================================
   RESPONSIVE — 450px
   ============================================================ */

@media (max-width: 450px) {

    .brand-name {
        display: none;
    }


    .global-stat-card {
        padding: 25px 20px;
    }


    .stat-main,
    .stat-secondary {
        flex-direction: column;

        text-align: center;
    }


    .stat-main strong,
    .stat-secondary strong {
        font-size: 2.25rem;
    }


    .legend-grid {
        grid-template-columns: 1fr;
    }


    .facility-number {
        font-size: 2.25rem;
    }


    .big-number strong {
        font-size: 3.25rem;
    }


    .reflection-card {
        padding: 32px 20px;
    }

}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

:focus-visible {
    outline:
        3px solid
        rgba(37, 125, 165, 0.35);

    outline-offset: 3px;
}


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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}