html body{font-family:Montserrat,"Montserrat Fallback",sans-serif}
.display-img{aspect-ratio:512/446}

/* Grid columns used by the bands below. The full Bootstrap grid loads at the end of <body>;
   defining them here keeps above-the-fold bands from jumping into columns late (layout shift). */
.col-md-5,.col-md-7,.col-lg-4,.col-lg-5,.col-lg-7,.col-lg-8{position:relative;width:100%;padding-right:15px;padding-left:15px}
@media (min-width:768px){.col-md-5{flex:0 0 41.666667%;max-width:41.666667%}.col-md-7{flex:0 0 58.333333%;max-width:58.333333%}}
@media (min-width:992px){.col-lg-4{flex:0 0 33.333333%;max-width:33.333333%}.col-lg-5{flex:0 0 41.666667%;max-width:41.666667%}.col-lg-7{flex:0 0 58.333333%;max-width:58.333333%}.col-lg-8{flex:0 0 66.666667%;max-width:66.666667%}}

/* Components shared by the home and car detail pages: skewed buttons, promo band, sales band, testimonials. */

/* ---- skewed button: the site's red label shape (see .cat-label) used as the primary action ---- */
.skew-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 30px 10px 22px;border:0;background:#cf4444;color:#fff;font-family:inherit;font-weight:700;font-size:1.05rem;line-height:1.2;text-decoration:none;cursor:pointer;transform:skewX(-18deg);box-shadow:5px 4px 0 #000;transition:background-color .15s,box-shadow .15s,translate .15s}
.skew-btn>span{display:inline-flex;align-items:center;gap:10px;transform:skewX(18deg)}
.skew-btn:hover{background:#a83232;color:#fff;text-decoration:none;box-shadow:2px 1px 0 #000;translate:3px 3px}
.skew-btn:focus-visible{outline:3px solid #343a40;outline-offset:4px}
.skew-btn:disabled{background:#ced4da;color:#6c757d;box-shadow:none;translate:none;cursor:default}
.skew-btn-icon{width:24px;height:24px;filter:brightness(0) invert(1)}
.skew-btn-outline{background:transparent;box-shadow:inset 0 0 0 2px #fff}
.skew-btn-outline:hover{background:#fff;color:#343a40;box-shadow:inset 0 0 0 2px #fff;translate:none}
.skew-btn-icon-only{width:52px;min-height:44px;padding:0}

/* ---- promo band (home: poster + terms, detail: DP panel + terms) ---- */
.promo-band{background:#343a40;color:#fff}
.promo-band .skew-btn:focus-visible,.sales-band .skew-btn:focus-visible,.promo-cta-alt:focus-visible,.sales-social a:focus-visible{outline-color:#fff}
.promo-band .promo-band-poster{padding:16px 16px 0}
.promo-band .promo-band-poster img{display:block;width:100%;max-width:420px;height:auto;aspect-ratio:1;object-fit:cover;margin:0 auto}
.promo-band .promo-band-body{padding:24px 20px 32px}
.promo-band h2{font-weight:700;font-size:clamp(1.4rem,1.05rem + 1.4vw,2.15rem);line-height:1.15;letter-spacing:-.01em;margin:0 0 18px;max-width:24ch}
.promo-figures{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.promo-figures li{padding:14px 12px 14px 0;border-top:1px solid rgba(255,255,255,.16)}
.promo-figure{display:block;white-space:nowrap;font-weight:700;font-size:clamp(2rem,1.5rem + 1.6vw,2.9rem);line-height:1;letter-spacing:-.02em;color:#ff7a7a;font-variant-numeric:tabular-nums}
.promo-figure-label{display:block;margin-top:6px;font-size:.9rem;line-height:1.3;color:#e9ecef}
.promo-extras{list-style:none;padding:14px 0 0;margin:0;border-top:1px solid rgba(255,255,255,.16);display:flex;flex-wrap:wrap;gap:6px 22px;font-weight:600;font-size:.95rem}
.promo-extras li::before{content:"";display:inline-block;width:9px;height:9px;margin-right:9px;background:#cf4444;transform:skewX(-18deg);vertical-align:1px}
.promo-cta{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.promo-cta-alt{color:#fff;font-size:.95rem;text-decoration:underline;text-underline-offset:3px}
.promo-cta-alt:hover{color:#ff7a7a}

/* detail page: the car's DP is the loud element, a red panel cut on the same -18deg slant */
.promo-band-car{margin-top:8px;margin-bottom:24px}
.promo-band .promo-dp{container-type:inline-size;background:#cf4444;color:#fff;padding:28px 24px;display:flex;flex-direction:column;justify-content:center}
.promo-band .promo-dp p{margin:0}
.promo-dp-label{font-weight:600;font-size:1rem}
.promo-dp-figure{margin-top:6px!important;font-weight:700;font-size:min(4rem,14cqi);line-height:1.05;letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.promo-dp-cur{font-size:.45em;margin-right:.25em;vertical-align:.85em;letter-spacing:0}
.promo-dp-model{margin-top:12px!important;font-size:.95rem}

/* ---- sales band ---- */
.sales-band{background:#343a40;color:#fff}
.sales-band .sales-body{padding:32px 20px 28px}
.sales-name{margin:0;font-weight:700;font-size:clamp(2rem,1.3rem + 2.6vw,3.2rem);line-height:1.05;letter-spacing:-.02em}
.sales-role{margin:8px 0 20px;color:#ff7a7a;font-weight:600;font-size:.95rem}
.sales-lead{margin:0 0 8px;max-width:28ch;font-size:clamp(1.2rem,1rem + .8vw,1.55rem);line-height:1.3}
.sales-note{margin:0 0 24px;max-width:46ch;color:#ced4da;line-height:1.5}
.sales-actions{display:flex;flex-wrap:wrap;gap:14px 20px}
.sales-social{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:4px 24px}
.sales-social a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:#fff;text-decoration:none}
.sales-social a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.sales-social img{width:26px;height:26px}
.sales-band .sales-photo{padding:0 32px 40px}
.sales-band .sales-photo img{display:block;width:100%;max-width:360px;height:auto;margin:0 auto;box-shadow:10px 10px 0 #cf4444}

/* ---- testimonials ---- */
.testi-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px;padding-right:8px}
.testi-head h2{margin:0}
.testi-controls{display:flex;gap:14px;flex:none}
.testi-scroller:focus-visible{outline:3px solid #cf4444;outline-offset:2px}
.testi-scroller .card-title{font-size:1.5rem}

/* ---- floating WhatsApp ---- */
.floating-container,.floating-container:hover{text-decoration:none}
.floating-container:focus-visible{outline:3px solid #cf4444;outline-offset:3px}

@media (max-width:575.98px){
	.floating-container .floating-label{display:none}
	.sales-actions{padding:0 10px}
	.sales-actions .skew-btn{flex:1 1 100%}
}
@media (min-width:768px){
	.promo-band .promo-band-poster{padding:0;align-self:center}
	.promo-band .promo-band-poster img{max-width:none}
	.promo-band .promo-band-body{padding:28px 32px 32px}
	.promo-band .promo-dp{padding:32px 32px}
	.sales-band .sales-body{padding:44px 32px}
	.sales-band .sales-photo{padding:44px 40px 44px 0;align-self:center}
}
@media (min-width:992px){
	.promo-band .promo-dp{padding:32px 56px 32px 28px;clip-path:polygon(0 0,100% 0,calc(100% - 36px) 100%,0 100%)}
}
@media (min-width:1200px){
	.promo-band .promo-band-body{padding:40px 48px}
	/* the home band has room for one row of four; a car band with the DP panel beside it is narrower and stays 2x2 */
	.promo-band:not(.promo-band-has-dp) .promo-figures{grid-template-columns:repeat(4,minmax(0,1fr))}
	.promo-band:not(.promo-band-has-dp) .promo-figures li{padding:16px 16px 16px 0}
	.promo-band:not(.promo-band-has-dp) .promo-figures li+li{padding-left:16px;border-left:1px solid rgba(255,255,255,.16)}
	.promo-band .promo-dp{padding:40px 60px 40px 40px}
	.sales-band .sales-body{padding:56px 48px}
}
