/* ===================================================================
   main.css

   Generated. Every stylesheet under assets/css/<folder>/, concatenated in the
   order functions.php enqueued them - the cascade depends on it. Edit the source
   file and rebuild this one; anything typed here is lost. vendor.css and
   custom.css are not included and load before this.
   ===================================================================

   sections/
    1. Header
    2. Banner
    3. Driving Classes
    4. Flexible Financing
    5. Road / Timeline
    6. Success Stories
    7. Video Stories (Swiper)
    8. Stats
    9. Reviews
   10. Footer
   11. Audience
   12. Get Started Section
   13. Video & Popup
   14. FAQ
   15. CTA Section
   16. Easy Section
   17. Testimonial
   18. Thank You
   19. Error 404
   20. Search Results
   21. Endorse Tabs
   22. More Than a CDL School
   23. Site Map

   global/
   24. Gravity Forms
   25. Pages Nav
   26. Viewer.js Skin

   programs/
   27. Programs
   28. Training Options

   b2b/
   29. B2B Banner
   30. B2B Contact
   31. B2B Features
   32. B2B Plans

   b2b-landing/
   33. B2B Power
   34. B2B Services
   35. B2B Testimonial
   36. B2B App
   37. B2B Pipeline

   careers/
   38. Careers Benefits
   39. Careers Explore
   40. Careers Logos
   41. Careers Programs
   42. Careers Provider
   43. Careers Team

   cdl/
   44. Find School

   enroll/
   45. Enroll Banner

   listing/
   46. Blog Detail
   47. Blog Listing
   48. Similar Blogs

   locations/
   49. Vendor Location
   50. Locations
   51. Loc About
   52. Locmap
   53. Endorsements
   54. Partners
   55. Reviews
   56. School Info
   57. Student Say
   58. Why Choose

   map/
   59. Map Locator

   promotions/
   60. Promotions

   reviews-hub/
   61. Student Reviews
   62. Success Strip
   63. Review Detail
   64. Review Popup

   schools/
   65. Schools Map

   why/
   66. Why Advantages

   floating-cta/
   67. Agentforce Chat
   68. Floating CTA

   gallery/
   69. Gallery Grid
   =================================================================== */

/* 1. Header */
.header {
    /* Horizontal travel of the slanted edge; used by the orange block and the CTA divider. */
    --header-slant: 45px;
    /* the bar is full-bleed in the design — edge aligned, not container aligned */
    --header-edge: var(--sp30);

    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: var(--z-sticky);
    padding-inline: var(--sp25);

    /* ---------- sticky ---------- */
    /* .is-stuck is set by initStickyHeader() once the top bar scrolls past; landscape phones opt out. */
    &.is-stuck {
        position: fixed;
        inset-block-start: calc(var(--headertop, 0px) * -1);
        /* No fill mode: a translate here would make the header the containing block for its fixed children. */
        animation: header-drop .35s cubic-bezier(.2, .7, .3, 1);
        box-shadow: var(--shadow-lg);

        /* Same trap while the animation runs, so the drop-in steps aside for the panel. */
        &:has(.header__nav.is-open) {
            animation: none;
        }

        /* Fills the strips of page past each end of the bar, matching the colour that meets them. */
        &::before,
        &::after {
            content: "";
            position: absolute;
            inset-block: var(--headertop, 0px) 0;
            width: calc(var(--sp25) * 20);
            z-index: -1;
            pointer-events: none;
        }

        &::before {
            inset-inline-start: 0;
            background: var(--white);
        }

        &::after {
            inset-inline-end: 0;
            background: var(--gradient2);
        }

        & .header__topbar {
            visibility: hidden;
        }

        & .header__actions {
            border-left: 0;
        }
    }

    /* ---------- top bar ---------- */
    & .header__topbar {
        padding-block: var(--sp15);
        color: var(--white);
    }

    & .header__topbar-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp15);
        flex-wrap: wrap;
    }

    & .header__topbar-right {
        display: flex;
        align-items: center;
        gap: var(--sp30);
    }

    & .header__address,
    & .header__login {
        display: inline-flex;
        align-items: center;
        gap: var(--sp8);
        font-size: var(--f14);
        font-weight: 500;
        text-transform: uppercase;
        transition: var(--transition);

        path {
            transition: var(--transition);
        }

        &:hover {
            color: var(--orange);

            svg path {
                fill: currentColor;
            }
        }
    }

    & .header__phone {
        display: inline-flex;
        align-items: center;
        gap: var(--sp8);
        font-size: var(--f20);
        font-weight: 700;
        transition: var(--transition);

        path {
            transition: var(--transition);
        }

        &:hover {
            color: var(--orange);

            svg path {
                fill: currentColor;
            }
        }
    }

    & .header__topbar-icon {
        font-size: var(--f16);
    }

    /* ---------- main bar ---------- */
    & .header__main {
        display: flex;
        align-items: stretch;
    }

    /* White slanted bar; the slant sits on ::before so the dropdown is not clipped. */
    & .header__bar {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: var(--sp30);
        flex: 1 1 auto;
        min-width: 0;
        padding-block: var(--sp15);
        padding-inline: var(--sp15);

        &::before {
            content: "";
            position: absolute;
            inset-block: 0;
            inset-inline: 0 calc((var(--header-slant) + 1px) * -1);
            z-index: -1;
            background: var(--white);
            clip-path: polygon(0 0, 100% 0, calc(100% - var(--header-slant)) 100%, 0 100%);
        }
    }

    & .header__logo {
        flex: 0 0 auto;
        display: block;
    }

    & .header__logo-img {
        width: 175px;
        height: auto;

        @media (max-width:1899.98px) {
            width: 150px;
        }
    }

    /* ---------- navigation ---------- */
    & .header__nav {
        flex: 1 1 auto;
        min-width: 0;
    }

    & .header__menu {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: var(--sp20);
        list-style: none;

        @media (max-width:1899.98px) {
            gap: var(--sp15);
        }

    }

    & .header__item {
        position: relative;
    }

    /* Dropdown parents are a link plus a caret button, so the row gap is set here. */
    & .header__item--drop {
        display: flex;
        align-items: center;
        gap: var(--sp8);

        &:hover .header__link,
        &:hover .header__caret-btn {
            color: var(--orange);
        }
    }

    & .header__link {
        display: inline-flex;
        align-items: center;
        gap: var(--sp8);
        padding-block: var(--sp8);
        font-size: var(--f16);
        font-weight: 700;
        text-transform: uppercase;
        white-space: nowrap;
        color: var(--ink);
        background: none;
        border: 0;
        cursor: pointer;
        font-family: var(--font-montserrat);
        transition: var(--transition);
        letter-spacing: -0.5px;

        &[aria-current="page"],
        &:hover,
        &.is-active {
            color: var(--orange);

            svg path {
                fill: var(--orange);
            }
        }

        @media (max-width:1899.98px) {
            font-size: var(--f14);
        }

        @media (max-width:1639.98px) {
            font-size: 80%;
        }

        @media (max-width:1299.98px) {
            font-size: 75%;
        }
    }

    & .header__link--accent {
        color: var(--orange);
    }

    & .header__caret-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding-block: var(--sp8);
        background: none;
        border: 0;
        color: var(--ink);
        cursor: pointer;
        transition: var(--transition);
    }

    & .header__caret {
        flex: 0 0 auto;
        transition: var(--transition);

        @media (max-width:1899.98px) {
            width: 10px;
        }
    }

    & .header__item--drop.is-open .header__caret {
        transform: rotate(180deg);
    }

    /* ---------- dropdown ---------- */
    & .header__submenu {
        position: absolute;
        inset-block-start: calc(100% + var(--sp15) + var(--sp8));
        inset-inline-start: calc(var(--sp25) * -1);
        min-width: 290px;
        /* padding-block: var(--sp8); */
        box-shadow: var(--shadow-lg);
        list-style: none;
        background: var(--white);
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        /* Visibility flips instantly on open and only after the fade on close. */
        transition: opacity var(--ease), transform var(--ease), visibility 0s linear .25s;

        &::before {
            position: absolute;
            top: -28px;
            content: '';
            width: 100%;
            background: #ffffff00;
            height: 30px;
        }

        @media (max-width:1599.98px) {
            inset-block-start: calc(100% + var(--sp15) + 6px);
        }
    }

    & .header__item--drop:hover .header__submenu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity var(--ease), transform var(--ease), visibility 0s;
    }

    & .header__sublink {
        display: block;
        padding: var(--sp20) var(--sp25);
        font-size: var(--f16);
        font-weight: 700;
        text-transform: uppercase;
        color: var(--ink);
        transition: var(--transition);
        letter-spacing: -0.5px;

        &[aria-current="page"],
        &:hover,
        &.is-active {
            background: var(--orange);
            color: var(--white);

            svg path {
                fill: var(--white);
            }
        }

        @media (max-width:1899.98px) {
            font-size: var(--f14);
            padding: var(--sp15) var(--sp20);
        }

        @media (max-width:1639.98px) {
            font-size: 80%;
        }

        @media (max-width:1299.98px) {
            font-size: 75%;
        }
    }

    /* ---------- decorative stripes ---------- */
    /* The white sheet now runs into the slant, so the stripes are never painted. */
    & .header__stripes {
        display: none;
    }

    /* ---------- orange action block ---------- */
    & .header__actions {
        position: relative;
        isolation: isolate;
        display: flex;
        align-items: stretch;
        flex: 0 0 auto;
        border-left: 4px solid transparent;
        padding-inline-start: var(--sp25);
        background-color: var(--hero-dark);

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            background: var(--gradient2);
            clip-path: polygon(var(--header-slant) 0, 100% 0, 100% 100%, 0 100%);
        }
    }

    /* borderless full-height segments on the orange, split by a slanted hairline */
    & .header__cta {
        padding: 0 var(--sp30);
        background: none;
        border: 0;
        font-size: var(--f16);
        color: var(--white);

        @media (max-width:1899.98px) {
            font-size: var(--f14);
            padding: 0 var(--sp20);
        }

        @media (max-width:1639.98px) {
            font-size: 80%;
        }

        @media (max-width:1299.98px) {
            font-size: 75%;
        }

        &:hover,
        &:focus-visible {
            background: none;
            color: var(--white);
            opacity: .8;
        }

        &:focus-visible {
            outline: 2px solid var(--white);
            outline-offset: -8px;
        }

        /* the .btn-white filter would tint the icons orange in both states */
        & svg,
        &:hover svg {
            filter: var(--white-filter);
        }
    }

    & .header__cta+.header__cta {
        position: relative;

        /* clipped rather than skewed, so the hairline stays parallel to the block's slanted edge at every bar height */
        &::before {
            content: "";
            position: absolute;
            inset-block: 0;
            inset-inline-start: calc((var(--header-slant) / 2 + 1px) * -1);
            width: calc(var(--header-slant) + 2px);
            background: var(--white);
            opacity: .5;
            clip-path: polygon(calc(100% - 2px) 0, 100% 0, 2px 100%, 0 100%);
        }
    }

    /* ---------- mobile toggle / off-canvas chrome (hidden on desktop) ---------- */
    & .header__toggle {
        display: none;
        flex: 0 0 auto;
        margin-inline-start: auto;
        padding: var(--sp8);
        line-height: 1;
        color: var(--ink);
        background: none;
        border: 0;
        cursor: pointer;
        transition: var(--transition);

        &:hover,
        &:focus-visible {
            color: var(--orange);
        }
    }

    & .header__nav-head,
    & .header__nav-cta,
    & .header__backdrop {
        display: none;
    }
}


/* HEADER section responsive css */
/* tightest desktop tier — six nav labels + both CTAs still fit down to 1366px */
@media (max-width: 1599.98px) {
    .header {
        --header-slant: 30px;
        --header-edge: var(--sp20);

        & .header__logo-img {
            width: 130px;
        }

        & .header__bar {
            gap: var(--sp25);
        }


        & .header__actions {
            padding-inline-start: var(--sp20);
        }

        & .header__cta {
            padding: 0 12px;
        }
    }
}

@media (max-width: 1439.98px) {
    .header {

        /* the labels no longer fit beside the nav — the CTAs run icon-only */
        & .header__cta {
            font-size: 0;
            gap: 0;
            width: 60px;
        }

        & .header__actions {
            padding-inline-start: 0;
            background: var(--gradient2);
            border: 0;

        }

        & .header__actions {
            &::before {
                content: none;
            }
        }

        & .header__bar {
            background: #fff;

            &::before {
                content: none
            }
        }

        & .header__cta {
            &.btn-icon {
                & svg {
                    position: absolute;

                }
            }
        }

        & .header__cta+.header__cta {
            border-left: 1px solid #edb59c;

            &::before {
                content: none;
            }

            &.btn-icon {
                & svg {
                    position: absolute;
                }
            }
        }
    }
}

@media (max-width: 1199.98px) {
    .header {
        & .header__link {
            font-size: 0.96vw;
        }
    }
}

/* the slant is dropped here — both blocks become plain rectangles */
@media (max-width: 1099.98px) {
    .header {
        & .header__bar {
            padding-inline: 10px 10px;

            &::before {
                inset-inline-end: 0;
                clip-path: none;
            }
        }

        & .header__actions {
            padding-inline-start: 10px;

            &::before {
                background: var(--orange);
                clip-path: none;
            }
        }

        & .header__cta+.header__cta::before {
            inset-inline-start: -1px;
            width: 2px;
            clip-path: none;
        }
    }
}

/* below this width the six nav labels no longer fit — collapse to a menu panel */
@media (max-width: 1199.98px) {
    .header {
        --header-slant: 0px;
        --header-edge: var(--gutter);
        padding-inline: 0;
        /* Two solid rows sit in the flow instead of overlaying the banner, so no offset is needed. */

        /* The bar spans the full width here, so no strip is left for the two fills to cover. */
        &.is-stuck {

            &::before,
            &::after {
                content: none;
            }

        }

        & .header__bar {
            padding-inline: 20px 10px;
        }

        & .header__topbar {
            padding-inline: 20px;
            background: var(--hero-dark);
        }

        & .header__main {
            flex-wrap: wrap;
        }

        & .header__logo-img {
            width: 175px;
        }

        & .header__toggle {
            display: block;
        }

        /* nav slides in from the right as an off-canvas panel */
        & .header__nav {
            position: fixed;
            inset-block: 0;
            inset-inline-end: 0;
            z-index: var(--z-drop);
            display: flex;
            flex-direction: column;
            width: 340px;
            max-width: 85%;
            padding: 0;
            background: var(--white);
            box-shadow: var(--shadow-lg);
            overflow-y: auto;
            overscroll-behavior: contain;
            visibility: hidden;
            transform: translateX(100%);
            /* Visibility flips instantly on open and only after the slide on close. */
            transition: transform var(--ease-out), visibility 0s linear .3s;
        }

        & .header__nav.is-open {
            visibility: visible;
            transform: translateX(0);
            transition: transform var(--ease-out), visibility 0s;
        }

        /* panel header — logo + close button */
        & .header__nav-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--sp15);
            flex: 0 0 auto;
            padding: var(--sp15) var(--sp20);
            border-bottom: 1px solid var(--line);
        }

        & .header__nav-logo-img {
            display: block;
            width: 140px;
            height: auto;
        }

        & .header__close {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            padding: 0;
            background: none;
            border: 0;
            color: var(--ink);
            cursor: pointer;
            transition: var(--transition);

            &:hover,
            &:focus-visible {
                color: var(--orange);
            }
        }

        /* dim the page behind the panel */
        & .header__backdrop {
            position: fixed;
            inset: 0;
            z-index: var(--z-sticky);
            display: block;
            background: var(--overlay);
            opacity: 0;
            visibility: hidden;
            transition: opacity var(--ease), visibility 0s linear .25s;
        }

        & .header__backdrop.is-open {
            opacity: 1;
            visibility: visible;
            transition: opacity var(--ease), visibility 0s;
        }

        & .header__menu {
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
            gap: 0;
            padding-block-end: var(--sp25);
        }

        & .header__item {
            border-bottom: 1px solid var(--line);
        }

        & .header__link {
            width: 100%;
            justify-content: space-between;
            padding-block: var(--sp15);
            padding-inline: var(--sp20);
            font-size: var(--f16);
        }

        /* label on the left, caret button as the right-hand tap target, submenu wrapping onto its own row underneath */
        & .header__item--drop {
            flex-wrap: wrap;
            gap: 0;

            &>.header__link {
                width: auto;
                flex: 1 1 auto;
            }
        }

        & .header__caret-btn {
            flex: 0 0 auto;
            padding-block: var(--sp15);
            padding-inline: var(--sp20);
        }

        /* dropdown becomes an inline accordion */
        & .header__submenu {
            position: static;
            flex: 0 0 100%;
            min-width: 0;
            padding-block: 0;
            padding-inline-start: 0;
            background: var(--cdf7);
            box-shadow: none;
            transform: none;
            display: none;
            opacity: 1;
            visibility: visible;
        }

        & .header__item--drop:hover .header__submenu {
            display: none;
        }

        & .header__item--drop.is-open .header__submenu {
            display: block;
            transform: none;
        }

        & .header__sublink {
            padding: var(--sp10) var(--sp20);
            font-size: var(--f14);
            border-bottom: 1px solid var(--line);
        }

        & .header__subitem:last-child .header__sublink {
            border-bottom: 0;
        }

        /* CTAs live at the foot of the panel — the orange block is hidden below */
        & .header__nav-cta {
            display: flex;
            flex-direction: column;
            gap: var(--sp10);
            flex: 0 0 auto;
            margin-block-start: auto;
            padding: var(--sp20);
            border-top: 1px solid var(--line);
        }

        & .header__nav-cta-btn {
            width: 100%;
            padding: 16px 20px;
        }

        /* .header__nav-cta replaces the slanted orange block, so the .header__cta rules stop applying below 1025px. */
        & .header__actions {
            display: none;
        }
    }
}

@media (max-width: 767.98px) {
    .header {
        & .header__topbar-inner {
            justify-content: center;
            gap: var(--sp8) var(--sp20);
        }

        & .header__address,
        & .header__login {
            font-size: var(--f14);
        }

        & .header__topbar-right {
            gap: var(--sp20);
        }

        & .header__phone {
            font-size: var(--f16);
        }

        & .header__logo-img {
            width: 125px;
        }
    }
}

@media (max-width: 575.98px) {
    .header {
        & .header__address {
            font-size: var(--f12);
        }

        /* the panel is narrower here, so the CTAs get a tighter gutter */
        & .header__nav-cta {
            padding: var(--sp15);
        }
    }
}

/* The sticky bar drops in from above the viewport edge; MotionFlow covers content, not fixed chrome. */
@keyframes header-drop {
    from {
        translate: 0 -100%;
    }

    to {
        translate: 0 0;
    }
}

/* MotionFlow honours this itself; this animation is ours, so it needs its own guard. */
@media (prefers-reduced-motion: reduce) {
    .header.is-stuck {
        animation: none;
    }
}


/* 2. Banner */
.banner {
    --banner-head: var(--headerouter);
    --container: 1680px;

    position: relative;
    isolation: isolate;
    padding-block: calc(var(--banner-head) + var(--sectionGap)) var(--sp50);
    color: var(--white);
    overflow: clip;
    background-color: var(--black);
    & .banner__media {
        position: absolute;
        inset: 0;
        z-index: -1;
        background-color: var(--hero-dark);      
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        pointer-events: none;
        &:before{
            content:"";
            position:absolute;
            inset:0;            
            pointer-events: none;            
            background: rgba(0, 0, 0, 0.5);
        }
        img{                
            inset:0;
            width:100%;
            height:100%;
            object-fit:cover;
        }
    }

    & .banner__inner {
        display: grid;
        grid-template-columns: 1fr 560px;
        align-items: center;
        gap: var(--g40);
    }
    & .banner__content {
        max-width: 90%;     
        display: flex;
        flex-direction: column;
        gap: var(--g40);      
        h2{
            font-size: var(--f40);
            span{
                color: var(--orange);
            }
        }
        @media (max-width:991.98px) {
            max-width: 100%;
        }
    }

    & .banner__actions{
        display: flex;  
        flex-wrap: wrap;
        gap: var(--sp20);
    }

    & .banner__lead-wrap{
        max-width: 600px;
        /* margin-top: var(--sp40); */
        /* margin-bottom: var(--sp40); */
    }
    &.banner--sub{
        padding-bottom: var(--sectionGap);
        & .banner__inner {
            align-items: self-start;
            .banner__content{
                padding-top: var(--sectiongapHalf);
                @media (max-width:991.98px) {
                    padding-top: 0;
                }
            }

        }
        & .banner__media {          
            &:before{                
                background: rgba(0, 0, 0, 0.7);                
            }
        }
    }
    &.b2b-form {
        .banner__card {
            & .banner__rating {
                display: none;
            }
        }
    }

    &.banner-overlay-light {
        & .banner__media {          
            &:before{                
                background: rgba(0, 0, 0, 0.5);                
            }
        }
    }

    /* ---------- left column ---------- */
    & .banner__badges {
        display: grid;
        flex-wrap: wrap;    
        gap: var(--sp20) var(--sp40);
        /* margin-bottom: var(--sp40); */
        /* margin-top: var(--sp40); */
        list-style: none;
        grid-template-columns: 1fr 1fr;
    }

    & .banner__badge {
        display: inline-flex;
        align-items: center;
        gap: var(--sp20) var(--sp10);
        font-size: var(--f18);
        font-weight: 700;
        text-transform: uppercase;
        svg{
            max-height: 32px;
            max-width: 32px;
            flex : 0 0 32px;
        }
    }

    & .banner__badge-icon {
        font-size: var(--f22);
        color: var(--orange);
    }

    /* em-based measure so the line break scales with the fluid --f65 heading */
    & .banner__title {
        max-width: 13em;
        /* margin-bottom: var(--sp40); */
        text-transform: uppercase;
        span{
            color: var(--orange);
        }

    }

    /* ---------- zip search ---------- */
    & .banner__search {
        display: flex;
        align-items: stretch;
        max-width: 820px;
        background: var(--white);
        box-shadow: var(--shadow-md);
        padding: var(--sp15);
    }

    & .banner__search-field {
        display: flex;
        align-items: center;
        gap: var(--sp10);
        flex: 1 1 auto;
        min-width: 0;
        padding-inline: calc(var(--sp25)/2) var(--sp25);
    }

    & .banner__search-icon {
        flex: 0 0 auto;
        font-size: var(--f18);
        color: #A1A1AA;
    }

    & .banner__search-input {
        width: 100%;
        padding-block: var(--sp20);
        border: 0;
        background: transparent;
        font-family: var(--font-montserrat);
        font-size: var(--f16);
        text-transform: uppercase;
        color: #A1A1AA;
        font-weight: bold;

        &::placeholder {
            color: #A1A1AA;
        }
    }

    & .banner__search-btn {
        flex: 0 0 auto;
        border: 0;
        cursor: pointer;
    }

   

    /* ---------- partners strip ---------- */
    & .banner__partners {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp30) var(--sp50);
        margin-block-start: var(--sp100);
    }

    & .banner__partners-title {
        flex: 0 0 auto;
        width: 13em;
        font-size: var(--f18);
        font-weight: 700;
        line-height: var(--lhTight);
        text-transform: uppercase;
        @media (max-width: 1499.98px) {
            width: 100%;
        }
    }

    /* Swiper viewport below 1199.98px, plain wrapper above; min-width:0 lets the item shrink so .swiper can clip. */
    & .banner__partners-slider {
        flex: 1 1 auto;
        min-width: 0;
    }

    & .banner__partners-list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp30) var(--sp50);
        list-style: none;
    }

    & .banner__partner {
        display: flex;
        align-items: center;
    }

    & .banner__partner-logo {
        max-height: 80px;
        width: auto;
        object-fit: contain;
    }

    /* ---------- endorsements strip ---------- */
    & .banner__endorsements {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp30) var(--sp50);
        margin-block-start: var(--sp65);
        @media (max-width: 991.98px) {
            margin-block-end: var(--sp50);
        }
    }

    & .banner__endorsements-title {
        flex: 0 0 auto;
        font-size: var(--f18);
        font-weight: 700;
        text-transform: uppercase;
        width: 13em;
         @media (max-width: 1499.98px) {
            width: 100%;
        }
    }

    /* same deal as .banner__partners-slider above */
    & .banner__endorsements-slider {
        flex: 1 1 auto;
        min-width: 0;
    }

    & .banner__endorsements-list {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--sp25) var(--sp40);
        list-style: none;
    }

    & .banner__endorsement {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--sp20);
        max-width: 170px;
        text-align: center;
        color: var(--white);
        /* Opacity only: Swiper writes the slide gap as an inline margin that `all` would animate. */
        cursor: pointer;
        &:hover,
        &.is-active {            
            color: var(--orange);
            
        }
        & .banner__endorsement-icon{
            & svg{
                max-height: 65px;
                transition: all .3s ease-in-out;
                
                & path{
                    fill: var(--white);
                    transition: all .3s ease-in-out;
                }
            }
        }
        &:hover,
        &.is-active {
            & .banner__endorsement-icon{
                & svg{
                    
                    & path{
                        fill: var(--orange);
                        
                    }
                }
            }
        }
    }   

    /* The whole tile is one link, so the anchor takes over the column layout and gap. */
    & .banner__endorsement-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--sp20);
        color: inherit;
        text-decoration: none;
    }

    & .banner__endorsement-label {
        font-size: var(--f14);
        font-weight: 700;
        line-height: var(--lhTight);
        text-transform: uppercase;
        transition:  all .3s ease-in-out;
    }

    /* ---------- both strips in slider mode ---------- */
    /* Scoped to .swiper, which vendor.js lands only when a slider is live, so plain rows survive. */
    & .banner__partners-slider.swiper {
        /* Basis 0 makes the title take only what the logos leave, so the layout holds at any count. */
        flex-basis: 0;

        & .banner__partners-list {
            flex-wrap: nowrap;
            /* the gap between logos is Swiper's spaceBetween (data-slider-gap) — a CSS gap here would desync its measurements */
            gap: 0;
        }

        /* Swiper sizes each slide, so a whole number of logos always fills the row. */
        & .banner__partner {
            flex: 0 0 auto;
            justify-content: center;
            height: auto;
        }

        /* A slide can be narrower than the widest logos, so cap them instead of spilling. */
        & .banner__partner-logo {
            max-width: 100%;
        }
    }

    & .banner__endorsements-slider.swiper {
        flex-basis: 0;              /* same reason as the partners strip above */

        & .banner__endorsements-list {
            flex-wrap: nowrap;
            gap: 0;
        }

        & .banner__endorsement {
            flex: 0 0 auto;
            /* the standing cap would fight Swiper's inline slide width and leave the item floating inside a wider slot */
            max-width: none;
            height: auto;
        }

        & .banner__endorsement-icon svg {
            max-width: 100%;
            height: auto;
        }
    }

}

 /* ---------- right column: form card ---------- */
 .banner__card {
    padding: var(--sp50);
    background: var(--white);
    color: var(--text);
    box-shadow: var(--shadow-lg);


& .banner__rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp15);
    margin-bottom: var(--sp25);
}

& .banner__stars {
    display: inline-flex;
    gap: var(--sp4);
    font-size: var(--f20);
    color: var(--gold);
}

& .banner__score {
    font-size: var(--f24);
    font-weight: 700;
}

& .banner__reviews {
    font-size: var(--f16);        
   
    color: var(--orange);
    text-decoration: none;
    &:hover{
        color: var(--text);
    }
}

& .banner__card-title {
    margin-bottom: var(--sp40);
    font-size: var(--f35);
    text-transform: uppercase;
}

/* ---------- form ---------- */
& .banner__form {
    display: flex;
    flex-direction: column;
    gap: var(--sp25);        
}

& .banner__form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp25);
}

& .banner__form-row--split {
    grid-template-columns: 1fr 1fr;
}

& .banner__input {
    width: 100%;
    padding-block: var(--sp10);
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    font-family: var(--font-montserrat);
    font-size: var(--f16);
    color: var(--text);
    transition: var(--transition);

    &::placeholder {
        color: var(--muted);
    }

    &:focus {
        border-bottom-color: var(--orange);
    }
}

& .banner__consent {
    display: flex;
    align-items: flex-start;
    gap: var(--sp10);
    font-size: var(--f14);
    line-height: var(--bodyLh);
    color: var(--muted-2);
    cursor: pointer;
}

& .banner__checkbox {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-block-start: 2px;
    accent-color: var(--orange);
    cursor: pointer;
}

& .banner__consent-link {
    color: var(--orange);
    text-decoration: underline;
}

& .banner__submit {
    width: 100%;
    border: 0;
    cursor: pointer;
}
}

/* BANNER section responsive css */
@media (max-width: 1365.98px) {
    .banner {
        /* header.css puts the header in the flow at this width — no overlay offset needed */
        /* --banner-head: calc(var(--sectionGap) + 50px); */

        & .banner__inner {
            grid-template-columns: 1fr 500px;
        }

    }
}

@media (max-width: 1199.98px) {
    .banner {
        & .banner__inner {
            grid-template-columns: 1fr 440px;
        }
        & .banner__badges {

            grid-template-columns: 1fr;
        }

        /* Below this the strip is too narrow to sit beside its title, so let the row wrap. */
        & .banner__partners-slider.swiper,
        & .banner__endorsements-slider.swiper {
            flex-basis: auto;
        }
    }
}

@media (max-width: 991.98px) {

    .banner {
        /* --banner-head: calc(var(--sectionGap) + 100px);s */
        & .banner__inner {
            grid-template-columns: 1fr;
        }

        & .banner__title {
            max-width: none;
        }

        & .banner__card {
            max-width: 820px;
        }

        & .banner__partners-title,
        & .banner__endorsements-title {
            flex-basis: 100%;
            max-width: none;
        }

        & .banner__partners-list,
        & .banner__endorsements-list {
            justify-content: flex-start;
        }
    }
}

@media (max-width: 767.98px) {
    .banner {       
        /* --banner-head: calc(    var(--sectionGap) + var(--sp40)); */
        /* zip field stacks above the button */
        
        & .banner__form-row--split {
            grid-template-columns: 1fr;
        }           
        
        & .banner__endorsement {
            max-width: 100px;
        }
    }
}

@media (max-width: 575.98px) {
    .banner {     
    & .banner__search {
        flex-direction: column;
        align-items: stretch;
    }
}
}


