/* ===== Theme tokens =====
   Light is the default palette; :root[data-theme="dark"] overrides it.
   The inline head script sets data-theme before first paint (see
   note in each HTML file's <head>), so there is no flash of the
   wrong theme and no reliance on prefers-color-scheme in the CSS
   itself. Both palettes are derived from the original brand colours
   (warm near-black + amber accent) -- not inverted from one another. */
:root{
  --bg: #f7f5f1;
  --bg-alt: #efece6;
  --surface: #ffffff;
  --ink: #1b1d1f;
  --ink-dim: #464b50;
  --muted: #5f656a;
  --silver: #3a3f44;
  --amber: #ffb020;
  --amber-ink: #8a5400;
  --border: rgba(23,25,27,0.14);
  --border-strong: rgba(23,25,27,0.28);
  --bg-rgb: 247,245,241;
  --font-head: "Oswald", sans-serif;
  --font-body: "Inter", sans-serif;
}
:root[data-theme="dark"]{
  --bg: #111315;
  --bg-alt: #16181b;
  --surface: #1c1f22;
  --ink: #f2f1ee;
  --ink-dim: #b7bcc2;
  /* was #7e858c: 4.08:1 on the darkest surface, under AA for
       the small labels using it. Same hue, lifted until it clears. */
    --muted: #878E94;
  --silver: #c9cdd3;
  --amber: #ffb020;
  --amber-ink: #ffb020;
  --border: rgba(242,241,238,0.1);
  --border-strong: rgba(242,241,238,0.2);
  --bg-rgb: 17,19,21;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
body{ background:var(--bg); color:var(--ink); font-family:var(--font-body); line-height:1.6; }
.container{ max-width:1180px; margin:0 auto; padding:0 24px; }
section{ padding: clamp(56px, 8vw, 110px) 0; }

.demo-bar{
  background: var(--amber); color:#111315; font-family:var(--font-body); font-weight:600; font-size:13.5px;
  text-align:center; padding:10px 16px; position:sticky; top:0; z-index:200;
}
.demo-bar a{ text-decoration:underline; font-weight:700; }

/* The header sticks directly under the demo bar. 37px is the bar at one
   line; script.js measures the real height and overwrites --demo-bar-h,
   because the bar wraps to two or three lines on narrow screens. */
header{ position:sticky; top:var(--demo-bar-h, 37px); z-index:100; background:rgba(var(--bg-rgb),0.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:18px 24px; gap:12px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-size:20px; font-weight:600; letter-spacing:0.02em; text-transform:uppercase; min-width:0; flex-shrink:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brand svg{ flex:none; }
nav.main-nav{ display:flex; gap:32px; }
nav.main-nav a{ font-size:14.5px; font-weight:500; color:var(--ink-dim); transition:color 200ms; }
nav.main-nav a:hover{ color:var(--ink); }
.header-actions{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.btn{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14.5px; padding:13px 24px; border-radius:4px; transition:transform 200ms, background 200ms, color 200ms; }
.btn-amber{ background:var(--amber); color:#111315; }
.btn-amber:hover{ transform:translateY(-2px); background:#ffc451; }
.btn-outline{ border:1px solid var(--border-strong); color:var(--ink); }
.btn-outline:hover{ border-color:var(--amber-ink); color:var(--amber-ink); }
.menu-toggle{ display:none; width:38px; height:38px; flex-direction:column; align-items:center; justify-content:center; gap:5px; flex:none; }
.menu-toggle span{ width:20px; height:2px; background: var(--ink); transition: transform 200ms, opacity 200ms; }
.menu-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2){ opacity:0; }
.menu-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:300;
  background: var(--bg);
  display:flex; flex-direction:column; justify-content:center; gap:32px;
  padding: 100px 24px 40px;
  overflow-y:auto;
  transform: translateY(-100%);
  transition: transform 320ms cubic-bezier(.65,0,.35,1);
}
.mobile-menu.is-open{ transform: translateY(0); }
.mobile-menu nav{ display:flex; flex-direction:column; gap:18px; }
.mobile-menu nav a{ font-family: var(--font-head); font-size: clamp(1.6rem,7vw,2.4rem); font-weight:600; text-transform:uppercase; color: var(--ink); }
.mobile-menu .btn{ align-self:flex-start; margin-top:8px; }

/* ===== Marketplace hero (search bar as centerpiece) ===== */
.hero{ padding-top:clamp(70px,10vw,120px); padding-bottom:clamp(40px,6vw,64px); position:relative; overflow:hidden; }
.hero::before{
  content:""; position:absolute; top:-20%; right:-10%; width:60%; height:140%;
  background: radial-gradient(circle, rgba(255,176,32,0.14), transparent 70%);
  pointer-events:none; z-index:0;
}
.hero-inner{ position:relative; z-index:1; max-width:820px; margin:0 auto; text-align:center; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--amber-ink); border:1px solid var(--border-strong); padding:7px 14px; border-radius:999px; margin-bottom:24px; }
h1{ font-family:var(--font-head); font-size:clamp(2.2rem,5.4vw,3.8rem); font-weight:700; text-transform:uppercase; line-height:1.04; letter-spacing:-0.01em; }
h1 em{ font-style:normal; color:var(--amber-ink); }
.hero p.lead{ margin:22px auto 0; font-size:17px; color:var(--ink-dim); max-width:52ch; }

/* ===== Search bar ===== */
.search-bar{
  background:var(--surface); border:1px solid var(--border-strong); border-radius:10px;
  padding:24px; margin-top:40px; box-shadow:0 24px 60px rgba(0,0,0,0.35);
  display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:16px; align-items:end; text-align:left;
}
.search-field{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.search-field label{ font-family:var(--font-head); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); }
.search-field select{
  width:100%; min-width:0; background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:12px 34px 12px 14px;
  color:var(--ink); font-family:var(--font-body); font-size:14px; appearance:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237e858c'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
  transition:border-color 200ms;
}
.search-field select:focus{ border-color:var(--amber-ink); }
.search-bar .btn{ height:45px; white-space:nowrap; }

.filter-chips{ display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; justify-content:center; }
.filter-chip{
  font-family:var(--font-head); font-size:12.5px; text-transform:uppercase; letter-spacing:0.04em;
  padding:9px 18px; border:1px solid var(--border-strong); border-radius:999px; color:var(--ink-dim);
  transition:border-color 200ms, color 200ms, background 200ms;
}
.filter-chip:hover{ border-color:var(--amber-ink); color:var(--amber-ink); }
.filter-chip.is-active{ border-color:var(--amber-ink); color:var(--amber-ink); background:rgba(255,176,32,0.08); }

/* ===== Trust strip (compact, replaces old stats block) ===== */
.trust-strip{
  padding:30px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-alt);
}
.trust-grid{ display:flex; gap:40px; flex-wrap:wrap; justify-content:center; }
.trust-item{ display:flex; align-items:center; gap:10px; }
.trust-item svg{ width:20px; height:20px; color:var(--amber-ink); flex:none; }
.trust-item strong{ font-family:var(--font-head); color:var(--ink); font-weight:600; font-size:15px; }
.trust-item span{ font-size:13px; color:var(--ink-dim); }

.section-head{ max-width:620px; margin-bottom:48px; }
.tag{ display:inline-block; font-family:var(--font-head); font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--amber-ink); margin-bottom:14px; }
h2{ font-family:var(--font-head); font-size:clamp(1.8rem,4vw,2.8rem); font-weight:600; text-transform:uppercase; letter-spacing:-0.01em; }

/* ===== Listing cards ===== */
.inventory-grid{ display:grid; grid-template-columns:repeat(3, minmax(min(240px,100%),1fr)); gap:24px; }
.car-card{ position:relative; min-width:0; background:var(--surface); border:1px solid var(--border); border-radius:8px; overflow:hidden; transition:transform 200ms, border-color 200ms; }
.car-card:hover{ transform:translateY(-4px); border-color:var(--border-strong); }
.car-badge{
  position:absolute; top:14px; left:14px; z-index:2;
  font-family:var(--font-head); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
  padding:5px 12px; border-radius:999px; background:var(--amber); color:#111315;
}
.car-media{ position:relative; height:160px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, #22262a, #141618); }
.car-media svg{ width:88px; height:88px; color:var(--amber); opacity:0.9; }
.car-body{ padding:22px; }
.car-body h3{ font-family:var(--font-head); font-size:19px; font-weight:600; }
.car-meta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; font-size:13px; color:var(--muted); }
.car-price{ margin-top:16px; font-family:var(--font-head); font-size:22px; color:var(--amber-ink); font-weight:600; }

.process{ background:var(--bg-alt); }
.process-grid{ display:grid; grid-template-columns:repeat(3, minmax(min(200px,100%),1fr)); gap:28px; }
.process-step{ min-width:0; border-top:2px solid var(--amber); padding-top:20px; }
.process-num{ font-family:var(--font-head); font-size:14px; color:var(--muted); }
.process-step h3{ font-family:var(--font-head); font-size:20px; margin:10px 0 10px; text-transform:uppercase; }
.process-step p{ color:var(--ink-dim); font-size:15px; }

.cta-band{ text-align:center; }
.cta-band .btn{ margin-top:26px; }

footer{ border-top:1px solid var(--border); padding:40px 0; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; font-size:13.5px; color:var(--muted); }
.footer-inner .credit-link{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.footer-inner .credit-link:hover{ color:var(--amber-ink); }

.reveal{ opacity:0; transform:translateY(20px); transition:opacity 600ms ease, transform 600ms ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------------------------------------------------------
   Interior page banner, homepage teaser sections, and the
   contact page form. All reuse the color/spacing/type tokens
   above.
--------------------------------------------------------- */

.page-hero{
  padding: clamp(64px, 9vw, 100px) 0 clamp(48px, 6vw, 72px);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.page-hero::before{
  content:""; position:absolute; top:-30%; right:-10%; width:50%; height:160%;
  background: radial-gradient(circle, rgba(255,176,32,0.14), transparent 70%);
  pointer-events:none;
}
.page-hero-inner{ position:relative; z-index:1; max-width:680px; }
.page-hero .tag{ margin-bottom:16px; }
.page-hero p.lead{ margin-top:18px; font-size:17px; color:var(--ink-dim); max-width:56ch; }

.teaser-cta{ text-align:center; margin-top:44px; }

/* ===== Get an Instant Offer input (sell page) ===== */
.offer-box{ display:flex; gap:12px; margin-top:28px; max-width:520px; flex-wrap:wrap; }
.offer-input{
  flex:1; min-width:220px; background:var(--surface); border:1px solid var(--border); border-radius:6px;
  padding:13px 16px; color:var(--ink); font-family:var(--font-body); font-size:14.5px;
}
.offer-input::placeholder{ color:var(--muted); }
.offer-input:focus{ border-color:var(--amber-ink); }

.contact-grid{ display:grid; grid-template-columns: minmax(min(280px,100%),0.9fr) minmax(min(280px,100%),1.3fr); gap:56px; }
.contact-intro{ color:var(--ink-dim); font-size:16px; margin-bottom:32px; max-width:44ch; }
.contact-detail{ margin-bottom:22px; }
.contact-detail .label{ display:block; font-family:var(--font-head); font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--amber-ink); margin-bottom:6px; }
.contact-detail .value{ font-size:16px; color:var(--ink); }

.contact-form{ display:grid; gap:20px; min-width:0; }
.form-field label{ display:block; font-size:13.5px; font-weight:500; color:var(--ink-dim); margin-bottom:8px; }
.form-field input,
.form-field textarea{
  width:100%; background:var(--surface); border:1px solid var(--border-strong); border-radius:4px;
  padding:13px 16px; color:var(--ink); font-family:var(--font-body); font-size:14.5px; line-height:1.5;
  transition:border-color 200ms;
}
.form-field input:focus,
.form-field textarea:focus{ border-color:var(--amber-ink); }
.form-field textarea{ min-height:140px; resize:vertical; }
.contact-form .btn{ justify-self:start; }

@media (max-width:900px){
  nav.main-nav{ display:none; }
  .menu-toggle{ display:flex; }
  .search-bar{ grid-template-columns:1fr 1fr; }
  .search-bar .btn{ grid-column:span 2; justify-content:center; }
  .inventory-grid, .process-grid{ grid-template-columns:1fr; }
  .trust-grid{ gap:24px; }
  .contact-grid{ grid-template-columns:1fr; gap:40px; }
}
@media (max-width:560px){
  .search-bar{ grid-template-columns:1fr; }
  .search-bar .btn{ grid-column:span 1; }
}
@media (max-width:420px){
  .header-inner{ padding:14px 16px; gap:8px; }
  .header-actions{ gap:8px; }
  .header-actions .btn-amber{ padding:10px 14px; font-size:13px; }
  .brand{ font-size:16px; }
  .brand svg{ width:22px; height:22px; }
  .demo-bar{ padding:8px 10px; font-size:12px; }
  .kiros-badge{ font-size:11px; padding:6px 10px; left:10px; bottom:10px; }
}

/* ===== Skip link ===== */
.skip-link{
  position:absolute; left:16px; top:-60px; z-index:1000;
  background:var(--amber); color:#111315; font-weight:600; font-size:14px;
  padding:12px 20px; border-radius:4px; transition:top 200ms ease;
}
.skip-link:focus{ top:16px; }

/* ===== Theme toggle ===== */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:999px; border:1px solid var(--border-strong);
  color:var(--ink); flex:none; transition:border-color 200ms, color 200ms, background 200ms;
}
.theme-toggle:hover{ border-color:var(--amber-ink); color:var(--amber-ink); }
.theme-toggle svg{ width:18px; height:18px; pointer-events:none; }
:root[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }
:root:not([data-theme="dark"]) .theme-toggle .icon-sun{ display:none; }

/* ===== Back to top ===== */
.back-to-top{
  position:fixed; right:24px; bottom:24px; z-index:150;
  width:46px; height:46px; border-radius:999px;
  background:var(--amber); color:#111315; border:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.28);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity 220ms ease, transform 220ms ease, visibility 220ms;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top svg{ width:20px; height:20px; }
.back-to-top:hover{ background:#ffc451; }
@media (max-width:420px){
  .back-to-top{ right:16px; bottom:16px; width:42px; height:42px; }
}

/* ===== Fixed "Demo site by Kirosconsult" badge ===== */
.kiros-badge{
  position:fixed; left:16px; bottom:16px; z-index:150;
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(var(--bg-rgb),0.92); color:var(--ink-dim);
  border:1px solid var(--border-strong); border-radius:999px;
  padding:8px 14px; font-size:12.5px; font-weight:500;
  backdrop-filter:blur(6px);
}
.kiros-badge a{ color:var(--amber-ink); font-weight:600; text-decoration:underline; text-underline-offset:2px; }

/* ===== Visible focus styles (keyboard-only) ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--amber-ink);
  outline-offset:2px;
  border-radius:2px;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
}


/* ── Kirosconsult shared compliance fixes, 21 Sep 2026 ───────────────────────
   1. The off-canvas menu is moved with transform only, so its links stayed in
      the keyboard tab order while off screen. visibility:hidden takes them out;
      the 320ms delay lets the slide-out animation finish before it disappears.
   2. The menu overlay (z-index 300) sat above the header (100), so the burger
      could not be tapped a second time to close it. The header now sits above
      the overlay. The menu already pads 100px at the top, so nothing is hidden.
   3. The sticky header's top offset is measured at runtime (--demo-bar-h). That
      fix lives on the header rule itself, near the top of this file. */
.mobile-menu{visibility:hidden;transition:transform 320ms cubic-bezier(.65,0,.35,1),visibility 0s linear 320ms}
.mobile-menu.is-open{visibility:visible;transition:transform 320ms cubic-bezier(.65,0,.35,1),visibility 0s linear 0s}
header{z-index:400}
@media (prefers-reduced-motion:reduce){
  .mobile-menu,.mobile-menu.is-open{transition:none}
}

/* Close button inside the overlay. The hamburger in <header> is buried by the
   open .mobile-menu (z-index:300), so the menu carries its own close
   affordance. Fixed, not absolute, so it stays put if the menu has to scroll
   on a short (landscape) viewport; the open menu's transform makes it the
   containing block, and it is hidden outright while the menu is closed. */
.mobile-menu-close{
  position:fixed; top:18px; right:18px;
  top: calc(18px + env(safe-area-inset-top, 0px));
  right: calc(18px + env(safe-area-inset-right, 0px));
  width:44px; height:44px; display:none;
  align-items:center; justify-content:center; color:var(--ink);
}
.mobile-menu.is-open .mobile-menu-close{ display:flex; }
.mobile-menu-close svg{ width:24px; height:24px; }

/* Scoped over the shared sweep's header{z-index:400}. The sweep raises the
   header above the overlay so the burger stays tappable; this demo instead
   closes from a button inside the overlay (and Escape), so while the menu is
   open the header drops back under it and stays hidden. One close control,
   not two, and no reliance on backdrop-filter stacking on iOS Safari. */
body.menu-open header{ z-index:100; }


/* ── No-JS fallback for the demo bar height, 21 Sep 2026 ────────────────────
   The header sits under the demo bar using --demo-bar-h, which JavaScript
   measures at runtime. If the script does not run, the hardcoded fallback is
   all there is — and a single value cannot be right at both widths, because
   the bar is about 41px on one line and about 62px once it wraps below ~500px.
   A desktop-tuned fallback overlaps the header on a phone; a mobile-tuned one
   leaves a gap on desktop. Declaring the token responsively gives a sensible
   value at BOTH widths without trading one off against the other. JS still
   overrides it with the measured height the moment it runs. */
:root{ --demo-bar-h: 41px; }
@media (max-width: 500px){ :root{ --demo-bar-h: 62px; } }