:root {

    --registration-navy:
        #021128;

    --registration-navy-light:
        #06245a;

    --registration-blue:
        #0877d1;

    --registration-blue-light:
        #1295ee;

    --registration-gold:
        #ffd21c;

    --registration-gold-light:
        #ffe76a;

    --registration-text:
        #40556f;

    --registration-muted:
        #718198;

    --registration-white:
        #ffffff;

    --registration-border:
        rgba(6,56,111,0.09);

    --font-heading:
        "Space Grotesk",
        sans-serif;

    --font-body:
        "DM Sans",
        sans-serif;

    --blue-950: #021128;
    --blue-900: #06245a;
    --blue-800: #07367f;
    --blue-700: #0757b9;
    --blue-600: #0876dc;
    --blue-500: #1295ee;

    --yellow: #ffd21c;
    --yellow-light: #ffe76a;

    --white: #ffffff;

    --font-heading: "Plus Jakarta Sans", sans-serif;

    --container: 1280px;
}


* {

    box-sizing:
        border-box;

    margin:
        0;

    padding:
        0;
}


html {

    scroll-behavior:
        smooth;
}


body {

    font-family:
        var(--font-body);

    color:
        var(--registration-navy);

    background:
        #ffffff;

    overflow-x:
        hidden;
}


a {

    color:
        inherit;

    text-decoration:
        none;
}


button {

    font:
        inherit;
}


.school-header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    transition:
        background 0.4s ease,
        box-shadow 0.4s ease,
        backdrop-filter 0.4s ease;
}

.school-header.scrolled {

    background: rgba(2, 17, 40, 0.92);

    backdrop-filter: blur(18px);

    box-shadow:
        0 10px 45px rgba(0, 0, 0, 0.18);
}


.school-header-inner {

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

    height: 96px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.school-brand {

    width: 92px;
    height: 92px;

    position: relative;

    display: flex;

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

    z-index: 1002;
}

.school-brand img {

    width: 78px;
    height: 78px;

    object-fit: contain;

    position: relative;
    z-index: 3;

    filter:
        drop-shadow(
            0 8px 20px rgba(0, 0, 0, 0.22)
        );

    animation:
        schoolLogoPulse 3.5s ease-in-out infinite;
}


@keyframes schoolLogoPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.055);
    }
}


.logo-pulse {

    position: absolute;

    width: 65px;
    height: 65px;

    border-radius: 50%;

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

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

    animation:
        logoRingPulse 3.5s ease-out infinite;
}


@keyframes logoRingPulse {

    0% {
        transform: scale(0.85);
        opacity: 0.8;
    }

    70% {
        transform: scale(1.35);
        opacity: 0;
    }

    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}



.school-nav {

    display: flex;

    align-items: center;

    gap: 5px;
}


.school-nav a {

    position: relative;

    padding: 12px 15px;

    border-radius: 100px;

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

    font-size: 0.82rem;

    font-weight: 600;

    white-space: nowrap;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}


.school-nav a::after {

    content: "";

    position: absolute;

    left: 17px;
    right: 17px;

    bottom: 7px;

    height: 2px;

    background: var(--yellow);

    transform:
        scaleX(0);

    transform-origin: right;

    transition:
        transform 0.3s ease;
}


.school-nav a:hover {

    color: white;

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

    transform:
        translateY(-1px);
}


.school-nav a:hover::after,
.school-nav a.active::after {

    transform:
        scaleX(1);

    transform-origin: left;
}


.school-nav a.active {

    color: white;
}


/* Staff Access */

.school-nav .staff-access {

    margin-left: 7px;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--yellow);

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

    background:
        rgba(
            255,
            210,
            28,
            0.05
        );
}


.school-nav .staff-access::after {
    display: none;
}


.school-nav .staff-access:hover {

    color: var(--blue-950);

    background: var(--yellow);

    border-color: var(--yellow);
}


.staff-access i {

    font-size: 0.7rem;
}



.school-menu-toggle {

    display: none;

    width: 46px;
    height: 46px;

    border: 0;

    border-radius: 50%;

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

    cursor: pointer;

    z-index: 1002;
}


.school-menu-toggle span {

    display: block;

    width: 20px;
    height: 2px;

    margin: 4px auto;

    background: white;

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


.school-menu-toggle.active span:nth-child(1) {
    transform:
        translateY(6px)
        rotate(45deg);
}


.school-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}


.school-menu-toggle.active span:nth-child(3) {
    transform:
        translateY(-6px)
        rotate(-45deg);
}



.registration-hero {

    position:
        relative;

    min-height:
        820px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

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


.registration-hero-video {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    z-index:
        0;
}


.registration-hero-overlay {

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    background:
        linear-gradient(
            90deg,
            rgba(2,17,40,0.94) 0%,
            rgba(2,17,40,0.78) 42%,
            rgba(2,17,40,0.36) 75%,
            rgba(2,17,40,0.62) 100%
        );
}


.registration-hero-overlay::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at 72% 45%,
            rgba(
                8,
                119,
                209,
                0.24
            ),
            transparent 35%
        );
}


