/* =========================================================================
   Auto Import GH — public stylesheet
   Mobile-first. Brand navy #0a2540 + orange #f07818 (sampled from the owner's logo).
   No external fonts, scripts or images: every page works offline and inside
   sandboxed previews.
   ========================================================================= */

:root {
  --navy: #0a2540;
  --navy-800: #123055;
  --navy-700: #1a3a63;
  --accent: #f07818;
  --accent-600: #c95f10;
  --accent-soft: #ffd6b3;
  --cream: #faf9f6;
  --paper: #ffffff;
  --ink: #131a22;
  --muted: #5c6a79;
  --line: #e3e0d8;
  --ok: #1e7a4b;
  --warn: #92590a;
  --danger: #a52121;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(10, 37, 64, 0.06), 0 4px 12px rgba(10, 37, 64, 0.05);
  --shadow-md: 0 6px 24px rgba(10, 37, 64, 0.10);
  --shadow-lg: 0 18px 50px rgba(10, 37, 64, 0.16);
  --display: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1180px;

  /* ---------------------------------------------------------- density scale
     Added 31 October 2026. Every spacing and type size on the public site comes
     from here, so "make it tighter" is one edit rather than forty. Change the
     numbers below and the whole site follows; nothing below this block should
     hard-code a heading size or a section gap again. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 18px;
  --space-5: 28px;
  --space-6: 40px;
  --section-y: 28px;          /* between page sections, phone */
  --section-y-wide: 42px;     /* … and from 920 px */
  --card-pad: 10px 12px 12px;
  --fs-body: 16px;            /* never below 16 on a phone: Safari zooms inputs */
  --fs-h1: clamp(1.5rem, 2.9vw, 1.86rem);
  --fs-h2: clamp(1.16rem, 2.1vw, 1.36rem);
  --fs-h3: 1.02rem;
  --lh-body: 1.55;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--navy-700); text-decoration-color: rgba(242, 161, 11, 0.5); text-underline-offset: 3px; }
