/* ============================================================
   GLOBAL HEALTH EXPLORERS
   HEALTH & WELLBEING — SUBJECT 2
   ============================================================ */


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

:root {

    --navy-950: #071a2b;
    --navy-900: #0b2338;
    --navy-800: #10344e;
    --navy-700: #174a69;

    --blue-600: #1677a8;
    --blue-500: #238dbd;
    --blue-100: #e8f5fa;

    --teal-700: #08766f;
    --teal-600: #0b8a82;
    --teal-100: #e5f6f4;

    --green-700: #27734c;
    --green-100: #e9f6ed;

    --gold-600: #c48a18;
    --gold-100: #fff5d8;

    --red-600: #c94a4a;
    --red-100: #fff0f0;

    --purple-700: #68519b;
    --purple-100: #f2eefb;

    --ink: #17232d;
    --ink-soft: #52616d;
    --muted: #70808b;

    --surface: #ffffff;
    --surface-soft: #f5f8fa;
    --surface-blue: #eef7fb;

    --border: #dce5ea;
    --border-dark: #c7d4dc;

    --shadow-sm:
        0 5px 18px rgba(7, 26, 43, 0.07);

    --shadow-md:
        0 14px 36px rgba(7, 26, 43, 0.10);

    --shadow-lg:
        0 24px 60px rgba(7, 26, 43, 0.13);

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;

    --content-width: 1180px;
    --narrow-width: 850px;

    --transition:
        180ms ease;

}


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

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

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    background:
        var(--surface);

    color:
        var(--ink);

    font-family:
        "Inter",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    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;
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1,
h2,
h3,
h4 {

    margin-top: 0;

    font-family:
        "Nunito",
        "Inter",
        sans-serif;

    line-height: 1.15;

    color:
        var(--navy-900);

}

h1 {
    font-size: clamp(2.65rem, 5vw, 4.65rem);
    letter-spacing: -0.045em;
}

h2 {
    font-size: clamp(2rem, 3.5vw, 3.1rem);
    letter-spacing: -0.035em;
}

h3 {
    font-size: 1.3rem;
}

p {
    margin-top: 0;
}

strong {
    font-weight: 800;
}


/* ============================================================
   LAYOUT
   ============================================================ */

.section-shell {

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

    margin-inline:
        auto;

}

.narrow-shell {

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

}

.content-section {
    padding: 90px 0;
}


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

.site-header {

    position: sticky;
    top: 0;
    z-index: 1000;

    background:
        rgba(7, 26, 43, 0.97);

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

    backdrop-filter:
        blur(12px);

}

.header-inner {

    width:
        min(
            calc(100% - 32px),
            1380px
        );

    min-height: 78px;

    margin-inline: auto;

    display: flex;

    align-items: center;

    gap: 28px;

}

.brand {

    display: flex;

    align-items: center;

    gap: 11px;

    flex-shrink: 0;

}

.brand-logo {

    width: 50px;
    height: 50px;

    object-fit: contain;

    border-radius: 9px;

}

.brand-text {

    display: flex;
    flex-direction: column;

    color: white;

    font-size: 0.76rem;

    line-height: 1.1;

    letter-spacing: 0.07em;

}

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

.brand-text span {
    opacity: 0.76;
    font-weight: 700;
}


.main-navigation {

    margin-left: auto;

    display: flex;

    align-items: center;

    gap: 4px;

}

.main-navigation a {

    padding:
        10px 12px;

    border-radius:
        8px;

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

    font-size:
        0.78rem;

    font-weight:
        700;

    transition:
        var(--transition);

}

.main-navigation a:hover,
.main-navigation a.active {

    color: white;

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

}

.nav-toggle {

    display: none;

    margin-left: auto;

    width: 44px;
    height: 44px;

    border: 0;

    border-radius: 9px;

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

}

.nav-toggle span {

    display: block;

    width: 21px;
    height: 2px;

    margin: 4px auto;

    background: white;

}


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

.hero {

    position: relative;

    overflow: hidden;

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

    color: white;

}

.hero::before {

    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -180px;
    top: -250px;

    border-radius: 50%;

    background:
        rgba(35, 141, 189, 0.18);

}

