/* =========================================================================
   Country Auto — shared site styles
   Loaded by every page (country-auto-landing.html, full-inventory.html,
   vehicle.html) BEFORE that page's own <style> block. Anything that should
   look identical on every page lives here; page-specific rules stay inline.
   Design system: see design/DESIGN.md.

   Responsive model: desktop styles are the base. Everything at or below
   860px CSS px is treated as "compact" — single column, stacked nav,
   full-width buttons, >=44px touch targets. A tighter pass kicks in at
   480px for small phones. 860px (not ~600px) is deliberate: real phones,
   foldables and small tablets frequently report a layout width in the
   700-820px range, and a narrower breakpoint leaves them on the desktop
   layout scaled down to something unreadable.

   Card grids use `repeat(auto-fill, minmax(min(100%, Npx), 1fr))` so the
   column count is fluid and the grid can never force the page wider than
   the screen (the `min(100%, Npx)` term guarantees a single column fits
   any width). That, plus `overflow-x:clip` on the root and `max-width:100%`
   on images, keeps the layout viewport pinned to the real device width so
   the media queries below actually fire on a phone.
   ========================================================================= */

/* ---- Cross-page soft transitions ----
   Native View Transitions API (Chrome/Edge today, no-op elsewhere — pure
   progressive enhancement, nothing to feature-detect). Turns the hard
   reload between pages into a soft cross-fade instead. */
@view-transition {
  navigation: auto;
}

/* ---- Design tokens ---- */
:root{
  --bg:#0B0B0D;
  --bg-raised:#17171A;
  --bg-sunken:#111113;
  --text:#F5F5F4;
  --text-dim:#A1A1AA;
  --accent:#F97316;        /* warm orange — CTAs, prices, links, highlights.
                              ~7:1 on the near-black bg (WCAG AAA); tests as
                              the strongest converting CTA hue and is far
                              easier on the eyes than red-on-black. */
  --accent-hover:#FB923C;   /* one step lighter — button hover fill */
  --accent-active:#EA580C;  /* one step darker — button press/active fill */
  --accent-soft:#2A1A0D;    /* dark burnt-orange tint — ghost-button hover wash */
  --accent-2:#F97316;
  --line:#2A2A2E;
  --shadow:rgba(0,0,0,0.45);

  --maxw:1280px;            /* single site-wide content width */
  --gutter:28px;            /* page side padding — shrinks on small screens */
  --radius-panel:10px;      /* cards, panels, media frames */
  --radius-control:6px;     /* buttons, inputs, selects, pills */
  --tap:44px;               /* minimum interactive target (WCAG / Apple / Google) */

  color-scheme: dark;
}
/* One dark background for the whole site — no light "halo" tier
   (removed 2026-09-10 for a consistent look across every page). */

/* ---- Reset / base ---- */
*{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  overflow-x:clip;            /* nothing can push the layout viewport wide */
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Space Grotesk', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight:600;
  margin:0;
  color:var(--text);
  text-wrap:balance;
  line-height:1.15;
}
/* H1 gets extra weight + tighter tracking — more visual authority on the
   one headline per page that matters most (hero claim / vehicle name).
   H2/H3 stay at 600 so this doesn't read as heavy-handed everywhere. */
h1{ font-weight:700; letter-spacing:-0.015em; }

a{ color:inherit; }

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

.mono{
  font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, "Menlo", monospace;
  font-variant-numeric:tabular-nums;
}

/* Form controls never render below 16px — anything smaller makes iOS
   Safari zoom in on focus, which leaves the whole page zoomed. */
input, select, textarea{ font-size:16px; }

/* ---- Layout container ---- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }

/* ---- Nav ----
   Desktop: wordmark on the left, the links + call/Ask-Dylan buttons on the
   right. Below 860px (see the compact block) the links + buttons collapse
   into a slide-in drawer opened by the hamburger button; site.js drives it. */
.nav{
  position:sticky; top:0; z-index:40;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:16px var(--gutter);
  display:flex; align-items:center; gap:20px;
}

.wordmark{
  font-family:'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-weight:700; font-size:1.15rem; line-height:1.15;
  text-decoration:none; display:flex; flex-direction:column; flex-shrink:0;
}
.wordmark span{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-weight:500; font-size:0.7rem; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--text-dim); margin-top:2px;
}

