/* =========================================================
   NAVIGATING HEALTH SERVICES
   GLOBAL HEALTH EXPLORERS · PAGE 12
   PERSONAL CARE & PREVENTIVE HEALTH HUB
   ========================================================= */


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

:root {

    --navy: #0b2d4d;
    --navy-2: #12355b;

    --blue: #1597d4;
    --blue-light: #e8f6ff;

    --teal: #197c88;
    --green: #2e8b72;

    --ink: #17324d;
    --muted: #5d7184;

    --line: #dbe5ec;

    --soft: #f4f8fb;

    --white: #ffffff;

    --shadow:
        0 12px 32px rgba(11, 45, 77, 0.10);

    --shadow-large:
        0 22px 55px rgba(11, 45, 77, 0.15);

    --radius: 18px;

    --max: 1160px;

}


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

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
}


body {

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

    color: var(--ink);

    background: var(--white);

    line-height: 1.7;

}


body,
a,
button,
input {
    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


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


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


.container,
.nav-inner,
.hero-inner,
.footer-inner {

    width:
        min(
            var(--max),
            calc(100% - 40px)
        );

    margin-inline: auto;

}


/* =========================================================
   NAVIGATION
   ========================================================= */

.site-header {

    position: sticky;

    top: 0;

    z-index: 1000;

    background:
        rgba(11, 45, 77, 0.98);

    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.10);

}


.site-nav {
    min-height: 76px;
}


.nav-inner {

    min-height: 76px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 28px;

}


.brand {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    color: var(--white);

    flex-shrink: 0;

}


.ghe-emblem,
.footer-emblem {

    width: 43px;

    height: 43px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    background: var(--white);

    color: var(--navy);

    font-size: 0.75rem;

    font-weight: 900;

    letter-spacing: 0.04em;

    border:
        3px solid
        rgba(255, 255, 255, 0.72);

}


.brand-text {

    display: flex;

    flex-direction: column;

    line-height: 1.15;

}


.brand-text strong {
    font-size: 1rem;
}


.brand-text small {

    margin-top: 4px;

    font-size: 0.68rem;

    opacity: 0.82;

    letter-spacing: 0.03em;

}


.nav-links {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 5px;

}


.nav-links a {

    color: var(--white);

    padding:
        8px 12px;

    border-radius: 999px;

    font-size: 0.86rem;

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

}


.nav-links a:hover {

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

    transform:
        translateY(-1px);

}


.nav-links a.active {

    background: var(--white);

    color: var(--navy);

    font-weight: 700;

}


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

.hero {

    background:

        radial-gradient(
            circle at 80% 20%,
            rgba(21, 151, 212, 0.22),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #0b2d4d 0%,
            #12355b 60%,
            #176d79 100%
        );

    color: var(--white);

    overflow: hidden;

}


.hero-inner {

    min-height: 570px;

    display: grid;

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

    align-items: center;

    gap: 60px;

    padding:
        72px 0;

}


.hero-copy {
    max-width: 780px;
}


.hero-kicker {

    display: inline-block;

    margin-bottom: 17px;

    font-size: 0.76rem;

    font-weight: 800;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color:
        #bfeeff;

}


.hero h1 {

    font-size:
        clamp(3rem, 7vw, 6rem);

    line-height: 0.96;

    letter-spacing:
        -0.055em;

    margin-bottom: 28px;

}


.hero-lead {

    max-width: 720px;

    font-size:
        clamp(1.08rem, 2vw, 1.35rem);

    line-height: 1.65;

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

}


.pathway {

    margin-top: 34px;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 9px;

}


.pathway span {

    padding:
        7px 12px;

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

    border-radius: 999px;

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

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.08em;

}


.pathway i {

    font-style: normal;

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

}


.hero-principle {

    margin-top: 28px;

    display: flex;

    flex-direction: column;

    gap: 4px;

    max-width: 670px;

    padding:
        17px 20px;

    border-left:
        4px solid
        #7dd7e8;

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

}


.hero-principle strong {

    font-size: 0.72rem;

    letter-spacing: 0.13em;

    color:
        #bfeeff;

}


.hero-principle span {

    font-size: 0.98rem;

}


.hero-emblem {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 18px;

    text-align: center;

}