.hero::after {

    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    left: -220px;
    bottom: -230px;

    border-radius: 50%;

    background:
        rgba(11, 138, 130, 0.16);

}

.hero-inner {

    position: relative;
    z-index: 2;

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

    margin-inline: auto;

    min-height: 610px;

    padding:
        100px 0 95px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(330px, 0.65fr);

    align-items: center;

    gap: 80px;

}

.eyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 22px;

    color:
        #8dd9ec;

    font-size:
        0.78rem;

    font-weight:
        900;

    letter-spacing:
        0.14em;

}

.hero h1 {

    max-width: 850px;

    margin-bottom: 28px;

    color: white;

}

.hero h1 span {

    display: block;

    color:
        #8dd9ec;

}

.hero-lead {

    max-width: 720px;

    margin-bottom: 34px;

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

    font-size:
        clamp(1.05rem, 1.7vw, 1.24rem);

}

.hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

}

.btn {

    display: inline-flex;

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

    min-height: 48px;

    padding:
        11px 20px;

    border-radius:
        10px;

    border:
        1px solid transparent;

    font-weight:
        800;

    font-size:
        0.91rem;

    transition:
        var(--transition);

}

.btn:hover {

    transform:
        translateY(-2px);

}

.btn-primary {

    color:
        white;

    background:
        var(--teal-600);

    box-shadow:
        0 8px 20px rgba(11, 138, 130, 0.22);

}

.btn-primary:hover {
    background: var(--teal-700);
}

.btn-secondary {

    color:
        white;

    border-color:
        rgba(255,255,255,0.25);

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

}

.btn-secondary:hover {

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

}

.hero-panel {

    padding:
        28px;

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

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

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

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

    backdrop-filter:
        blur(12px);

}

.hero-stat-label {

    display: block;

    margin-bottom: 11px;

    color:
        #8dd9ec;

    font-size:
        0.72rem;

    font-weight:
        900;

    letter-spacing:
        0.13em;

}

.hero-stat strong {

    display: block;

    margin-bottom: 13px;

    color: white;

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        1.75rem;

    line-height:
        1.2;

}

.hero-stat p {

    margin-bottom: 26px;

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

}

.hero-mini-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 9px;

}

.hero-mini-grid div {

    padding:
        14px;

    border-radius:
        10px;

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

}

.hero-mini-grid span {

    display: block;

    margin-bottom: 3px;

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

    font-size:
        0.65rem;

    font-weight:
        900;

    letter-spacing:
        0.1em;

}

.hero-mini-grid strong {

    color: white;

    font-size:
        0.9rem;

}


/* ============================================================
   PATHWAY
   ============================================================ */

.pathway-section {

    padding:
        22px 0;

    background:
        var(--surface-soft);

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

}

.section-kicker {

    margin-bottom: 8px;

    color:
        var(--teal-700);

    font-size:
        0.72rem;

    font-weight:
        900;

    letter-spacing:
        0.13em;

}

.pathway-section .section-kicker {
    margin-bottom: 13px;
}

.pathway {

    display: flex;

    align-items: center;

    gap: 10px;

}

.pathway-step {

    flex:
        1;

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 8px;

    color:
        var(--muted);

    font-size:
        0.84rem;

    font-weight:
        800;

}

.pathway-step.active {
    color: var(--teal-700);
}

.pathway-number {

    display: grid;

    place-items: center;

    width: 27px;
    height: 27px;

    flex-shrink: 0;

    border-radius: 50%;

    color:
        var(--navy-800);

    background:
        #dfe9ee;

    font-size:
        0.64rem;

    font-weight:
        900;

}

.pathway-step.active .pathway-number {

    color: white;

    background:
        var(--teal-600);

}

.pathway-arrow {

    color:
        #a5b4bd;

    font-weight:
        800;

}


/* ============================================================
   SECTION HEADINGS
   ============================================================ */

.section-heading {

    display: flex;

    align-items: flex-start;

    gap: 20px;

    margin-bottom: 38px;

}

.section-heading.centered {

    justify-content: center;

    text-align: center;

}

