/* =========================================================
   City Limit Auto — Shared Stylesheet
   Brand palette matched to the company logo: black, steel blue,
   white. Used by every page. Edit here to change the whole site.
   ========================================================= */

:root{
  --asphalt:#000000;
  --asphalt-2:#12161B;
  --steel:#33414D;
  --steel-light:#8FA6B8;
  --paper:#EEF1F4;
  --paper-dim:#D9DFE4;
  --blue:#1C97DD;
  --rust:#B33A3A;
  --green:#3E7B4F;
  --amber:#C77D1E;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--asphalt);
  font-family:'Inter',sans-serif;
  line-height:1.5;
}
h1,h2,h3,.display{
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.02em;
}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}

/* Skip link */
.skip-link{position:absolute;left:-999px;top:0;background:var(--blue);color:#fff;padding:10px 16px;z-index:200;font-weight:600;}
.skip-link:focus{left:12px;top:12px;}

/* ---------- Header / Nav ---------- */
header{
  background:var(--asphalt);
  color:var(--paper);
  position:sticky;top:0;z-index:100;
  border-bottom:4px solid var(--blue);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;max-width:1180px;margin:0 auto;}
.brand{display:flex;align-items:center;gap:12px;}
.brand-mark{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;display:block;object-fit:cover;
}
.brand-text{font-family:'Oswald',sans-serif;font-weight:600;font-size:19px;letter-spacing:0.03em;}
.brand-text span{display:block;font-family:'Inter',sans-serif;font-size:10px;font-weight:500;letter-spacing:0.18em;color:var(--steel-light);text-transform:uppercase;}
nav ul{list-style:none;display:flex;gap:32px;}
nav ul a{font-size:14px;font-weight:500;letter-spacing:0.03em;text-transform:uppercase;color:var(--paper-dim);transition:color .15s;}
nav ul a:hover,nav ul a:focus-visible,nav ul a[aria-current="page"]{color:var(--blue);}
.nav-cta{
  background:var(--blue);color:#fff;padding:10px 20px;
  font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:0.05em;
  border:2px solid var(--blue);
}
.nav-cta:hover{background:transparent;color:var(--blue);}
.mobile-toggle{display:none;background:none;border:none;color:var(--paper);font-size:26px;cursor:pointer;}

/* Language toggle — stays visible at every width, including narrow phones. */
.lang-toggle{
  font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;
  letter-spacing:0.08em;color:var(--paper-dim);
  border:1px solid var(--steel);padding:7px 10px;flex-shrink:0;
  margin-left:14px;
}
.lang-toggle:hover,.lang-toggle:focus-visible{color:var(--blue);border-color:var(--blue);}

/* Spanish suggestion banner */
.lang-banner{
  background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:10px 44px 10px 16px;font-size:14px;position:relative;flex-wrap:wrap;
}
.lang-banner-go{
  background:#fff;color:var(--blue);font-weight:700;font-size:13px;
  padding:6px 14px;text-transform:uppercase;letter-spacing:0.04em;white-space:nowrap;
}
.lang-banner-close{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:#fff;font-size:24px;line-height:1;cursor:pointer;
}

/* ---------- Hero ---------- */
.hero{
  background:var(--asphalt);
  color:var(--paper);
  position:relative;
  overflow:hidden;
  padding:64px 0 0;
  background-image:
    repeating-linear-gradient(135deg, rgba(28,151,221,0.06) 0px, rgba(28,151,221,0.06) 2px, transparent 2px, transparent 26px);
}
.hero-art{
  position:absolute;
  right:0;top:0;bottom:0;
  width:52%;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.hero-art::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg, var(--asphalt) 0%, rgba(0,0,0,0.55) 30%, rgba(0,0,0,0.15) 100%);
}
.hero-art img{width:100%;height:100%;object-fit:cover;display:block;}
.hero-inner{position:relative;z-index:1;max-width:640px;}
.hero-eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--blue);
  letter-spacing:0.12em;text-transform:uppercase;margin-bottom:18px;
  display:flex;align-items:center;gap:10px;
}
.hero-eyebrow::before{content:'';width:8px;height:8px;background:var(--blue);display:inline-block;}
.hero h1{font-size:clamp(38px,5.2vw,68px);line-height:0.98;font-weight:700;margin-bottom:22px;}
.hero h1 em{font-style:normal;color:var(--blue);}
.hero p{font-size:17px;color:var(--paper-dim);max-width:480px;margin-bottom:30px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:56px;}
.btn{
  display:inline-block;padding:15px 26px;font-weight:700;font-size:14px;
  text-transform:uppercase;letter-spacing:0.05em;border:2px solid var(--blue);
  cursor:pointer;background:none;font-family:inherit;
}
.btn-primary{background:var(--blue);color:#fff;}
.btn-primary:hover{background:transparent;color:var(--blue);}
.btn-ghost{background:transparent;color:var(--paper);border-color:var(--steel);}
.btn-ghost:hover{border-color:var(--paper);}
.btn-dark{background:var(--asphalt);color:var(--paper);border:2px solid var(--asphalt);}
.btn-dark:hover{background:transparent;color:var(--asphalt);}

/* Manifest ticket */
.manifest{background:var(--paper);color:var(--asphalt);border:1px solid var(--asphalt);align-self:start;}
.manifest-head{
  background:var(--asphalt);color:var(--paper);padding:12px 18px;
  display:flex;justify-content:space-between;align-items:center;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;
}
.manifest-head .stamp{color:var(--blue);}
.manifest-body{padding:22px 18px;}
.manifest-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed var(--paper-dim);font-size:14px;}
.manifest-row:last-child{border-bottom:none;}
.manifest-row dt{color:var(--steel);font-weight:500;}
.manifest-row dd{font-family:'IBM Plex Mono',monospace;font-weight:600;}

