/* =========================================================
   SAHF — VEHICLE INSURANCE
   Page-specific stylesheet
   ========================================================= */


/* =========================================================
   TOKENS
   Scoped to prevent leakage into the global theme.
   ========================================================= */

.vehicle-insurance-root{

    --navy:#0B1F33;
    --navy-deep:#071523;
    --navy-raise:#112A44;

    --gold:#C9A24D;
    --gold-dim:rgba(201,162,77,0.28);
    --gold-dark:#9A7A34;

    --cream:#F3EFE7;
    --neutral:#F3F1ED;

    --on-navy:#F3EFE7;
    --on-navy-mute:#9FAFC2;

    --on-cream:#0B1F33;
    --on-cream-mute:#5A6579;

    --good:#5B8A6B;
    --warn:#B5502E;

    --max:1220px;
    --gutter:clamp(20px,4vw,48px);
    --read:720px;
}


/* =========================================================
   BASE
   ========================================================= */

.vehicle-insurance-root,
.vehicle-insurance-root *{
    box-sizing:border-box;
}


.vehicle-insurance-root{

    width:100%;

    background:var(--cream);

    color:var(--on-cream);

    font-family:'Inter',sans-serif;

    -webkit-font-smoothing:antialiased;

}


.vehicle-insurance-root h1,
.vehicle-insurance-root h2,
.vehicle-insurance-root h3,
.vehicle-insurance-root h4{

    font-family:'Playfair Display',serif;

    font-weight:600;

    margin:0;

}


.vehicle-insurance-root p{
    margin:0;
}


.vehicle-insurance-root a{

    color:inherit;

    text-decoration:none;

}


.vehicle-insurance-root label{
    font-family:'Inter',sans-serif;
}


.vehicle-insurance-root ::selection{

    background:var(--gold);

    color:var(--navy-deep);

}


/* =========================================================
   WRAPPER
   ========================================================= */

.vehicle-insurance-wrap{

    width:100%;

    max-width:var(--max);

    margin-left:auto;
    margin-right:auto;

    padding-left:var(--gutter);
    padding-right:var(--gutter);

}


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

.vehicle-insurance-root a:focus-visible,
.vehicle-insurance-root button:focus-visible,
.vehicle-insurance-root summary:focus-visible,
.vehicle-insurance-root select:focus-visible,
.vehicle-insurance-root input:focus-visible{

    outline:2px solid var(--gold);

    outline-offset:3px;

}


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

.vehicle-insurance-eyebrow{

    display:inline-flex;

    align-items:center;

    gap:10px;

    font-size:0.74rem;

    letter-spacing:0.16em;

    text-transform:uppercase;

    color:var(--gold-dark);

    margin-bottom:20px;

}


.vehicle-insurance-eyebrow::before{

    content:'';

    width:24px;

    height:1px;

    background:var(--gold-dark);

}


.vehicle-insurance-eyebrow-light{

    color:var(--gold);

}


.vehicle-insurance-eyebrow-light::before{

    background:var(--gold);

}


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

.vehicle-insurance-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    min-height:48px;

    padding:0 26px;

    font-family:'Inter',sans-serif;

    font-size:0.86rem;

    letter-spacing:0.02em;

    border:1px solid transparent;

    background:none;

    cursor:pointer;

    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease;

}


.vehicle-insurance-btn-primary{

    background:var(--gold);

    color:var(--navy-deep);

    font-weight:500;

}


.vehicle-insurance-btn-primary:hover{

    background:#dcb769;

}


.vehicle-insurance-btn-primary[aria-disabled="true"]{

    background:rgba(201,162,77,0.35);

    color:rgba(7,21,35,0.55);

    cursor:not-allowed;

    pointer-events:none;

}


.vehicle-insurance-btn-line{

    display:inline-flex;

    align-items:center;

    gap:10px;

    border-bottom:1px solid rgba(11,31,51,0.25);

    padding:0 0 4px;

    color:var(--on-cream);

}


.vehicle-insurance-btn-line:hover{

    color:var(--gold-dark);

    border-color:var(--gold-dark);

}


.vehicle-insurance-btn-line-light{

    color:var(--on-navy);

    border-color:rgba(243,239,231,0.35);

}


.vehicle-insurance-btn-line-light:hover{

    color:var(--gold);

    border-color:var(--gold);

}


.vehicle-insurance-arrow{

    display:inline-block;

    transition:transform .25s ease;

}