/* 3. Driving Classes */
.driving-classes {
    /* padding-block: var(--sectionGap);    */
    
    /* ---------- media + list ---------- */
    /* The media column bleeds to the left edge; the right stays aligned with .container. */
    & .driving-classes__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp40);        
    }

    & .driving-classes__media {
        position: relative;
        overflow: hidden;

       &::before {
                content: "";
                background: var(--text);
                position: absolute;
                width: 100%;
                height: 100%;
                opacity: 0.5;
                left: 0;
                top: 0;
                pointer-events: none;
                z-index: 1;
        }
    }

    & .driving-classes__poster {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* orange square play button */
    & .driving-classes__play {
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        translate: -50% -50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 90px;
        height: 90px;    
        transform: scale(1);
        z-index: 1;
        transition: var(--transition);       
       
        
        &:hover{
            transform: scale(1.06);

          
        }
    }

    /* ---------- benefit cards ---------- */
    & .driving-classes__list {
        display: grid;
        grid-template-rows: repeat(3, 1fr);
        gap: var(--sp20);
        list-style: none;
    }

    & .driving-classes__item {
        /* How far the card slides on hover; the anti-flicker strip is measured from the same property. */
        --hover-slide: var(--sp20);

        position: relative;
        display: flex;
        align-items: center;
        gap: var(--sp20);
        padding: var(--sp50);
        background: var(--white);
        box-shadow: var(--shadow-sm);
        /* the check icon rides currentColor, so the hover below recolours it */
        color: var(--orange);
        transition: var(--transition);

        & svg{
            flex: 0 0 35px;
            width: 35px;
            height: 35px;
        }
        & p {
            font-size: var(--f20);
            font-weight: 700;
            line-height: var(--bodyLh);
            color: var(--text);
            transition: var(--transition);
        }

        &:hover {
            background: var(--gradient2);
            color: var(--white);
            /* the `translate` longhand, NOT `transform`: these cards are MotionFlow stagger children and its reveal keyframes own `transform` */
            & svg{
                filter : var(--white-filter);
            }
            translate: var(--hover-slide) 0;

            /* Anti-flicker: this card slides right, so the strip covering the vacated band sits on its left. */
            &::after {
                content: "";
                position: absolute;
                inset-inline-end: 100%;
                inset-block: 0;
                width: var(--hover-slide);
            }

            & p {
                color: var(--white);
            }
        }
    }

    /* ---------- cta ---------- */
    & .driving-classes__cta {
        margin-block-start: var(--sectiongapHalf);
        margin-inline: auto;
    }
}


/* DRIVING CLASSES section responsive css */

@media (max-width: 1199.98px) {
   
}

@media (max-width: 991.98px) {
    .driving-classes {       

        /* single column — the media no longer bleeds, so it needs its own ratio */
        & .driving-classes__grid {
            grid-template-columns: 1fr;                        
        }

        & .driving-classes__media {
            aspect-ratio: 16 / 10;
        }

        & .driving-classes__list {
            grid-template-rows: none;
        }

        /* No hover on touch, or a tap would leave the card stuck in its hovered state. */
        & .driving-classes__item:hover {
            translate: none;

            /* nothing is vacated without the slide, so the strip would only add a dead band beside a tapped card */
            &::after {
                content: none;
            }
        }
    }
}

@media (max-width: 767.98px) {

}

@media (max-width: 575.98px) {
    .driving-classes {       
        & .driving-classes__media {
            aspect-ratio: 4 / 3;
        }

        & .driving-classes__play {
            width: 60px;
            height: 60px;          
        }
       
    }
}


/* 4. Flexible Financing */
.financing{
    background-color:var(--dark);
    color:var(--white);
    position:relative;
    overflow:hidden;
    padding-block: var(--sectionGap);
}
.financing__blob{
    position:absolute;
    border-radius:var(--r-full);
    background:var(--gradient2);
    z-index:0
}
.financing__blob--r,
.financing__blob--l{
    width:460px;
    height:460px;
    --ngSpace:-300px;
    top:60%;
    transform:translateY(-50%);

    @media screen and (max-width:1820px){
        width: 330px;
        height: 330px;
        --ngSpace: -230px;
    }
    @media screen and (max-width:1679px){    
        top:0;
    }
    @media (max-width:575.98px){    
        opacity: 0;
        display: none;
    }
    
}
.financing__blob--l{
    left:var(--ngSpace);    
}
.financing__blob--r{
    right:var(--ngSpace);
}
.financing .container{
    position:relative;
    z-index:1
}


.finance__grid{
    /* width of one card in the 4-up row — reused by the centred short-row cases */
    --finance-col:calc((100% - (var(--sp40) * 3)) / 4);
    display:grid;
    grid-template-columns:repeat(4,1fr);
    justify-content:center;
    gap:var(--sp40);
    margin-top:var(--sp55);

    /* Fewer than four cards: keep the 4-up width and centre the row instead. */
    &:has(> .finance:nth-child(3):last-child){
        grid-template-columns:repeat(3,var(--finance-col))
    }
    &:has(> .finance:nth-child(2):last-child){
        grid-template-columns:repeat(2,var(--finance-col))
    }
    &:has(> .finance:only-child){
        grid-template-columns:var(--finance-col)
    }

    @media (max-width:1299px){
        --finance-col:calc((100% - var(--sp40)) / 2);
        grid-template-columns:1fr 1fr;

        /* 3 and 2 cards fill the two columns again — only a single card centres */
        &:has(> .finance:nth-child(3):last-child),
        &:has(> .finance:nth-child(2):last-child){
            grid-template-columns:1fr 1fr
        }

        /* an odd 3rd card ends up alone on row 2 — centre it at column width */
        &:has(> .finance:nth-child(3):last-child) > .finance:last-child{
            grid-column:span 2;
            width:var(--finance-col);
            margin-inline:auto
        }
    }
    @media (max-width:767px){
        grid-template-columns:1fr;

        /* single column here, so the short-row cases stack full width too */
        &:has(> .finance:nth-child(3):last-child),
        &:has(> .finance:nth-child(2):last-child),
        &:has(> .finance:only-child){
            grid-template-columns:1fr
        }

        /* Clear the two-column centring; an auto margin would shrink the card in a single-column grid. */
        &:has(> .finance:nth-child(3):last-child) > .finance:last-child{
            grid-column:auto;
            width:auto;
            margin-inline:0
        }
    }
}
.finance{
    /* Lift distance and border width; the anti-flicker strip below is measured from both. */
    --hover-lift:var(--sp20);
    --hover-border:1px;

    position:relative;
    border:var(--hover-border) solid var(--orange);
    padding:var(--sp50);
    transition:var(--transition);
}
/* Hover turns the card white and lifts it. `translate`, not `transform`, so MotionFlow's reveal cannot kill it. */
.finance:hover{
    background-color:var(--white);
    border-color:var(--white);
    translate:0 calc(var(--hover-lift) * -1);
}
/* Anti-flicker: re-covers the band the lift vacates, so the pointer never leaves the hover target. */
.finance:hover::after{
    content:"";
    position:absolute;
    inset-block-start:100%;
    inset-inline:calc(var(--hover-border) * -1);
    height:calc(var(--hover-lift) + var(--hover-border));
}
.finance:hover li{
    color:var(--text)
}
.finance:hover li::before{
    background:var(--muted-2)
}
.finance h3{
    color:var(--orange);
    margin-bottom: var(--sp25);
}
.finance ul{
    display:flex;
    flex-direction:column;
    gap:var(--sp25);
    list-style:none;
}
.finance li{
    font-size:var(--f18);
    color:var(--white);
    padding-left:18px;
    position:relative;
    line-height:1.5
}
.finance li::before{
    content:"";
    position:absolute;
    left:2px;
    top:11px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#d9d9d9
}
.financing__cta{
    text-align:center;
    margin-top:var(--sectiongapHalf);
}
.financing__cta .btn{
    margin-inline:auto
}
/* FLEXIBLE FINANCING section responsive css */

.financing__blob--r,
.financing__blob--l {
    transform: translateY(-50%) scale(0);
    transition: transform 0.5s ease-in-out;
    transition-delay: 0.8s;
}
.financing:has(.mf-animate) {
    & .financing__blob--r,
    & .financing__blob--l {
        transform: translateY(-50%) scale(1);           
    }
}

@media (max-width: 991.98px) {
    /* No lift at touch widths: a tap would leave the card sitting 20px up. */
    .finance:hover {
        translate: none;
    }

    /* nothing is vacated without the lift, so the strip would only add a dead band under a tapped card */
    .finance:hover::after {
        content: none;
    }
}


/* 5. Road / Timeline */
.road {
    position: relative;

    & .road__eyebrow {
        margin-top: var(--sp20);
        font-family: var(--font-staarliches);
        font-size: var(--f30);
        color: var(--orange);
        text-transform: uppercase;
        text-align: center;
        letter-spacing: .5px;

        @media (max-width:991.98px){
            margin-top: 10px;
        }
    }

    & .container{
        margin-bottom: calc(var(--sp30) * -1);
    }

    /* Swiper viewport, full-bleed because Swiper needs .swiper-wrapper as its direct child; padding reproduces the container edge. */
    & .road__slider {     
        padding-block: var(--sp30);
        margin-top: var(--sp65);
        padding-inline: max(var(--gutter), (100% - var(--container)) / 2 + var(--gutter));
        @media (max-width:991.98px){            
            margin-bottom: 60px;
        }
    }

    /* .swiper-wrapper is already flex and Swiper owns the gap; counter-reset starts the step numbering. */
    & .road__track {
        align-items: stretch;
        counter-reset: rcard;
    }
}

/* Swiper runs slidesPerView:'auto', so the card width is CSS's call — the explicit width overrides .swiper-slide's default width:100%. */
.rcard {
    flex: 0 0 auto;
    width: 350px;
    height: auto;
    padding: var(--sp20);
    background: var(--white);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-md);

    @media (max-width: 575.98px) {
        width: 300px;
    }

    & .rcard__title {
        margin-bottom: var(--sp20);
        font-family: var(--font-montserrat);
        font-size: var(--f22);
        font-weight: 700;
        line-height: 1.2;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        position: relative;
        padding-left: 60px;

        @media (max-width: 575.98px) {
            font-size: var(--f18);
            padding-left: 50px;
            margin-bottom: var(--sp20);
        }

        /* Step number printed from the counter on .road__track, so numbering follows DOM order. */
        &::before {
            counter-increment: rcard;
            content: counter(rcard);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            border: 5px solid var(--orange);
            border-radius: var(--r-full);
            font-family: var(--font-staarliches);
            font-size: var(--f40);
            font-weight: 400;
            line-height: 1;
            text-transform: none;
            color: var(--orange);
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            @media (max-width: 575.98px) {
                width: 40px;
                height: 40px;
                border-width: 2px;
            }
        }
    }

    & .rcard__list {
        display: flex;
        flex-direction: column;
        gap: var(--sp8);
    }

    & .rcard__item {
        position: relative;
        padding-left: 18px;
        font-family: var(--font-montserrat);
        font-size: var(--f18);
        color: var(--black);

        &::before {
            content: "\2022";
            position: absolute;
            left: 2px;
            color: var(--black);
            font-size: 30px;
            line-height: 0.6;
        }
    }
}



/* ---- Road ---- */
.scene{
    margin-top: var(--sp50);
    height: var(--road-height);
}
.road_image {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--road-height);
    background-color: #4a4a4a;
    overflow: hidden;
    &:before{
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 10px;
        bottom: 10px;
        height: calc(100% - 20px);
        border-top: 3px solid #E3A034;
        border-bottom: 3px solid #E3A034;
    }
}

/* Static dashed lane marking — does NOT move */
.road__lane {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 5px;
    transform: translateY(-50%) skewX(-60deg);
    background: repeating-linear-gradient(to right, #ffffff 0 140px, transparent 60px 315px);
}

/* The truck is driven by the slider: linkTruckToSlider() writes truck-p, truck-step and wheel-turns.
   Each move's duration comes from the slider's beat - data-slider-autoplay split by data-slider-drive. */
.road__truck {
    /* A single token, not a calc: linkTruckToSlider() reads this property back. */
    --truck-home: var(--sp100);
    --truck-step: 0ms;

    /* FALLBACK speed in px per second, for a slider naming no data-slider-drive. Given one, measure()
       derives the speed from that share of the beat instead, sized so a lap's longest move just fits. */
    --truck-speed: 300;

    /* How much true rolling the wheels show. 1 is honest and reads far too fast. */
    --wheel-rate: .4;

    /* Whether the truck parks in full view before leaving. linkTruckToSlider() turns this into truck-far. */
    --truck-park: 1;

    /* Whether the truck is tied to the cards at all; 0 drives it on its own loop. */
    --truck-linked: 1;
    position: absolute;
    bottom: calc(var(--road-height) - 90px);
    /* sit wheels on the road */
    left: 0;
    width: var(--truck-width);
    transform: translateX(calc(var(--truck-home) + (var(--truck-far, var(--end-x)) - var(--truck-home)) * var(--truck-p, 0)));
    transition: transform var(--truck-step) linear;
    will-change: transform;

    /* The one frame where the truck is repositioned rather than driven, so the jump is invisible. */
    &.road__truck--lap {
        transition: none;
    }

    /* Tablet and below: the truck drives itself on its own loop, independent of the cards. */
    @media (max-width: 991.98px) {
        --truck-linked: 0;
        animation: drive var(--truck-dur) linear infinite;
    }
	 /* Two shadows: a hard core strip at the tyre line, and a broad soft penumbra. */
    &::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 2px;
        height: 20px;
        background:
            linear-gradient(to right,
                transparent 0%,
                rgba(0, 0, 0, .55) 7%,
                rgba(0, 0, 0, .55) 93%,
                transparent 100%),
            radial-gradient(ellipse 55% 45% at 50% 62%,
                rgba(0, 0, 0, .32) 0%,
                rgba(0, 0, 0, .16) 55%,
                transparent 80%);
        background-repeat: no-repeat;
        background-size: 96% 5px, 100% 100%;
        background-position: 50% calc(100% - 4px), 50% 100%;
        filter: blur(3px);
    }
}

.road__truck svg {
	--truck-rumble: .22s;
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.25));
    overflow: visible;
	animation: rumble var(--truck-rumble) steps(2, jump-none) infinite;
}

/* Engine / road vibration. One pixel is enough — the point is that the body moves against a shadow that doesn't. */
@keyframes rumble {
    from { transform: translateY(0); }
    to   { transform: translateY(1px); }
}


/* Each wheel spins about its own centre, off the same progress as the drive. */
.wheel {
    transform-box: fill-box;
    transform-origin: center;
    transform: rotate(calc(var(--truck-p, 0) * var(--wheel-turns, 0) * var(--wheel-rate, 1) * 360deg));
    transition: transform var(--truck-step, 0ms) linear;
    will-change: transform;

    /* Self-driven truck: the wheels turn on their own clock, with no drive to pace them. */
    @media (max-width: 991.98px) {
        animation: spin var(--spin-dur) linear infinite;
    }
}

/* The self-driven loop, straight across the road and off. Tablet and below only. */
@keyframes drive {
    from {
        transform: translateX(var(--start-x));
    }

    to {
        transform: translateX(var(--end-x));
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Autoplay is already off under reduced motion, so the tween and the self-driven loop go too. */
@media (prefers-reduced-motion: reduce) {

    .road__truck,
    .wheel {
        transition: none;
        animation: none;
    }
}


/* 6. Success Stories */
.stories{
    position:relative;
    /* padding-block: var(--sectionGap); */
}
.stories__grid{
    /* width of one card in the 3-up row — reused by the centred short-row cases */
    --stories-col:calc((100% - (var(--sp40) * 2)) / 3);
    display:grid;
    grid-template-columns:repeat(3,1fr);
    justify-content:center;
    gap:var(--sp40);
    margin-inline:auto;

    /* Fewer than three cards: keep the 3-up width and centre the row instead. */
    &:has(> .story:nth-child(2):last-child){
        grid-template-columns:repeat(2,var(--stories-col))
    }
    &:has(> .story:only-child){
        grid-template-columns:var(--stories-col)
    }
}
.story{
    /* How far the card lifts on hover; ::before hangs exactly this far past its bottom edge. */
    --hover-lift:var(--sp30);

    position:relative;
    overflow:hidden;
    /* aspect-ratio:460/613; */
    padding:var(--sp30);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform:translateY(0);
    transition:all 0.3s ease-in-out;
    min-height: 600px;   
    background-color: var(--black);
    & > a{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }
    @media (max-width: 991.98px) {
        min-height: 500px;
    }
    @media (max-width: 767.98px) {
        min-height: 400px;
    }
}
.story img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover
}
.story::after{
    content:"";
    position:absolute;
    inset:0;
    z-index: 2;
    transition:opacity 0.3s ease;
    background:linear-gradient(180deg,rgba(0,0,0,1) 0%,rgba(0,0,0,.15) 50%);
    pointer-events: none;
}
/* The orange hover tint, and past the bottom edge the anti-flicker strip. */
.story::before{
    content:"";
    position:absolute;
    inset:0 0 calc(var(--hover-lift) * -1);
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition:opacity 0.3s ease;
    background:linear-gradient(180deg,rgba(230,83,0,.75),rgba(230,83,0,.75));
    background-size:100% calc(100% - var(--hover-lift));
    background-repeat:no-repeat;
}
/* `translate`, not `transform`: the card is a MotionFlow reveal target, so the longhand composes instead of fighting. */
.story:hover{
    translate:0 calc(var(--hover-lift) * -1);
    box-shadow:var(--shadow-lg);

    /* Anti-flicker: ::before re-covers the band the lift vacates, so it must be unclipped and hit-testable. */
    overflow:visible;
    &::before{
        opacity: 1;
        pointer-events: auto;
    }

    @media (max-width:1199.98px){
        --hover-lift:var(--sp10);
    }

    .story__label{
        color:var(--white)
    }
}
.story__overlay{
    position:relative;    
    z-index:3
}
.story__label{    
    font-size:var(--f24);
    color:var(--orange);
    text-transform:uppercase;    
    margin-bottom:var(--sp15);
    transition:color 0.3s ease;
}
.story--orange .story__label{
    color:var(--white)
}
.story__quote{
    color:var(--white);
    font-weight:700;
    font-style:italic;
    font-size:var(--f18);
    line-height:1.2;
}
.story__name{    
    z-index:3;
    color:var(--white);
    
    & p{
        font-weight:700;
        font-size:var(--f16);
        text-transform:uppercase;
        letter-spacing:.03em

    }
}
.stories__illus{
    width:100%;
    max-width:1920px;
    margin:-150px auto 0;    
    @media (max-width:1599.98px){    
        margin-top:-40px;
    }
    @media (max-width:991.98px){    
        margin-top:0;
    }
}
/* SUCCESS STORIES section responsive css */
@media (max-width:991.98px){
    .stories__grid
    {
    --stories-col:calc((100% - var(--sp40)) / 2);
    grid-template-columns:1fr 1fr;

    /* 2 cards fill both columns again — only a single card centres */
    &:has(> .story:nth-child(2):last-child){
        grid-template-columns:1fr 1fr
    }
}
}
@media (max-width:767.98px){
    .stories__grid
    {
    grid-template-columns:1fr;

    /* single column here, so the short-row cases stack full width too */
    &:has(> .story:nth-child(2):last-child),
    &:has(> .story:only-child){
        grid-template-columns:1fr
    }
}
/* No lift at touch widths, so the ::before goes back to being the tint alone. */
.story:hover{
    translate:none;
    overflow:hidden;
    &::before{
        pointer-events:none;
    }
}
}


/* 7. Video Stories (Swiper) */
.vstories__swiper {
    /* padding-bottom: 50px; */
    overflow: visible;
    margin-top: var(--sp65);
    @media (max-width: 767.98px) {
        padding-bottom: 0px;
    }
}

.vstories__swiper .swiper-wrapper {
    align-items: center
}

.vstories__swiper .swiper-slide {
    width: min(940px, 82vw);
    filter: grayscale(.35);
    transition: opacity .4s ease, filter .4s ease, transform .4s ease;
}

.vstories__swiper .swiper-slide-active {
    opacity: 1;
    filter: none;
    transform: translateY(-10px);
}
.vstories__swiper .swiper-slide-active.vcard {
    box-shadow: var(--shadow-lg)
}
.vcard {
    position: relative;
    overflow: hidden;
    height: 560px;
    color: var(--white);
    display: flex;
    @media (max-width: 767.98px) {
        height: auto;
    }
}

.vcard>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.vcard::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.5);
    transition: background .4s ease;
}

.vstories__swiper .swiper-slide-active::after {
    background: rgb(230, 83, 0,.85);
}
.vcard__body {
    position: relative;
    z-index: 2;
    padding: var(--sp65);
    display: flex;
    flex-direction: column;
    flex: 1;
    max-width: 800px;
    @media (max-width: 767.98px) {
        padding: var(--sp50);
        min-height: 500px;
    }
}

.vcard__body h3 {
    font-size: var(--f50);
    text-transform: uppercase;
    margin-bottom: var(--sp20);
}

.vcard__body p {
    font-size: var(--f18);
    color: var(--white);    
    margin-bottom: auto;
}

.vcard__play {
    display: inline-flex;
    align-items: center;
    gap: var(--sp15);
    margin-top: var(--sp30);
    font-family: var(--font-staarliches);
    font-size: var(--f22);
    text-transform: uppercase;
    color: var(--white);
    width: max-content;
    max-width: 100%;
}

.vcard__play .video__play {
    position: static;
    transform: none;
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease;
}
.vstories__swiper .swiper-slide-active svg path {
    stroke: var(--white);
}

/* .swiper-slide-active .vcard__play .video__play { border-color: var(--white); color: var(--white) } */

.vcard__play:hover .video__play {
    transform: scale(1.06)
}

.vstories__swiper .swiper-pagination-bullet {
    background: var(--white);
    opacity: .45
}

.vstories__swiper .swiper-pagination-bullet-active {
    background: var(--orange);
    opacity: 1
}
.swiper-pagination {
    display: none;
}
/* VIDEO STORIES section responsive css */
@media (max-width:767px) {
    .vcard__play .video__play{
        width: 55px;
        height: 55px;
    }   
}


/* 8. Stats */
.stats {
    color: var(--white);
    padding-block: var(--sectiongapHalf);
    background-image: url(../images/track.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    min-height: 250px;
    display: flex;
    align-items: center;
    background-color: var(--black);

    &:before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
    }

    @media (max-width:767.98px) {
        padding-block: var(--sectionGap);
    }
}

.stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp50);
    text-align: center;

    @media (max-width:1199.98px) {
        grid-template-columns: repeat(2, 1fr);

    }

    @media (max-width:767.98px) {
        grid-template-columns: 1fr;
    }

    & li {
        position: relative;

        &:not(:last-child):after {
            content: "";
            position: absolute;
            width: 1px;
            height: 100%;
            background: var(--white);
            top: 0;
            right: calc(-1 * var(--sp50) / 2);
        }

        @media (max-width:1199.98px) {
            &:nth-child(2n):after {
                content: none;
            }
        }
        
        @media (max-width:767.98px) {
            &:after {
                content: none !important;
            }
        }
    }
}

.stats__num {
    display: block;
    font-family: var(--font-staarliches);
    font-size: var(--f50);
    color: var(--white);
    line-height: 1
}

.stats__label {
    font-weight: 700;


    font-size: var(--f16);
    margin-top: 10px;
    display: block;
    text-transform: uppercase;
    color: var(--white);
}


/* 9. Reviews */
.reviews {
    position: relative;
    margin-bottom: var(--sp50);
}

/* Two MotionFlow tickers, one per direction. Full-bleed, so the loop reads as continuous. */
.reviews__rows {
    display: flex;
    flex-direction: column;
    margin-top: 50px;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    /* Optional edge fade, disabled: a mask-image linear-gradient tapering the first and last 6%. */
}

.reviews-wrapper {
    display: flex;
    justify-content: space-between;
}

.reviews__ticker {
    width: calc(100% - 135px);

    @media (max-width: 1199.98px) {
        width: calc(100% - 100px);
    }
    @media (max-width: 991.98px) {
        width: 100%;
    }
}

.review {
    margin-bottom: var(--sp40);
}

.reviews-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 135px;

    @media (max-width: 1199.98px) {
        width: 100px;
    }
    @media (max-width: 991.98px) {
        display: none;
    }
    svg {
        @media (max-width: 1199.98px) {
            width: 50px;
            height: 50px;
        }
    }
}

/* MotionFlow re-parents the cards, so no child combinator; margin-right, not gap, keeps the loop seamless. */
.reviews__ticker .review {
    margin-right: var(--sp40);
}

/* Review card: fixed 280px tall, width computed by fitReviewCards() from the quote length to fit 8 lines. */
.review {
    --chars: 140;
    /* fallback only — vendor.js overrides this per card */
    --review-h: 280px;
    --review-lines: 8;
    --review-lh: 1.5;
    --review-fit: 1.15;
    /* wrap slack — lines never pack 100% full */
    --review-pad: var(--sp30);
    /* 1ch resolves against this element's font-size, so the card must carry the quote's size. */
    font-size: var(--f16);
    height: var(--review-h);
    flex: 0 0 calc((var(--chars) / var(--review-lines)) * var(--review-fit) * 1ch + var(--review-pad) * 2);
    min-width: 240px;
    max-width: 140vw;
    display: flex;
    flex-direction: column;
    background: var(--white);
    box-shadow: var(--shadow-md);
    border-radius: 0;
    /* square, per the design and the global .acard convention */
    padding: var(--review-pad);
}

.review__stars {
    color: var(--orange);
    font-size: var(--f20);
    line-height: 1;
    letter-spacing: 1px;
    display: block;
    margin-bottom: var(--sp10);
}

/* Scoped to the unclassed quote <p>, so it no longer overrides .review__name. */
.review>p:not([class]) {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    font-size: var(--f16);
    font-style: italic;
    color: var(--muted-2);
    line-height: var(--review-lh);
}

/* line-height is explicit: inheriting the body's 1.55 cost 5px of the quote's budget. */
.review__name {
    margin-top: auto;
    padding-top: var(--sp10);
    line-height: 1.2;
    font-weight: 700;
    color: var(--black);
    font-family: var(--font-montserrat);
    font-size: var(--f16);
    text-transform: uppercase;
}

/* REVIEWS section responsive css */
/* Height is fixed at every breakpoint; only the floor moves, so short quotes stay readable. */
@media (max-width:767.98px) {
    .review {
        min-width: min(300px, 80vw)
    }
}


/* 10. Footer */
.footer{
   background-color:var(--black);
   color:var(--white);
   padding-block:var(--sp100) var(--sp30);
   overflow-x:clip
}
.footer__top{
   display:grid;
   grid-template-columns:1fr 1fr;
   gap:var(--sp50);
   padding-bottom:var(--sp40);
   border-bottom:1px solid var(--white);
   @media (max-width:1366.98px){    
      grid-template-columns:1fr 0.8fr;
   }
   @media (max-width:991.98px){    
      grid-template-columns:1fr 1fr;
   }
   @media (max-width:767.98px){    
      grid-template-columns:1fr;
   }
   & .footer__brand p{
      margin-top: 0;
   }
}
.footer__logo{
   width:230px;
   height:auto;
   margin-bottom:26px
}
.footer__corp{
   font-weight:700;
   font-size:var(--f14);
   text-transform:uppercase;
   margin-bottom:8px
}
/* Unclassed address/email <p> only — as `.footer__brand p` it also overrode .footer__corp's smaller uppercase size. */
.footer__brand>p:not([class]){
   font-size:var(--f16);
   
}
.footer__find-title{
   font-size:var(--f24);
   color:var(--orange);
   text-transform:capitalize;
   margin-bottom:8px
}
.footer__find>p{
   color:#dcdcdc;
   margin-bottom:16px
}
.footer__cols{
   display:flex;
   flex-wrap:wrap;
   gap:var(--sp40);
   padding-block:var(--sp40);
   justify-content:space-between;
   @media (max-width:1366.98px){    
      display:grid;
      grid-template-columns:1fr 1fr 1fr 1fr 1fr;
   }
   @media (max-width:991.98px){    
      grid-template-columns:1fr 1fr 1fr;
   }
   @media (max-width:767.98px){    
      grid-template-columns:1fr 1fr;
   }
   @media (max-width:575.98px){    
      grid-template-columns:1fr;
   }
}
.footer__col h3{
   font-size:var(--f24);
   color:var(--orange);
   text-transform:uppercase;
   margin-bottom:var(--sp30);
   @media (max-width:991.98px){    
      margin-bottom:var(--sp15)
   }
}
.footer__col li:not(:last-child){
   margin-bottom:5px
}
.footer__col a{
   font-weight:700;
   font-size:var(--f14);
   color:var(--white);
   text-transform:uppercase;
   transition: var(--transition);
    
}
.footer__col a:hover,.footer__col a.is-active{
   color:var(--orange)
}
/* .footer__col--wide ul{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--sp40); @media (max-width:767.98px){ grid-template-columns:1fr; } } */
.footer__bar{
   display:flex;
   align-items:center;
   justify-content:space-between;
   gap:20px;
   padding-top:26px;
   border-top:1px solid var(--white);
   flex-wrap:wrap
}
.footer__bar p{
   font-size:var(--f16);
   
}
.footer__social{
   display:flex;
   gap:18px;
   & li a:hover svg{
      filter : var(--orange-filter);
   }
}
.footer__social svg{
   width:20px;
   height:20px;
   fill:var(--white)
}
.footer__social a:hover svg{
   fill:var(--orange)
}


/* ---------- zip search ---------- */
/* Restated from banner.css, whose rules are nested inside .banner. Keep the two in step. */
footer{
   & .banner__search {
        display: flex;
        align-items: stretch;
        max-width: 590px;
        background: var(--white);
        box-shadow: var(--shadow-md);
        padding: var(--sp15);
        border: 1px solid var(--orange);

        /* Same breakpoint the hero stacks at; side by side is too narrow on a phone. */
        @media (max-width: 575.98px) {
            flex-direction: column;
            align-items: stretch;
        }
    }

    & .banner__search-field {
        display: flex;
        align-items: center;
        gap: var(--sp10);
        flex: 1 1 auto;
        min-width: 0;
        padding-inline: calc(var(--sp25)/2) var(--sp25);

        & .sr-only {
         color: var(--black);
        }
    }

    & .banner__search-icon {
        flex: 0 0 auto;
        font-size: var(--f18);
        color: #A1A1AA;
    }

    & .banner__search-input {
        width: 100%;
        padding-block: var(--sp20);
        border: 0;
        background: transparent;
        font-family: var(--font-montserrat);
        font-size: var(--f16);
        text-transform: uppercase;
        color: #A1A1AA;
        font-weight: bold;

        &::placeholder {
            color: #A1A1AA;
        }
    }

    & .banner__search-btn {
        flex: 0 0 auto;
        border: 0;
        cursor: pointer;
    }
}


/* 11. Audience */
/* ===================================================================
   AUDIENCE / SERVICES section
   =================================================================== */
