/* =========================================================
   FONTS
========================================================= */

@font-face {
    font-family: "DM Serif Display";
    src: url("../assets/fonts/DMSerifDisplay-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("../assets/fonts/Manrope-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("../assets/fonts/Manrope-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("../assets/fonts/Manrope-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("../assets/fonts/Manrope-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("../assets/fonts/IBMPlexMono-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("../assets/fonts/IBMPlexMono-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* =========================================================
   VARIABLES
========================================================= */

:root {
    --color-navy: #082a55;
    --color-blue: #0969e8;
    --color-blue-dark: #075bc8;

    --color-cream: #faf8f1;
    --color-cream-dark: #f4f0e6;

    --color-white: #ffffff;
    --color-text: #102f55;
    --color-text-dark: #071f43;
    --color-muted: #526782;

    --color-border: #dce1e6;
    --color-border-light: #e8e5dd;

    --font-serif: "DM Serif Display", serif;
    --font-sans: "Manrope", sans-serif;
    --font-mono: "IBM Plex Mono", monospace;

    --container-width: 1200px;
    --header-width: 1440px;

    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;

    --transition-fast: 0.2s ease;
}

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

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

html {
    scroll-behavior: smooth;
}

body {
    min-width: 320px;

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

    color: var(--color-text);

    background: var(--color-cream);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    display: block;

    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

a {
    color: inherit;

    text-decoration: none;
}

svg {
    display: block;

    width: 100%;
    height: 100%;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================
   SHARED CONTAINER
========================================================= */

.container {
    width: min(calc(100% - 60px), var(--container-width));

    margin-inline: auto;
}

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

.site-header {
    position: relative;

    z-index: 20;

    background: #fffdf8;

    border-bottom: 1px solid #eee9df;
}

.header-container {
    width: min(calc(100% - 116px), var(--header-width));

    height: 10vh;

    display: flex;

    align-items: center;
}

/* =========================================================
   LOGO
========================================================= */

.site-logo {
    display: inline-flex;

    align-items: center;

    flex-shrink: 0;
}

.site-logo img {
    width: 124px;

    height: auto;
}

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

.main-navigation {
    display: flex;

    align-items: center;

    gap: 42px;

    margin-left: auto;

    margin-right: 45px;
}

.nav-link {
    display: flex;

    align-items: baseline;

    gap: 4px;

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

    font-size: 14px;

    font-weight: 600;

    white-space: nowrap;

    transition: color var(--transition-fast);
}

.nav-link:hover {
    color: var(--color-blue);
}

.nav-link-icon {
    width: 14px;

    height: 14px;

    padding-top: 10px;

    display: inline-flex;

    align-items: center;

    justify-content: center;
}

.nav-link-icon img {
    height: 10px;

    rotate: 90deg;
}

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

.header-actions {
    display: flex;

    align-items: center;

    gap: 12px;
}

.login-link {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 44px;

    padding: 0 22px;

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

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

    color: var(--color-navy);

    font-size: 14px;

    font-weight: 600;

    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}

.login-link:hover {
    color: var(--color-white);

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

/* =========================================================
   MOBILE MENU
========================================================= */

.mobile-menu-button {
    display: none;

    width: 42px;
    height: 42px;

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

    margin-left: auto;

    padding: 8px;

    color: var(--color-navy);

    background: transparent;

    border: 0;
}

.mobile-menu-button svg {
    width: 25px;
    height: 25px;
}

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

.button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 46px;

    padding: 0 25px;

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

    font-size: 14px;

    font-weight: 700;

    white-space: nowrap;

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

.button:hover {
    transform: translateY(-1px);
}

/* Primary */

.button-primary {
    color: var(--color-white);

    background: var(--color-blue);

    border: 1px solid var(--color-blue);
}

.button-primary:hover {
    background: var(--color-blue-dark);

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

/* Secondary */

.button-secondary {
    color: var(--color-navy);

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

    border: 1px solid var(--color-blue);
}

.button-secondary:hover {
    background: var(--color-white);
}

/* Button arrow */

.button-icon {
    width: 18px;

    height: 18px;

    flex-shrink: 0;
}

/* Play icon */

.button-play-icon {
    width: 22px;
    height: 22px;

    display: inline-flex;

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

    flex-shrink: 0;

    border-radius: 50%;

    color: var(--color-white);

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

.button-play-icon svg {
    width: 11px;
    height: 11px;

    fill: currentColor;

    stroke: none;

    transform: translateX(1px);
}

/* Header CTA */

.button-header {
    min-height: 44px;

    padding-inline: 22px;
}

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

.hero-section {
    position: relative;

    height: 90vh;

    overflow: hidden;

    background: #f8f4e9;
}

/* =========================================================
   HERO IMAGE — DESKTOP
========================================================= */

.hero-image {
    position: absolute;

    inset: 0;

    z-index: 1;

    width: 100%;
    height: 100%;
}

.hero-image img {
    width: 100%;
    height: 100%;

    /* max-width: none; */

    object-fit: cover;

    object-position: bottom;
}

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

.hero-content {
    position: relative;

    z-index: 3;

    width: 55%;

    max-width: 650px;
    /* margin-left: 30px; */
    /* padding-top: 85px; */
}

/* =========================================================
   EYEBROW
========================================================= */

.section-eyebrow {
    margin-bottom: 18px;

    color: #0055a9;

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

    font-size: 11px;

    font-weight: 500;

    letter-spacing: 2px;

    line-height: 1.4;
}

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

.hero-section h1 {
    margin-bottom: 24px;

    color: var(--color-navy);

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

    font-size: clamp(48px, 5vw, 67px);

    font-weight: 400;

    line-height: 0.99;

    letter-spacing: -1px;
}

.hero-description {
    max-width: 475px;

    margin-bottom: 28px;

    color: #17395e;

    font-size: 17px;

    line-height: 1.55;
}

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

.hero-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 32px;
}

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

.hero-trust {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 25px;
}

.trust-item {
    display: flex;

    align-items: center;

    gap: 7px;

    color: #17395e;

    font-size: 11px;

    font-weight: 600;

    white-space: nowrap;
}

.trust-icon {
    width: 18px;
    height: 18px;

    display: inline-flex;

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

    flex-shrink: 0;

    border-radius: 50%;

    color: var(--color-white);

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

.trust-icon svg {
    width: 11px;
    height: 11px;
}

/* =========================================================
   FEATURES
========================================================= */

.features-section {
    padding: 68px 0 45px;
}

/* =========================================================
   SECTION HEADING
========================================================= */

.section-heading {
    max-width: 850px;

    margin: 0 auto 40px;

    text-align: center;
}

.section-heading h2 {
    margin-bottom: 14px;

    color: var(--color-navy);

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

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

    font-weight: 400;

    line-height: 1.05;
}

.section-heading p {
    max-width: 680px;

    margin-inline: auto;

    color: var(--color-muted);

    font-size: 16px;

    line-height: 1.5;
}

/* =========================================================
   FEATURES GRID
========================================================= */

.features-grid {
    display: grid;

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

    gap: 18px;
}

/* =========================================================
   FEATURE CARD
========================================================= */

.feature-card {
    position: relative;

    min-height: 145px;

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 20px;

    overflow: hidden;

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

    border: 1px solid #e5e1d8;

    border-radius: 12px;

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

.feature-card:hover {
    background: rgba(255, 255, 255, 0.65);

    border-color: #d3d8de;

    transform: translateY(-2px);
}

/* =========================================================
   FEATURE IMAGE
========================================================= */

.feature-image {
    width: 105px;
    height: 105px;

    display: flex;

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

    flex: 0 0 105px;
}

.feature-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

/* =========================================================
   FEATURE CONTENT
========================================================= */

.feature-content {
    min-width: 0;

    padding-right: 25px;
}

.feature-content h3 {
    margin-bottom: 5px;

    color: var(--color-navy);

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

    font-size: 20px;

    font-weight: 400;

    line-height: 1.2;
}

.feature-content p {
    color: var(--color-muted);

    font-size: 13px;

    line-height: 1.45;
}

/* =========================================================
   FEATURE LINK
========================================================= */

.feature-link {
    position: absolute;

    right: 14px;
    bottom: 13px;

    width: 28px;
    height: 28px;

    display: flex;

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

    color: var(--color-navy);

    border: 1px solid #ccd3d9;

    border-radius: 50%;

    transition:
        color var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast);
}

.feature-link svg {
    width: 15px;
    height: 15px;
}

.feature-link:hover {
    color: var(--color-white);

    background: var(--color-blue);

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

/* =========================================================
   TRUSTED BY
========================================================= */

.trusted-section {
    padding: 20px 0 45px;
}

/* =========================================================
   TRUSTED LABEL
========================================================= */

.mono-label {
    margin-bottom: 25px;

    color: #075579;

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

    font-size: 10px;

    font-weight: 400;

    letter-spacing: 2px;

    line-height: 1.4;

    text-align: center;
}

/* =========================================================
   SCHOOL LOGOS
========================================================= */

.school-logos {
    display: flex;

    align-items: center;
}

.school-logo {
    min-height: 45px;

    flex: 1;

    display: flex;

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

    gap: 9px;

    padding-inline: 12px;

    color: var(--color-navy);

    font-family: Georgia, serif;

    font-size: 15px;

    line-height: 1.05;

    text-align: left;

    border-right: 1px solid #d9d7d0;
}

.school-logo:last-child {
    border-right: 0;
}

/* School logo mark */

.school-logo-mark {
    width: 35px;
    height: 35px;

    display: flex;

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

    flex-shrink: 0;

    color: var(--color-navy);

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

    font-size: 10px;

    font-weight: 700;

    letter-spacing: -0.5px;

    border: 1.5px solid currentColor;

    border-radius: 50%;
}

.school-logo-name {
    display: flex;

    flex-direction: column;

    gap: 2px;
}

.school-logo-name small {
    font-size: 10px;

    font-weight: 400;
}

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

.cta-section {
    position: relative;

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

    min-height: 480px;

    margin: 0 auto 28px;

    overflow: hidden;

    border-radius: var(--radius-xl);
}

/* =========================================================
   CTA IMAGE
========================================================= */

.cta-image {
    position: absolute;

    inset: 0;

    z-index: 1;

    width: 100%;
    height: 100%;
}

.cta-image img {
    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;

    object-position: center;
}

/* =========================================================
   CTA OVERLAY
========================================================= */

.cta-overlay {
    position: absolute;

    inset: 0;

    z-index: 2;

    background: linear-gradient(
        90deg,
        rgba(250, 248, 241, 0.97) 0%,
        rgba(250, 248, 241, 0.91) 25%,
        rgba(250, 248, 241, 0.5) 43%,
        rgba(250, 248, 241, 0.08) 62%,
        transparent 76%
    );
}

/* =========================================================
   CTA CONTENT
========================================================= */

.cta-container {
    position: relative;

    z-index: 3;

    min-height: 480px;

    display: flex;

    align-items: center;
}

.cta-content {
    width: 48%;

    padding-left: 50px;
}

.cta-content h2 {
    margin-bottom: 20px;

    color: var(--color-navy);

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

    font-size: clamp(42px, 4vw, 49px);

    font-weight: 400;

    line-height: 1.03;

    letter-spacing: -0.5px;
}

.cta-description {
    max-width: 400px;

    margin-bottom: 28px;

    color: #294764;

    font-size: 14px;

    line-height: 1.55;
}

/* =========================================================
   CTA ACTIONS
========================================================= */

.cta-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;
}

.cta-actions .button-secondary {
    background: rgba(255, 255, 255, 0.86);
}

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

.site-footer {
    padding: 0 0 28px;
}

.footer-container {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    color: var(--color-navy);

    font-size: 11px;
}

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

.footer-brand {
    display: flex;

    align-items: center;

    gap: 18px;

    flex-shrink: 0;
}

.footer-logo {
    display: inline-flex;
}

.footer-logo img {
    width: 95px;
    height: auto;
}

.footer-tagline {
    padding-left: 15px;

    color: #174c87;

    border-left: 1px solid #d8d8d2;
}

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

.footer-navigation {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 27px;
}

.footer-navigation a {
    font-weight: 500;

    transition: color var(--transition-fast);
}

.footer-navigation a:hover {
    color: var(--color-blue);
}

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

.footer-meta {
    display: flex;

    align-items: center;

    gap: 16px;

    flex-shrink: 0;
}

.social-links {
    display: flex;

    align-items: center;

    gap: 10px;
}

.social-links a {
    width: 26px;
    height: 26px;

    display: flex;

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

    color: var(--color-navy);

    border-radius: 50%;

    transition:
        color var(--transition-fast),
        background var(--transition-fast);
}

.social-links a:hover {
    color: var(--color-white);

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

.social-links svg {
    width: 15px;
    height: 15px;
}

.copyright {
    white-space: nowrap;
}

/* =========================================================
   For Large PC onyly
========================================================= */

@media (min-width: 1200px) {
    .hero-section {
        display: flex;
        align-items: center;
    }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1300px) {
    .hero-content {
        margin-left: 30px;
    }
}
@media (max-width: 1200px) {
    .header-container {
        width: calc(100% - 60px);
    }

    .main-navigation {
        gap: 22px;

        margin-right: 20px;
    }

    .hero-trust {
        width: 350px;
    }

    .hero-content {
        width: 68%;
        padding-top: 70px;
    }

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

    .cta-content {
        width: 52%;

        padding-left: 40px;
    }

    .footer-container {
        flex-wrap: wrap;
    }
}

/* =========================================================
   MOBILE — 768px
========================================================= */

@media (max-width: 768px) {
    /* =====================================================
       SHARED
    ====================================================== */

    .container {
        width: calc(100% - 36px);
    }

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

    .header-container {
        width: 100%;

        height: 65px;

        padding-inline: 18px;
    }

    .site-logo img {
        width: 105px;
    }

    .main-navigation,
    .header-actions {
        display: none;
    }

    .mobile-menu-button {
        display: inline-flex;
    }

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

       DESKTOP:
       image = full background

       MOBILE:
       content
       ↓
       image
    ====================================================== */

    .hero-section {
        min-height: 90vh;

        display: flex;

        flex-direction: column;

        overflow: hidden;

        background: #f8f4e9;
    }

    /* Image becomes normal document content */

    .hero-image {
        position: relative;
        order: 2;

        width: 100%;
        height: auto;

        z-index: 1;
    }

    .hero-image img {
        width: 100%;
        height: auto;

        max-width: none;
        scale: 0.8;
        object-fit: contain;
        object-position: bottom;
    }

    /* Hero text */

    .hero-container {
        display: flex;
        justify-content: center;
        /* margin-left:30px */
    }

    .hero-content {
        position: relative;

        order: 1;

        width: 90%;

        max-width: none;

        padding: 48px 24px 0px;

        z-index: 3;

        text-align: left;
    }

    /* Eyebrow */

    .section-eyebrow {
        margin-bottom: 15px;

        font-size: 9px;

        letter-spacing: 1.7px;
    }

    /* Hero title */

    .hero-section h1 {
        margin-bottom: 20px;

        font-size: clamp(40px, 11vw, 54px);

        line-height: 1;

        letter-spacing: -0.5px;
    }

    /*
        Desktop line breaks should not force
        awkward mobile wrapping.
    */

    .desktop-break {
        display: none;
    }

    /* Description */

    .hero-description {
        max-width: 390px;

        margin-bottom: 24px;

        font-size: 14px;

        line-height: 1.5;
    }

    /* Hero buttons */

    .hero-actions {
        align-items: stretch;

        gap: 10px;

        margin-bottom: 0;
    }

    .hero-actions .button {
        min-height: 43px;

        padding-inline: 17px;

        font-size: 13px;
    }

    /*
        Trust indicators are hidden on mobile
        to prevent the hero becoming too tall.
    */

    .hero-trust {
        display: none;
    }

    /* =====================================================
       FEATURES
    ====================================================== */

    .features-section {
        padding: 55px 0 30px;
    }

    .section-heading {
        margin-bottom: 30px;
    }

    .section-heading h2 {
        font-size: 37px;

        line-height: 1.04;
    }

    .section-heading p {
        font-size: 14px;

        line-height: 1.5;
    }

    .features-grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    /* Feature card */

    .feature-card {
        min-height: 125px;

        padding: 15px;

        gap: 15px;
    }

    .feature-image {
        width: 88px;
        height: 88px;

        flex-basis: 88px;
    }

    .feature-content {
        padding-right: 25px;
    }

    .feature-content h3 {
        font-size: 19px;
    }

    .feature-content p {
        font-size: 12px;
    }

    /* =====================================================
       TRUSTED BY
    ====================================================== */

    .trusted-section {
        padding: 25px 0 35px;
    }

    .mono-label {
        margin-bottom: 22px;

        font-size: 9px;

        letter-spacing: 1.7px;
    }

    .school-logos {
        display: grid;

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

        gap: 15px;
    }

    .school-logo {
        min-height: 45px;

        justify-content: flex-start;

        padding: 0 8px 12px;

        border-right: 0;

        border-bottom: 1px solid #ddd;
    }

    .school-logo:nth-last-child(-n + 1) {
        grid-column: 1 / -1;

        justify-content: center;
    }

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

       Mobile uses the portrait image as a full
       background with text positioned above it.
    ====================================================== */

    .cta-section {
        width: calc(100% - 30px);

        min-height: 760px;

        margin: 0 auto 20px;

        border-radius: 15px;
    }

    /* CTA image */

    .cta-image {
        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;
    }

    .cta-image img {
        width: 100%;
        height: 100%;

        max-width: none;

        object-fit: cover;

        object-position: center center;
    }

    /* CTA overlay */

    .cta-overlay {
        background: linear-gradient(
            180deg,
            rgba(250, 248, 241, 0.97) 0%,
            rgba(250, 248, 241, 0.92) 19%,
            rgba(250, 248, 241, 0.6) 34%,
            rgba(250, 248, 241, 0.12) 50%,
            transparent 65%
        );
    }

    /* CTA container */

    .cta-container {
        min-height: 760px;

        width: 100%;

        align-items: flex-start;
    }

    /* CTA content */

    .cta-content {
        width: 100%;

        padding: 45px 25px 0;
    }

    .cta-content h2 {
        margin-bottom: 20px;

        font-size: clamp(38px, 10vw, 47px);

        line-height: 1.02;
    }

    .cta-description {
        max-width: 360px;

        margin-bottom: 26px;

        font-size: 13px;

        line-height: 1.55;
    }

    .cta-actions {
        align-items: stretch;

        gap: 10px;
    }

    .cta-actions .button {
        min-height: 43px;

        padding-inline: 17px;

        font-size: 13px;
    }

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

    .site-footer {
        padding-bottom: 25px;
    }

    .footer-container {
        width: calc(100% - 40px);

        flex-direction: column;

        gap: 20px;

        text-align: center;
    }

    .footer-brand {
        flex-direction: column;

        gap: 10px;
    }

    .footer-logo img {
        width: 95px;
    }

    .footer-tagline {
        padding-left: 0;

        border-left: 0;
    }

    .footer-navigation {
        flex-wrap: wrap;

        gap: 15px;
    }

    .footer-meta {
        flex-direction: column;

        gap: 10px;
    }

    .copyright {
        white-space: normal;
    }
}

/* @media (max-width: 650px) {
    .hero-section {
        min-height: 100vh;
    }
} */
/* =========================================================
   SMALL PHONES — 480px
========================================================= */

@media (max-width: 480px) {
    /* =====================================================
       HEADER
    ====================================================== */

    .header-container {
        padding-inline: 15px;
    }

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

    .hero-container {
        display: flex;
        justify-content: center;
        margin-left: 0px;
    }

    .hero-content {
        padding: 40px 20px 0px;
        margin-top: 20px;
        width: 100%;
    }

    .hero-image {
        margin-top: 60px;
        scale: 1.3;
    }
    .hero-section h1 {
        font-size: 40px;

        line-height: 1;
    }

    .hero-description {
        font-size: 13px;
    }

    .hero-actions {
        gap: 8px;
    }

    .hero-actions .button {
        min-height: 41px;

        padding-inline: 14px;

        font-size: 12px;
    }

    /* =====================================================
       FEATURES
    ====================================================== */

    .features-section {
        padding-top: 48px;
    }

    .section-heading h2 {
        font-size: 34px;
    }

    .feature-card {
        padding: 13px;
    }

    .feature-image {
        width: 78px;
        height: 78px;

        flex-basis: 78px;
    }

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

    .cta-section {
        min-height: 700px;
    }

    .cta-container {
        min-height: 700px;
    }

    .cta-content {
        padding: 40px 22px 0;
    }

    .cta-content h2 {
        font-size: 38px;

        line-height: 1.02;
    }

    .cta-description {
        font-size: 12.5px;
    }

    .cta-actions {
        gap: 8px;
    }

    .cta-actions .button {
        min-height: 41px;

        padding-inline: 14px;

        font-size: 12px;
    }

    /* =====================================================
       TRUSTED LOGOS
    ====================================================== */

    .school-logo {
        font-size: 13px;
    }

    .school-logo-name small {
        font-size: 9px;
    }

    .school-logo-mark {
        width: 30px;
        height: 30px;

        font-size: 9px;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* =========================================================
   FOCUS STATES
========================================================= */

a:focus-visible,
button:focus-visible {
    outline: 3px solid rgba(9, 105, 232, 0.35);

    outline-offset: 3px;
}

/* @media (min-height:800px) {
    .hero-section {
        max-height: 600px;
        padding-bottom: 0px;
        margin-bottom: 0px;
    }
} */