.emblem-ring {

    width: 230px;

    height: 230px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    border:
        2px solid
        rgba(255, 255, 255, 0.32);

    box-shadow:
        0 0 0 16px rgba(255, 255, 255, 0.04),
        0 0 0 32px rgba(255, 255, 255, 0.025);

}


.emblem-core {

    width: 148px;

    height: 148px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    background: var(--white);

    color: var(--navy);

    font-size: 2rem;

    font-weight: 900;

    letter-spacing: 0.04em;

}


.hero-emblem > span {

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.16em;

    line-height: 1.5;

}


/* =========================================================
   PAGE NAVIGATION
   ========================================================= */

.page-navigation {

    background: var(--soft);

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

}


.page-navigation .container {

    display: grid;

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

    gap: 12px;

}


.page-nav-link {

    min-height: 88px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        15px 18px;

    transition:
        background 0.2s ease;

}


.page-nav-link:hover {
    background: var(--white);
}


.page-nav-link span {

    color: var(--muted);

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 0.10em;

    text-transform: uppercase;

}


.page-nav-link strong {

    margin-top: 4px;

    font-size: 0.92rem;

}


.page-nav-link.previous {
    border-right: 1px solid var(--line);
}


.page-nav-link.next {

    text-align: right;

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

}


.page-nav-link.hub {

    text-align: center;

}


.page-nav-link.hub span {
    color: var(--teal);
}


/* =========================================================
   QUICK ACCESS
   ========================================================= */

.quick-access {

    padding:
        38px 0;

    background:
        var(--white);

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

}


.quick-grid {

    display: grid;

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

    gap: 10px;

}


.quick-grid a {

    padding:
        12px 10px;

    text-align: center;

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

    border-radius:
        12px;

    color:
        var(--navy);

    font-size: 0.76rem;

    font-weight: 800;

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

}


.quick-grid a:hover {

    background:
        var(--blue-light);

    transform:
        translateY(-2px);

}


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

.section {

    padding:
        90px 0;

}


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


.section-soft {
    background: var(--soft);
}


.section-dark {

    background:
        linear-gradient(
            135deg,
            #0b2d4d,
            #12355b
        );

    color: var(--white);

}


.section-toolbar {

    margin-bottom: 30px;

}


.section-toolbar > span {

    display: block;

    margin-bottom: 9px;

    color:
        var(--teal);

    font-size: 0.73rem;

    font-weight: 900;

    letter-spacing: 0.13em;

}


.section-toolbar h2 {

    max-width: 850px;

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

    line-height: 1.1;

    letter-spacing:
        -0.035em;

}


.toolbar-dark > span {
    color: #9ce2ed;
}


.section-intro {

    max-width: 820px;

    margin-bottom: 42px;

    color: var(--muted);

    font-size: 1.06rem;

}


.dark-intro {
    color:
        rgba(255, 255, 255, 0.80);
}


/* =========================================================
   INTRO
   ========================================================= */

.intro-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(280px, 0.75fr);

    gap: 55px;

    align-items: start;

}


.intro-grid p {

    margin-bottom: 20px;

    font-size: 1.03rem;

}


.intro-callout {

    padding:
        30px;

    background:
        var(--blue-light);

    border:
        1px solid
        #cdeaf8;

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);

}


.intro-callout strong {

    display: block;

    margin-bottom: 12px;

    color:
        var(--navy);

}


.intro-callout p {
    margin-bottom: 10px;
}


.intro-callout p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   HEALTH SYSTEM CARDS
   ========================================================= */

.system-grid {

    display: grid;

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

    gap: 20px;

}


