/* =========================================================
   GLOBAL HEALTH EXPLORERS
   TEACHERS & PARENTS
   Independent Page Stylesheet
========================================================= */


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

:root {

    --navy: #071c2c;
    --navy-deep: #04131f;
    --navy-soft: #0c2b40;

    --blue: #1677c8;
    --blue-bright: #2b91df;
    --blue-pale: #eaf5ff;

    --teal: #0c9a9a;
    --teal-dark: #087878;
    --teal-pale: #e7f8f7;

    --green: #28a36a;
    --green-pale: #eaf8f0;

    --gold: #e9b84b;
    --gold-dark: #c89021;
    --gold-pale: #fff7df;

    --coral: #ef7468;
    --coral-pale: #fff0ee;

    --white: #ffffff;
    --off-white: #f7fafc;

    --ink: #102536;
    --ink-soft: #526573;
    --muted: #738391;

    --border: #dce7ee;
    --border-light: rgba(255,255,255,.13);

    --shadow-sm:
        0 8px 25px rgba(7, 28, 44, .07);

    --shadow-md:
        0 18px 45px rgba(7, 28, 44, .11);

    --shadow-lg:
        0 30px 80px rgba(7, 28, 44, .16);

    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 30px;

    --max-width: 1220px;

    --transition:
        220ms cubic-bezier(.2,.7,.2,1);

}


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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    background:
        var(--white);

    color:
        var(--ink);

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

    line-height: 1.6;

    -webkit-font-smoothing:
        antialiased;

}

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

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

button,
a {
    -webkit-tap-highlight-color:
        transparent;
}


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

.site-header {

    position: sticky;

    top: 0;

    z-index: 1000;

    background:
        rgba(255,255,255,.94);

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

    backdrop-filter:
        blur(16px);

}

.navbar {

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

    min-height:
        76px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        28px;

}

.brand {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        11px;

    flex-shrink:
        0;

}

.brand-mark {

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        12px;

    background:
        var(--navy);

    color:
        var(--white);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        .08em;

}

.brand-name {

    color:
        var(--navy);

    font-size:
        15px;

    font-weight:
        750;

    letter-spacing:
        -.01em;

}

.nav-links {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        27px;

}

.nav-links a {

    position:
        relative;

    color:
        #405462;

    font-size:
        13px;

    font-weight:
        650;

    transition:
        color var(--transition);

}

.nav-links a:hover,
.nav-links a.active {

    color:
        var(--blue);

}

.nav-links a.active::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        -9px;

    height:
        2px;

    border-radius:
        10px;

    background:
        var(--blue);

}

.nav-cta {

    padding:
        11px 18px;

    border-radius:
        999px;

    background:
        var(--navy);

    color:
        var(--white);

    font-size:
        13px;

    font-weight:
        750;

    transition:
        transform var(--transition),
        background var(--transition);

}

.nav-cta:hover {

    background:
        var(--blue);

    transform:
        translateY(-2px);

}


/* =========================================================
   COMMON
========================================================= */

.section-kicker {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    color:
        var(--blue);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;

}

.section-kicker::before {

    content:
        "";

    width:
        24px;

    height:
        2px;

    border-radius:
        999px;

    background:
        currentColor;

}

.section-heading {

    width:
        min(100% - 40px, 850px);

    margin:
        0 auto 55px;

    text-align:
        center;

}

.section-heading h2 {

    margin:
        13px 0 16px;

    color:
        var(--navy);

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

    line-height:
        1.06;

    letter-spacing:
        -.045em;

}

.section-heading h2 span {

    display:
        block;

    color:
        var(--blue);

}

.section-heading p {

    max-width:
        720px;

    margin:
        0 auto;

    color:
        var(--ink-soft);

    font-size:
        17px;

    line-height:
        1.75;

}


/* =========================================================
   BUTTONS
========================================================= */

.btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    min-height:
        48px;

    padding:
        0 22px;

    border-radius:
        999px;

    font-size:
        14px;

    font-weight:
        750;

    transition:
        transform var(--transition),
        background var(--transition),
        border-color var(--transition);

}

.btn:hover {

    transform:
        translateY(-2px);

}

.btn-primary {

    background:
        var(--blue);

    color:
        var(--white);

    box-shadow:
        0 12px 30px rgba(22,119,200,.25);

}

.btn-primary:hover {

    background:
        var(--blue-bright);

}

.btn-secondary {

    border:
        1px solid rgba(255,255,255,.27);

    color:
        var(--white);

    background:
        rgba(255,255,255,.07);

}

.btn-secondary:hover {

    background:
        rgba(255,255,255,.13);

}


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