.stat-strip{position:relative;z-index:2;background:var(--asphalt-2);border-top:1px solid rgba(255,255,255,0.08);}
.stat-strip .wrap{display:flex;justify-content:space-between;padding:22px 28px;flex-wrap:wrap;gap:18px;}
.stat{color:var(--paper-dim);font-size:13px;}
.stat b{display:block;font-family:'Oswald',sans-serif;font-size:26px;color:var(--blue);font-weight:600;}

/* ---------- Page header (for non-home pages) ---------- */
.page-header{background:var(--asphalt);color:var(--paper);padding:56px 0;border-bottom:1px solid var(--steel);}
.page-header .section-eyebrow{color:var(--blue);}
.page-header h1{font-size:clamp(30px,4vw,48px);font-weight:700;}
.page-header p{color:var(--paper-dim);max-width:520px;margin-top:12px;font-size:16px;}

/* ---------- Sections ---------- */
.section{padding:76px 0;}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:36px;flex-wrap:wrap;gap:16px;
  border-bottom:3px solid var(--asphalt);padding-bottom:18px;
}
.section-eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.1em;
  color:var(--rust);text-transform:uppercase;margin-bottom:6px;
}
.section-head h2{font-size:clamp(26px,3.4vw,38px);font-weight:600;}
.section-sub{color:var(--steel);font-size:15px;max-width:420px;}

/* ---------- Inventory filter bar ---------- */
/* Populated by JS from the actual published inventory — see renderInventory()
   in site.js. Controls, count, and clear button are generated, not hardcoded,
   so a filter never offers an option that returns zero results. */
.filter-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:32px;padding:16px;background:var(--asphalt);}
.filter-bar select,.filter-bar input:not([type="range"]){
  font-family:'Inter',sans-serif;font-size:14px;padding:10px 12px;
  border:1px solid var(--steel);background:var(--asphalt-2);color:var(--paper);
}
.filter-bar input[type="text"]{flex:2 1 200px;min-width:180px;}
.filter-bar select{flex:1 1 150px;min-width:130px;}
.filter-bar input::placeholder{color:var(--steel-light);}
.filter-bar select:focus,.filter-bar input:not([type="range"]):focus{outline:2px solid var(--blue);outline-offset:1px;}