.vehicle-insurance-btn:hover .vehicle-insurance-arrow,
.vehicle-insurance-btn-line:hover .vehicle-insurance-arrow{

    transform:translateX(3px);

}


/* =========================================================
   SECTION HEAD
   ========================================================= */

.vehicle-insurance-section-head{

    width:100%;

    max-width:660px;

}


.vehicle-insurance-section-head h2{

    font-size:clamp(1.5rem,2.8vw,2rem);

    line-height:1.3;

}


.vehicle-insurance-lede{

    margin-top:16px;

    max-width:64ch;

    font-size:1rem;

    line-height:1.75;

    color:var(--on-cream-mute);

}


/* =========================================================
   SHARED REVEAL
   ========================================================= */

.vehicle-insurance-root .reveal{

    opacity:0;

    transform:translateY(16px);

    transition:
        opacity .7s ease,
        transform .7s ease;

}


.vehicle-insurance-root .reveal.in{

    opacity:1;

    transform:none;

}


@media (prefers-reduced-motion:reduce){

    .vehicle-insurance-root .reveal{

        opacity:1;

        transform:none;

        transition:none;

    }


    .vehicle-insurance-root .vehicle-insurance-arrow{

        transition:none;

    }

}


/* =========================================================
   NAVIGATION
   Sitewide selectors retained because the page uses the
   shared navigation component.
   ========================================================= */

.nav{

    position:sticky;

    top:0;

    z-index:60;

    background:rgba(7,21,35,0.94);

    backdrop-filter:blur(10px);

    border-bottom:1px solid rgba(201,162,77,0.18);

    color:#F3EFE7;

}


.nav-inner{

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:100%;

    max-width:1220px;

    margin:0 auto;

    padding:
        18px
        clamp(20px,4vw,48px);

    min-height:64px;

}


.logo{

    display:flex;

    align-items:center;

    gap:10px;

    color:#F3EFE7;

    font-family:'Playfair Display',serif;

    font-size:1.05rem;

    letter-spacing:0.01em;

}


.logo .idx{

    padding:3px 7px;

    border:1px solid rgba(201,162,77,0.28);

    color:#C9A24D;

    font-family:'Inter',sans-serif;

    font-size:0.7rem;

    letter-spacing:0.1em;

}


.nav-links{

    display:flex;

    align-items:center;

    gap:clamp(16px,2.6vw,32px);

}


.nav-links a{

    position:relative;

    padding:4px 0;

    color:#9FAFC2;

    font-size:0.78rem;

    letter-spacing:0.05em;

    text-transform:uppercase;

    white-space:nowrap;

}


.nav-links a::after{

    content:'';

    position:absolute;

    left:0;

    bottom:-2px;

    width:0;

    height:1px;

    background:#C9A24D;

    transition:width .25s ease;

}


.nav-links a:hover{

    color:#F3EFE7;

}


.nav-links a:hover::after{

    width:100%;

}


.nav-links a[aria-current="page"]{

    color:#C9A24D;

}


.nav-links a[aria-current="page"]::after{

    width:100%;

}


.nav-links .nav-cta{

    display:inline-flex;

    align-items:center;

    min-height:44px;

    padding:10px 18px;

    border:1px solid rgba(201,162,77,0.28);

    color:#C9A24D;

    text-transform:none;

    letter-spacing:0.02em;

}


.nav-links .nav-cta:hover{

    background:#C9A24D;

    color:#071523;

}


.nav-links .nav-cta::after{

    display:none;

}


.nav-burger{

    display:none;

    width:44px;

    height:44px;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:5px;

    border:1px solid rgba(201,162,77,0.3);

    background:none;

    cursor:pointer;

}


.nav-burger span{

    display:block;

    width:18px;

    height:1px;

    background:#C9A24D;

    transition:
        transform .25s ease,
        opacity .25s ease;

}


.nav-burger[aria-expanded="true"] span:nth-child(1){

    transform:translateY(6px) rotate(45deg);

}


.nav-burger[aria-expanded="true"] span:nth-child(2){

    opacity:0;

}


.nav-burger[aria-expanded="true"] span:nth-child(3){

    transform:translateY(-6px) rotate(-45deg);

}


.mobile-drawer{

    display:none;

    flex-direction:column;

    gap:2px;

    padding:
        8px
        clamp(20px,4vw,48px)
        20px;

    background:#071523;

    border-bottom:1px solid rgba(201,162,77,0.18);

}


