:root {

    --background: #ffffff;
    --surface: #ffffff;

    --charcoal: #3A434C;

    --text: #303841;
    --text-soft: #6b747d;

    --pink: #F43369;
    --pink-dark: #d91f55;
    --pink-light: #fff0f4;

    --blue: #2B9FD8;
    --blue-dark: #197eaf;
    --blue-light: #eaf7fd;

    --teal-action: #F7A934;
    --teal-action-dark: #E7901D;
    --teal-action-text: #ffffff;

    --line: #eadfe3;

    --shadow:
        0 20px 50px
        rgba(58,67,76,.10);

    --radius-large: 30px;
    --radius-medium: 22px;
    --radius-small: 14px;

    --container-width: 1160px;

}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

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

    color: var(--text);

    background: #ffffff;

    line-height: 1.6;

    -webkit-font-smoothing:
        antialiased;

}


a {

    color: inherit;

    text-decoration: none;

}


.container {

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

    margin:
        0 auto;

}



/* HEADER */

.site-header {

    position: sticky;

    top: 0;

    z-index: 100;

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

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

    backdrop-filter:
        blur(16px);

}


.navigation {

    min-height: 88px;

    display: flex;

    align-items: center;

    gap: 34px;

    position: relative;

}


.logo {

    display: flex;

    align-items: center;

    order: 1;

}


.logo img {

    width: 250px;

    height: auto;

    display: block;

}


.nav-links {

    display: flex;

    gap: 30px;

    margin-left: auto;

    order: 2;

}


.nav-links a {

    color: var(--charcoal);

    font-size: 1.05rem;

    font-weight: 700;

}


.nav-links a:hover {

    color: var(--pink);

}


.navigation .button-small {

    order: 3;

}


.menu-toggle {

    display: none;

    width: 44px;

    height: 44px;

    padding: 10px;

    border: 1px solid rgba(43,159,216,.22);

    border-radius: 50%;

    background: rgba(234,247,253,.72);

    cursor: pointer;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 4px;

    order: 4;

}


.menu-toggle span {

    width: 20px;

    height: 2px;

    border-radius: 999px;

    background: var(--charcoal);

    transition: transform 180ms ease;

}


@media(max-width:1050px) {

    .navigation {

        gap: 14px;

    }


    .navigation .button-small {

        margin-left: auto;

        order: 2;

    }


    .menu-toggle {

        display: flex;

        order: 3;

    }


    .nav-links {

        position: absolute;

        top: calc(100% - 5px);

        right: 0;

        z-index: 120;

        min-width: 190px;

        margin: 0;

        padding: 12px;

        display: none;

        flex-direction: column;

        gap: 2px;

        border: 1px solid rgba(174,222,244,.58);

        border-radius: 16px;

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

        box-shadow: 0 18px 38px rgba(58,67,76,.14);

        backdrop-filter: blur(18px) saturate(150%);

        -webkit-backdrop-filter: blur(18px) saturate(150%);

        order: 4;

    }


    .nav-links a {

        padding: 10px 12px;

        border-radius: 10px;

    }


    .nav-links a:hover,
    .nav-links a:focus-visible {

        background: rgba(43,159,216,.09);

    }


    .menu-toggle:hover ~ .nav-links,
    .menu-toggle:focus ~ .nav-links,
    .menu-toggle:focus-visible ~ .nav-links,
    .nav-links:hover,
    .nav-links:focus-within {

        display: flex;

    }


    .menu-toggle:hover span:first-child,
    .menu-toggle:focus span:first-child {

        transform: translateY(2px);

    }


    .menu-toggle:hover span:last-child,
    .menu-toggle:focus span:last-child {

        transform: translateY(-2px);

    }

}



/* BUTTONS */

.button {

    min-height: 52px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        0 24px;

    border-radius: 999px;

    background:
        var(--teal-action);

    color: var(--teal-action-text);

    font-weight: 700;

    box-shadow:
        0 10px 24px
        rgba(247,169,52,.34);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease;

}


