:root { --tokis-navy: #12202f; --tokis-amber: #f4b544; --bs-body-bg: #f7f5f0; --bs-body-color: #12202f; --bs-secondary-color: #526071; }
body { min-height: 100vh; display: flex; flex-direction: column; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
:root { --bs-secondary-rgb: 82,96,113; --bs-link-color: #0056a3; --bs-link-color-rgb: 0,86,163; --bs-link-hover-color: #003e78; --bs-link-hover-color-rgb: 0,62,120; }
main { flex: 1; }
.site-header { position: sticky; top: 0; z-index: 1030; background: var(--tokis-navy); }
.site-header .nav-link { border-radius: 4px; transition: background-color .18s ease, color .18s ease; }
.site-header .nav-link:hover, .site-header .nav-link:focus-visible { background-color: #000; color: var(--home-gold, #dfbf83); text-decoration: none; }
.brand { font-weight: 850; letter-spacing: .08em; }
.brand span { color: var(--tokis-amber); }
.hero { padding-top: clamp(3rem, 8vw, 7rem); padding-bottom: clamp(3rem, 8vw, 7rem); }
.hero h1 { font-size: clamp(2.4rem, 5.5vw, 4.6rem); font-weight: 750; letter-spacing: -.045em; line-height: 1.08; }
.eyebrow { font-size: .75rem; letter-spacing: .16em; font-weight: 750; }
.journey-card { background: var(--tokis-navy); color: #fff; border-radius: 12px; }
.journey-card .eyebrow { color: var(--tokis-amber); }
.card { background: #fff; border-color: #dce1e7; border-radius: 12px; }
.btn-brand { background: var(--tokis-amber); color: var(--tokis-navy); border: 1px solid var(--tokis-amber); font-weight: 650; }
.btn-brand:hover, .btn-brand:focus-visible { background: #e9a52e; color: var(--tokis-navy); border-color: #e9a52e; }
.btn, .nav-link, .navbar-toggler { min-height: 44px; }
:focus-visible { outline: 3px solid #2674b9 !important; outline-offset: 4px; }
.skip-link { position: absolute; top: -100px; left: 1rem; z-index: 1100; background: #fff; color: var(--tokis-navy); padding: 1rem; }
.skip-link:focus { top: 1rem; }
.diagnostic { max-width: 720px; }
.auth-panel { max-width: 620px; }
.account-email { overflow-wrap: anywhere; }
.site-header .navbar { padding-inline: 12px; }
pre { max-width: 360px; white-space: pre-wrap; overflow-wrap: anywhere; }
.media-picker { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 12px; max-height: 440px; overflow-y: auto; padding: 4px; }
.media-thumb { width: 100%; height: 150px; object-fit: contain; background: #eef0f2; border-radius: 8px; }
.video-label { display: grid; place-items: center; }
.vehicle-card-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.store-image { width: 100%; height: auto; max-height: 520px; object-fit: contain; border-radius: 12px; background: #edf0f2; }
.content-body { max-width: 900px; line-height: 1.8; overflow-wrap: anywhere; }
summary { cursor: pointer; min-height: 32px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
.form-panel { max-width: 900px; }
.gallery-choice img { object-fit: cover; border-radius: 4px; }
.gallery-choice[aria-current="true"] { outline: 3px solid var(--tokis-navy); outline-offset: 2px; }
.gallery-slide[hidden] { display: none; }
.gallery-slide .store-image { max-height: 580px; }
.card, dd { overflow-wrap: anywhere; }
.gallery-controls a { min-height: 44px; }
@media (max-width: 575px) { .hero h1 { font-size: 2.5rem; } .form-panel { padding: 1rem !important; } }