.mobile-drawer.open{

    display:flex;

}


.mobile-drawer a{

    display:flex;

    align-items:center;

    min-height:44px;

    padding:14px 4px;

    border-bottom:1px solid rgba(201,162,77,0.1);

    color:#F3EFE7;

    font-size:0.95rem;

}


.mobile-drawer a[aria-current="page"]{

    color:#C9A24D;

}


.mobile-drawer .m-cta{

    color:#C9A24D;

    font-weight:500;

}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.vehicle-insurance-crumbs{

    background:var(--navy-deep);

    border-bottom:1px solid rgba(201,162,77,0.14);

}


.vehicle-insurance-crumbs ol{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:8px;

    width:100%;

    max-width:var(--max);

    margin:0 auto;

    padding:
        12px
        var(--gutter);

    list-style:none;

    color:var(--on-navy-mute);

    font-size:0.76rem;

}


.vehicle-insurance-crumbs a{

    color:var(--on-navy-mute);

}


.vehicle-insurance-crumbs a:hover{

    color:var(--gold);

}


.vehicle-insurance-crumbs li[aria-current]{

    color:var(--gold);

}


.vehicle-insurance-crumbs li:not(:last-child)::after{

    content:'/';

    margin-left:8px;

    color:rgba(159,175,194,0.4);

}


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

.vehicle-insurance-hero{

    position:relative;

    overflow:hidden;

    padding:
        clamp(56px,8vw,92px)
        0
        clamp(64px,9vw,100px);

    background:var(--navy);

    color:var(--on-navy);

}


.vehicle-insurance-hero-art{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    opacity:0.16;

    pointer-events:none;

}


.vehicle-insurance-hero-inner{

    position:relative;

    width:100%;

    max-width:760px;

}


.vehicle-insurance-hero h1{

    margin-bottom:20px;

    font-size:clamp(2.2rem,4.6vw,3.2rem);

    line-height:1.15;

    letter-spacing:-0.01em;

}


.vehicle-insurance-hero-statement{

    max-width:52ch;

    margin-bottom:16px;

    color:var(--on-navy);

    font-size:1.15rem;

    line-height:1.6;

}


.vehicle-insurance-hero-sub{

    max-width:58ch;

    margin-bottom:36px;

    color:var(--on-navy-mute);

    font-size:1rem;

    line-height:1.75;

}


.vehicle-insurance-hero-actions{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

}


/* =========================================================
   02 — SIMPLIFIED
   ========================================================= */

.vehicle-insurance-simplified{

    padding:
        clamp(64px,9vw,100px)
        0;

}


.vehicle-insurance-simplified
.vehicle-insurance-section-head{

    max-width:680px;

    margin:
        0 auto
        clamp(40px,5vw,52px);

    text-align:center;

}


.vehicle-insurance-simplified
.vehicle-insurance-eyebrow{

    justify-content:center;

}


.vehicle-insurance-simplified-grid{

    display:grid;

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

    width:100%;

    max-width:1120px;

    margin:0 auto;

    gap:1px;

    border:1px solid rgba(11,31,51,0.1);

    background:rgba(11,31,51,0.1);

}


.vehicle-insurance-simplified-card{

    min-width:0;

    padding:
        clamp(28px,3.2vw,36px);

    background:#fff;

    text-align:center;

}


.vehicle-insurance-simplified-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:46px;

    height:46px;

    margin:
        0 auto
        18px;

    border-radius:50%;

    background:var(--navy);

    color:var(--gold);

}


.vehicle-insurance-simplified-icon svg{

    width:20px;

    height:20px;

}


.vehicle-insurance-simplified-card h3{

    margin-bottom:10px;

    font-size:1.02rem;

    line-height:1.35;

}


.vehicle-insurance-simplified-card p{

    color:var(--on-cream-mute);

    font-size:0.9rem;

    line-height:1.65;

}


/* =========================================================
   03 — VEHICLE PATHS
   ========================================================= */

.vehicle-insurance-paths{

    padding:
        clamp(64px,9vw,100px)
        0;

    background:var(--neutral);

}


.vehicle-insurance-paths
.vehicle-insurance-section-head{

    max-width:640px;

    margin:
        0 auto
        clamp(44px,5.5vw,56px);

    text-align:center;

}


.vehicle-insurance-paths
.vehicle-insurance-eyebrow{

    justify-content:center;

}


