/* Optimal Drive — Cinematic Light V3: only the adjustments on top of the unchanged source stylesheets
   (v1-cinematic.css, a2-white-cinematic.css, c2-interactive-white.css, r2-core.css, base.css).
   - Header (V1), hero (A2) and the yellow Business section (V1): no rule here changes them.
   - V1 sections on white: colours moved to the light palette (the V1 colours were made for a dark page).
   - The intermediate type scale (between V1 and A2) for the section headings and the reduced elements.
   - Test drive (V1): only the second banner layer and the "no photograph" note. */

/* Intermediate scale (V1 → A2): section 150 → 110 px padding, heading 84 → 36 px max. */
.v3 { --v3-title: clamp(30px, 3.3vw, 54px); --v3-pad: clamp(72px, 8.5vw, 124px); --v3-head: clamp(30px, 3.8vw, 52px); }
.v3 .a-section { padding: var(--v3-pad) 0; }
.v3 .a-brands { padding-bottom: 0; }
.v3 .a-head, .v3 .a2-head { margin-bottom: var(--v3-head); }
.v3 .a-title.v3-scale, .v3 .a2-title { max-width: 22ch; font: 700 var(--v3-title)/.95 var(--font-display); text-transform: uppercase; letter-spacing: -.005em; }
.v3 .a-section .a-eyebrow, .v3 .a2-eyebrow { margin: 0 0 14px; font: 600 12px/1 var(--font-text); letter-spacing: .28em; text-transform: uppercase; color: var(--od-ink-soft); }
.v3 .a2-eyebrow::first-letter { color: inherit; }
.v3 .a-head-note, .v3 .a2-note { max-width: 360px; font-size: 14px; color: var(--od-ink-soft); }
.v3 .a-lead { font-size: 17px; color: var(--od-ink-soft); }
.v3 .a-section .a-btn-line { border-color: var(--r2-line-strong); color: var(--od-ink); }
.v3 .a-section .a-btn-line:hover { border-color: var(--od-ink); color: var(--od-ink); }
.v3 .a-section .a-btn-yellow:hover { background: var(--od-ink); color: #fff; }

/* 3. Brands (V1) — the same widening panels, ~14% lower; white at rest, the photograph on hover. */
.v3 .a-brand-row { height: min(56vh, 480px); min-height: 360px; border-color: var(--r2-line); }
.v3 .a-brand { background: #fff; border-right-color: var(--r2-line); }
.v3 .a-brand-media { opacity: 0; }
.v3 .a-brand::before { opacity: 0; transition: opacity .9s var(--ease-out); }
.v3 .a-brand.has-media:hover::before, .v3 .a-brand.has-media:focus-within::before { opacity: 1; }
.v3 .a-brand.has-media:hover .a-brand-media, .v3 .a-brand.has-media:focus-within .a-brand-media { opacity: 1; }
.v3 .a-brand.has-media:hover .a-brand-logo img, .v3 .a-brand.has-media:focus-within .a-brand-logo img { filter: brightness(0) invert(1); }
.v3 .a-brand-logo img { transition: transform .9s var(--ease-out), filter .9s var(--ease-out); }
.v3 .a-brand-info p { color: var(--od-ink-soft); }
.v3 .a-brand.has-media:hover .a-brand-info, .v3 .a-brand.has-media:focus-within .a-brand-info { color: #fff; }
.v3 .a-brand.has-media:hover .a-brand-info p, .v3 .a-brand.has-media:focus-within .a-brand-info p { color: rgba(255, 255, 255, .82); }
.v3 .a-brand::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 3px; background: var(--od-yellow); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-out); }
.v3 .a-brand:hover::after, .v3 .a-brand:focus-within::after { transform: scaleX(1); }

/* 4. Smart search (V1) — the sentence; controls keep V1's height, the words are smaller, more room between. */
.v3 .a-count { color: var(--od-ink); font-size: clamp(40px, 4.4vw, 72px); }
.v3 .a-count span { color: var(--od-ink-soft); }
.v3 .a-sentence { gap: 16px 22px; border-top-color: var(--r2-line); font-size: clamp(24px, 2.3vw, 34px); color: var(--od-ink-soft); }
.v3 .a-pick select { min-height: 52px; color: var(--od-ink); background-image: linear-gradient(45deg, transparent 50%, var(--od-ink) 50%), linear-gradient(135deg, var(--od-ink) 50%, transparent 50%); }
.v3 .a-pick select option { background: #fff; color: var(--od-ink); }
.v3 .a-search { flex: 1 1 360px; }
.v3 .a-search input { color: var(--od-ink); border-bottom-color: var(--r2-line-strong); }
.v3 .a-search input::placeholder { color: rgba(17, 22, 27, .45); }
.v3 .a-search input:focus { border-bottom-color: var(--od-ink); }
.v3 .a-reset { color: var(--od-ink-soft); }
.v3 .a-reset:hover { color: var(--od-ink); }
.v3 .a-chip { border-color: var(--r2-line-strong); }
.v3 .a-chip img { filter: none; opacity: .75; }
.v3 .a-chip img.is-fiat { max-height: 28px; }
.v3 .a-chip span { color: var(--od-ink); }
.v3 .a-chip[aria-pressed="true"] { border-color: var(--od-yellow); background: rgba(255, 212, 0, .14); }
.v3 .a-empty { color: var(--od-ink-soft); }
.v3 .a-empty button { color: var(--od-ink); }
/* Posters: light; the copy over a photograph keeps V1's dark gradient. */
.v3 .a-poster { background: #fff; border-color: var(--r2-line); }
.v3 .a-poster h3 { font-size: 26px; }
.v3 .a-poster-media.is-cutout { background: radial-gradient(ellipse at 50% 70%, #fff 0%, #eef0f2 72%); }
.v3 .a-poster-media.is-cutout img { filter: drop-shadow(0 24px 18px rgba(17, 22, 27, .22)); }
.v3 .a-poster-media.is-soon { background: repeating-linear-gradient(135deg, #fff 0 14px, #eef0f2 14px 15px); }
.v3 .a-poster-media.is-soon img { filter: none; opacity: .8; }
.v3 .a-poster:not(.is-photo)::after { display: none; }
.v3 .a-poster:not(.is-photo) .a-poster-copy, .v3 .a-poster:not(.is-photo) .a-poster-cta { color: var(--od-ink); }
.v3 .a-poster:not(.is-photo) .a-poster-brand, .v3 .a-poster:not(.is-photo) .a-poster-meta { color: var(--od-ink-soft); }
.v3 .a-poster.is-photo .a-poster-copy { color: #fff; }
.v3 .a-poster-tag { border-color: rgba(17, 22, 27, .3); background: #fff; color: var(--od-ink); }

/* 5. New arrivals (V1) — larger than A2, calmer than V1. */
.v3 .a-premieres { grid-template-rows: repeat(2, clamp(220px, 28vh, 290px)); }
.v3 .a-premiere { background: #f1f2f4; }
.v3 .a-premiere-copy { color: #fff; }
.v3 .a-premiere h3 { font-size: clamp(22px, 2.1vw, 32px); }

/* 6. Offers (V1) — white; the hovered title is underlined in yellow (yellow text would not read on white). */
.v3 .a-offers { background: #fff; }
.v3 .a-offer-list, .v3 .a-offer { border-color: var(--r2-line); }
.v3 .a-offer { grid-template-columns: 60px 1.2fr 1fr 200px auto; gap: 26px; padding: 24px 0; }
.v3 .a-offer-no { color: var(--od-ink-soft); }
.v3 .a-offer h3 { font-size: clamp(22px, 2vw, 32px); text-decoration: underline transparent; text-decoration-thickness: 3px; text-underline-offset: 5px; transition: text-decoration-color .4s; }
.v3 .a-offer:hover h3 { color: var(--od-ink); text-decoration-color: var(--od-yellow); }
.v3 .a-offer p { color: var(--od-ink-soft); }
.v3 .a-offer-thumb { height: 96px; background: #f1f2f4; }
.v3 .a-offer .a-poster-brand { color: var(--od-ink-soft); }

/* 7. Why (V1) — the photograph behind the steps, veiled in white instead of ink. */
.v3 .a-why-media { opacity: 1; }
.v3 .a-why-media::after { background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .62) 100%); }
.v3 .a-why-steps, .v3 .a-why-steps li { border-color: var(--r2-line); }
.v3 .a-why-steps span { justify-self: start; align-self: start; padding: 0 2px; color: var(--od-ink); font-size: 30px; background: linear-gradient(transparent 60%, var(--od-yellow) 60%); }
.v3 .a-why-steps h3 { font-size: 22px; }
.v3 .a-why-steps p { color: var(--od-ink-soft); }

/* 9. Test drive (V1) — the text stays white on the photograph; the second banner layer; no photograph. */
.v3 .a-drive { color: #fff; background: var(--od-ink); }
.v3 .a-drive-bg { z-index: 0; }
.v3-drive-missing { position: absolute; z-index: 2; left: 32px; bottom: 24px; margin: 0; font-size: 12px; color: var(--od-muted-dark); }

/* 10–11. Services and articles (A2) — the same cards; type raised to the V3 scale. */
.v3 .a2-service h3 { font-size: 24px; }
.v3 .a2-service p, .v3 .a2-article p { font-size: 15px; }
.v3 .a2-service-cta, .v3 .a2-article a.a2-link { font-size: 12px; }
.v3 .a2-article h3 { font-size: 23px; }
.v3 .a2-article time { font-size: 11px; }

/* 12. Contact (C2) */
.v3 .c2-contact { gap: 40px; }
.v3 .c2-lead { font-size: 16px; }

/* 13. Footer (V1 structure) — white, with the real contact data. */
.v3 .a-footer { background: #fff; color: var(--od-ink); border-top-color: var(--r2-line); padding: 64px 0 56px; }
.v3 .a-footer-top, .v3 .a-footer-legal { border-color: var(--r2-line); }
.v3 .a-footer-top p, .v3 .a-footer-legal, .v3 .v3-footer-contact { color: var(--od-ink-soft); }
.v3 .a-footer-cols h3 { color: var(--od-ink); }
.v3 .a-footer-cols nav a { color: var(--od-ink-soft); }
.v3 .a-footer-cols a:hover { color: var(--od-ink); }
.v3 .v3-footer-contact { margin: 0; line-height: 1.9; }
.v3 .v3-footer-contact a { text-decoration: underline; text-decoration-color: var(--od-yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.v3 .a-footer-cols { grid-template-columns: 1.3fr 1fr 1fr 1.3fr; }
.v3 .a-footer-brands img { filter: none; opacity: .7; }

/* Laptops 1366×768 and other short screens */
@media (max-height: 800px) and (min-width: 961px) {
    .v3 .a-premieres { grid-template-rows: repeat(2, 230px); }
}
@media (max-width: 1100px) {
    .v3 .a-offer { grid-template-columns: 50px 1fr 1fr auto; }
}
@media (max-width: 960px) {
    .v3 .a-brand { min-height: 128px; border-bottom-color: var(--r2-line); }
    .v3 .a-brand-info p { display: none; }
    .v3 .a-footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .v3 .a-offer { grid-template-columns: 1fr; gap: 10px; }
    .v3 .a-footer-cols { grid-template-columns: 1fr; }
    .v3-drive-missing { left: 16px; }
}

/* Header (V1) — the only change: with the mobile menu open, the header drops its blur. V1's blur (when scrolled)
   made the fixed full-screen menu stay inside the 70 px header; without the blur the menu covers the screen again. */
.v3 .a-header:has(.a-nav.is-open) { backdrop-filter: none; }
@media (max-width: 960px) { .v3 .a-brand-link { white-space: nowrap; } }