.tp-hero {

    position:
        relative;

    overflow:
        hidden;

    padding:
        105px 0 0;

    background:
        linear-gradient(
            135deg,
            #061925 0%,
            #08253a 52%,
            #0b344b 100%
        );

    color:
        var(--white);

}

.hero-glow {

    position:
        absolute;

    border-radius:
        50%;

    filter:
        blur(2px);

    pointer-events:
        none;

}

.hero-glow-one {

    width:
        560px;

    height:
        560px;

    top:
        -220px;

    right:
        -130px;

    background:
        radial-gradient(
            circle,
            rgba(33,150,243,.22),
            transparent 68%
        );

}

.hero-glow-two {

    width:
        420px;

    height:
        420px;

    bottom:
        -200px;

    left:
        -160px;

    background:
        radial-gradient(
            circle,
            rgba(12,154,154,.17),
            transparent 68%
        );

}

.tp-hero-inner {

    position:
        relative;

    z-index:
        2;

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

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.04fr)
        minmax(400px, .96fr);

    align-items:
        center;

    gap:
        70px;

    padding-bottom:
        90px;

}

.tp-hero-content {

    max-width:
        690px;

}

.hero-kicker {

    display:
        inline-block;

    margin-bottom:
        20px;

    color:
        #8fd4ff;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .2em;

}

.hero-eyebrow {

    color:
        #6fc4f5;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        .15em;

}

.tp-hero h1 {

    margin:
        16px 0 25px;

    font-size:
        clamp(44px, 5.3vw, 72px);

    line-height:
        .98;

    letter-spacing:
        -.055em;

}

.tp-hero h1 span {

    display:
        block;

    color:
        #5cc6d0;

}

.hero-lead {

    max-width:
        650px;

    margin:
        0 0 16px;

    color:
        rgba(255,255,255,.9);

    font-size:
        19px;

    line-height:
        1.7;

}

.hero-supporting {

    max-width:
        650px;

    margin:
        0;

    color:
        rgba(255,255,255,.68);

    font-size:
        15px;

    line-height:
        1.75;

}

.hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        31px;

}

.hero-principle {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        30px;

    color:
        rgba(255,255,255,.56);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .08em;

}

.principle-line {

    width:
        34px;

    height:
        1px;

    background:
        rgba(255,255,255,.38);

}


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

.hero-visual {

    position:
        relative;

    width:
        min(100%, 530px);

    aspect-ratio:
        1 / 1;

    margin:
        0 auto;

}

.hero-orbit {

    position:
        absolute;

    inset:
        9%;

    border:
        1px solid rgba(116,207,255,.16);

    border-radius:
        50%;

}

.hero-orbit-two {

    inset:
        20%;

    border-color:
        rgba(71,214,198,.2);

}

.hero-center {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        190px;

    height:
        190px;

    transform:
        translate(-50%,-50%);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(255,255,255,.2);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(52,157,215,.34),
            rgba(4,19,31,.93)
        );

    box-shadow:
        0 0 70px rgba(22,119,200,.22);

    text-align:
        center;

}

.hero-center span {

    color:
        #75d3e0;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .18em;

}

.hero-center strong {

    margin-top:
        8px;

    font-size:
        20px;

    line-height:
        1.05;

    letter-spacing:
        -.03em;

}

.hero-node {

    position:
        absolute;

    width:
        105px;

    height:
        105px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(255,255,255,.17);

    border-radius:
        50%;

    background:
        rgba(7,28,44,.76);

    backdrop-filter:
        blur(10px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.15);

}

.hero-node span {

    color:
        #7bd7e1;

    font-size:
        24px;

    font-weight:
        800;

}

.hero-node small {

    margin-top:
        4px;

    color:
        rgba(255,255,255,.62);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .14em;

}

.node-one {
    top: 7%;
    left: 13%;
}

.node-two {
    top: 15%;
    right: 8%;
}

.node-three {
    bottom: 9%;
    right: 13%;
}

.node-four {
    bottom: 16%;
    left: 6%;
}

.hero-bottom-message {

    position:
        relative;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    min-height:
        74px;

    padding:
        18px 20px;

    background:
        rgba(0,0,0,.17);

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

    text-align:
        center;

}

.hero-bottom-message strong {

    color:
        var(--white);

}

.hero-bottom-message span {

    color:
        rgba(255,255,255,.64);

}


/* =========================================================
   CONNECTED SECTION
========================================================= */

.connected-section {

    padding:
        105px 0 110px;

    background:
        var(--off-white);

}

.connected-visual {

    position:
        relative;

    width:
        min(100% - 40px, 1120px);

    margin:
        0 auto;

    display:
        grid;

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

    gap:
        22px;

}