.audience {
    background: transparent;

    & .audience__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--g40);
        transition: var(--transition);

        /* hover expand — pointer devices / tablet up */
        @media screen and (min-width: 768px) {
            &:has(.acard--orange:hover) {
                grid-template-columns: 1.5fr 1fr;
            }

            &:has(.acard--dark:hover) {
                grid-template-columns: 1fr 1.5fr;
            }
        }

        @media (max-width: 767.98px) {
            grid-template-columns: 1fr;
            transform: none;
            margin: 0 0 10px;
        }
    }

    /* audience cards — Figma node 468:461 (padding 75, icon 70, gaps 16/30) */
    & .acard {
        border-radius: 0;
        padding: var(--sp40) var(--sp30);
        color: var(--white);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        box-shadow: var(--shadow-lg);
        min-height: 420px;
        @media (max-width: 767.98px) {
            min-height: 400px;
        }
        & .acard__icon {
            width: 70px;
            height: 70px;
            border-radius: 0;
            background: #18181b;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            margin-bottom: var(--sp15);
        }

        & .acard__title {
            margin-bottom: var(--sp30);
        }

        & p {
            margin-bottom: auto;
        }

        /* variants */
        &.acard--orange {
            background: var(--gradient2);

            & .acard__icon {
                color: var(--orange);
            }
        }

        &.acard--dark {
            background: var(--dark) url(../images/background-pattern.webp);
            background-size: auto;
            background-position: top left;
            background-repeat: repeat;

            & .acard__icon {
                background: var(--orange);
                color: var(--white);
            }
        }

       
    }

   
}


/* 12. Get Started Section */
/* ===================================================================
   HOW TO GET STARTED section
   =================================================================== */
.started {
    position: relative;

    & .section-lead p {
        font-size: var(--f20);
    }

    /* ---------- tabs ---------- */
    & .tabs {
        display: flex;
        justify-content: center;
        gap: 60px;
        margin-bottom: 80px;

        @media (max-width: 1024.98px) {
            margin-bottom: 50px;
        }

    }

    & .tab {
        font-family: var(--font-staarliches);
        font-size: var(--f30);
        text-transform: uppercase;
        letter-spacing: .5px;
        color: rgba(0, 0, 0, .4);
        padding-bottom: var(--sp10);
        border-bottom: 3px solid transparent;
        transition: color var(--ease), border-color var(--ease);

        &:hover {
            color: var(--ink);
        }

        &.is-active {
            color: var(--ink);
            border-color: var(--orange);
        }
    }

    /* The incoming panel fades and slides up; [hidden] handles the outgoing one. */
    & .tabs__panel {
        opacity: 1;

        @media (prefers-reduced-motion: no-preference) {
            opacity: 0;
            transform: translateY(16px);
            transition: opacity .35s ease,
                transform .35s cubic-bezier(.16, 1, .3, 1);

            &.is-active {
                opacity: 1;
                transform: none;
            }
        }

        &:focus-visible {
            outline: 0;
        }

        & .tab-description {
            text-align: center;
            margin: -40px 0 60px;
        }
    }

    /* Optional per-tab intro between the tab row and the steps; the wysiwyg emits its own paragraphs. */
    & .tab-desc {
        max-width: 1000px;
        margin-inline: auto;
        margin-bottom: var(--sp40);
        text-align: center;

        & p {
            font-size: var(--f20);
        }
    }

    /* ---------- steps grid ---------- */
    & .steps {
        /* width of one item in the 4-up row — reused by the centred short-row cases */
        --steps-col: calc((100% - (var(--sp30) * 3)) / 4);

        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        justify-content: center;
        gap: var(--sp50) var(--sp30);
        list-style: none;

        /* Fewer than four steps: keep the 4-up width and centre the row instead. */
        &:has(> .step:nth-child(3):last-child) {
            grid-template-columns: repeat(3, var(--steps-col));
        }

        &:has(> .step:nth-child(2):last-child) {
            grid-template-columns: repeat(2, var(--steps-col));
        }

        &:has(> .step:only-child) {
            grid-template-columns: var(--steps-col);
        }

        @media (max-width: 1024.98px) {
            --steps-col: calc((100% - var(--sp40)) / 2);

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

            /* 3 and 2 steps fill the two columns again — only a single step centres */
            &:has(> .step:nth-child(3):last-child),
            &:has(> .step:nth-child(2):last-child) {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            /* an odd 3rd step ends up alone on row 2 — centre it at column width */
            &:has(> .step:nth-child(3):last-child)>.step:last-child {
                grid-column: span 2;
                width: var(--steps-col);
                margin-inline: auto;
            }
        }

        @media (max-width: 575.98px) {
            grid-template-columns: 1fr;

            /* single column here, so the short-row cases stack full width too */
            &:has(> .step:nth-child(3):last-child),
            &:has(> .step:nth-child(2):last-child),
            &:has(> .step:only-child) {
                grid-template-columns: 1fr;
            }

            /* Clear the tablet centring; an auto margin would shrink the step in a single-column grid. */
            &:has(> .step:nth-child(3):last-child)>.step:last-child {
                grid-column: auto;
                width: auto;
                margin-inline: 0;
            }
        }
    }

    & .step {
        position: relative;
        padding-top: 0px;

        /* Icon pop ladder: MotionFlow lands .mf-animate on every step at once, so stagger them here. */
        --icon-pop-delay: .5s;

        &:nth-child(2) {
            --icon-pop-delay: .65s;
        }

        &:nth-child(3) {
            --icon-pop-delay: .8s;
        }

        &:nth-child(4) {
            --icon-pop-delay: .95s;
        }

        &:nth-child(5) {
            --icon-pop-delay: 1.1s;
        }

        &:nth-child(6) {
            --icon-pop-delay: 1.25s;
        }

        &:nth-child(7) {
            --icon-pop-delay: 1.4s;
        }

        &:nth-child(8) {
            --icon-pop-delay: 1.55s;
        }

        & .step__num {
            position: absolute;
            top: 0;
            right: 0;
            font-family: var(--font-staarliches);
            font-size: var(--f160);
            color: #D7D7D7;
            line-height: 0.5;
            z-index: 0;
            opacity: .3;

            @media (max-width: 1199.98px) {
                line-height: 0.8;
            }
        }

        & .step__icon {
            position: relative;
            z-index: 1;
            width: 80px;
            height: 80px;
            border-radius: var(--r-full);
            background: var(--gradient2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            font-size: var(--f35);
            margin-bottom: var(--sp30);

            & svg {
                max-width: 44px;
                max-height: 44px;
            }

            transition: scale var(--ease-out);
            transition-delay: var(--icon-pop-delay);

            @media (max-width: 1199.98px) {
                width: 70px;
                height: 70px;

                & svg {
                    max-width: 32px;
                    max-height: 32px;
                }
            }
        }

        /* The icon pops from scale 0 as its step reveals; gated so no-JS keeps it full size. */
        &[data-mf-animation]:not(.mf-animate) .step__icon {
            scale: 0;
        }

        & .step__title {
            position: relative;
            font-family: var(--font-montserrat);
            font-weight: 700;
            font-size: var(--f22);
            text-transform: uppercase;
            margin-bottom: var(--sp10);
        }

        /* ACF WYSIWYG output: the class sits on the wrapper, so p, ul, strong and a all inherit. */
        & .step__text {
            position: relative;
            font-family: var(--font-montserrat);
            color: var(--black);
            font-size: var(--f18);

            & p {
                font: inherit;
                color: inherit;
            }

            & p+p,
            & ul,
            & ol {
                margin-top: .75em;
            }

            & ul,
            & ol {
                padding-left: 1.25em;
            }

            & a {
                color: var(--orange);
                text-decoration: underline;
                text-underline-offset: 2px;
            }
        }
    }
}


/* 13. Video & Popup */
/* ===================================================================
   VIDEO component (shared — not scoped to .easy)
   =================================================================== */
.video {
    position: relative;
    display: block;
    overflow: hidden;
    background: #2b2d2c;
    max-height: 645px;
    aspect-ratio: 16/10;

    & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* & img already sets width and object-fit, so this needs the extra class to win. */
    & img.video__logo {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 1;
    }

    &.video--dark {
        display: flex;
        align-items: center;
        justify-content: center;

        &:before {
            content: "";
            background: var(--text);
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0.7;
            left: 0;
            top: 0;
            pointer-events: none;
        }
    }

    & .video__play {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 75px;
        height: 75px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: var(--transition);

        & svg {
            width: 75px;
            height: 75px;

            @media (max-width: 991.98px) {
                width: 50px;
                height: 50px;
            }
        }
    }
}

/* ===================================================================
   VIDEO POPUP
   =================================================================== */
/* One modal serves every [data-video] on the page (see vendor.js). */
.vmodal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;

    &.is-open {
        display: flex;
    }

    & .vmodal__overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .82);
    }

    & .vmodal__dialog {
        position: relative;
        z-index: 1;
        width: min(960px, 92vw);
    }

    & .vmodal__frame {
        position: relative;
        width: 100%;
        aspect-ratio: 16/9;
        background: var(--black);
        border-radius: var(--r-sm);
        overflow: hidden;

        & iframe,
        & video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }
    }

    & .vmodal__placeholder {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: var(--white);
        padding: 24px;
        font-family: var(--font-montserrat);
        font-size: var(--f16);

        & code {
            background: rgba(255, 255, 255, .14);
            padding: 2px 6px;
            border-radius: 4px;
            margin: 0 4px;
        }
    }

    & .vmodal__close {
        position: absolute;
        top: -48px;
        right: 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--white);
        color: var(--black);
        font-size: var(--f24);
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;

        @media screen and (max-width: 767.98px) {
            top: -30px;
            width: 25px;
            height: 25px;
            font-size: 24px;
        }
        &:hover {
            background: var(--orange);
            color: var(--white);
        }

    
    }
}

/* A compact one-line variant of these .vmodal rules was dropped here as duplicate. */


/* 14. FAQ */
/* ===================================================================
   FAQ section
   =================================================================== */
.faq {
    position: relative;

    /* One accordion in two columns; [data-accordion-group] on .faq__cols makes the lists behave as one. */
    & .faq__cols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: start;

        @media (max-width: 991.98px) {
            grid-template-columns: 1fr;
            gap: 2px;
        }
    }
}

/* ===================================================================
   ACCORDION component (shared — not scoped to .faq)
   =================================================================== */
.accordion {
    display: flex;
    gap: 2px;
    flex-direction: column;

    & .accordion__item {
        background: var(--white);
        box-shadow: 0 1px 0 rgba(0, 0, 0, .02);

        &:first-child {
            box-shadow: var(--shadow-md);
        }

        & .accordion__heading {
            margin: 0;
            font: inherit;
            letter-spacing: inherit;
        }

        & .accordion__trigger {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            width: 100%;
            text-align: left;
            padding: 20px 30px;
            font-weight: 700;
            font-size: var(--f20);
            color: var(--black);
            text-transform: uppercase;

            &:focus {
                outline-offset: 0;
            }

            & .accordion__ico {
                position: relative;
                width: 26px;
                height: 26px;
                border: 2px solid var(--orange);
                border-radius: var(--r-full);
                flex: none;

                &::before,
                &::after {
                    content: "";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background: var(--orange);
                    transition: var(--transition);
                }

                &::before {
                    width: 12px;
                    height: 2px;
                }

                &::after {
                    width: 2px;
                    height: 12px;
                    transition: var(--ease);
                }
            }

            &:hover {
                background: var(--orange);
                color: var(--white);

                & .accordion__ico {
                    border: 2px solid var(--white);

                    &::before,
                    &::after {
                        background: var(--white);
                    }
                }
            }
        }

        /* Smooth open and close: the 0fr to 1fr grid row animates to the answer's natural height. */
        & .accordion__panel {
            display: grid;
            grid-template-rows: 0fr;
            visibility: hidden;

            @media (prefers-reduced-motion: no-preference) {
                transition: grid-template-rows .4s cubic-bezier(.16, 1, .3, 1),
                    visibility .4s linear;
            }
        }

        /* Answer copy comes from the ACF WYSIWYG — styled off the wrapper, no class on the <p>. */
        & .accordion__panel-inner {
            overflow: hidden;
            min-height: 0;
            font-size: var(--f16);
            color: var(--black);

            & .accordion-content {
                padding: 10px 30px 30px;
            }

            & p {
                font: inherit;
                color: inherit;
            }

            & p+p,
            & ul,
            & ol {
                margin-top: 1em;
            }

            & ul,
            & ol {
                padding-left: 1.25em;
            }

            & a {
                color: var(--orange);
                text-decoration: underline;
                text-underline-offset: 2px;
            }
        }

        /* ---------- open state ---------- */
        &.is-open {
            & .accordion__trigger {
                color: var(--orange);

                & .accordion__ico::after {
                    transform: translate(-50%, -50%) scaleY(0);
                }

                &:hover {
                    background: var(--white);
                    color: var(--orange);

                    & .accordion__ico {
                        border: 2px solid var(--orange);

                        &::before,
                        &::after {
                            background: var(--orange);
                        }
                    }
                }
            }

            & .accordion__panel {
                grid-template-rows: 1fr;
                visibility: visible;
            }
        }
    }
}


/* 15. CTA Section */
/* ===================================================================
   CTA BAND section
   =================================================================== */
.cta__box {
    position: relative;
    background-color: var(--black);
    color: var(--white);
    overflow: hidden;
    text-align: center;
    padding: 145px 75px;
    @media (max-width: 579.98px) {
        border: 10px solid var(--orange);
    }
    &>* {
        position: relative;
        z-index: 1;
    }

    /* Scoped past & > * above; as plain .cta__blob it lost on equal specificity. */
    &>.cta__blob {
        position: absolute;
        background: var(--gradient2);
        border-radius: var(--r-full);
        z-index: 0;
        transform: scale(0);
        transition: transform 0.3s ease-in-out;
      

        &.cta__blob--tr {
            width: 290px;
            height: 290px;
            right: -145px;
            top: -145px;

            @media (max-width: 991.98px) {
                width: 230px;
                height: 230px;
            }
        }

        &.cta__blob--bl {
            width: 510px;
            height: 510px;
            left: -260px;
            bottom: -260px;

            @media (max-width: 991.98px) {
                width: 400px;
                height: 400px;
                left: -270px;
                bottom: -270px;
            }

            @media (max-width: 767.98px) {
                width: 250px;
                height: 250px;
                left: -150px;
                bottom: -150px;
            }
        }
        @media (max-width: 579.98px) {
            display: none;
        }
    }

    &.mf-animate >.cta__blob {
        transform: scale(1);
        transition-delay: 0.8s;
        /* transition: transform 0.3s ease-in-out; */
    }

    & .cta__eyebrow {
        color: var(--orange);
        font-weight: 700;
        letter-spacing: .312em;
        text-transform: uppercase;
        font-size: var(--f20);
        margin-bottom: var(--sp30);
    }

    & .heading-orange {
        font-size: var(--f65);
        margin-bottom: var(--sp15);
    }

    & .cta__lead {
        font-size: var(--f20);
        color: var(--white);
        margin: 0 auto;
    }

    & .cta__actions {
        display: flex;
        gap: 18px;
        justify-content: center;
        margin-top: var(--sp65);
        flex-wrap: wrap;

      
    }

    /* responsive */
    @media (max-width: 1199.98px) {
        padding: 100px 50px;
    }

    @media (max-width: 991.98px) {
        padding: 80px 50px;
    }

    @media (max-width: 767.98px) {
        padding: var(--sp50) var(--sp30);
    }
}


/* 16. Easy Section */
/* ===================================================================
   SEE HOW EASY section
   =================================================================== */
.easy {
    position: relative;

    & .easy__grid {
        display: grid;
        grid-template-columns: 1fr 4fr;
        gap: var(--sp65) var(--sp55);
        align-items: center;

        @media (max-width: 1199.98px) {
            grid-template-columns: 1fr 2fr;
        }

        @media (max-width: 991.98px) {
            grid-template-columns: 1fr;           
        }
    }

    & .easy__text p {
        font-family: var(--font-montserrat);
        font-size: var(--f16);
        color: var(--black);
        text-align: left;
    }

    & .easy__media .video {
        width: 100%;
    }   
}


/* 17. Testimonial */
.testimonial {
    /* Fixed-size dots get a section variable, since sp tokens step down per breakpoint. */
    --dot-size: 20px;

    /* The gap shared by the slide row and the dots row, keeping the dots locked to the copy. */
    --col-gap: var(--sp50);

    /* The rhythm above and below comes from the global `main section` margin-bottom. */
    padding-block: 0;

    /* The dark noise panel fills the container's inner width and clips the two corner circles. */
    & .testimonial__panel {
        position: relative;
        padding: var(--sp80);
        background-color: var(--dark);
        color: var(--white);
        overflow: hidden;
    }

    & .testimonial__blob {
        position: absolute;
        z-index: 0;
        width: 300px;
        height: 300px;
        background: var(--gradient1);
        border-radius: var(--r-full);
        transition: scale var(--ease-out);
        /* let the panel's own fade-up land first, then grow the circles */
        transition-delay: .5s;

        /* centred on the panel's top-right corner, so a quarter of it shows */
        &.testimonial__blob--tr {
            top: -150px;
            right: -150px;
        }

        /* nudged inside the bottom-left corner; the video covers its top half */
        &.testimonial__blob--bl {
            bottom: -95px;
            left: -95px;
        }
    }

    /* The circles grow from scale 0 as the panel reveals, each centred on its own corner. */
    & .testimonial__panel[data-mf-animation]:not(.mf-animate) .testimonial__blob {
        scale: 0;
    }

    /* the stage stacks above the blobs and anchors the absolutely placed dots */
    & .testimonial__stage {
        position: relative;
        z-index: 1;

        @media (max-width: 1365.98px) {
            padding-bottom: calc(var(--sp65));
        }
    }

    /* One testimonial per view: the two-column row lives on the slide, not the slider. */
    & .testimonial__slide,
    & .testimonial__dots-row {
        display: grid;
        grid-template-columns: 600fr 650fr;
        gap: var(--col-gap);
    }

    & .testimonial__slide {
        align-items: center;
        height: auto;
    }

    /* The shared .video component supplies the play icon and cover; only the ratio and colour are ours. */
    & .testimonial__video {
        width: 100%;
        aspect-ratio: 600 / 500;

        & .video__play {
            color: var(--orange-card);
        }

        /* The thumbnail zooms on hover, following the shared component's tag selector rather than a new class. */
        & img {
            transition: var(--transition);
        }

        &:hover img,
        &:focus-visible img {
            scale: 1.08;
        }

        /* the shared component centres the icon with a translate, so the nudge has to carry that translate with it */
        &:hover .video__play,
        &:focus-visible .video__play {
            transform: translate(-50%, -50%) scale(1.06);
        }

        /* the global :focus rule clears every outline, so the keyboard state is re-stated here (§9) */
        &:focus-visible {
            outline: 2px solid var(--orange-card);
            outline-offset: 4px;
        }
    }

    & .testimonial__content {
        /* The dots belong to the slider, so they are laid over this column rather than in its flow. */
        padding-bottom: calc(var(--sp65) + var(--sp30));
        @media (max-width: 1365.98px) {
            padding-bottom: 0;
        }
    }

    & .testimonial__title {
        margin-bottom: var(--sp20);
        text-transform: uppercase;
    }

    & .btn {
        margin-top: var(--sp35);
    }

    /* Swiper positions .swiper-pagination absolutely; this anchors it to the copy column instead. */
    & .testimonial__dots-row {
        position: absolute;
        inset-inline: 0;
        bottom: var(--sp20);
    }

    & .testimonial__dots {
        position: static;
        grid-column: 2;
        display: flex;
        align-items: center;
        gap: var(--sp10);

        /* hollow white ring by default, solid orange for the current slide */
        & .swiper-pagination-bullet {
            width: var(--dot-size);
            height: var(--dot-size);
            margin: 0;
            background: transparent;
            border: 2px solid var(--white);
            opacity: 1;

            &:hover {
                background: var(--orange-card);
                border-color: var(--orange-card);
            }

            &:focus-visible {
                outline: 2px solid var(--white);
                outline-offset: 3px;
            }
        }

        & .swiper-pagination-bullet-active {
            background: var(--orange);
            border-color: var(--orange);
        }
    }
}

/* TESTIMONIAL section responsive css */
/* No breakpoint needed: sp80 already steps 80 to 40 through the global block in vendor.css. */
@media (max-width: 1199.98px) {
    .testimonial {
        --col-gap: var(--g40);
    }
}

@media (max-width: 991.98px) {
    .testimonial {
        --dot-size: 16px;
        /* stacked: video on top, copy under it */
        & .testimonial__panel{
            padding: var(--sp65) 0;
        }
        & .testimonial__dots {
            margin-top: var(--sp10);
            & .swiper-pagination-bullet{
                border-width: 1px;
            }
        }
        & .testimonial__slide{
            align-items: flex-start;
            align-content: flex-start;
            padding-inline: var(--sp30);
        }
        & .testimonial__slide,
        & .testimonial__dots-row {
            grid-template-columns: 1fr;
        }

        & .testimonial__video {
            aspect-ratio: 16 / 9;
        }

        /* nothing overlays the copy now, so the dots rejoin the flow below it */
        & .testimonial__content {
            padding-bottom: 0;
        }

        & .testimonial__dots-row {
            position: static;
            margin-top: var(--sp30);
        }

        & .testimonial__dots {
            grid-column: auto;
            justify-content: center;
        }

        /* Stacked, the copy reaches the bottom-left corner, so that circle pulls back to a small arc. */
        & .testimonial__blob {
            width: 200px;
            height: 200px;

            &.testimonial__blob--tr {
                top: -100px;
                right: -100px;
            }

            &.testimonial__blob--bl {
                bottom: -150px;
                left: -150px;
            }
        }
    }
}

@media (max-width: 575.98px) {
    .testimonial {
        & .testimonial__blob {
            width: 150px;
            height: 150px;

            &.testimonial__blob--tr {
                top: -75px;
                right: -75px;
            }

            &.testimonial__blob--bl {
                bottom: -110px;
                left: -110px;
            }
        }
    }
}


/* 18. Thank You */
.thank-you {
    /* The header is absolute over the page, so this section clears it the way .error-404 does. */
    --head-clear: 170px;

    position: relative;
    padding-block: calc(var(--head-clear) + var(--sectiongapHalf)) var(--sectionGap);
    /* The only section on the page and dark like the footer, so the global margin-bottom is dropped. */
    margin-bottom: 0;
    background-color: var(--footer);
    color: var(--white);
    text-align: center;

    & .thank-you__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 900px;
        margin-inline: auto;
    }

    /* success tick — a gradient disc, so it reads as a confirmation and not as another decorative section icon */
    & .thank-you__badge {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 88px;
        height: 88px;
        margin-bottom: var(--sp30);
        background: var(--gradient2);
        border-radius: var(--r-full);
        color: var(--white);
    }

    & .thank-you__title {
        margin-bottom: var(--sp20);
        text-transform: uppercase;
    }

    & .thank-you__text {
        max-width: 700px;
        font-size: var(--f20);
    }

    & .thank-you__note {
        max-width: 700px;
        margin-top: var(--sp15);
        font-size: var(--f16);
        color: var(--line);
    }

    & .thank-you__steps-wrap {
        width: 100%;
        margin-top: var(--sp65);
        padding-top: var(--sp40);
        border-top: 1px solid var(--line-dark);
    }
}

/* The button row belongs to both parents, so it is defined once here rather than copied. */
.thank-you__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp20);
    margin-top: var(--sp50);
}

 /* A component heading, not the section title, so it keeps its own class and token size. */
      
.thank-you-card {
        & .thank-you__steps-title {
        margin-bottom: var(--sp40);
        font-size: var(--f35);
        color: var(--orange);
        text-transform: uppercase;
    }

    & .thank-you__steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--g40);
        list-style: none;
        text-align: left;
    }

    & .thank-you__step {
        padding: var(--sp30);
        background: var(--dark-card);
        border: 1px solid var(--line-dark);
        border-radius: var(--r-md);
    }

    & .thank-you__step-num {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-bottom: var(--sp20);
        background: var(--orange);
        border-radius: var(--r-full);
        /* Montserrat, not Staatliches: the condensed "1" reads as an I at this size */
        font-size: var(--f20);
        font-weight: 700;
        line-height: 1;
        color: var(--white);
    }

    & .thank-you__step-title {
        margin-bottom: var(--sp10);
        font-size: var(--f24);
    }

    & .thank-you__step-text {
        font-size: var(--f16);
        color: var(--line);
    }

    & .thank-you__contact {
        width: 100%;
        margin-top: var(--sp65);
        padding-top: var(--sp40);
        border-top: 1px solid var(--line-dark);
    }

    & .thank-you__contact-title {
        display: block;
        margin-bottom: var(--sp25);
        font-weight: 600;
        color: var(--orange);
        text-transform: uppercase;
    }

    & .thank-you__contact-list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: var(--sp20) var(--sp50);
        list-style: none;
    }

    & .thank-you__contact-link {
        display: inline-flex;
        align-items: center;
        gap: var(--sp10);
        font-size: var(--f18);
        font-weight: 600;
        color: var(--white);
        transition: var(--transition);

        &:hover,
        &:focus-visible {
            color: var(--orange);
        }
    }

    & .thank-you__contact-icon {
        flex: 0 0 auto;
    }
}

/* THANK YOU section responsive css */
@media (max-width: 991.98px) {
    .thank-you-card {
        & .thank-you__steps {
            grid-template-columns: 1fr;
        }
    }
}

@media (max-width: 767.98px) {
    /* .btn is full width below 576px (vendor.css), so the pair stacks — give it the room to do that cleanly */
    .thank-you__actions {
        width: 100%;
    }

    .thank-you-card {
        & .thank-you__badge {
            width: 72px;
            height: 72px;
        }

        & .thank-you__text {
            font-size: var(--f18);
        }

        & .thank-you__contact-list {
            gap: var(--sp20) var(--sp30);
        }

        & .thank-you__contact-link {
            font-size: var(--f16);
        }
    }
}


/* 19. Error 404 */
.error-404 {
    /* The header is absolute over the page, so this section clears it the way .banner does. */
    --head-clear: 170px;

    position: relative;
    padding-block: calc(var(--head-clear) + var(--sectiongapHalf)) var(--sectionGap);
    /* The only section on the page and dark like the footer, so the global margin-bottom is dropped. */
    margin-bottom: 0;
    /* Same dark as the footer, so the page reads as one surface with no seam. */
    background-color: var(--footer);
    color: var(--white);
    text-align: center;

    & .error-404__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 900px;
        margin-inline: auto;
    }

    /* The oversized display number in Staatliches, painted with the brand gradient; the colour is the fallback. */
    & .error-404__code {
        display: block;
        font-family: var(--font-staarliches);
        font-size: var(--f160);
        line-height: var(--lhTight);
        color: var(--orange);
        background: var(--gradient2);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    & .error-404__title {
        margin-bottom: var(--sp20);
        text-transform: uppercase;
    }

    & .error-404__text {
        max-width: 700px;
        font-size: var(--f20);
    }

    & .error-404__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: var(--sp20);
        margin-top: var(--sp40);
    }

    & .error-404__links {
        width: 100%;
        margin-top: var(--sp65);
        padding-top: var(--sp40);
        border-top: 1px solid var(--line-dark);
    }

    & .error-404__links-title {
        display: block;
        margin-bottom: var(--sp25);
        font-weight: 600;
        color: var(--orange);
        text-transform: uppercase;
    }

    & .error-404__list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: var(--sp20) var(--sp50);
    }
}

/* ERROR 404 section responsive css */
@media (max-width: 767.98px) {
    .error-404 {
        & .error-404__text {
            font-size: var(--f18);
        }

        /* .btn is full width below 576px (vendor.css), so the pair stacks — give it the room to do that cleanly */
        & .error-404__actions {
            width: 100%;
        }

        & .error-404__list {
            gap: var(--sp20) var(--sp30);
        }
    }
}


/* 20. Search Results */
.search-result {
    /* The header is absolute over the page, so this section clears it the way .error-404 does. */
    --head-clear: 170px;

    padding-block: calc(var(--head-clear) + var(--sectiongapHalf)) 0;

    /* ---------- heading, count and the search box ---------- */
    & .search-results__head {
        max-width: 900px;
        margin-inline: auto;
        margin-bottom: var(--sectiongapHalf);
        text-align: center;
    }

    & .search-results__title {
        font-family: var(--font-staarliches);
        font-size: var(--f50);
        line-height: var(--lhTight);
        text-transform: uppercase;
        margin-bottom: var(--sp15);
        /* A query is whatever someone typed, so a long unbroken string must wrap rather than widen the page. */
        overflow-wrap: anywhere;
    }

    & .search-results__count {
        font-size: var(--f18);
        color: var(--muted);
        margin-bottom: var(--sp30);
    }

    /* ---------- results ---------- */
    /* The grid itself is .blog-listing__grid, shared with the blog and news listings, so nothing is redeclared here. */

    & .search-results__pagination {
        margin-top: var(--sectiongapHalf);

        & ul {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: var(--sp10);
            list-style: none;
            padding: 0;
            margin: 0;
        }

        & .page-numbers {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 44px;
            min-height: 44px;
            padding-inline: var(--sp10);
            border: 1px solid var(--line);
            border-radius: var(--r-btn);
            font-family: var(--font-montserrat);
            font-size: var(--f16);
            font-weight: 700;
            color: var(--text);
            transition: var(--transition);
        }

        & a.page-numbers:hover {
            background: var(--gradient2);
            border-color: transparent;
            color: var(--white);
        }

        & .page-numbers.current {
            background: var(--gradient2);
            border-color: transparent;
            color: var(--white);
        }

        /* The gap glyph is not a control, so it takes neither the box nor the hit area. */
        & .page-numbers.dots {
            min-width: auto;
            border: 0;
        }
    }

    /* ---------- nothing matched ---------- */
    & .search-results__empty {
        max-width: 760px;
        margin-inline: auto;
        padding-bottom: var(--sectiongapHalf);
        text-align: center;
    }

    & .search-results__empty-text {
        font-size: var(--f18);
        line-height: var(--bodyLh);
        color: var(--muted);
        margin-bottom: var(--sp30);
    }

    & .search-results__suggested {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--sp20) var(--sp40);
        list-style: none;
        padding: 0;
        margin: 0;
    }

    @media (max-width: 991.98px) {
        --head-clear: 140px;
    }
}

/* ===================================================================
   SEARCH FORM
   Rendered by searchform.php, so it is not scoped to the results page.
   =================================================================== */
.search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: var(--sp10);
    max-width: 640px;
    margin-inline: auto;

    & .search-form__field {
        flex: 1 1 320px;
        min-width: 0;
        padding: var(--sp15) var(--sp20);
        border: 1px solid var(--line);
        border-radius: var(--r-btn);
        background: var(--white);
        font-family: var(--font-montserrat);
        font-size: var(--f16);
        color: var(--text);

        &::placeholder {
            color: var(--muted);
        }

        &:focus-visible {
            outline: 2px solid var(--orange);
            outline-offset: 2px;
        }
    }

    /* .btn is display:block with its own padding, so it only needs the row's height here. */
    & .search-form__submit {
        flex: 0 0 auto;
        border-radius: var(--r-btn);
        padding-block: var(--sp15);
    }

    @media (max-width: 575.98px) {
        & .search-form__field {
            flex: 1 1 100%;
        }

        & .search-form__submit {
            flex: 1 1 100%;
        }
    }
}


