/* ================================================================
   #Mobile — max-width: 992px
   Mobile and tablet share the same breakpoint
   ================================================================ */

@media (max-width: 992px) {

    /* ================================
       TYPOGRAPHY
       ================================ */
    body{
    font-size: 16px;
    }
    .desktop-hide {
        display: block;
    }
    .mobile-hide {
        display: none;
    }
    h1 {
        font-size: 38px;
        line-height: 110%;
        letter-spacing: -0.03em;
    }

    h2 {
        font-size: 32px;
        line-height: 110%;
        letter-spacing: -0.03em;
    }

    .h3 {
        font-size: 28px;
        line-height: 110%;
        letter-spacing: -0.01em;
    }

    .h4 {
        font-size: 24px;
        line-height: 120%;
        letter-spacing: 0;
    }

    .h5 {
        font-weight: 400;
        font-size: 20px;
        line-height: 130%;
        letter-spacing: -0.02em;
    }

    .h6 {
        font-weight: 500;
        font-size: 16px;
        line-height: 120%;
        letter-spacing: 0;
    }

    .eyebrow {
        font-size: 12px;
        line-height: 100%;
    }

    .para-large-medium {
        font-weight: 500;
        font-size: 16px;
        line-height: 140%;
    }

    .para-large {
        font-size: 16px;
        line-height: 150%;
    }

    .para-body {
        font-size: 16px;
        line-height: 150%;
    }

    .para-small {
        font-size: 14px;
        line-height: 140%;
    }

    .para-small-medium {
        font-size: 12px;
        line-height: 140%;
    }

    .para-small-link {
        font-size: 14px;
        line-height: 140%;
    }

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

    .site-header-inner {
        padding: 24px 0;
    }
    h1.top-section__title{
        margin-bottom: 24px;
    }
    /* ================================
       HERO / TOP SECTION
       ================================ */

    section.top-section {
        padding: 48px 0;
    }
    .top-section__text p {
        margin-bottom: 0px;
    }
    .top-section-inner {
        flex-direction: column;
        gap: 48px;
        align-items: flex-start;
    }
    .container{
        padding: 0 24px !important;
    }
    .mobile-top-section-left-form {
        width: 100%;
        text-align: center;
    }
    .mobile-top-section-left-form .wpcf7-not-valid-tip{
        text-align: center;
    }
    .mobile-top-section-left-form .custom-success{
        text-align: center;
    }
    .mobile-top-section-left-form input.wpcf7-form-control.wpcf7-email.wpcf7-text.wpcf7-validates-as-email{
        width: 100% !important;
    }
    .video__band{
        height: 112px;
    }
    .top-section-left {
        max-width: 100%;
        padding: 0;
        width: 100%;
    }

    .top-section-right {
        max-width: 100%;
        width: 100%;
    }

    .top-section__image img {
        width: 100%;
        height: auto;
        display: block;
    }
    .form-col p{
        flex-direction: column;
    }

    /* ================================
       VIDEO SECTION
       ================================ */

    .video-section__video video {
        height: auto;
    }
    section.video-section{
        padding: 0px 0px 48px 0px;
    }
    .video-player__play img{
        width: 18px;
        height: 18px;
    }
    /* Keep blocks in a row — allow wrapping on very small screens */
    .video-section__blocks {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 16px;
        padding-top: 32px;
        max-width: 100%;
        align-items: flex-start;
        flex-direction: column;
    }

    /* ================================
       BUILT BY EXPERTS
       ================================ */
       .built-by-experts{
        padding: 48px 0px;
       }
    .built-by-experts-inner-top {
        flex-direction: column;
        gap: 16px;
        padding-bottom: 40px;
    }

    .built-by-experts__text {
        max-width: 100%;
    }

    /* Card width sized so exactly 2 fit inside the container.
       Bootstrap container at ≤576px = 100vw − 24px padding total.
       2 cards + 1 gap(24px) = container: card = (100vw − 24px − 24px) / 2 */
    .built-by-experts-member-card {
        width: calc(50vw - 24px);
    }

    /* Phone: one centered card with peek of neighbours (desktop/tablet unchanged above 767px) */
    @media (max-width: 767px) {

        .built-by-experts-team-wrapper {
            overflow: visible;
        }

        .built-by-experts-member-card {
            width: calc(100vw - 72px);
        }

        .built-by-experts-arrows {
            justify-content: flex-start;
        }
        .built-by-experts-team{
            padding: 0px !important;
        }
    }

    /* ================================
       STRONG FOUNDATIONS
       ================================ */

    section.strong-foundations {
        padding: 48px 0;
    }

    .strong-foundations-inner {
        flex-direction: column;
        gap: 40px;
    }
    ul.strong-foundations__list{
        padding: 0px 16px;
    }
    h2.strong-foundations__title{
        margin-bottom: -8px;
    }
    .strong-foundations__copy {
        max-width: 100%;
        width: 100%;
        gap: 32px;
    }

    .strong-foundations__image {
        width: 100%;
    }

    .strong-foundations__image img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* ================================
       CALENDAR BOX
       ================================ */

    section.calendar-box {
        padding: 32px 0px;
    }

    .calendar-box-inner {
        flex-direction: column;
    }

    .calendar-box__image {
        min-width: unset;
        max-width: 100%;
        width: 100%;
        order: 2;
    }

    .calendar-box__image img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 8px 8px 0 0;
    }

    .calendar-box__content {
        padding: 32px;
        gap: 24px;
        order: 1;
    }

    /* ================================
       HOW IT WORKS
       ================================ */

    section.how-it-works {
        padding: 48px 0;
    }

    .how-it-works-inner {
        flex-direction: column;
        gap: 40px;
    }

    .how-it-works__copy {
        max-width: 100%;
        width: 100%;
        gap: 24px;
    }
    .how-it-works__copy ol{
        margin: 32px 0 0 0;
    }
    .how-it-works__copy ol li {
        counter-increment: steps;
        display: flex;
        align-items: center;
        gap: 16px;
        position: relative;
        margin-bottom: 36px;
        font-weight: 300;
    }

    .how-it-works__image {
        width: 100%;
    }

    .how-it-works__image img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* ================================
       SCHOOL CONTROLLED LEARNING
       ================================ */
       .school-controlled-learning__head {
        max-width: 327px;
        margin: 0 auto;
    }
    section.school-controlled-learning {
        padding: 48px 0px;
    }

    .school-controlled-learning__cards {
        grid-template-columns: repeat(1, 1fr);
        max-width: 100%;
    }

    .school-controlled-learning__card,
    .school-controlled-learning__card:nth-child(4),
    .school-controlled-learning__card:nth-child(5) {
        grid-column: span 1;
    }

    .school-controlled-learning__card {
        padding: 24px;
        flex-direction: row;
    }
    .school-controlled-learning__card-image{
        width: 40px;
        height: 40px;
    }
    .school-controlled-learning__card-image img{
        width: 40px;
        height: 40px;
    }
    .school-controlled-learning__card-title{
       font-size: 16px;
    }
    /* ================================
       THE IMPACT
       ================================ */

    section.the-impact {
        padding: 48px 0;
    }

    .the-impact__stair {
        position: static;
        width: 100%;
        height: auto;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .the-impact__card {
        position: static;
        width: 100%;
        height: auto;
        padding: 16px 16px 16px 24px;
        align-items: flex-start;
    }
    .the-impact__card-name {
        font-weight: 400;
        font-size: 20px;
        line-height: 1;
        letter-spacing: -0.015em;
        color: #132B39;
        margin: 0;
        padding-bottom: 6px;
    }
    .the-impact__card::after {
        display: none;
    }

    /* ================================
       SIGN UP SECTION
       ================================ */

    section.sign-up-section {
        padding: 0px 12px 48px 12px;
    }

    .sign-up-box {
        border-radius: 12px;
        height: 575px;
        vertical-align: middle;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .wpcf7-not-valid-tip{
        text-align: center;
    }
    .custom-success{
        text-align: center;
    }

    .sign-up-box__deco {
        width: 200px;
    }

    .sign-up-box__form .form-col,
    .sign-up-box__form p {
        flex-direction: column;
    }

    .sign-up-box__form input.wpcf7-form-control.wpcf7-email,
    .sign-up-box__form input[type="email"],
    .sign-up-box__form input[type="text"] {
        max-width: 100% !important;
        width: 100% !important;
    }

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

    footer {
        padding: 48px 0;
    }

    .site-footer-top {
        flex-direction: column;
        gap: 32px;
        align-items: flex-start;
    }

    .site-footer-bottom {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .site-footer-bottom-left {
        flex-direction: column;
        gap: 32px;
        align-items: flex-start;
    }
    .site-footer-bottom-left .para-small {
        font-size: 16px;
        line-height: 140%;
        order: 2;
    }

    .site-footer-bottom-left-links ul {
        gap: 8px;
        flex-direction: column;
    }

    .site-footer-bottom-divider hr {
        margin: 40px 0 24px;
    }
    .site-footer-bottom-right{
        margin-top: 32px;
    }
    footer .para-small-link{
        font-size: 16px;
        line-height: 140%;
    }
    
    .tos-top-box{
        padding: 64px 0px;
    }
    .tos-content{
        padding-bottom: 64px;
    }
}