/* ==========================================================
   REVLO GARAGE™ — PUBLIC PRODUCT PAGE
   File: assets/css/garage-pub.css
   Brand direction: Garage Yellow + Black + White
   ========================================================== */

:root{
    --garage-yellow:#F5B400;
    --garage-yellow-dark:#D99A00;
    --garage-yellow-soft:#FFF7D9;
    --garage-yellow-pale:#FFFBED;

    --garage-black:#171717;
    --garage-heading:#181818;
    --garage-text:#5F5F5F;
    --garage-muted:#858585;

    --garage-white:#FFFFFF;
    --garage-offwhite:#FAFAF8;
    --garage-line:#E9E9E5;

    --garage-green:#168A4A;

    --garage-shadow-sm:0 12px 30px rgba(0,0,0,.05);
    --garage-shadow:0 25px 60px rgba(0,0,0,.08);
    --garage-shadow-lg:0 40px 90px rgba(0,0,0,.10);

    --garage-radius:24px;
    --garage-radius-lg:30px;

    --garage-transition:.3s ease;
}


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

.garage-hero,
.garage-mission,
.garage-capabilities,
.garage-showcase,
.garage-intelligence,
.garage-flow,
.garage-audience,
.garage-final-cta{
    position:relative;
    overflow:hidden;
}

.garage-hero *,
.garage-mission *,
.garage-capabilities *,
.garage-showcase *,
.garage-intelligence *,
.garage-flow *,
.garage-audience *,
.garage-final-cta *{
    box-sizing:border-box;
}

.garage-hero h1,
.garage-hero h2,
.garage-hero h3,
.garage-mission h2,
.garage-mission h3,
.garage-capabilities h2,
.garage-capabilities h3,
.garage-showcase h2,
.garage-showcase h3,
.garage-intelligence h2,
.garage-intelligence h3,
.garage-flow h2,
.garage-flow h3,
.garage-audience h2,
.garage-audience h3,
.garage-final-cta h2{
    color:var(--garage-heading);
}

.garage-hero p,
.garage-mission p,
.garage-capabilities p,
.garage-showcase p,
.garage-intelligence p,
.garage-flow p,
.garage-audience p,
.garage-final-cta p{
    color:var(--garage-text);
}

.garage-section-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 17px;

    background:var(--garage-yellow-soft);
    color:#9A7100;

    border:1px solid rgba(245,180,0,.22);
    border-radius:999px;

    font-size:.78rem;
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;

    margin-bottom:22px;
}

.garage-section-header{
    max-width:820px;
    margin:0 auto 68px;
    text-align:center;
}

.garage-section-header h2{
    margin:0 0 22px;
    font-size:3rem;
    line-height:1.15;
    font-weight:800;
    letter-spacing:-.025em;
}

.garage-section-header h2 span{
    color:var(--garage-yellow-dark);
}

.garage-section-header p{
    margin:0 auto;
    max-width:760px;
    font-size:1.06rem;
    line-height:1.85;
}


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

.garage-hero{
    padding:118px 0 105px;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(245,180,0,.13),
            transparent 32%
        ),
        linear-gradient(
            to bottom,
            #FFFFFF 0%,
            #FFFDF7 100%
        );
}

.garage-hero::before{
    content:"";
    position:absolute;
    inset:0;

    background-image:
        linear-gradient(rgba(0,0,0,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(0,0,0,.025) 1px,transparent 1px);

    background-size:70px 70px;
    opacity:.55;
    pointer-events:none;
}

.garage-hero::after{
    content:"";
    position:absolute;

    width:420px;
    height:420px;

    right:-180px;
    bottom:-220px;

    border-radius:50%;

    background:rgba(245,180,0,.07);
    filter:blur(5px);

    pointer-events:none;
}

.garage-hero .container{
    position:relative;
    z-index:2;
}

.garage-hero-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:75px;
    align-items:center;
}


/* HERO CONTENT */

.garage-content{
    max-width:680px;
}