/* 21. Endorse Tabs */
/* Vertical tab layout: rail left, panel right. .tabs and .tab are the global component driven by initTabs(). */
.endorse-tabs {
    /* padding-block: var(--sectionGap); */

    & .endorse-tabs__inner {
        display: grid;
        grid-template-columns: 420px minmax(0, 1fr);
        gap: var(--g40);
        align-items: start;
    }

    /* ---------- left rail ---------- */
    & .tabs {
        top: var(--sp30);
        display: flex;
        flex-direction: column;
        gap: var(--sp10);
    }

    & .tab {
        display: flex;
        align-items: center;
        gap: var(--sp15);
        width: 100%;
        padding: var(--sp20) var(--sp25);
        background: var(--white);
        box-shadow: var(--shadow-sm);
        text-align: left;
        transition: var(--transition);

        &.is-active {
            background: var(--gradient2);
            box-shadow: var(--shadow-md);
        }
    }

    & .endorse-tabs__code {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        flex: none;
        background: var(--cdf0);
        font-family: var(--font-staarliches);
        font-size: var(--f24);
        line-height: 1;
        color: var(--orange);
        transition: var(--transition);

        .tab.is-active & {
            background: var(--white);
        }
    }

    & .endorse-tabs__label {
        font-family: var(--font-montserrat);
        font-weight: 700;
        font-size: var(--f16);
        text-transform: uppercase;
        letter-spacing: .5px;
        color: var(--muted-2);
        transition: var(--transition);

        .tab:hover & {
            color: var(--ink);
        }

        .tab.is-active & {
            color: var(--white);
        }
    }

    /* ---------- right panel ---------- */
    /* Column and panel both fill the grid row, so a short panel still runs the rail's height. */
    & .endorse-tabs__panels {
        height: 100%;
    }

    /* [hidden] takes the outgoing panel out of flow, so the grid row cannot jump. */
    & .endorse-tabs__panel {
        height: 100%;
        padding: var(--sp50);
        background: var(--white);
        box-shadow: var(--shadow-sm);
        opacity: 1;

        @media (prefers-reduced-motion: no-preference) {
            opacity: 0;
            transform: translateY(16px);
            transition: opacity .35s ease,
                transform .35s cubic-bezier(.16, 1, .3, 1);

            &.is-active {
                opacity: 1;
                transform: none;
            }
        }

        &:focus-visible {
            outline-offset: 4px;
        }
    }

    & .endorse-tabs__panel-title {
        margin-bottom: var(--sp20);
    }

    & .endorse-tabs__text {
        font-size: var(--f18);
        color: var(--muted-2);

        & p+p {
            margin-top: var(--sp15);
        }
    }

    & .endorse-tabs__best {
        margin-top: var(--sp35);
        padding: var(--sp25) var(--sp30);
        background: var(--cdf7);
        border-left: 4px solid var(--orange);
    }

    & .endorse-tabs__best-title {
        margin-bottom: var(--sp10);
        font-family: var(--font-montserrat);
        font-weight: 700;
        font-size: var(--f16);
        text-transform: uppercase;
        letter-spacing: .5px;
        color: var(--orange);
    }

    & .endorse-tabs__best-text {
        font-size: var(--f18);
        color: var(--ink);
    }
}

.endorsement-page_custom {
    .driving-classes__list {
        counter-reset: rest;

        .driving-classes__item {
            align-items: flex-start;

            &::before {
                content: counter(rest);
                counter-increment: rest;
                font-size: var(--f20);
                position: absolute;
                display: flex;
                width: 30px;
                height: 30px;
                justify-content: center;
                align-items: center;
                color: var(--white);
                font-weight: 600;
                background-color: var(--orange);
            }

            svg {
                opacity: 0;
            }
        }
    }
}

.endorsement-page_custom .driving-classes__list .driving-classes__item p br {
    display: block;
}

.endorsement-page_custom .driving-classes__list .driving-classes__item p span {
    font-weight: 400;
    top: 6px;
    position: relative;
}

/* ENDORSE TABS section responsive css */
@media (max-width: 1365.98px) {
    .endorse-tabs {
        & .endorse-tabs__inner {
            grid-template-columns: 340px minmax(0, 1fr);
        }

        & .endorse-tabs__panel {
            padding: var(--sp40);
        }
    }
}

@media (max-width: 991.98px) {
    .endorse-tabs {
        & .endorse-tabs__inner {
            grid-template-columns: 1fr;
        }

        /* The rail becomes a scrolling row above the panel; arrow keys read left and right. */
        & .tabs {
            position: static;
            flex-direction: row;
            overflow-x: auto;
            padding-bottom: var(--sp10);
            scroll-snap-type: x mandatory;
        }

        & .tab {
            width: auto;
            flex: none;
            padding: var(--sp15) var(--sp20);
            scroll-snap-align: start;
        }

        & .endorse-tabs__label {
            white-space: nowrap;
        }
    }
}

@media (max-width: 575.98px) {
    .endorse-tabs {
        & .tab {
            gap: var(--sp10);
        }

        & .endorse-tabs__code {
            width: 30px;
            height: 30px;
            font-size: var(--f20);
        }

        & .endorse-tabs__label {
            font-size: var(--f16);
        }

        & .endorse-tabs__panel {
            padding: var(--sp40) var(--sp30);
        }

        & .endorse-tabs__best {
            padding: var(--sp20);
        }
    }
}


/* 22. More Than a CDL School */
.more-cdl {
    /* The rhythm above and below comes from the global `main section` margin-bottom. */
    padding-block: 0;

    /* A white panel over the body texture, so the section reads as a card, not a band. */
    & .more-cdl__inner {
        background-color: var(--white);
        color: var(--text);
        box-shadow: var(--shadow-md);
        padding: var(--sp100) var(--sp65);
        text-align: center;
    }

    /* ---------- head ---------- */
    & .more-cdl__head {
        max-width: 60em;
        margin-inline: auto;
    }

    & .more-cdl__eyebrow {
        font-size: var(--f16);
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--orange);
        margin-bottom: var(--sp15);
    }

    & .more-cdl__title {
        text-transform: uppercase;

        & span {
            color: var(--orange);
        }
    }

    & .more-cdl__intro {
        margin-top: var(--sp20);
        color: var(--muted-2);
    }

    /* ---------- the "We are…" lines ---------- */
    & .more-cdl__list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp20);
        margin-top: var(--sp50);
        text-align: left;
    }

    & .more-cdl__item {
        display: flex;
        align-items: center;
        gap: var(--sp15);
        padding: var(--sp25) var(--sp30);
        background-color: var(--cdf7);
        border-left: 4px solid var(--orange);
        transition: var(--transition);

        &:hover {
            background-color: var(--cdf0);
        }

        /* The marker stands in where no icon was uploaded, so a mixed list still aligns. Decorative. */
        &:not(:has(.more-cdl__icon))::before {
            content: "";
            flex: none;
            width: 14px;
            height: 14px;
            background: var(--gradient2);
            transform: rotate(45deg);
        }
    }

    & .more-cdl__icon {
        flex: none;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;

        & svg,
        & img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            filter: var(--orange-filter);
        }
    }

    & .more-cdl__statement {
        font-size: var(--f20);
        font-weight: 600;
        line-height: var(--bodyLh);
    }

    /* ---------- summary and closing line ---------- */
    & .more-cdl__foot {
        margin-top: var(--sp50);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--sp30);
    }

    & .more-cdl__summary {
        max-width: 60em;
        color: var(--muted-2);
    }

    & .more-cdl__closing {
        font-family: var(--font-staarliches);
        font-size: var(--f35);
        line-height: var(--lhTight);
        text-transform: uppercase;
        color: var(--orange);
        max-width: 24em;
    }
}

/* MORE THAN A CDL SCHOOL section responsive css */
@media (max-width: 1199.98px) {
    .more-cdl {
        & .more-cdl__inner {
            padding: var(--sp80) var(--sp40);
        }

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

@media (max-width: 767.98px) {
    .more-cdl {
        & .more-cdl__inner {
            padding: var(--sp50) var(--sp25);
        }

        & .more-cdl__list {
            grid-template-columns: 1fr;
            margin-top: var(--sp30);
        }

        & .more-cdl__item {
            padding: var(--sp20);
        }

        & .more-cdl__foot {
            margin-top: var(--sp30);
            gap: var(--sp20);
        }
    }
}


/* 23. Site Map */
.sitemap {
   

    /* WordPress core wp-block-page-list output: its generated class names are styled as-is, scoped under .sitemap. */

    & .sitemap__list-wrap {
        padding: var(--sp50);
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-sm);
    }

    /* Columns, not a grid: one alphabetical run should read top to bottom in each column. */
    & .wp-block-page-list {
        columns: 3;
        column-gap: var(--sp50);
    }

    /* a column break inside an item would orphan a submenu from its parent */
    & .wp-block-page-list > .wp-block-pages-list__item {
        break-inside: avoid;
        margin-bottom: var(--sp20);
    }

    & .wp-block-pages-list__item__link {
        position: relative;
        display: block;
        padding-block: var(--sp4);
        padding-left: var(--sp25);
        font-size: var(--f18);
        font-weight: 600;
        line-height: var(--bodyLh);
        color: var(--ink);
        transition: var(--transition);

        /* Bullet dot centred on the first line at 0.7em, so it stays centred as font-size steps down. */
        &::before {
            content: "";
            position: absolute;
            top: 0.7em;
            left: 0;
            width: var(--sp8);
            height: var(--sp8);
            background: var(--orange);
            border-radius: var(--r-full);
            transition: var(--transition);
        }

        &:hover,
        &:focus-visible {
            color: var(--orange);

            &::before {
                scale: 1.4;
            }
        }
    }

    /* a parent that owns children reads as the head of its group */
    & .wp-block-pages-list__item.has-child > .wp-block-pages-list__item__link {
        font-size: var(--f20);
        text-transform: uppercase;
    }

    & .wp-block-navigation__submenu-container {
        margin-top: var(--sp8);
        margin-left: 3px;
        padding-left: var(--sp20);
        border-left: 1px solid var(--line);
    }

    & .wp-block-navigation__submenu-container .wp-block-pages-list__item__link {
        padding-left: var(--sp20);
        font-size: var(--f16);
        font-weight: 500;
        color: var(--muted-2);

        /* Size is inherited from the base dot; the indent and muted fill already mark the sub-level. */
        &::before {
            background: var(--line-dark);
        }

        &:hover,
        &:focus-visible {
            color: var(--orange);

            &::before {
                background: var(--orange);
                scale: 1.4;
            }
        }
    }

    /* the page you are already on — WordPress marks it and it should not look like somewhere left to go */
    & .wp-block-pages-list__item.current-menu-item > .wp-block-pages-list__item__link {
        color: var(--orange);
        font-weight: 700;
        cursor: default;

        &::before {
            scale: 1.4;
        }
    }
}

/* SITE MAP section responsive css */
@media (max-width: 991.98px) {
    .sitemap {
        & .sitemap__list-wrap {
            padding: var(--sp35);
        }

        & .wp-block-page-list {
            columns: 2;
            column-gap: var(--sp35);
        }
    }
}

@media (max-width: 767.98px) {
    .sitemap {
        & .sitemap__list-wrap {
            padding: var(--sp25);
        }

        & .wp-block-page-list {
            columns: 1;
        }
    }
}


/* 24. Gravity Forms */
.gform_wrapper.gform-theme {
    /* Gravity sets its own variables here; these few leak into layout, so they are pinned to our tokens. */
    --gf-color-primary: var(--orange);
    --gf-radius: 0;

      & .gform_validation_errors, & .gform_required_legend {
        display: none;
    }
    & .gform_fields {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: var(--sp25);
    }
input {
    outline: 0;
}
    /* full width unless the field says otherwise */
    & .gfield {
        grid-column: 1 / -1;
        min-width: 0;
    }

    /* Choice fields come out as a fieldset, whose grooved border and min-inline-size both have to go. */
    & fieldset.gfield {
        display: block;
        min-inline-size: 0;
        padding: 0;
        border: 0;
    }

    & .gfield--width-half {
        grid-column: span 6;
    }

    & .gfield--width-third {
        grid-column: span 4;
    }

    & .gfield--width-two-thirds {
        grid-column: span 8;
    }

    /* hidden inputs must not eat a grid row */
    & .gfield--type-hidden,
    & .gform_hidden {
        display: none;
    }

    /* ---------- labels ---------- */
    & .gfield_label {
        display: block;
        margin-bottom: var(--sp8);
        font-family: var(--font-montserrat);
        font-size: var(--f14);
        font-weight: 600;
        color: var(--text);
    }

    /* The design uses placeholders, so hidden-label fields keep the label for screen readers only. */
    & .hidden_label .gfield_label,
    & .gfield--type-checkbox>.gfield_label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }

    /* ---------- text inputs, textarea, select ---------- */
    /* The exclusion list matters: a choice field's checkbox also lives in .ginput_container. :where() adds no specificity. */
    & .ginput_container input:not(:where([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"])),
    & .ginput_container textarea,
    & .ginput_container select {
        width: 100%;
        padding-block: var(--sp10);
        padding-inline: 0;
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
        font-family: var(--font-montserrat);
        font-size: var(--f16);
        color: var(--text);
        transition: var(--transition);
        box-shadow: none !important;

        &::placeholder {
            color: var(--muted);
        }

        &:focus {
            outline: none;
            border-bottom-color: var(--orange);
        }
    }

    & .ginput_container textarea {
        min-height: 120px;
        resize: vertical;
    }

    /* ---------- consent / checkbox + radio choices ---------- */
    & .gchoice {
        display: flex;
        align-items: flex-start;
        gap: var(--sp10);

        &+.gchoice {
            margin-top: 0;
        }
    }

    & .gfield-choice-input {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        margin-block-start: 2px;
        padding: 0;
        accent-color: var(--orange);
        cursor: pointer;
    }

    & .gform-field-label--type-inline {
        flex: 1 1 auto;
        min-width: 0;
        margin-bottom: 0;
        font-size: var(--f14);
        font-weight: 400;
        line-height: var(--bodyLh);
        color: var(--muted-2);
        cursor: pointer;

        & a {
            color: var(--orange);
            text-decoration: underline;
        }
    }

    /* ---------- submit ---------- */
    & .gform_footer {
        margin-top: var(--sp25);
    }

    /* Gravity renders the submit as an input, so these restate .btn and .btn-primary from vendor.css. */
    & .gform_button {
        display: block !important;
        width: 100% !important;
        padding: var(--sp25) var(--sp25) !important;
        background: var(--gradient2) !important;
        border: 0;
        border-radius: 0 !important;
        font-family: var(--font-montserrat) !important;
        font-size: var(--f16) !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
        color: var(--white) !important;
        cursor: pointer !important;
        transition: var(--transition) !important;

        &:hover,
        &:focus-visible {
            background: var(--gradient1) !important;
        }

        &:focus {
            outline: 2px solid var(--orange)!important;
            outline-offset: 2px;
        }
    }

    /* ---------- validation ---------- */
    /* :root has no danger colour and orange already means focus; point these at a token when added. */
    --form-error: #b3261e;
    --form-error-soft: #fdecea;

    /* the summary box Gravity prints above the form after a failed submit */
    & .gform_validation_errors {
        margin-bottom: var(--sp25);
        padding: var(--sp20);
        background: var(--form-error-soft);
        border: 1px solid var(--form-error);
        border-radius: 0;
        box-shadow: none;

        & h2,
        & .gform_submission_error {
            margin: 0;
            font-family: var(--font-montserrat);
            font-size: var(--f16);
            font-weight: 700;
            line-height: var(--bodyLh);
            text-transform: none;
            color: var(--form-error);
        }

        /* Gravity's summary list of failed fields */
        & ol {
            margin: var(--sp10) 0 0;
            padding-left: var(--sp20);
            font-size: var(--f14);
            color: var(--form-error);
        }

        & a {
            color: var(--form-error);
            text-decoration: underline;
        }
    }

    /* Gravity draws icons with a font this project never loads, so hide the empty glyph slots. */
    & .gform-icon {
        display: none;
    }

    /* ---------- per-field error ---------- */
    & .gfield_error {

        & .ginput_container input:not(:where([type="checkbox"], [type="radio"])),
        & .ginput_container textarea,
        & .ginput_container select {
            border-bottom-color: var(--form-error);
        }

        & .gfield_label {
            color: var(--form-error);
        }

        & .gfield-choice-input {
            accent-color: var(--form-error);
            outline: 1px solid var(--form-error);
            outline-offset: 2px;
        }
    }

    & .gfield_validation_message,
    & .validation_message {
        margin-top: var(--sp8);
        padding: 0;
        background: transparent;
        border: 0;
        font-family: var(--font-montserrat);
        font-size: var(--f14);
        font-weight: 600;
        line-height: var(--bodyLh);
        color: var(--form-error);
    }

    /* field descriptions / sub-labels, so they don't inherit the error look */
    & .gfield_description:not(.gfield_validation_message),
    & .ginput_complex label {
        margin-top: var(--sp8);
        font-size: var(--f14);
        color: var(--muted-2);
    }

    /* ---------- confirmation ---------- */
    /* Gravity's own message after a successful AJAX submit */
    & .gform_confirmation_message {
        padding: var(--sp20);
        background: var(--cdf7);
        border-left: 2px solid var(--orange);
        font-size: var(--f18);
        color: var(--text);
    }
}

/* GRAVITY FORMS skin responsive css */
@media (max-width: 767.98px) {
    .gform_wrapper.gform-theme {

        /* every field goes full width, matching .banner__form-row--split */
        & .gfield--width-half,
        & .gfield--width-third,
        & .gfield--width-two-thirds {
            grid-column: 1 / -1;
        }
    }
}

@media (max-width: 575.98px) {
    .gform_wrapper.gform-theme {

        /* .btn drops to this padding at the same width (vendor.css) */
        & .gform_button {
            padding: 16px 24px;
            text-align: center;
        }
    }
}

.b2b-form {
    & .gform_wrapper.gform-theme {

        & .ginput_container textarea {
            height: 90px;
            min-height: auto;
        }
    }
}


/* 25. Pages Nav */
.pages-nav {
    /* The rhythm below comes from the global `main section` margin-bottom. */
    padding-block: 0;

    /* a wide table has to scroll inside its own box, never the page */
    & .pages-nav__scroll {
        width: 100%;
        overflow-x: auto;
    }

    & .pages-nav__table {
        width: 100%;
        background: var(--white);
        border-collapse: collapse;
        box-shadow: var(--shadow-md);
        text-align: left;

        /* Table cells are structural, so a class on each would be noise; special columns carry one. */
        & th {
            padding: var(--sp20) var(--sp25);
            background: var(--charcoal-2);
            font-family: var(--font-montserrat);
            font-size: var(--f14);
            font-weight: 700;
            text-transform: uppercase;
            color: var(--white);
            white-space: nowrap;
        }

        & td {
            padding: var(--sp20) var(--sp25);
            border-bottom: 1px solid var(--line);
            font-family: var(--font-montserrat);
            font-size: var(--f16);
            color: var(--muted-2);
            vertical-align: middle;
        }

        & tbody tr {
            transition: var(--transition);

            &:hover {
                background: var(--cdf7);
            }
        }

        & tbody tr:last-child td {
            border-bottom: 0;
        }
    }

    & .pages-nav__num {
        width: 80px;
        font-weight: 700;
        color: var(--orange);
    }

    & .pages-nav__name {
        font-weight: 600;
        white-space: nowrap;
        color: var(--text);
    }

    & .pages-nav__link {
        font-weight: 700;
        color: var(--orange);
        text-decoration: underline;
        transition: var(--transition);

        &:hover,
        &:focus-visible {
            color: var(--text);
        }
    }

    & .pages-nav__tag {
        display: inline-block;
        margin-left: var(--sp10);
        padding: 2px var(--sp8);
        background: var(--cdf0);
        font-size: var(--f12);
        font-weight: 700;
        text-transform: uppercase;
        color: var(--muted);
    }
}

/* PAGES NAV section responsive css */
@media (max-width: 767.98px) {
    .pages-nav {
        & .pages-nav__table {
            & th,
            & td {
                padding: var(--sp15);
            }
        }

        & .pages-nav__num {
            width: 50px;
        }
    }
}


/* 26. Viewer.js Skin */
/* Viewer.js ships its own viewer.css; this resizes the thumbnail strip and brands it. Load it after. */

.viewer-container {
    /* The library draws portrait thumbnails; ours are landscape, so the strip is resized and photos fitted. */
    --viewer-thumb-width: 100px;
    --viewer-thumb-height: 76px;
}

/* the library's backdrop is 50% black, which leaves the page reading through it and competing with the caption */
.viewer-backdrop {
    background-color: var(--overlay-deep);
}

.viewer-list {
    height: var(--viewer-thumb-height);
}

.viewer-list > li {
    width: var(--viewer-thumb-width);
    height: var(--viewer-thumb-height);
    /* content-visibility skips off-screen items; contain-intrinsic-size keeps each measuring so Viewer's centring works. */
    content-visibility: auto;
    contain-intrinsic-size: var(--viewer-thumb-width) var(--viewer-thumb-height);
}

/* The gutter Viewer measures for centring: it reads marginLeft, so this must stay a margin. */
.viewer-list > li + li {
    margin-left: var(--sp8);
}

.viewer-list > li > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The photo on screen, and keyboard focus: strip items carry role=button and tabindex. */
.viewer-list > .viewer-active,
.viewer-list > .viewer-active:focus,
.viewer-list > .viewer-active:hover {
    outline: 2px solid var(--orange);
    outline-offset: -2px;
}

.viewer-list > li:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: -2px;
}

/* the caption — the library sets 12px in its own stack */
.viewer-title {
    font-family: var(--font-montserrat);
    font-size: var(--f14);
}

/* VIEWER.JS responsive css */
@media (max-width: 767.98px) {
    .viewer-container {
        --viewer-thumb-width: 64px;
        --viewer-thumb-height: 48px;
    }
}


/* 27. Programs */
.programs {
    padding-block: var(--sectionGap);
    background-color: var(--dark);
    color: var(--white);

    & .programs__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--g40);
    }

    & .programs__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: var(--sp30);
        margin-top: var(--sp55);
    }

    /* ---------- program card ---------- */
    /* Cards stretch to a common height per row, so the row edges line up. */
    & .pcard {
        /* How far the card lifts on hover; the anti-flicker strip is measured from the same property. */
        --hover-lift: var(--sp20);

        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--sp40);
        padding: var(--sp50);
        background: var(--white);
        color: var(--text);
        transition: var(--transition);
    }

    /* f35, not the h3 default: the design's titles are a step larger and break onto two lines. */
    & .pcard__title {
        transition: var(--transition);  
        text-transform: uppercase;
        color: var(--orange);
    }
    & p {
        margin-top: 0;
    }
    & .btn-orange {
        margin-top: auto;
    }

    /* Two links per card: the title's ::after covers the whole card, and .pcard__link sits above it. */
    & .pcard__cover {
        color: inherit;

        &::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
        }

        /* The card is the click target, so the card shows the focus ring, not the text. */
        &:focus-visible {
            outline: none;

            &::after {
                outline: 2px solid var(--orange);
                outline-offset: -4px;
            }
        }
    }

    /* white on orange once the card is hovered, so the ring stays visible */
    & .pcard:hover .pcard__cover:focus-visible::after {
        outline-color: var(--white);
    }

    & .pcard__link {
        position: relative;
        z-index: 2;
    }
    & .pcard__hours {
        display: flex;
        align-items: center;
        gap: var(--sp10);
        font-size: var(--f22);
        font-weight: 700;
        text-transform: uppercase;
        transition: var(--transition);
    }

    & .pcard__hours-icon {
        color: var(--orange);
        transition: var(--transition);
        & svg{
            max-width: 21px;
            max-height: 21px;
        }
    }

    /* Featured card: orange surface, white copy, and a lift on `translate` so the reveal cannot swallow it. */
    & .pcard:hover {
        background: var(--orange);
        color: var(--white);
        translate: 0 calc(var(--hover-lift) * -1);

        /* Anti-flicker: a transparent strip re-covers the band the lift vacates and travels with the card. */
        &::after {
            content: "";
            position: absolute;
            inset-block-start: 100%;
            inset-inline: 0;
            height: var(--hover-lift);
        }

        & .pcard__title,
        & .pcard__hours-icon,
        & .btn-orange  {
            color: var(--white);
        }
    }
}

/* PROGRAMS section responsive css */
@media (max-width: 1199.98px) {
    .programs {
        & .pcard {
            padding: var(--sp40);
        }
    }
}

@media (max-width: 991.98px) {
    .programs {
        /* No lift at touch widths: a tap would leave the card sitting 20px up. */
        & .pcard:hover {
            translate: none;

            /* nothing is vacated without the lift, so the strip would only add a dead band under a tapped card */
            &::after {
                content: none;
            }
        }

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

@media (max-width: 767.98px) {
    .programs {
        & .programs__grid {
            grid-template-columns: 1fr;
        }

        & .programs__actions {
            flex-direction: column;
            align-items: stretch;
            gap: var(--sp20);
        }
    }
}


/* 28. Training Options */
.training-options {
    /* width of one item in the 4-up row — reused by the centred short-row cases */
    --training-options-col: calc((100% - (var(--g40) * 3)) / 4);

    & .training-options__grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        justify-content: center;
        gap: var(--g40);

        /* Fewer than four items: keep the 4-up width and centre the row instead. */
        &:has(> .training-options__item:nth-child(3):last-child) {
            grid-template-columns: repeat(3, var(--training-options-col));
        }

        &:has(> .training-options__item:nth-child(2):last-child) {
            grid-template-columns: repeat(2, var(--training-options-col));
        }

        &:has(> .training-options__item:only-child) {
            grid-template-columns: var(--training-options-col);
        }
    }

    & .training-options__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--sp20);
        text-align: center;
        padding-inline: var(--sp20);
        @media (max-width: 1299.98px) {
            padding-inline: var(--sp10);
        }

        /* Icon pop ladder: MotionFlow lands .mf-animate on every item at once, so stagger them here. */
        --icon-pop-delay: .5s;

        &:nth-child(2) { --icon-pop-delay: .65s; }
        &:nth-child(3) { --icon-pop-delay: .8s; }
        &:nth-child(4) { --icon-pop-delay: .95s; }

        /* The icon scales from 0 as its item reveals; gated so no-JS keeps it full size. */
        &[data-mf-animation]:not(.mf-animate) .training-options__icon {
            scale: 0;
        }
    }

    & .training-options__icon {
        display: grid;
        place-items: center;
        width: 90px;
        height: 90px;
        background: var(--gradient2);
        border-radius: var(--r-full);
        color: var(--white);
        transition: scale var(--ease-out);
        transition-delay: var(--icon-pop-delay);
        & svg{
            max-width: 35px;
            max-height: 35px;
            filter: var(--white-filter);
        }
    }

    /* the design sets these in Montserrat, not the Staatliches h3 default */
    & .training-options__title {
        font-family: var(--font-montserrat);
        font-size: var(--f22);
        font-weight: 700;
        text-transform: uppercase;
    }

    & .training-options__text {
        font-size: var(--f16);
    }
}

/* TRAINING OPTIONS section responsive css */
@media (max-width: 991.98px) {
    .training-options {
        --training-options-col: calc((100% - var(--g40)) / 2);

        & .training-options__grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            row-gap: var(--sp50);

            /* 3 and 2 items fill the two columns again — only a single item centres */
            &:has(> .training-options__item:nth-child(3):last-child),
            &:has(> .training-options__item:nth-child(2):last-child) {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            /* an odd 3rd item ends up alone on row 2 — centre it at column width */
            &:has(> .training-options__item:nth-child(3):last-child) > .training-options__item:last-child {
                grid-column: span 2;
                width: var(--training-options-col);
                margin-inline: auto;
            }
        }
        & .training-options__icon {
            width: 72px;
            height: 72px;
          
        }
    }
}

@media (max-width: 575.98px) {
    .training-options {
        & .training-options__grid {
            grid-template-columns: 1fr;

            /* single column here, so the short-row cases stack full width too */
            &:has(> .training-options__item:nth-child(3):last-child),
            &:has(> .training-options__item:nth-child(2):last-child),
            &:has(> .training-options__item:only-child) {
                grid-template-columns: 1fr;
            }

            /* Clear the tablet centring; an auto margin would shrink the item in a single-column grid. */
            &:has(> .training-options__item:nth-child(3):last-child) > .training-options__item:last-child {
                grid-column: auto;
                width: auto;
                margin-inline: 0;
            }
        }
    }
}


/* 29. B2B Banner */
/* Page-scoped companion to the shared .banner block: intro measure and corrected header clearance. Fold in later. */
.b2b-banner {
    & .banner__lead-wrap {
        max-width: 680px;      
    }

    /* the banner's arrow link — the arrow and its hover slide come from the global .btn-link ::after (§4.1) */
    & .banner__actions .btn-link {
        text-transform: uppercase;
    }
}

/* B2B BANNER section responsive css */
@media (max-width: 1365.98px) {
    .b2b-banner {
        /* banner.css steps this down hard here, so a two-line h1 nearly touches the bar; gentler instead. */
        --banner-head: 145px;
    }
}

@media (max-width: 1199.98px) {
    .b2b-banner {
        /* header measures ~145px once it wraps to two rows below 1025px */
        --banner-head: 150px;
    }
}

@media (max-width: 991.98px) {
    .b2b-banner {
        --banner-head: 160px;
    }
}

@media (max-width: 767.98px) {
    .b2b-banner {
        --banner-head: 135px;
    }
}

@media (max-width: 575.98px) {
    .b2b-banner {
        /* the topbar address and phone stack here, so the header grows again */
        --banner-head: 165px;
    }
}


/* 30. B2B Contact */
.b2b-contact {
    padding-block: var(--sectionGap);
    background-color: var(--charcoal-2);
    color: var(--white);

    & .b2b-contact__inner {
        display: grid;
        grid-template-columns: 450px 540px;
        justify-content: space-between;
        gap: var(--g40);
        max-width: 1210px;
        margin-inline: auto;
    }

    & .section-title-wrap {
        align-items: flex-start;                
        text-align: left;
    }

    & .b2b-contact__details {
        padding: var(--sp50);
        background: var(--white);
        color: var(--text);
        box-shadow: var(--shadow-lg);
    }

    & .b2b-contact__details-title {
        margin-bottom: var(--sp50);
        font-family: var(--font-montserrat);
        font-size: var(--f20);
        font-weight: 700;
        text-transform: uppercase;
    }

    & .b2b-contact__list {
        display: flex;
        flex-direction: column;
        gap: var(--sp30);
        list-style: none;
    }

    & .b2b-contact__item {
        display: flex;
        align-items: flex-start;
        gap: var(--sp20);
        font-size: var(--f18);
        line-height: var(--bodyLh);
        & svg{
            max-width: 32px;
            max-height: 32px;
        }
    }

    & .b2b-contact__item-icon {
        flex: 0 0 auto;
        margin-block-start: var(--sp4);
        color: var(--orange);
    }

    /* the address row is a real <address>, which UAs set in italic — the design is upright */
    & .b2b-contact__item-text {
        font-style: normal;

        & strong {
            font-weight: 700;
        }
    }

    & .b2b-contact__phone {
        transition: var(--transition);

        &:hover,
        &:focus-visible {
            color: var(--orange);
        }
    }

   
}