.section-heading.centered > div {
    max-width: 820px;
}

.section-number {

    display: grid;

    place-items: center;

    width: 48px;
    height: 48px;

    flex-shrink: 0;

    border-radius: 13px;

    color: white;

    background:
        var(--navy-800);

    font-size:
        0.75rem;

    font-weight:
        900;

}

.section-heading h2 {

    margin-bottom: 12px;

}

.section-intro {

    max-width: 760px;

    margin-inline: auto;

    color:
        var(--ink-soft);

    font-size:
        1.05rem;

}


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

.intro-section {
    background: white;
}

.large-text {

    color:
        var(--navy-800);

    font-size:
        1.28rem;

    line-height:
        1.75;

}

.principle-box {

    display: grid;

    grid-template-columns:
        55px 1fr;

    gap: 18px;

    margin-top: 32px;

    padding:
        25px;

    border-left:
        5px solid var(--teal-600);

    border-radius:
        0 14px 14px 0;

    background:
        var(--teal-100);

}

.principle-icon {

    display: grid;

    place-items: center;

    width: 48px;
    height: 48px;

    border-radius: 12px;

    background: white;

    font-size: 1.4rem;

}

.principle-box strong {

    color:
        var(--teal-700);

}

.principle-box p {
    margin: 4px 0 0;
}


/* ============================================================
   MEASUREMENT SECTION
   ============================================================ */

.measurement-section {

    background:
        var(--surface-soft);

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

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

}

.measurement-image-card {

    width:
        min(100%, 1050px);

    margin:
        0 auto 40px;

    padding:
        18px;

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

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

    background:
        white;

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

}

.measurement-image-card img {

    width: 100%;

    max-height: 620px;

    object-fit: contain;

    border-radius:
        12px;

}

.measurement-grid {

    display: grid;

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

    gap: 18px;

}

.measurement-card {

    position: relative;

    padding:
        26px;

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

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

    background:
        white;

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

    transition:
        var(--transition);

}

.measurement-card:hover {

    transform:
        translateY(-3px);

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

}

.measurement-number {

    display: inline-block;

    margin-bottom: 15px;

    color:
        var(--teal-600);

    font-size:
        0.73rem;

    font-weight:
        900;

    letter-spacing:
        0.1em;

}

.measurement-card h3 {
    margin-bottom: 12px;
}

.measurement-card p {

    margin-bottom: 15px;

    color:
        var(--ink-soft);

    font-size:
        0.91rem;

}

.examples {

    margin:
        14px 0;

    padding:
        10px 12px;

    border-radius:
        8px;

    background:
        var(--surface-soft);

    color:
        var(--muted);

    font-size:
        0.75rem;

    line-height:
        1.5;

}

.question-tag {

    display: inline-block;

    margin-top: 8px;
    margin-bottom: 5px;

    color:
        var(--teal-700);

    font-size:
        0.65rem;

    font-weight:
        900;

    letter-spacing:
        0.12em;

}

.measurement-card > strong {

    display: block;

    color:
        var(--navy-800);

    font-size:
        0.88rem;

    line-height:
        1.5;

}

.measurement-ladder {

    margin-top: 34px;

    padding:
        25px;

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

    background:
        var(--navy-900);

    color: white;

}

.ladder-title {

    margin-bottom: 16px;

    color:
        #8dd9ec;

    font-size:
        0.68rem;

    font-weight:
        900;

    letter-spacing:
        0.13em;

    text-align: center;

}

.ladder-flow {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

}

.ladder-flow span {

    padding:
        8px 12px;

    border-radius:
        8px;

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

    font-size:
        0.76rem;

    font-weight:
        800;

}

.ladder-flow b {

    color:
        #8dd9ec;

}


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

.data-section {
    background: white;
}

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

.data-heading {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 35px;

    margin-bottom: 35px;

}

.data-heading > div:first-child {
    max-width: 790px;
}

.data-heading h2 {
    margin-bottom: 15px;
}

.data-heading p {

    margin-bottom: 0;

    color:
        var(--ink-soft);

    font-size:
        1.04rem;

}

