:root{
    --yellow:#f1c400;
    --yellow-light:#ffd735;
    --yellow-dark:#c99e00;
    --navy:#102a43;
    --navy-dark:#081d2d;
    --text:#17202a;
    --muted:#5f6b76;
    --white:#ffffff;
    --soft:#f6f8fa;
    --border:#dde3e8;
    --container:1400px;
}


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

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:#fff;
    color:var(--text);
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    line-height:1.7;
}

img{
    display:block;
    max-width:100%;
    height:auto;
}

a{
    color:inherit;
    text-decoration:none;
}


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

.site-header{
    position:relative;
    z-index:5000;
    background:#fff;
    border-bottom:1px solid var(--border);
}

.header-inner{
    width:100%;
    max-width:var(--container);
    min-height:100px;
    margin:0 auto;
    padding:12px 20px;

    display:flex;
    align-items:center;
    gap:30px;
}


/* LOGO */

.logo-link{
    flex:0 0 auto;
}

.site-logo{
    width:300px;
    height:auto;
}


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

.main-nav{
    flex:1;

    display:flex;
    align-items:center;
    justify-content:flex-end;

    gap:4px;
}

.main-nav > a,
.nav-dropdown-link{
    display:flex;
    align-items:center;

    min-height:42px;

    padding:11px 13px;

    border-radius:6px;

    color:var(--navy);

    font-size:16px;
    line-height:1;
    font-weight:700;

    white-space:nowrap;

    transition:
        color .18s ease,
        background .18s ease;
}

.main-nav > a:hover,
.nav-dropdown:hover > .nav-dropdown-link{
    color:var(--yellow-dark);
    background:#f6f7f8;
}


/* =========================================================
   NAV DROPDOWNS
   ========================================================= */

.nav-dropdown{
    position:relative;
    flex:0 0 auto;
}

.nav-dropdown-link{
    gap:6px;
    cursor:pointer;
}


/* ARROW */

.nav-arrow{
    display:inline-block;

    position:relative;
    top:-1px;

    margin-left:2px;

    font-size:11px;
    line-height:1;

    transition:transform .18s ease;
}

.nav-dropdown:hover .nav-arrow{
    transform:rotate(180deg);
}


/* DROPDOWN MENU */

.nav-dropdown-menu{
    position:absolute;

    top:100%;
    left:0;

    z-index:6000;

    width:230px;
    max-height:440px;

    margin:0;
    padding:7px 0;

    list-style:none;

    background:#fff;

    border:1px solid var(--border);
    border-top:3px solid var(--yellow);
    border-radius:0 0 7px 7px;

    box-shadow:0 12px 30px rgba(16,42,67,.18);

    overflow-x:hidden;
    overflow-y:auto;

    opacity:0;
    visibility:hidden;

    transform:translateY(8px);

    transition:
        opacity .16s ease,
        visibility .16s ease,
        transform .16s ease;
}


/* KEEP HOVER AREA CONNECTED */

.nav-dropdown-menu::before{
    content:"";

    position:absolute;

    top:-8px;
    left:0;

    width:100%;
    height:8px;
}


/* SHOW MENU */

.nav-dropdown:hover > .nav-dropdown-menu,
.nav-dropdown:focus-within > .nav-dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}


/* DROPDOWN LIST */

.nav-dropdown-menu li{
    display:block;

    width:100%;

    margin:0;
    padding:0;
}


/* DROPDOWN LINKS */

.main-nav .nav-dropdown-menu li a{
    display:block;

    width:100%;

    padding:10px 15px;

    border-radius:0;

    background:#fff;

    color:#344454;

    font-size:14px;
    line-height:1.3;
    font-weight:600;

    white-space:nowrap;

    transition:
        color .15s ease,
        background .15s ease,
        padding-left .15s ease;
}

.main-nav .nav-dropdown-menu li a:hover{
    padding-left:19px;

    color:var(--navy);

    background:#fff8d8;
}


/* DROPDOWN SCROLLBAR */

.nav-dropdown-menu{
    scrollbar-width:thin;
    scrollbar-color:#cbd3da #f4f6f8;
}

.nav-dropdown-menu::-webkit-scrollbar{
    width:7px;
}

.nav-dropdown-menu::-webkit-scrollbar-track{
    background:#f4f6f8;
}