.button:hover {

    transform:
        translateY(-2px);

    background:
        var(--teal-action-dark);

    box-shadow:
        0 14px 28px
        rgba(231,144,29,.40);

}


.button-small {

    min-height: 42px;

    padding:
        0 20px;

    background:
        var(--teal-action);

    box-shadow:
        0 10px 22px
        rgba(247,169,52,.34);

}


.button-small:hover {

    background:
        var(--teal-action-dark);

}


.navigation .button-small {

    background:
        #3CCBF4;

    box-shadow:
        0 10px 22px rgba(60,203,244,.32);

}


.navigation .button-small:hover {

    background:
        #22B7E3;

    box-shadow:
        0 14px 28px rgba(34,183,227,.38);

}



/* HERO */

.hero {

    min-height: 700px;

    display: flex;

    align-items: center;

    padding:
        80px 0 70px;

    background-image:
        linear-gradient(
            90deg,
            rgba(31,39,46,.10),
            rgba(31,39,46,.02)
        ),
        url("../images/hero/hero-piano.jpg");

    background-size:
        cover;

    background-position:
        center;

    background-repeat:
        no-repeat;

}


.hero-layout {

    display: block;

}


.hero-content {

    position: relative;

    z-index: 1;

}


.eyebrow {

    margin:
        0 0 18px;

    color:
        var(--pink-dark);

    font-size:
        .78rem;

    font-weight:
        800;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

}


.hero-content .eyebrow {

    color: #fff;

    text-shadow:
        0 2px 14px
        rgba(0,0,0,.3);

}

.hero-message {

    max-width: 650px;

    color: #ffffff;

    text-shadow:
        0 2px 18px
        rgba(0,0,0,.30);

}


.hero-message h1 {

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            3.6rem,
            6vw,
            5.6rem
        );

    font-weight: 800;

    line-height: .96;

    letter-spacing: -.055em;

}


.hero-message p {

    max-width: 570px;

    margin: 24px 0 0;

    color: #ffffff;

    font-size: 1.25rem;

    font-weight: 600;

    line-height: 1.5;

}
.hero-buttons {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 40px;

}


.hero-buttons .button,
.hero-buttons .secondary-link {

    font-size: 20px;

    padding:
        0 30px;

    min-height: 62px;

}


.secondary-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background:
        var(--pink);

    color:
        #fff;

    font-weight:
        700;

    border-radius:
        999px;

    box-shadow:
        0 10px 22px
        rgba(244,51,105,.22);

    transition:
        .2s;

}


.secondary-link:hover {

    transform:
        translateY(-2px);

    background:
        var(--pink-dark);

}



/* SECTION LABELS */

.card-label,
.section-label {

    margin: 0;

    color:
        var(--pink-dark);

    font-size:
        .76rem;

    font-weight:
        800;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

}



/* MAIN SECTIONS */

.studio-section,
.lessons-section,
.features-section,
.tutors-section,
.cta-section {

    padding:
        110px 0;

}


.studio-heading,
.lessons-heading,
.tutors-heading {

    max-width:
        700px;

    margin-bottom:
        48px;

}


.studio-heading h2,
.lessons-heading h2,
.tutors-heading h2,
.section-heading h2 {

    margin:
        10px 0 16px;

    font-size:
        clamp(
            2.8rem,
            5vw,
            4.4rem
        );

    line-height:
        .98;

    letter-spacing:
        -.055em;

}


.studio-heading > p:last-child,
.lessons-heading > p:last-child {

    color:
        var(--text-soft);

    font-size:
        1.1rem;

    max-width:
        640px;

}



/* SCHOOL PROGRAM */

.school-gallery {

    display: grid;

    grid-template-columns:
        1.3fr .7fr;

    grid-template-rows:
        250px 180px;

    gap:
        18px;

}


.school-photo {

    margin: 0;

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

    overflow:
        hidden;

}


.school-photo-main {

    grid-row:
        1 / 3;

}


.school-photo img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    display:
        block;

}


.school-stat {

    padding:
        24px;

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

    background:
        var(--pink-light);

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

}


