/* =====================================================================
   Roadster — public design system (loaded on every public page by header.php)
   Black canvas, white type, photography first. Red only for the primary action.
   No badges, no gradients.
   ===================================================================== */

:root {
    color-scheme: dark;
    --rs-bg: #000000;
    --rs-bg-2: #0A0A0A;
    --rs-surface: #111111;
    --rs-surface-2: #181818;
    --rs-ink: #F4F4F4;
    --rs-ink-2: #9A9A9A;
    --rs-ink-3: #5E5E5E;
    --rs-dark: #000000;
    --rs-red: #C8102E;
    --rs-red-hover: #E0183A;
    --rs-line: rgba(255,255,255,0.1);
    --rs-line-strong: rgba(255,255,255,0.22);
    --rs-ok: #4ADE80;
    --rs-display: 'Archivo', 'Inter', system-ui, sans-serif;
    --rs-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --rs-gutter: 20px;
    --rs-max: 1320px;
    --rs-hdr-h: 64px;
    --rs-ease: cubic-bezier(.2,.7,.2,1);
}
@media (min-width: 768px) { :root { --rs-gutter: 32px; --rs-hdr-h: 72px; } }
@media (min-width: 1280px) { :root { --rs-gutter: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--rs-hdr-h) + 16px); background: #000; }
/* overflow-x: clip (not hidden) so body never becomes a scroll container — that would break position: sticky */
html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: clip; }
body.rs-body { background: var(--rs-bg); color: var(--rs-ink); font-family: var(--rs-text); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.rs-body img, body.rs-body video { max-width: 100%; display: block; }
body.rs-body a { color: inherit; }
::selection { background: var(--rs-red); color: #fff; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { position: fixed; left: 12px; top: 12px; z-index: 300; padding: 10px 16px; background: #fff; color: #000; font-weight: 600; font-size: 13px; text-decoration: none; }

/* ---------- Layout ---------- */
.rs-wrap, .section-wrap { width: 100%; max-width: var(--rs-max); margin: 0 auto; padding-left: var(--rs-gutter); padding-right: var(--rs-gutter); }
.rs-sec { padding: 88px 0; }
@media (min-width: 1024px) { .rs-sec { padding: 128px 0; } }
.rs-sec-alt { background: var(--rs-bg-2); }
.rs-sec-dark { background: #000; }

/* ---------- Type ---------- */
.rs-eyebrow { margin: 0 0 18px; font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--rs-ink-2); }
.rs-display { margin: 0; font-family: var(--rs-display); font-stretch: 125%; font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; line-height: .98; font-size: clamp(34px, 6vw, 84px); }
.rs-h2 { margin: 0; font-family: var(--rs-display); font-stretch: 125%; font-weight: 600; text-transform: uppercase; letter-spacing: 0; line-height: 1.04; font-size: clamp(26px, 3.6vw, 48px); }
.rs-h3 { margin: 0; font-family: var(--rs-display); font-stretch: 112%; font-weight: 600; line-height: 1.15; font-size: 20px; }
.rs-lead { margin: 20px 0 0; max-width: 520px; font-size: 16.5px; line-height: 1.65; color: var(--rs-ink-2); }
.rs-small { font-size: 13px; color: var(--rs-ink-2); }
.rs-note { margin: 28px 0 0; font-size: 12px; line-height: 1.6; color: var(--rs-ink-3); }
.rs-tnum { font-variant-numeric: tabular-nums; }
/* Plain status line (no pill, no border) */
.rs-status { display: block; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--rs-ink-2); }

/* ---------- Buttons ---------- */
.rs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 28px; border: 1px solid transparent; border-radius: 4px; font-family: var(--rs-text); font-size: 13px; font-weight: 500; letter-spacing: .04em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .2s var(--rs-ease); }
.rs-btn svg { width: 16px; height: 16px; transition: transform .25s var(--rs-ease); }
.rs-btn:hover svg { transform: translateX(3px); }
.rs-btn:active { transform: translateY(1px); }
.rs-btn[disabled], .rs-btn.is-disabled { opacity: .4; pointer-events: none; }
body.rs-body .rs-btn-red { background: var(--rs-red); color: #fff; }
body.rs-body .rs-btn-red:hover { background: var(--rs-red-hover); }
body.rs-body .rs-btn-white { background: #F4F4F4; color: #000; }
body.rs-body .rs-btn-white:hover { background: #fff; }
body.rs-body .rs-btn-dark, body.rs-body .rs-btn-glass { background: rgba(255,255,255,.1); color: #fff; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
body.rs-body .rs-btn-dark:hover, body.rs-body .rs-btn-glass:hover { background: rgba(255,255,255,.2); }
body.rs-body .rs-btn-line { background: transparent; color: #fff; border-color: var(--rs-line-strong); }
body.rs-body .rs-btn-line:hover { border-color: #fff; }
body.rs-body .rs-btn-quiet { height: 38px; padding: 0 14px; background: transparent; color: var(--rs-ink); font-size: 14px; letter-spacing: 0; }
body.rs-body .rs-btn-quiet:hover { background: rgba(255,255,255,.08); }
.rs-btn-block { width: 100%; }
.rs-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; letter-spacing: .04em; text-decoration: none; color: var(--rs-ink); border-bottom: 1px solid var(--rs-line-strong); padding-bottom: 3px; transition: border-color .2s ease; }
.rs-link:hover { border-color: #fff; }

/* ---------- Forms ---------- */
.rs-field { display: block; }
.rs-label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--rs-ink-2); }
.rs-input { width: 100%; height: 50px; padding: 0 16px; border: 1px solid var(--rs-line-strong); border-radius: 4px; background: var(--rs-bg-2); color: var(--rs-ink); font: 500 16px/1 var(--rs-text); transition: border-color .15s ease; }
.rs-input::placeholder { color: var(--rs-ink-3); }
.rs-input:focus { outline: none; border-color: #fff; }
.rs-input[aria-invalid="true"] { border-color: var(--rs-red); }
.rs-error { margin: 8px 0 0; font-size: 13px; color: #FF6B7D; }

/* ---------- Reveal on scroll (assets/js/rs-site.js) ---------- */
.rs-reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--rs-ease), transform .9s var(--rs-ease); transition-delay: var(--d, 0ms); }
.rs-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rs-reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ---------- Responsive photography (includes/roadster_media.php → rsPicture) ---------- */
.rs-pic { display: block; overflow: hidden; background: #050505; }
.rs-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }

/* =====================================================================
   Header — dark glass; transparent over the homepage film
   ===================================================================== */
.rs-hdr { position: sticky; top: 0; z-index: 60; height: var(--rs-hdr-h); background: rgba(0,0,0,.72); border-bottom: 1px solid var(--rs-line); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); transition: background-color .4s ease, border-color .4s ease; }
.rs-hdr-in { height: 100%; max-width: 1600px; margin: 0 auto; padding: 0 var(--rs-gutter); display: flex; align-items: center; gap: 24px; }
.rs-logo { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.rs-logo img { height: 28px; width: auto; }
.rs-logo-text { font-family: var(--rs-display); font-stretch: 125%; font-weight: 700; font-size: 17px; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.rs-logo-light { display: none !important; }
.rs-logo-dark { display: inline-flex !important; }

.rs-nav { display: none; align-items: center; gap: 2px; margin: 0 auto; }
@media (min-width: 1200px) { .rs-nav { display: flex; } }
.rs-nav-a { position: relative; padding: 8px 12px; font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.86); text-decoration: none; white-space: nowrap; border-radius: 4px; transition: background-color .2s ease, color .2s ease; }
.rs-nav-a:hover { background: rgba(255,255,255,.1); color: #fff; }
.rs-nav-a.is-active { color: #fff; background: rgba(255,255,255,.08); }

.rs-hdr-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
@media (min-width: 1200px) { .rs-hdr-actions { margin-left: 0; } }
.rs-hdr-auth { display: none; align-items: center; gap: 6px; }
@media (min-width: 768px) { .rs-hdr-auth { display: flex; } }
.rs-hdr-auth .rs-btn-red { height: 38px; padding: 0 18px; font-size: 12.5px; }
.rs-hdr .gtw { height: 38px; min-width: 148px; border-radius: 4px; --gtw-bg: rgba(255,255,255,.06); --gtw-line: rgba(255,255,255,.16); --gtw-ink: #fff; }
.rs-hdr .gtw:hover, .rs-hdr .gtw:focus-within { border-color: rgba(255,255,255,.5); }
.rs-hdr .gtw-globe { color: currentColor; opacity: .7; }
.rs-hdr .gtw .goog-te-combo option { color: #111; background: #fff; }
@media (max-width: 767px) { .rs-hdr .gtw { display: none; } }

.rs-burger { width: 44px; height: 44px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 0; background: transparent; cursor: pointer; color: #fff; border-radius: 4px; }
.rs-burger span { width: 20px; height: 1.5px; background: currentColor; }
@media (min-width: 1200px) { .rs-burger { display: none; } }

body.has-hero .rs-hdr { position: fixed; left: 0; right: 0; }
.rs-hdr.is-over:not(.is-solid) { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Mobile menu */
.rs-mob { position: fixed; inset: 0; z-index: 200; background: #000; display: flex; flex-direction: column; padding: 0 var(--rs-gutter) 28px; opacity: 0; transform: translateY(-12px); transition: opacity .3s ease, transform .3s var(--rs-ease); overflow-y: auto; }
.rs-mob.open { opacity: 1; transform: none; }
.rs-mob-head { height: var(--rs-hdr-h); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--rs-line); flex-shrink: 0; }
.rs-mob-close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; cursor: pointer; color: #fff; }
.rs-mob-close svg { width: 22px; height: 22px; }
.rs-mob-nav { display: flex; flex-direction: column; padding: 12px 0; }
.rs-mob-nav a { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--rs-line); font-family: var(--rs-display); font-stretch: 115%; font-size: 20px; font-weight: 600; text-decoration: none; color: #fff; }
.rs-mob-nav a::after { content: '→'; font-family: var(--rs-text); font-size: 16px; color: var(--rs-ink-3); transition: transform .2s ease, color .2s ease; }
.rs-mob-nav a.is-active::after, .rs-mob-nav a:hover::after { color: #fff; transform: translateX(4px); }
.rs-mob-cta { margin-top: auto; display: grid; gap: 10px; padding-top: 24px; }

/* =====================================================================
   Footer
   ===================================================================== */
.rs-foot { background: #000; color: var(--rs-ink-2); padding: 88px 0 32px; font-size: 14px; border-top: 1px solid var(--rs-line); }
.rs-foot a { color: rgba(255,255,255,.7); text-decoration: none; transition: color .15s ease; }
.rs-foot a:hover { color: #fff; }
.rs-foot-top { display: grid; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid var(--rs-line); }
@media (min-width: 1024px) { .rs-foot-top { grid-template-columns: minmax(0, 1.3fr) minmax(0, 2.7fr); gap: 64px; } }
.rs-foot-brand .rs-logo-text { color: #fff; }
.rs-foot-brand img { height: 28px; width: auto; }
.rs-foot-brand p { margin: 20px 0 0; max-width: 340px; line-height: 1.65; }
.rs-foot-contact { margin-top: 24px; display: grid; gap: 6px; }
.rs-foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
@media (min-width: 768px) { .rs-foot-cols { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.rs-foot-h { margin: 0 0 18px; font-size: 11.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #fff; }
.rs-foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rs-foot-mid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 32px 0; border-bottom: 1px solid var(--rs-line); }
.rs-foot-social { display: flex; gap: 8px; }
.rs-foot-social a { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rs-line); border-radius: 4px; }
.rs-foot-social a:hover { border-color: #fff; }
.rs-foot-social svg { width: 16px; height: 16px; }
.rs-foot-news { display: flex; gap: 8px; width: 100%; max-width: 440px; }
.rs-foot-news input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--rs-line-strong); border-radius: 4px; background: transparent; color: #fff; font: 500 14px var(--rs-text); }
.rs-foot-news input::placeholder { color: var(--rs-ink-3); }
.rs-foot-news input:focus { outline: none; border-color: #fff; }
.rs-foot-news .rs-btn { height: 44px; padding: 0 18px; }
.rs-foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-top: 28px; font-size: 12px; color: var(--rs-ink-3); }
.rs-foot-bottom p { margin: 0; max-width: 720px; line-height: 1.6; }

/* =====================================================================
   Older inner pages (about, FAQ, contact, help, legal — site.css "lp-" classes) on the black canvas
   ===================================================================== */
body.rs-body .lp-sec, body.rs-body .lp-sec-cream, body.rs-body [class*="bg-white"], body.rs-body [class*="bg-gray-50"], body.rs-body [class*="bg-slate-50"] { background: var(--rs-bg) !important; }
body.rs-body .lp-sec-cream { background: var(--rs-bg-2) !important; }
body.rs-body .lp-h2, body.rs-body .lp-sec h1, body.rs-body .lp-sec h2, body.rs-body .lp-sec h3, body.rs-body .lp-sec h4, body.rs-body [class*="text-gray-900"], body.rs-body [class*="text-slate-900"] { color: var(--rs-ink) !important; }
body.rs-body .lp-body, body.rs-body .lp-sec p, body.rs-body .lp-sec li, body.rs-body [class*="text-gray-6"], body.rs-body [class*="text-gray-5"], body.rs-body [class*="text-slate-6"], body.rs-body [class*="text-slate-5"] { color: var(--rs-ink-2) !important; }
body.rs-body .lp-eyebrow, body.rs-body .lp-inline { color: var(--rs-ink-2) !important; }
body.rs-body .lp-sec [class*="border"], body.rs-body .lp-sec hr { border-color: var(--rs-line) !important; }
body.rs-body .lp-sec input, body.rs-body .lp-sec textarea, body.rs-body .lp-sec select { background: var(--rs-bg-2) !important; color: var(--rs-ink) !important; border-color: var(--rs-line-strong) !important; }
body.rs-body .lp-sec [style*="background:#fff"], body.rs-body .lp-sec [style*="background: #fff"], body.rs-body .lp-sec [style*="background:#ffffff"], body.rs-body .lp-sec [style*="background: #ffffff"] { background: var(--rs-surface) !important; }