@media (max-width: 1100px) {

    :root {
        --gutter: 24px;
    }

    /* =========================================================
       LAYOUT
       ========================================================= */

    .container,
    .hero-inner {
        width: min(
            calc(100% - (var(--gutter) * 2)),
            var(--container)
        );
    }


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

    .main-navigation {
        gap: 20px;
    }


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

    .hero-inner {
        padding-inline: 0;
    }


    /* =========================================================
       VERIFY
       ========================================================= */

    .verify-box {
        grid-template-columns: 1fr 1.5fr;
    }

    .verify-car {
        display: none;
    }


    /* =========================================================
       SERVICES
       ========================================================= */

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

    .service-item:nth-child(2) {
        border-right: 0;
    }

    .service-item:nth-child(3),
    .service-item:nth-child(4) {
        margin-top: 25px;
    }


    /* =========================================================
       DATA
       ========================================================= */

    .data-sources {
        right: 2%;
        gap: 25px;
    }


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

    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}


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

@media (max-width: 800px) {

    :root {
        --header-height: 72px;
        --gutter: 18px;
    }


    /* =========================================================
       GLOBAL
       ========================================================= */

    .container,
    .hero-inner,
    .autorie-header-inner {
        width: calc(100% - (var(--gutter) * 2));
    }


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

    .site-header {
        background: var(--black);
        color: var(--white);
    }

    .autorie-header-inner {
        min-height: var(--header-height);
    }

    .autorie-logo-text {
        font-size: 17px;
    }

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

    .mobile-menu-toggle {
        display: flex;
        width: 42px;
        height: 42px;
        margin-left: auto;

        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;

        border: 1px solid #444;
        background: transparent;
        color: var(--white);
    }

    .mobile-menu-toggle span {
        width: 16px;
        height: 1px;
        background: currentColor;
    }


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

    .hero-section {
        min-height: 720px;
        padding-top: 120px;
        align-items: flex-start;
    }

    .hero-background {
        background:
            linear-gradient(
                180deg,
                rgba(247, 247, 247, 1) 0%,
                rgba(247, 247, 247, .9) 45%,
                rgba(247, 247, 247, .15) 100%
            ),
            url("../images/hero-car.webp")
            center bottom / 100% auto no-repeat;
    }

    .hero-content h1 {
        font-size: clamp(36px, 7vw, 42px);
    }

    .hero-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }

    .hero-bottom {
        padding: 15px 18px;
    }

    .hero-line {
        display: none;
    }


    /* =========================================================
       VERIFY
       ========================================================= */

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

    .verify-box {
        display: block;
        padding: 28px 22px;
    }

    .vin-form {
        margin-top: 25px;
        padding-left: 0;
        grid-template-columns: 1fr;
    }

    .vin-form button {
        min-height: 50px;
    }


    /* =========================================================
       SERVICES
       ========================================================= */

    .services-grid,
    .steps-grid,
    .news-grid {
        grid-template-columns: 1fr;
    }

    .service-item {
        padding: 30px 0 !important;
        border-right: 0;
        border-bottom: 1px solid #d5d5d5;
    }

    .service-item:last-child {
        border-bottom: 0;
    }


    /* =========================================================
       DATA
       ========================================================= */

    .data-section,
    .data-section .container {
        min-height: 600px;
    }

    .data-background {
        background:
            linear-gradient(
                180deg,
                #000 15%,
                rgba(0, 0, 0, .75) 55%,
                rgba(0, 0, 0, .25)
            ),
            url("../images/data-car.webp")
            center bottom / auto 50% no-repeat;
    }

    .data-content {
        width: 100%;
        padding-top: 50px;
    }

    .data-content h2 {
        font-size: clamp(32px, 7vw, 34px);
    }

    .data-sources {
        display: none;
    }


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

    .how-section {
        padding: 70px 0;
    }

    .section-heading h2 {
        font-size: clamp(32px, 7vw, 34px);
    }

    .step {
        min-height: 145px;
        padding: 30px 0;

        border-right: 0;
        border-bottom: 1px solid #d4d4d4;
    }

    .step:first-child {
        padding-left: 0;
    }

    .step:last-child {
        border-bottom: 0;
    }

    .step-arrow {
        right: 0;
    }


    /* =========================================================
       SECTIONS
       ========================================================= */

    .section-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }


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

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

    .cta-section .container {
        align-items: flex-start;
        flex-direction: column;
        padding-top: 70px;
    }

    .cta-document {
        right: 20px;
        width: 150px;
        min-height: 220px;
    }


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

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

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        flex-direction: column;
    }

    .footer-bottom div {
        flex-wrap: wrap;
        gap: 12px;
    }
}


/* =============================================================
   SMALL MOBILE
   ============================================================= */

@media (max-width: 480px) {

    :root {
        --gutter: 18px;
    }

    .hero-section {
        min-height: 680px;
    }

    .hero-content h1 {
        font-size: 36px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-brand {
        grid-column: auto;
    }

    .cta-content h2 {
        font-size: 31px;
    }
}