/* B2B CONTACT section responsive css */
@media (max-width: 1199.98px) {
    .b2b-contact {
        & .b2b-contact__inner {
            grid-template-columns: 400px 480px;
            max-width: 100%;
        }
    }
}

@media (max-width: 991.98px) {
    .b2b-contact {
        & .b2b-contact__inner {
            grid-template-columns: 1fr;
            justify-content: stretch;            
            max-width: 700px;
        }
    }
}

@media (max-width: 575.98px) {
    .b2b-contact {        

        & .b2b-contact__form-row--split {
            grid-template-columns: 1fr;
        }
    }
}


/* 31. B2B Features */
.b2b-features {
    /* The rhythm above and below comes from the global `main section` margin-bottom. */
    padding-block: 0;

    & .b2b-features__row {
        display: grid;
        grid-template-columns: 630fr 770fr;
        align-items: center;
        gap: var(--sp50);

        /* Every other row flips the image right without changing source order; the copy stays first. */
        &.b2b-features__row--reverse {
            grid-template-columns: 770fr 630fr;
        }
    }

    & .b2b-features__row + .b2b-features__row {
        margin-top: var(--sectionGap);
    }

    & .b2b-features__figure {
        grid-column: 1;
        grid-row: 1;
    }

    & .b2b-features__row--reverse .b2b-features__figure {
        grid-column: 2;
    }

    & .b2b-features__img {
        width: 100%;
        aspect-ratio: 630 / 550;
        object-fit: cover;
    }

    /* Scroll parallax: the figure clips and the image grows 20% taller, giving it travel room. */
    & .b2b-features__figure:has(> [data-mf-parallax]) {
        aspect-ratio: 630 / 550;
        overflow: hidden;
    }

    & .b2b-features__img[data-mf-parallax] {
        height: 120%;
        aspect-ratio: auto;
    }

    & .b2b-features__content {
        grid-column: 2;
        grid-row: 1;

        & ul {
            list-style: disc;
            padding-left: 20px;
            margin-block: 15px;
            font-size: var(--f18);
            line-height: var(--bodyLh);
        }
        
        & ul li + li {
            margin-top: 5px;
        }

        & strong {
            font-weight: 700;
            color: var(--text);
        }

        & a:not(.btn) {
            color: var(--orange);
            text-decoration: underline;
            transition: var(--transition);
        }
        
        & a:not(.btn):hover,
        & a:not(.btn):focus-visible {
            text-decoration-thickness: 2px;
        }
    }

    & .b2b-features__row--reverse .b2b-features__content {
        grid-column: 1;
    }

    & .b2b-features__title {
        margin-bottom: var(--sp30);
        text-transform: uppercase;      
        & span{
            color: var(--orange);
        }
        
    }   
    & .b2b-features__text{
        color: var(--muted-2);
        max-width: 670px;
    }

    /* The design draws a wider CTA than its content width, so the global .btn only gets a floor. */
    & .btn {
        min-width: 380px;
        margin-top: var(--sp40);
        text-align: center;
    }

   
}

/* B2B FEATURES section responsive css */
@media (max-width: 1199.98px) {
    .b2b-features {
        & .b2b-features__row {
            gap: var(--g40);
        }    

        & .btn {
            min-width: 300px;
        }
    }
}

@media (max-width: 991.98px) {
    .b2b-features {
        /* The reverse modifier is a compound selector above, so it must be matched compound here. */
        & .b2b-features__row,
        & .b2b-features__row.b2b-features__row--reverse {
            grid-template-columns: 1fr;
        }

        /* stacked: image on top, copy under it, on every row */
        & .b2b-features__figure,
        & .b2b-features__row--reverse .b2b-features__figure {
            grid-column: 1;
            grid-row: 1;
        }

        & .b2b-features__content,
        & .b2b-features__row--reverse .b2b-features__content {
            grid-column: 1;
            grid-row: 2;
        }

        & .b2b-features__img {
            aspect-ratio: 16 / 9;
        }

        /* Parallax is off at tablet and below, so the image needs no travel room and fills the frame. */
        & .b2b-features__figure:has(> [data-mf-parallax]) {
            aspect-ratio: 16 / 9;
        }

        & .b2b-features__img[data-mf-parallax] {
            height: 130%;
        }
    }
}

@media (max-width: 575.98px) {
    .b2b-features {
        /* .btn is already full-width here, so drop the floor or it would widen the row. */
        & .btn {
            min-width: 0;
        }
    }
}


/* 32. B2B Plans */
.b2b-plans {
    /* The rhythm above and below comes from the global `main section` margin-bottom. */
    padding-block: 0;

    & .b2b-plans__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--g40);
    }

    & .b2b-plans__card {
        /* How far the card lifts on hover; the anti-flicker strip is measured from the same property. */
        --hover-lift: var(--sp20);

        position: relative;
        display: flex;
        flex-direction: column;
        background: var(--white);
        box-shadow: var(--shadow-md);
        transition: var(--transition);

        /* The lift rides `translate`, not `transform`, so MotionFlow's fade-up cannot swallow it. */
        &:hover,
        &:focus-within {
            box-shadow: var(--shadow-lg);
            translate: 0 calc(var(--hover-lift) * -1);

            /* Anti-flicker: a transparent strip re-covers the band the lift vacates and travels with the card. */
            &::after {
                content: "";
                position: absolute;
                inset-block-start: 100%;
                inset-inline: 0;
                height: var(--hover-lift);
            }
        }
    }

    & .b2b-plans__img {
        width: 100%;
        aspect-ratio: 460 / 295;
        object-fit: cover;
    }

    & .b2b-plans__body {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp25);
        padding: var(--sp30);
    }

    /* the design sets card titles in Montserrat, not the Staatliches h3 default */
    & .b2b-plans__card-title {
        font-family: var(--font-montserrat);
        font-size: var(--f20);
        font-weight: 700;
        text-transform: uppercase;
    }

    & .b2b-plans__text {
        color: var(--muted-2);    
    }

    /* A smaller Montserrat variant of the global .btn-link; the arrow and hover slide come from ::after. */
    & .btn-link {
        margin-top: auto;
        font-family: var(--font-montserrat);
        font-size: var(--f16);
        font-weight: 700;
        text-transform: uppercase;
    }
}

/* B2B PLANS section responsive css */
@media (max-width: 991.98px) {
    .b2b-plans {
        /* No lift at touch widths: a tap would leave the card sitting 20px up. */
        & .b2b-plans__card:hover,
        & .b2b-plans__card:focus-within {
            translate: none;

            /* nothing is vacated without the lift, so the strip would only add a dead band under a tapped card */
            &::after {
                content: none;
            }
        }

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

@media (max-width: 575.98px) {
    .b2b-plans {
        & .b2b-plans__grid {
            grid-template-columns: 1fr;
        }
    }
}


/* 33. B2B Power */
.b2b-power {
    padding-block: var(--sp80);
    padding-inline: var(--gutter);
    background-color: var(--charcoal-2);
    color: var(--white);
    text-align: center;

}

/* B2B POWER section responsive css */
@media (max-width: 767.98px) {
    .b2b-power {
        padding-block: var(--sp50);
    }
}


/* 34. B2B Services */
.b2b-services {
    /* The rhythm above and below comes from the global `main section` margin-bottom. */
    padding-block: 0;

    & .b2b-services__row {
        display: grid;
        grid-template-columns: 630fr 770fr;
        align-items: center;
        gap: var(--sp50);

        /* Every other row flips the image right without changing source order; the copy stays first. */
        &.b2b-services__row--reverse {
            grid-template-columns: 770fr 630fr;
        }
    }

    & .b2b-services__row + .b2b-services__row {
        margin-top: var(--sp100);
    }

    & .b2b-services__figure {
        grid-column: 1;
        grid-row: 1;
    }

    & .b2b-services__row--reverse .b2b-services__figure {
        grid-column: 2;
    }

    & .b2b-services__img {
        width: 100%;
        aspect-ratio: 630 / 700;
        object-fit: cover;
    }

    & .b2b-services__content {
        grid-column: 2;
        grid-row: 1;
        /* padding-block: var(--sp50); */
    }

    & .b2b-services__row--reverse .b2b-services__content {
        grid-column: 1;
        
    }

    & .b2b-services__title {
        max-width: 14em;
        margin-bottom: var(--sp25);
        font-size: var(--f40);
        text-transform: uppercase;
    }

    & .b2b-services__text {
        margin-bottom: var(--sp30);
        color: var(--muted-2);

        & strong {
            font-weight: 700;
            color: var(--text);
        }
        &:last-child{
            margin-bottom: 0;
        }
    }

    /* ---------- benefit checklist ---------- */
    & .b2b-services__list {
        display: flex;
        flex-direction: column;
        gap: var(--sp15);
        margin-bottom: var(--sp40);
        list-style: none;

         &:last-child {
            margin-bottom:0;
        }
    }

    & .b2b-services__item {
        display: flex;
        align-items: flex-start;
        gap: var(--sp15);
        font-size: var(--f18);
        line-height: var(--bodyLh);
        color: var(--muted-2);

        & strong {
            font-weight: 700;
            color: var(--text);
        }
    }

    & .b2b-services__check {
        flex: 0 0 auto;
        margin-block-start: 2px;
        color: var(--orange);
    }

    /* ---------- buttons ---------- */
    /* Printed for one button as well as two, so gaining a second never changes layout mode. */
    & .b2b-services__buttons {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp20);
    }
}

/* B2B SERVICES section responsive css */
@media (max-width: 1199.98px) {
    .b2b-services {
        & .b2b-services__row {
            gap: var(--g40);
        }

        & .b2b-services__row + .b2b-services__row {
            margin-top: var(--sp80);
        }
    }
}

@media (max-width: 991.98px) {
    .b2b-services {
        /* The reverse modifier is a compound selector above, so it must be matched compound here. */
        & .b2b-services__row,
        & .b2b-services__row.b2b-services__row--reverse {
            grid-template-columns: 1fr;
        }

        /* stacked: image on top, copy under it, on every row */
        & .b2b-services__figure,
        & .b2b-services__row--reverse .b2b-services__figure {
            grid-column: 1;
            grid-row: 1;
        }

        & .b2b-services__content,
        & .b2b-services__row--reverse .b2b-services__content {
            grid-column: 1;
            grid-row: 2;
        }

        & .b2b-services__img {
            aspect-ratio: 16 / 9;
        }
    }
}


/* 35. B2B Testimonial */
.b2b-testimonial {
    /* how far the orange quote card rides back over the photo */
    --quote-overlap: 70px;

    /* The rhythm above and below comes from the global `main section` margin-bottom. */
    padding-block: 0;

    & .b2b-testimonial__grid {
        display: grid;
        grid-template-columns: 800fr 660fr;
        align-items: center;
    }

    & .b2b-testimonial__img {
        width: 100%;
        aspect-ratio: 800 / 700;
        object-fit: cover;
    }

    & .b2b-testimonial__body {
        margin-left: calc(var(--quote-overlap) * -1);
    }

    & .section-title-wrap{
        text-align: left;
        margin-bottom: var(--sp50);
        margin-left: calc(var(--quote-overlap));
        padding-left: var(--sp50);
       
    }

    & .b2b-testimonial__quote {
        padding: var(--sp100) var(--sp65);
        background: var(--orange);
        color: var(--white);
        box-shadow: var(--shadow-lg);
    }

    & .b2b-testimonial__stars {
        display: inline-flex;
        gap: var(--sp8);
        margin-bottom: var(--sp25);
        color: var(--white);
    }

    & .b2b-testimonial__text {
        font-size: var(--f20);
        font-style: italic;
        line-height: 1.6;
    }
}

/* B2B TESTIMONIAL section responsive css */
@media (max-width: 1199.98px) {
    .b2b-testimonial {
        --quote-overlap: 40px;
    }
}

@media (max-width: 991.98px) {
    .b2b-testimonial {
        --quote-overlap: 0px;
        & .section-title-wrap {
            text-align: left;            
            margin-left: 0;
            padding-left: 0;
            align-items: start;
        }
        & .b2b-testimonial__quote {
            padding: var(--sp50);                  
        }
        & .b2b-testimonial__img {
            width: 100%;
            aspect-ratio: 16 / 8;
            object-fit: cover;
        }
        & .b2b-testimonial__grid {
            grid-template-columns: 1fr;
        }

        & .b2b-testimonial__body {
            margin-top: var(--sp30);
            margin-left: 0;
        }

    }
}


/* 36. B2B App */
/* Two layouts, one switch: the boxed modifier pulls the band in to container width. */
.b2b-app {
    & .b2b-app__band {
        position: relative;
        padding-block: var(--sectionGap);
        background-color: var(--hero-dark);
        background-image: url(../images/track.webp);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        color: var(--white);
        text-align: center;

        /* The photo sets the mood, not the message, so it is dimmed hard to keep the copy legible. */
        &::before {
            content: "";
            position: absolute;
            inset: 0;
            background-color: color-mix(in srgb, var(--hero-dark) 88%, transparent);
        }
    }

    /* ---------- boxed variant ---------- */
    /* The gutter sits on the section so the band never touches the viewport edge. */
    &.b2b-app--boxed {
        padding-inline: var(--gutter);

        & .b2b-app__band {
            max-width: var(--container);
            margin-inline: auto;
        }
    }

    /* Lifts the copy over ::before; both are positioned children of the same stacking context. */
    & .b2b-app__inner {
        position: relative;
        z-index: 1;
    }

    & .b2b-app__badges {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: var(--sp20);
    }

    /* Stand-in for the official store badges. Swap in Apple's and Google's own artwork before launch. */
    & .b2b-app__badge {
        display: flex;
        align-items: center;
        gap: var(--sp10);
        padding: var(--sp10) var(--sp15);
        background-color: var(--black);
        border: 1px solid var(--white);
        border-radius: var(--r-sm);
        color: var(--white);
        text-align: left;
        transition: var(--transition);

        &:hover,
        &:focus-visible {
            background-color: var(--white);
            color: var(--black);
        }
    }

    & .b2b-app__badge-icon {
        flex: none;
    }

    & .b2b-app__badge-text {
        display: flex;
        flex-direction: column;
        line-height: var(--lhTight);
    }

    & .b2b-app__badge-small {
        font-size: var(--f12);
        text-transform: uppercase;
    }

    & .b2b-app__badge-name {
        font-size: var(--f20);
        font-weight: 600;
    }
}

/* B2B APP section responsive css */
@media (max-width: 767.98px) {
    .b2b-app {
        & .b2b-app__badges {
            gap: var(--sp15);
        }
    }
}

@media (max-width: 575.98px) {
    .b2b-app {
        & .b2b-app__badge {
            padding: var(--sp8) var(--sp15);
        }

        & .b2b-app__badge-name {
            font-size: var(--f18);
        }
    }
}


/* 37. B2B Pipeline */
.b2b-pipeline {    

    & .b2b-pipeline__head {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--g40);
        align-items: start;
        margin-bottom: var(--sp50);
    }

    /* holds the design's wrap — "…DRIVER PIPELINE / WITH 160 DRIVING ACADEMY" */
    & .b2b-pipeline__intro {
        max-width: 620px;
    }

    & .b2b-pipeline__aside {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp30);
    }

    & .b2b-pipeline__lead {
        max-width: 570px;
    }

    & .b2b-pipeline__figure {
        overflow: hidden;
        aspect-ratio: 1460 / 500;
    }

    & .b2b-pipeline__img {
        display: block;
        width: 100%;
        height: 120%;
        /* the design crops the photo to the full content width — 1460 x 500 */
      
        object-fit: cover;
        object-position: center;
    }
}

/* B2B PIPELINE section responsive css */
@media (max-width: 991.98px) {
    .b2b-pipeline {
        & .b2b-pipeline__head {
            grid-template-columns: 1fr;
            margin-bottom: var(--sp40);
        }

        & .b2b-pipeline__intro,
        & .b2b-pipeline__lead {
            max-width: none;
        }

        /* the 2.9:1 strip turns into a letterbox once the column narrows */
        & .b2b-pipeline__figure {
            aspect-ratio: 16 / 9;
        }
    }
}

@media (max-width: 575.98px) {
    .b2b-pipeline {
        & .b2b-pipeline__figure {
            aspect-ratio: 4 / 3;
        }
    }
}


/* 38. Careers Benefits */
.careers-benefits {
    /* width of one card in the 3-up row — reused by the centred short-row cases */
    --careers-benefits-col: calc((100% - (var(--g40) * 2)) / 3);

    position: relative;
    padding-block: var(--sectionGap);
    color: var(--white);
    isolation: isolate;
    overflow: clip;
    background-color: var(--hero-dark);

    & .careers-benefits__media {
        position: absolute;
        inset: 0;
        z-index: -1;
        background-color: var(--hero-dark);

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, .82);
            pointer-events: none;
        }

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    & .careers-benefits__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-content: center;
        gap: var(--g40);

        /* Fewer than three cards: keep the 3-up width and centre the row instead. */
        &:has(> .careers-benefits__card:nth-child(2):last-child) {
            grid-template-columns: repeat(2, var(--careers-benefits-col));
        }

        &:has(> .careers-benefits__card:only-child) {
            grid-template-columns: var(--careers-benefits-col);
        }
    }

    & .careers-benefits__card {
        /* The lift and the border width; the anti-flicker strip below is measured from both. */
        --hover-lift: var(--sp20);
        --hover-border: 1px;

        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--sp30);
        padding: var(--sp50);
        border: var(--hover-border) solid var(--orange);
        transition: var(--transition);

        /* Icon pop ladder: MotionFlow lands .mf-animate on every card at once, so stagger them here. */
        --icon-pop-delay: .5s;

        &:nth-child(2) { --icon-pop-delay: .65s; }
        &:nth-child(3) { --icon-pop-delay: .8s; }

        /* The lift rides `translate`, not `transform`, so MotionFlow's fade-up cannot swallow it. */
        &:hover {
            /* Same treatment as .finance: the card fills white, the copy flips dark, and the title keeps orange. */
            background-color: var(--white);
            border-color: var(--white);
            color: var(--text);
            translate: 0 calc(var(--hover-lift) * -1);

            /* Anti-flicker: the strip re-covers the vacated band, measured off the padding box so the border returns. */
            &::after {
                content: "";
                position: absolute;
                inset-block-start: 100%;
                inset-inline: calc(var(--hover-border) * -1);
                height: calc(var(--hover-lift) + var(--hover-border));
            }
        }

        /* The icon scales from 0 as its card reveals; gated so no-JS keeps it full size. */
        &[data-mf-animation]:not(.mf-animate) .careers-benefits__icon {
            scale: 0;
        }
    }

    & .careers-benefits__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 84px;
        height: 84px;
        background: var(--gradient2);
        border-radius: var(--r-full);
        color: var(--white);
        transition: scale var(--ease-out);
        transition-delay: var(--icon-pop-delay);
        & svg{
            max-width: 47px;
            max-height: 47px;
        }
    }

    & .careers-benefits__card-title {                
        text-transform: uppercase;
        color: var(--orange);
    }

    p+p {
        margin-top: 0;
    }
}

/* CAREERS BENEFITS section responsive css */
@media (max-width: 991.98px) {
    .careers-benefits {
        /* No lift at touch widths: a tap would leave the card sitting 20px up. */
        & .careers-benefits__card:hover {
            translate: none;

            /* nothing is vacated without the lift, so the strip would only add a dead band under a tapped card */
            &::after {
                content: none;
            }
        }

        & .careers-benefits__grid {
            grid-template-columns: 1fr;

            /* single column here, so the short-row cases stack full width too */
            &:has(> .careers-benefits__card:nth-child(2):last-child),
            &:has(> .careers-benefits__card:only-child) {
                grid-template-columns: 1fr 1fr;

                @media screen and (max-width: 575.98px){
                    grid-template-columns: 1fr;
                }
            }
        }

        & .careers-benefits__icon {
            width: 64px;
            height: 64px;
            margin-bottom: var(--sp20);
        }
    }
}


/* 39. Careers Explore */
.careers-explore {
    /* width of one card in the 4-up row — reused by the centred short-row cases */
    --careers-explore-col: calc((100% - (var(--g40) * 3)) / 4);

    padding-block: var(--sectionGap);
    background-color: var(--dark);
    color: var(--white);

    & .careers-explore__grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        justify-content: center;
        gap: var(--g40);

        /* Fewer than four cards: keep the 4-up width and centre the row instead. */
        &:has(> .careers-explore__card:nth-child(3):last-child) {
            grid-template-columns: repeat(3, var(--careers-explore-col));
        }

        &:has(> .careers-explore__card:nth-child(2):last-child) {
            grid-template-columns: repeat(2, var(--careers-explore-col));
        }

        &:has(> .careers-explore__card:only-child) {
            grid-template-columns: var(--careers-explore-col);
        }
    }

    & .careers-explore__card {
        /* How far the card lifts on hover; the anti-flicker strip is measured from the same property. */
        --hover-lift: var(--sp20);

        position: relative;
        display: flex;
        flex-direction: column;
        background: var(--white);
        color: var(--text);
        transition: var(--transition);

        /* The lift rides `translate`, not `transform`, so MotionFlow's fade-up cannot swallow it. */
        &:hover,
        &:focus-visible {
            box-shadow: var(--shadow-lg);
            translate: 0 calc(var(--hover-lift) * -1);

            /* Anti-flicker: a transparent strip re-covers the band the lift vacates and travels with the card. */
            &::after {
                content: "";
                position: absolute;
                inset-block-start: 100%;
                inset-inline: 0;
                height: var(--hover-lift);
                background-color: #00000000;
            }
        }
    }

    & .careers-explore__img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    & .careers-explore__body {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--sp15);
        padding: var(--sp25);
        text-align: center;
    }

    & .careers-explore__card-title {
        font-size: var(--f24);
        text-transform: uppercase;
    }

    /* A smaller Montserrat variant of the global .btn-link; the whole card is the anchor. */
    & .btn-link {
        font-family: var(--font-montserrat);
        font-size: var(--f16);
        font-weight: 700;
        text-transform: uppercase;
    }

    & .careers-explore__card:hover .btn-link:after,
    & .careers-explore__card:focus-visible .btn-link:after {
        margin-left: var(--sp20);
    }
}

/* CAREERS EXPLORE section responsive css */
@media (max-width: 991.98px) {
    .careers-explore {
        --careers-explore-col: calc((100% - var(--g40)) / 2);

        /* No lift at touch widths; only the lift goes, the shadow and arrow slide stay. */
        & .careers-explore__card:hover,
        & .careers-explore__card:focus-visible {
            translate: none;

            /* nothing is vacated without the lift, so the strip would only add a dead band under a tapped card */
            &::after {
                content: none;
            }
        }

        & .careers-explore__grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));

            /* 3 and 2 cards fill the two columns again — only a single card centres */
            &:has(> .careers-explore__card:nth-child(3):last-child),
            &:has(> .careers-explore__card:nth-child(2):last-child) {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            /* an odd 3rd card ends up alone on row 2 — centre it at column width */
            &:has(> .careers-explore__card:nth-child(3):last-child) > .careers-explore__card:last-child {
                grid-column: span 2;
                width: var(--careers-explore-col);
                margin-inline: auto;
            }
        }
    }
}

@media (max-width: 575.98px) {
    .careers-explore {
        & .careers-explore__grid {
            grid-template-columns: 1fr;

            &:has(> .careers-explore__card:nth-child(3):last-child),
            &:has(> .careers-explore__card:nth-child(2):last-child),
            &:has(> .careers-explore__card:only-child) {
                grid-template-columns: 1fr;
            }

            /* Clear the tablet centring; an auto margin would shrink the card in a single-column grid. */
            &:has(> .careers-explore__card:nth-child(3):last-child) > .careers-explore__card:last-child {
                grid-column: auto;
                width: auto;
                /* margin-inline: 0; */
            }
        }

        & .careers-explore__card {
            max-width: 350px;
            margin-inline: auto;
        }
    }
}


/* 40. Careers Logos */
.careers-logos {
    /* The rhythm above and below comes from the global `main section` margin-bottom. */
    padding-block: 0;    

    /* MotionFlow re-parents these children, so a gap here stops applying; spacing lives on the items. */
    & .careers-logos__ticker {
        display: flex;
        align-items: center;
        margin-top: var(--sp65);
    }

    /* The available logos are white on transparent, so the tile is dark. Flip when colour logos land. */
    & .careers-logos__item {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 200px;
        height: 100px;
        margin-inline: calc(var(--g40) / 2);
        padding: 0;
        box-shadow: var(--shadow-sm);
    }

    & .careers-logos__img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        object-fit: contain;
    }
}

/* CAREERS LOGOS section responsive css */
@media (max-width: 767.98px) {
    .careers-logos {
        & .careers-logos__item {
            width: 150px;
            height: 80px;
            padding: var(--sp15);
        }
    }
}


/* 41. Careers Programs */
.careers-programs {
    /* width of one card in the 3-up row — reused by the centred short-row cases */
    --careers-programs-col: calc((100% - (var(--g40) * 2)) / 3);

    /* The rhythm above and below comes from the global `main section` margin-bottom. */
    padding-block: 0;

    & .careers-programs__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-content: center;
        gap: var(--g40);

        /* Fewer than three cards: keep the 3-up width and centre the row instead. */
        &:has(> .careers-programs__card:nth-child(2):last-child) {
            grid-template-columns: repeat(2, var(--careers-programs-col));
        }

        &:has(> .careers-programs__card:only-child) {
            grid-template-columns: var(--careers-programs-col);
        }
    }

    & .careers-programs__card {
        /* How far the card lifts on hover; the anti-flicker strip is measured from the same property. */
        --hover-lift: var(--sp20);

        position: relative;
        display: flex;
        flex-direction: column;
        background: var(--white);
        box-shadow: var(--shadow-md);
        transition: var(--transition);

        /* The lift rides `translate`, not `transform`, so MotionFlow's fade-up cannot swallow it. */
        &:hover,
        &:focus-within {
            box-shadow: var(--shadow-lg);
            translate: 0 calc(var(--hover-lift) * -1);

            /* Anti-flicker: a transparent strip re-covers the band the lift vacates and travels with the card. */
            &::after {
                content: "";
                position: absolute;
                inset-block-start: 100%;
                inset-inline: 0;
                height: var(--hover-lift);
            }
        }
    }

    & .careers-programs__img {
        width: 100%;
        aspect-ratio: 460 / 245;
        object-fit: cover;
    }

    & .careers-programs__body {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp25);
        padding: var(--sp30);
    }

    /* the design sets card titles in Montserrat, not the Staatliches h3 default */
    & .careers-programs__card-title {
        font-family: var(--font-montserrat);
        font-size: var(--f20);
        font-weight: 700;
        text-transform: uppercase;
    }

    & .careers-programs__text {
        color: var(--muted-2);
    }

    & .careers-programs__card .btn {
        width: 100%;
        margin-top: auto;
        text-align: center;
    }

    & .careers-programs__actions {
        display: flex;
        justify-content: center;
        margin-top: var(--sectiongapHalf);
    }

    & .careers-programs__more {
        border: 1px solid var(--black);
        background: transparent;

        &:hover{
            border-color: var(--orange);
        }
    }
}

/* CAREERS PROGRAMS section responsive css */
@media (max-width: 991.98px) {
    .careers-programs {
        --careers-programs-col: calc((100% - var(--g40)) / 2);

        /* No lift at touch widths; only the lift goes, the shadow stays. */
        & .careers-programs__card:hover,
        & .careers-programs__card:focus-within {
            translate: none;

            /* nothing is vacated without the lift, so the strip would only add a dead band under a tapped card */
            &::after {
                content: none;
            }
        }

        & .careers-programs__grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));

            /* 2 cards fill both columns again — only a single card centres */
            &:has(> .careers-programs__card:nth-child(2):last-child) {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }
    }
}

@media (max-width: 575.98px) {
    .careers-programs {
        & .careers-programs__grid {
            grid-template-columns: 1fr;

            /* single column here, so the short-row cases stack full width too */
            &:has(> .careers-programs__card:nth-child(2):last-child),
            &:has(> .careers-programs__card:only-child) {
                grid-template-columns: 1fr;
            }
        }
    }
}


/* 42. Careers Provider */
.careers-provider {
    /* The rhythm above and below comes from the global `main section` margin-bottom. */
    padding-block: 0;

    & .careers-provider__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    /* ---------- left: who we are ---------- */
    & .careers-provider__intro {
        padding: var(--sp100) var(--sp65);
        background-color: var(--charcoal-2);
        color: var(--white);
    }

    & .careers-provider__title {
        margin-bottom: var(--sp30);        
        text-transform: uppercase;
    }

    /* ---------- right: find a school ---------- */
    & .careers-provider__find {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--sp25);
        padding: var(--sp100) var(--sp65);
        background-color: var(--dark-card);
        color: var(--white);
        text-align: center;
        position: relative;
        
        img {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: .2;
            z-index: 0;
            bottom: 0;
            left: 0;
            object-fit: cover;
        }
    }

    & .careers-provider__find-title {
        text-transform: uppercase;
        font-size: var(--f60);
        position: relative;
    }

    & .careers-provider__find-text {
        max-width: 30em;   
        position: relative;     
    }

    & .careers-provider__find .btn {
        margin-top: var(--sp15);
        position: relative;
    }
}

/* CAREERS PROVIDER section responsive css */
@media (max-width: 1199.98px) {
    .careers-provider {
        & .careers-provider__intro,
        & .careers-provider__find {
            padding: var(--sp80) var(--sp40);
        }
    }
}

@media (max-width: 991.98px) {
    .careers-provider {
        & .careers-provider__grid {
            grid-template-columns: 1fr;
        }
    }
}


/* 43. Careers Team */
.careers-team {
    /* Fixed-size arrows get a section variable, since sp tokens step down and would shrink the tap target. */
    --nav-size: 40px;

    padding-block: var(--sectionGap);
    background-color: var(--asphalt);

    & .careers-team__head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp20);
        margin-bottom: var(--sp50);
    }

    /* A toolbar heading sitting in a flex row beside the arrows, so it carries its own class. */
    & .careers-team__title {
        color: var(--white);
        text-transform: uppercase;
    }

    & .careers-team__nav {
        display: flex;
        align-items: center;
        gap: var(--g40);
    }

    /* prev / next — outlined orange circles, as drawn */
    & .careers-team__arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--nav-size);
        height: var(--nav-size);
        background: transparent;
        border: 2px solid var(--orange);
        border-radius: var(--r-full);
        color: var(--orange);
        cursor: pointer;
        transition: var(--transition);

        &:hover,
        &:focus-visible {
            background: var(--orange);
            color: var(--white);
        }

        /* Four slides fill the row at desktop, so Swiper locks the track and disables both arrows. */
        &.swiper-button-disabled {
            opacity: .35;
            pointer-events: none;
        }
    }

    /* Swiper divides the container itself, so the slide carries only the height the photo draws. */
    & .careers-team__img {
        display: block;
        width: 100%;
        aspect-ratio: 335 / 270;
        max-width: none;
        object-fit: cover;
    }

    /* Each photo is a real link to its file, so it opens by keyboard and without JS. */
    & .careers-team__link {
        display: block;
        cursor: zoom-in;

        &:focus-visible {
            outline: 2px solid var(--orange);
            outline-offset: 4px;
        }
    }
}