/* Dual/single-handle range sliders (Year, Price) */
.range-slider{flex:2 1 240px;padding:6px 4px;}
.range-slider-label{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:'Inter',sans-serif;font-size:12px;color:var(--steel-light);
  text-transform:uppercase;letter-spacing:0.05em;margin-bottom:14px;
}
.range-slider-value{font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--paper);letter-spacing:0.02em;text-transform:none;}
.range-track{position:relative;height:4px;background:var(--steel);border-radius:2px;}
.range-fill{position:absolute;top:0;bottom:0;background:var(--blue);border-radius:2px;}
.range-input{
  position:absolute;top:50%;left:0;width:100%;height:4px;transform:translateY(-50%);
  -webkit-appearance:none;appearance:none;background:transparent;margin:0;pointer-events:none;
}
.range-input::-webkit-slider-runnable-track{background:transparent;height:4px;}
.range-input::-moz-range-track{background:transparent;height:4px;}
.range-input::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;pointer-events:auto;
  width:18px;height:18px;border-radius:50%;margin-top:-7px;
  background:var(--blue);border:2px solid var(--paper);cursor:pointer;
}
.range-input::-moz-range-thumb{
  pointer-events:auto;width:18px;height:18px;border-radius:50%;border:2px solid var(--paper);
  background:var(--blue);cursor:pointer;
}
.range-input:focus-visible::-webkit-slider-thumb{outline:2px solid var(--blue);outline-offset:2px;}
.range-input:focus-visible::-moz-range-thumb{outline:2px solid var(--blue);outline-offset:2px;}
.filter-checkbox{
  display:flex;align-items:center;gap:8px;font-family:'Inter',sans-serif;
  font-size:14px;color:var(--paper-dim);white-space:nowrap;cursor:pointer;
}
.filter-checkbox input{width:auto;accent-color:var(--blue);cursor:pointer;}
.filter-clear{
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
  color:var(--steel-light);background:none;border:1px solid var(--steel);
  padding:10px 14px;cursor:pointer;white-space:nowrap;
}
.filter-clear:hover{color:var(--paper);border-color:var(--paper-dim);}
.filter-count{
  flex-basis:100%;font-family:'IBM Plex Mono',monospace;font-size:12px;
  color:var(--steel-light);letter-spacing:0.03em;
}
.filter-back{
  display:inline-block;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
  color:var(--steel-light);background:none;border:1px solid var(--steel);
  padding:10px 14px;white-space:nowrap;
}
.filter-back:hover{color:var(--paper);border-color:var(--paper-dim);}

/* ---------- Inventory grid / trailer tag cards ---------- */
.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;}
.tag-card{background:var(--asphalt);color:var(--paper);border:1px solid var(--steel);border-radius:12px;overflow:hidden;position:relative;}
.tag-card.clickable{cursor:pointer;}
.tag-card .tag-photo{
  /* Staff shoot trailer photos in portrait (phone held vertically, ~3:4).
     A square box crops a little off the top/bottom (sky, pavement) but
     keeps the full width of the trailer visible — a wide/short box instead
     sliced off both sides of the trailer, and matching the full 3:4 photo
     made the cards too tall to browse comfortably. */
  aspect-ratio:1/1;background:linear-gradient(180deg, var(--asphalt-2) 0%, var(--asphalt) 100%);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
  border-bottom:1px solid var(--steel);
  /* pan-y (not none) — lets the browser handle vertical page scroll natively
     when a drag starts on the photo. Only horizontal drags are intercepted
     by our own JS (wireDragCarousel); touch-action:none blocked ALL touch
     gestures here, including scrolling the page past this photo. */
  touch-action:pan-y;
}
/* Absolute so the drag-carousel's ghost photo can stack directly on top of
   the current one and both can be translated independently mid-swipe. */
.tag-photo img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;display:block;}
/* The temporary "incoming" photo the in-card drag-carousel slides in from
   the edge mid-swipe (see wireDragCarousel in site.js). */
.swipe-img-ghost{position:absolute;top:0;left:0;width:100%;height:100%;}
.photo-placeholder{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--steel-light);
}
.tag-photo.clickable{cursor:pointer;}
.tag-photo-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  background:rgba(0,0,0,0.55);border:1px solid rgba(255,255,255,0.35);color:#fff;
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;line-height:1;cursor:pointer;
}
.tag-photo-nav:hover{border-color:var(--blue);color:var(--blue);background:rgba(0,0,0,0.75);}
.tag-photo-prev{left:8px;}
.tag-photo-next{right:8px;}
/* Touch devices already have swipe — the tap arrows are redundant there and
   just clutter a small thumbnail. Devices with a real pointer (mouse/
   trackpad, no swipe) keep them since arrows are their only way to browse. */
@media (hover:none) and (pointer:coarse){
  .tag-photo-nav{display:none;}
}
/* One-time hint (see swipe-hint class in site.js) so touch users notice a
   card's photo can be swiped, now that the arrows are gone on their device. */