.system-card {

    position: relative;

    min-height: 265px;

    padding: 29px;

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

    border-radius:
        var(--radius);

    background:
        var(--white);

    box-shadow:
        var(--shadow);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.system-card:hover {

    transform:
        translateY(-5px);

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

}


.system-icon {

    width: 47px;

    height: 47px;

    display: grid;

    place-items: center;

    margin-bottom: 20px;

    border-radius: 12px;

    background:
        var(--blue-light);

    color:
        var(--navy);

    font-size: 0.76rem;

    font-weight: 900;

}


.system-card h3 {

    margin-bottom: 10px;

    font-size: 1.3rem;

}


.system-card p {

    color:
        var(--muted);

    font-size: 0.93rem;

}


.system-tag {

    display: inline-block;

    margin-top: 17px;

    color:
        var(--teal);

    font-size: 0.67rem;

    font-weight: 900;

    letter-spacing: 0.11em;

}


/* =========================================================
   PRIMARY CARE / DARK
   ========================================================= */

.dark-intro-grid {

    display: grid;

    grid-template-columns:
        1fr
        1.2fr;

    gap: 55px;

    align-items: center;

}


.dark-intro-grid p {

    font-size: 1.1rem;

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

}


.function-list {

    display: grid;

    gap: 10px;

}


.function-list div {

    display: flex;

    align-items: center;

    gap: 17px;

    padding:
        15px 17px;

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

    border-radius:
        12px;

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

}


.function-list b {

    color:
        #9ce2ed;

    font-size: 0.74rem;

}


.function-list span {

    font-weight: 700;

}


.quote-card {

    max-width: 850px;

    margin:
        55px auto 0;

    padding:
        30px 35px;

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

    border-radius:
        var(--radius);

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

}


.quote-mark {

    display: block;

    font-size: 4rem;

    line-height: 0.7;

    color:
        #7dd7e8;

}


.quote-card p {

    margin:
        12px 0 13px;

    font-size: 1.15rem;

    font-weight: 600;

}


.quote-card small {

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

}


/* =========================================================
   HEALTH JOURNEY
   ========================================================= */

.journey {

    display: grid;

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

    align-items: stretch;

    gap: 10px;

}


.journey-step {

    padding:
        23px;

    background:
        var(--white);

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

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);

}


.journey-number {

    width: 39px;

    height: 39px;

    display: grid;

    place-items: center;

    margin-bottom: 17px;

    border-radius: 50%;

    background:
        var(--navy);

    color:
        var(--white);

    font-weight: 900;

}


.journey-step h3 {

    margin-bottom: 8px;

    font-size: 0.88rem;

    letter-spacing: 0.08em;

}


.journey-step p {

    color:
        var(--muted);

    font-size: 0.88rem;

}


.journey-arrow {

    display: grid;

    place-items: center;

    color:
        var(--teal);

    font-size: 1.6rem;

    font-weight: 900;

}


/* =========================================================
   PREPARE
   ========================================================= */

.prepare-grid {

    display: grid;

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

    gap: 20px;

}


.prepare-card {

    padding:
        30px;

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

    border-radius:
        var(--radius);

    background:
        var(--white);

    box-shadow:
        var(--shadow);

}


.prepare-card.featured {

    background:
        var(--blue-light);

    border-color:
        #c4e8f7;

}


.prepare-number {

    color:
        var(--teal);

    font-size: 0.7rem;

    font-weight: 900;

    letter-spacing: 0.13em;

}


.prepare-card h3 {

    margin:
        8px 0 17px;

    font-size: 1.5rem;

}


.prepare-card ul {

    list-style: none;

}


.prepare-card li {

    position: relative;

    padding:
        0 0 11px 22px;

    color:
        var(--muted);

    font-size: 0.9rem;

}


.prepare-card li::before {

    content: "✓";

    position: absolute;

    left: 0;

    color:
        var(--teal);

    font-weight: 900;

}


/* =========================================================
   QUESTIONS
   ========================================================= */

.questions-grid {

    display: grid;

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

    gap: 18px;

}


.question-card {

    padding:
        27px;

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

    border-radius:
        var(--radius);

    background:
        var(--white);

    box-shadow:
        var(--shadow);

}


.question-card > span {

    color:
        var(--teal);

    font-size: 0.67rem;

    font-weight: 900;

    letter-spacing: 0.12em;

}


.question-card h3 {

    margin:
        10px 0;

    font-size: 1.15rem;

}


.question-card p {

    color:
        var(--muted);

    font-size: 0.9rem;

}


/* =========================================================
   COORDINATION
   ========================================================= */

.coordination-grid {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 55px;

    align-items: start;

}


.coordination-main p {

    margin-bottom: 18px;

    font-size: 1.04rem;

}


.coordination-list {

    display: grid;

    gap: 12px;

}


.coordination-list div {

    display: grid;

    grid-template-columns:
        130px
        1fr;

    gap: 15px;

    padding:
        17px;

    border-radius:
        13px;

    background:
        var(--soft);

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

}


.coordination-list strong {

    color:
        var(--teal);

    font-size: 0.72rem;

    letter-spacing: 0.08em;

}


.coordination-list span {

    color:
        var(--muted);

    font-size: 0.9rem;

}