/* CAREERS TEAM section responsive css */
@media (max-width: 575.98px) {
    .careers-team {
        & .careers-team__nav {
            gap: var(--sp20);
        }
    }
}


/* 44. Find School */
.find-school {
    /* The band's fixed height, as a section variable so it does not shrink at every breakpoint. */
    --band-min-h: 560px;

    /* the dark band itself, inset in the container */
    & .find-school__band {
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: var(--band-min-h);
        padding-block: var(--sectionGap);
        padding-inline: var(--gutter);
        background-color: var(--dark);
        color: var(--white);
        text-align: center;
    }

    /* The nationwide map sits behind the copy at its static position; the band's overflow clips it. */
    & .find-school__map {
        position: absolute;
        z-index: 1;
        opacity: .15;
    }

    & .find-school__content {
        position: relative;
        z-index: 2;

        & .btn {
            margin: 0 auto;
        }
        & .section-title-desc{
            max-width: 780px;
            @media (max-width: 991.98px) {
                max-width: 100%;
            }
        }

    }
}

/* FIND SCHOOL section responsive css */
@media (max-width: 767.98px) {
    .find-school {
        /* on a phone the copy is taller than the band, so the floor goes */
        & .find-school__band {
            min-height: auto;
        }
    }
}


/* 45. Enroll Banner */
/* Page-scoped companion to the shared .banner block, styling the benefit checklist under the h1. */
.enroll-banner {
    & .enroll-banner__points {
        display: flex;
        flex-direction: column;
        gap: var(--sp30);
        margin-top: var(--sp40);
        list-style: none;
    }

    & .banner__title + .enroll-banner__points {
        margin-top: 0;
    }

    & .enroll-banner__point-head {
        display: flex;
        align-items: center;
        gap: var(--sp10);
        margin-bottom: var(--sp8);
    }

    & .enroll-banner__check {
        flex: 0 0 auto;
        color: var(--orange);
    }

    & .enroll-banner__point-title {
        font-size: var(--f20);
        font-weight: 700;
    }

    & .enroll-banner__point-text {
        display: block;
        font-size: var(--f20);
        font-weight: 500;
    }
}

/* ENROLL BANNER section responsive css */
@media (max-width: 991.98px) {
    .enroll-banner {
        & .enroll-banner__points {
            gap: var(--sp20);
            margin-top: var(--sp30);
        }
    }
}


/* 46. Blog Detail */
.blog-detail {
    /* the header is position:absolute, so the dark head carries its height as top padding — same convention as .banner */
    --blog-head: 170px;
    /* how far the hero image rides up into the dark head */
    --blog-overlap: 185px;
    /* the article measure: a 960px column centred inside .container */
    --blog-col: 960px;

    /* ---------- dark head: date + title ---------- */
    & .blog-detail__head {
        padding-block: calc(var(--blog-head) + var(--sp80)) calc(var(--blog-overlap) + var(--sp35));
        background-color: var(--charcoal-2);
        color: var(--white);
    }

    & .blog-detail__head-inner {
        max-width: var(--blog-col);
        margin-inline: auto;
    }

    & .blog-detail__date {
        display: flex;
        align-items: center;
        gap: var(--sp10);
        margin-bottom: var(--sp30);
        font-size: var(--f16);
        font-weight: 500;
        text-transform: uppercase;
    }

    & .blog-detail__date-icon {
        flex: 0 0 auto;
        color: var(--orange);
    }

    /* h1 stays the page's single h1; the design just sets it at the h2 size */
    & .blog-detail__title {
        font-size: var(--f50);
        text-transform: uppercase;
    }

    /* ---------- hero image, overlapping the dark head ---------- */
    & .blog-detail__figure {
        max-width: var(--blog-col);
        margin-top: calc(var(--blog-overlap) * -1);
        margin-inline: auto;
        margin-bottom: var(--sp80);
    }

    & .blog-detail__img {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    /* Article body: rich text from the CMS, so bare tags are styled instead of demanding classes. */
    & .blog-detail__body {
        max-width: var(--blog-col);
        margin-inline: auto;
        font-size: var(--f18);

        & > * + * {
            margin-top: var(--sp20);
        }

        & h2 {
            margin-top: var(--sp40);
            font-size: var(--f35);
            /* font-family: var(--font-montserrat); font-weight: 700; color: var(--text); */
        }

        & ul {
            padding-left: var(--sp20);
            list-style: disc;
        }

        & ol {
            padding-left: var(--sp25);
            list-style: decimal;
        }

        & li {
            font-size: var(--f18);
            line-height: var(--bodyLh);
        }

        & li + li {
            margin-top: var(--sp8);
        }

        & strong {
            font-weight: 700;
            color: var(--text);
        }

        & a:not(.b2b-app__badge) {
            color: var(--orange);
            /* text-decoration: underline; */
            transition: var(--transition);
        }

        & a:hover,
        & a:focus-visible {
            text-decoration-thickness: 2px;
        }
        & hr{
            margin-block: var(--sp40);
            color: rgb(0 0 0 / 40%);
        }
    }

    /* ---------- previous / next post ---------- */
    & .blog-detail__nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--g40);
        max-width: var(--blog-col);
        margin-top: var(--sp80);
        margin-inline: auto;
        padding-top: var(--sp65);
        border-top: 1px solid rgb(0 0 0 / 40%);
    }

    & .blog-detail__nav-card {
        display: flex;
        align-items: flex-start;
        gap: var(--sp20);
        padding: var(--sp20);
        background: var(--white);
        box-shadow: var(--shadow-md);
        transition: var(--transition);

        &:hover,
        &:focus-visible {
            box-shadow: var(--shadow-lg);
        }

        &.blog-detail__nav-card--next {
            flex-direction: row-reverse;
            text-align: right;
        }
    }

    & .blog-detail__nav-thumb {
        flex: 0 0 110px;
        width: 110px;
        height: 110px;
        object-fit: cover;
    }

    & .blog-detail__nav-body {
        display: flex;
        flex-direction: column;
        gap: var(--sp15);
        min-width: 0;
    }

    & .blog-detail__nav-card--next .blog-detail__nav-body {
        align-items: flex-end;
    }

    & .blog-detail__nav-title {
        font-family: var(--font-montserrat);
        font-size: var(--f22);
        font-weight: 700;
        color: var(--text);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* A smaller Montserrat variant of the global .btn-link; the whole card is the anchor. */
    & .btn-link {
        font-family: var(--font-montserrat);
        font-size: var(--f16);
        font-weight: 700;
        text-transform: uppercase;
    }

    /* the prev card points backwards: flip the row and the arrow with it */
    & .blog-detail__nav-card--prev .btn-link {
        flex-direction: row-reverse;

        &:after {
            margin-left: 0;
            margin-right: var(--sp10);
            rotate: 180deg;
        }
    }

    & .blog-detail__nav-card--prev:hover .btn-link:after,
    & .blog-detail__nav-card--prev:focus-visible .btn-link:after {
        margin-right: var(--sp20);
    }

    & .blog-detail__nav-card--next:hover .btn-link:after,
    & .blog-detail__nav-card--next:focus-visible .btn-link:after {
        margin-left: var(--sp20);
    }
}

/* BLOG DETAIL section responsive css */
@media (max-width: 1199.98px) {
    .blog-detail {
        --blog-head: 150px;
        --blog-overlap: 140px;
        --blog-col: 900px;
    }
}

@media (max-width: 991.98px) {
    .blog-detail {
        /* the header wraps to two full-width rows below 1025px, so the head needs more clearance than the desktop tiers */
        --blog-head: 160px;
        --blog-overlap: 100px;
        --blog-col: 100%;

        & .blog-detail__title {
            font-size: var(--f40);
        }
    }
}

@media (max-width: 767.98px) {
    .blog-detail {
        --blog-overlap: 60px;

        & .blog-detail__nav {
            grid-template-columns: 1fr;
        }

        & .blog-detail__nav-card--next {
            flex-direction: row;
            text-align: left;
        }

        & .blog-detail__nav-card--next .blog-detail__nav-body {
            align-items: flex-start;
        }
    }
}

@media (max-width: 575.98px) {
    .blog-detail {
        /* the topbar address and phone stack here, so the header grows again */
        --blog-head: 180px;

        & .blog-detail__nav-thumb {
            flex-basis: 80px;
            width: 80px;
            height: 80px;
        }
    }
}


/* 47. Blog Listing */
.blog-listing {    
    /* ---------- toolbar: tabs left, type filter right ---------- */
    & .blog-listing__toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp20);
        margin-bottom: var(--sectiongapHalf);
    }

    & .blog-listing__tabs {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp30);
    }

    & .blog-listing__tab {        
        border: 0;
        border-bottom: 2px solid transparent;
        background: transparent;
        font-family: var(--font-staarliches);
        font-size: var(--f30);        
        text-transform: uppercase;
        color: var(--muted);
        cursor: pointer;
        transition: var(--transition);

        &:hover {
            border-bottom-color: var(--orange);
            color: var(--text);
        }

        &.is-active {
            border-bottom-color: var(--orange);
            color: var(--text);
        }
    }

    & .blog-listing__filter{
        position: relative;
    }

    & .blog-listing__select {
        min-width: 330px;
        padding: 0 var(--sp50) 0 var(--sp20);
        background: var(--white);
        border: 1px solid var(--line);
        font-family: var(--font-montserrat);
        font-size: var(--f16);
        font-weight: 500;
        text-transform: uppercase;
        color: var(--text);
        cursor: pointer;
        transition: var(--transition);
        height: 44px;
        appearance: none;   

        &:focus-visible {
            border-color: var(--orange);
        }
    }

    & .blog-listing__filter-icon {
        position: absolute;
        top: 50%;
        right: var(--sp20);
        color: var(--black);
        transform: translateY(-50%);
        pointer-events: none;
    }

    /* ---------- load more ---------- */
    & .blog-listing__actions {
        display: flex;
        justify-content: center;
        margin-top: var(--sp50);
    }

    & .blog-listing__load {
        border: 1px solid var(--line);
        cursor: pointer;
        width: auto;
    }
}

 /* ---------- card grid ---------- */
.blog-listing__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* align-items: start; */
    gap: var(--g40);


& .blog-listing__card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    box-shadow: var(--shadow-md);
}

& .blog-listing__card-media {
    position: relative;        
    overflow: clip;

    & .blog-listing__card-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        aspect-ratio: 3 / 2;           
    }
}

& .blog-listing__badge {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 4px 10px;
    background: var(--white);
    font-size: var(--f16);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--orange);
}

& .blog-listing__card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp30);
    padding: var(--sp30);
}

& .blog-listing__date {
    display: flex;
    align-items: center;
    gap: var(--sp10);
    font-size: var(--f16);
    text-transform: uppercase;
    color: var(--muted-2);
    font-weight: 500;
    & svg{
        max-width: 23px;
        max-height: 23px;
    }
}

& .blog-listing__date-icon {
    flex: 0 0 auto;
    color: var(--orange);
}

/* the design sets card titles in Montserrat, not the Staatliches h3 default */
& .blog-listing__card-title {
    font-family: var(--font-montserrat);
    font-size: var(--f22);
    font-weight: 700;
    text-transform: uppercase;
    display: -webkit-box !important;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

& .blog-listing__card-text {
    display: -webkit-box !important;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--muted-2);
}

/* A smaller Montserrat variant of the global .btn-link; arrow and hover slide come from ::after. */
& .btn-link {
    font-family: var(--font-montserrat);
    font-size: var(--f16);
    font-weight: 700;
    text-transform: uppercase;
}
}

/* BLOG LISTING section responsive css */
@media (max-width: 991.98px) {
    
        .blog-listing__grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    
}

@media (max-width: 767.98px) {
    .blog-listing {
        & .blog-listing__toolbar {
            flex-direction: column;
            align-items: flex-start;
        }

        & .blog-listing__select {
            width: 100%;
            min-width: 0;
        }

    }
        .blog-listing__grid {
        grid-template-columns: 1fr;
    }
}


/* 48. Similar Blogs */
.similar-blogs {
    /* The rhythm above comes from the global `main section` margin-bottom; only the footer run-in is padded. */
    padding-block: 0 var(--sectiongapHalf);

 }


/* 49. Vendor Location */
/* =================================================================== GLOBAL ADDITIONS FOR THE LOCATION PAGE ===================================================================
   Two things the location page needs from the global layer. Kept here instead of in
   vendor.css so vendor.css stays untouched — link this file immediately AFTER
   vendor.css, before any section file.

   If either of these is ever wanted site-wide, move it into vendor.css :root /
   the ACCORDION block and delete it from here (see CLAUDE.md §6.1).
   =================================================================== */

/* Tokens for the endorsements table, sampled from the client's design export. */
:root {
    --table-head: #498ac7;
    --green: #1d9432;
}

/* Lets a long unbreakable question wrap so the accordion fits 320px. Scoped to this page only. */
.accordion .accordion__item .accordion__trigger {
    overflow-wrap: anywhere;
}


/* 50. Locations */
.locations {
    /* width of one card in the 3-up row — reused by the centred short-row cases */
    --locations-col: calc((100% - (var(--g40) * 2)) / 3);

    padding-block: var(--sectionGap);
    background-color: var(--charcoal-2);
    color: var(--white);
    & .locations__title {
        margin-bottom: var(--sp65);
    }

    & .locations__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-content: center;
        gap:  var(--g40);
        max-width: 1140px;
        margin-inline: auto;

        /* Fewer than three cards: keep the 3-up width and centre the row instead. */
        &:has(> .loccard:nth-child(2):last-child) {
            grid-template-columns: repeat(2, var(--locations-col));
        }

        &:has(> .loccard:only-child) {
            grid-template-columns: var(--locations-col);
        }
    }

    & .locations__actions {
        display: flex;
        justify-content: center;
        margin-top: var(--sp30);
    }

    /* ---------- school card ---------- */
    & .loccard {
        /* The lift and the border width; the anti-flicker strip below is measured from both. */
        --hover-lift: var(--sp20);
        --hover-border: 1px;

        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--sp10);
        padding: var(--sp50);
        border: var(--hover-border) solid var(--white);
        text-align: center;
        transition: var(--transition);

        /* Same hover as .finance: white surface, white border, 20px lift on `translate` rather than `transform`. */
        &:hover,
        &:focus-within {
            background-color: var(--white);
            border-color: var(--white);
            translate: 0 calc(var(--hover-lift) * -1);

            /* Anti-flicker: the strip re-covers the vacated band, measured off the padding box so the border returns. */
            &::after {
                content: "";
                position: absolute;
                inset-block-start: 100%;
                inset-inline: calc(var(--hover-border) * -1);
                height: calc(var(--hover-lift) + var(--hover-border));
            }
        }

        /* The section paints its copy white, so it flips with the surface; the orange details stay. */
        &:hover .loccard__city,
        &:hover .loccard__unit,
        &:hover .loccard__seats,
        &:focus-within .loccard__city,
        &:focus-within .loccard__unit,
        &:focus-within .loccard__seats {
            color: var(--text);
        }
    }

    & .loccard__city {
        font-size: var(--f24);
        text-transform: uppercase;
    }
    & .loccard__count-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--sp5);
    }
    & .loccard__count {
        font-family: var(--font-staarliches);
        font-size: var(--f40);
        line-height: var(--lhTight);
        color: var(--orange);
        display: none;
    }

    & .loccard__unit {
        font-size: var(--f16);
        font-weight: 700;
        text-transform: uppercase;
    }

    & .loccard__seats {        
        font-size: var(--f20);
        font-weight: 700;
        text-transform: uppercase;
        line-height: 1.2;

        & span {
            color: var(--orange);
        }
    }   
    & .loccard__link {
        margin-top: var(--sp20);
        font-size: var(--f16);
        font-family: var(--font-montserrat);
        font-weight: bold;
        text-transform: uppercase;
    }
}

/* LOCATIONS section responsive css */
@media (max-width: 991.98px) {
    .locations {
        /* No lift at touch widths: a tap would leave the card sitting 20px up. */
        & .loccard:hover,
        & .loccard:focus-within {
            translate: none;

            /* nothing is vacated without the lift, so the strip would only add a dead band under a tapped card */
            &::after {
                content: none;
            }
        }
    }
}

@media (max-width: 767.98px) {
    .locations {
        & .locations__grid {
            grid-template-columns: 1fr;

            /* single column here, so the short-row cases stack full width too */
            &:has(> .loccard:nth-child(2):last-child),
            &:has(> .loccard:only-child) {
                grid-template-columns: 1fr;
            }
        }
    }
}


/* 51. Loc About */
.loc-about {    
    & .loc-about__title {
        margin-bottom: var(--sp55);
        text-align: center;
        text-transform: uppercase;
    }

    /* The figure owns the height and clips, so the img can be 20% taller; that surplus is travel room. */
    & .loc-about__media {
        height: 680px;
        margin: 0 0 var(--sp55);
        overflow: hidden;

        & img {
            display: block;
            width: 100%;
            height: 120%;
            object-fit: cover;
        }
    }

    & .loc-about__cols {
        display: grid;
        grid-template-columns: auto auto auto;
        gap: var(--g40);
        padding-bottom: var(--sectionGap);
        border-bottom: 1px solid var(--black);
    }

    & .loc-about__col {
        & strong {
            font-weight: 700;
        }
    }
}

/* LOC ABOUT section responsive css */
@media (max-width: 1199.98px) {
    .loc-about {
        & .loc-about__media {
            height: 520px;
        }
    }
}

@media (max-width: 991.98px) {
    .loc-about {
        & .loc-about__cols {
            grid-template-columns: 1fr;
        }

        /* Parallax is off at tablet and below, so the image goes back to filling the frame. */
        & .loc-about__media {
            height: 380px;

            & img {
                height: 100%;
            }
        }
    }
}

@media (max-width: 575.98px) {
    .loc-about {
        & .loc-about__media {
            height: 260px;
        }
    }
}


/* 52. Locmap */
.locmap {   
    & .locmap__frame {
        margin: 0;
        padding: var(--sp15);
        background: var(--white);
        box-shadow: var(--shadow-md);

        & img {
            display: block;
            width: 100%;
            height: 620px;
            object-fit: cover;
        }
    }
}

/* LOCMAP section responsive css */
@media (max-width: 1199.98px) {
    .locmap {
        & .locmap__frame img {
            height: 480px;
        }
    }
}

@media (max-width: 767.98px) {
    .locmap {
        & .locmap__frame {
            padding: var(--sp8);

            & img {
                height: 320px;
            }
        }
    }
}


/* 53. Endorsements */
.endorsements {
    & .endorsements__list {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--sp40);
        margin-bottom: var(--sp65);
        list-style: none;
    }

    & .endorsements__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--sp20);
        max-width: 180px;
        text-align: center;
    }

    & .endorsements__icon {
        color: var(--orange);
        height: 65px;
        display: flex;
        align-items: flex-end;

        & svg {
            display: block;
            width: 100%;
            height: auto;
            max-height: 65px;
        }
    }

    & .endorsements__label {
        font-family: var(--font-montserrat);
        font-size: var(--f16);
        font-weight: 700;
        line-height: var(--lhTight);
        text-transform: uppercase;
    }

    /* horizontal scroll is kept inside the wrapper so the page never scrolls */
    & .endorsements__table-wrap {
        overflow-x: auto;
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-sm);
    }

    & .endorsements__table {
        width: 100%;
        min-width: 900px;
        border-collapse: collapse;
        text-align: left;

        & thead {
            background: var(--table-head);
            color: var(--white);
        }

        & th {
            padding: var(--sp30) var(--sp25);
            font-family: var(--font-montserrat);
            font-size: var(--f16);
            font-weight: 700;
            text-transform: uppercase;
            vertical-align: middle;
        }

        & .endorsements__col--tsa {
            text-align: center;
        }

        & td {
            padding: var(--sp30) var(--sp25);
            background: var(--white);
            font-size: var(--f16);
            vertical-align: middle;

            &:has(.endorsements__flag.endorsements__flag--yes),
            &:has(.endorsements__flag.endorsements__flag--no) {
                text-align: center;
            }
        }

        & tbody tr:nth-child(odd) :is(td, th) {
            background: var(--cdf7);
        }
    }

    /* row header: a th for semantics, but styled as the design's orange label */
    & .endorsements__name {
        padding: var(--sp30) var(--sp25);
        background: var(--white);
        font-family: var(--font-montserrat);
        font-size: var(--f16);
        font-weight: 700;
        text-transform: none;
        color: var(--orange);
    }

    & .endorsements__flag {
        display: inline-flex;

        & svg {
            display: block;
        }
    }

    & .endorsements__flag--yes {
        color: var(--green);
    }

    & .endorsements__flag--no {
        color: var(--orange);
    }
}

/* ENDORSEMENTS section responsive css */
@media (max-width: 991.98px) {
    .endorsements {
        & .endorsements__list {
            justify-content: center;
            gap: var(--sp50);
        }

        & .endorsements__item {
            max-width: 140px;
        }
    }
}

@media (max-width: 575.98px) {
    .endorsements {
        & .endorsements__item {
            max-width: 120px;
        }

        & .endorsements__label {
            font-size: var(--f14);
        }
    }
}


/* 54. Partners */
.partners {
    padding-block: var(--sectionGap) 0;
    background-color: var(--charcoal-2);
    color: var(--white);
  

    & .partners__list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: center;
        gap: var(--sp50) var(--g40);
        max-width: 1200px;
        margin-inline: auto;
        list-style: none;
        @media (max-width: 1199.98px) {
            gap: 40px;
        }
    }

    & .partners__item {
        display: grid;
        place-items: center;
    }

    /* Cap the tallest logo rather than forcing one height, so each keeps its real proportions. */
    & .partners__logo {
        display: block;
        width: 100%;
        max-width: 200px;
        height: 70px;
    }

    /* full-bleed photo strip — items sized here, wrappers belong to MotionFlow */
    & .partners__strip {
        display: flex;
        align-items: stretch;
        gap: 0;
        margin-top: var(--sp80);

        /* Each photo is a real link to its file, so it opens by keyboard and without JS. */
        & .partners__strip-link {
            display: block;
            flex: 0 0 auto;
            cursor: zoom-in;

            &:focus-visible {
                outline: 2px solid var(--orange);
                outline-offset: -4px;
            }
        }

        & img {
            display: block;
            width: auto;
            height: 320px;
            object-fit: cover;
        }
    }
}

/* PARTNERS section responsive css */
@media (max-width: 991.98px) {
    .partners {
        & .partners__logo {
            max-height: 44px;
        }

        & .partners__strip img {
            height: 240px;
        }
    }
}

@media (max-width: 575.98px) {
    .partners {
        & .partners__list {
            grid-template-columns: repeat(2, minmax(0, 1fr));         
        }

        & .partners__strip img {
            height: 180px;
        }
    }
}

@media (max-width: 479.98px) {
    .partners {
        & .partners__list {
            grid-template-columns: repeat(1, minmax(0, 1fr));         
        }
    }
}


/* 55. Reviews */
.reviews {
    position: relative;
    /* padding-block: var(--sectionGap); */
    overflow: clip;

    & .reviews__title {
        margin-bottom: var(--sp65);
        text-align: center;
        text-transform: uppercase;

        & span {
            color: var(--orange);
        }
    }

    & .reviews__rows {
        display: flex;
        flex-direction: column;
    }

    /* item sizing only — .mf-ticker* wrappers belong to MotionFlow */
    & .reviews__row {
        display: flex;
        align-items: stretch;
        gap: var(--g40);
    }

    /* Height is fixed and the width gives: fitReviewCards() writes the char count so copy is never cut. */
    & .review {
        --review-lines: 5;

        display: flex;
        flex-direction: column;
        gap: var(--sp20);
        width: calc(var(--chars, 200) * 1ch / var(--review-lines));
        min-width: 300px;
        max-width: 1200px;
        height: 280px;
        padding: var(--sp30);
        background: var(--white);
        box-shadow: var(--shadow-md);
    }

    & .review__stars {
        display: flex;
        align-items: center;
        gap: var(--sp4);
        color: var(--orange);

        & svg {
            display: block;
            fill: currentColor;
        }
    }

    & .review > p {
        flex: 1 1 auto;
        font-size: var(--f16);
        font-style: italic;
        line-height: 1.5;
        color: var(--muted-2);
    }

    & .review__name {
        font-size: var(--f16);
        font-weight: 700;
        text-transform: uppercase;
    }

    & .reviews__arrow {
        position: absolute;
        top: 50%;
        z-index: 1;
        transform: translateY(-50%);
        font-size: var(--f40);
        line-height: 1;
        color: var(--white);
        text-shadow: var(--shadow-md);
        pointer-events: none;
    }

    & .reviews__arrow--prev {
        left: var(--gutter);
    }

    & .reviews__arrow--next {
        right: var(--gutter);
    }
}

/* REVIEWS section responsive css */
@media (max-width: 767.98px) {
    .reviews {
        /* Narrower cards need more lines for the same copy; 380px leaves room for eight. */
        & .review {
            --review-lines: 8;

            height: 380px;
            max-width: 420px;
        }

        & .reviews__arrow {
            display: none;
        }
    }
}


/* 56. School Info */
.school-info {

    & .school-info__head {
        display: grid;
        grid-template-columns: 1fr 0.8fr;
        align-items: center;
        gap: var(--g40);
        margin-bottom: var(--sp50);
    }

    & .school-info__title {
        text-transform: uppercase;
    }

    & .school-info__lead {
        & strong {
            font-weight: 700;
        }
    }

    /* Twelve tracks, not four, so a cell can span a quarter, third, half or the whole strip. */
    & .school-info__grid {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        border: 2px solid var(--black);

        & > .school-info__cell {
            grid-column: span var(--cell-span, 3);
        }

        /* fewer than 4 cells: the cells share the full width instead of leaving an empty column inside the border */
        &:has(> .school-info__cell:nth-child(3):last-child) {
            --cell-span: 4;
        }

        &:has(> .school-info__cell:nth-child(2):last-child) {
            --cell-span: 6;
        }

        &:has(> .school-info__cell:only-child) {
            --cell-span: 12;
        }

        /* Five or more: four per row, and a trailing part-row spreads to fill the strip. */
        &:has(> .school-info__cell:nth-child(5)) {
            & > .school-info__cell:nth-child(4n + 1):last-child {
                --cell-span: 12;
            }

            & > .school-info__cell:nth-child(4n + 1):nth-last-child(2),
            & > .school-info__cell:nth-child(4n + 2):last-child {
                --cell-span: 6;
            }

            & > .school-info__cell:nth-child(4n + 1):nth-last-child(3),
            & > .school-info__cell:nth-child(4n + 2):nth-last-child(2),
            & > .school-info__cell:nth-child(4n + 3):last-child {
                --cell-span: 4;
            }
        }
    }

    & .school-info__cell {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--sp30);
        padding: var(--sp50);
        border-left: 2px solid var(--black);
        text-align: center;

        /* A row start, not just the first cell: with five or more, 5 and 9 start rows too. */
        &:nth-child(4n + 1) {
            border-left: 0;
        }

        /* …and that second row needs the divider a border-left cannot draw */
        &:nth-child(n + 5) {
            border-top: 2px solid var(--black);
        }
    }

    & .school-info__cell--address {
        align-items: stretch;
        text-align: left;
    }

    & .school-info__icon {
        display: grid;
        place-items: center;
        width: 80px;
        height: 80px;
        background: var(--gradient2);
        border-radius: var(--r-full);
        color: var(--white);      
        & svg{
            max-width: 50px;
            max-height: 43px;
        }
        ~ .school-info__label{
            margin-bottom: 0;
        }
    }

    & .school-info__label {
        font-family: var(--font-montserrat);
        font-size: var(--f18);
        font-weight: 700;
        text-transform: uppercase;
        text-align: center;
        margin-bottom: var(--sp30);
        @media (max-width: 1199.98px) {
            margin-bottom: 0;
        }
    }

    & .school-info__value {
        font-size: var(--f18);
    }

    /* auto-fit, so the list needs no width knowledge: a quarter cell fits one column, a wide one flows. */
    & .school-info__list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--sp20) var(--sp30);
        list-style: none;
    }

    & .school-info__item {
        display: flex;
        align-items: flex-start;
        gap: var(--sp15);
        font-size: var(--f18);

        & strong {
            font-weight: 700;
        }

        & a {
            color: inherit;

            &:hover,
            &:focus-visible {
                color: var(--orange);
            }
        }
    }
    & .offered {
        & .school-info__item{
            align-items: center;

        }
        & .school-info__item-icon {
            color: transparent;
        }
    }
    & .school-info__item-icon {
        flex: 0 0 auto;
        margin-top: 2px;
        color: var(--orange);
       
        & svg {
            display: block;
            fill: currentColor;
        }
    }

    & .school-info__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: var(--sp30);
        margin-top: var(--sp50);
    }
}

/* SCHOOL INFO section responsive css */
@media (max-width: 1199.98px) {
    .school-info {
        & .school-info__grid {
            --cell-span: 6;

            /* 3 cells drop to the same two columns here… */
            &:has(> .school-info__cell:nth-child(3):last-child) {
                --cell-span: 6;
            }

            /* …and the odd last cell fills row 2 rather than leaving half the box empty */
            &:has(> .school-info__cell:nth-child(3):last-child) > .school-info__cell:last-child {
                --cell-span: 12;
            }

            /* Same for five or more; these match the desktop block's specificity, so source order decides. */
            &:has(> .school-info__cell:nth-child(5)) {
                & > .school-info__cell:nth-child(n):nth-last-child(n) {
                    --cell-span: 6;
                }

                & > .school-info__cell:nth-child(2n + 1):last-child {
                    --cell-span: 12;
                }
            }
        }

        & .school-info__cell {
            &:nth-child(odd) {
                border-left: 0;
            }

            &:nth-child(n + 3) {
                border-top: 2px solid var(--black);
            }
        }
    }
}

@media (max-width: 991.98px) {
    .school-info {
        & .school-info__head {
            grid-template-columns: 1fr;
        }
    }
}

@media (max-width: 575.98px) {
    .school-info {
        & .school-info__grid {
            --cell-span: 12;

            /* single column here, so every count case stacks too */
            &:has(> .school-info__cell:nth-child(3):last-child),
            &:has(> .school-info__cell:nth-child(2):last-child),
            &:has(> .school-info__cell:only-child) {
                --cell-span: 12;
            }

            /* the 5+ part-row spans again need the :has() shape to outrank their desktop counterparts */
            &:has(> .school-info__cell:nth-child(5)) {
                & > .school-info__cell:nth-child(n):nth-last-child(n) {
                    --cell-span: 12;
                }
            }
        }

        & .school-info__cell {
            border-left: 0;

            & + .school-info__cell {
                border-top: 2px solid var(--black);
            }
        }

        & .school-info__actions {
            flex-direction: column;
            align-items: stretch;
            gap: var(--sp20);
        }
    }
}