.sdg-backdrop {

    position:
        absolute;

    z-index:
        0;

    inset:
        -90px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    pointer-events:
        none;

    overflow:
        hidden;

    opacity:
        .09;

}

.sdg-backdrop img {

    width:
        min(760px, 72%);

    max-width:
        none;

    filter:
        saturate(.9);

}

.connection-line {

    position:
        absolute;

    z-index:
        1;

    background:
        linear-gradient(
            90deg,
            rgba(22,119,200,.0),
            rgba(22,119,200,.22),
            rgba(22,119,200,.0)
        );

    pointer-events:
        none;

}

.connection-line-horizontal {

    top:
        50%;

    left:
        18%;

    right:
        18%;

    height:
        1px;

}

.connection-line-vertical {

    top:
        18%;

    bottom:
        18%;

    left:
        50%;

    width:
        1px;

    background:
        linear-gradient(
            180deg,
            rgba(12,154,154,0),
            rgba(12,154,154,.22),
            rgba(12,154,154,0)
        );

}

.global-card {

    position:
        relative;

    z-index:
        2;

    min-height:
        360px;

    padding:
        30px;

    border:
        1px solid rgba(220,231,238,.92);

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

    background:
        rgba(255,255,255,.91);

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

    backdrop-filter:
        blur(12px);

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

}

.global-card:hover {

    transform:
        translateY(-6px);

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

    border-color:
        rgba(22,119,200,.24);

}

.global-card-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        28px;

}

.global-icon {

    width:
        52px;

    height:
        52px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        16px;

    background:
        var(--blue-pale);

    font-size:
        25px;

}

.global-number {

    color:
        #a0aeb7;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .16em;

}

.global-topic {

    display:
        block;

    color:
        var(--blue);

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        .16em;

}

.global-card h3 {

    max-width:
        470px;

    margin:
        11px 0 14px;

    color:
        var(--navy);

    font-size:
        28px;

    line-height:
        1.12;

    letter-spacing:
        -.035em;

}

.global-card p {

    max-width:
        500px;

    margin:
        0;

    color:
        var(--ink-soft);

    font-size:
        14px;

    line-height:
        1.72;

}

.global-arrow {

    display:
        inline-block;

    margin-top:
        24px;

    color:
        var(--blue);

    font-size:
        12px;

    font-weight:
        800;

}

.pandemic-card .global-icon {

    background:
        var(--coral-pale);

}

.sdh-card .global-icon {

    background:
        var(--teal-pale);

}

.sdg-card .global-icon {

    background:
        var(--gold-pale);

}

.sdg-card .global-topic {

    color:
        var(--gold-dark);

}

.sdg-mini-image {

    width:
        115px;

    margin-top:
        20px;

    padding:
        7px;

    border-radius:
        12px;

    background:
        rgba(255,255,255,.95);

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

}

.sdg-mini-image img {

    border-radius:
        7px;

}

.connected-conclusion {

    width:
        min(100% - 40px, 790px);

    margin:
        72px auto 0;

    text-align:
        center;

}

.conclusion-line {

    width:
        45px;

    height:
        2px;

    margin:
        0 auto 22px;

    background:
        var(--teal);

}

.connected-conclusion h3 {

    margin:
        0 0 8px;

    color:
        var(--navy);

    font-size:
        26px;

    letter-spacing:
        -.03em;

}

.connected-conclusion p {

    margin:
        0 auto 17px;

    color:
        var(--ink-soft);

}

.connected-conclusion strong {

    display:
        block;

    color:
        var(--navy);

    font-size:
        16px;

    line-height:
        1.65;

}


/* =========================================================
   ADULTS SECTION
========================================================= */

.adults-section {

    padding:
        110px 0;

    background:
        var(--white);

}

.adults-inner {

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

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        .92fr 1.08fr;

    gap:
        90px;

    align-items:
        center;

}

.adults-copy {

    max-width:
        560px;

}

.adults-copy h2 {

    margin:
        15px 0 22px;

    font-size:
        clamp(38px, 4.3vw, 56px);

    line-height:
        1.02;

    letter-spacing:
        -.05em;

}

.adults-copy h2 span {

    display:
        block;

    color:
        var(--blue);

}

.adults-copy p {

    margin:
        0 0 15px;

    color:
        var(--ink-soft);

    font-size:
        16px;

    line-height:
        1.75;

}

.text-link {

    display:
        inline-flex;

    margin-top:
        15px;

    color:
        var(--blue);

    font-size:
        13px;

    font-weight:
        800;

}

.role-stack {

    display:
        grid;

    gap:
        15px;

}