@keyframes swipeHint{
  0%{transform:translateX(0);}
  30%{transform:translateX(-18px);}
  60%{transform:translateX(4px);}
  100%{transform:translateX(0);}
}
.swipe-hint{animation:swipeHint 600ms ease-out;}
.photo-count{
  position:absolute;bottom:12px;left:12px;z-index:2;
  background:rgba(0,0,0,0.7);border:1px solid var(--steel-light);color:#fff;
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:0.06em;
  padding:5px 10px;text-transform:uppercase;
}
.badge{
  position:absolute;top:12px;right:12px;border-radius:6px;
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:0.08em;
  padding:5px 10px;text-transform:uppercase;z-index:2;
}
.badge-available{background:var(--blue);color:#fff;}
.badge-sold{background:var(--rust);color:var(--paper);}
.badge-hold{background:var(--steel-light);color:var(--asphalt);}
.badge-pending{background:var(--amber);color:#fff;}
.tag-body{padding:18px;}
.tag-unit{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--blue);letter-spacing:0.05em;margin-bottom:4px;}
.tag-vin{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--steel-light);letter-spacing:0.03em;margin-bottom:8px;}
.tag-title{font-family:'Oswald',sans-serif;font-size:19px;font-weight:600;margin-bottom:10px;}
.tag-specs{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin-bottom:16px;}
.tag-specs div{font-size:12px;color:var(--steel-light);}
.tag-specs div b{display:block;color:var(--paper);font-size:13px;font-weight:600;}
.tag-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px dashed var(--steel);padding-top:14px;}
.tag-price{font-family:'Oswald',sans-serif;font-size:22px;font-weight:600;color:var(--paper);}
.tag-actions{display:flex;align-items:center;gap:14px;}
.tag-link{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--blue);border-bottom:1px solid var(--blue);padding-bottom:2px;}
.tag-link:hover{color:var(--paper);border-color:var(--paper);}
/* Share and Inquire are a matched pair — one shared rule (not two separate
   ones with the same-looking values) so they render pixel-identical instead
   of drifting apart from UA button/link default differences. Pill-shaped:
   border-radius past half the button's height rounds the ends into a full
   half-circle instead of just softening the corners. On the trailer card
   specifically (not the standalone .tag-link used elsewhere, like "Get
   Directions" on the Contact page), Inquire is a real button, not a link. */
.tag-share,.tag-footer .tag-link{
  display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;flex-shrink:0;
  font-family:'Inter',sans-serif;font-size:12px;font-weight:700;line-height:1;
  color:#fff;background:var(--blue);border:2px solid var(--blue);border-radius:999px;
  padding:8px 14px;cursor:pointer;text-transform:uppercase;letter-spacing:0.04em;white-space:nowrap;
}
.tag-share:hover,.tag-footer .tag-link:hover{background:transparent;color:var(--blue);}
.empty-state{padding:60px 20px;text-align:center;color:var(--steel);border:1px dashed var(--steel);}

/* ---------- Yard strip divider ---------- */
.yard-strip{background:var(--asphalt);border-top:1px solid var(--steel);border-bottom:1px solid var(--steel);overflow:hidden;padding:18px 0;}
.yard-strip svg{display:block;width:100%;height:auto;}

/* ---------- Why us / feature grid ---------- */
.why{background:var(--asphalt);color:var(--paper);}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--steel);border:1px solid var(--steel);}
.why-item{background:var(--asphalt);padding:32px 26px;}
.why-item .num{font-family:'IBM Plex Mono',monospace;color:var(--blue);font-size:13px;margin-bottom:14px;}
.why-item h3{font-size:18px;margin-bottom:10px;font-weight:600;}
.why-item p{color:var(--paper-dim);font-size:14px;}

/* ---------- CTA band ---------- */
.cta-band{background:var(--blue);color:#fff;padding:56px 0;}
.cta-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;}
.cta-inner h2{font-size:clamp(24px,3vw,34px);max-width:520px;font-weight:600;}

/* ---------- Generic content blocks (About / Financing) ---------- */
.content-grid{display:grid;grid-template-columns:1.3fr 0.7fr;gap:48px;align-items:start;}
.content-grid p{margin-bottom:16px;color:var(--asphalt);font-size:15px;}