/* 57. Student Say */
.student-say {
    position: relative;
    isolation: isolate;
    
    overflow: clip;

    /* The source image bakes unrelated cards into its top strip, cropped off by aspect-ratio and object-position. */
    & .container{
        position: relative;
    }
    & .student-say__illus {
        position: absolute;
        top: -30px;
        right: -150px;
        z-index: -1;
        /* width: 55%; */
        max-width: 900px;
        /* object-fit: cover; */
        pointer-events: none;

    }

    & .student-say__title {
        margin-bottom: var(--sp65);
        text-align: center;
        text-transform: uppercase;
    }

    /* one testimonial per view — Swiper reads the width off the slide itself */
    & .student-say__slider {
        overflow: hidden;
    }

    & .student-say__slide {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: end;
        width: 100%;
        height: auto;
    }

    /* The media is the square crop box; the img inside is 15% taller, giving the parallax travel room. */
    & .student-say__media {
        margin: 0;
        aspect-ratio: 1 / 1;
        overflow: hidden;

        & img {
            display: block;
            width: 100%;
            height: 115%;
            object-fit: cover;
        }
    }

    & .student-say__quote {
        margin-left: calc(var(--sp65) * -1);
        padding: var(--sp100) var(--sp55);
        background: var(--orange);
        color: var(--white);
        box-shadow: var(--shadow-md);
        max-width: 650px;
        margin-bottom: var(--sectionGap);
        z-index: 1;
    }

    & .student-say__stars {
        display: flex;
        align-items: center;
        gap: var(--sp4);
        margin-bottom: var(--sp15);
        color: #fff;

        & svg {
            display: block;
            fill: #fff;
        }
    }

    & .student-say__text {
        margin-bottom: var(--sp15);   
        & *{
           font-size: var(--f24);
           line-height: 1.45;
           font-style: italic;
           display: -webkit-box;
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 5;
           overflow: hidden;
        }
    }

    & .student-say__name {
        font-size: var(--f20);
        font-weight: 700;
        text-transform: uppercase;
    }

    /* Take .swiper-pagination back into the flow so the dots sit under the slide, as drawn. */
    & .student-say__dots {
        position: static;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--sp10);
        padding-bottom: var(--sp10);
        margin-top: var(--sp50);

        /* hollow ring by default, solid orange for the current slide */
        & .swiper-pagination-bullet {
            width: 20px;
            height: 20px;
            margin: 0;
            background: transparent;
            border: 2px solid var(--muted);
            opacity: 1;
        }

        & .swiper-pagination-bullet-active {
            background: var(--orange);
            border-color: var(--orange);
        }
    }

    & .student-say__actions {
        display: flex;
        justify-content: center;
        margin-top: var(--sp40);
    }

    /* bordered white button — the design's outlined "see all reviews" pill */
    & .btn.btn-white {
        border: 1px solid var(--black);
         background: transparent;

        &:hover,
        &:focus-visible {
            border-color: var(--orange);
            background: var(--gradient2);
        }
    }
}

/* STUDENT SAY section responsive css */
@media (max-width: 1199.98px) {
    .student-say {
        & .student-say__quote {
            max-width: 100%;
        }

       
    }
}

@media (max-width: 991.98px) {
    .student-say {
        & .student-say__illus {
            width: 80%;
            opacity: .3;
        }

        & .student-say__slide {
            grid-template-columns: 1fr;
        }
        & .student-say__text {           
            & *{
               font-size: var(--f18);                              
            }
        }

        /* Parallax is off at tablet and below, so the image goes back to filling the box. */
        & .student-say__media {
            aspect-ratio: auto;
            height: 420px;

            & img {
                height: 100%;
            }
        }

        & .student-say__quote {
            margin-left: 0;
            margin-top: calc(var(--sp40) * -1);
            margin-inline: var(--sp20);
            margin-bottom: 0;
        }
    }
}

@media (max-width: 575.98px) {
    .student-say {
        & .student-say__quote {
            margin-inline: 0;       
        }
        
    }
}


/* 58. Why Choose */
.why-choose {
 
    & .why-choose__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
        gap: var(--g40);
        @media (max-width:1199px){
            grid-template-columns: 0.7fr 1fr;
        }
    }

    /* The shared .video component supplies the overlay, poster and play icon; only ratio and colour are ours. */
    & .why-choose__media {
        width: 100%;
        height: 100%;

        & .video__play {
            color: var(--orange-card);
        }

        @media (max-width: 991.98px) {
            aspect-ratio: 3 / 2;
        }
    }

    /* Two cards on the first row, three on the second; the second card spans two columns. */
    & .why-choose__list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--sp20);
        list-style: none;
    }

    & .why-choose__item {
        /* How far the card lifts on hover; the anti-flicker strip is measured from the same property. */
        --hover-lift: var(--sp4);

        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--sp20);
        padding: var(--sp50) var(--sp25);
        background: var(--white);
        /* the design's cards sit on a wide, soft drop shadow, not the tight one */
        box-shadow: var(--shadow-md);
        text-align: center;
        transition: var(--transition);

        &:nth-child(2) {
            grid-column: span 2;
        }

        /* `translate`, not `transform`: MotionFlow's fade-right keeps its own, so the declared one never landed. */
        &:hover {
            /* The card fills with the brand gradient and everything on it goes white. */
            background: var(--gradient2);
            color: var(--white);
            box-shadow: var(--shadow-lg);
            translate: 0 calc(var(--hover-lift) * -1);

            /* The icon sets its own colour, so it takes the filter rather than inheriting the card's white. */
            & .why-choose__icon svg {
                filter: var(--white-filter);
            }

            /* Anti-flicker: a transparent strip re-covers the band the lift vacates and travels with the card. */
            &::after {
                content: "";
                position: absolute;
                inset-block-start: 100%;
                inset-inline: 0;
                height: var(--hover-lift);
            }
        }
        @media (max-width:1199px){
            padding: var(--sp25) var(--sp25);
        }
    
    }

    & .why-choose__icon {
        color: var(--orange);
        transition: var(--transition);

        & svg {
            min-height: 35px;
            max-width: 35px;
            display: block;
        }
    }

    & .why-choose__text {
        font-size: var(--f16);
        font-weight: 700;
        line-height: var(--bodyLh);
    }

    /* Two equal buttons centred under the row; 1fr in a max-content grid gives the longer label's width. */
    & .why-choose__actions {
        display: flex;
        gap: var(--sp30);
        width: max-content;
        max-width: 100%;
        margin-top: var(--sp50);
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin-inline: auto;

        /* the design's CTAs are taller and their label larger than the global .btn, so those two values are restated here */
        & .btn {
            width: 100%;    
            max-width: max-content;   
        }
    }
}

/* WHY CHOOSE section responsive css */
@media (max-width: 991.98px) {
    .why-choose {
        /* stacked: video on top, cards under it */
        & .why-choose__grid {
            grid-template-columns: 1fr;
        }

        /* No lift at touch widths; the shadow stays, and nothing is vacated for a strip to cover. */
        & .why-choose__item:hover {
            translate: none;

            &::after {
                content: none;
            }
        }
    }
}

@media (max-width: 767.98px) {
    .why-choose {
        /* Two columns for five cards, and the wide card gives up its span to avoid a hole. */
        & .why-choose__list {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        & .why-choose__item {
            flex-direction: row;
            text-align: left;
            &:nth-child(2) {
                grid-column: auto;
            }
            & svg {
                min-height: 25px;
                max-width: 25px;       
                flex: 0 0 25px;        
            }
        }

        & .why-choose__actions {
            grid-template-columns: 1fr;
            width: 100%;
        }
    }
}

@media (max-width: 575.98px) {
    .why-choose {
        & .why-choose__list {
            grid-template-columns: 1fr;
        }
    }
}


/* 59. Map Locator */
.map-locator {
    /* the gold rails running down both edges of the dark panel */
    --rail: 42px;
    /* the header is position:absolute, so the panel carries its height on top */
    --map-head: 170px;

    /* The rhythm below comes from the global `main section` margin-bottom; only the header offset is padded. */
    background-color: var(--dark);
    padding-block: 0;
    padding-inline: var(--sp55);

    & .map-locator__panel {
        padding-block: var(--sp100);
        border-inline: 50px solid var(--gold);
        color: var(--white);
    }

    /* ---------- head ---------- */
    & .map-locator__head {
        margin-bottom: var(--sp40);
        text-align: center;
    }

    & .map-locator__title {
        margin-bottom: var(--sp15);
        font-size: var(--f50);
        text-transform: uppercase;
        color: var(--orange);
    }

    /* ---------- zip search ---------- */
    & .map-locator__label {
        display: block;
        margin-bottom: var(--sp15);
        font-size: var(--f18);
        font-weight: 700;
        text-transform: uppercase;
    }

    & .map-locator__search {
        display: flex;
        align-items: stretch;
        gap: var(--sp10);
        padding: var(--sp10);
        background: var(--white);
        border: 1px solid var(--orange);
    }

    & .map-locator__field {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        gap: var(--sp10);
        min-width: 0;
        padding-inline: var(--sp20);
    }

    & .map-locator__field-icon {
        flex: 0 0 auto;
        color: #A1A1AA;
    }

    & .map-locator__input {
        width: 100%;
        padding-block: var(--sp15);
        border: 0;
        background: transparent;
        font-family: var(--font-montserrat);
        font-size: var(--f20);
        color: var(--text);

        &::placeholder {
            color: #A1A1AA;
            ;
        }
    }

    & .map-locator__submit {
        flex: 0 0 auto;
        border: 0;
        cursor: pointer;
    }

    /* ---------- region cards ---------- */
    & .map-locator__regions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--sp20);
        align-items: start;
        margin-top: var(--sp55);
        list-style: none;
    }

    & .map-locator__region {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--sp15);
        padding: var(--sp40) var(--sp30);
        background: var(--black);
        text-align: center;
        height: 100%;
    }

    /* the nearest region sits proud of the others and inverts */
    & .map-locator__region--active {
        margin-top: calc(var(--sp25) * -1);
        background: var(--white);
        color: var(--text);
    }

    & .map-locator__region-name {
        font-size: var(--f30);
        text-transform: uppercase;
    }

    & .map-locator__count {
        font-family: var(--font-staarliches);
        font-size: var(--f65);
        line-height: 1;
        color: var(--orange);
        display: none;
    }

    /* WCAG AA: the muted grey measured 2.72:1 on the black cards, so those get a lighter one. */
    & .map-locator__count-label {
        font-size: var(--f16);
        font-weight: 700;
        text-transform: uppercase;
        margin-top: 0;
        color: var(--white);
    }

    & .map-locator__region--active .map-locator__count-label,
    & .map-locator__tooltip .map-locator__count-label {
        color: rgba(77, 77, 77, 0.5);
    }

    & .map-locator__seats {
        font-size: var(--f22);
        font-weight: 700;
        color: var(--orange);
        text-transform: uppercase;
        margin-top: 0;

        & span {
            color: inherit;
        }
    }

    & .map-locator__region--active .map-locator__seats {
        color: var(--text);

        & span {
            color: var(--orange);
        }
    }

    /* TODO: mount the interactive US map on .map-locator__canvas; the tooltip below is its real card. */
    & .map-locator__canvas {
        position: relative;
        margin-top: var(--sp65);
        aspect-ratio: 1560 / 950;
    }

    & .map-locator__tooltip {
        position: absolute;
        top: 4%;
        left: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--sp15);
        width: min(270px, 40%);
        padding: var(--sp30) var(--sp25);
        background: var(--white);
        color: var(--text);
        text-align: center;
        transform: translateX(-50%);
        filter: drop-shadow(0 10px 30px rgba(20, 20, 20, .35));

        /* the pointer tail down to the pin */
        &::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            width: 0;
            height: 0;
            border-inline: 14px solid transparent;
            border-top: 18px solid var(--white);
            transform: translateX(-50%);
        }

        & .map-locator__seats {
            color: var(--black);

            & span {
                color: var(--orange);
            }
        }

        & .btn-link {
            opacity: 1;
            visibility: visible;
            pointer-events: all;
        }
    }

    /* A smaller Montserrat variant of the global .btn-link; arrow and hover slide come from ::after. */
    & .btn-link {
        font-family: var(--font-montserrat);
        font-size: var(--f16);
        font-weight: 700;
        text-transform: uppercase;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: all 0.3s ease-in-out;
    }
}

.map-locator .map-locator__region:hover,
.map-locator .map-locator__region:focus-within {
    .btn-link {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
    }
}

/* MAP LOCATOR section responsive css */
@media (max-width: 1199.98px) {
    .map-locator {
        --rail: 24px;
        --map-head: 170px;

        padding-inline: var(--sp25);
    }
}

@media (max-width: 991.98px) {
    .map-locator {
        /* the header wraps to two full-width rows below 1025px */
        --map-head: 180px;

        & .map-locator__panel {
            border-inline: 15px solid var(--gold);
        }

        & .map-locator__canvas {
            aspect-ratio: 25 / 24;
        }
    }
}

@media (max-width: 767.98px) {
    .map-locator {
        --rail: 14px;

        padding-inline: 0;

        & .map-locator__search {
           flex-wrap: wrap;
        }

        & .map-locator__field {
            padding-inline: var(--sp15);
        }

        & .map-locator__regions {
            grid-template-columns: 1fr;
        }

        & .map-locator__region--active {
            margin-top: 0;
        }
        & .map-locator__submit {
            width: 100%;
        }

        & .map-locator__tooltip {
            width: min(270px, 70%);
        }

        & .map-locator__panel {
            border-inline: 10px solid var(--gold);
        }
    }

}
@media (max-width: 575.98px) {
    .map-locator {
        /* the topbar address and phone stack here, so the header grows again */
        --map-head: 180px;
        & .dcl-select {
            border: 1px solid var(--line);
            width: 100%;
        }
        & .map-locator__canvas {
            aspect-ratio: 6 / 7;
        }
    }
}

.map-locator+.stats {
    margin-top: calc(-1 * var(--sectionGap));
}


/* 60. Promotions */
.promotions {
    /* The rhythm above and below comes from the global `main section` margin-bottom. */
    padding-block: 0;

    & .promotions__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--g40);
    }

    & .promotions__card {
        display: flex;
        flex-direction: column;
        background: var(--white);
        box-shadow: var(--shadow-md);
        transition: var(--transition);

        &:hover {
            box-shadow: var(--shadow-lg);
        }
    }

    & .promotions__img {
        width: 100%;
        aspect-ratio: 460 / 245;
        object-fit: cover;
    }

    & .promotions__body {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp20);
        padding: var(--sp30);
    }

    /* the design sets card titles in Montserrat, not the Staatliches h3 default */
    & .promotions__card-title {
        font-family: var(--font-montserrat);
        font-size: var(--f20);
        font-weight: 700;
        text-transform: uppercase;
    }

    & .promotions__text {
        font-size: var(--f16);
        color: var(--muted-2);
    }

    & .promotions__share {
        display: flex;
        align-items: center;
        gap: var(--sp10);
        margin-bottom: var(--sp10);
        font-size: var(--f16);
        font-weight: 700;
        text-transform: uppercase;
        color: var(--orange);
        transition: var(--transition);

        &:hover,
        &:focus-visible {
            color: var(--text);
        }
    }

    & .promotions__share-icon {
        flex: 0 0 auto;
    }

    & .promotions__cta {
        width: 100%;
        margin-top: auto;
        border: 1px solid var(--black);
        text-align: center;
        &:hover{            
            border-color: var(--orange);            
        }
    }
}

/* PROMOTIONS section responsive css */
@media (max-width: 991.98px) {
    .promotions {
        & .promotions__grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
}

@media (max-width: 575.98px) {
    .promotions {
        & .promotions__grid {
            grid-template-columns: 1fr;
        }
    }
}


/* 61. Student Reviews */
.student-reviews {
    /* Fixed-size controls get section variables, since sp tokens step down below a comfortable tap target. */
    --control-h: 44px;
    --pager-size: 44px;
    --filter-w: 330px;
    padding-block: var(--sectionGap);
    background-color: var(--dark-card);
    color: var(--white);

    @media screen and (max-width: 767.98px) {
        --pager-size: 28px;
    }

    /* ---------- toolbar: title · score · CTA left, filter right ---------- */
    & .student-reviews__head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp50);
        margin-bottom: var(--sectiongapHalf);
    }

    & .student-reviews__title {
        text-transform: uppercase;
    }

    & .student-reviews__score {
        display: flex;
        align-items: center;
        gap: var(--sp25);
        margin-bottom: 0;
    }

    & .student-reviews__score-value {
        font-family: var(--font-staarliches);
        font-size: var(--f50);
        line-height: 1;
        color: var(--orange);
    }

    /* stars over the count, as drawn */
    & .student-reviews__score-meta {
        display: flex;
        flex-direction: column;
        gap: var(--sp8);
    }

    & .student-reviews__stars {
        display: inline-flex;
        gap: var(--sp8);
        color: var(--orange);
    }

    & .student-reviews__count {
        font-size: var(--f14);
        font-weight: 700;
        text-transform: uppercase;
    }

    /* The design's CTA is a shorter, smaller-label .btn-primary, so only padding and label size are restated. */
    & .btn {
        display: flex;
        align-items: center;
        height: var(--control-h);
        padding-block: 0;
        font-size: var(--f14);
    }

    /* ---------- filter ---------- */
    & .student-reviews__filter {
        position: relative;
        /* the only item pushed to the far end of the toolbar */
        margin-left: auto;
    }

    & .student-reviews__select {
        width: var(--filter-w);
        max-width: 100%;
        height: var(--control-h);
        /* room on the right for the chevron */
        padding: 0 30px 0 var(--sp20);
        appearance: none;
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: 0;
        font-family: var(--font-montserrat);
        font-size: var(--f16);
        font-weight: 500;
        text-transform: uppercase;
        color: var(--muted);
        cursor: pointer;
        transition: var(--transition);

        &:hover,
        &:focus-visible {
            border-color: var(--orange);
        }
    }

    /* sits on top of the select, so clicks have to fall through to it */
    & .student-reviews__filter-icon {
        position: absolute;
        top: 50%;
        right: var(--sp4);
        color: var(--black);
        transform: translateY(-50%);
        pointer-events: none;
    }

    /* ---------- card columns ---------- */
    /* Two columns of natural-height cards; multi-column balances a feed of unknown length without JS masonry. */
    & .student-reviews__grid {
        columns: 2;
        column-gap: var(--g40);
    }

    & .student-reviews__card {
        display: flex;
        flex-direction: column;
        gap: var(--sp20);
        /* The row gap between stacked cards; a margin at a column end is truncated by fragmentation. */
        margin-bottom: var(--g40);
        padding: var(--sp30);
        background: var(--white);
        color: var(--text);
        break-inside: avoid;
    }

    & .student-reviews__card-title {
        font-weight: 400;
    }

    & .student-reviews__card-stars {
        display: inline-flex;
        gap: var(--sp4);
        color: var(--orange);
    }

    & .student-reviews__quote {
        /* the card's flex gap does the spacing, so the global p margin goes */
        margin-bottom: 0;
        font-size: var(--f16);
        font-style: italic;
        color: var(--muted-2);
    }

    & .student-reviews__name {
        font-size: var(--f16);
        font-weight: 700;
        text-transform: uppercase;
        color: var(--black);
    }

    /* ---------- pager ---------- */
    & .student-reviews__pager {
        margin-top: var(--sp65);
    }

    & .student-reviews__pager-list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: var(--sp10);

        @media screen and (max-width: 767.98px) {
            gap: var(--sp4);
        }
    }

    & .student-reviews__pager-link {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: var(--pager-size);
        height: var(--pager-size);
        background: var(--white);
        font-size: var(--f18);
        font-weight: 600;
        color: var(--black);
        transition: var(--transition);
		width: auto;
        padding: 5px;



        &:hover,
        &:focus-visible {
            background: var(--gradient2);
            color: var(--white);
        }

        /* current page — solid orange, and not a link */
        &.is-active {
            background: var(--gradient2);
            color: var(--white);
            cursor: default;
        }
    }
}

/* STUDENT REVIEWS section responsive css */
@media (max-width: 1199.98px) {
    .student-reviews {
        & .student-reviews__head {
            gap: var(--sp30);
        }
    }
}

@media (max-width: 767.98px) {
    .student-reviews {

        /* the toolbar stacks, so the filter stops being right-aligned and takes the full width instead */
        & .student-reviews__filter {
            width: 100%;
            margin-left: 0;
        }

        & .student-reviews__select {
            width: 100%;
        }

        & .student-reviews__grid {
            columns: 1;
        }
    }
}


/* 62. Success Strip */
.success-strip {
    /* Fixed-size arrows get a section variable, since sp tokens step down and would shrink the tap target. */
    --nav-size: 40px;

    /* The rhythm above and below comes from the global `main section` margin-bottom. */
    padding-block: 0;

    & .success-strip__head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp20);
        margin-bottom: var(--sp50);
    }

    /* A toolbar heading beside the arrows, so it carries its own class and colours its own span. */
    & .success-strip__title {
        text-transform: uppercase;

        & span {
            color: var(--orange);
        }
    }

    & .success-strip__nav {
        display: flex;
        align-items: center;
        gap: var(--g40);
    }

    /* prev / next — outlined orange circles, as drawn */
    & .success-strip__arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--nav-size);
        height: var(--nav-size);
        background: transparent;
        border: 2px solid var(--orange);
        border-radius: var(--r-full);
        color: var(--orange);
        transition: var(--transition);

        &:hover,
        &:focus-visible {
            background: var(--orange);
            color: var(--white);
        }

        /* The track loops, so Swiper never disables an arrow; this only matters without the loop. */
        &.swiper-button-disabled {
            opacity: .35;
            pointer-events: none;
        }
    }

    /* The track keeps the container width, so neighbouring slides show outside it and are clipped globally. */
    & .success-strip__slider {
        overflow: visible;
    }

    /* Swiper reads the slide width from here (slidesPerView: 'auto'); the gap between slides is spaceBetween in success-strip.js. */
    & .success-strip__item {
        width: 460px;
    }

    /* Each photo is a real link to its file, so it opens by keyboard and without JS. */
    & .success-strip__link {
        display: block;
        cursor: zoom-in;

        &:focus-visible {
            outline: 2px solid var(--orange);
            outline-offset: 4px;
        }
    }

    & .success-strip__img {
        display: block;
        width: 100%;
        aspect-ratio: 3 / 4;
        max-width: none;
        object-fit: cover;
    }
}

/* SUCCESS STRIP section responsive css */
@media (max-width: 991.98px) {
    .success-strip {
        & .success-strip__item {
            width: 340px;
        }
    }
}

@media (max-width: 575.98px) {
    .success-strip {
        & .success-strip__nav {
            gap: var(--sp20);
        }

        & .success-strip__item {
            width: 240px;
        }
    }
}


/* 63. Review Detail */
/* The review page intro: write-up and social links left, contact rail right. Two fixed sizes below. */
.review-detail {
    --social-size: 44px;
    --social-icon: 18px;
    /* The map embed's height, stepped by hand: an iframe has no intrinsic aspect ratio. */
    --map-height: 260px;

    & .review-detail__grid {
        display: grid;
        /* The same split as .school-info__head: the write-up carries the page, the contact card is narrower. */
        grid-template-columns: 1fr 0.8fr;
        align-items: start;
        gap: var(--sp100);
    }

    /* ---------- left: write-up + social ---------- */
    

    & .review-detail__lead {
        margin-bottom: 20px;
        & strong {
            font-weight: 700;
        }
    }

    & .review-detail__rating {
        display: flex;
        align-items: center;
        gap: var(--sp15);
        margin: 30px 0 20px;

        @media screen and (max-width: 767.98px) {
            flex-direction: column;
            align-items: flex-start;
        }
    }


    & .review-detail__stars {
        display: inline-flex;
        gap: var(--sp8);
        color: var(--orange);

        & svg {
            fill: currentColor;
        }
    }

    & .review-detail__rating-text {
        margin-bottom: 0;
        font-size: var(--f16);
        font-weight: 700;
        text-transform: uppercase;
    }

    & .review-detail__social-title {
        margin-bottom: var(--sp15);
        text-transform: uppercase;
    }

    & .review-detail__social {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp15);
    }

    & .review-detail__social-wrap {
        margin-top: 40px;
    }

    /* The footer icons run charcoal here on the light ground; currentColor lets one set do both. */
    & .review-detail__social-link {
        display: grid;
        place-items: center;
        width: var(--social-size);
        height: var(--social-size);
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--r-full);
        color: var(--charcoal);
        transition: var(--transition);

        & svg {
            width: auto;
            height: var(--social-icon);
            fill: currentColor;
        }

        &:hover,
        &:focus-visible {
            background: var(--gradient2);
            border-color: transparent;
            color: var(--white);
        }
    }

    /* ---------- right: contact card ---------- */
    & .review-detail__aside {
       display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 30px;
        background: var(--white);
        box-shadow: var(--shadow-md);
    }

    & .review-detail__aside-title {
        text-transform: uppercase;
    }

    & .review-detail__address {
        font-style: normal;
    }

    & .review-detail__list {
        display: flex;
        flex-direction: column;
        gap: var(--sp20);
    }

    & .review-detail__item {
        display: flex;
        align-items: flex-start;
        gap: var(--sp15);
        font-size: var(--f18);
        line-height: var(--bodyLh);

        & strong {
            display: block;
            font-weight: 700;
        }

        & a {
            color: inherit;

            &:hover,
            &:focus-visible {
                color: var(--orange);
            }
        }
    }

    & .review-detail__item-icon {
        flex: 0 0 auto;
        /* nudged onto the cap height of the label beside it */
        margin-top: var(--sp4);
        color: var(--orange);

        & svg {
            fill: currentColor;
        }
    }

    /* The vendor.css media reset lists img, video and svg only, so the iframe is sized here. */
    & .review-detail__map {
        margin: 0;
        border: 2px solid var(--line);
    }

    & .review-detail__map-frame {
        display: block;
        width: 100%;
        height: var(--map-height);
        border: 0;
    }

    & .review-detail__reviews-btn {
        margin-top: var(--sp40);
    }

    /* Full width inside the card, where a max-content button would read as a stray chip. */
    & .review-detail__cta {
        width: 100%;
        text-align: center;
    }
}

/* REVIEW DETAIL section responsive css */
@media (max-width: 991.98px) {
    .review-detail {
        /* Full width once the card drops below the write-up, giving the map its height back. */
        --map-height: 320px;

        & .review-detail__grid {
            grid-template-columns: 1fr;
        }
    }
}

@media (max-width: 575.98px) {
    .review-detail {
        --social-size: 40px;
        --social-icon: 16px;
        --map-height: 240px;

          }
}


/* 64. Review Popup */
/* The review dialog. The star rating is CSS-only: five reversed radios in a row-reverse row. */
.review-popup {
    /* A fixed size rather than an sp token, stepped by hand below; taken from the design. */
    --star-size: 50px;
    /* The overlay's inset, reused by the dialog's max-height, so override this rather than the padding. */
    --popup-gutter: var(--sp20);

    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--popup-gutter);
    
    & .review-popup__title{
        font-size: var(--f30);
    }
    &.is-open {
        display: flex;
    }

    & .review-popup__overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .82);
    }

    /* A column so only the middle scrolls; the cap must be dvh, since a percentage is indefinite. */
    & .review-popup__dialog {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        width: min(700px, 100%);
        max-height: calc(100dvh - var(--popup-gutter) * 2);
        background: var(--white);
        color: var(--text);
    }

    /* ---------- head ---------- */
    & .review-popup__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp20);
        padding: var(--sp20);
        border-bottom: 1px solid var(--line);
    }

    /* An h2 for the outline, but drawn as bold Montserrat body copy, not the global Staatliches. */   

    & .review-popup__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        background: none;
        border: 0;
        color: var(--muted);
        cursor: pointer;
        transition: var(--transition);

        &:hover,
        &:focus-visible {
            color: var(--orange);
        }
    }

    /* The form wraps body and foot, so it carries the column or the scroll never engages. */
    & .review-popup__form {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
    }

    /* ---------- body ---------- */
    /* min-height: 0 makes the scroll work; auto would stop the body shrinking below its content. */
    & .review-popup__body {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: var(--sp20);
        min-height: 0;
        padding: var(--sp20);
        overflow-y: auto;
    }

    & .review-popup__field {
        display: flex;
        flex-direction: column;
        gap: var(--sp15);
    }

    & .review-popup__label {
                
        margin-bottom: var(--sp8);
    }

    /* One shared field for input, select and textarea, matching .banner__input: a single bottom rule. */
    & .review-popup__input {
        width: 100%;
        padding-block: var(--sp10);
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--line);
        font-family: var(--font-montserrat);
        font-size: var(--f16);
        color: var(--text);
        transition: var(--transition);

        &::placeholder {
            color: var(--muted);
        }

        &:hover,
        &:focus-visible {
            border-bottom-color: var(--orange);
        }

        &.review-popup__input--select {
            /* room on the right for the chevron */
            padding-right: var(--sp30);
            appearance: none;
            color: var(--muted);
            cursor: pointer;
        }

        &.review-popup__input--area {
            min-height: 100px;
            resize: vertical;
        }
    }

    & .review-popup__select-wrap {
        position: relative;
    }

    /* Flush right, since the field has no box; clicks fall through to the select beneath. */
    & .review-popup__select-icon {
        position: absolute;
        top: 50%;
        right: 0;
        color: var(--black);
        transform: translateY(-50%);
        pointer-events: none;
    }

    /* ---------- star rating ---------- */
    & .review-popup__rate {
        display: flex;
        flex-direction: column;
        gap: var(--sp15);
        margin: 0;
        padding: 0;
        border: 0;
    }

    /* Reversed, so the markup runs 5 to 1 for the sibling selectors while reading 1 to 5. */
    & .review-popup__stars {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
        gap: var(--sp10);
    }

    & .review-popup__star {
        display: flex;
        width: var(--star-size);
        height: var(--star-size);
        color: var(--orange);
        cursor: pointer;
        transition: var(--transition);

        & svg {
            width: 100%;
            height: 100%;
        }
    }

    /* The radios are .sr-only, so the focus ring has to be drawn on the star. */
    & .review-popup__star-input:focus-visible + .review-popup__star {
        outline: 2px solid var(--orange);
        outline-offset: 2px;
    }

    /* All five start orange; once picked, the ones above go quiet. Source order breaks the tie. */
    &:has(.review-popup__star-input:checked) .review-popup__star {
        color: var(--line);
    }

    & .review-popup__star-input:checked ~ .review-popup__star {
        color: var(--orange);
    }

    /* Hover preview outranks the picked rating: nesting under :hover adds the extra class the rules above have. */
    & .review-popup__stars:hover {
        & .review-popup__star {
            color: var(--line);
        }

        & .review-popup__star:hover,
        & .review-popup__star:hover ~ .review-popup__star {
            color: var(--orange);
        }
    }

    /* ---------- foot ---------- */
    & .review-popup__foot {
        padding: var(--sp20);        
    }

    /* The design draws the submit full width in sentence case, so only width and label are restated. */
    & .btn {
        width: 100%;      
        justify-content: center;      
    }

    /* A notch above the labels: the size at which the sentence wraps exactly as the design draws. */
    & .review-popup__note {
        margin-top: var(--sp10);
        margin-bottom: 0;
        font-size: var(--f16);
        text-align: center;
        color: var(--muted-2);
    }
}