.nav-dropdown-menu::-webkit-scrollbar-thumb{
    background:#cbd3da;
    border-radius:10px;
}

.nav-dropdown-menu::-webkit-scrollbar-thumb:hover{
    background:#aeb9c3;
}


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

.header-phone{
    flex:0 0 auto;

    display:flex;
    align-items:center;
    gap:8px;

    margin-left:10px;

    color:var(--navy);

    font-size:23px;
    line-height:1;
    font-weight:900;

    white-space:nowrap;
}

.phone-icon{
    color:var(--yellow-dark);
    font-size:25px;
}

.header-phone:hover{
    color:var(--yellow-dark);
}


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

.menu-toggle{
    display:none;
}

.menu-button{
    display:none;
}


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

.hero{
    position:relative;

    width:100%;

    overflow:hidden;

    background:#fff;
}

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

.hero-overlay{
    position:absolute;
    inset:0;

    pointer-events:none;
}

.hero-inner{
    position:relative;

    width:100%;
    max-width:var(--container);
    height:100%;

    margin:0 auto;
}


/* HERO BUTTONS */

.hero-buttons{
    position:absolute;

    left:20px;
    bottom:20px;

    display:flex;
    align-items:center;
    gap:12px;

    pointer-events:auto;
}

.hero-btn{
    min-width:155px;
    min-height:46px;

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

    padding:10px 22px;

    border-radius:6px;

    font-size:15px;
    line-height:1.2;
    font-weight:800;

    text-align:center;
    text-transform:uppercase;

    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease;
}

.hero-btn-primary{
    color:#111;

    background:var(--yellow);

    border:1px solid var(--yellow-dark);

    box-shadow:0 3px 10px rgba(0,0,0,.25);
}

.hero-btn-primary:hover{
    color:#111;
    background:var(--yellow-light);

    transform:translateY(-2px);
}

.hero-btn-secondary{
    color:#fff;

    background:rgba(8,29,45,.9);

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

    box-shadow:0 3px 10px rgba(0,0,0,.22);
}