.role-card {

    display:
        grid;

    grid-template-columns:
        32px 62px 1fr;

    align-items:
        center;

    gap:
        18px;

    padding:
        23px 25px;

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

    border-radius:
        18px;

    background:
        var(--white);

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

    transition:
        transform var(--transition),
        box-shadow var(--transition);

}

.role-card:hover {

    transform:
        translateX(5px);

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

}

.role-number {

    color:
        #a0adb5;

    font-size:
        10px;

    font-weight:
        800;

}

.role-icon {

    width:
        58px;

    height:
        58px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        17px;

    background:
        var(--blue-pale);

    color:
        var(--blue);

    font-weight:
        850;

}

.role-card > div:last-child > span {

    color:
        var(--blue);

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        .15em;

}

.role-card h3 {

    margin:
        3px 0 4px;

    color:
        var(--navy);

    font-size:
        23px;

    letter-spacing:
        -.03em;

}

.role-card p {

    margin:
        0;

    color:
        var(--ink-soft);

    font-size:
        13px;

}

.role-parent .role-icon {

    color:
        var(--teal);

    background:
        var(--teal-pale);

}

.role-mentor .role-icon {

    color:
        var(--gold-dark);

    background:
        var(--gold-pale);

}


/* =========================================================
   TEACHERS
========================================================= */

.teachers-section {

    padding:
        115px 0;

    background:
        #f4f8fb;

}

.teacher-grid {

    width:
        min(100% - 40px, 1120px);

    margin:
        0 auto;

    display:
        grid;

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

    gap:
        17px;

}

.teacher-feature {

    position:
        relative;

    min-height:
        285px;

    padding:
        27px;

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

    border-radius:
        21px;

    background:
        var(--white);

    box-shadow:
        0 8px 24px rgba(7,28,44,.045);

    transition:
        transform var(--transition),
        box-shadow var(--transition);

}

.teacher-feature:hover {

    transform:
        translateY(-5px);

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

}

.teacher-feature-large {

    grid-column:
        span 2;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #eef8ff
        );

}

.teacher-feature-highlight {

    background:
        linear-gradient(
            145deg,
            #062236,
            #0a3a51
        );

    color:
        var(--white);

    border-color:
        transparent;

}

.teacher-feature-ghbdc {

    background:
        linear-gradient(
            145deg,
            #e9f8f7,
            #ffffff
        );

    border-color:
        rgba(12,154,154,.22);

}

.teacher-feature-partnership {

    grid-column:
        span 2;

    background:
        linear-gradient(
            145deg,
            #fffaf0,
            #ffffff
        );

}

.teacher-number {

    position:
        absolute;

    top:
        24px;

    right:
        25px;

    color:
        #a3afb7;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .12em;

}

.teacher-icon {

    width:
        48px;

    height:
        48px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        24px;

    border-radius:
        14px;

    background:
        var(--blue-pale);

    color:
        var(--blue);

    font-weight:
        850;

}

.teacher-feature h3 {

    margin:
        0 0 11px;

    color:
        var(--navy);

    font-size:
        23px;

    line-height:
        1.15;

    letter-spacing:
        -.03em;

}

.teacher-feature p {

    margin:
        0;

    color:
        var(--ink-soft);

    font-size:
        13px;

    line-height:
        1.72;

}

.teacher-feature-highlight h3,
.teacher-feature-highlight p {

    color:
        var(--white);

}

.teacher-feature-highlight p {

    color:
        rgba(255,255,255,.68);

}

.teacher-feature-highlight .teacher-icon {

    background:
        rgba(255,255,255,.1);

    color:
        #70d1df;

}

.teacher-feature-ghbdc .teacher-icon {

    background:
        var(--teal-pale);

    color:
        var(--teal);

}

.teacher-feature-partnership .teacher-icon {

    background:
        var(--gold-pale);

    color:
        var(--gold-dark);

}

.teacher-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        20px;

}

.teacher-tags span {

    padding:
        5px 9px;

    border-radius:
        999px;

    background:
        rgba(22,119,200,.08);

    color:
        var(--blue);

    font-size:
        9px;

    font-weight:
        750;

}

.feature-link {

    display:
        inline-flex;

    margin-top:
        18px;

    color:
        var(--blue);

    font-size:
        11px;

    font-weight:
        800;

}

.teacher-feature-highlight .feature-link {

    color:
        #7dd6e0;

}


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

.teacher-pathway-section {

    padding:
        85px 0;

    background:
        var(--navy);

    color:
        var(--white);

}

.teacher-pathway-inner {

    width:
        min(100% - 40px, 1120px);

    margin:
        0 auto;

}