/* REVIEW POPUP responsive css */
@media (max-width: 767.98px) {
    .review-popup {
        /* Everything steps down one notch on the scale, so the design's proportions hold once the dialog is full width. */
        --star-size: 50px;
            
    }
}

@media (max-width: 575.98px) {
    .review-popup {
        --star-size: 40px;
        --popup-gutter: var(--sp10);

        & .review-popup__head,
        & .review-popup__body,
        & .review-popup__foot {
            padding: var(--sp15);
        }
    }
}


/* 65. Schools Map */
.schools-map {
    /* The rhythm above and below comes from the global `main section` margin-bottom. */
    padding-block: 0;

    & .schools-map__hint {
        margin-bottom: var(--sp25);
        font-weight: 600;
    }

    /* ---------- zip search bar ---------- */
    & .schools-map__search {
        display: flex;
        align-items: stretch;
        margin-bottom: var(--sp40);
        background: var(--white);
        border: 1px solid var(--orange);
    }

    & .schools-map__field {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        gap: var(--sp10);
        min-width: 0;
        padding-inline: var(--sp25);
    }

    & .schools-map__field-icon {
        flex: 0 0 auto;
        color: var(--muted);
    }

    & .schools-map__input {
        width: 100%;
        padding-block: var(--sp20);
        border: 0;
        background: transparent;
        font-family: var(--font-montserrat);
        font-size: var(--f20);
        color: var(--text);

        &::placeholder {
            color: var(--muted);
        }
    }

    & .schools-map__submit {
        flex: 0 0 auto;
        border: 0;
        cursor: pointer;
    }

    /* ---------- list + map split ---------- */
    & .schools-map__layout {
        display: grid;
        grid-template-columns: 348fr 1100fr;
        gap: var(--sp10);
        align-items: start;
    }

    & .schools-map__list {
        max-height: 930px;
        overflow-y: auto;
        background: var(--white);
        list-style: none;
    }

    & .schools-map__item {
        padding: var(--sp25);
        border-bottom: 1px solid var(--line);
        transition: var(--transition);

        &:last-child {
            border-bottom: 0;
        }

        &:hover,
        &.is-active {
            background: var(--cdf7);
        }
    }

    & .schools-map__name {
        margin-bottom: var(--sp15);
        font-family: var(--font-montserrat);
        font-size: var(--f20);
        font-weight: 700;
        text-transform: uppercase;
    }

    & .schools-map__address {
        margin-bottom: var(--sp10);
        font-size: var(--f16);
        font-style: normal;
        color: var(--muted-2);
    }

    & .schools-map__phone {
        display: block;
        margin-bottom: var(--sp10);
        font-size: var(--f16);
        font-weight: 700;
        transition: var(--transition);

        &:hover,
        &:focus-visible {
            color: var(--orange);
        }
    }

    & .schools-map__distance {
        margin-bottom: var(--sp15);
        font-size: var(--f16);
        color: var(--muted-2);
    }

    /* TODO: mount the interactive map on .schools-map__canvas; the popup below is its real card. */
    & .schools-map__canvas {
        position: relative;
        aspect-ratio: 1100 / 930;
        background-color: var(--cdf0);
        overflow: hidden;
    }

    & .schools-map__canvas-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    & .schools-map__popup {
        position: absolute;
        top: 20%;
        left: 18%;
        width: min(340px, 60%);
        padding: var(--sp25);
        background: var(--white);
        box-shadow: var(--shadow-lg);
    }

    & .schools-map__popup-close {
        position: absolute;
        top: var(--sp15);
        right: var(--sp15);
        display: flex;
        padding: 0;
        color: var(--orange);
        cursor: pointer;
    }

    /* A smaller Montserrat variant of the global .btn-link; arrow and hover slide come from ::after. */
    & .btn-link {
        font-family: var(--font-montserrat);
        font-size: var(--f16);
        font-weight: 700;
        text-transform: uppercase;
    }
}

/* SCHOOLS MAP section responsive css */
@media (max-width: 991.98px) {
    .schools-map {
        & .schools-map__layout {
            grid-template-columns: 1fr;
            gap: var(--sp20);
        }

        & .schools-map__list {
            max-height: 480px;
        }

        & .schools-map__canvas {
            aspect-ratio: 4 / 3;
        }
    }
}

@media (max-width: 575.98px) {
    .schools-map {
        & .schools-map__search {
            flex-direction: column;
        }

        & .schools-map__field {
            padding-inline: var(--sp15);
        }
    }
}


/* 66. Why Advantages */
.why-advantages {
    /* the design sets the two columns far apart — wider than any spacing token */
    --why-gap: 168px;

    /* The rhythm above and below comes from the global `main section` margin-bottom. */
    padding-block: 0;

    & .why-advantages__grid {
        display: grid;
        grid-template-columns: 580fr 712fr;
        gap: var(--why-gap);
        align-items: start;

        .section-title-wrap{
            margin-bottom: 0;
        }
    }

    & .why-advantages__main{
        display: flex;
        flex-direction: column;
        gap: var(--sp30);
        & .section-title-wrap{
            gap: 0;
            & * + * {
                margin-top: var(--sp20);
                color: var(--muted-2);
            }
        }
    }

    & .why-advantages__list {
        display: flex;
        flex-direction: column;
        gap: var(--sp30);
        list-style: none;        
    }

    & .why-advantages__card {
        /* How far the card lifts on hover; the hit-area strip reads the same custom property. */
        --hover-lift: var(--sp10);

        position: relative;
        padding: var(--sp25) var(--sp30);
        display: flex;
        flex-direction: column;
        gap: var(--sp20);
        background: var(--white);
        box-shadow: var(--shadow-sm);
        transition: var(--transition);

        /* Same hover as .driving-classes__item: orange gradient, white copy, lift on `translate`. Focus-within, since only links focus. */
        &:hover,
        &:focus-within {
            background: var(--gradient2);
            box-shadow: var(--shadow-md);
            color: var(--white);
            translate: 0 calc(var(--hover-lift) * -1);

            /* Anti-flicker: the strip re-covers the vacated band and travels with the card, hover-only. */
            &::after {
                content: "";
                position: absolute;
                inset-block-start: 100%;
                inset-inline: 0;
                height: var(--hover-lift);
            }

            & .why-advantages__card-title,
            & .why-advantages__card-text {
                color: var(--white);
            }

            /* An icon goes white through the filter, so multi-path icons and img logos flip too. */
            & svg {
                filter: var(--white-filter);
            }
        }
    }

    /* Stretched link: a real element, not ::after, which the anti-flicker strip already uses. Named by aria-label. */
    & .why-advantages__card-link {
        position: absolute;
        inset: 0;
        z-index: 1;
    }

    /* A link in the copy must sit above the overlay or it stops being clickable. */
    & .why-advantages__card-text a {
        position: relative;
        z-index: 2;
    }

    & .why-advantages__card-title {
        text-transform: uppercase;
        transition: var(--transition);
    }

    & .why-advantages__card-text {
        color: var(--muted-2);
        transition: var(--transition);
    }

    /* ---------- right column ---------- */
    /* TODO: swap the poster for the real video embed; the box already holds either at the ratio. */
    & .why-advantages__media {
        position: relative;
        margin-bottom: var(--sp40);
        aspect-ratio: 16 / 9;
        background: var(--charcoal-2);
        overflow: hidden;

        & img,
        & iframe {
            display: block;
            width: 100%;
            height: 100%;
            border: 0;
            object-fit: cover;
        }

        & .video{
            aspect-ratio: 16 / 9;
        }
    }

    & .why-advantages__play {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0;
        color: var(--white);
        cursor: pointer;
        transition: var(--transition);

        &:hover,
        &:focus-visible {
            color: var(--orange);
        }
    }

    & .why-advantages__aside-title {
        margin-bottom: var(--sp25);
        text-transform: uppercase;
    }

    & .why-advantages__aside-text {
        color: var(--muted-2);

        & a {
            color: inherit;
            text-decoration: underline;
            transition: var(--transition);

            &:hover,
            &:focus-visible {
                color: var(--orange);
            }
        }
    }
}

/* WHY ADVANTAGES section responsive css */
@media (max-width: 1365.98px) {
    .why-advantages {
        --why-gap: var(--sp80);
    }
}

@media (max-width: 991.98px) {
    .why-advantages {
        --why-gap: var(--sp50);

        & .why-advantages__grid {
            grid-template-columns: 1fr;
        }
    }
}

@media (max-width: 767.98px) {
    .why-advantages {
        /* On touch the hover sticks after a tap, so the movement is dropped and the colour stays. */
        & .why-advantages__card {
            &:hover,
            &:focus-within {
                translate: none;

                /* nothing is vacated without the lift, so the strip would only add a dead band under a tapped card */
                &::after {
                    content: none;
                }
            }
        }
    }
}


/* 67. Agentforce Chat */
/* Hides Salesforce's own chat launcher once the floating panel's Chat button is driving it. */

.has-hmtheme-chat .embeddedMessagingConversationButton,
.has-hmtheme-chat .embedded-messaging .embeddedMessagingConversationButton,
.has-hmtheme-chat #embeddedMessagingConversationButton {
	display: none !important;
}


/* 68. Floating CTA */
/* The persistent floating call to action, pinned to the bottom right of every page. */

.hmfab {
	--hmfab-orange: var(--orange, #C9500D);
	--hmfab-white: var(--white, #fff);

	/* Three pills, three colours, all already on the site: the brand orange, the hero's near-black, and the lighter --orange-card the testimonial dots use. Chat was a green that appears nowhere on the site. All three labels stay white; white on #EB7533 is 2.9:1, under AA, and is kept on request. */
	--hmfab-dark: var(--hero-dark, #1a1613);
	--hmfab-chat: var(--orange-card, #EB7533);

	position: fixed;
	right: clamp(12px, 3vw, 28px);
	bottom: clamp(12px, 3vw, 28px);

	/* Above the page but below chat windows and modals; a button over an open dialog is a trap. */
	z-index: 900;

	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	pointer-events: none;
}

.hmfab > * {
	pointer-events: auto;
}

.hmfab[hidden] {
	display: none;
}

.hmfab__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.hmfab__item {
	margin: 0;
}

.hmfab__item[hidden] {
	display: none;
}

/* A pill rather than a bare icon: an icon alone asks the visitor to guess. */
.hmfab__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 18px;
	border: 0;
	border-radius: 999px;
	background: var(--hmfab-orange);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
	color: var(--hmfab-white);
	font-family: var(--font-montserrat, inherit);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

/* The theme forces `p a` orange, so an orange label on an orange pill would vanish. */
.hmfab__btn,
.hmfab__btn:hover,
.hmfab__btn:focus,
.hmfab__btn:active {
	color: var(--hmfab-white) !important;
	text-decoration: none;
}

.hmfab__btn:hover,
.hmfab__btn:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.hmfab__btn:focus-visible {
	outline: 3px solid var(--hmfab-white);
	outline-offset: -6px;
}

.hmfab__btn--call {
	background: var(--hmfab-dark);
}

.hmfab__btn--chat {
	background: var(--hmfab-chat);
}

.hmfab__icon {
	display: inline-flex;
	flex: 0 0 auto;
}
/* The Chat button while Salesforce builds its window - without it the press looked like it had done nothing. The spinner takes the icon's place so the pill keeps its width; the label reads "Opening…" for anyone not watching the spin. */
.hmfab__btn--busy {
	cursor: progress;
}

.hmfab__btn--busy .hmfab__icon {
	position: relative;
}

.hmfab__btn--busy .hmfab__icon svg {
	visibility: hidden;
}

.hmfab__btn--busy .hmfab__icon::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: var(--hmfab-white);
	border-radius: 50%;
	animation: hmfab-spin 0.7s linear infinite;
}

@keyframes hmfab-spin {
	to {
		transform: rotate(360deg);
	}
}

/* A ring that does not turn says nothing, so the label carries it alone. */
@media (prefers-reduced-motion: reduce) {
	.hmfab__btn--busy .hmfab__icon::after {
		display: none;
	}

	.hmfab__btn--busy .hmfab__icon svg {
		visibility: visible;
	}
}


.hmfab__icon svg {
	display: block;
}

.hmfab__label {
	white-space: nowrap;
}

/* The toggle is the only round one, so it reads as a control rather than a fourth offer. */
.hmfab__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--hmfab-orange);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
	color: var(--hmfab-white);
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hmfab__toggle:hover,
.hmfab__toggle:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.hmfab__toggle:focus-visible {
	outline: 3px solid var(--hmfab-white);
	outline-offset: -6px;
}

/* One button, two icons. Both hidden states count, or a cross would offer to close nothing. */
.hmfab__icon--open {
	display: none;
}

.hmfab--collapsed .hmfab__icon--open,
.hmfab--away .hmfab__icon--open {
	display: inline-flex;
}

.hmfab--collapsed .hmfab__icon--close,
.hmfab--away .hmfab__icon--close {
	display: none;
}

/* Collapsed hides the pills by visibility, not opacity, so they cannot be tabbed into. */
.hmfab--collapsed .hmfab__note,
.hmfab--collapsed .hmfab__actions {
	visibility: hidden;
	opacity: 0;
	transform: translateY(8px);
}

@media (max-width: 575.98px) {
	.hmfab__btn {
		min-height: 44px;
		padding: 0 14px;
		font-size: 14px;
	}

	.hmfab__toggle {
		width: 48px;
		height: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hmfab__actions,
	.hmfab__btn,
	.hmfab__toggle {
		transition: none;
	}

	.hmfab--collapsed .hmfab__actions {
		transform: none;
	}
}

/* Nothing floating belongs on a printed page. */
@media print {
	.hmfab {
		display: none;
	}
}

/* Only the pills step aside for a form or the footer; the toggle stays, so one press returns them. */
.hmfab--away .hmfab__note,
.hmfab--away .hmfab__actions {
	visibility: hidden;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

@media (prefers-reduced-motion: reduce) {
	.hmfab--away .hmfab__note,
	.hmfab--away .hmfab__actions {
		transform: none;
		transition: none;
	}
}

/* The note the Chat button leaves when there is no chat to open; it takes itself away. */
.hmfab__note {
	max-width: min(300px, calc(100vw - 48px));
	margin: 0;
	padding: 12px 16px;
	border-radius: 10px;
	background: var(--hmfab-dark);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
}


/* 69. Gallery Grid */
/* One block, used once per gallery section; the sections differ only by heading and photos. */
.gallery-grid {
    /* padding-block: var(--sectionGap); */

    & .gallery-grid__list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--g40);
    }

    /* Each photo is a real link to its file, so it opens by keyboard and without JS. */
    & .gallery-grid__link {
        display: block;
        overflow: hidden;
        cursor: zoom-in;

        &:focus-visible {
            outline: 2px solid var(--orange);
            outline-offset: 4px;
        }
    }

    /* The photos mix landscape and portrait originals, so they are cropped to one shape. */
    & .gallery-grid__img {
        display: block;
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        transition: var(--transition);
    }

    & .gallery-grid__link:hover .gallery-grid__img {
        transform: scale(1.06);
    }

    & .gallery-grid__foot {
        display: flex;
        justify-content: center;
        margin-block-start: var(--sp50);
    }
}

/* GALLERY GRID section responsive css */
@media (max-width: 1199.98px) {
    .gallery-grid {
        & .gallery-grid__list {
            grid-template-columns: repeat(4, 1fr);
        }
    }
}

@media (max-width: 991.98px) {
    .gallery-grid {
        & .gallery-grid__list {
            grid-template-columns: repeat(3, 1fr);
        }
    }
}

@media (max-width: 767.98px) {
    .gallery-grid {
        & .gallery-grid__list {
            grid-template-columns: repeat(2, 1fr);
            gap: var(--sp15);
        }
    }
}




footer {
    p {
        >a {
            color: inherit !important;
        }
    }
}

.loc-about__col {
    ul {
        list-style: disc;
    }
}

.loc-about .loc-about__cols {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}

.banner__card-lead+.banner__form {
    margin-top: 20px;
}

/* Gravity Form  */
.gform-body .gfield input {
    outline: none !important;
}

.b2b-features__content {
    ul {
        p {
            margin-top: 5px;
        }

        li {
            &+li {
                margin-top: 20px !important;
            }
        }
    }
}

.b2b-power {
    .btn {
        justify-self: center;
        margin-inline: auto;
    }
}

.tabsection-tab_none {
    .tabs {
        display: none !important;
    }

    .tabs__panel {
        margin-top: 90px;
    }
}


.icon-bg_none {
    .b2b-contact__inner {
        .b2b-contact__details {
            background: transparent;
            box-shadow: none;
            padding: 0;
        }
    }
}


.hc-page-layout_update {
    .why-advantages__grid {
        .why-advantages__aside {
            order: 0;
        }

        .why-advantages__main {
            order: 1;
        }
    }
}

.hc-page-layout_update {
    &.hc-layout_cardupdate {
        .why-advantages__card {
            flex-direction: column-reverse;

            .why-advantages__card-title {
                font-size: var(--f20);
            }
        }
    }
}

.why-advantages {
    &.hc-page-layout_update {

        .why-advantages__aside-text ul,
        &.hc-layout-listItem li.why-advantages__card .why-advantages__card-text ul {
            font-size: var(--f18);
            font-family: var(--font-montserrat);
            line-height: var(--bodyLh);
            list-style: disc;
            padding-left: 20px;
            margin-top: 10px;
            margin-bottom: 20px;

            li+li {
                margin-top: 5px;
            }
        }
    }
}

.custom-option_newcareer {
    .road__slider {
        ul.rcard__list {
            li.rcard__item {
                padding-left: 0;

                &:before {
                    display: none;
                }
            }
        }
    }
}


.custom-image_size {
    .video {
        img.video__logo {
            object-fit: contain;
        }
    }
}

.custom-section_img {
    .b2b-features__figure {
        /* background-color: var(--white); */

        img {
            object-fit: contain;
        }
    }
}

.custom-option_slider {
    &.careers-logos {
        .careers-logos__img {
            object-fit: cover !important;
            width: 100%;
        }
    }
}

.why-advantages {
    &.hc-page-layout_update {
        .why-advantages__media {
            aspect-ratio: auto;

            .video {
                aspect-ratio: auto;
            }
        }
    }
}

footer {
    .footer__top {
        a {
            text-decoration: none;
        }
    }
}

.footer__brand p a:hover {
    color: var(--orange) !important;
}

.custom-gallery_option {
    ul.gallery-grid__list {
        .gallery-grid__img {
            aspect-ratio: 9 / 16;
            object-fit: contain;
        }
    }
}

/* Job Video Posting Section  */
.job-posting_videoSection__phone {
    position: relative;
}

.job-posting_videoSection {
    --pvf-slot-left: 45.70%;
    --pvf-slot-top: 38.88%;
    --pvf-slot-width: 43.13%;
    --pvf-slot-height: 19.45%;
    --pvf-max-width: 821px;

    position: relative;
    display: block;
    -webkit-tap-highlight-color: transparent;

    .pvf__frame {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 821 / 1024;
        user-select: none;
        pointer-events: none;
    }

    .pvf__slot {
        position: absolute;
        left: var(--pvf-slot-left);
        top: var(--pvf-slot-top);
        width: var(--pvf-slot-width);
        height: var(--pvf-slot-height);
        overflow: hidden;
        background: #0d0d0d;
        pointer-events: none;
        will-change: transform;
        transform: translateZ(0);
    }

    .pvf__video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        border: 0;
        outline: 0;
        background: transparent;

        &::-webkit-media-controls,
        &::-webkit-media-controls-enclosure,
        &::-webkit-media-controls-start-playback-button {
            display: none !important;
            -webkit-appearance: none;
        }
    }

    &.is-reduced-motion {
        .pvf__video {}
    }

    @media (max-width: 480px) {
        --pvf-max-width: 320px;
    }

    @media print {
        .pvf__slot {
            background: transparent;
        }
    }
}


.hero-custom_change .title-eyebrow {
    font-size: var(--f28);
    font-family: var(--font-staarliches);
    font-weight: 400;
}

.gm-style-iw.gm-style-iw-c {
    max-width: 400px !important;
    border-radius: 0;
    padding-top: var(--sp50) !important;
    padding-bottom: var(--sp15) !important;
    padding-inline: var(--sp30) !important;
}

.gm-style-iw.gm-style-iw-c button.gm-ui-hover-effect {
    position: absolute !important;
    top: 0;
    right: 0;
}

.gm-style-iw.gm-style-iw-c .gm-style-iw-ch {
    padding-right: var(--sp10);
}

.hazmatpage-video_custom.easy {
    .easy__text {
        display: none;
    }

    .easy__grid {
        grid-template-columns: 1fr;
        max-width: 1000px;
        width: 100%;
    }
}

.gform-footer .gform-loader {
    display: none !important;
}


.landingpage_cardcustom {
    &.audience {
        .acard {
            min-height: 300px;
        }
    }
}

.findmap-custom .find-school__band.bg-noice {
    background-image: none;
    background-color: var(--black);
    min-height: 300px;
}

.hero-custom_change .b2b-pipeline__head {
    align-items: end;
}

.findmap-custom .find-school__band.bg-noice .find-school__map img {
    object-fit: cover !important;
    width: 100%;
    height: 100%;
}

.findmap-custom .find-school__band.bg-noice .find-school__map {
    height: 100%;
    width: 100%;
}


@media (max-width: 1024.98px) {
    .landingpage_cardcustom {
        &.audience {
            .acard {
                min-height: 200px;
            }
        }
    }
}

@media (max-width: 991.98px) {
    .careers-benefits {
        & .careers-benefits__icon {
            margin-bottom: 0 !important;
        }
    }

    .why-advantages {
        &.hc-page-layout_update {
            .why-advantages__media {
                aspect-ratio: 16 / 9;
                background: transparent;

                .video {
                    aspect-ratio: 16 / 9;
                    background: transparent;

                    img {
                        object-fit: contain;
                    }
                }
            }
        }
    }

    .gm-style-iw.gm-style-iw-c {
        padding-top: 35px !important;
    }

    /* .hero-custom_change figure.b2b-pipeline__figure {
        min-height: 400px;
        aspect-ratio: auto;
    } */
    .tabsection-tab_none {
        .tabs__panel {
            margin-top: 0;
        }
    }
}

@media (max-width: 767.98px) {
    .careers-logos {
        & .careers-logos__ticker .careers-logos__item {
            padding: 0 !important;
        }
    }
}

@media (max-width: 575.98px) {
    .why-advantages {
        &.hc-page-layout_update {
            .why-advantages__media {
                aspect-ratio: auto;
                background: transparent;

                .video {
                    aspect-ratio: auto;
                    background: transparent;

                    img {
                        object-fit: contain;
                    }
                }
            }
        }
    }

    .gm-style-iw.gm-style-iw-c {
        max-width: 320px !important;
    }
}

/* =================================================================== B2B FIELDS section css =================================================================== */
.b2b-fields {
    padding-block: var(--sectionGap);
    background-color: var(--hero-dark);
    color: var(--white);

    /* The grid reads its own card count with :has() and lays itself out, so the
       markup carries no size or modifier class at all:
         1 card   -> one full-width card
         2 cards  -> two equal halves
         3 cards  -> one tall card beside a stacked pair
         4 cards  -> wide + narrow, then narrow + wide
         5 cards  -> three on top, two below
         6 cards  -> three and three
         7+       -> three per row, the trailing row spreads to fill
       Each count block only writes the three custom properties. The three
       "consumer" declarations below are the ONLY place grid-template-columns,
       grid-column and grid-row are set, which is what lets one short media
       query collapse every layout to a stack without fighting :has()
       specificity. */
    & .b2b-fields__grid {
        display: grid;
        grid-template-columns: repeat(var(--tracks, 6), 1fr);
        gap: var(--sp30);

        &>.b2b-fields__card {
            grid-column: span var(--card-span, 2);
            grid-row: span var(--card-rows, 1);
        }

        /* ---- 1 card ---- */
        &:has(> .b2b-fields__card:nth-child(1):last-child) {
            --tracks: 1;
            --card-span: 1;
        }

        /* ---- 2 cards ---- */
        &:has(> .b2b-fields__card:nth-child(2):last-child) {
            --tracks: 2;
            --card-span: 1;
        }

        /* ---- 3 cards: card 1 spans both rows, cards 2 and 3 stack beside it ---- */
        &:has(> .b2b-fields__card:nth-child(3):last-child) {
            --tracks: 2;
            --card-span: 1;
            grid-auto-rows: 1fr;

            &>.b2b-fields__card:first-child {
                --card-rows: 2;
            }
        }

        /* ---- 4 cards: the design's asymmetric pair of rows ---- */
        &:has(> .b2b-fields__card:nth-child(4):last-child) {
            --tracks: 3;
            --card-span: 1;

            &>.b2b-fields__card:first-child,
            &>.b2b-fields__card:last-child {
                --card-span: 2;
            }
        }

        /* ---- 5 cards: 3 across, then 2 across ---- */
        &:has(> .b2b-fields__card:nth-child(5):last-child) {
            --tracks: 6;
            --card-span: 2;

            &>.b2b-fields__card:nth-child(n + 4) {
                --card-span: 3;
            }
        }

        /* ---- 6 cards ---- */
        &:has(> .b2b-fields__card:nth-child(6):last-child) {
            --tracks: 3;
            --card-span: 1;
        }

        /* ---- 7 or more: three per row, a partial last row spreads out ---- */
        &:has(> .b2b-fields__card:nth-child(7)) {
            &>.b2b-fields__card:nth-child(3n + 1):last-child {
                --card-span: 6;
            }

            &>.b2b-fields__card:nth-child(3n + 1):nth-last-child(2),
            &>.b2b-fields__card:nth-child(3n + 2):last-child {
                --card-span: 3;
            }
        }
    }

    /* the whole card box is the link — it is an <a>, so `color: inherit` and the
       missing underline come from the global `a` reset, and the focus ring from
       the global :focus-visible */
    & .b2b-fields__card {
        position: relative;
        display: flex;
        align-items: flex-end;
        min-height: 420px;
        overflow: hidden;

        /* `scale` longhand, not `transform` — a MotionFlow-revealed element
           keeps its own transform, so a transform hover never lands */
        &:hover .b2b-fields__img,
        &:focus-visible .b2b-fields__img {
            scale: 1.05;
        }
    }

    & .b2b-fields__img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: var(--transition);
    }

    & .b2b-fields__body {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--sp8);
        width: 100%;
        padding: var(--sp80) var(--sp50) var(--sp50);
        /* readability scrim under the label, not a surface colour of its own */
        background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--black) 88%, transparent) 100%);
    }

    & .b2b-fields__title {
        margin: 0;
        font-family: var(--font-montserrat);
        font-size: var(--f24);
        font-weight: 700;
        color: var(--white);
    }

    & .b2b-fields__text {
        margin: 0;
        font-size: var(--f16);
        color: var(--white);
        opacity: .85;
    }
}

/* B2B FIELDS section responsive css */
@media (max-width: 1199.98px) {
    .b2b-fields {
        & .b2b-fields__card {
            min-height: 360px;
        }

        & .b2b-fields__body {
            padding: var(--sp65) var(--sp40) var(--sp40);
        }
    }
}

@media (max-width: 991.98px) {
    .b2b-fields {
        & .b2b-fields__grid {
            gap: var(--sp25);

            /* two-up from here down. The 1-, 2- and 3-card layouts already fit
               two tracks, so only the wider counts are re-tracked. */
            &:has(> .b2b-fields__card:nth-child(4):last-child),
            &:has(> .b2b-fields__card:nth-child(6):last-child) {
                --tracks: 2;
            }

            /* 5 cards -> 2 + 2, then the fifth alone across the row */
            &:has(> .b2b-fields__card:nth-child(5):last-child) {
                --tracks: 2;
                --card-span: 1;

                &>.b2b-fields__card:nth-child(n + 4) {
                    --card-span: 1;
                }

                &>.b2b-fields__card:last-child {
                    --card-span: 2;
                }
            }

            &:has(> .b2b-fields__card:nth-child(7)) {
                --tracks: 2;
                --card-span: 1;

                &>.b2b-fields__card:nth-child(3n + 1):last-child,
                &>.b2b-fields__card:nth-child(3n + 1):nth-last-child(2),
                &>.b2b-fields__card:nth-child(3n + 2):last-child {
                    --card-span: 1;
                }

                /* lone card at the end of a two-up row still fills it */
                &>.b2b-fields__card:nth-child(2n + 1):last-child {
                    --card-span: 2;
                }
            }
        }

        & .b2b-fields__card {
            min-height: 320px;
        }

        & .b2b-fields__title {
            font-size: var(--f22);
        }
    }
}

@media (max-width: 767.98px) {
    .b2b-fields {

        /* one track, so every count layout collapses to a plain stack — only
           the three consumer declarations have to be overridden */
        & .b2b-fields__grid {
            grid-template-columns: 1fr;
            gap: var(--sp20);

            &>.b2b-fields__card {
                grid-column: 1 / -1;
                grid-row: auto;
            }
        }

        & .b2b-fields__card {
            min-height: 280px;
        }

        & .b2b-fields__body {
            padding: var(--sp50) var(--sp30) var(--sp30);
        }
    }
}


#enrollment {
    &.banner {
        & .banner__card {
            display: none;
        }

        & .banner__inner {
            grid-template-columns: 1fr;
        }

        & .banner__content {
            align-items: center;
            padding-block: var(--sectiongapHalf);
        }
    }
}

.benefits-list {
    .finance {
        ul {
            li {
                padding-left: 0;
                &:before {
                    content: none;
                }
            }
        }
    }
}

.contact-grid {
    & .pcard {
        gap: var(--sp30);

        & .pcard__hours {
            font-size: var(--f20);
            text-transform: unset;

            .pcard__hours-icon {
                display: none;
            }
        }
    }
}

.started.tabs-5 {
    & .steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        @media (max-width: 1024.98px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        @media (max-width: 575.98px) {
            grid-template-columns: 1fr;
        }
    }
}


.cta-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--sp30);
    max-width: 100%;
    margin-top: var(--sp50);
}

.morethan-cdl.driving-classes {
    & .driving-classes__item {
        padding: 25px;
        & p {
            font-weight: 400;
            font-size: var(--f18);
        }
    }
}
input {
    outline: 0 !important;
}
.reverse-order {
    & .driving-classes__grid {
        & .driving-classes__media {
            @media screen and (min-width: 992px) {
                order: 2;
            }
        }
    }
}