.registration-hero-glow {

    position:
        absolute;

    width:
        420px;

    height:
        420px;

    right:
        7%;

    top:
        28%;

    border-radius:
        50%;

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

    filter:
        blur(70px);

    z-index:
        1;

    animation:
        registrationGlow
        7s
        ease-in-out
        infinite;
}


@keyframes registrationGlow {

    0%,
    100% {
        transform:
            scale(0.95);
        opacity:
            0.55;
    }

    50% {
        transform:
            scale(1.08);
        opacity:
            1;
    }
}


.registration-hero-content {

    position:
        relative;

    z-index:
        3;

    width:
        min(
            1240px,
            calc(100% - 50px)
        );

    margin:
        0 auto;

    padding-top:
        80px;

    max-width:
        900px;

    animation:
        heroContentIn
        1s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        both;
}


@keyframes heroContentIn {

    from {

        opacity:
            0;

        transform:
            translateY(35px);
    }

    to {

        opacity:
            1;

        transform:
            translateY(0);
    }
}


.registration-eyebrow {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    color:
        var(--registration-gold);

    font-size:
        0.65rem;

    font-weight:
        800;

    letter-spacing:
        0.2em;
}


.registration-eyebrow span {

    width:
        35px;

    height:
        2px;

    background:
        var(--registration-gold);
}


.registration-hero h1 {

    max-width:
        900px;

    margin-top:
        25px;

    color:
        #ffffff;

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            3.3rem,
            6.4vw,
            6.5rem
        );

    line-height:
        0.94;

    letter-spacing:
        -0.07em;

    font-weight:
        700;
}


.registration-hero h1 span {

    display:
        block;

    color:
        var(--registration-gold);
}


.registration-hero-content > p {

    max-width:
        670px;

    margin-top:
        30px;

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

    font-size:
        1.05rem;

    line-height:
        1.8;
}


.registration-hero-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        34px;

    padding:
        17px 25px;

    border-radius:
        14px;

    color:
        var(--registration-navy);

    background:
        var(--registration-gold);

    font-size:
        0.78rem;

    font-weight:
        800;

    box-shadow:
        0 14px 35px
        rgba(
            255,
            210,
            28,
            0.2
        );

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


.registration-hero-button:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 20px 45px
        rgba(
            255,
            210,
            28,
            0.32
        );
}


.registration-hero-button i {

    transition:
        transform 0.3s ease;
}


.registration-hero-button:hover i {

    transform:
        translateX(4px);
}


.registration-hero-note {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-top:
        25px;

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

    font-size:
        0.63rem;

    font-weight:
        600;

    letter-spacing:
        0.04em;
}


.registration-hero-note i {

    color:
        var(--registration-blue-light);
}


.hero-scroll-indicator {

    position:
        absolute;

    z-index:
        3;

    bottom:
        28px;

    left:
        50%;

    transform:
        translateX(-50%);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        8px;

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

    font-size:
        0.48rem;

    font-weight:
        800;

    letter-spacing:
        0.17em;
}


.hero-scroll-indicator i {

    color:
        var(--registration-gold);

    animation:
        scrollBounce
        1.8s
        ease-in-out
        infinite;
}


@keyframes scrollBounce {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(6px);
    }
}



.registration-process-section {

    position:
        relative;

    padding:
        125px 0 135px;

    overflow:
        hidden;

    background:
        #ffffff;
}


.registration-process-section::before {

    content:
        "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    right:
        -280px;

    top:
        170px;

    border-radius:
        50%;

    background:
        rgba(
            8,
            119,
            209,
            0.035
        );

    border:
        1px solid
        rgba(
            8,
            119,
            209,
            0.06
        );
}


.registration-process-section::after {

    content:
        "";

    position:
        absolute;

    width:
        350px;

    height:
        350px;

    left:
        -220px;

    bottom:
        100px;

    border-radius:
        50%;

    background:
        rgba(
            255,
            210,
            28,
            0.04
        );
}


.registration-container {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            1240px,
            calc(100% - 50px)
        );

    margin:
        0 auto;
}



.registration-section-header {

    max-width:
        780px;

    margin:
        0 auto 75px;

    text-align:
        center;
}


.registration-label {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    color:
        var(--registration-blue);

    font-size:
        0.62rem;

    font-weight:
        850;

    letter-spacing:
        0.17em;
}


.registration-label i {

    color:
        var(--registration-gold);

    font-size:
        0.8rem;
}


.registration-section-header h2 {

    margin-top:
        19px;

    font-family:
        var(--font-heading);

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

    line-height:
        0.98;

    letter-spacing:
        -0.065em;

    font-weight:
        750;
}