.vehicle-insurance-path-grid{

    display:grid;

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

    width:100%;

    max-width:1000px;

    margin:0 auto;

    gap:clamp(20px,3vw,32px);

}


.vehicle-insurance-path-card{

    position:relative;

    display:flex;

    flex-direction:column;

    min-width:0;

    overflow:hidden;

    padding:
        clamp(30px,3.4vw,40px);

    border:1px solid rgba(11,31,51,0.1);

    background:#fff;

}


.vehicle-insurance-path-watermark{

    position:absolute;

    right:-22px;

    bottom:-22px;

    width:160px;

    height:160px;

    opacity:0.05;

    color:var(--navy);

    pointer-events:none;

}


.vehicle-insurance-path-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:48px;

    height:48px;

    margin-bottom:20px;

    border-radius:50%;

    background:var(--navy);

    color:var(--gold);

}


.vehicle-insurance-path-icon svg{

    width:21px;

    height:21px;

}


.vehicle-insurance-path-card h3{

    margin-bottom:6px;

    font-size:1.3rem;

    line-height:1.3;

}


.vehicle-insurance-path-sub{

    margin-bottom:20px;

    color:var(--on-cream-mute);

    font-size:0.86rem;

}


.vehicle-insurance-path-list{

    flex:1;

    margin:
        0
        0
        28px;

    padding:0;

    list-style:none;

}


.vehicle-insurance-path-list li{

    position:relative;

    padding:
        9px
        0
        9px
        22px;

    border-top:1px solid rgba(11,31,51,0.08);

    color:var(--on-cream);

    font-size:0.88rem;

    line-height:1.6;

}


.vehicle-insurance-path-list li:first-child{

    border-top:none;

}


.vehicle-insurance-path-list li::before{

    content:'';

    position:absolute;

    top:17px;

    left:2px;

    width:6px;

    height:6px;

    background:var(--gold-dark);

}


/* =========================================================
   04 — COST
   ========================================================= */

.vehicle-insurance-cost{

    position:relative;

    overflow:hidden;

    padding:
        clamp(64px,9vw,100px)
        0;

}


.vehicle-insurance-cost-watermark{

    position:absolute;

    top:-50px;

    right:-50px;

    width:320px;

    height:320px;

    opacity:0.045;

    color:var(--navy);

    pointer-events:none;

}


.vehicle-insurance-cost
.vehicle-insurance-section-head{

    max-width:660px;

    margin:
        0 auto
        clamp(44px,5.5vw,56px);

    text-align:center;

}


.vehicle-insurance-cost
.vehicle-insurance-eyebrow{

    justify-content:center;

}


.vehicle-insurance-cost-grid{

    display:grid;

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

    width:100%;

    max-width:1180px;

    margin:0 auto;

    gap:1px;

    border:1px solid rgba(11,31,51,0.1);

    background:rgba(11,31,51,0.1);

}


.vehicle-insurance-cost-item{

    min-width:0;

    padding:
        clamp(22px,2.4vw,26px)
        clamp(16px,1.8vw,20px);

    background:#fff;

}


.vehicle-insurance-cost-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:36px;

    height:36px;

    margin-bottom:14px;

    border:1px solid var(--gold-dim);

    border-radius:50%;

    color:var(--gold-dark);

}


.vehicle-insurance-cost-icon svg{

    width:16px;

    height:16px;

}


.vehicle-insurance-cost-item h3{

    margin-bottom:8px;

    font-size:0.92rem;

    line-height:1.35;

}


.vehicle-insurance-cost-item p{

    color:var(--on-cream-mute);

    font-size:0.82rem;

    line-height:1.55;

}


.vehicle-insurance-cost-note{

    max-width:60ch;

    margin:
        clamp(28px,3.5vw,36px)
        auto
        0;

    color:var(--on-cream-mute);

    font-size:0.86rem;

    line-height:1.6;

    text-align:center;

}


/* =========================================================
   05 — ADD-ONS
   ========================================================= */

.vehicle-insurance-addons{

    padding:
        clamp(64px,9vw,100px)
        0;

    background:var(--neutral);

}


.vehicle-insurance-addons
.vehicle-insurance-section-head{

    margin:
        0
        0
        clamp(16px,2vw,20px);

}


.vehicle-insurance-addons-lead{

    max-width:56ch;

    margin-bottom:
        clamp(32px,4vw,44px);

    color:var(--on-cream);

    font-family:'Playfair Display',serif;

    font-size:1.1rem;

    font-style:italic;

    line-height:1.6;

}