.teacher-pathway-copy {

    max-width:
        590px;

    margin-bottom:
        50px;

}

.teacher-pathway-copy .section-kicker {

    color:
        #70d1df;

}

.teacher-pathway-copy h2 {

    margin:
        15px 0;

    font-size:
        clamp(32px, 4vw, 48px);

    line-height:
        1.05;

    letter-spacing:
        -.045em;

}

.teacher-pathway-copy p {

    max-width:
        620px;

    margin:
        0;

    color:
        rgba(255,255,255,.63);

}

.teacher-pathway {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

}

.teacher-path {

    flex:
        1;

    min-width:
        130px;

}

.path-dot {

    width:
        43px;

    height:
        43px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        13px;

    border:
        1px solid rgba(255,255,255,.2);

    border-radius:
        50%;

    color:
        #7dd6e0;

    font-size:
        10px;

    font-weight:
        800;

}

.teacher-path strong {

    display:
        block;

    font-size:
        15px;

}

.teacher-path small {

    display:
        block;

    margin-top:
        3px;

    color:
        rgba(255,255,255,.48);

    font-size:
        11px;

}

.path-arrow {

    color:
        rgba(255,255,255,.25);

    font-size:
        18px;

}


/* =========================================================
   PARENTS
========================================================= */

.parents-section {

    padding:
        115px 0;

    background:
        var(--white);

}

.parents-inner {

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

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap:
        90px;

    align-items:
        center;

}

.parents-visual {

    position:
        relative;

    width:
        min(100%, 500px);

    aspect-ratio:
        1 / 1;

    margin:
        0 auto;

}

.family-orbit {

    position:
        absolute;

    inset:
        10%;

    border:
        1px solid rgba(12,154,154,.18);

    border-radius:
        50%;

}

.family-orbit-two {

    inset:
        25%;

    border-color:
        rgba(22,119,200,.17);

}

.family-center {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        170px;

    height:
        170px;

    transform:
        translate(-50%,-50%);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        linear-gradient(
            145deg,
            #0a3c4d,
            #071c2c
        );

    color:
        var(--white);

    text-align:
        center;

    box-shadow:
        0 30px 70px rgba(7,28,44,.18);

}

.family-center span {

    color:
        #74d1dc;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .18em;

}

.family-center strong {

    margin-top:
        7px;

    font-size:
        20px;

    line-height:
        1;

}

.family-node {

    position:
        absolute;

    padding:
        11px 15px;

    border-radius:
        999px;

    background:
        var(--white);

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

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

    color:
        var(--blue);

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        .1em;

}

.family-node-one {

    top:
        14%;

    left:
        10%;

}

.family-node-two {

    top:
        16%;

    right:
        8%;

    color:
        var(--teal);

}

.family-node-three {

    bottom:
        16%;

    left:
        7%;

    color:
        var(--gold-dark);

}

.family-node-four {

    bottom:
        13%;

    right:
        9%;

    color:
        var(--green);

}

.parents-content h2 {

    margin:
        14px 0 20px;

    color:
        var(--navy);

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

    line-height:
        1.02;

    letter-spacing:
        -.05em;

}

.parents-content > p {

    max-width:
        620px;

    margin:
        0 0 15px;

    color:
        var(--ink-soft);

    font-size:
        16px;

    line-height:
        1.75;

}

.parent-actions {

    display:
        grid;

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

    gap:
        11px;

    margin-top:
        30px;

}

.parent-action {

    padding:
        18px;

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

    border-radius:
        15px;

    background:
        #fbfdfe;

}

.parent-action span {

    color:
        #9aa9b3;

    font-size:
        9px;

    font-weight:
        800;

}

.parent-action strong {

    display:
        block;

    margin:
        5px 0 3px;

    color:
        var(--navy);

    font-size:
        16px;

}

.parent-action small {

    display:
        block;

    color:
        var(--ink-soft);

    font-size:
        11px;

    line-height:
        1.5;

}


/* =========================================================
   RESPONSIBILITY
========================================================= */

.responsibility-section {

    padding:
        110px 0;

    background:
        #f4f8fb;

}

.responsibility-inner {

    width:
        min(100% - 40px, 1120px);

    margin:
        0 auto;

}

.responsibility-heading {

    max-width:
        650px;

    margin-bottom:
        50px;

}

.responsibility-heading h2 {

    margin:
        15px 0 0;

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

    line-height:
        1;

    letter-spacing:
        -.05em;

}

.responsibility-heading h2 span {

    display:
        block;

    color:
        var(--teal);

}

.responsibility-grid {

    display:
        grid;

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

    gap:
        15px;

}