.data-badge {

    min-width: 150px;

    padding:
        18px;

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

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

    background:
        var(--surface-soft);

    color:
        var(--teal-700);

    font-size:
        0.67rem;

    font-weight:
        900;

    letter-spacing:
        0.1em;

}

.data-badge strong {

    display: block;

    margin-top: 6px;

    color:
        var(--navy-800);

    font-size:
        1.2rem;

    letter-spacing:
        0;

}

.graph-card {

    overflow: hidden;

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

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

    background:
        white;

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

}

.graph-image-wrap {

    padding:
        clamp(15px, 3vw, 30px);

    background:
        white;

}

.graph-image-wrap img {

    width: 100%;

    max-height: 680px;

    object-fit: contain;

    margin-inline: auto;

}

.graph-caption {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    padding:
        17px 22px;

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

    background:
        var(--surface-soft);

}

.graph-caption strong {

    color:
        var(--navy-800);

    font-size:
        0.86rem;

}

.graph-caption span {

    color:
        var(--muted);

    font-size:
        0.78rem;

}


/* ============================================================
   OBSERVATION BOX
   ============================================================ */

.observation-box {

    margin-top:
        28px;

    padding:
        28px;

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

    background:
        var(--blue-100);

}

.observation-label {

    margin-bottom:
        7px;

    color:
        var(--blue-600);

    font-size:
        0.68rem;

    font-weight:
        900;

    letter-spacing:
        0.13em;

}

.observation-box h3 {
    margin-bottom: 22px;
}

.observation-grid {

    display: grid;

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

    gap: 14px;

}

.observation-grid div {

    padding:
        18px;

    border:
        1px solid rgba(22,119,168,0.16);

    border-radius:
        12px;

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

}

.observation-grid span {

    display: block;

    margin-bottom:
        5px;

    color:
        var(--blue-600);

    font-size:
        0.65rem;

    font-weight:
        900;

    letter-spacing:
        0.1em;

}

.observation-grid strong {

    display: block;

    color:
        var(--navy-800);

}

.observation-grid small {

    display: block;

    margin-top:
        3px;

    color:
        var(--muted);

}


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

.question-grid {

    display: grid;

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

    gap: 13px;

    margin-top:
        24px;

}

.data-question {

    display: grid;

    grid-template-columns:
        32px 1fr;

    gap: 12px;

    align-items:
        start;

    padding:
        17px;

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

    border-radius:
        12px;

    background:
        white;

    color:
        var(--navy-800);

    font-size:
        0.87rem;

    font-weight:
        700;

}

.data-question span {

    display: grid;

    place-items: center;

    width: 28px;
    height: 28px;

    border-radius:
        8px;

    color:
        var(--teal-700);

    background:
        var(--teal-100);

    font-size:
        0.67rem;

    font-weight:
        900;

}

.highlight-question {

    border-color:
        #b5dfdb;

    background:
        var(--teal-100);

}


/* ============================================================
   REVEAL
   ============================================================ */

.reveal-box {

    display: grid;

    grid-template-columns:
        58px 1fr;

    gap: 18px;

    margin-top:
        28px;

    padding:
        27px;

    border:
        1px solid #d9c89a;

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

    background:
        var(--gold-100);

}

.reveal-icon {

    display: grid;

    place-items: center;

    width: 50px;
    height: 50px;

    border-radius:
        12px;

    background:
        white;

    font-size:
        1.35rem;

}

.reveal-label {

    display: block;

    margin-bottom:
        5px;

    color:
        var(--gold-600);

    font-size:
        0.67rem;

    font-weight:
        900;

    letter-spacing:
        0.12em;

}

.reveal-box h3 {
    margin-bottom: 9px;
}

.reveal-box p {
    margin-bottom: 9px;
}

.small-note {

    color:
        var(--muted);

    font-size:
        0.78rem;

}


/* ============================================================
   CONCEPT STRIP
   ============================================================ */

.concept-strip {

    display: grid;

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

    align-items:
        center;

    gap: 18px;

    margin-top:
        32px;

    padding:
        20px 22px;

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

    background:
        var(--navy-900);

    color: white;

}