/* =========================================================
   EQUITY
   ========================================================= */

.equity-grid {

    display: grid;

    grid-template-columns:
        1fr
        0.9fr;

    gap: 65px;

    align-items: center;

}


.equity-grid p {

    margin-bottom: 19px;

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

}


.equity-pillars {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}


.equity-pillars span {

    padding:
        10px 13px;

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

    border-radius:
        999px;

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

    color:
        #c9f2f8;

    font-size: 0.7rem;

    font-weight: 900;

    letter-spacing: 0.06em;

}


/* =========================================================
   CANADA / GLOBAL
   ========================================================= */

.compare-grid {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 22px;

}


.compare-grid article {

    padding:
        34px;

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

    border-radius:
        var(--radius);

    background:
        var(--white);

    box-shadow:
        var(--shadow);

}


.compare-label {

    display: inline-block;

    margin-bottom: 11px;

    color:
        var(--teal);

    font-size: 0.7rem;

    font-weight: 900;

    letter-spacing: 0.12em;

}


.compare-grid h3 {

    margin-bottom: 14px;

    font-size: 1.5rem;

}


.compare-grid p {

    margin-bottom: 14px;

    color:
        var(--muted);

}


/* =========================================================
   UHC
   ========================================================= */

.uhc-card {

    display: grid;

    grid-template-columns:
        0.9fr
        1.1fr;

    gap: 45px;

    padding:
        40px;

    border-radius:
        24px;

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

    color:
        var(--white);

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

}


.big-word {

    display: block;

    font-size:
        clamp(4rem, 8vw, 7rem);

    line-height: 0.8;

    font-weight: 900;

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

}


.uhc-main h3 {

    margin:
        15px 0;

    font-size: 1.8rem;

}


.uhc-main p {

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

}


.uhc-elements {

    display: grid;

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

    gap: 12px;

}


.uhc-elements div {

    display: flex;

    align-items: center;

    gap: 13px;

    padding:
        15px;

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

    border-radius:
        12px;

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

}


.uhc-elements b {

    color:
        #9ce2ed;

    font-size: 0.72rem;

}


.uhc-elements span {

    font-size: 0.85rem;

    font-weight: 700;

}


/* =========================================================
   DIGITAL HEALTH
   ========================================================= */

.digital-grid {

    display: grid;

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

    gap: 20px;

}


.digital-card {

    padding:
        31px;

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

    border-radius:
        var(--radius);

    background:
        var(--white);

    box-shadow:
        var(--shadow);

}


.digital-card > span {

    color:
        var(--teal);

    font-size: 0.68rem;

    font-weight: 900;

    letter-spacing: 0.12em;

}


.digital-card h3 {

    margin:
        9px 0 12px;

    font-size: 1.35rem;

}


.digital-card p {

    color:
        var(--muted);

    font-size: 0.91rem;

}


/* =========================================================
   SDH
   ========================================================= */

.sdh-grid {

    display: grid;

    grid-template-columns:
        1fr
        0.85fr;

    gap: 60px;

    align-items: center;

}


.sdh-grid p {

    margin-bottom: 17px;

    font-size: 1rem;

}


.sdh-pillars {

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

}


.sdh-pillars span {

    padding:
        10px 13px;

    border-radius:
        999px;

    background:
        var(--white);

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

    color:
        var(--navy);

    font-size: 0.67rem;

    font-weight: 900;

    letter-spacing: 0.07em;

}


/* =========================================================
   LEARNING PATH
   ========================================================= */

.learning-path {

    display: grid;

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

    gap: 12px;

}


.learning-path > div {

    min-height: 170px;

    padding:
        21px;

    display: flex;

    flex-direction: column;

    background:
        var(--white);

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

    border-radius:
        var(--radius);

}


.learning-path b {

    width: 37px;

    height: 37px;

    display: grid;

    place-items: center;

    margin-bottom: 17px;

    border-radius: 50%;

    background:
        var(--navy);

    color:
        var(--white);

    font-size: 0.78rem;

}


.learning-path span {

    margin-bottom: 6px;

    font-weight: 900;

}


.learning-path small {

    color:
        var(--muted);

    font-size: 0.78rem;

}


/* =========================================================
   PROJECT
   ========================================================= */

.project-cycle {

    display: grid;

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

    gap: 10px;

}


.project-cycle > div {

    min-height: 190px;

    padding:
        21px;

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

    border-radius:
        15px;

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

}