.responsibility-card {

    min-height:
        205px;

    padding:
        25px;

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

    border-radius:
        19px;

    background:
        var(--white);

}

.responsibility-card > span {

    color:
        #a3afb7;

    font-size:
        10px;

    font-weight:
        800;

}

.responsibility-card h3 {

    margin:
        30px 0 8px;

    color:
        var(--navy);

    font-size:
        21px;

    letter-spacing:
        -.025em;

}

.responsibility-card p {

    margin:
        0;

    color:
        var(--ink-soft);

    font-size:
        12px;

    line-height:
        1.65;

}

.responsibility-card-final {

    background:
        var(--navy);

    border-color:
        var(--navy);

}

.responsibility-card-final h3 {

    color:
        var(--white);

}

.responsibility-card-final p {

    color:
        rgba(255,255,255,.62);

}

.responsibility-card-final > span {

    color:
        #74d1dc;

}


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

.adult-resources-section {

    padding:
        110px 0;

    background:
        var(--white);

}

.adult-resource-grid {

    width:
        min(100% - 40px, 1120px);

    margin:
        0 auto;

    display:
        grid;

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

    gap:
        11px;

}

.adult-resource {

    position:
        relative;

    min-height:
        225px;

    display:
        flex;

    flex-direction:
        column;

    padding:
        21px;

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

    border-radius:
        17px;

    background:
        var(--white);

    box-shadow:
        0 7px 20px rgba(7,28,44,.04);

    transition:
        transform var(--transition),
        box-shadow var(--transition);

}

.adult-resource:hover {

    transform:
        translateY(-5px);

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

}

.adult-resource > span {

    color:
        #a2afb8;

    font-size:
        9px;

    font-weight:
        800;

}

.adult-resource strong {

    margin-top:
        31px;

    color:
        var(--navy);

    font-size:
        16px;

    line-height:
        1.25;

}

.adult-resource small {

    margin-top:
        8px;

    color:
        var(--ink-soft);

    font-size:
        11px;

    line-height:
        1.6;

}

.adult-resource b {

    margin-top:
        auto;

    padding-top:
        17px;

    color:
        var(--blue);

    font-size:
        12px;

}


/* =========================================================
   GET INVOLVED
========================================================= */

.get-involved-section {

    padding:
        110px 0;

    background:
        linear-gradient(
            135deg,
            #071c2c,
            #0a3a4e
        );

    color:
        var(--white);

}

.get-involved-inner {

    width:
        min(100% - 40px, 1120px);

    margin:
        0 auto;

}

.get-involved-copy {

    max-width:
        760px;

    margin-bottom:
        45px;

}

.get-involved-copy .section-kicker {

    color:
        #76d4df;

}

.get-involved-copy h2 {

    margin:
        15px 0;

    font-size:
        clamp(37px, 4.6vw, 60px);

    line-height:
        1;

    letter-spacing:
        -.05em;

}

.get-involved-copy p {

    max-width:
        690px;

    margin:
        0;

    color:
        rgba(255,255,255,.64);

    font-size:
        16px;

    line-height:
        1.75;

}

.involvement-options {

    display:
        grid;

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

    gap:
        14px;

}

.involvement-card {

    min-height:
        205px;

    padding:
        25px;

    display:
        flex;

    flex-direction:
        column;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius:
        19px;

    background:
        rgba(255,255,255,.055);

    transition:
        transform var(--transition),
        background var(--transition);

}

.involvement-card:hover {

    transform:
        translateY(-5px);

    background:
        rgba(255,255,255,.09);

}

.involvement-card > span {

    color:
        rgba(255,255,255,.4);

    font-size:
        9px;

    font-weight:
        800;

}

.involvement-card strong {

    margin-top:
        28px;

    font-size:
        18px;

}

.involvement-card small {

    margin-top:
        7px;

    color:
        rgba(255,255,255,.57);

    font-size:
        11px;

    line-height:
        1.6;

}

.involvement-card b {

    margin-top:
        auto;

    padding-top:
        18px;

    color:
        #72d2de;

}

.involvement-teal b {

    color:
        #65d7c7;

}

.involvement-gold b {

    color:
        #f2c86c;

}


/* =========================================================
   FINAL CTA
========================================================= */

.final-cta {

    padding:
        95px 0;

    background:
        #f4f8fb;

}

.final-cta-inner {

    width:
        min(100% - 40px, 1120px);

    margin:
        0 auto;

    display:
        grid;

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

    align-items:
        center;

    gap:
        70px;

}

.final-cta-copy h2 {

    max-width:
        650px;

    margin:
        14px 0 12px;

    color:
        var(--navy);

    font-size:
        clamp(40px, 5vw, 65px);

    line-height:
        .98;

    letter-spacing:
        -.055em;

}