.garage-badge{
    display:inline-flex;
    align-items:center;

    padding:10px 18px;

    background:var(--garage-yellow-soft);
    color:#916B00;

    border:1px solid rgba(245,180,0,.25);
    border-radius:999px;

    font-size:.82rem;
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;

    margin-bottom:25px;
}

.garage-content h1{
    margin:0 0 27px;

    font-size:4rem;
    line-height:1.06;
    letter-spacing:-.045em;
    font-weight:800;
}

.garage-content h1 span{
    display:block;
    color:var(--garage-yellow-dark);
}

.garage-content > p{
    max-width:630px;
    margin:0 0 38px;

    font-size:1.14rem;
    line-height:1.85;
}

.garage-buttons{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}

.garage-buttons .btn,
.garage-cta-buttons .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:52px;
    padding:0 25px;

    border-radius:12px;
    text-decoration:none;

    font-size:.95rem;
    font-weight:700;

    transition:
        transform var(--garage-transition),
        box-shadow var(--garage-transition),
        background var(--garage-transition),
        color var(--garage-transition),
        border-color var(--garage-transition);
}

.garage-buttons .btn-primary,
.garage-cta-buttons .btn-primary{
    background:var(--garage-yellow);
    color:var(--garage-black);
    border:1px solid var(--garage-yellow);
    box-shadow:0 12px 28px rgba(245,180,0,.22);
}

.garage-buttons .btn-primary:hover,
.garage-cta-buttons .btn-primary:hover{
    background:#E7A800;
    border-color:#E7A800;
    transform:translateY(-3px);
    box-shadow:0 18px 35px rgba(245,180,0,.30);
}

.garage-buttons .btn-outline{
    background:#fff;
    color:var(--garage-black);
    border:1px solid #D9D9D4;
}

.garage-buttons .btn-outline:hover{
    border-color:var(--garage-yellow);
    background:var(--garage-yellow-pale);
    transform:translateY(-3px);
}


/* HERO PREVIEW */

.garage-preview{
    position:relative;

    padding:32px;

    background:#fff;

    border:1px solid rgba(0,0,0,.07);
    border-radius:30px;

    box-shadow:var(--garage-shadow-lg);

    overflow:hidden;
}

.garage-preview::before{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    top:-180px;
    right:-130px;

    border-radius:50%;
    background:rgba(245,180,0,.12);

    pointer-events:none;
}

.garage-preview-top{
    position:relative;
    z-index:1;

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

    gap:20px;
    margin-bottom:26px;
}

.garage-preview-top small{
    display:block;
    margin-bottom:6px;

    color:#999;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.09em;
}

.garage-preview-top h3{
    margin:0;
    font-size:1.35rem;
    font-weight:750;
}

.garage-live{
    display:inline-flex;
    align-items:center;
    gap:7px;

    padding:7px 12px;

    border-radius:999px;

    background:#EFFAF4;
    color:var(--garage-green);

    font-size:.75rem;
    font-weight:750;
}

.garage-live i{
    font-size:.42rem;
}


.garage-vehicle-card{
    position:relative;
    z-index:1;

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

    padding:22px;

    border:1px solid #ECECE7;
    border-radius:20px;

    background:linear-gradient(135deg,#FFFFFF,#FAFAF6);
}

.garage-vehicle-icon{
    width:64px;
    height:64px;

    flex:0 0 64px;

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

    border-radius:18px;

    background:var(--garage-yellow-soft);
    color:#A57900;

    font-size:1.55rem;
}

.garage-vehicle-name small{
    display:block;
    margin-bottom:5px;

    color:#999;
    font-size:.7rem;
    font-weight:800;
    letter-spacing:.08em;
}

.garage-vehicle-name h3{
    margin:0 0 4px;
    font-size:1.16rem;
}

.garage-vehicle-name span{
    color:#888;
    font-size:.85rem;
}


.garage-preview-stats{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;

    margin-top:16px;
}

.garage-preview-stats > div{
    padding:18px;

    background:#FAFAFA;
    border:1px solid #EEEEEA;
    border-radius:17px;

    transition:var(--garage-transition);
}

.garage-preview-stats > div:hover{
    transform:translateY(-3px);
    border-color:rgba(245,180,0,.55);
    box-shadow:var(--garage-shadow-sm);
}

.garage-preview-stats small{
    display:block;
    margin-bottom:8px;

    color:#909090;
    font-size:.75rem;
}

.garage-preview-stats strong{
    color:var(--garage-heading);
    font-size:1.08rem;
}

.garage-preview-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-top:18px;
    padding:17px 4px 0;

    border-top:1px solid #EEEEEA;

    color:#777;
    font-size:.82rem;
    font-weight:600;
}