.project-cycle b {

    display: block;

    margin-bottom: 13px;

    color:
        #9ce2ed;

    font-size: 0.7rem;

}


.project-cycle span {

    display: block;

    margin-bottom: 10px;

    font-weight: 900;

    font-size: 0.82rem;

}


.project-cycle small {

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

    font-size: 0.76rem;

}


.project-safety {

    margin-top: 30px;

    padding:
        28px;

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

    border-radius:
        var(--radius);

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

}


.project-safety h3 {

    margin-bottom: 15px;

    font-size: 1.3rem;

}


.project-safety ul {

    display: grid;

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

    gap: 9px 30px;

    list-style: none;

}


.project-safety li {

    position: relative;

    padding-left: 18px;

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

    font-size: 0.84rem;

}


.project-safety li::before {

    content: "•";

    position: absolute;

    left: 0;

    color:
        #9ce2ed;

}


/* =========================================================
   EXERCISES
   ========================================================= */

.exercise-grid {

    display: grid;

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

    gap: 20px;

}


.exercise-card {

    padding:
        31px;

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

    border-radius:
        var(--radius);

    background:
        var(--white);

    box-shadow:
        var(--shadow);

}


.exercise-number {

    color:
        var(--teal);

    font-size: 0.7rem;

    font-weight: 900;

    letter-spacing: 0.11em;

}


.exercise-card h3 {

    margin:
        11px 0 13px;

    font-size: 1.38rem;

}


.exercise-card p {

    color:
        var(--muted);

    font-size: 0.91rem;

}


.exercise-question {

    margin-top: 20px;

    padding:
        14px;

    border-radius:
        11px;

    background:
        var(--blue-light);

    font-size: 0.82rem;

}


/* =========================================================
   LEADERSHIP
   ========================================================= */

.leadership-grid {

    display: grid;

    grid-template-columns:
        1fr
        0.8fr;

    gap: 60px;

    align-items: center;

}


.leadership-grid p {

    margin-bottom: 18px;

    font-size: 1.02rem;

}


.leadership-principles {

    display: grid;

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

    gap: 10px;

}


.leadership-principles span {

    padding:
        20px;

    text-align: center;

    border-radius:
        14px;

    background:
        var(--soft);

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

    color:
        var(--navy);

    font-size: 0.75rem;

    font-weight: 900;

    letter-spacing: 0.08em;

}


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

.sdg-grid {

    display: grid;

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

    gap: 18px;

}


.sdg-card {

    padding:
        27px;

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

    border-radius:
        var(--radius);

    background:
        var(--white);

}


.sdg-card strong {

    display: block;

    color:
        var(--teal);

    font-size: 1.1rem;

}


.sdg-card > span {

    display: block;

    margin:
        8px 0 13px;

    font-weight: 800;

}


.sdg-card p {

    color:
        var(--muted);

    font-size: 0.85rem;

}


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

.quiz-section {

    background:
        #f8fbfd;

}


.quiz-grid {

    display: grid;

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

    gap: 18px;

}


.quiz-card {

    padding:
        25px;

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

    border-radius:
        var(--radius);

    background:
        var(--white);

    box-shadow:
        0 7px 22px
        rgba(11, 45, 77, 0.06);

}


.quiz-card > span {

    display: inline-grid;

    place-items: center;

    width: 33px;

    height: 33px;

    margin-bottom: 13px;

    border-radius: 50%;

    background:
        var(--navy);

    color:
        var(--white);

    font-size: 0.7rem;

    font-weight: 900;

}


.quiz-card h3 {

    margin-bottom: 17px;

    font-size: 1rem;

    line-height: 1.45;

}


.quiz-card label {

    display: block;

    margin-bottom: 10px;

    color:
        var(--muted);

    font-size: 0.83rem;

    cursor: pointer;

}


.quiz-card input {

    margin-right: 7px;

}


.quiz-card details {

    margin-top: 16px;

    padding-top: 13px;

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

}


.quiz-card summary {

    cursor: pointer;

    color:
        var(--teal);

    font-size: 0.78rem;

    font-weight: 800;

}


.quiz-card details p {

    margin-top: 9px;

    color:
        var(--muted);

    font-size: 0.8rem;

}


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

.reflection-card {

    max-width: 900px;

    padding:
        38px;

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

    border-radius:
        22px;

    background:
        var(--white);

    box-shadow:
        var(--shadow);

}