a:hover { color: var(--accent-600); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 18px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link { position: absolute; left: -999px; top: 0; z-index: 999; background: var(--accent); color: var(--navy); padding: 10px 14px; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }

.fine { font-size: 0.78rem; color: var(--muted); line-height: 1.45; }
.muted { color: var(--muted); }
.warn-text { color: var(--warn); font-size: 0.82rem; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.68rem; font-weight: 700; color: var(--accent-600); margin: 0 0 8px; }
.lede { font-size: clamp(0.98rem, 1.9vw, 1.08rem); line-height: 1.5; color: #33414f; max-width: 62ch; }

/* ------------------------------------------------------------------ header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 10px; min-height: 60px; flex-wrap: nowrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); }
.brand-logo { display: block; width: auto; height: 38px; flex: 0 0 auto; }

.nav-toggle {
  margin-left: auto; width: 42px; height: 40px; border: 1px solid var(--line);
  background: #fff; border-radius: 10px; cursor: pointer; display: inline-grid; place-items: center;
}
.nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after {
  display: block; width: 18px; height: 2px; background: var(--navy); content: ""; position: relative;
}
.nav-toggle-bar::before { position: absolute; top: -6px; }
.nav-toggle-bar::after { position: absolute; top: 6px; }

.primary-nav { display: none; width: 100%; }
.primary-nav.is-open { display: block; }
.primary-nav ul { list-style: none; margin: 0; padding: 0 0 14px; display: flex; flex-direction: column; gap: 2px; }
.primary-nav a {
  display: block; padding: 9px 10px; border-radius: 8px; text-decoration: none;
  color: var(--navy); font-size: 0.92rem; font-weight: 550; white-space: nowrap;
}
.primary-nav a:hover { background: #f4f1ea; color: var(--accent-600); }
.primary-nav a.is-active { background: var(--navy); color: #fff; }

@media (min-width: 1160px) {
  .nav-toggle { display: none; }
  .primary-nav { display: flex !important; align-items: center; width: auto; margin-left: auto; gap: 4px; }
  .primary-nav ul { flex-direction: row; flex-wrap: nowrap; padding: 0; gap: 0; }
  .primary-nav a { padding: 6px 7px; font-size: 0.8rem; white-space: nowrap; }
  .brand { margin-right: 2px; }
  .nav-account { gap: 8px; margin-left: 4px; padding-left: 8px; }
  .nav-account .btn-sm { padding: 7px 12px; font-size: 0.82rem; white-space: nowrap; }
}
@media (min-width: 1160px) and (max-width: 1339px) {
  /* the account button is the first thing to go when space is tight */
  .nav-account .btn { display: none; }
}

/* -------------------------------------------------------------------- hero */
.hero { background: linear-gradient(160deg, #0a2540 0%, #123055 58%, #071a30 100%); color: #eaf0f7; overflow: hidden; }
.hero-inner { display: grid; gap: 14px; padding: 20px 18px 18px; }
.hero h1 { color: #fff; margin-bottom: 0.25em; max-width: 26ch; }
.hero .lede { color: #c9d6e4; font-size: 0.94rem; line-height: 1.45; max-width: 62ch; }
.hero .eyebrow { color: var(--accent-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 8px; }
.hero-actions .btn { padding: 8px 11px; font-size: 0.84rem; }
/* two buttons share one line on a 390 px phone, which saves a whole row */
@media (max-width: 359px) { .hero-actions .btn { flex: 1 1 100%; } }
.hero-media { position: relative; display: flex; justify-content: center; }
@media (max-width: 899px) {
  /* Decorative only (alt=""), so below tablet-landscape it gives its space to
     the search box and the counts instead of pushing the catalogue down. */
  .hero-media { display: none; }
}
.hero-art { width: min(100%, 250px); height: auto; opacity: .9; }
.hero-badge {
  position: absolute; bottom: 6px; left: 0; right: auto; background: #fff; color: var(--navy);
  border-radius: 10px; padding: 7px 10px; box-shadow: var(--shadow-md); border-left: 3px solid var(--accent);
  max-width: 200px;
}
.hero-badge-label { display: block; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-600); font-weight: 700; }
.hero-badge strong { display: block; font-family: var(--display); font-size: 0.95rem; }
.hero-badge small { font-size: 0.68rem; color: var(--muted); line-height: 1.3; display: block; }

.hero-search {
  display: flex; flex-wrap: wrap; gap: 6px; background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 11px; padding: 6px; max-width: 620px;
}
.hero-search input, .hero-search select {
  flex: 1 1 160px; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid transparent;
  font-family: var(--sans); font-size: 0.9rem; background: #fff; color: var(--ink);
}
@media (max-width: 559px) {
  /* The keyword box gets the full width — it is the one people type in. The
     journey picker and the button then share a row underneath, which is two
     rows of controls instead of three. */
  .hero-search input { flex: 1 1 100%; }
  .hero-search select { flex: 1 1 58%; }
  .hero-search button { flex: 1 1 38%; }
}
.hero-counts { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 10px 0 0; font-size: 0.78rem; color: #b9c8d8; }
.hero-count { display: inline-flex; gap: 5px; align-items: baseline; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 3px 10px; }
.hero-count strong { color: var(--accent-soft); font-size: 0.86rem; }
.hero-counts a { color: var(--accent-soft); }
@media (min-width: 900px) {
  /* about half the old 64/60 px: the hero is a doorway, not a landing page */
  .hero-inner { grid-template-columns: 1.2fr 0.8fr; align-items: center; padding: 18px 18px 16px; gap: 20px; }
  .hero-badge { position: static; margin-top: 12px; }
  .hero-media { flex-direction: column; align-items: center; }
}

/* ------------------------------------------------------------- trust strip */
.trust-strip { background: #fff; border-bottom: 1px solid var(--line); }
.trust-grid { display: grid; gap: 12px; padding: 16px 18px; }
.trust-grid h3 { font-family: var(--sans); font-size: 0.88rem; margin-bottom: 3px; }
.trust-grid p { margin: 0; font-size: 0.82rem; color: var(--muted); }
@media (min-width: 760px) { .trust-grid { grid-template-columns: repeat(2, 1fr); padding: 18px; } }
@media (min-width: 1080px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------------------------------------------------------------- sections */
.section { padding: var(--section-y) 0; }
.section-alt { background: #f3f1eb; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.section-head h2 { margin: 0; }
.link-more { font-size: 0.85rem; font-weight: 650; text-decoration: none; color: var(--accent-600); border-bottom: 1px solid rgba(242,161,11,.4); padding-bottom: 1px; }
.page-head { background: #fff; border-bottom: 1px solid var(--line); padding: 18px 0 20px; }
.page-head-tight { padding-bottom: 14px; }
.page-head h1 { margin-bottom: 0.3em; }
.breadcrumbs { font-size: 0.76rem; color: var(--muted); margin-bottom: 8px; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: 6px; color: #b9b4a8; }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent-600); }

.split { display: grid; gap: 20px; }
.split-wide { grid-template-columns: 1fr; }
@media (min-width: 920px) {
  .split { grid-template-columns: 1fr 1fr; align-items: start; }
  .split-wide { grid-template-columns: 0.85fr 1.15fr; }
  .section { padding: var(--section-y-wide) 0; }
}

.prose { max-width: 72ch; }
.prose h2 { margin-top: 1.2em; }
.prose h2:first-child { margin-top: 0; }
.bullet { margin: 0 0 1em; padding-left: 20px; }
.bullet li { margin-bottom: 7px; }

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--sans); font-size: 0.94rem; font-weight: 650; line-height: 1.2;
  text-decoration: none; cursor: pointer; transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(180deg, var(--accent) 0%, var(--accent-600) 100%); color: var(--navy); box-shadow: 0 4px 14px rgba(242, 161, 11, 0.32); }
.btn-primary:hover { color: var(--navy); box-shadow: 0 8px 22px rgba(242, 161, 11, 0.42); }
.btn-outline { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn-quiet { background: #fff; border-color: var(--line); color: var(--navy); }
.btn-quiet:hover { border-color: var(--accent); color: var(--accent-600); }
.btn-ghost { background: #fff; border-color: var(--line); color: var(--navy); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-lg { padding: 13px 22px; font-size: 1rem; }
.btn-sm { padding: 8px 13px; font-size: 0.84rem; }
.btn-block { width: 100%; }
.hero .btn-outline { border-color: rgba(255,255,255,.55); color: #fff; }
.hero .btn-outline:hover { background: #fff; color: var(--navy); }

/* ------------------------------------------------------------------- cards */
.card-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Two on a phone: a full-width card wastes the screen and doubles the scrolling.
   Four on a laptop, five on a wide screen — a catalogue is read by scanning. */
@media (max-width: 420px) { .card-grid { grid-template-columns: 1fr; } }
@media (min-width: 860px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1360px) { .card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.card {
  position: relative; display: flex; flex-direction: column; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: box-shadow .15s ease, transform .15s ease;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-media { position: relative; background: #ecebe5; aspect-ratio: 16 / 10; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media .card-badges { position: absolute; }
.card-badges { position: static; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.detail-head .card-badges, .page-head .card-badges { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.card-body { padding: var(--card-pad); display: flex; flex-direction: column; gap: 5px; flex: 1; }
.card-title { font-size: 0.9rem; line-height: 1.25; margin: 0; font-family: var(--sans); font-weight: 700; letter-spacing: -0.005em; }
.card-title a { text-decoration: none; color: var(--navy); }
.card-title a:hover { color: var(--accent-600); }
.card-sub { margin: 0; font-size: 0.74rem; color: var(--muted); }
.card-specs { display: flex; flex-wrap: wrap; gap: 4px; margin: 1px 0; }
.card-specs span { font-size: 0.66rem; background: #f4f2ec; border-radius: 999px; padding: 2px 7px; color: #47535f; }
.card-price { margin-top: auto; display: flex; flex-direction: column; }
.card-price strong { font-family: var(--display); font-size: 1.04rem; color: var(--navy); line-height: 1.2; }
.card-price .muted { font-size: 0.7rem; }
.card-note { margin: 0; font-size: 0.7rem; }
.card-actions { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 3px; }
/* the two buttons have to fit a 220 px card without wrapping onto two lines */
.card-actions .btn { padding: 5px 8px; font-size: 0.72rem; gap: 4px; }
.card-note + .card-actions { margin-top: 2px; }

/* sold state — display overlay only, never destructive */
.card.is-sold .card-media img { filter: grayscale(0.55) contrast(0.95); }
.sold-ribbon {
  position: absolute; top: 12px; right: -2px; background: var(--danger); color: #fff;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 4px 0 0 4px; z-index: 3;
}
.sold-watermark {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 2;
  font-family: var(--display); font-weight: 700; letter-spacing: 0.12em;
  font-size: clamp(2rem, 9vw, 4rem); color: rgba(165, 33, 33, 0.55);
  transform: rotate(-14deg); pointer-events: none; text-shadow: 0 2px 10px rgba(255,255,255,.5);
}
.sold-ribbon-lg { font-size: 0.86rem; padding: 8px 18px; }
.sold-watermark-lg { font-size: clamp(3rem, 12vw, 7rem); }

/* -------------------------------------------------------------------- pills */
.pill {
  display: inline-block; font-size: 0.6rem; font-weight: 750; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 3px 7px; border-radius: 999px; background: #eef1f5; color: #3a4753;
}
.pill-imported { background: #e7f0fb; color: #12446f; }
.pill-cleared_ghana { background: #e6f5ec; color: #14603a; }
.pill-available { background: #e6f5ec; color: #14603a; }
.pill-reserved { background: #fdf0d9; color: #8a5a07; }
.pill-sold { background: #fbe7e7; color: #922020; }
.pill-draft { background: #eceff3; color: #4c5966; }
.pill-new { background: #e7f0fb; color: #12446f; }
.pill-warn { background: #fdf0d9; color: #8a5a07; }


/* ------------------------------------------------------------------ panels */
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 18px; box-shadow: var(--shadow-sm); }
.panel h2, .panel h3 { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
.panel-success { border-color: #b9e3c9; background: #f3fbf6; }
.panel-warn { border-color: #f0dcae; background: #fffaf0; }
.empty-state { color: var(--muted); }

.notice { border-radius: var(--radius-sm); padding: 10px 12px; font-size: 0.84rem; margin: 0 0 12px; border: 1px solid transparent; }
.notice-info { background: #eef4fb; border-color: #cfe0f3; color: #17405f; }
.notice-ok { background: #edf9f1; border-color: #bfe6ce; color: #14603a; }
.notice-warn { background: #fff7e6; border-color: #f0dcae; color: #7a5306; }
.notice-error { background: #fdf0f0; border-color: #f0c9c9; color: #8e1f1f; }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 12px; }
.steps li { position: relative; padding-left: 38px; }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--navy); color: var(--accent-soft); font-weight: 700; font-size: 0.78rem;
  display: grid; place-items: center;
}
.steps h3 { font-family: var(--sans); font-size: 0.92rem; margin: 0 0 2px; }
.steps p { margin: 0; font-size: 0.83rem; color: var(--muted); }
.steps-compact li { padding-left: 38px; }
.steps-compact li::before { width: 26px; height: 26px; font-size: 0.8rem; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 16px; } .steps-compact { grid-template-columns: 1fr; } }

.kv { display: grid; gap: 8px; margin: 0 0 12px; }
.kv div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--line); padding-bottom: 6px; }
.kv dt { color: var(--muted); font-size: 0.85rem; }
.kv dd { margin: 0; font-weight: 600; text-align: right; }

/* --------------------------------------------------------------- inventory */
.inventory-layout { display: grid; gap: 16px; }
@media (min-width: 980px) { .inventory-layout { grid-template-columns: 288px 1fr; align-items: start; } }
.filters {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px; display: grid; gap: 10px; position: sticky; top: 72px; box-shadow: var(--shadow-sm);
}
.filter-group { display: grid; gap: 4px; }
.filter-group label { font-size: 0.72rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.filter-row.three { grid-template-columns: repeat(3, 1fr); }
.filter-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* On a phone the filter panel used to be a full screen of stacked boxes before
   a single car appeared. Two columns, with Journey, Keyword, the date and price
   pairs and the buttons full width, halves that. */
@media (min-width: 372px) and (max-width: 979px) {
  .filters { grid-template-columns: 1fr 1fr; align-content: start; }
  .filters .filter-group-wide, .filters .filter-row, .filters .filter-actions { grid-column: 1 / -1; }
}
.results-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.results-bar p { margin: 0; font-size: 0.9rem; }
.sort-form { display: flex; align-items: center; gap: 8px; }
.sort-form label { font-size: 0.78rem; color: var(--muted); }
.sort-form select { padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid #d7d3c9; background: #fff; font-family: var(--sans); }

/* ------------------------------------------------------------------- forms */
.form { display: grid; gap: 5px; }
/* display:grid beats the browser's own rule for [hidden], so say it here too */
.form[hidden], [data-request-form][hidden] { display: none !important; }
.form fieldset { border: 0; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; }
.form legend { font-family: var(--display); font-size: 1.1rem; color: var(--navy); margin-bottom: 4px; padding: 0; }
.form label { font-size: 0.7rem; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: #46535f; margin-top: 4px; }
input, select, textarea {
  font-family: var(--sans); font-size: 0.92rem; color: var(--ink); background: #fff;
  border: 1px solid #d7d3c9; border-radius: var(--radius-sm); padding: 8px 10px; width: 100%;
}
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 3px solid rgba(242, 161, 11, 0.5); outline-offset: 1px; border-color: var(--accent-600);
}
textarea { resize: vertical; min-height: 72px; }
input[type="file"] { padding: 9px; background: #fbfaf7; }
input[type="checkbox"], input[type="radio"] { width: auto; }
.check { display: flex; align-items: flex-start; gap: 8px; font-size: 0.85rem; text-transform: none; letter-spacing: 0; font-weight: 500; color: #2f3c48; margin: 8px 0; line-height: 1.45; }
.form label.check, label.check { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 0.85rem; }
.check input { width: auto; margin-top: 3px; flex: 0 0 auto; }
.req { color: var(--danger); }
.field-error { margin: 0 0 6px; font-size: 0.8rem; color: var(--danger); font-weight: 600; }
.form-status { margin: 8px 0 0; font-size: 0.88rem; color: var(--muted); }
.form-status.is-ok { color: var(--ok); font-weight: 600; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.quote-ref { font-family: ui-monospace, Menlo, Consolas, monospace; background: #fff5e2; padding: 2px 8px; border-radius: 6px; }

/* ---------------------------------------------------------- vehicle detail */
.detail-grid { display: grid; gap: 16px; }
@media (min-width: 980px) { .detail-grid { grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.85fr); align-items: start; } }
.detail-head { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-end; }
.detail-head h1 { margin: 0 0 4px; font-size: clamp(1.38rem, 3.1vw, 1.85rem); }
.detail-sub { margin: 0; font-size: 0.83rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.detail-price { text-align: left; }
.detail-price strong { display: block; font-family: var(--display); font-size: clamp(1.24rem, 3vw, 1.6rem); color: var(--navy); line-height: 1.1; }
.detail-price > span { display: block; font-size: 0.84rem; color: var(--muted); }
.detail-price > span span, .detail-price > span strong { display: inline; font-size: inherit; }
.detail-main { display: grid; gap: 14px; min-width: 0; }
.detail-block { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 14px 16px; box-shadow: var(--shadow-sm); }
.detail-block h2 { font-size: 1.02rem; }
.detail-block > :last-child { margin-bottom: 0; }
.detail-aside { display: grid; gap: 12px; }

.gallery { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.gallery-main { aspect-ratio: 3 / 2; background: #ecebe5; overflow: hidden; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 6px; padding: 8px; overflow-x: auto; }
.thumb { padding: 0; border: 2px solid transparent; border-radius: 8px; background: #ecebe5; cursor: pointer; flex: 0 0 auto; overflow: hidden; width: 92px; aspect-ratio: 16 / 10; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.is-active { border-color: var(--accent); }

.spec-grid { display: grid; gap: 9px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .spec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.spec-grid dt { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.spec-grid dd { margin: 1px 0 0; font-weight: 600; font-size: 0.87rem; }
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.feature-list li { font-size: 0.85rem; padding-left: 20px; position: relative; }
.feature-list li.yes::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.feature-list li.no { color: var(--muted); padding-left: 22px; }
.feature-list li.no::before { content: "–"; position: absolute; left: 4px; color: var(--muted); }

.video-block { margin: 0; }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius-sm); overflow: hidden; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ----------------------------------------------------- tables / breakdowns */
.breakdown-table-wrap, .compare-table-wrap { overflow-x: auto; margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.breakdown-table, .compare-table { width: 100%; border-collapse: collapse; background: var(--paper); font-size: 0.85rem; }
.breakdown-table { font-size: 0.82rem; line-height: 1.3; }
.breakdown-table caption { text-align: left; padding: 8px 10px; font-weight: 650; color: var(--navy); background: #f4f6f9; font-size: 0.8rem; }
.breakdown-table th, .breakdown-table td, .compare-table th, .compare-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.breakdown-table th, .breakdown-table td { padding: 5px 10px; }
.breakdown-table .muted { font-size: 0.78rem; }
.breakdown-table tfoot th, .breakdown-table tfoot td { font-size: 0.86rem; padding-top: 7px; padding-bottom: 7px; }
.breakdown-table tbody tr:last-child th, .breakdown-table tbody tr:last-child td { border-bottom: 0; }
.breakdown-table thead th, .compare-table thead th { background: #f2f4f7; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.breakdown-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.breakdown-table tfoot th, .breakdown-table tfoot td { background: #f8f7f3; font-size: 0.98rem; border-top: 2px solid var(--line); }
.compare-table thead th img { border-radius: 8px; margin-bottom: 8px; }
.compare-name { display: block; font-weight: 650; margin-bottom: 6px; }
.compare-table tbody th { background: #fafbfc; font-weight: 650; width: 180px; }
@media (max-width: 720px) { .compare-table tbody th { width: 120px; } }

/* --------------------------------------------------------------- compare UI */
.compare-dock { position: sticky; bottom: 0; z-index: 30; }
.compare-bar[hidden] { display: none !important; }
.turnstile-note-quiet { color: var(--muted); font-size: 0.8rem; margin: 6px 0 0; }
img.img-missing { background: #eef1f5; }
.compare-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
  background: var(--navy); color: #fff; padding: 8px 14px; font-size: 0.84rem;
  box-shadow: 0 -6px 20px rgba(10, 37, 64, 0.18);
}
.compare-bar strong { color: var(--accent-soft); }

/* ---------------------------------------------------------------- partners */
.partner-row { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .partner-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.partner-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; text-align: center; box-shadow: var(--shadow-sm); }
.partner-card img { height: 52px; width: auto; margin: 0 auto 10px; object-fit: contain; }
.partner-card h3 { font-family: var(--sans); font-size: 0.92rem; margin-bottom: 3px; }
.partner-card p { margin: 0; font-size: 0.82rem; color: var(--muted); }
.partner-mini { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* The partner artwork is dark, and the footer is navy, so each logo sits on a
   white chip. Without an explicit height the image renders at its natural
   360 px width, because the global `img { height: auto }` overrides the
   height attribute on the tag. */
.partner-mini a {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; min-width: 74px; padding: 0 8px;
  background: #fff; border-radius: 7px;
}
.partner-mini img { width: auto; height: auto; max-height: 24px; max-width: 120px; object-fit: contain; }
/* the Charis lockup is denser, so it gets a little more height to carry the
   same visual weight as the Triple R wordmark */
.partner-mini a:last-child img { max-height: 28px; max-width: 70px; }

/* ------------------------------------------------------------------ contact */
.contact-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.contact-list li { display: grid; gap: 2px; border-bottom: 1px dashed var(--line); padding-bottom: 10px; }
.contact-list strong { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.contact-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; background: var(--navy); color: #eaf0f7; border-radius: var(--radius); padding: 18px 16px; }
.contact-cta h2 { color: #fff; margin-bottom: 6px; }
.contact-cta p { margin: 0; color: #c9d6e4; max-width: 52ch; }
.cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.contact-cta .btn-outline { border-color: rgba(255,255,255,.55); color: #fff; }
.contact-cta .btn-outline:hover { background: #fff; color: var(--navy); }

/* ------------------------------------------------------------------- footer */
.site-footer { background: var(--navy); color: #c3cfda; margin-top: 12px; }
/* Brand · Explore · Company · Policies · Partners, all on one row from 1024 px.
   The partners used to be a fifth item that wrapped onto a line of its own,
   which is what left the band looking hollow. */
.footer-grid { display: grid; gap: 14px 22px; padding: 22px 18px 14px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.7fr 1fr 1fr 1fr 1.15fr; align-items: start; } }
.footer-logo { width: 122px; height: auto; margin-bottom: 8px; }
.site-footer h2 { color: #fff; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 6px; }
.site-footer p { font-size: 0.82rem; margin: 0 0 8px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer-links a { color: #c3cfda; text-decoration: none; font-size: 0.84rem; }
.footer-links a:hover { color: var(--accent-soft); }
.footer-small { font-size: 0.72rem; color: #93a4b6; }
.footer-legal { border-top: 1px solid rgba(255,255,255,.12); padding: 10px 18px 16px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
.footer-legal p { margin: 0; font-size: 0.74rem; }

/* -------------------------------------------------------------------- misc */
.prose ul, .prose ol { padding-left: 20px; }
.empty-state.panel { padding: 34px 26px; text-align: center; grid-column: 1 / -1; }
.empty-state.panel h3 { margin-bottom: 0.4em; }
.empty-state.panel p { max-width: 46ch; margin-left: auto; margin-right: auto; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* header: keep the lockup intact and let the nav shrink instead of overlapping */
.header-inner { flex-wrap: nowrap; }
.brand { flex: 0 0 auto; }
.primary-nav { min-width: 0; max-width: 100%; }
.primary-nav ul { flex-wrap: wrap; justify-content: flex-end; row-gap: 2px; }
@media (max-width: 1119px) { .header-inner { flex-wrap: wrap; row-gap: 6px; } }

/* consent rows: keep the label, link and checkbox on one flowing line */
.check { display: block; position: relative; padding-left: 26px; }
.check input { position: absolute; left: 0; top: 3px; margin: 0; }

/* =========================================================================
   Accounts, policies and small additions (turn 4)
   ========================================================================= */

/* header account area */
.nav-account { display: flex; align-items: center; gap: 10px; margin-left: 6px; padding-left: 10px;
  border-left: 1px solid var(--line); list-style: none; }
.nav-account .nav-signin { font-weight: 600; color: var(--navy); text-decoration: none; }
.nav-account .nav-signin:hover { color: var(--accent-600); }

/* footer contacts */
.footer-contact { list-style: none; margin: 8px 0 4px; padding: 0; font-size: 0.84rem; }
.footer-contact li { margin: 1px 0; }
.footer-contact a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.28); }
.footer-contact a:hover { border-bottom-color: var(--accent); }

/* ---------------------------------------------------------------- auth */
.auth-page { background: var(--cream); }
.auth-wrap { max-width: 520px; margin: 0 auto; padding: 20px 18px 40px; }
.auth-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 26px 24px 22px;
}
.auth-brand { display: block; margin: 0 0 18px; }
.auth-brand img { width: auto; height: 62px; }
.auth-card h1 { margin: 0 0 6px; font-size: 1.5rem; color: var(--navy); }
.auth-lede { margin: 0 0 18px; color: var(--muted); font-size: 0.95rem; }
.auth-form .field { margin-bottom: 14px; }
.auth-form label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; color: var(--navy); }
.auth-form input[type="text"], .auth-form input[type="email"], .auth-form input[type="password"],
.auth-form input[type="tel"], .auth-form select {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; background: #fff; color: var(--ink);
}
.auth-form input:focus-visible, .auth-form select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.field-hint { margin: 5px 0 0; font-size: 0.8rem; color: var(--muted); }
.field-with-toggle { position: relative; }
.field-with-toggle input { padding-right: 74px !important; }
.btn-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: 0; background: var(--cream); border-radius: 6px; padding: 6px 10px;
  font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--navy); cursor: pointer;
}
.btn-toggle:hover { background: var(--accent-soft); }
.pw-meter { list-style: none; margin: 8px 0 0; padding: 0; font-size: 0.78rem; color: var(--muted); }
.pw-meter li.ok { color: var(--ok); }
.check-consent { display: grid; grid-template-columns: 20px 1fr; gap: 9px; align-items: start;
  font-weight: 400 !important; font-size: 0.85rem !important; line-height: 1.45; margin: 12px 0; }
.check-consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); }
.btn-block { width: 100%; margin-top: 8px; }
.auth-status { min-height: 1.2em; margin: 10px 0 0; font-size: 0.88rem; }
.auth-status.is-ok { color: var(--ok); }
.auth-status.is-warn { color: var(--danger); }
.auth-alt { margin: 10px 0 0; font-size: 0.9rem; text-align: center; }
.auth-foot { text-align: center; font-size: 0.82rem; color: var(--muted); margin: 16px 0 0; line-height: 1.7; }
.auth-small { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--muted); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* account page */
.account-who { display: flex; gap: 10px; align-items: center; justify-content: space-between;
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; }
.saved-list { display: grid; gap: 8px; margin: 10px 0 22px; }
.saved-item { display: flex; justify-content: space-between; gap: 12px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; color: var(--navy); }
.saved-item:hover { border-color: var(--accent); }
.danger-title { color: var(--danger); }
.danger-zone { border: 1px solid #f0c9c9; background: #fff7f7; border-radius: var(--radius-sm); padding: 14px; }

/* ------------------------------------------------------------- policies */
.wrap-narrow { max-width: 780px; }
.page-head-policy { padding-bottom: 8px; }
.draft-banner {
  background: #fff8ec; border: 1px solid #f2d9a8; border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm); padding: 12px 14px; font-size: 0.88rem; line-height: 1.55; color: #6a4a10;
}
.policy-body h2 { margin: 30px 0 8px; font-size: 1.18rem; color: var(--navy); }
.policy-body p, .policy-body li { line-height: 1.65; }
.policy-body ul.plain, .policy-body ol.plain { padding-left: 20px; }
.policy-body ul.plain li, .policy-body ol.plain li { margin: 6px 0; }
.policy-table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 0.9rem; }
.policy-table th, .policy-table td { border: 1px solid var(--line); padding: 9px 11px; text-align: left; vertical-align: top; }
.policy-table th { background: var(--cream); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.todo { background: #fff3cd; border-bottom: 1px dashed #b98900; padding: 0 3px; font-style: italic; }
.notice { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 0.9rem; }
.notice-warn { background: #fff8ec; border: 1px solid #f2d9a8; }

/* compare bar close */
.compare-bar { position: relative; padding-right: 46px !important; }
.compare-close {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.12); color: #fff; font-size: 1.15rem; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.compare-close:hover { background: var(--accent); border-color: var(--accent); color: #111; }
.compare-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* cookie note */
.cookie-note {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
  background: var(--navy); color: #fff; border-radius: var(--radius); padding: 14px 16px;
  box-shadow: var(--shadow-lg); display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  justify-content: space-between; font-size: 0.88rem; max-width: 900px; margin: 0 auto;
}
.cookie-note[hidden] { display: none; }
.cookie-note p { margin: 0; }
.cookie-note a { color: var(--accent-soft); }

@media (max-width: 900px) {
  .brand-logo { height: 44px; }
  .nav-account { border-left: 0; padding-left: 0; }
}

/* the rate line under the hero search */
.hero-rate { font-size: 0.82rem; color: #b9c8d8; }
.hero-rate strong { color: var(--accent-soft); }