.vehicle-insurance-addons-grid{

    display:grid;

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

    gap:1px;

    border:1px solid rgba(11,31,51,0.1);

    background:rgba(11,31,51,0.1);

}


.vehicle-insurance-addon-card{

    min-width:0;

    padding:
        clamp(22px,2.4vw,26px);

    background:#fff;

}


.vehicle-insurance-addon-card h3{

    margin-bottom:8px;

    font-size:0.94rem;

    line-height:1.35;

}


.vehicle-insurance-addon-card p{

    color:var(--on-cream-mute);

    font-size:0.84rem;

    line-height:1.55;

}


.vehicle-insurance-addons-note{

    max-width:56ch;

    margin:
        clamp(32px,4vw,40px)
        auto
        0;

    color:var(--on-cream);

    font-family:'Playfair Display',serif;

    font-size:0.94rem;

    font-style:italic;

    line-height:1.6;

    text-align:center;

}


/* =========================================================
   06 — CHECKLIST
   ========================================================= */

.vehicle-insurance-checklist{

    position:relative;

    overflow:hidden;

    padding:
        clamp(64px,9vw,100px)
        0;

}


.vehicle-insurance-checklist-watermark{

    position:absolute;

    top:50%;

    right:-70px;

    width:280px;

    height:280px;

    opacity:0.04;

    color:var(--navy);

    transform:translateY(-50%);

    pointer-events:none;

}


.vehicle-insurance-checklist
.vehicle-insurance-section-head{

    margin:
        0
        0
        clamp(36px,4.5vw,48px);

}


.vehicle-insurance-checklist
.vehicle-insurance-wrap{

    max-width:var(--read);

}


.vehicle-insurance-checklist-list{

    border-top:1px solid rgba(11,31,51,0.12);

}


.vehicle-insurance-checklist-item{

    border-bottom:1px solid rgba(11,31,51,0.12);

}


.vehicle-insurance-checklist-item summary{

    display:flex;

    align-items:center;

    gap:16px;

    padding:18px 2px;

    cursor:pointer;

    list-style:none;

}


.vehicle-insurance-checklist-item summary::-webkit-details-marker{

    display:none;

}


.vehicle-insurance-checklist-no{

    flex:none;

    width:28px;

    color:var(--gold-dark);

    font-family:'Playfair Display',serif;

    font-size:0.86rem;

}


.vehicle-insurance-checklist-item
.vehicle-insurance-checklist-name{

    flex:1;

    color:var(--on-cream);

    font-size:0.98rem;

    font-weight:500;

}


.vehicle-insurance-chevron{

    flex:none;

    color:var(--gold-dark);

    transition:transform .25s ease;

}


.vehicle-insurance-checklist-item[open]
.vehicle-insurance-chevron{

    transform:rotate(180deg);

}


.vehicle-insurance-checklist-item p{

    max-width:66ch;

    padding:
        0
        2px
        18px
        44px;

    color:var(--on-cream-mute);

    font-size:0.92rem;

    line-height:1.65;

}


/* =========================================================
   07 — COMMON MISTAKES
   ========================================================= */

.vehicle-insurance-mistakes{

    padding:
        clamp(64px,9vw,100px)
        0;

    background:var(--neutral);

}


.vehicle-insurance-mistakes
.vehicle-insurance-section-head{

    margin:
        0
        0
        clamp(16px,2vw,20px);

}


.vehicle-insurance-mistakes-lead{

    max-width:52ch;

    margin-bottom:
        clamp(32px,4vw,44px);

    color:var(--on-cream);

    font-family:'Playfair Display',serif;

    font-size:1.1rem;

    font-style:italic;

    line-height:1.6;

}


.vehicle-insurance-mistakes-grid{

    display:grid;

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

    gap:1px;

    border:1px solid rgba(11,31,51,0.1);

    background:rgba(11,31,51,0.1);

}


.vehicle-insurance-mistake-card{

    min-width:0;

    padding:
        clamp(20px,2.4vw,24px);

    background:#fff;

}


.vehicle-insurance-mistake-no{

    display:block;

    margin-bottom:8px;

    color:var(--gold-dark);

    font-family:'Playfair Display',serif;

    font-size:0.82rem;

}