.reflection-card p {

    margin-bottom: 17px;

    font-size: 1.03rem;

}


.reflection-question {

    margin-top: 24px;

    padding:
        19px;

    display: flex;

    flex-direction: column;

    gap: 4px;

    border-left:
        4px solid
        var(--teal);

    background:
        var(--soft);

}


/* =========================================================
   ACT
   ========================================================= */

.act-section {

    background:
        linear-gradient(
            135deg,
            #0b2d4d,
            #176d79
        );

}


.act-grid {

    display: grid;

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

    gap: 12px;

}


.act-card {

    min-height: 170px;

    padding:
        22px;

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

    border-radius:
        15px;

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

}


.act-card span {

    display: block;

    margin-bottom: 14px;

    color:
        #9ce2ed;

    font-size: 0.68rem;

    font-weight: 900;

    letter-spacing: 0.08em;

}


.act-card p {

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

    font-size: 0.86rem;

}


.act-statement {

    margin-top: 38px;

    padding:
        22px;

    text-align: center;

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

}


.act-statement strong {

    color:
        #ffffff;

    font-size:
        clamp(1rem, 2vw, 1.35rem);

    letter-spacing:
        0.09em;

}


/* =========================================================
   RESOURCES
   ========================================================= */

.resource-grid {

    display: grid;

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

    gap: 18px;

}