.garage-preview-footer span{
    display:flex;
    align-items:center;
    gap:8px;
}

.garage-preview-footer i:first-child{
    color:var(--garage-yellow-dark);
}

.garage-preview-footer > i{
    color:#AAA;
}


/* ==========================================================
   MISSION
========================================================== */

.garage-mission{
    padding:112px 0;
    background:#fff;
}

.garage-mission-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:26px;
}

.garage-mission-card{
    padding:34px;

    background:#fff;

    border:1px solid var(--garage-line);
    border-radius:23px;

    transition:
        transform var(--garage-transition),
        box-shadow var(--garage-transition),
        border-color var(--garage-transition);
}

.garage-mission-card:hover{
    transform:translateY(-7px);
    border-color:rgba(245,180,0,.55);
    box-shadow:var(--garage-shadow);
}

.garage-mission-icon{
    width:64px;
    height:64px;

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

    margin-bottom:22px;

    border-radius:17px;

    background:var(--garage-yellow-soft);
    color:#A27400;

    font-size:1.35rem;
}

.garage-mission-card h3{
    margin:0 0 13px;
    font-size:1.32rem;
}

.garage-mission-card p{
    margin:0;
    line-height:1.75;
    font-size:.96rem;
}


/* ==========================================================
   CAPABILITIES
========================================================== */

.garage-capabilities{
    padding:112px 0;
    background:var(--garage-offwhite);
}

.garage-capability-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px;
}

.garage-capability-card{
    padding:34px;

    background:#fff;

    border:1px solid var(--garage-line);
    border-radius:25px;

    transition:
        transform var(--garage-transition),
        box-shadow var(--garage-transition),
        border-color var(--garage-transition);
}

.garage-capability-card:hover{
    transform:translateY(-7px);
    border-color:rgba(245,180,0,.6);
    box-shadow:var(--garage-shadow);
}

.garage-capability-top{
    display:flex;
    align-items:center;
    gap:14px;

    margin-bottom:22px;
}

.garage-capability-top i{
    width:57px;
    height:57px;

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

    border-radius:16px;

    background:var(--garage-yellow-soft);
    color:#9A7100;

    font-size:1.25rem;
}

.garage-capability-top span{
    color:#999;
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.1em;
}

.garage-capability-card h3{
    margin:0 0 20px;
    font-size:1.5rem;
}

.garage-capability-card ul{
    list-style:none;
    padding:0;
    margin:0;
}

.garage-capability-card li{
    position:relative;

    padding:12px 0 12px 27px;

    border-bottom:1px solid #F0F0ED;

    color:#5F5F5F;
    font-size:.94rem;
}

.garage-capability-card li:last-child{
    border-bottom:0;
}

.garage-capability-card li::before{
    content:"✓";

    position:absolute;
    left:0;
    top:11px;

    color:#9C7500;
    font-weight:800;
}


/* ==========================================================
   VEHICLE SHOWCASE
========================================================== */

.garage-showcase{
    padding:120px 0;
    background:#fff;
}

.garage-showcase-grid{
    display:grid;
    grid-template-columns:.92fr 1.08fr;
    gap:70px;
    align-items:center;
}

.garage-showcase-content{
    max-width:590px;
}