.concept-strip span {

    display: block;

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

    font-size:
        0.62rem;

    font-weight:
        900;

    letter-spacing:
        0.1em;

}

.concept-strip strong {

    display: block;

    margin-top:
        3px;

    font-size:
        0.9rem;

}

.concept-arrow {

    color:
        #8dd9ec;

    font-size:
        1.3rem;

    font-weight:
        900;

}

.concept-next strong {
    color: #8dd9ec;
}


/* ============================================================
   HALE
   ============================================================ */

.hale-definition {

    width:
        min(100%, 300px);

    padding:
        20px;

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

    background:
        var(--teal-100);

}

.hale-definition span {

    display: block;

    margin-bottom:
        5px;

    color:
        var(--teal-700);

    font-size:
        0.7rem;

    font-weight:
        900;

    letter-spacing:
        0.1em;

}

.hale-definition strong {

    display: block;

    margin-bottom:
        7px;

    color:
        var(--navy-800);

}

.hale-definition p {

    color:
        var(--ink-soft);

    font-size:
        0.8rem;

}

.hale-comparison {

    display: grid;

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

    align-items:
        center;

    gap: 15px;

    width:
        min(100%, 760px);

    margin:
        0 auto 32px;

}

.hale-card {

    padding:
        25px;

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

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

    background:
        white;

    text-align:
        center;

}

.hale-card.featured {

    border-color:
        #9fd6d1;

    background:
        var(--teal-100);

}

.hale-card span {

    display: block;

    margin-bottom:
        8px;

    color:
        var(--teal-700);

    font-size:
        0.76rem;

    font-weight:
        900;

    letter-spacing:
        0.12em;

}

.hale-card strong {

    display: block;

    margin-bottom:
        7px;

    color:
        var(--navy-800);

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        1.15rem;

}

.hale-card small {
    color: var(--muted);
}

.hale-arrow {

    color:
        var(--teal-600);

    font-size:
        1.5rem;

    font-weight:
        900;

}


/* ============================================================
   PROVINCE HIGHLIGHTS
   ============================================================ */

.province-highlights {

    display: grid;

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

    gap: 11px;

    margin-top:
        25px;

}

.province-highlight {

    padding:
        17px;

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

    border-radius:
        12px;

    background:
        white;

}

.province-highlight span {

    display: block;

    min-height:
        31px;

    color:
        var(--muted);

    font-size:
        0.58rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;

}

.province-highlight strong {

    display: block;

    color:
        var(--navy-800);

    font-size:
        0.83rem;

}

.province-highlight b {

    display: block;

    margin-top:
        5px;

    color:
        var(--teal-700);

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        1.25rem;

}

.province-highlight.highest {
    background: var(--teal-100);
}

.province-highlight.lowest {
    background: #f8f3f0;
}


/* ============================================================
   DATA THINKING
   ============================================================ */

.data-thinking {

    margin-top:
        28px;

    padding:
        30px;

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

    background:
        white;

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

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

}

.data-thinking-title {

    margin-bottom:
        8px;

    color:
        var(--teal-700);

    font-size:
        0.68rem;

    font-weight:
        900;

    letter-spacing:
        0.12em;

}

.data-thinking h3 {
    margin-bottom: 11px;
}

.data-thinking p {
    color: var(--ink-soft);
}

.better-question {

    display: grid;

    grid-template-columns:
        60px 1fr;

    gap:
        13px;

    margin-top:
        20px;

    padding:
        17px;

    border-radius:
        11px;

    background:
        var(--teal-100);

}

.better-question span {

    color:
        var(--teal-700);

    font-size:
        0.67rem;

    font-weight:
        900;

    letter-spacing:
        0.1em;

}

.better-question strong {
    font-size: 0.9rem;
}

.reference-point {

    margin-top:
        17px;

    padding:
        17px 20px;

    border-left:
        4px solid var(--gold-600);

    border-radius:
        0 10px 10px 0;

    background:
        var(--gold-100);

}

.reference-point span {

    display: block;

    margin-bottom:
        4px;

    color:
        var(--gold-600);

    font-size:
        0.65rem;

    font-weight:
        900;

    letter-spacing:
        0.1em;

}