.vehicle-insurance-mistake-card p{

    color:var(--on-cream);

    font-size:0.88rem;

    line-height:1.55;

}


/* =========================================================
   08 — ADVISORY APPROACH
   ========================================================= */

.vehicle-insurance-approach{

    position:relative;

    overflow:hidden;

    padding:
        clamp(72px,10vw,112px)
        0;

    background:var(--navy);

    color:var(--on-navy);

}


.vehicle-insurance-approach-road{

    position:absolute;

    left:0;

    right:0;

    bottom:26px;

    width:100%;

    height:14px;

    opacity:0.16;

    pointer-events:none;

}


.vehicle-insurance-approach
.vehicle-insurance-section-head{

    max-width:640px;

    margin:
        0 auto
        clamp(48px,6vw,60px);

    text-align:center;

}


.vehicle-insurance-approach
.vehicle-insurance-eyebrow{

    justify-content:center;

}


.vehicle-insurance-approach h2{

    color:var(--on-navy);

}


.vehicle-insurance-journey{

    display:flex;

    flex-wrap:wrap;

    width:100%;

    max-width:1180px;

    margin:0 auto;

    gap:clamp(10px,1.6vw,20px);

}


.vehicle-insurance-journey-step{

    position:relative;

    flex:1 1 calc(16.66% - 17px);

    min-width:140px;

    padding-top:36px;

}


.vehicle-insurance-journey-step::before{

    content:'';

    position:absolute;

    top:12px;

    left:0;

    right:0;

    height:1px;

    background:rgba(201,162,77,0.25);

}


.vehicle-insurance-journey-step:first-child::before{

    left:50%;

}


.vehicle-insurance-journey-step:last-child::before{

    right:50%;

}


.vehicle-insurance-journey-marker{

    position:absolute;

    top:0;

    left:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    width:26px;

    height:26px;

    border-radius:50%;

    background:var(--gold);

    color:var(--navy-deep);

    font-size:0.78rem;

    font-weight:600;

    transform:translateX(-50%);

}


.vehicle-insurance-journey-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:40px;

    height:40px;

    margin:
        0
        auto
        14px;

    border:1px solid var(--gold-dim);

    border-radius:50%;

    color:var(--gold);

}


.vehicle-insurance-journey-icon svg{

    width:18px;

    height:18px;

}


.vehicle-insurance-journey-step h3{

    margin-bottom:8px;

    color:var(--on-navy);

    font-size:0.96rem;

    text-align:center;

}


.vehicle-insurance-journey-step p{

    color:var(--on-navy-mute);

    font-size:0.8rem;

    line-height:1.55;

    text-align:center;

}


/* =========================================================
   09 — FORM PLACEHOLDER
   ========================================================= */

.vehicle-insurance-form-section{

    padding:
        clamp(64px,9vw,100px)
        0;

}


.vehicle-insurance-form-section
.vehicle-insurance-wrap{

    max-width:760px;

}


.vehicle-insurance-form-card{

    padding:
        clamp(36px,5vw,56px);

    border:1px dashed rgba(11,31,51,0.25);

    background:#fff;

    text-align:center;

}


.vehicle-insurance-form-status{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:28px;

    padding:8px 14px;

    border:1px solid rgba(201,162,77,0.3);

    background:rgba(201,162,77,0.08);

    color:var(--gold-dark);

    font-size:0.74rem;

    letter-spacing:0.08em;

    text-transform:uppercase;

}


.vehicle-insurance-form-status::before{

    content:'●';

    font-size:0.6rem;

}


.vehicle-insurance-form-card h2{

    margin-bottom:14px;

    font-size:clamp(1.4rem,2.6vw,1.8rem);

    line-height:1.3;

}


.vehicle-insurance-form-card p{

    max-width:52ch;

    margin:
        0
        auto
        28px;

    color:var(--on-cream-mute);

    font-size:0.98rem;

    line-height:1.7;

}


.vehicle-insurance-form-fields{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    max-width:56ch;

    margin:
        0
        auto
        32px;

    gap:8px;

}


.vehicle-insurance-form-fields span{

    padding:7px 12px;

    border:1px solid rgba(11,31,51,0.15);

    color:var(--on-cream-mute);

    font-size:0.78rem;

}


.vehicle-insurance-form-actions{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;

}


/* =========================================================
   10 — FAQ
   ========================================================= */

.vehicle-insurance-faq{

    padding:
        clamp(64px,9vw,100px)
        0;

}


