/* Optimal Drive — homepage concepts, round 2: shared base (A2, B2, C2), on top of round 1's base.css (fonts, palette).
   Pure white site; dark tones only on photographs, videos and their local overlays. */
:root { --r2-white: #ffffff; --r2-ink: var(--od-ink); --r2-soft: var(--od-ink-soft); --r2-line: rgba(17, 22, 27, .1); --r2-line-strong: rgba(17, 22, 27, .18); }
body.r2 { background: #fff; color: var(--od-ink); font-size: 15px; }
.r2-shell { width: min(1240px, 100% - 64px); margin-inline: auto; }

/* The hero slider mechanics (each concept styles the frame and the controls). */
.r2-hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; isolation: isolate; color: #fff; background: var(--od-ink); }
.r2-slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity 1.1s var(--ease-in-out), visibility 0s linear 1.1s; }
.r2-slide.is-active { opacity: 1; visibility: visible; transition: opacity 1.1s var(--ease-in-out), visibility 0s; z-index: 1; }
.r2-slide picture, .r2-slide img, .r2-slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.r2-slide video { display: block; }
.r2-slide.is-poster video { display: none; }
.r2-slide:not(.is-poster) .r2-video-poster { display: none; }
.r2-video-flag { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: rgba(17, 22, 27, .55); backdrop-filter: blur(6px); font: 600 11px/1 var(--font-text); letter-spacing: .04em; color: #fff; }
.r2-video-flag::before { content: ""; width: 0; height: 0; border-left: 7px solid var(--od-yellow); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
@media (max-width: 640px) { .r2-slide { --pos: var(--pos-m, 50% 50%); } }

/* Test drive background layers (cross-fade). */
[data-r2-drive-layer] { opacity: 0; transition: opacity .9s var(--ease-in-out); }
[data-r2-drive-layer].is-on { opacity: 1; }

/* The mobile menu (shared mechanics). */
[data-r2-menu] { visibility: hidden; opacity: 0; transition: opacity .35s var(--ease-out), visibility .35s; }
[data-r2-menu].is-open { visibility: visible; opacity: 1; }

/* Screen reader announcements. */
.r2-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
    .r2-slide, .r2-slide.is-active, [data-r2-drive-layer] { transition: none; }
}

/* The demo concept switcher appears once the hero is passed: it must never cover the slider's controls. */
.r2 .concept-bar { opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); }
.r2.r2-past-hero .concept-bar { opacity: 1; transform: none; pointer-events: auto; }