/* ---------- FAQ blocks (Financing / Repairs) ---------- */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px;}
.faq-grid h3{font-size:16px;margin-bottom:6px;}
.faq-grid p{color:var(--steel);font-size:15px;}
.card{background:var(--asphalt);color:var(--paper);padding:28px;border:1px solid var(--steel);}
.card h3{font-size:16px;margin-bottom:14px;}
.card ul{list-style:none;}
.card li{font-size:14px;color:var(--paper-dim);padding:8px 0;border-bottom:1px dashed var(--steel);}
.card li:last-child{border-bottom:none;}

/* ---------- Forms (Contact / Financing) ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-grid .full{grid-column:1 / -1;}
label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:0.06em;font-weight:600;color:var(--steel);margin-bottom:6px;}
input[type="text"],input[type="email"],input[type="tel"],input[type="number"],select.form-input,textarea{
  width:100%;padding:12px 14px;border:1px solid var(--steel);background:var(--paper);
  color:var(--asphalt);font-family:'Inter',sans-serif;font-size:14px;
}
textarea{resize:vertical;min-height:120px;}
input:focus,select.form-input:focus,textarea:focus{outline:2px solid var(--rust);outline-offset:1px;}
.form-note{font-size:12px;color:var(--steel);margin-top:14px;}
.form-grid .form-success{
  background:var(--asphalt);color:var(--paper);border-left:4px solid var(--blue);
  padding:20px 22px;font-size:15px;font-weight:500;margin-bottom:0;
}
.form-success .btn{margin-top:14px;}

/* ---------- Footer ---------- */
footer{background:var(--asphalt-2);color:var(--paper-dim);padding:48px 0 28px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;margin-bottom:36px;}
.footer-logo{width:52px;height:52px;border-radius:50%;object-fit:cover;margin-bottom:14px;}
.footer-grid h4{font-size:13px;text-transform:uppercase;letter-spacing:0.08em;color:var(--blue);margin-bottom:14px;}
.footer-grid p,.footer-grid a{font-size:14px;color:var(--paper-dim);display:block;margin-bottom:8px;}
.footer-grid a:hover{color:var(--blue);}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);padding-top:20px;font-size:12px;color:var(--steel-light);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

/* ---------- Photo lightbox: vertical scrolling gallery ---------- */
/* Redfin-style — every photo stacked in a scrollable feed instead of a
   one-at-a-time carousel, with a persistent info bar pinned to the bottom. */
.lightbox{
  position:fixed;inset:0;z-index:1000;
  background:var(--asphalt);
  display:flex;flex-direction:column;
}
.lightbox[hidden]{display:none;}
/* Wraps the topbar + scroll feed as one column so the topbar overlay stays
   scoped to just the photo side once desktop splits it from the sheet
   (see the min-width:861px block below) instead of stretching full-width
   over the info panel too. */
.lightbox-photos{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;}
.lightbox-topbar{
  position:absolute;top:0;left:0;right:0;z-index:10;
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;
  background:linear-gradient(180deg, rgba(0,0,0,0.65) 0%, transparent 100%);
}
.lightbox-back{
  background:none;border:none;color:#fff;font-size:26px;line-height:1;cursor:pointer;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
}
.lightbox-back:hover{color:var(--blue);}
.lightbox-scroll{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;align-items:center;
  /* The sheet overlays the bottom of this area rather than pushing it up
     (so it can be dragged open without reflowing the photo feed) — this
     padding keeps the last photo from being permanently hidden behind it.
     Desktop sits the sheet beside the photos instead of overlaying them,
     so this gets zeroed out there — see the min-width:861px block below. */
  padding-bottom:170px;
}
.lightbox-scroll img{
  width:100%;max-width:900px;display:block;
  aspect-ratio:3/4;object-fit:cover;
  border-bottom:2px solid var(--asphalt);
}
/* Swipe-up bottom sheet: collapsed shows just the peek summary, dragging (or
   tapping) it up reveals the inquiry form beneath. A visible border all the
   way around (not just background contrast) keeps the rounded top corners
   readable against the lightbox's own near-black backdrop. */
/* The wrapper (not the sheet itself) owns the absolute positioning and the
   width cap — on a wide desktop screen this keeps the sheet matching the
   centered photo column's width instead of stretching edge to edge, while
   the sheet's own transform stays free for the JS drag-to-open animation. */
/* pointer-events:none on the wrap, restored on the sheet itself — the wrap's
   own layout box is as tall as the sheet's full EXPANDED height (CSS
   transform moves where a box paints/hit-tests but doesn't shrink the space
   it occupies), so without this split, that invisible tall box sits over
   the photos and swallows scroll/hover there even while collapsed. */