.hero-btn-secondary:hover{
    color:#111;
    background:var(--yellow);

    transform:translateY(-2px);
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.page-content{
    width:100%;
    max-width:1200px;

    min-height:500px;

    margin:0 auto;
    padding:50px 20px 70px;
}


/* H1 */

.page-content h1{
    margin:0 0 24px;
    padding-bottom:14px;

    border-bottom:3px solid var(--yellow);

    color:var(--navy);

    font-size:34px;
    line-height:1.25;
    font-weight:800;
}


/* H2 */

.page-content h2{
    position:relative;

    margin:45px 0 20px;
    padding:0 0 10px 16px;

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

    color:var(--navy);

    font-size:25px;
    line-height:1.3;
    font-weight:800;
}

.page-content h2::before{
    content:"";

    position:absolute;

    left:0;
    top:4px;
    bottom:11px;

    width:4px;

    background:var(--yellow);

    border-radius:4px;
}


/* H3 */

.page-content h3{
    margin:30px 0 12px;

    color:var(--navy);

    font-size:20px;
    line-height:1.35;
    font-weight:800;
}


/* PARAGRAPHS */

.page-content p{
    margin:0 0 20px;

    font-size:17px;
    line-height:1.8;
}


/* CONTENT LINKS */

.page-content a{
    color:#0b5a9d;

    text-decoration:underline;
    text-underline-offset:3px;
}

.page-content a:hover{
    color:var(--yellow-dark);
}


/* =========================================================
   FLOATING CONTENT IMAGES
   ========================================================= */

.imgleft{
    float:left;

    max-width:48%;

    margin:5px 20px 12px 0;
}

.imgright{
    float:right;

    max-width:48%;

    margin:5px 0 12px 20px;
}


/* =========================================================
   TABLE OF CONTENTS
   ========================================================= */

.toc{
    width:100%;
    max-width:720px;

    margin:32px 0 45px;
    padding:0;

    background:#f8fafc;

    border:1px solid var(--border);
    border-top:4px solid var(--yellow);
    border-radius:9px;

    overflow:hidden;

    box-shadow:0 3px 12px rgba(16,42,67,.04);
}

.toc .ttltoc{
    margin:0;
    padding:18px 22px 15px;

    color:var(--navy);

    font-size:18px;
    line-height:1.2;
    font-weight:850;

    letter-spacing:.6px;
    text-transform:uppercase;
}

.toc ul{
    margin:0;
    padding:0 22px 20px;

    list-style:none;

    counter-reset:toc-counter;
}

.toc li{
    position:relative;

    margin:0;
    padding:11px 10px 11px 42px;

    border-top:1px solid #e4e9ed;

    counter-increment:toc-counter;
}

.toc li::before{
    content:counter(toc-counter, decimal-leading-zero);

    position:absolute;

    left:0;
    top:12px;

    color:var(--yellow-dark);

    font-size:12px;
    line-height:1.4;
    font-weight:850;

    letter-spacing:.4px;
}

.page-content .toc li a{
    display:inline;

    color:#174b78;

    font-size:15px;
    line-height:1.45;
    font-weight:700;

    text-decoration:none;

    transition:color .15s ease;
}

.page-content .toc li a:hover{
    color:var(--yellow-dark);

    text-decoration:underline;
    text-underline-offset:3px;
}


/* =========================================================
   CAR MAKER GRID
   ========================================================= */

.maker-section{
    width:100%;

    margin:0 auto 55px;
}

.maker-heading{
    max-width:720px;

    margin:0 auto 30px;

    text-align:center;
}

.maker-eyebrow{
    display:block;

    margin-bottom:5px;

    color:var(--yellow-dark);

    font-size:13px;
    line-height:1.3;
    font-weight:800;

    letter-spacing:1.5px;
    text-transform:uppercase;
}


/* OVERRIDE NORMAL H2 STYLE */

.page-content .maker-heading h2{
    margin:0 0 8px;
    padding:0;

    border:0;

    color:var(--navy);

    font-size:30px;
    line-height:1.25;
    font-weight:850;

    text-transform:none;
}

.page-content .maker-heading h2::before{
    display:none;
}

.maker-heading p{
    margin:0;

    color:var(--muted);

    font-size:16px;
    line-height:1.6;
}


/* GRID */

.maker-grid{
    display:grid;

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

    gap:12px;
}


/* MAKER CARD */

.page-content .maker-card{
    min-width:0;
    min-height:125px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:8px;

    padding:16px 8px 13px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:9px;

    color:var(--navy);

    text-decoration:none;

    box-shadow:0 2px 7px rgba(16,42,67,.04);

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

.maker-card svg{
    display:block;

    width:76px;
    height:55px;

    fill:currentColor;

    flex:0 0 auto;

    transition:transform .18s ease;
}

.maker-card span{
    display:block;

    color:#273849;

    font-size:13px;
    line-height:1.25;
    font-weight:750;

    text-align:center;
}

.page-content .maker-card:hover{
    color:var(--yellow-dark);

    background:#fffdf5;

    border-color:var(--yellow);

    box-shadow:0 7px 20px rgba(16,42,67,.11);

    transform:translateY(-3px);
}

.maker-card:hover svg{
    transform:scale(1.06);
}

.maker-card:hover span{
    color:var(--navy);
}

.maker-card:focus-visible{
    outline:3px solid var(--yellow);
    outline-offset:3px;
}


/* =========================================================
   SERVICE / PRICING TABLE
   ========================================================= */

.tbl{
    width:100%;

    margin:28px 0 38px;

    border-collapse:separate;
    border-spacing:0;

    background:#fff;

    border:1px solid var(--border);
    border-radius:9px;

    overflow:hidden;

    box-shadow:0 3px 12px rgba(16,42,67,.05);
}


/* TABLE HEADER */

.tbl th{
    padding:15px 18px;

    background:var(--navy);

    color:#fff;

    font-size:15px;
    line-height:1.35;
    font-weight:800;

    text-align:left;
    vertical-align:middle;
}

.tbl th:first-child{
    border-radius:8px 0 0 0;
}

.tbl th:last-child{
    border-radius:0 8px 0 0;
}


/* TABLE CELLS */

.tbl td{
    padding:15px 18px;

    color:#344454;

    font-size:15px;
    line-height:1.5;

    text-align:left;
    vertical-align:middle;

    border-bottom:1px solid #e4e9ed;
}

.tbl tr:nth-child(odd) td{
    background:#fff;
}

.tbl tr:nth-child(even) td{
    background:#f8fafc;
}

.tbl tr:last-child td{
    border-bottom:0;
}


/* SERVICE */

.tbl td:first-child{
    width:28%;

    color:var(--navy);

    font-weight:750;
}


/* DESCRIPTION */

.tbl td:nth-child(2){
    width:50%;
}


/* PRICE */

.tbl th:last-child,
.tbl td:last-child{
    width:22%;

    white-space:nowrap;
}

.tbl td:last-child{
    color:var(--navy);
}

.tbl td:last-child strong{
    display:inline-block;

    padding:5px 10px;

    background:#fff8d8;

    border:1px solid #f0d56b;
    border-radius:5px;

    color:#8b6b00;

    font-size:15px;
    font-weight:850;
}

.tbl tr:hover td{
    background:#fffdf4;
}


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

.site-footer{
    background:var(--navy);

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

    color:#fff;
}

.footer-inner{
    width:100%;
    max-width:1200px;

    margin:0 auto;
    padding:45px 20px;

    display:grid;

    grid-template-columns:1.6fr 1fr 1fr;

    gap:60px;
}


/* FOOTER LOGO */

.footer-logo{
    width:260px;
    height:auto;

    margin-bottom:18px;
}

.footer-brand p{
    max-width:400px;

    margin:0;

    color:#d5dde5;

    font-size:15px;
    line-height:1.7;
}


/* FOOTER COLUMNS */

.footer-column{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.footer-column h3{
    width:100%;

    margin:0 0 15px;
    padding-bottom:9px;

    border-bottom:2px solid var(--yellow);

    color:#fff;

    font-size:17px;
    line-height:1.3;
    font-weight:800;

    text-transform:uppercase;
}

.footer-column a{
    padding:5px 0;

    color:#d5dde5;

    font-size:15px;

    transition:
        color .2s ease,
        padding-left .2s ease;
}

.footer-column a:hover{
    color:var(--yellow);

    padding-left:3px;
}

.footer-column .footer-phone{
    margin-bottom:5px;

    color:#fff;

    font-size:21px;
    font-weight:800;
}


/* FOOTER BOTTOM */

.footer-bottom{
    background:var(--navy-dark);
}

.footer-bottom-inner{
    width:100%;
    max-width:1200px;

    margin:0 auto;
    padding:18px 20px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    color:#cbd5df;

    font-size:14px;
}

.footer-bottom-inner div{
    display:flex;

    gap:20px;
}

.footer-bottom a{
    color:#cbd5df;
}

.footer-bottom a:hover{
    color:var(--yellow);
}


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

@media (max-width:1100px){

    .header-inner{
        gap:15px;
    }

    .site-logo{
        width:250px;
    }

    .main-nav > a,
    .nav-dropdown-link{
        padding:10px 8px;

        font-size:14px;
    }

    .header-phone{
        font-size:19px;
    }

    .hero-buttons{
        bottom:14px;
    }

    .hero-btn{
        min-width:135px;
        min-height:42px;

        padding:9px 16px;

        font-size:13px;
    }

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

}


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

@media (max-width:800px){

    /* HEADER */

    .header-inner{
        min-height:80px;

        display:grid;

        grid-template-columns:1fr auto;

        gap:10px;

        padding:10px 16px;
    }

    .site-logo{
        width:245px;
    }


    /* HAMBURGER */

    .menu-button{
        width:46px;
        height:42px;

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;

        gap:5px;

        border:1px solid var(--border);
        border-radius:6px;

        cursor:pointer;
    }

    .menu-button span{
        display:block;

        width:22px;
        height:2px;

        background:var(--navy);
    }


    /* MAIN NAV */

    .main-nav{
        display:none;

        grid-column:1 / -1;

        width:100%;

        padding:10px 0 5px;

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

        flex-direction:column;
        align-items:stretch;

        gap:0;
    }

    .menu-toggle:checked ~ .main-nav{
        display:flex;
    }

    .main-nav > a,
    .nav-dropdown-link{
        width:100%;
        min-height:44px;

        padding:12px 10px;

        border-radius:4px;

        font-size:16px;
    }


    /* MOBILE DROPDOWN */

    .nav-dropdown{
        width:100%;
    }

    .nav-dropdown-link{
        justify-content:space-between;
    }

    .nav-dropdown-menu{
        position:static;

        width:100%;
        max-height:280px;

        margin:0;
        padding:4px 0;

        border:0;
        border-left:3px solid var(--yellow);
        border-radius:0;

        box-shadow:none;

        background:#f7f9fb;

        overflow-y:auto;

        opacity:1;
        visibility:visible;

        transform:none;

        display:none;
    }

    .nav-dropdown:hover > .nav-dropdown-menu,
    .nav-dropdown:focus-within > .nav-dropdown-menu{
        display:block;

        transform:none;
    }

    .main-nav .nav-dropdown-menu li a{
        padding:10px 20px;

        background:#f7f9fb;

        font-size:14px;
    }

    .main-nav .nav-dropdown-menu li a:hover{
        padding-left:24px;

        background:#fff8d8;
    }


    /* PHONE */

    .header-phone{
        grid-column:1 / -1;

        justify-content:center;

        margin:0;
        padding:11px;

        background:var(--yellow);

        border-radius:6px;

        color:#111;

        font-size:19px;
    }

    .phone-icon{
        color:#111;
    }


    /* HERO */

    .hero{
        overflow:visible;
    }

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

    .hero-overlay{
        position:static;
    }

    .hero-inner{
        height:auto;

        padding:12px 16px 18px;
    }

    .hero-buttons{
        position:static;

        width:100%;
        max-width:550px;

        display:grid;

        grid-template-columns:1fr 1fr;

        margin:0 auto;

        gap:10px;
    }

    .hero-btn{
        width:100%;
        min-width:0;
        min-height:46px;

        font-size:13px;

        text-align:center;
    }


    /* CONTENT */

    .page-content{
        padding:35px 16px 55px;
    }

    .page-content h1{
        font-size:26px;
    }

    .page-content h2{
        font-size:21px;
    }


    /* MAKER GRID */

    .maker-heading{
        margin-bottom:24px;
    }

    .page-content .maker-heading h2{
        font-size:25px;
    }

    .maker-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));

        gap:10px;
    }

    .page-content .maker-card{
        min-height:115px;
    }

    .maker-card svg{
        width:68px;
        height:50px;
    }


    /* FOOTER */

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

        gap:35px;

        padding:35px 20px;
    }

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

}