.final-cta-copy p {

    margin:
        0 0 24px;

    color:
        var(--ink-soft);

    font-size:
        16px;

}

.final-cta-orbit {

    position:
        relative;

    width:
        340px;

    height:
        340px;

    margin:
        0 auto;

    border:
        1px solid rgba(22,119,200,.15);

    border-radius:
        50%;

}

.final-cta-orbit::before {

    content:
        "";

    position:
        absolute;

    inset:
        25%;

    border:
        1px solid rgba(12,154,154,.2);

    border-radius:
        50%;

}

.final-word {

    position:
        absolute;

    padding:
        7px 12px;

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

    border-radius:
        999px;

    background:
        var(--white);

    color:
        var(--blue);

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        .1em;

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

}

.final-word:nth-child(1) {

    top:
        14%;

    left:
        30%;

}

.final-word:nth-child(2) {

    top:
        45%;

    right:
        -7%;

    color:
        var(--teal);

}

.final-word:nth-child(3) {

    bottom:
        12%;

    left:
        20%;

    color:
        var(--gold-dark);

}

.final-word:nth-child(4) {

    top:
        45%;

    left:
        -8%;

    color:
        var(--green);

}


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

.site-footer {

    background:
        #04131f;

    color:
        var(--white);

}

.footer-inner {

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

    margin:
        0 auto;

    padding:
        65px 0 55px;

    display:
        grid;

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

    gap:
        45px;

}

.footer-logo {

    width:
        45px;

    height:
        45px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        15px;

    border-radius:
        12px;

    background:
        #0e3650;

    color:
        #78d3df;

    font-size:
        12px;

    font-weight:
        850;

}

.footer-brand h3 {

    margin:
        0 0 7px;

    font-size:
        17px;

}

.footer-brand p {

    max-width:
        290px;

    margin:
        0;

    color:
        rgba(255,255,255,.46);

    font-size:
        12px;

}

.footer-column {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        10px;

}

.footer-column h4 {

    margin:
        0 0 7px;

    color:
        #76d4df;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

}

.footer-column a {

    color:
        rgba(255,255,255,.55);

    font-size:
        12px;

    transition:
        color var(--transition);

}

.footer-column a:hover {

    color:
        var(--white);

}

.footer-bottom {

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

    margin:
        0 auto;

    padding:
        19px 0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

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

    color:
        rgba(255,255,255,.35);

    font-size:
        10px;

}


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