.vehicle-insurance-faq
.vehicle-insurance-wrap{

    max-width:var(--read);

}


.vehicle-insurance-faq
.vehicle-insurance-section-head{

    margin-bottom:
        clamp(36px,5vw,48px);

}


.vehicle-insurance-faq-list{

    border-top:1px solid rgba(11,31,51,0.12);

}


.vehicle-insurance-faq-item{

    border-bottom:1px solid rgba(11,31,51,0.12);

}


.vehicle-insurance-faq-item summary{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:20px 2px;

    color:var(--on-cream);

    font-size:0.98rem;

    font-weight:500;

    cursor:pointer;

    list-style:none;

}


.vehicle-insurance-faq-item summary::-webkit-details-marker{

    display:none;

}


.vehicle-insurance-faq-item[open]
.vehicle-insurance-chevron{

    transform:rotate(180deg);

}


.vehicle-insurance-faq-item p{

    max-width:66ch;

    padding:
        0
        2px
        20px;

    color:var(--on-cream-mute);

    font-size:0.94rem;

    line-height:1.7;

}


/* =========================================================
   11 — RELATED RESEARCH
   ========================================================= */

.vehicle-insurance-research{

    padding:
        clamp(64px,9vw,100px)
        0;

    background:var(--neutral);

}


.vehicle-insurance-research
.vehicle-insurance-section-head{

    margin:
        0
        0
        clamp(12px,1.6vw,16px);

}


.vehicle-insurance-research-note{

    max-width:62ch;

    margin-bottom:
        clamp(36px,4.5vw,48px);

    color:var(--on-cream-mute);

    font-size:0.86rem;

    line-height:1.6;

}


.vehicle-insurance-research-grid{

    display:grid;

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

    gap:1px;

    border:1px solid rgba(11,31,51,0.1);

    background:rgba(11,31,51,0.1);

}


.vehicle-insurance-research-card{

    display:flex;

    flex-direction:column;

    min-width:0;

    padding:
        clamp(24px,3vw,28px);

    background:#fbfaf8;

}


.vehicle-insurance-research-card
.vehicle-insurance-tag{

    margin-bottom:12px;

    color:var(--gold-dark);

    font-size:0.7rem;

    letter-spacing:0.1em;

    text-transform:uppercase;

}


.vehicle-insurance-research-card h3{

    margin-bottom:10px;

    color:var(--on-cream);

    font-size:1rem;

    line-height:1.4;

}


.vehicle-insurance-research-card p{

    flex:1;

    margin-bottom:14px;

    color:var(--on-cream-mute);

    font-size:0.86rem;

    line-height:1.6;

}


.vehicle-insurance-soon{

    display:inline-flex;

    align-items:center;

    gap:6px;

    width:fit-content;

    color:var(--on-cream-mute);

    font-size:0.74rem;

    font-weight:600;

    letter-spacing:0.05em;

    text-transform:uppercase;

}


.vehicle-insurance-soon::before{

    content:'';

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--on-cream-mute);

}


/* =========================================================
   12 — FINAL CTA
   ========================================================= */

.vehicle-insurance-cta{

    padding:
        clamp(72px,10vw,120px)
        0;

    background:var(--navy);

    color:var(--on-navy);

    text-align:center;

}


.vehicle-insurance-cta
.vehicle-insurance-wrap{

    max-width:640px;

}


.vehicle-insurance-cta-rule{

    width:44px;

    height:2px;

    margin:
        0
        auto
        32px;

    background:var(--gold);

}


.vehicle-insurance-cta h2{

    margin-bottom:18px;

    color:var(--on-navy);

    font-size:clamp(1.6rem,3.2vw,2.15rem);

    line-height:1.3;

}


.vehicle-insurance-cta p{

    margin-bottom:36px;

    color:var(--on-navy-mute);

    font-size:1.02rem;

    line-height:1.75;

}


.vehicle-insurance-cta-actions{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:22px;

}


.vehicle-insurance-wa-icon{

    width:16px;

    height:16px;

}


/* =========================================================
   MOBILE STICKY CTA
   Hidden on desktop.
   ========================================================= */

.vehicle-insurance-sticky-cta{

    display:none;

}


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