.garage-showcase-content h2{
    margin:0 0 24px;

    font-size:3rem;
    line-height:1.15;
    letter-spacing:-.025em;
}

.garage-showcase-content h2 span{
    color:var(--garage-yellow-dark);
}

.garage-showcase-content > p{
    margin:0 0 32px;
    line-height:1.85;
}

.garage-showcase-list{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.garage-show-item{
    display:flex;
    align-items:center;
    gap:12px;

    color:#3E3E3E;
    font-weight:650;
    font-size:.94rem;
}

.garage-show-item i{
    width:22px;
    height:22px;

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

    border-radius:50%;

    background:var(--garage-yellow-soft);
    color:#977000;

    font-size:.65rem;
}


/* PRODUCT MOCKUP */

.garage-dashboard{
    padding:31px;

    background:#fff;

    border:1px solid #E8E8E3;
    border-radius:28px;

    box-shadow:var(--garage-shadow-lg);
}

.garage-dashboard-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;
    margin-bottom:27px;
}

.garage-dashboard-header small{
    display:block;
    margin-bottom:5px;

    color:#999;
    font-size:.7rem;
    font-weight:800;
    letter-spacing:.08em;
}

.garage-dashboard-header h3{
    margin:0;
    font-size:1.28rem;
}

.garage-status{
    display:inline-flex;
    align-items:center;
    gap:7px;

    padding:7px 12px;

    border-radius:999px;

    background:#EFFAF4;
    color:var(--garage-green);

    font-size:.75rem;
    font-weight:750;
}

.garage-status i{
    font-size:.42rem;
}


.garage-dashboard-metrics{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:13px;
}

.garage-dashboard-metrics > div{
    padding:18px;

    background:#FAFAF8;
    border:1px solid #EEEEEA;
    border-radius:17px;
}

.garage-dashboard-metrics small{
    display:block;
    margin-bottom:8px;

    color:#8D8D8D;
    font-size:.74rem;
}

.garage-dashboard-metrics strong{
    font-size:1.02rem;
}


.garage-dashboard-cost{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    margin-top:14px;
    padding:20px;

    border-radius:19px;

    background:
        linear-gradient(
            135deg,
            #FFF9E3,
            #FFFDF6
        );

    border:1px solid rgba(245,180,0,.28);
}

.garage-dashboard-cost small{
    display:block;
    margin-bottom:7px;
    color:#8D8D8D;
    font-size:.74rem;
}

.garage-dashboard-cost strong{
    font-size:1.55rem;
    color:var(--garage-heading);
}

.garage-dashboard-cost > span{
    display:flex;
    align-items:center;
    gap:7px;

    color:#9B7300;
    font-size:.78rem;
    font-weight:800;
}

.garage-dashboard-timeline{
    margin-top:22px;
}

.garage-timeline-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding-bottom:13px;

    border-bottom:1px solid #ECECE8;
}

.garage-timeline-heading strong{
    font-size:.92rem;
}

.garage-timeline-heading span{
    color:#A17A00;
    font-size:.76rem;
    font-weight:700;
}

.garage-timeline-item{
    position:relative;

    display:flex;
    gap:14px;

    padding:15px 0;

    border-bottom:1px solid #F1F1EF;
}

.garage-timeline-item:last-child{
    border-bottom:0;
    padding-bottom:0;
}

.timeline-dot{
    width:9px;
    height:9px;

    flex:0 0 9px;

    margin-top:5px;

    border-radius:50%;
    background:var(--garage-yellow);
    box-shadow:0 0 0 5px var(--garage-yellow-soft);
}

.garage-timeline-item strong{
    display:block;
    margin-bottom:3px;
    font-size:.83rem;
}

.garage-timeline-item small{
    color:#929292;
    font-size:.72rem;
}


/* ==========================================================
   OWNERSHIP INTELLIGENCE
========================================================== */

.garage-intelligence{
    padding:115px 0;
    background:var(--garage-offwhite);
}

.garage-intelligence-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:60px;
    align-items:center;
}