.school-stat-blue {

    background:
        var(--blue-light);

}


.school-stat strong {

    font-size:
        1.5rem;

    letter-spacing:
        -.03em;

}


.school-stat span {

    color:
        var(--text-soft);

}



/* LESSONS */

.lessons-section {

    background:
        #fff;

}


.instrument-track {

    display:
        flex;

    overflow-x:
        auto;

    overflow-y:
        hidden;

    gap:
        16px;

    padding:
        12px 4px 30px;

    scroll-snap-type:
        x mandatory;

    scroll-padding-inline:
        4px;

    overscroll-behavior-inline:
        contain;

    -webkit-overflow-scrolling:
        touch;

    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(244,51,105,.38)
        rgba(58,67,76,.08);

}


.instrument-track::-webkit-scrollbar {
    height: 8px;
}


.instrument-track::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(58,67,76,.08);
}


.instrument-track::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(244,51,105,.38);
}


.instrument-card {

    flex:
        0 0 clamp(250px,23vw,290px);

    scroll-snap-align:
        start;

    min-height:
        292px;

    padding:
        24px;

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

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -1px 0 rgba(58,67,76,.04),
        0 18px 38px rgba(58,67,76,.09);

    backdrop-filter:
        blur(22px)
        saturate(160%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(160%);

    transform:
        perspective(900px)
        translateY(0)
        rotateX(0deg)
        rotateY(0deg);

    transform-style:
        preserve-3d;

    transition:
        transform 260ms ease,
        box-shadow 260ms ease,
        border-color 260ms ease,
        background-color 260ms ease;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-end;

    text-align:
        center;

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

}


.instrument-card:nth-child(even),
.instrument-card:nth-child(odd) {

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.80) 0%,
            rgba(255,248,238,.36) 44%,
            rgba(246,162,58,.075) 100%
        );

    border-color:
        rgba(255,255,255,.82);

}


.instrument-card::before {

    content:
        "";

    position:
        absolute;

    inset:
        1px 1px auto 1px;

    height:
        44%;

    border-radius:
        calc(var(--radius-medium) - 1px)
        calc(var(--radius-medium) - 1px)
        45% 45%;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.66),
            rgba(255,255,255,0)
        );

    pointer-events:
        none;

    z-index:
        -1;

}


.instrument-card:hover {

    transform:
        perspective(900px)
        translateY(-10px)
        rotateX(2deg)
        rotateY(-1.5deg);

    border-color:
        rgba(255,255,255,.92);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(58,67,76,.05),
        0 28px 52px rgba(58,67,76,.15);

}


.instrument-mark {

    width:
        122px;

    height:
        122px;

    margin-bottom:
        26px;

    border-radius:
        50%;

    display:
        grid;

    place-items:
        center;

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

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        0 10px 24px rgba(58,67,76,.08);

    color:
        var(--charcoal);

    transform:
        translateZ(22px)
        translateY(0)
        scale(1);

    transition:
        transform 260ms ease;

}


.instrument-mark img {

    width: 110px;

    height: 110px;

    display: block;

    object-fit: contain;

    object-position: center;

    filter:
        saturate(.48)
        contrast(.94)
        brightness(1.03);

}


.instrument-card h3 {

    margin:
        auto 0 4px;

    font-size:
        1.5rem;

    width:
        100%;

    transform:
        translateZ(14px)
        translateY(0);

    transition:
        transform 260ms ease;

}


.instrument-card p {

    margin:
        0;

    color:
        var(--text-soft);

    font-size:
        .94rem;

    font-weight:
        700;

    line-height:
        1.4;

    min-height:
        2.8em;

    width:
        100%;

    transform:
        translateZ(8px)
        translateY(0);

    transition:
        transform 260ms ease;

}


.instrument-card:hover .instrument-mark {

    transform:
        translateZ(34px)
        translateY(-5px)
        scale(1.06);

}


.instrument-card:hover h3 {

    transform:
        translateZ(22px)
        translateY(-2px);

}