.nav-menu{
  margin-left:auto; display:flex; align-items:center; gap:30px;
}
.nav-links{ display:flex; gap:22px; align-items:center; }
.nav-links a{
  font-family:'Inter'; font-weight:600; font-size:0.9rem;
  text-decoration:none; color:var(--text-dim); transition:color 0.15s ease;
}
.nav-links a:hover{ color:var(--text); }
.nav-links a.active{ color:var(--accent); }
.nav-cta{ display:flex; gap:10px; align-items:center; }

/* Hamburger + close + backdrop: only real on the compact layout */
.nav-toggle, .nav-close, .nav-backdrop{ display:none; }
.nav-toggle{
  flex-shrink:0; width:var(--tap); height:var(--tap); margin-left:auto;
  background:none; border:1px solid var(--line); border-radius:var(--radius-control);
  cursor:pointer; padding:0;
  align-items:center; justify-content:center; gap:5px; flex-direction:column;
}
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--text); border-radius:2px; }
.nav-close{
  position:absolute; top:14px; right:16px;
  width:var(--tap); height:var(--tap); font-size:1.7rem; line-height:1;
  background:none; border:none; color:var(--text-dim); cursor:pointer;
}
.nav-close:hover{ color:var(--text); }

/* ---- Buttons ----
   Rebuilt 2026-09-11 — the first pass (opacity 0.9, then a brightness
   filter) still read as barely-there. Current model, based on standard
   hover/press guidance (a real colour shift beats a subtle filter; the
   pressed state should feel like it's physically sinking in):
     hover  -> fill shifts to a genuinely different shade (--accent-hover /
               --accent-soft), lifts 2px, gains a soft colour-matched glow.
     active -> fill shifts darker/deeper (--accent-active), drops back to
               resting position and shrinks slightly (scale), shadow
               collapses — reads as "pressed in," not just "un-hovered." */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Inter'; font-weight:600; font-size:0.95rem;
  min-height:var(--tap);
  padding:11px 22px; border-radius:var(--radius-control);
  border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease,
             transform 0.1s ease, box-shadow 0.15s ease;
}
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.btn-primary{ background:var(--accent); color:var(--bg); }
.btn-primary:hover{
  background:var(--accent-hover); transform:translateY(-2px);
  box-shadow:0 12px 24px -10px rgba(249,115,22,0.55);
}
.btn-primary:active{
  background:var(--accent-active); transform:translateY(0) scale(0.97);
  box-shadow:0 2px 6px -2px rgba(249,115,22,0.4); transition-duration:0.05s;
}
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--line); }
.btn-ghost:hover{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.btn-ghost:active{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); transform:translateY(0) scale(0.97); transition-duration:0.05s; }
.btn-sm{ min-height:40px; padding:9px 16px; font-size:0.9rem; }
.btn-block{ width:100%; }

/* ---- Small shared bits ---- */
.eyebrow{
  font-family:'IBM Plex Mono'; font-size:0.78rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--accent); margin:0 0 12px;
}
.back-link{
  display:inline-flex; align-items:center; min-height:var(--tap);
  font-size:0.92rem; color:var(--text-dim);
  text-decoration:underline; text-underline-offset:3px;
}
.back-link:hover{ color:var(--accent); }

/* ---- Section vertical rhythm ----
   The default top/bottom padding for a bare <section> — .hero and other
   more specific selectors override it where needed. Was landing-only
   until .meet-dylan (below) needed it too on deliveries.html and silently
   got zero padding instead — moved here so any page's <section> gets the
   same breathing room by default. See the mobile steps further down. */
section{ padding:88px 0; }

/* ---- Meet Dylan card ----
   Shared between the landing page (right after the hero) and the
   deliveries gallery (top of the page) so his intro looks identical
   wherever it appears. `.meet-dylan` is the optional full-bleed band
   wrapper (sunken background, and relies on the section{} rule just
   above for its vertical padding); `.dylan-card` is the actual
   two-column layout and works with or without that wrapper. */
.meet-dylan{ background:var(--bg-sunken); border-bottom:1px solid var(--line); }
.dylan-card{ display:grid; grid-template-columns:280px 1fr; gap:40px; align-items:start; }
/* Same optional Blackstone-style angled-crop motif as the buttons above,
   applied to one deliberate spot (Dylan's portrait) rather than repeated
   across every inventory thumbnail, where a dozen-plus cut corners on one
   screen would read as busy rather than a restrained accent. */