.registration-section-header h2 span {

    display:
        block;

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


.registration-section-header p {

    max-width:
        670px;

    margin:
        25px auto 0;

    color:
        var(--registration-text);

    font-size:
        0.97rem;

    line-height:
        1.85;
}



.registration-steps {

    position:
        relative;

    display:
        grid;

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

    gap:
        22px;
}


.registration-step {

    position:
        relative;

    min-height:
        390px;

    padding:
        30px 28px;

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

    border-radius:
        24px;

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

    box-shadow:
        0 18px 55px
        rgba(
            5,
            42,
            83,
            0.065
        );

    opacity:
        0;

    transform:
        translateY(35px);

    transition:
        opacity 0.75s ease,
        transform 0.75s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.registration-step.is-visible {

    opacity:
        1;

    transform:
        translateY(0);
}


.registration-step:nth-child(2) {
    transition-delay:
        0.08s;
}


.registration-step:nth-child(3) {
    transition-delay:
        0.16s;
}


.registration-step:nth-child(4) {
    transition-delay:
        0.24s;
}


.registration-step:nth-child(5) {
    transition-delay:
        0.32s;
}


.registration-step:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(
            8,
            119,
            209,
            0.22
        );

    box-shadow:
        0 28px 65px
        rgba(
            5,
            42,
            83,
            0.11
        );
}



.step-top {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;
}


.step-number {

    color:
        rgba(
            6,
            56,
            111,
            0.07
        );

    font-family:
        var(--font-heading);

    font-size:
        2.4rem;

    line-height:
        1;

    font-weight:
        800;
}


.step-icon {

    width:
        58px;

    height:
        58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        17px;

    color:
        var(--registration-blue);

    background:
        linear-gradient(
            145deg,
            rgba(
                8,
                119,
                209,
                0.08
            ),
            rgba(
                255,
                210,
                28,
                0.14
            )
        );

    border:
        1px solid
        rgba(
            8,
            119,
            209,
            0.08
        );

    box-shadow:
        0 10px 25px
        rgba(
            5,
            42,
            83,
            0.07
        );

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


.registration-step:hover .step-icon {

    transform:
        rotate(-5deg)
        scale(1.08);

    background:
        var(--registration-gold);

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



.step-content {

    margin-top:
        30px;
}


.step-kicker {

    color:
        var(--registration-blue);

    font-size:
        0.55rem;

    font-weight:
        850;

    letter-spacing:
        0.15em;
}


.step-content h3 {

    margin-top:
        8px;

    color:
        var(--registration-navy);

    font-family:
        var(--font-heading);

    font-size:
        1.25rem;

    line-height:
        1.15;

    font-weight:
        750;

    letter-spacing:
        -0.025em;
}


.step-content p {

    margin-top:
        15px;

    color:
        var(--registration-text);

    font-size:
        0.78rem;

    line-height:
        1.75;
}


.step-content strong {

    color:
        var(--registration-navy);

    font-weight:
        800;
}




.step-footer {

    position:
        absolute;

    left:
        28px;

    right:
        28px;

    bottom:
        25px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding-top:
        15px;

    border-top:
        1px solid
        rgba(
            6,
            56,
            111,
            0.07
        );

    color:
        var(--registration-muted);

    font-size:
        0.58rem;

    font-weight:
        700;
}


.step-footer i {

    color:
        var(--registration-gold);

    font-size:
        0.65rem;
}




.registration-step-final {

    border-color:
        rgba(
            255,
            210,
            28,
            0.3
        );

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


.registration-step-final .step-icon {

    color:
        #967000;

    background:
        var(--registration-gold);
}




.registration-cta {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        auto 1fr auto;

    align-items:
        center;

    gap:
        28px;

    margin-top:
        75px;

    padding:
        40px 45px;

    overflow:
        hidden;

    border-radius:
        28px;

    background:
        linear-gradient(
            135deg,
            var(--registration-navy),
            #063a7e
        );

    box-shadow:
        0 30px 75px
        rgba(
            2,
            17,
            40,
            0.17
        );

    opacity:
        0;

    transform:
        translateY(30px);

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


.registration-cta.is-visible {

    opacity:
        1;

    transform:
        translateY(0);
}


.registration-cta::before {

    content:
        "";

    position:
        absolute;

    width:
        420px;

    height:
        420px;

    right:
        -190px;

    top:
        -240px;

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

    border-radius:
        50%;
}


.registration-cta-glow {

    position:
        absolute;

    width:
        220px;

    height:
        220px;

    right:
        80px;

    bottom:
        -150px;

    border-radius:
        50%;

    background:
        rgba(
            8,
            119,
            209,
            0.18
        );

    filter:
        blur(35px);
}


.registration-cta-icon {

    position:
        relative;

    z-index:
        2;

    width:
        70px;

    height:
        70px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    border-radius:
        19px;

    color:
        var(--registration-navy);

    background:
        var(--registration-gold);

    font-size:
        1.35rem;

    box-shadow:
        0 12px 30px
        rgba(
            255,
            210,
            28,
            0.2
        );
}


.registration-cta-copy {

    position:
        relative;

    z-index:
        2;
}


.registration-cta-copy span {

    color:
        var(--registration-gold);

    font-size:
        0.57rem;

    font-weight:
        850;

    letter-spacing:
        0.17em;
}


.registration-cta-copy h3 {

    margin-top:
        6px;

    color:
        #ffffff;

    font-family:
        var(--font-heading);

    font-size:
        1.55rem;

    line-height:
        1.15;

    letter-spacing:
        -0.035em;
}


.registration-cta-copy p {

    margin-top:
        7px;

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

    font-size:
        0.72rem;
}


.registration-cta-button {

    position:
        relative;

    z-index:
        2;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        15px 20px;

    white-space:
        nowrap;

    border-radius:
        13px;

    color:
        var(--registration-navy);

    background:
        var(--registration-gold);

    font-size:
        0.68rem;

    font-weight:
        800;

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


.registration-cta-button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 30px
        rgba(
            255,
            210,
            28,
            0.25
        );
}



.school-footer {

    position: relative;

    background:
        linear-gradient(
            145deg,
            #021128 0%,
            #031a38 55%,
            #021128 100%
        );

    color: white;

    border-top:
        5px solid
        var(--yellow);

    overflow: hidden;
}


/* Subtle background glow */

.school-footer::before {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -180px;
    top: -200px;

    border-radius: 50%;

    background:
        rgba(
            8,
            118,
            220,
            0.08
        );

    filter:
        blur(5px);

    pointer-events: none;
}


.school-footer::after {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: -180px;
    bottom: -180px;

    border-radius: 50%;

    background:
        rgba(
            255,
            210,
            28,
            0.035
        );

    pointer-events: none;
}



.school-footer-inner {

    position: relative;

    z-index: 2;

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

    margin:
        0 auto;

    padding:
        70px 0 55px;

    display:
        grid;

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

    column-gap:
        80px;

    align-items:
        start;
}



.footer-label {

    display:
        block;

    margin-bottom:
        22px;

    color:
        var(--yellow);

    font-family:
        var(--font-heading);

    font-size:
        0.65rem;

    font-weight:
        800;

    letter-spacing:
        0.2em;

    text-transform:
        uppercase;
}



.footer-brand {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;
}


.footer-school-logo {

    width:
        105px;

    height:
        105px;

    object-fit:
        contain;

    margin-bottom:
        25px;

    filter:
        drop-shadow(
            0 10px 25px
            rgba(
                0,
                0,
                0,
                0.25
            )
        );

    transition:
        transform 0.35s ease;
}


.footer-school-logo:hover {

    transform:
        scale(1.05);
}


.footer-address {

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

    font-size:
        0.78rem;

    line-height:
        1.8;
}


.footer-address p {

    margin:
        0;
}


.footer-copyright {

    margin-top:
        18px !important;

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

    font-size:
        0.68rem;
}



.footer-contact {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;
}


.footer-contact > a:not(.footer-reggaepixel) {

    position:
        relative;

    display:
        inline-block;

    margin-bottom:
        10px;

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

    font-size:
        0.82rem;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


.footer-contact > a:not(.footer-reggaepixel):hover {

    color:
        var(--yellow);

    transform:
        translateX(4px);
}



.footer-socials {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        24px;
}


.footer-socials a {

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

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

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

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


.footer-socials a:hover {

    color:
        var(--blue-950);

    background:
        var(--yellow);

    border-color:
        var(--yellow);

    transform:
        translateY(-4px);
}


.footer-socials i {

    font-size:
        0.85rem;
}



.footer-reggaepixel {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        28px;

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

    font-size:
        0.64rem;

    line-height:
        1.5;

    transition:
        color 0.25s ease;
}


.footer-reggaepixel img {

    width:
        38px;

    height:
        38px;

    object-fit:
        contain;

    opacity:
        0.82;

    transition:
        opacity 0.25s ease,
        transform 0.3s ease;
}


.footer-reggaepixel:hover {

    color:
        white;
}


.footer-reggaepixel:hover img {

    opacity:
        1;

    transform:
        scale(1.08);
}


.footer-reggaepixel strong {

    color:
        var(--yellow);

    font-weight:
        700;
}



.footer-links {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;
}


.footer-links a {

    position:
        relative;

    display:
        inline-block;

    margin-bottom:
        13px;

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

    font-size:
        0.78rem;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


.footer-links a::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -3px;

    width:
        0;

    height:
        1px;

    background:
        var(--yellow);

    transition:
        width 0.3s ease;
}


.footer-links a:hover {

    color:
        white;

    transform:
        translateX(4px);
}


.footer-links a:hover::before {

    width:
        100%;
}



.school-footer-inner::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                255,
                210,
                28,
                0.25
            ),
            transparent
        );
}



@media (max-width: 950px) {

    .school-footer-inner {

        width:
            calc(100% - 50px);

        grid-template-columns:
            1fr 1fr;

        gap:
            55px 45px;

        padding:
            60px 0 45px;
    }

    .footer-contact {

        grid-column:
            2;

        grid-row:
            1;
    }

    .footer-links {

        grid-column:
            1 / -1;

        grid-row:
            2;

        padding-top:
            10px;

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

        display:
            grid;

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

        column-gap:
            30px;
    }

    .footer-links .footer-label {

        grid-column:
            1 / -1;
    }
}



@media (max-width: 600px) {

    .school-footer-inner {

        width:
            calc(100% - 40px);

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        gap:
            45px;

        padding:
            55px 0 40px;

        text-align:
            center;
    }


    .footer-brand,
    .footer-contact,
    .footer-links {

        width:
            100%;

        align-items:
            center;
    }


    .footer-school-logo {

        width:
            90px;

        height:
            90px;
    }


    .footer-contact {

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

        padding-top:
            40px;
    }


    .footer-contact > a:not(.footer-reggaepixel) {

        margin-bottom:
            12px;
    }


    .footer-socials {

        justify-content:
            center;
    }


    .footer-links {

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

        padding-top:
            40px;

        display:
            flex;

        flex-direction:
            column;
    }


    .footer-reggaepixel {

        justify-content:
            center;

        text-align:
            left;
    }
}



@media (max-width: 800px) {

    .school-menu-toggle {

        display:
            block;
    }


    .school-nav {

        position:
            fixed;

        top:
            0;

        right:
            -100%;

        width:
            min(
                330px,
                85%
            );

        height:
            100vh;

        padding:
            100px 35px 35px;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            25px;

        background:
            var(--registration-navy);

        box-shadow:
            -20px 0 60px
            rgba(
                0,
                0,
                0,
                0.25
            );

        transition:
            right 0.35s ease;
    }


    .school-nav.open {

        right:
            0;
    }


    .school-nav a {

        font-size:
            0.9rem;
    }


    .school-menu-toggle {

        position:
            relative;

        z-index:
            1001;
    }


    .school-menu-toggle.active span:nth-child(1) {

        transform:
            translateY(7px)
            rotate(45deg);
    }


    .school-menu-toggle.active span:nth-child(2) {

        opacity:
            0;
    }


    .school-menu-toggle.active span:nth-child(3) {

        transform:
            translateY(-7px)
            rotate(-45deg);
    }


    .registration-hero {

        min-height:
            750px;
    }


    .registration-hero-content {

        padding-top:
            80px;
    }


    .registration-steps {

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


    .registration-cta {

        grid-template-columns:
            auto 1fr;
    }


    .registration-cta-button {

        grid-column:
            1 / -1;

        justify-self:
            start;
    }

}


@media (max-width: 600px) {

    .school-header-inner,
    .registration-hero-content,
    .registration-container,
    .school-footer-inner {

        width:
            calc(100% - 35px);
    }


    .registration-hero h1 {

        font-size:
            3.2rem;
    }


    .registration-hero-content > p {

        font-size:
            0.88rem;
    }


    .registration-hero-note {

        align-items:
            flex-start;

        line-height:
            1.5;
    }


    .registration-process-section {

        padding:
            90px 0 100px;
    }


    .registration-section-header {

        margin-bottom:
            55px;
    }


    .registration-steps {

        grid-template-columns:
            1fr;
    }


    .registration-step {

        min-height:
            350px;
    }


    .registration-cta {

        grid-template-columns:
            1fr;

        padding:
            35px 28px;
    }


    .registration-cta-button {

        width:
            100%;

        justify-content:
            center;
    }


    .school-footer-links {

        flex-wrap:
            wrap;
    }

}


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

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

        scroll-behavior:
            auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}


.student-account-setup {

    --sas-navy: #021128;
    --sas-navy-light: #063a7e;
    --sas-blue: #0877d1;
    --sas-blue-light: #1295ee;
    --sas-gold: #ffd21c;
    --sas-text: #40556f;
    --sas-muted: #718198;

    position: relative;

    overflow: hidden;

    padding: 125px 0 135px;

    background:
        #ffffff;

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



.student-account-setup::before {

    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    left: -320px;
    top: 180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(8,119,209,0.055),
            transparent 68%
        );

    pointer-events: none;
}


.student-account-setup::after {

    content: "";

    position: absolute;

    width: 550px;
    height: 550px;

    right: -280px;
    bottom: 100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,210,28,0.06),
            transparent 68%
        );

    pointer-events: none;
}



.student-account-container {

    position: relative;

    z-index: 2;

    width:
        min(
            1240px,
            calc(100% - 50px)
        );

    margin:
        0 auto;
}



.student-account-header {

    max-width: 850px;

    margin:
        0 auto 70px;

    text-align: center;
}


.student-account-eyebrow {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    color:
        var(--sas-blue);

    font-size:
        0.63rem;

    font-weight:
        850;

    letter-spacing:
        0.2em;
}


.student-account-eyebrow span {

    width: 34px;

    height: 2px;

    background:
        var(--sas-gold);
}


.student-account-header h2 {

    margin-top: 20px;

    font-family:
        var(--font-heading);

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

    line-height: 0.95;

    letter-spacing: -0.07em;

    font-weight: 850;
}


.student-account-header h2 span {

    display: block;

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


.student-account-header > p {

    max-width: 720px;

    margin: 27px auto 0;

    color:
        var(--sas-text);

    font-size: 0.98rem;

    line-height: 1.85;
}


.student-account-header strong {

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



.tsaphah-setup-notice {

    position: relative;

    display: grid;

    grid-template-columns: 85px 1fr;

    gap: 30px;

    padding: 42px 45px;

    margin-bottom: 55px;

    overflow: hidden;

    border:
        1px solid
        rgba(8,119,209,0.13);

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #f8fbff,
            #ffffff
        );

    box-shadow:
        0 25px 65px
        rgba(2,17,40,0.065);
}


.tsaphah-setup-notice::after {

    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    right: -110px;
    top: -120px;

    border-radius: 50%;

    background:
        rgba(255,210,28,0.09);

    filter: blur(5px);

    pointer-events: none;
}


.tsaphah-notice-icon {

    position: relative;

    z-index: 2;

    width: 78px;
    height: 78px;

    display: flex;

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

    border-radius: 22px;


    background:white;

    box-shadow:
        0 15px 35px
        rgba(8,119,209,0.22);

    font-size: 1.6rem;
}

  .tsaphah-notice-icon img {
      width:75px;
      height:75px;
  }
  
.tsaphah-notice-copy {

    position: relative;

    z-index: 2;
}


.student-account-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color:
        var(--sas-blue);

    font-size:
        0.59rem;

    font-weight:
        850;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;
}


.student-account-label i {

    color:
        var(--sas-gold);
}


.tsaphah-notice-copy h3 {

    margin-top: 10px;

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.7rem
        );

    line-height: 1;

    letter-spacing:
        -0.055em;
}


.tsaphah-notice-copy h3 span {

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


.tsaphah-notice-copy p {

    max-width: 850px;

    margin-top: 17px;

    color:
        var(--sas-text);

    font-size:
        0.88rem;

    line-height:
        1.8;
}


.tsaphah-warning {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-top: 22px;

    padding: 14px 17px;

    border-radius: 13px;

    color:
        #775d00;

    background:
        rgba(255,210,28,0.11);

    font-size:
        0.73rem;

    line-height:
        1.6;
}


.tsaphah-warning i {

    margin-top: 3px;

    color:
        #c59b00;
}



.os-selector {

    display: grid;

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

    gap: 18px;

    margin-bottom: 22px;
}


.os-card {

    position: relative;

    display: flex;

    align-items: center;

    gap: 16px;

    width: 100%;

    padding: 22px 23px;

    border:
        1px solid
        rgba(6,56,111,0.09);

    border-radius: 20px;

    background:
        #ffffff;

    color:
        var(--sas-navy);

    box-shadow:
        0 12px 35px
        rgba(5,42,83,0.055);

    cursor: pointer;

    text-align: left;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}


.os-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(8,119,209,0.22);

    box-shadow:
        0 18px 45px
        rgba(5,42,83,0.09);
}


.os-card.active {

    border-color:
        var(--sas-blue);

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

    box-shadow:
        0 18px 48px
        rgba(8,119,209,0.13);
}


.os-card-icon {

    width: 50px;
    height: 50px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 15px;

    color:
        var(--sas-blue);

    background:
        rgba(8,119,209,0.08);

    font-size: 1.35rem;

    transition:
        transform 0.3s ease;
}


.os-card.active .os-card-icon {

    color: white;

    background:
        linear-gradient(
            145deg,
            var(--sas-blue),
            var(--sas-navy-light)
        );

    transform:
        scale(1.06);
}


.os-card-content {

    display: flex;

    flex-direction: column;

    gap: 4px;

    min-width: 0;
}


.os-card-content strong {

    font-size:
        0.9rem;

    font-weight:
        800;
}


.os-card-content small {

    color:
        var(--sas-muted);

    font-size:
        0.62rem;
}


.os-card-arrow {

    margin-left: auto;

    color:
        var(--sas-muted);

    transition:
        transform 0.35s ease,
        color 0.3s ease;
}


.os-card.active .os-card-arrow {

    color:
        var(--sas-blue);

    transform:
        rotate(180deg);
}



.os-instructions {

    display: none;

    padding: 48px 50px;

    margin-bottom: 55px;

    border:
        1px solid
        rgba(6,56,111,0.09);

    border-radius: 28px;

    background:
        #ffffff;

    box-shadow:
        0 25px 70px
        rgba(2,17,40,0.075);

    animation:
        setupPanelIn 0.45s
        ease both;
}


.os-instructions.active {

    display: block;
}


@keyframes setupPanelIn {

    from {

        opacity: 0;

        transform:
            translateY(12px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}



.instructions-heading {

    display: flex;

    align-items: flex-start;

    gap: 22px;

    padding-bottom: 35px;

    margin-bottom: 5px;

    border-bottom:
        1px solid
        rgba(6,56,111,0.07);
}


.instruction-platform-icon {

    width: 65px;
    height: 65px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 18px;

    color: white;

    font-size: 1.55rem;
}


.instruction-platform-icon.windows {

    background:
        linear-gradient(
            145deg,
            #0877d1,
            #063a7e
        );
}


.instruction-platform-icon.macos {

    background:
        linear-gradient(
            145deg,
            #252a31,
            #07090d
        );
}


.instruction-platform-icon.chromeos {

    background:
        linear-gradient(
            145deg,
            #22a65a,
            #0877d1
        );
}


.instruction-kicker {

    display: block;

    color:
        var(--sas-blue);

    font-size:
        0.58rem;

    font-weight:
        850;

    letter-spacing:
        0.17em;
}


.instructions-heading h3 {

    margin-top: 7px;

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.8rem
        );

    line-height: 1;

    letter-spacing:
        -0.055em;
}


.instructions-heading h3 span {

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


.instructions-heading p {

    max-width: 760px;

    margin-top: 12px;

    color:
        var(--sas-text);

    font-size:
        0.82rem;

    line-height:
        1.75;
}



.instruction-steps {

    position: relative;

    padding-top: 20px;
}


.instruction-step {

    position: relative;

    display: grid;

    grid-template-columns: 58px 1fr;

    gap: 22px;

    padding: 25px 0;

    border-bottom:
        1px solid
        rgba(6,56,111,0.065);
}


.instruction-step:last-child {

    border-bottom:
        0;
}


.step-number {

    width: 48px;
    height: 48px;

    display: flex;

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

    border-radius: 15px;

    color:
        var(--sas-blue);

    background:
        rgba(8,119,209,0.075);

    font-size:
        0.66rem;

    font-weight:
        850;

    letter-spacing:
        0.04em;
}


.step-copy h4 {

    color:
        var(--sas-navy);

    font-family:
        var(--font-heading);

    font-size:
        1.02rem;

    font-weight:
        800;
}


.step-copy p {

    max-width: 820px;

    margin-top: 8px;

    color:
        var(--sas-text);

    font-size:
        0.78rem;

    line-height:
        1.75;
}


.step-copy strong {

    color:
        var(--sas-navy);

    font-weight:
        800;
}



.path-box {

    display: inline-flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 12px;

    padding: 10px 14px;

    border-radius: 10px;

    color:
        var(--sas-blue);

    background:
        #f3f8fd;

    border:
        1px solid
        rgba(8,119,209,0.09);

    font-size:
        0.67rem;

    font-weight:
        750;
}


.path-box i {

    color:
        var(--sas-gold);
}


.path-box i.fa-chevron-right {

    color:
        var(--sas-muted);

    font-size:
        0.55rem;
}



.setup-tip {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    max-width: 760px;

    margin-top: 13px;

    padding: 12px 14px;

    border-left:
        3px solid
        var(--sas-gold);

    border-radius: 0 10px 10px 0;

    color:
        var(--sas-text);

    background:
        rgba(255,210,28,0.065);

    font-size:
        0.68rem;

    line-height:
        1.65;
}


.setup-tip i {

    margin-top: 3px;

    color:
        #bd9300;
}



.instruction-complete {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 25px;

    padding: 16px 18px;

    border-radius: 14px;

    color:
        #176b3c;

    background:
        rgba(30,150,85,0.07);

    border:
        1px solid
        rgba(30,150,85,0.11);
}


.instruction-complete > i {

    font-size:
        1.15rem;
}


.instruction-complete div {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.instruction-complete strong {

    font-size:
        0.72rem;
}


.instruction-complete span {

    font-size:
        0.63rem;

    color:
        #527463;
}



.device-requirements {

    padding: 52px;

    margin-bottom: 45px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            var(--sas-navy),
            #063a7e
        );

    color: white;

    box-shadow:
        0 30px 80px
        rgba(2,17,40,0.14);
}


.device-requirements-header {

    display: flex;

    align-items: flex-start;

    gap: 23px;

    margin-bottom: 38px;
}


.requirements-icon {

    width: 65px;
    height: 65px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 18px;

    color:
        var(--sas-navy);

    background:
        var(--sas-gold);

    font-size:
        1.35rem;
}


.device-requirements .student-account-label {

    color:
        var(--sas-gold);
}


.device-requirements-header h3 {

    margin-top: 7px;

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.8rem
        );

    line-height: 1;

    letter-spacing:
        -0.055em;
}


.device-requirements-header h3 span {

    color:
        var(--sas-gold);
}


.device-requirements-header p {

    max-width: 700px;

    margin-top: 12px;

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

    font-size:
        0.8rem;

    line-height:
        1.75;
}



.requirements-grid {

    display: grid;

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

    gap: 12px;
}


.requirement-item {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding: 18px;

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

    border-radius: 15px;

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

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


.requirement-item:hover {

    transform:
        translateY(-3px);

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


.requirement-item > i {

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 10px;

    color:
        var(--sas-gold);

    background:
        rgba(255,210,28,0.1);
}


.requirement-item div {

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.requirement-item strong {

    font-size:
        0.72rem;

    color:
        white;
}


.requirement-item span {

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

    font-size:
        0.64rem;

    line-height:
        1.65;
}



.device-lease {

    position: relative;

    display: grid;

    grid-template-columns: 95px 1fr;

    gap: 28px;

    padding: 48px 52px;

    overflow: hidden;

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

    border-radius: 30px;

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

    box-shadow:
        0 25px 65px
        rgba(5,42,83,0.08);
}


.lease-glow {

    position: absolute;

    width: 320px;
    height: 320px;

    right: -150px;
    bottom: -170px;

    border-radius: 50%;

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

    filter:
        blur(25px);

    pointer-events: none;
}


.lease-icon {

    position: relative;

    z-index: 2;

    width: 85px;
    height: 85px;

    display: flex;

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

    border-radius: 23px;

    color:
        var(--sas-navy);

    background:
        var(--sas-gold);

    box-shadow:
        0 15px 35px
        rgba(255,210,28,0.24);

    font-size:
        1.65rem;
}


.lease-copy {

    position: relative;

    z-index: 2;
}


.lease-copy .student-account-label {

    color:
        #9a7600;
}


.lease-copy h3 {

    margin-top: 9px;

    font-family:
        var(--font-heading);

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

    line-height:
        0.98;

    letter-spacing:
        -0.06em;
}


.lease-copy h3 span {

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


.lease-copy p {

    max-width: 820px;

    margin-top: 15px;

    color:
        var(--sas-text);

    font-size:
        0.8rem;

    line-height:
        1.8;
}


.lease-copy strong {

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


.device-lease-button {

    display: inline-flex;

    align-items: center;

    gap: 13px;

    margin-top: 23px;

    padding: 13px 18px;

    border-radius: 12px;

    color: white;

    background:
        var(--sas-navy);

    font-size:
        0.68rem;

    font-weight:
        800;

    text-decoration: none;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}


.device-lease-button:hover {

    transform:
        translateY(-3px);

    background:
        var(--sas-blue);

    box-shadow:
        0 12px 25px
        rgba(8,119,209,0.18);
}


.student-account-support {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    max-width: 850px;

    margin: 35px auto 0;

    text-align: center;

    justify-content: center;

    color:
        var(--sas-muted);

    font-size:
        0.68rem;

    line-height:
        1.7;
}


.student-account-support > i {

    margin-top: 3px;

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


.student-account-support p {

    max-width: 760px;
}


.student-account-support strong {

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



@media (max-width: 900px) {

    .student-account-setup {

        padding:
            90px 0 100px;
    }


    .student-account-container {

        width:
            calc(100% - 35px);
    }


    .os-selector {

        grid-template-columns:
            1fr;
    }


    .os-card {

        padding:
            18px 20px;
    }


    .os-instructions {

        padding:
            35px 28px;
    }


    .device-requirements {

        padding:
            38px 28px;
    }


    .requirements-grid {

        grid-template-columns:
            1fr;
    }


    .device-lease {

        grid-template-columns:
            75px 1fr;

        padding:
            38px 28px;
    }


    .lease-icon {

        width: 65px;
        height: 65px;

        font-size:
            1.35rem;
    }

}


@media (max-width: 650px) {

    .student-account-header h2 {

        font-size:
            2.7rem;
    }


    .tsaphah-setup-notice {

        grid-template-columns:
            1fr;

        padding:
            30px 25px;
    }


    .tsaphah-notice-icon {

        width: 62px;
        height: 62px;

        border-radius: 17px;
    }


    .instructions-heading {

        flex-direction:
            column;

        gap: 16px;
    }


    .instruction-step {

        grid-template-columns:
            45px 1fr;

        gap: 15px;
    }


    .step-number {

        width: 42px;
        height: 42px;
    }


    .path-box {

        line-height:
            1.8;
    }


    .device-requirements-header {

        flex-direction:
            column;
    }


    .device-lease {

        grid-template-columns:
            1fr;
    }


    .lease-icon {

        width: 68px;
        height: 68px;
    }


    .student-account-support {

        text-align:
            left;

        justify-content:
            flex-start;
    }

}


@media (max-width: 450px) {

    .student-account-header h2 {

        font-size:
            2.35rem;
    }


    .os-instructions {

        padding:
            28px 20px;
    }


    .device-requirements {

        padding:
            32px 20px;
    }


    .device-lease {

        padding:
            32px 20px;
    }


    .requirements-grid {

        gap:
            9px;
    }

}


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

    .student-account-setup *,
    .student-account-setup *::before,
    .student-account-setup *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}