/* TCO CARD */

.garage-tco-card{
    padding:34px;

    background:#fff;

    border:1px solid #E9E9E4;
    border-radius:28px;

    box-shadow:var(--garage-shadow);
}

.garage-tco-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:20px;

    margin-bottom:28px;
}

.garage-tco-header small{
    display:block;
    margin-bottom:6px;

    color:#999;
    font-size:.7rem;
    font-weight:800;
    letter-spacing:.09em;
}

.garage-tco-header h3{
    margin:0;
    font-size:1.35rem;
}

.garage-tco-header > i{
    width:50px;
    height:50px;

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

    border-radius:15px;

    background:var(--garage-yellow-soft);
    color:#9C7500;
}

.garage-tco-value{
    padding:23px;

    border-radius:20px;

    background:#FAFAF8;
    border:1px solid #EEEEEA;
}

.garage-tco-value small{
    display:block;
    margin-bottom:8px;
    color:#888;
    font-size:.75rem;
}

.garage-tco-value strong{
    display:block;
    font-size:2.35rem;
    letter-spacing:-.02em;
}


.garage-tco-bars{
    display:flex;
    flex-direction:column;
    gap:19px;

    margin-top:27px;
}

.tco-bar-row{
    display:grid;
    grid-template-columns:130px 1fr;
    align-items:center;
    gap:16px;
}

.tco-bar-row > span{
    color:#626262;
    font-size:.79rem;
    font-weight:650;
}

.tco-bar-row > div{
    height:8px;
    overflow:hidden;

    border-radius:99px;
    background:#ECECE8;
}

.tco-bar-row i{
    display:block;
    height:100%;

    border-radius:inherit;

    background:linear-gradient(
        90deg,
        #F5B400,
        #FFD75B
    );
}

.garage-demo-note{
    margin:22px 0 0;
    color:#999 !important;
    font-size:.72rem;
}


/* INSIGHTS */

.garage-insight-list{
    display:flex;
    flex-direction:column;
    gap:19px;
}

.garage-insight-item{
    display:flex;
    align-items:flex-start;
    gap:19px;

    padding:23px;

    background:#fff;

    border:1px solid #EAEAE5;
    border-radius:20px;

    transition:var(--garage-transition);
}

.garage-insight-item:hover{
    transform:translateX(5px);
    border-color:rgba(245,180,0,.55);
    box-shadow:var(--garage-shadow-sm);
}

.garage-insight-item > i{
    width:52px;
    height:52px;

    flex:0 0 52px;

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

    border-radius:15px;

    background:var(--garage-yellow-soft);
    color:#9C7500;
}

.garage-insight-item h3{
    margin:2px 0 8px;
    font-size:1.1rem;
}

.garage-insight-item p{
    margin:0;
    font-size:.9rem;
    line-height:1.7;
}


/* ==========================================================
   FLOW
========================================================== */

.garage-flow{
    padding:115px 0;
    background:#fff;
}

.garage-flow-grid{
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr;
    align-items:stretch;
    gap:20px;
}

.garage-flow-step{
    display:flex;
    flex-direction:column;
    gap:20px;

    padding:30px;

    border:1px solid #E8E8E4;
    border-radius:22px;

    background:#fff;

    transition:var(--garage-transition);
}

.garage-flow-step:hover{
    transform:translateY(-6px);
    border-color:rgba(245,180,0,.55);
    box-shadow:var(--garage-shadow);
}

.garage-flow-number{
    width:52px;
    height:52px;

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

    border-radius:15px;

    background:var(--garage-yellow);
    color:#1B1B1B;

    font-size:.85rem;
    font-weight:850;
}

.garage-flow-step h3{
    margin:0 0 10px;
    font-size:1.25rem;
}

.garage-flow-step p{
    margin:0;
    font-size:.9rem;
    line-height:1.7;
}

.garage-flow-arrow{
    display:flex;
    align-items:center;
    justify-content:center;

    color:#B18A12;
    font-size:1.05rem;
}