.instrument-card:hover p {

    transform:
        translateZ(12px)
        translateY(-1px);

}


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

    .instrument-card,
    .instrument-mark,
    .instrument-card h3,
    .instrument-card p {

        transition:
            none;

        transform:
            none;

    }

}



/* WHY EXPERIENCE MUSIC */

.features-section {

    background:
        var(--charcoal);

    color:
        #fff;

}


.section-heading {

    max-width:
        760px;

    margin-bottom:
        48px;

}


.features-section .eyebrow {

    color:
        #ff9ab6;

}


.feature-grid {

    display:
        grid;

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

    gap:
        18px;

}


.feature-card {

    padding:
        30px;

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

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

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

}


.feature-number {

    color:
        #ff9ab6;

    font-weight:
        800;

}


.feature-card h3 {

    font-size:
        1.45rem;

    line-height:
        1.15;

}


.feature-card p {

    color:
        #d9dde0;

}



/* TUTORS */

.tutor-grid {

    display:
        flex;

    overflow-x:
        auto;

    overflow-y:
        hidden;

    gap:
        18px;

    padding:
        6px 4px 22px;

    scroll-snap-type:
        x mandatory;

    scroll-padding-inline:
        4px;

    overscroll-behavior-inline:
        contain;

    -webkit-overflow-scrolling:
        touch;

    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(244,51,105,.38)
        rgba(58,67,76,.08);

}


.tutor-grid::-webkit-scrollbar {
    height: 8px;
}


.tutor-grid::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(58,67,76,.08);
}


.tutor-grid::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(244,51,105,.38);
}


.tutor-card {

    flex:
        0 0 clamp(260px,24vw,330px);

    min-height:
        132px;

    scroll-snap-align:
        start;

    margin:
        0;

    overflow:
        hidden;

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

    background:
        #fff;

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

    box-shadow:
        0 12px 30px
        rgba(58,67,76,.06);

}


.tutor-card img {

    width:
        100%;

    aspect-ratio:
        4 / 5;

    object-fit:
        cover;

    display:
        block;

}


.tutor-card div {

    padding:
        18px 20px;

}


.tutor-card h3 {

    margin:
        0;

    font-size:
        1.35rem;

}


.tutor-card p {

    margin:
        2px 0 0;

    color:
        var(--text-soft);

}



/* CRAIGIEBURN STUDIO */

.musictoot-section {
    padding: 110px 0;
    background: #fff;
    border-top: 1px solid var(--line);
}

.musictoot-intro {
    max-width: 900px;
    margin-bottom: 46px;
    text-align: center;
}

.musictoot-intro h2 {
    margin: 12px 0 18px;
    font-size: clamp(2.7rem, 5vw, 4.4rem);
    line-height: .98;
    letter-spacing: -.055em;
}

.musictoot-intro > p:last-child {
    margin: 0;
    color: var(--text-soft);
    font-size: 1.08rem;
}

.musictoot-intro > p:last-child strong {
    font-weight: 800;
}

.musictoot-card {
    min-height: 590px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    overflow: hidden;
    border-radius: var(--radius-large);
    background: linear-gradient(145deg, #eefaff, var(--pink-light));
    box-shadow: var(--shadow);
}

.musictoot-photo {
    position: relative;
    min-height: 560px;
    overflow: hidden;
}

.musictoot-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(31,39,46,.42));
    pointer-events: none;
}

.musictoot-photo > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 54%;
}

.musictoot-photo > span {
    position: absolute;
    z-index: 1;
    left: 28px;
    bottom: 28px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.94);
    color: var(--charcoal);
    font-size: .86rem;
    font-weight: 900;
    letter-spacing: .085em;
}