.specialist-photo{
  aspect-ratio:4/5;
  clip-path:polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
  overflow:hidden;
  border:1px solid var(--line); background:var(--bg-raised); cursor:pointer;
}
.specialist-photo img{ width:100%; height:100%; object-fit:cover; object-position:20% 22%; display:block; }
.dylan-card .role{ font-family:'IBM Plex Mono'; font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent-2); margin:4px 0 14px; }
.dylan-quote{
  margin:0 0 16px; padding-left:16px; border-left:2px solid var(--accent);
  font-family:'Space Grotesk'; font-size:1.05rem; font-weight:500; line-height:1.45;
  color:var(--text); max-width:52ch; font-style:italic;
}
.dylan-card p:not(.eyebrow){ color:var(--text-dim); max-width:56ch; margin:0 0 18px; }
.specialist-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---- Sticky mini-CTA ----
   Shared between vehicle.html (appears once the price/CTA block scrolls out
   of view, via IntersectionObserver on .veh-price-row) and the landing page
   (appears once the hero's own CTAs scroll out of view, via IntersectionObserver
   on .hero-actions) - same bar, same behavior, different trigger element per
   page. Keeps a primary action reachable through a long page instead of
   requiring a scroll back to the top. */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--bg-raised); border-top:1px solid var(--line);
  box-shadow:0 -12px 30px -18px rgba(0,0,0,0.6);
  transform:translateY(100%); pointer-events:none;
  transition:transform 0.3s ease;
}
.sticky-cta.visible{ transform:translateY(0); pointer-events:auto; }
.sticky-cta-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-block:12px;  /* also carries .wrap — it supplies the horizontal gutter */
}
.sticky-cta-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.sticky-cta-name{ font-family:'Inter'; font-weight:600; font-size:0.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Real bug: unlike .sticky-cta-name right above it, this had no overflow
   handling - on a narrow phone screen a long price (or, on the homepage's
   version of this bar, its longer static string) simply painted past its
   box edge instead of stopping, overlapping the button next to it rather
   than truncating. */
.sticky-cta-price{
  font-size:0.88rem; color:var(--accent); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.sticky-cta-actions{ display:flex; gap:8px; flex-shrink:0; }
@media (max-width:600px){
  .sticky-cta-name{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .sticky-cta{ transition:none; } }

/* ---- Footer ----
   One footer, identical on all four pages — moved here 2026-09-11 (was
   duplicated: the landing page had the real one, the other three pages
   each had just a one-line disclaimer, so they visibly didn't match). */
footer{ border-top:1px solid var(--line); padding:48px 0 36px; }
.footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:36px; }
footer h4{ font-family:'IBM Plex Mono'; font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-dim); margin:0 0 12px; }
footer p{ margin:0 0 6px; font-size:0.92rem; }
.hours-row{ display:flex; justify-content:space-between; font-size:0.88rem; padding:3px 0; }
.hours-row .d{ color:var(--text-dim); }
.hours-row .t{ font-family:'IBM Plex Mono'; }
.social-row{ display:flex; gap:14px; margin-top:12px; font-size:0.85rem; }
.social-row a{ text-decoration:underline; text-underline-offset:3px; color:var(--text-dim); }
.social-row a:hover{ color:var(--accent); }
/* the footer's own Text/Call row — a lighter-weight cousin of .form-actions
   (the lead-form's button row), scoped separately since it's used sitewide */
.footer-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
/* .fine is always `<div class="wrap fine">` — no own max-width, or it
   fights .wrap's and the auto margins center the block away from the
   gutter every other footer element lines up to. */
.fine{ margin-top:36px; padding-top:20px; border-top:1px solid var(--line); font-size:0.82rem; color:var(--text-dim); }
.fine a{ color:var(--accent-2); }

/* ---- Scroll reveal ----
   See the IntersectionObserver in site.js. Kept to a small fade + rise,
   not a slide-from-the-side or anything attention-grabbing — this matches
   the "restrained motion" rule in design/DESIGN.md. */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in-view{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---- Lightbox ----
   Full-screen photo viewer shared by the landing page (Dylan / delivery
   photos) and deliveries.html. Markup: a #lightbox element (see either
   page); behaviour: window.initLightbox in site.js, auto-run when the page
   sets window.LIGHTBOX_PHOTOS. The vehicle-page gallery is a separate,
   inline component — this is only the modal viewer. */
.lightbox{
  position:fixed; inset:0; z-index:100; background:rgba(5,5,6,0.92);
  display:flex; align-items:center; justify-content:center; padding:32px;
}
.lightbox[hidden]{ display:none; }
.lightbox img{
  max-width:min(1100px, 90vw); max-height:80vh; object-fit:contain;
  border-radius:var(--radius-panel); display:block;
  box-shadow:0 30px 60px -20px var(--shadow);
}
.lightbox-close, .lightbox-arrow{
  position:absolute; background:var(--bg-raised); border:1px solid var(--line);
  border-radius:50%; color:var(--text); line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-close:hover, .lightbox-arrow:hover{ border-color:var(--accent); color:var(--accent); }
.lightbox-close{ top:18px; right:20px; width:var(--tap); height:var(--tap); font-size:1.5rem; }
.lightbox-arrow{ top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:1.7rem; }
.lightbox-arrow.prev{ left:16px; }
.lightbox-arrow.next{ right:16px; }
.lightbox-caption{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  font-family:'IBM Plex Mono'; font-size:0.8rem; color:var(--text);
  background:rgba(11,11,13,0.75); border:1px solid var(--line);
  padding:7px 16px; border-radius:20px; white-space:nowrap;
}
@media (max-width:600px){
  .lightbox{ padding:16px; }
  .lightbox-arrow{ width:var(--tap); height:var(--tap); font-size:1.4rem; }
  .lightbox-arrow.prev{ left:6px; } .lightbox-arrow.next{ right:6px; }
  .lightbox-caption{ font-size:0.72rem; padding:6px 12px; max-width:88vw; overflow:hidden; text-overflow:ellipsis; }
}

/* =========================================================================
   COMPACT LAYOUT — phones, foldables, small tablets  (<= 860px)
   ========================================================================= */
@media (max-width:860px){
  :root{ --gutter:22px; }

  section{ padding:44px 0; }

  /* ---- Nav becomes a hamburger + slide-in drawer ---- */
  .nav-inner{ justify-content:space-between; }
  .nav-toggle{ display:flex; }

  .nav-menu{
    position:fixed; top:0; right:0; bottom:0;
    width:min(82vw, 330px);
    background:var(--bg-raised); border-left:1px solid var(--line);
    box-shadow:-16px 0 40px -20px #000;
    padding:64px 22px 24px;
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:6px;
    transform:translateX(105%); visibility:hidden;
    transition:transform 0.25s ease, visibility 0s linear 0.25s;
    z-index:60; overflow-y:auto;
  }
  .nav-open .nav-menu{
    transform:translateX(0); visibility:visible;
    transition:transform 0.25s ease;
  }
  .nav-close{ display:block; }

  .nav-links{ flex-direction:column; align-items:stretch; gap:0; width:100%; }
  .nav-links a{
    min-height:52px; display:flex; align-items:center;
    font-size:1.05rem; border-bottom:1px solid var(--line);
  }
  .nav-links a:first-child{ border-top:1px solid var(--line); }

  .nav-cta{ flex-direction:column; align-items:stretch; gap:10px; width:100%; margin-top:16px; }
  .nav-cta .btn{ width:100%; min-height:var(--tap); padding:12px 20px; font-size:1rem; }

  .nav-backdrop{
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,0.55); z-index:55;
  }
  .nav-open .nav-backdrop{ display:block; }
  @media (prefers-reduced-motion: reduce){ .nav-menu{ transition:none; } }

  h1{ font-size:1.95rem; }
  h2{ font-size:1.5rem; }

  .eyebrow{ font-size:0.8rem; letter-spacing:0.1em; margin-bottom:10px; }
  footer{ padding:32px 0 26px; }
  .footer-grid{ grid-template-columns:1fr; gap:26px; }
  .footer-actions{ flex-direction:column; align-items:stretch; }

  .dylan-card{ grid-template-columns:1fr; text-align:left; gap:18px; }
  .specialist-photo{ max-width:220px; aspect-ratio:1/1; }
}

body.nav-locked{ overflow:hidden; }

@media (max-width:480px){
  :root{ --gutter:18px; }
  section{ padding:36px 0; }
  h1{ font-size:1.72rem; }
  .btn{ font-size:1rem; }
}