:focus-visible {

    outline:
        3px solid rgba(22,119,200,.45);

    outline-offset:
        4px;

}

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

    html {
        scroll-behavior:
            auto;
    }

    *,
    *::before,
    *::after {

        transition:
            none !important;

        animation:
            none !important;

    }

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1050px) {

    .nav-links {
        gap: 16px;
    }

    .brand-name {
        display: none;
    }

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

        text-align:
            center;
    }

    .tp-hero-content {
        max-width:
            800px;

        margin:
            0 auto;
    }

    .hero-lead,
    .hero-supporting {
        margin-left:
            auto;

        margin-right:
            auto;
    }

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

    .hero-visual {
        max-width:
            470px;
    }

    .adults-inner,
    .parents-inner {
        grid-template-columns:
            1fr;

        gap:
            55px;
    }

    .adults-copy {
        max-width:
            800px;
    }

    .parents-visual {
        order:
            2;
    }

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

    .teacher-feature-large,
    .teacher-feature-partnership {
        grid-column:
            span 2;
    }

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

    .adult-resource:last-child {
        grid-column:
            span 3;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 720px) {

    .navbar {

        min-height:
            67px;

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

    }

    .nav-links {

        display:
            none;

    }

    .nav-cta {

        padding:
            9px 14px;

        font-size:
            11px;

    }

    .brand-mark {

        width:
            38px;

        height:
            38px;

    }

    .tp-hero {

        padding-top:
            75px;

    }

    .tp-hero-inner {

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

        padding-bottom:
            65px;

    }

    .tp-hero h1 {

        font-size:
            clamp(39px, 12vw, 55px);

    }

    .hero-lead {

        font-size:
            16px;

    }

    .hero-supporting {

        font-size:
            13px;

    }

    .hero-principle {

        font-size:
            9px;

    }

    .hero-visual {

        width:
            min(100%, 360px);

    }

    .hero-center {

        width:
            135px;

        height:
            135px;

    }

    .hero-center strong {
        font-size:
            15px;
    }

    .hero-node {

        width:
            76px;

        height:
            76px;

    }

    .hero-node span {
        font-size:
            17px;
    }

    .hero-node small {
        font-size:
            6px;
    }

    .hero-bottom-message {

        flex-direction:
            column;

        gap:
            2px;

        font-size:
            12px;

    }

    .section-heading {

        width:
            min(100% - 28px, 850px);

        margin-bottom:
            38px;

    }

    .section-heading h2 {

        font-size:
            34px;

    }

    .section-heading p {

        font-size:
            14px;

    }

    .connected-section,
    .adults-section,
    .teachers-section,
    .parents-section,
    .responsibility-section,
    .adult-resources-section {

        padding:
            75px 0;

    }

    .connected-visual {

        width:
            min(100% - 28px, 1120px);

        grid-template-columns:
            1fr;

    }

    .connection-line {
        display:
            none;
    }

    .global-card {

        min-height:
            auto;

        padding:
            24px;

    }

    .global-card h3 {

        font-size:
            24px;

    }

    .sdg-backdrop {

        inset:
            0;

    }

    .sdg-backdrop img {

        width:
            110%;

        opacity:
            .65;

    }

    .connected-conclusion {

        width:
            min(100% - 28px, 790px);

    }

    .adults-inner,
    .parents-inner {

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

    }

    .role-card {

        grid-template-columns:
            27px 50px 1fr;

        gap:
            12px;

        padding:
            18px;

    }

    .role-icon {

        width:
            48px;

        height:
            48px;

    }

    .role-card h3 {

        font-size:
            19px;

    }

    .teacher-grid {

        width:
            min(100% - 28px, 1120px);

        grid-template-columns:
            1fr;

    }

    .teacher-feature-large,
    .teacher-feature-partnership {

        grid-column:
            auto;

    }

    .teacher-feature {

        min-height:
            auto;

    }

    .teacher-pathway-inner {

        width:
            min(100% - 28px, 1120px);

    }

    .teacher-pathway {

        display:
            grid;

        grid-template-columns:
            1fr 1fr;

        gap:
            20px;

    }

    .path-arrow {
        display:
            none;
    }

    .parents-content h2 {

        font-size:
            38px;

    }

    .parents-visual {

        width:
            min(100%, 340px);

    }

    .family-center {

        width:
            130px;

        height:
            130px;

    }

    .family-center strong {

        font-size:
            15px;

    }

    .family-node {

        font-size:
            7px;

        padding:
            8px 10px;

    }

    .parent-actions {

        grid-template-columns:
            1fr;

    }

    .responsibility-grid {

        grid-template-columns:
            1fr;

    }

    .responsibility-card {

        min-height:
            auto;

    }

    .adult-resource-grid {

        width:
            min(100% - 28px, 1120px);

        grid-template-columns:
            1fr;

    }

    .adult-resource:last-child {

        grid-column:
            auto;

    }

    .involvement-options {

        grid-template-columns:
            1fr;

    }

    .get-involved-inner {

        width:
            min(100% - 28px, 1120px);

    }

    .final-cta {

        padding:
            75px 0;

    }

    .final-cta-inner {

        width:
            min(100% - 28px, 1120px);

        grid-template-columns:
            1fr;

        gap:
            45px;

    }

    .final-cta-orbit {

        width:
            260px;

        height:
            260px;

    }

    .footer-inner {

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

        grid-template-columns:
            1fr 1fr;

        gap:
            35px 20px;

    }

    .footer-brand {

        grid-column:
            span 2;

    }

    .footer-bottom {

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

        flex-direction:
            column;

        align-items:
            flex-start;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .hero-actions {

        flex-direction:
            column;

    }

    .hero-actions .btn {

        width:
            100%;

    }

    .hero-node {

        width:
            66px;

        height:
            66px;

    }

    .node-one {
        left:
            4%;
    }

    .node-two {
        right:
            2%;
    }

    .node-three {
        right:
            4%;
    }

    .node-four {
        left:
            2%;
    }

    .hero-center {

        width:
            120px;

        height:
            120px;

    }

    .hero-bottom-message span {

        max-width:
            280px;

    }

    .role-card {

        grid-template-columns:
            24px 45px 1fr;

    }

    .role-card p {

        font-size:
            11px;

    }

    .teacher-pathway {

        grid-template-columns:
            1fr;

    }

    .teacher-path {

        display:
            grid;

        grid-template-columns:
            43px 1fr;

        align-items:
            center;

        column-gap:
            12px;

    }

    .path-dot {

        grid-row:
            span 2;

        margin:
            0;

    }

    .teacher-path small {

        margin:
            0;

    }

    .footer-inner {

        grid-template-columns:
            1fr;

    }

    .footer-brand {

        grid-column:
            auto;

    }

}