@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&family=Barlow:wght@700;800;900&display=swap');
/* Step-one reference proportions. Later steps retain their original styles. */
.first-step-progress{display:none}
.first-page .funnel{background:#00213b;container-type:inline-size;overflow:hidden}
.first-page header{padding:0 6%;height:15cqw;gap:12%;min-height:0}
/* Reuse the exact gorilla logo artwork and proportions shown on Steps 2–7. */
.first-page .brand{width:49%;flex-shrink:0}
.first-page .brand>span{display:none}
.first-page .step-two-logo{display:block;width:100%;height:auto}
.first-page .header-tagline{display:none}
.first-page .first-step-progress{display:block;width:33%;font:800 clamp(12px,2.6cqw,21px)/1.15 Barlow,Arial,sans-serif}
.first-step-progress strong,.first-step-progress b{display:block}
.first-step-progress strong{color:#008bff}
.step-dots{display:flex;align-items:center;justify-content:space-between;position:relative;margin-top:10px}
.step-dots:before{content:"";height:4px;background:#b4c8d4;position:absolute;left:0;right:0;top:50%;transform:translateY(-50%)}
.step-dots i{position:relative;width:9px;height:9px;background:#b4c8d4;border-radius:50%}
.step-dots i:first-child{width:23px;border-radius:10px;background:#008bff}
.first-page .body{padding:0 5.8%}
.first-page .stage,.first-page .progress,.first-page nav{display:none}
.first-page .hero,.first-page .hero[data-pose=wash]{display:block;position:relative;padding:4.5cqw 0 3cqw;min-height:67cqw;isolation:isolate}
.first-page .hero>div{width:54%;position:relative;z-index:2}
.first-page .hero h1{font-family:Inter,Arial,sans-serif;font-size:8.8cqw;font-weight:900;line-height:.94;letter-spacing:-.35cqw;text-wrap:initial;text-shadow:none}
.first-page .hero-title{display:block}
.first-page .hero h1 mark{display:block;white-space:nowrap;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:900;font-size:8cqw;line-height:1.1;color:#009cff;letter-spacing:-.25cqw;margin-top:.5cqw}
.first-page .hero h1 mark:after{content:"";display:block;height:3px;background:#009cff;transform:rotate(-3deg);margin-top:5px;width:98%;border-radius:50%}
.first-page .hero img,.first-page .hero[data-pose] img{position:absolute;right:-15%;left:auto;top:-1cqw;bottom:auto;margin:0;max-height:none;width:auto;height:68cqw;max-width:none;object-fit:contain;object-position:center;mix-blend-mode:normal;z-index:1}
.first-page #hero-copy{margin:4cqw 0 0;background:none}
.first-page .lock-badge{background:#f12b31;border:0;border-radius:12px 4px 10px 5px;box-shadow:none;transform:rotate(-5deg);padding:2.2cqw 2cqw;font:800 italic 4.6cqw/1 'Barlow Condensed',Impact,sans-serif;white-space:nowrap;letter-spacing:0}
.first-page .first-page-promise{margin:4.7cqw 0 0}
.first-page .quick-promise{font:750 max(16px,3.6cqw)/1.12 Inter,Arial,sans-serif;letter-spacing:-.1cqw}
.first-page .quick-promise span:last-child{display:none}
.first-page [data-step="0"]>h2{font:900 5.6cqw/1.1 Inter,Arial,sans-serif;letter-spacing:-.2cqw;margin:1cqw 0 2.3cqw;white-space:nowrap}
.first-page .size-choices{gap:1.5cqw}
.first-page .size-choice{display:grid;grid-template-columns:5% 26% 34% 35%;gap:0;min-height:60px;padding:1.2cqw 1.7cqw;border:1px solid #d9e2ea;border-radius:9px;box-shadow:0 2px 3px #0002}
.first-page .size-choice i{grid-column:1;grid-row:1;width:clamp(16px,4cqw,28px);height:clamp(16px,4cqw,28px);border:2px solid #071d39;border-radius:50%}
.first-page .size-choice:has(input:checked){border-color:#008bff;background:#eef8ff;box-shadow:0 0 0 2px #008bff}
.first-page .size-choice:has(input:checked) i{background:#008bff;border-color:#008bff}
.first-page .car-art,.first-page .car-art[data-cars]{grid-column:2;grid-row:1;display:flex;flex-wrap:nowrap;gap:1px;width:100%;max-width:none;justify-content:center;align-items:center;padding:0 2px}
.first-page .car-art .car-symbol{width:calc((100% - 4px)/5);height:auto;aspect-ratio:1;max-width:none;min-width:0;flex-shrink:1;fill:currentColor;color:#008bff;stroke:none}
.first-page .car-art[data-cars="1"] .car-symbol{width:60%}
.first-page .car-art[data-cars="2"] .car-symbol{width:46%}
.first-page .car-art[data-cars="3"] .car-symbol{width:31%}
.first-page .car-art[data-cars="4"] .car-symbol{width:24%}
.first-page .size-label{grid-column:3;min-width:0;padding-left:1cqw}
.first-page .size-label strong{font:800 max(12px,2.8cqw)/1.1 Barlow,Arial,sans-serif;white-space:nowrap;letter-spacing:-.05cqw}
.first-page .size-label small{font:400 max(12px,2.5cqw)/1.1 Arial,sans-serif;margin-top:2px}
.first-page .card-payment{grid-column:4;border-left:1px solid #bfd0dc;padding-left:1.5cqw;margin-left:.7cqw;align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-width:0}
.first-page .size-price{display:flex;gap:3px;align-items:baseline;text-align:left;white-space:nowrap;line-height:1}
.first-page .size-price b{font:900 max(25px,5.5cqw)/1 Barlow,Arial,sans-serif;color:#008bff}
.first-page .size-price .total-label,.first-page .size-price .price-prefix{font:800 max(12px,2.5cqw)/1 'Barlow Condensed',Impact,sans-serif;color:#008bff;margin:0;letter-spacing:0}
.first-page .size-total{display:block;margin-top:2px}
.first-page .size-total strong,.first-page .size-total small{font:600 max(12px,2.3cqw)/1.1 'Barlow Condensed',Arial,sans-serif;max-width:none;margin:0;color:#071d39}
.first-page .size-total b,.first-page .size-total strong b{font-weight:800;color:#071d39}
.first-page .size-footnote{font-size:12px;margin:6px 0 0}
.first-page .day-guarantee{display:none}
.first-page .actions{margin-top:2cqw}
.first-page .actions .primary{min-height:12cqw;font:900 7cqw/1 Inter,Arial,sans-serif;padding:14px;border-radius:10px;background:#008bff}
.first-page .primary b{position:static;margin-left:12px}
.first-page .reassurance{font-size:max(14px,3cqw);color:#d9e7f2;margin:2cqw 0 5cqw}
@media(max-width:350px){
.first-page .size-choice{grid-template-columns:6% 24% 33% 37%}
.first-page .size-label strong{white-space:normal}
.first-page .size-price{gap:2px}
.first-page .card-payment{padding-left:5px}
}

/* Keep the quote-first option readable in the existing size-card layout. */
.first-page .quote-price b{font-size:max(21px,4.5cqw)}
.first-page .car-art[data-cars="6"] .car-symbol{width:calc((100% - 5px)/6)}

/* Approved overhead driveway pictures. Preserve the hero and existing card content. */
.first-page .car-art.driveway-photo{padding:0 5px;display:block;height:min(20cqw,125px)}
.first-page .car-art.driveway-photo[data-cars] img{width:100%;height:100%;max-width:none;object-fit:contain;border-radius:6px;display:block}

/* Keep the approved guarantee and its conditions together at every screen size. */
.first-page .hero h1{text-transform:uppercase}
.first-page .hero h1 mark{font-size:7.6cqw;white-space:normal}
.first-page .hero-compensation{display:block;font:800 max(16px,3.6cqw)/1.2 Inter,Arial,sans-serif;letter-spacing:-.08cqw;margin-top:2.3cqw}
.first-page .hero-guarantee-conditions{margin:1cqw 0 0;font:400 max(13px,2.5cqw)/1.45 Arial,sans-serif;color:#c7dce9}
.hero-guarantee-conditions .inline-link{font:inherit;pointer-events:auto;min-height:24px}

.first-page .hero .hero-area-scope{font:600 max(12px,2.3cqw)/1.35 Arial,sans-serif;color:#c7dce9;max-width:95%;margin:2.5cqw 0 0;background:none;padding:0}