/* ==========================================================
   AUDIENCE
========================================================== */

.garage-audience{
    padding:112px 0;
    background:var(--garage-offwhite);
}

.garage-audience-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
}

.garage-audience-card{
    padding:32px;

    background:#fff;

    border:1px solid #E8E8E3;
    border-radius:23px;

    transition:var(--garage-transition);
}

.garage-audience-card:hover{
    transform:translateY(-7px);
    border-color:rgba(245,180,0,.55);
    box-shadow:var(--garage-shadow);
}

.garage-audience-icon{
    width:62px;
    height:62px;

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

    margin-bottom:21px;

    border-radius:17px;

    background:var(--garage-yellow-soft);
    color:#9C7500;

    font-size:1.25rem;
}

.garage-audience-card h3{
    margin:0 0 12px;
    font-size:1.3rem;
}

.garage-audience-card p{
    margin:0;
    line-height:1.75;
    font-size:.93rem;
}


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

.garage-final-cta{
    padding:115px 0;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(255,255,255,.18),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #F5B400 0%,
            #FFD75B 100%
        );
}

.garage-cta-box{
    max-width:850px;
    margin:0 auto;

    text-align:center;
}

.garage-final-cta .garage-section-tag{
    background:rgba(255,255,255,.24);
    color:#3A2A00;
    border-color:rgba(255,255,255,.35);
}

.garage-final-cta h2{
    margin:20px 0 23px;

    color:#171717;

    font-size:3.25rem;
    line-height:1.15;
    letter-spacing:-.03em;
}

.garage-final-cta h2 span{
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,.08);
}

.garage-final-cta p{
    max-width:700px;
    margin:0 auto;

    color:#3F330F;

    font-size:1.08rem;
    line-height:1.85;
}

.garage-cta-buttons{
    display:flex;
    justify-content:center;
    align-items:center;

    gap:16px;
    flex-wrap:wrap;

    margin-top:38px;
}

.garage-cta-buttons .btn-primary{
    background:#171717;
    color:#fff;
    border-color:#171717;
    box-shadow:0 15px 35px rgba(0,0,0,.16);
}

.garage-cta-buttons .btn-primary:hover{
    background:#000;
    border-color:#000;
    transform:translateY(-3px);
}

.garage-cta-buttons .btn-outline{
    background:#fff;
    color:#171717;
    border:1px solid #fff;
}

.garage-cta-buttons .btn-outline:hover{
    background:#F5F5F5;
    transform:translateY(-3px);
}


/* ==========================================================
   RESPONSIVE — 1100px
========================================================== */

@media(max-width:1100px){

    .garage-hero-grid{
        gap:50px;
    }

    .garage-content h1{
        font-size:3.45rem;
    }

    .garage-section-header h2,
    .garage-showcase-content h2{
        font-size:2.65rem;
    }

    .garage-showcase-grid{
        gap:45px;
    }

    .garage-intelligence-grid{
        gap:40px;
    }

}


/* ==========================================================
   RESPONSIVE — 991px
========================================================== */

@media(max-width:991px){

    .garage-hero{
        padding:90px 0 80px;
    }

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

    .garage-content{
        max-width:760px;
        margin:0 auto;
        text-align:center;
    }

    .garage-content > p{
        margin-left:auto;
        margin-right:auto;
    }

    .garage-buttons{
        justify-content:center;
    }

    .garage-preview{
        width:100%;
        max-width:650px;
        margin:0 auto;
    }

    .garage-mission-grid,
    .garage-capability-grid{
        grid-template-columns:1fr 1fr;
    }

    .garage-showcase-grid,
    .garage-intelligence-grid{
        grid-template-columns:1fr;
    }

    .garage-showcase-content{
        max-width:760px;
        margin:0 auto;
        text-align:center;
    }

    .garage-showcase-list{
        max-width:520px;
        margin:0 auto;
        text-align:left;
    }

    .garage-dashboard{
        width:100%;
        max-width:700px;
        margin:0 auto;
    }

    .garage-intelligence-grid{
        max-width:750px;
        margin:0 auto;
    }

    .garage-flow-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .garage-flow-arrow{
        min-height:20px;
        transform:rotate(90deg);
    }

    .garage-audience-grid{
        grid-template-columns:1fr 1fr;
    }

}