.reference-point p {
    margin-bottom: 0;
}


/* ============================================================
   DETERMINANTS
   ============================================================ */

.determinants-section {

    background:
        white;

}

.determinant-grid {

    display: grid;

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

    gap:
        13px;

}

.determinant-card {

    padding:
        20px;

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

    border-radius:
        13px;

    background:
        var(--surface-soft);

}

.determinant-card span {

    display: block;

    margin-bottom:
        10px;

    color:
        var(--teal-600);

    font-size:
        0.65rem;

    font-weight:
        900;

}

.determinant-card strong {

    display: block;

    color:
        var(--navy-800);

    font-size:
        0.87rem;

    line-height:
        1.45;

}

.systems-chain {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-top:
        30px;

    padding:
        22px;

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

    background:
        var(--navy-900);

    color:
        white;

}

.systems-chain span {

    padding:
        7px 11px;

    border-radius:
        8px;

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

    font-size:
        0.7rem;

    font-weight:
        800;

}

.systems-chain b {
    color: #8dd9ec;
}


/* ============================================================
   EXAMPLE CHAIN
   ============================================================ */

.example-section {

    background:
        var(--surface-soft);

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

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

}

.example-section h2 {
    max-width: 700px;
}

.example-chain {

    display: flex;

    align-items: stretch;

    flex-wrap: wrap;

    gap: 8px;

    margin-top:
        28px;

}

.example-chain > div {

    flex:
        1 1 120px;

    min-width:
        120px;

    padding:
        16px;

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

    border-radius:
        11px;

    background:
        white;

}

.example-chain span {

    display: block;

    margin-bottom:
        5px;

    color:
        var(--teal-600);

    font-size:
        0.57rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;

}

.example-chain strong {

    display: block;

    font-size:
        0.76rem;

    line-height:
        1.4;

}

.example-chain > b {

    display:
        grid;

    place-items:
        center;

    color:
        var(--teal-600);

}


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

.connection-section {

    background:
        var(--navy-950);

}

.connection-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        20px;

}

.connection-card {

    display: grid;

    grid-template-columns:
        58px 1fr;

    gap:
        18px;

    padding:
        30px;

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

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

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

}

.connection-icon {

    display: grid;

    place-items:
        center;

    width:
        48px;

    height:
        48px;

    border-radius:
        12px;

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

    font-size:
        1.3rem;

}

.connection-card .section-kicker {
    color: #8dd9ec;
}

.connection-card h2 {

    margin-bottom:
        12px;

    color:
        white;

    font-size:
        1.65rem;

}

.connection-card p {

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

    font-size:
        0.88rem;

}


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

.quiz-section {

    background:
        var(--surface-soft);

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

}

.quiz-progress {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom:
        18px;

    padding:
        13px 17px;

    border-radius:
        10px;

    background:
        var(--navy-900);

    color:
        white;

    font-size:
        0.75rem;

    font-weight:
        800;

}

.quiz-card {

    display: grid;

    grid-template-columns:
        62px 1fr;

    gap:
        20px;

    margin-bottom:
        15px;

    padding:
        24px;

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

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

    background:
        white;

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

}

.quiz-number {

    display: grid;

    place-items:
        center;

    width:
        50px;

    height:
        50px;

    border-radius:
        13px;

    color:
        white;

    background:
        var(--navy-800);

    font-family:
        "Nunito",
        sans-serif;

    font-weight:
        900;

}

.quiz-reference {

    display: inline-block;

    margin-bottom:
        9px;

    color:
        var(--teal-700);

    font-size:
        0.61rem;

    font-weight:
        900;

    letter-spacing:
        0.09em;

}

.graph-ref {

    padding:
        5px 8px;

    border-radius:
        6px;

    background:
        var(--blue-100);

    color:
        var(--blue-600);

}

.quiz-content h3 {

    margin-bottom:
        18px;

    color:
        var(--navy-800);

    font-family:
        "Inter",
        sans-serif;

    font-size:
        1rem;

    line-height:
        1.5;

}

.options {

    display:
        grid;

    gap:
        8px;

}