.lightbox-sheet-wrap{position:absolute;left:0;right:0;bottom:0;z-index:5;max-width:900px;margin:0 auto;pointer-events:none;}
.lightbox-sheet{
  pointer-events:auto;
  background:var(--asphalt-2);
  border:1px solid var(--steel);border-bottom:none;
  border-radius:16px 16px 0 0;box-shadow:0 -8px 24px rgba(0,0,0,0.45);
  max-height:82vh;display:flex;flex-direction:column;
}
.lightbox-sheet-handle{
  width:40px;height:4px;border-radius:2px;background:var(--steel-light);
  margin:10px auto 2px;flex-shrink:0;touch-action:none;
}
.lightbox-info-peek{
  flex-shrink:0;touch-action:none;cursor:pointer;
  padding:10px 20px 18px;display:flex;flex-direction:column;gap:14px;
}
.lightbox-info-text{min-width:0;}
.lightbox-info-top{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
/* Outlined chip, not a filled block — sitting right next to the Inquire
   button, a solid-fill badge reads as "another button" rather than a status
   label. Each status keeps its own color, just as an outline instead of a fill. */
.lightbox-info-top .badge{position:static;flex-shrink:0;background:none;border:1px solid currentColor;padding:4px 8px;font-size:9px;}
.lightbox-info-top .badge-available{color:var(--blue);}
.lightbox-info-top .badge-sold{color:var(--rust);}
.lightbox-info-top .badge-hold{color:var(--steel-light);}
.lightbox-info-top .badge-pending{color:var(--amber);}
.lightbox-info-price{font-family:'Oswald',sans-serif;font-size:28px;font-weight:700;color:var(--paper);}
.lightbox-info-title{
  /* Wraps instead of truncating — the unit number is information people
     actually need, not just decoration it's OK to clip with an ellipsis. */
  font-family:'Inter',sans-serif;font-size:16px;font-weight:600;color:var(--paper);
  margin-bottom:4px;
}
.lightbox-info-vin{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--paper);letter-spacing:0.02em;margin-bottom:6px;}
.lightbox-info-specs{font-family:'Inter',sans-serif;font-size:14px;color:var(--paper);}
.lightbox-info-actions{display:flex;gap:12px;}
/* Pill-shaped, same shared rule for all three — mirrors the card's matched
   Share/Inquire pair (see .tag-share,.tag-footer .tag-link). */
.lightbox-info-share,.lightbox-info-btn,.lightbox-info-apply{
  flex:1;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  font-family:'Inter',sans-serif;font-weight:700;font-size:14px;line-height:1;
  color:#fff;background:var(--blue);border:2px solid var(--blue);border-radius:999px;
  padding:14px 20px;text-transform:uppercase;letter-spacing:0.04em;white-space:nowrap;cursor:pointer;
}
.lightbox-info-share:hover,.lightbox-info-btn:hover,.lightbox-info-apply:hover{background:transparent;color:var(--blue);}
/* Once the sheet is open, Inquire already did its job — hiding it avoids
   leaving a button just sitting there with no clear purpose. Share stays
   (still useful with the form open) and expands to fill the row. */
.lightbox-sheet.is-open .lightbox-info-btn{display:none;}

.lightbox-info-form-wrap{overflow-y:auto;padding:0 20px 24px;border-top:1px solid var(--steel);}
.lightbox-form-heading{
  font-family:'Oswald',sans-serif;font-size:16px;font-weight:600;color:var(--paper);
  text-transform:uppercase;margin:16px 0 14px;
}
.lightbox-form{display:flex;flex-direction:column;gap:12px;}
.lightbox-form input[type="text"],.lightbox-form input[type="tel"],.lightbox-form input[type="email"],.lightbox-form textarea{
  width:100%;padding:12px 14px;border:1px solid var(--steel);background:var(--asphalt);
  color:var(--paper);font-family:'Inter',sans-serif;font-size:14px;
}
.lightbox-form textarea{resize:vertical;min-height:90px;}
.lightbox-form input:focus,.lightbox-form textarea:focus{outline:2px solid var(--blue);outline-offset:1px;}
.lightbox-form-submit{
  background:var(--blue);color:#fff;font-weight:700;font-size:14px;
  text-transform:uppercase;letter-spacing:0.04em;padding:14px 20px;border-radius:10px;
  border:2px solid var(--blue);cursor:pointer;font-family:inherit;
}
.lightbox-form-submit:hover{background:transparent;color:var(--blue);}
.form-success{
  background:var(--asphalt);color:var(--paper);border-left:4px solid var(--blue);
  padding:20px 22px;font-size:15px;font-weight:500;
}