/* ==========================================================
   RESPONSIVE — 768px
========================================================== */

@media(max-width:768px){

    .garage-mission,
    .garage-capabilities,
    .garage-showcase,
    .garage-intelligence,
    .garage-flow,
    .garage-audience,
    .garage-final-cta{
        padding:82px 0;
    }

    .garage-section-header{
        margin-bottom:48px;
    }

    .garage-section-header h2,
    .garage-showcase-content h2{
        font-size:2.25rem;
    }

    .garage-section-header p{
        font-size:1rem;
        line-height:1.75;
    }

    .garage-content h1{
        font-size:2.75rem;
    }

    .garage-content > p{
        font-size:1rem;
    }

    .garage-preview{
        padding:25px;
        border-radius:24px;
    }

    .garage-mission-grid,
    .garage-capability-grid,
    .garage-audience-grid{
        grid-template-columns:1fr;
    }

    .garage-mission-card,
    .garage-capability-card,
    .garage-audience-card{
        padding:27px;
    }

    .garage-dashboard{
        padding:25px;
        border-radius:24px;
    }

    .garage-dashboard-cost strong{
        font-size:1.35rem;
    }

    .garage-tco-card{
        padding:26px;
    }

    .garage-tco-value strong{
        font-size:2rem;
    }

    .garage-final-cta h2{
        font-size:2.45rem;
    }

    .garage-final-cta p{
        font-size:1rem;
    }

}


/* ==========================================================
   RESPONSIVE — 560px
========================================================== */

@media(max-width:560px){

    .garage-hero{
        padding:76px 0 68px;
    }

    .garage-content h1{
        font-size:2.25rem;
        line-height:1.1;
    }

    .garage-badge{
        font-size:.72rem;
        padding:9px 14px;
    }

    .garage-buttons{
        flex-direction:column;
        width:100%;
    }

    .garage-buttons .btn{
        width:100%;
    }

    .garage-preview{
        padding:20px;
    }

    .garage-preview-top{
        align-items:flex-start;
        flex-direction:column;
        gap:12px;
    }

    .garage-vehicle-card{
        padding:17px;
    }

    .garage-vehicle-icon{
        width:54px;
        height:54px;
        flex-basis:54px;
        border-radius:15px;
        font-size:1.25rem;
    }

    .garage-vehicle-name h3{
        font-size:1rem;
    }

    .garage-preview-stats{
        grid-template-columns:1fr;
    }

    .garage-section-tag{
        font-size:.7rem;
        padding:7px 13px;
    }

    .garage-section-header h2,
    .garage-showcase-content h2{
        font-size:1.95rem;
    }

    .garage-showcase-content > p{
        font-size:.95rem;
    }

    .garage-dashboard-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .garage-dashboard-metrics{
        grid-template-columns:1fr;
    }

    .garage-dashboard-cost{
        align-items:flex-start;
        flex-direction:column;
    }

    .garage-tco-bars{
        gap:16px;
    }

    .tco-bar-row{
        grid-template-columns:1fr;
        gap:8px;
    }

    .garage-insight-item{
        padding:19px;
    }

    .garage-flow-step{
        padding:25px;
    }

    .garage-final-cta h2{
        font-size:2rem;
    }

    .garage-cta-buttons{
        flex-direction:column;
    }

    .garage-cta-buttons .btn{
        width:100%;
    }

}


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

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

    .garage-hero *,
    .garage-mission *,
    .garage-capabilities *,
    .garage-showcase *,
    .garage-intelligence *,
    .garage-flow *,
    .garage-audience *,
    .garage-final-cta *{
        scroll-behavior:auto !important;
        transition:none !important;
        animation:none !important;
    }

}