@media (max-width:980px){

    .nav-links{

        display:none;

    }


    .nav-burger{

        display:flex;

    }


    .vehicle-insurance-simplified-grid{

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

    }


    .vehicle-insurance-cost-grid{

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

    }


    .vehicle-insurance-addons-grid{

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

    }


    .vehicle-insurance-mistakes-grid{

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

    }


    .vehicle-insurance-research-grid{

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

    }


    .vehicle-insurance-journey{

        gap:24px 16px;

    }


    .vehicle-insurance-journey-step{

        flex:
            1 1
            calc(33.333% - 16px);

        min-width:0;

        margin-bottom:28px;

    }


    .vehicle-insurance-sticky-cta{

        position:fixed;

        left:0;

        right:0;

        bottom:0;

        z-index:70;

        display:flex;

        background:rgba(7,21,35,0.97);

        border-top:1px solid rgba(201,162,77,0.22);

        backdrop-filter:blur(8px);

    }


    .vehicle-insurance-sticky-cta a{

        display:flex;

        align-items:center;

        justify-content:center;

        flex:1;

        min-height:48px;

        padding:
            14px
            10px;

        color:var(--on-navy);

        font-size:0.82rem;

        text-align:center;

    }


    .vehicle-insurance-sticky-cta a:first-child{

        border-right:1px solid rgba(201,162,77,0.18);

        color:var(--gold);

        font-weight:500;

    }


    .vehicle-insurance-root{

        padding-bottom:56px;

    }

}


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

@media (max-width:640px){

    .vehicle-insurance-wrap{

        padding-left:20px;

        padding-right:20px;

    }


    .vehicle-insurance-hero{

        padding-top:52px;

        padding-bottom:72px;

    }


    .vehicle-insurance-hero h1{

        font-size:
            clamp(2rem,10vw,2.7rem);

    }


    .vehicle-insurance-hero-statement{

        font-size:1.05rem;

    }


    .vehicle-insurance-hero-actions{

        align-items:flex-start;

        flex-direction:column;

        gap:18px;

    }


    .vehicle-insurance-simplified-grid,
    .vehicle-insurance-cost-grid,
    .vehicle-insurance-addons-grid,
    .vehicle-insurance-mistakes-grid,
    .vehicle-insurance-research-grid{

        grid-template-columns:1fr;

    }


    .vehicle-insurance-path-grid{

        grid-template-columns:1fr;

    }


    .vehicle-insurance-path-card{

        padding:28px 24px;

    }


    .vehicle-insurance-cost-item{

        padding:24px;

    }


    .vehicle-insurance-checklist
    .vehicle-insurance-wrap,
    .vehicle-insurance-faq
    .vehicle-insurance-wrap{

        max-width:none;

    }


    .vehicle-insurance-checklist-item summary{

        gap:12px;

        padding:
            17px
            0;

    }


    .vehicle-insurance-checklist-item p{

        padding-left:40px;

    }


    .vehicle-insurance-journey{

        display:block;

    }


    .vehicle-insurance-journey-step{

        min-width:0;

        width:100%;

        margin-bottom:38px;

        padding-top:36px;

    }


    .vehicle-insurance-journey-step::before{

        left:20%;

        right:20%;

    }


    .vehicle-insurance-journey-step:first-child::before,
    .vehicle-insurance-journey-step:last-child::before{

        left:20%;

        right:20%;

    }


    .vehicle-insurance-form-card{

        padding:30px 22px;

    }


    .vehicle-insurance-form-actions{

        align-items:center;

        flex-direction:column;

        gap:18px;

    }


    .vehicle-insurance-cta-actions{

        align-items:center;

        flex-direction:column;

        gap:18px;

    }


    .vehicle-insurance-cta-actions
    .vehicle-insurance-btn,
    .vehicle-insurance-cta-actions
    .vehicle-insurance-btn-line{

        justify-content:center;

    }


    .vehicle-insurance-cost-watermark,
    .vehicle-insurance-checklist-watermark{

        display:none;

    }

}


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

@media (max-width:420px){

    .vehicle-insurance-wrap{

        padding-left:18px;

        padding-right:18px;

    }


    .vehicle-insurance-hero h1{

        font-size:2rem;

    }


    .vehicle-insurance-hero-statement{

        font-size:1rem;

    }


    .vehicle-insurance-btn{

        max-width:100%;

        padding-left:20px;

        padding-right:20px;

    }


    .vehicle-insurance-faq-item summary{

        font-size:0.92rem;

    }


    .vehicle-insurance-sticky-cta a{

        padding-left:8px;

        padding-right:8px;

        font-size:0.78rem;

    }

}