/* =========================================================
   PRICING TABLE MOBILE
   ========================================================= */

@media (max-width:700px){

    .imgleft,
    .imgright{
        float:none;

        display:block;

        width:100%;
        max-width:100%;
        height:auto;

        margin:15px 0;
    }


    /* TABLE BECOMES CARDS */

    .tbl{
        display:block;

        border:0;
        border-radius:0;

        background:transparent;

        box-shadow:none;
    }

    .tbl tbody{
        display:block;
    }

    .tbl tr{
        display:block;

        margin-bottom:14px;

        background:#fff;

        border:1px solid var(--border);
        border-left:4px solid var(--yellow);
        border-radius:8px;

        overflow:hidden;

        box-shadow:0 2px 8px rgba(16,42,67,.05);
    }

    .tbl tr:first-child{
        display:none;
    }

    .tbl td{
        display:block;

        width:100% !important;

        padding:8px 14px;

        background:#fff !important;

        border:0;

        font-size:14px;
    }

    .tbl td:first-child{
        padding-top:13px;

        color:var(--navy);

        font-size:16px;
        font-weight:800;
    }

    .tbl td:nth-child(2){
        color:#5c6873;
    }

    .tbl td:last-child{
        padding-top:7px;
        padding-bottom:13px;
    }

    .tbl td:last-child strong{
        font-size:14px;
    }

}


/* =========================================================
   TOC MOBILE
   ========================================================= */

@media (max-width:600px){

    .toc{
        max-width:none;

        margin:25px 0 35px;

        border-radius:7px;
    }

    .toc .ttltoc{
        padding:16px 17px 13px;

        font-size:17px;
    }

    .toc ul{
        padding:0 17px 16px;
    }

    .toc li{
        padding:10px 4px 10px 35px;
    }

    .toc li::before{
        top:11px;

        font-size:11px;
    }

    .page-content .toc li a{
        font-size:14px;
    }

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

}


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

@media (max-width:520px){

    .site-logo{
        width:210px;
    }

    .hero-buttons{
        grid-template-columns:1fr;
    }

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

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

    .footer-logo{
        width:220px;
    }

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

        text-align:center;
    }

    .footer-bottom-inner div{
        flex-wrap:wrap;
        justify-content:center;
    }

}


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

@media (max-width:400px){

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

}