.option {

    width:
        100%;

    padding:
        13px 15px;

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

    border-radius:
        9px;

    background:
        var(--surface-soft);

    color:
        var(--ink);

    text-align:
        left;

    font-size:
        0.84rem;

    line-height:
        1.5;

    transition:
        var(--transition);

}

.option:hover:not(:disabled) {

    border-color:
        var(--teal-600);

    background:
        var(--teal-100);

}

.option:disabled {
    cursor: default;
}

.option.correct-answer {

    border-color:
        #61a97b;

    background:
        var(--green-100);

}

.option.selected-correct {

    box-shadow:
        0 0 0 2px rgba(39,115,76,0.13);

}

.option.selected-incorrect {

    border-color:
        #d88383;

    background:
        var(--red-100);

}

.feedback {

    min-height:
        23px;

    margin-top:
        10px;

    font-size:
        0.78rem;

    font-weight:
        700;

}

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

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

.quiz-result {

    display:
        none;

    margin-top:
        30px;

    padding:
        35px;

    border:
        1px solid #a8d8d3;

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

    background:
        var(--teal-100);

    text-align:
        center;

}

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

.result-icon {

    margin-bottom:
        10px;

    font-size:
        2rem;

}

.quiz-result h3 {
    margin-bottom: 8px;
}

.quiz-result > strong {

    display: block;

    margin-bottom:
        8px;

    color:
        var(--teal-700);

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        2.5rem;

}

.quiz-result p {

    max-width:
        600px;

    margin:
        0 auto 20px;

    color:
        var(--ink-soft);

}


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

.reflection-section {

    background:
        white;

}

.reflection-prompts {

    display:
        grid;

    gap:
        9px;

    margin-top:
        28px;

}

.reflection-prompts div {

    display:
        grid;

    grid-template-columns:
        40px 1fr;

    gap:
        13px;

    align-items:
        center;

    padding:
        15px 17px;

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

    border-radius:
        10px;

    background:
        var(--surface-soft);

}

.reflection-prompts span {

    display:
        grid;

    place-items:
        center;

    width:
        31px;

    height:
        31px;

    border-radius:
        8px;

    color:
        var(--teal-700);

    background:
        var(--teal-100);

    font-size:
        0.66rem;

    font-weight:
        900;

}

.reflection-prompts strong {

    color:
        var(--navy-800);

    font-size:
        0.86rem;

}

.reflection-principle {

    margin-top:
        28px;

    padding:
        22px;

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

    color:
        white;

    background:
        var(--navy-900);

    text-align:
        center;

}

.reflection-principle strong {

    color:
        #8dd9ec;

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        1rem;

}


/* ============================================================
   CONTINUE
   ============================================================ */

.continue-section {

    padding:
        65px 0;

    background:
        var(--teal-100);

    border-top:
        1px solid #c9e7e3;

}

.continue-inner {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

}

.continue-inner h2 {

    margin-bottom:
        10px;

    font-size:
        2rem;

}

.continue-inner p {

    margin-bottom:
        0;

    color:
        var(--ink-soft);

}

.continue-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    flex-shrink:
        0;

}

.continue-actions .btn-secondary {

    color:
        var(--navy-800);

    border-color:
        var(--border-dark);

    background:
        white;

}

.continue-actions .btn-secondary:hover {

    background:
        var(--surface-soft);

}


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

.site-footer {

    padding:
        48px 0 0;

    background:
        var(--navy-950);

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

}

.footer-inner {

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

    margin-inline:
        auto;

    display:
        grid;

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

    gap:
        40px;

    padding-bottom:
        35px;

}

.footer-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

}

.footer-brand img {

    width:
        48px;

    height:
        48px;

    object-fit:
        contain;

    border-radius:
        8px;

}

.footer-brand strong {

    display:
        block;

    color:
        white;

}

.footer-brand p {

    margin:
        4px 0 0;

    font-size:
        0.76rem;

}

.footer-links {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        7px 18px;

}

.footer-links a {

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

    font-size:
        0.76rem;

    font-weight:
        600;

    transition:
        var(--transition);

}