/* ---------- Payment calculator (Financing page + lightbox sheet) ---------- */
/* Shared .calc-row/.calc-result rules — the Financing page wraps them in
   .calc-card (light-page context), the lightbox wraps them in .lightbox-calc
   (already-dark sheet context, so it just needs the divider/spacing). */
.calc-card{background:var(--asphalt);color:var(--paper);border:1px solid var(--steel);padding:28px;max-width:520px;}
.lightbox-calc{padding-top:16px;border-bottom:1px solid var(--steel);padding-bottom:4px;margin-bottom:8px;}
.calc-row{margin-bottom:20px;}
.calc-row label{
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;text-transform:uppercase;letter-spacing:0.06em;font-weight:600;
  color:var(--steel-light);margin-bottom:8px;
}
.calc-row label span{font-family:'IBM Plex Mono',monospace;color:var(--paper);font-weight:600;font-size:13px;text-transform:none;letter-spacing:0.02em;}
.calc-row input[type="text"]{
  width:100%;padding:12px 14px;border:1px solid var(--steel);background:var(--asphalt-2);
  color:var(--paper);font-family:'Inter',sans-serif;font-size:14px;
}
.calc-row input[type="range"]{width:100%;accent-color:var(--blue);}
/* The site-wide select.form-input rule assumes a light page background —
   override it here so the calculator's dropdown reads correctly on both the
   Financing page's dark .calc-card and the lightbox's already-dark sheet. */
.calc-row select.form-input{
  width:100%;padding:12px 14px;border:1px solid var(--steel);background:var(--asphalt-2);
  color:var(--paper);font-family:'Inter',sans-serif;font-size:14px;
}
.calc-result{
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px dashed var(--steel);padding-top:18px;margin-top:4px;margin-bottom:14px;
}
.calc-result-label{font-size:13px;color:var(--steel-light);text-transform:uppercase;letter-spacing:0.05em;}
.calc-result-value{font-family:'Oswald',sans-serif;font-size:28px;font-weight:700;color:var(--blue);}

/* On desktop the sheet sits beside the photos as a fixed-width column
   instead of overlaying their bottom — an overlay tall enough to show the
   calculator/form in full would just bury the photos underneath it, and
   there's no mobile-style tap/drag gesture left to shrink it back out of
   the way (see wireSheetDrag's isDesktop check in site.js). Side-by-side
   means neither the photos nor the details ever have to hide the other. */
@media (min-width:861px){
  .lightbox{flex-direction:row;}
  .lightbox-scroll{padding-bottom:0;}
  .lightbox-sheet-wrap{
    position:static;width:440px;flex-shrink:0;max-width:none;margin:0;height:100%;
  }
  .lightbox-sheet{
    height:100%;max-height:none;border-radius:0;border:none;
    border-left:1px solid var(--steel);box-shadow:none;
  }
  .lightbox-info-form-wrap{flex:1;}
  .lightbox-sheet-handle{display:none;}
  .lightbox-info-peek{cursor:default;}
}

@media (max-width:860px){
  nav{display:none;}
  header.nav-open nav{
    display:block;
    position:absolute;top:100%;left:0;right:0;
    background:var(--asphalt);border-bottom:4px solid var(--blue);
  }
  header.nav-open nav ul{display:flex;flex-direction:column;gap:0;}
  header.nav-open nav ul a{display:block;padding:16px 28px;border-top:1px solid var(--steel);}
  .mobile-toggle{display:block;}
  .why-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .stat-strip .wrap{justify-content:flex-start;gap:32px;}
  .content-grid{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .faq-grid{grid-template-columns:1fr;}
}
/* Narrow phones: brand + CTA + hamburger don't fit on one line, which forces
   the CTA and brand text to wrap. Contact is already reachable from the
   hamburger menu, so drop the CTA here and tighten up the header. */
@media (max-width:560px){
  .nav-cta{display:none;}
  .nav{padding:12px 18px;}
  .brand-mark{width:38px;height:38px;}
  .brand-text{font-size:17px;}
}

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