.resource-card {

    padding:
        26px;

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

    border-radius:
        var(--radius);

    background:
        var(--white);

    box-shadow:
        var(--shadow);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.resource-card:hover {

    transform:
        translateY(-4px);

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

}


.resource-card > span {

    color:
        var(--teal);

    font-size: 0.67rem;

    font-weight: 900;

    letter-spacing: 0.11em;

}


.resource-card h3 {

    margin:
        8px 0 11px;

    font-size: 1.15rem;

}


.resource-card p {

    min-height: 82px;

    color:
        var(--muted);

    font-size: 0.83rem;

}


.resource-card strong {

    display: inline-block;

    margin-top: 13px;

    color:
        var(--navy);

    font-size: 0.77rem;

}


/* =========================================================
   SOURCES
   ========================================================= */

.sources-section {

    padding:
        80px 0;

    background:
        var(--white);

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

}


.sources-list {

    max-width:
        900px;

    display: grid;

    gap: 10px;

}


.sources-list p {

    padding:
        14px 17px;

    border-radius:
        10px;

    background:
        var(--soft);

    color:
        var(--muted);

    font-size: 0.84rem;

}


.source-note {

    max-width:
        900px;

    margin-top:
        25px;

    color:
        var(--muted);

    font-size: 0.78rem;

    font-style: italic;

}


/* =========================================================
   FINAL NAVIGATION
   ========================================================= */

.final-navigation {

    padding:
        90px 0;

    background:
        linear-gradient(
            180deg,
            var(--soft),
            #eaf5fa
        );

}


.final-nav-heading {

    max-width:
        780px;

    margin-bottom:
        38px;

}


.final-nav-heading > span {

    color:
        var(--teal);

    font-size:
        0.7rem;

    font-weight:
        900;

    letter-spacing:
        0.13em;

}


.final-nav-heading h2 {

    margin:
        8px 0 13px;

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

    line-height:
        1.1;

}


.final-nav-heading p {

    color:
        var(--muted);

}


.final-nav-grid {

    display:
        grid;

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

    gap:
        18px;

}


.final-nav-card {

    display:
        flex;

    flex-direction:
        column;

    padding:
        28px;

    min-height:
        180px;

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

    border-radius:
        var(--radius);

    background:
        var(--white);

    box-shadow:
        var(--shadow);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.final-nav-card:hover {

    transform:
        translateY(-4px);

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

}


.final-nav-card span {

    color:
        var(--teal);

    font-size:
        0.68rem;

    font-weight:
        900;

    letter-spacing:
        0.11em;

}


.final-nav-card strong {

    margin-top:
        10px;

    font-size:
        1.25rem;

}


.final-nav-card small {

    margin-top:
        auto;

    padding-top:
        20px;

    color:
        var(--muted);

    font-size:
        0.78rem;

}


/* =========================================================
   BACK TO TOP
   ========================================================= */

.back-to-top-wrap {

    padding:
        30px 20px;

    text-align:
        center;

    background:
        var(--soft);

}


.back-to-top {

    display:
        inline-block;

    padding:
        9px 15px;

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

    border-radius:
        999px;

    color:
        var(--navy);

    font-size:
        0.76rem;

    font-weight:
        800;

}


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

.site-footer {

    padding:
        48px 0;

    background:
        var(--navy);

    color:
        var(--white);

}


.footer-inner {

    display:
        grid;

    grid-template-columns:
        1.2fr
        1fr
        1.1fr;

    gap:
        40px;

    align-items:
        start;

}


.footer-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

}


.footer-brand strong {

    display:
        block;

    font-size:
        1rem;

}


.footer-brand p {

    margin-top:
        4px;

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

    font-size:
        0.76rem;

}


.footer-links {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px 16px;

}


.footer-links a {

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

    font-size:
        0.76rem;

}


.footer-links a:hover {

    color:
        var(--white);

}


.footer-copy {

    text-align:
        right;

}


.footer-copy p {

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

    font-size:
        0.75rem;

}


.footer-copy small {

    display:
        block;

    margin-top:
        7px;

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

    font-size:
        0.68rem;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    .nav-inner {
        gap: 16px;
    }

    .nav-links a {
        padding:
            7px 9px;
        font-size:
            0.78rem;
    }

    .hero-inner {
        grid-template-columns:
            1fr 230px;
        gap:
            35px;
    }

    .emblem-ring {
        width: 185px;
        height: 185px;
    }

    .emblem-core {
        width: 120px;
        height: 120px;
    }

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

    .learning-path,
    .project-cycle {
        grid-template-columns:
            repeat(3, 1fr);
    }

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

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

}


@media (max-width: 800px) {

    .site-header {
        position:
            relative;
    }

    .nav-inner {
        padding:
            13px 0;
        flex-direction:
            column;
        align-items:
            stretch;
    }

    .brand {
        justify-content:
            center;
    }

    .nav-links {
        justify-content:
            center;
    }

    .hero-inner {
        grid-template-columns:
            1fr;
        text-align:
            center;
        padding:
            65px 0;
    }

    .hero-copy {
        max-width:
            none;
    }

    .hero-lead {
        margin-inline:
            auto;
    }

    .pathway {
        justify-content:
            center;
    }

    .hero-principle {
        margin-inline:
            auto;
        text-align:
            left;
    }

    .hero-emblem {
        display:
            none;
    }

    .page-navigation .container {
        grid-template-columns:
            1fr;
    }

    .page-nav-link.previous,
    .page-nav-link.next {
        border:
            0;
        border-bottom:
            1px solid
            var(--line);
        text-align:
            center;
    }

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

    .intro-grid,
    .dark-intro-grid,
    .coordination-grid,
    .equity-grid,
    .leadership-grid,
    .uhc-card {
        grid-template-columns:
            1fr;
    }

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

    .journey-arrow {
        transform:
            rotate(90deg);
        min-height:
            25px;
    }

    .prepare-grid,
    .exercise-grid,
    .final-nav-grid,
    .digital-grid {
        grid-template-columns:
            1fr;
    }

    .project-safety ul {
        grid-template-columns:
            1fr;
    }

    .footer-inner {
        grid-template-columns:
            1fr;
        text-align:
            center;
    }

    .footer-brand {
        justify-content:
            center;
    }

    .footer-links {
        justify-content:
            center;
    }

    .footer-copy {
        text-align:
            center;
    }

}


@media (max-width: 560px) {

    .container,
    .nav-inner,
    .hero-inner,
    .footer-inner {
        width:
            min(
                var(--max),
                calc(100% - 28px)
            );
    }

    .hero h1 {
        font-size:
            3.1rem;
    }

    .section {
        padding:
            65px 0;
    }

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

    .system-grid,
    .questions-grid,
    .quiz-grid,
    .sdg-grid,
    .resource-grid,
    .learning-path,
    .project-cycle,
    .act-grid {
        grid-template-columns:
            1fr;
    }

    .uhc-card {
        padding:
            28px;
    }

    .uhc-elements {
        grid-template-columns:
            1fr;
    }

    .leadership-principles {
        grid-template-columns:
            1fr;
    }

    .coordination-list div {
        grid-template-columns:
            1fr;
    }

    .nav-links a {
        font-size:
            0.72rem;
    }

}