.footer-links a:hover {
    color: white;
}

.footer-motto {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

    text-align:
        right;

}

.footer-motto strong {

    color:
        #8dd9ec;

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        0.95rem;

}

.footer-motto span {

    font-size:
        0.75rem;

}

.footer-bottom {

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

    margin-inline:
        auto;

    padding:
        18px 0;

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

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

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

    font-size:
        0.68rem;

}


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

@media (max-width: 1100px) {

    .header-inner {
        gap: 15px;
    }

    .main-navigation {
        gap: 0;
    }

    .main-navigation a {
        padding-inline: 8px;
        font-size: 0.71rem;
    }

    .hero-inner {
        gap: 45px;
    }

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

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

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

}


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

@media (max-width: 850px) {

    .content-section {
        padding: 70px 0;
    }

    .main-navigation {
        display: none;
    }

    .nav-toggle {
        display: block;
    }

    .main-navigation.open {

        position: absolute;

        top: 78px;
        left: 0;
        right: 0;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        padding:
            10px 16px 18px;

        background:
            var(--navy-950);

        border-bottom:
            1px solid rgba(255,255,255,0.1);

    }

    .main-navigation.open a {
        padding: 13px 10px;
    }

    .hero-inner {

        grid-template-columns:
            1fr;

        padding:
            75px 0;

    }

    .hero-panel {
        max-width: 620px;
    }

    .data-heading {

        flex-direction:
            column;

    }

    .data-badge {
        width: 100%;
    }

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

    .continue-inner {
        flex-direction: column;
        align-items: flex-start;
    }

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

    .footer-motto {
        text-align: left;
    }

    .footer-bottom {
        flex-direction: column;
    }

}


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

@media (max-width: 650px) {

    .section-shell,
    .narrow-shell {
        width:
            min(
                calc(100% - 28px),
                var(--content-width)
            );
    }

    .hero-inner {
        width:
            min(
                calc(100% - 28px),
                var(--content-width)
            );
    }

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

    .hero-lead {
        font-size: 0.98rem;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .pathway {
        overflow-x: auto;
        padding-bottom: 5px;
    }

    .pathway-step {
        flex:
            0 0 auto;
        min-width:
            max-content;
    }

    .pathway-arrow {
        flex-shrink: 0;
    }

    .section-heading {
        gap: 13px;
    }

    .section-number {
        width: 40px;
        height: 40px;
    }

    .measurement-grid,
    .observation-grid,
    .question-grid,
    .determinant-grid {
        grid-template-columns: 1fr;
    }

    .measurement-card {
        padding: 22px;
    }

    .graph-caption {
        flex-direction: column;
        align-items: flex-start;
    }

    .concept-strip {
        grid-template-columns:
            1fr;
        text-align: center;
    }

    .concept-arrow {
        transform:
            rotate(90deg);
    }

    .hale-comparison {
        grid-template-columns:
            1fr;
    }

    .hale-arrow {
        transform:
            rotate(90deg);
        text-align: center;
    }

    .province-highlights {
        grid-template-columns:
            1fr 1fr;
    }

    .example-chain {
        display: grid;
        grid-template-columns: 1fr;
    }

    .example-chain > b {
        transform:
            rotate(90deg);
        height: 18px;
    }

    .connection-card {
        grid-template-columns: 1fr;
    }

    .quiz-card {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .quiz-number {
        width: 43px;
        height: 43px;
    }

    .quiz-progress {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

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

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

}


/* ============================================================
   RESPONSIVE — 430px
   ============================================================ */

@media (max-width: 430px) {

    .brand-text {
        display: none;
    }

    .hero-inner {
        padding:
            58px 0;
    }

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

    .hero-panel {
        padding:
            21px;
    }

    .hero-mini-grid {
        grid-template-columns:
            1fr;
    }

    .content-section {
        padding:
            58px 0;
    }

    .province-highlights {
        grid-template-columns:
            1fr;
    }

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

    .footer-bottom {
        font-size:
            0.62rem;
    }

}


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

:focus-visible {

    outline:
        3px solid #67cfe2;

    outline-offset:
        3px;

}

@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;

    }

}