.musictoot-content {
    padding: clamp(42px, 6vw, 74px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.musictoot-brand {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.musictoot-brand img {
    width: 54px;
    height: 54px;
    object-fit: contain;
}

.musictoot-brand strong {
    color: var(--charcoal);
    font-size: 1.55rem;
    letter-spacing: -.04em;
}

.musictoot-content h2 {
    margin: 12px 0 20px;
    font-size: clamp(2.7rem, 4.6vw, 4.2rem);
    line-height: .96;
    letter-spacing: -.055em;
}

.musictoot-content > p:not(.section-label) {
    margin: 0;
    color: var(--text-soft);
    font-size: 1.08rem;
}

.musictoot-details {
    margin: 28px 0 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.musictoot-details span {
    padding: 8px 12px;
    border: 1px solid rgba(43,159,216,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    color: var(--charcoal);
    font-size: .86rem;
    font-weight: 700;
}

.musictoot-button {
    min-height: 62px;
    padding: 0 30px;
    background: #3CCBF4;
    box-shadow: 0 12px 28px rgba(60,203,244,.30);
}

.musictoot-button:hover {
    background: #22B7E3;
    box-shadow: 0 15px 32px rgba(34,183,227,.36);
}

@media(max-width:900px) {
    .musictoot-card { grid-template-columns: 1fr; }
    .musictoot-photo { min-height: 440px; }
}

@media(max-width:620px) {
    .musictoot-section { padding: 78px 0; }
    .musictoot-intro { margin-bottom: 32px; }
    .musictoot-intro h2 { font-size: 2.55rem; }
    .musictoot-photo { min-height: 340px; }
    .musictoot-content {
        padding: 40px 26px 46px;
        align-items: center;
        text-align: center;
    }
    .musictoot-content h2 { font-size: 2.6rem; }
    .musictoot-details { justify-content: center; }
    .musictoot-button { width: 100%; }
}


/* CTA */

.cta-section {

    text-align:
        center;

    background:
        linear-gradient(
            135deg,
            var(--pink-light),
            var(--blue-light)
        );

}


.cta-section h2 {

    margin:
        0 auto 24px;

    max-width:
        850px;

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

    line-height:
        .95;

    letter-spacing:
        -.05em;

}


.cta-copy {

    max-width:
        640px;

    margin:
        0 auto 38px;

    font-size:
        1.12rem;

    color:
        var(--text-soft);

}


.cta-section .button {

    background:
        var(--pink);

    min-width:
        310px;

    min-height:
        76px;

    padding:
        0 46px;

    font-size:
        1.25rem;

    font-weight:
        800;

    box-shadow:
        0 16px 34px rgba(244,51,105,.32);

}


.cta-section .button:hover {

    background:
        var(--pink-dark);

    box-shadow:
        0 18px 38px rgba(244,51,105,.38);

}



/* FOOTER */

.site-footer {

    padding:
        34px 0;

    background:
        #fff;

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

}


.footer-content {

    display:
        grid;

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

    align-items:
        center;

    gap:
        28px;

    color:
        var(--text-soft);

    font-size:
        .86rem;

}


.footer-content p {
    margin: 0;
}


.footer-content p:last-child {
    justify-self: end;
}


.footer-logo-image {

    width:
        165px;

    height:
        auto;

    margin-right:
        auto;

}



/* TABLET */

@media(max-width:900px) {
    .hero {

        min-height:
            auto;

        padding:
            65px 0;

        background-position:
            40% center;

    }


    .hero-content {

        min-height:
            210px;

        display:
            flex;

        flex-direction:
            column;

        justify-content:
            flex-end;

    }


    .school-gallery {

        grid-template-columns:
            1fr;

        grid-template-rows:
            auto;

    }


    .school-photo-main {

        grid-row:
            auto;

    }


    .school-photo {

        height:
            330px;

    }


    .school-stat {

        min-height:
            150px;

    }


    .instrument-track {

        display:
            flex;

    }


    .feature-grid {

        grid-template-columns:
            1fr;

    }


    .tutor-grid {

        display:
            flex;

    }

}



/* MOBILE */

@media(max-width:700px) {

    .hero-message {

        margin:
            0 auto;

        text-align:
            center;

    }


    .hero-message p {

        margin-left:
            auto;

        margin-right:
            auto;

    }

}

@media(max-width:620px) {

    .container {

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

    }


    .navigation {

        min-height:
            68px;

        gap:
            8px;

    }


    .logo img {

        width:
            160px;

    }


    .button-small {

        padding:
            0 12px;

        min-height:
            40px;

        font-size:
            .9rem;

    }


    .menu-toggle {

        width:
            42px;

        height:
            42px;

    }


    .hero {

        padding:
            45px 0;

        background-position:
            38% center;

    }


    .hero-content {

        min-height:
            260px;

    }


    .hero-content .eyebrow {

        text-align:
            center;

    }


    .hero-buttons {

        flex-direction:
            column;

        align-items:
            center;

        width:
            100%;

        margin-top:
            26px;

    }


    .hero-buttons .button,
    .hero-buttons .secondary-link {

        width:
            100%;

        max-width:
            330px;

        min-height:
            64px;

        font-size:
            18px;

    }


    .studio-section,
    .lessons-section,
    .features-section,
    .tutors-section,
    .cta-section {

        padding:
            78px 0;

    }


    .studio-heading h2,
    .lessons-heading h2,
    .tutors-heading h2,
    .section-heading h2 {

        font-size:
            2.7rem;

    }


    .school-photo {

        height:
            260px;

    }


    .instrument-track {

        display:
            flex;

        margin-right:
            -14px;

        padding-right:
            14px;

    }


    .instrument-card {

        min-height:
            250px;

        flex-basis:
            min(78vw,290px);

    }


    .tutor-grid {

        display:
            flex;

        margin-right:
            -14px;

        padding-right:
            14px;

    }


    .tutor-card {

        flex-basis:
            min(82vw,310px);

    }


    .footer-content {

        grid-template-columns:
            1fr;

        text-align:
            center;

        gap:
            8px;

    }


    .footer-content p:last-child {
        justify-self: center;
    }


    .footer-logo-image {

        margin:
            0 auto 8px;

    }

}


/* PARTNER SCHOOLS */

.partners-section {
    padding: 96px 0;
    overflow: hidden;
    background: var(--blue-light);
}

.partners-heading {
    text-align: center;
    margin-bottom: 42px;
}

.partners-heading h2 {
    margin: 10px 0 12px;
    font-size: clamp(2.4rem, 4vw, 3.6rem);
    line-height: 1.02;
    letter-spacing: -.05em;
}

.partners-heading > p:last-child {
    margin: 0;
    color: var(--text-soft);
    font-size: 1.05rem;
}

.partner-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.partner-carousel::before,
.partner-carousel::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    width: min(10vw, 120px);
    pointer-events: none;
}

.partner-carousel::before {
    left: 0;
    background: linear-gradient(90deg, var(--blue-light), transparent);
}

.partner-carousel::after {
    right: 0;
    background: linear-gradient(-90deg, var(--blue-light), transparent);
}

.partner-track {
    display: flex;
    width: max-content;
    animation: partner-scroll 42s linear infinite;
}

.partner-carousel:hover .partner-track,
.partner-carousel:focus-within .partner-track {
    animation-play-state: paused;
}

.partner-set {
    display: flex;
    gap: 18px;
    padding-right: 18px;
}

.partner-logo {
    width: 220px;
    height: 150px;
    padding: 20px;
    border: 1px solid rgba(43,159,216,.18);
    border-radius: var(--radius-medium);
    background: rgba(255,255,255,.92);
    box-shadow: 0 12px 30px rgba(58,67,76,.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

.partner-logo-wide {
    width: 320px;
}

.partner-logo-dark {
    background: var(--charcoal);
}

.partner-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes partner-scroll {
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .partner-track { animation: none; }
    .partner-carousel { overflow-x: auto; }
    .partner-set[aria-hidden="true"] { display: none; }
}

@media(max-width:620px) {
    .partners-section { padding: 72px 0; }
    .partners-heading { margin-bottom: 32px; }
    .partner-logo {
        width: 190px;
        height: 132px;
        padding: 16px;
    }

    .partner-logo-wide { width: 270px; }
}