/* ==========================================================================
   Lease-Dealz design system
   Palette derived from the approved comps: deep navy chrome, teal primary,
   orange conversion CTA, cool light ground.
   ========================================================================== */

:root {
  /* Brand */
  --navy-900: #0A1F33;
  --navy-800: #0E2A43;
  --navy-700: #163B5C;
  --teal-600: #1E7A8C;
  --teal-700: #17646F;
  --teal-050: #E6F2F4;
  --orange-500: #E8823C;
  --orange-600: #D26F2A;
  --blue-600: #2C5F92;

  /* Ground + ink */
  --bg: #EDF4F8;
  --surface: #FFFFFF;
  --surface-2: #F7FAFC;
  --ink: #14212E;
  --ink-2: #3E5163;
  --muted: #6B808F;
  --line: #DCE6EC;

  /* Status */
  --good: #1F8A5B;
  --good-bg: #E6F5EE;
  --warn: #B7791F;
  --danger: #C0392B;

  /* Shape + depth */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --shadow-1: 0 1px 2px rgba(14, 42, 67, .06), 0 1px 3px rgba(14, 42, 67, .08);
  --shadow-2: 0 4px 10px rgba(14, 42, 67, .08), 0 2px 4px rgba(14, 42, 67, .05);
  --shadow-3: 0 12px 28px rgba(14, 42, 67, .12);

  /* Rhythm */
  --gut: 24px;
  --max: 1240px;
  --header-h: 72px;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* No smooth scrolling: on a page this tall the animation is interrupted by
   images completing, and the jump never arrives. Correctness wins. */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--teal-700); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.18; letter-spacing: -.015em; color: var(--navy-800); font-weight: 700; }
h1 { font-size: clamp(2rem, 4.2vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); }
h3 { font-size: 1.125rem; }
p  { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.stack > * + * { margin-top: 16px; }
.muted { color: var(--muted); }
.small { font-size: .8125rem; }
.center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: .9375rem;
  padding: 11px 20px; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary  { background: var(--orange-500); color: #fff; }
.btn-primary:hover  { background: var(--orange-600); }
.btn-teal     { background: var(--teal-600); color: #fff; }
.btn-teal:hover     { background: var(--teal-700); }
.btn-blue     { background: var(--blue-600); color: #fff; }
.btn-blue:hover     { background: #234E78; }
.btn-ghost    { background: #fff; color: var(--teal-700); border-color: var(--line); }
.btn-ghost:hover    { background: var(--teal-050); border-color: var(--teal-600); }
.btn-block { width: 100%; }
.btn-lg { padding: 14px 26px; font-size: 1rem; }

/* ----------------------------------------------------------------- header */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.site-header .wrap {
  height: var(--header-h);
  display: flex; align-items: center; gap: 28px;
}
.brand { display: flex; align-items: center; gap: 11px; color: var(--navy-800); }
.brand:hover { text-decoration: none; }
.brand .mark { width: 36px; height: 36px; flex: 0 0 36px; }
.brand em { font-style: normal; color: var(--teal-600); }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; }
.brand-tag {
  font-size: .625rem; font-weight: 600; letter-spacing: .24em;
  text-transform: uppercase; color: var(--muted); margin-top: 4px;
}
.site-footer .brand-tag { color: #7E93A4; }

.nav { display: flex; gap: 26px; margin-left: 12px; }
.nav a { color: var(--ink-2); font-weight: 500; font-size: .9375rem; padding: 6px 0;
         border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a:hover { color: var(--navy-800); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--navy-800); border-bottom-color: var(--teal-600); }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.header-actions .link { color: var(--ink-2); font-weight: 500; font-size: .9375rem; }

.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }

/* ------------------------------------------------------------------- hero */
/* The hero carries the Best Deals rail, so it goes dark: white cards on navy
   is the highest-contrast way to make the one thing worth looking at pop.
   No overflow:hidden here - the search card deliberately hangs off the bottom. */
.hero {
  background:
    radial-gradient(880px 440px at 10% -12%, rgba(30,122,140,.55), transparent 62%),
    radial-gradient(720px 400px at 92% -4%, rgba(232,130,60,.26), transparent 60%),
    linear-gradient(165deg, #12365A 0%, #0A1F33 100%);
  padding: 60px 0 0; color: #fff; position: relative;
}
.hero-head { text-align: center; max-width: 820px; margin: 0 auto 40px; }
.hero-head h1 { color: #fff; }
.hero-head p { font-size: 1.0625rem; color: #C2D6E3; margin-bottom: 0; }

.hero .section-head h2 { color: #fff; }
.hero .section-head .muted { color: #9FBACB; }
.hero .section-head strong { color: #fff; }
.hero .section-head .see-all { color: #7FD3E0; }

/* The search card straddles the navy/light seam. */
.hero-deals .grid { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.hero-search { margin-top: 44px; position: relative; z-index: 6; }
.hero-search .searchbar { margin-bottom: -54px; }
.after-hero { padding-top: 116px; }

/* -------------------------------------------------------------- splash screen
   Entry only, on the home page. The fade-out is a CSS animation with
   fill-mode forwards, so the overlay clears itself even if the script never
   runs - a splash that can trap the page is worse than no splash. */
#splash {
  position: fixed; inset: 0; z-index: 200;
  background:
    radial-gradient(760px 460px at 50% 34%, rgba(30,122,140,.42), transparent 66%),
    linear-gradient(165deg, #12365A 0%, #07182A 100%);
  display: grid; place-items: center;
  animation: splash-out .55s ease 1.15s forwards;
}
#splash.is-skipped { display: none; }
@keyframes splash-out { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.splash-inner { text-align: center; animation: splash-in .75s cubic-bezier(.2,.7,.3,1) both; }
@keyframes splash-in {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
.splash-mark { width: 76px; height: 76px; margin: 0 auto 20px; display: block; }
.splash-name { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; color: #fff; line-height: 1; }
.splash-name em { font-style: normal; color: #4FBACB; }
.splash-tag {
  margin-top: 10px; font-size: .6875rem; font-weight: 600;
  letter-spacing: .34em; text-transform: uppercase; color: #7E9DB2;
}
.splash-bar {
  width: 132px; height: 2px; margin: 26px auto 0;
  background: rgba(255,255,255,.14); border-radius: 2px; overflow: hidden;
}
.splash-bar span {
  display: block; height: 100%; width: 100%; background: var(--teal-600);
  transform-origin: left; animation: splash-load 1.15s ease-out both;
}
@keyframes splash-load { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ------------------------------------------------------------ search card */
.searchbar {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  padding: 20px; display: grid; gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: end;
}
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label { font-size: .875rem; font-weight: 600; color: var(--ink-2); }
.field .hint { font-size: .75rem; color: var(--muted); }
input[type=text], input[type=number], input[type=email], input[type=tel], input[type=url], select, textarea {
  font: inherit; font-size: .9375rem; color: var(--ink);
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); width: 100%;
}
select { appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B808F' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--teal-600); box-shadow: 0 0 0 3px rgba(30,122,140,.14);
}
input:disabled, select:disabled { background: var(--surface-2); color: var(--muted); }

/* ------------------------------------------------------------- deal cards */
.section { padding: 44px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.section-head h2 { margin: 0; }
.section-head .see-all { font-weight: 600; font-size: .9375rem; }

.grid { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-1); overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .18s ease, transform .18s ease;
}
.card:hover { box-shadow: var(--shadow-3); transform: translateY(-3px); }

/* Cards are injected by JS, so they arrive all at once; a short stagger keeps
   that from reading as a flash. */
.grid .card { animation: card-in .45s cubic-bezier(.2,.7,.3,1) both; }
.grid .card:nth-child(2) { animation-delay: .06s; }
.grid .card:nth-child(3) { animation-delay: .12s; }
.grid .card:nth-child(4) { animation-delay: .18s; }
@keyframes card-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.card-media { position: relative; aspect-ratio: 16 / 10; background: var(--surface-2); overflow: hidden; }
.card-media picture { display: block; width: 100%; height: 100%; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }

/* Says out loud that this is a library photo of the model, not of this car.
   The tag disappears the moment a seller uploads their own. */
.stock-tag {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  background: rgba(10,31,51,.72); color: #E6EEF4;
  font-size: .625rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px; backdrop-filter: blur(2px);
}
.card:hover .card-media img { transform: scale(1.035); }
/* A touch of shade at the foot of the image so the card body reads as attached
   to it rather than floating under it. */
.card-media::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 38%;
  background: linear-gradient(180deg, rgba(10,31,51,0), rgba(10,31,51,.18));
  pointer-events: none;
}
.card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }

.badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--teal-600); color: #fff;
  font-size: .75rem; font-weight: 600; letter-spacing: .01em;
  padding: 5px 10px; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(10,31,51,.22);
}
.badge-right { left: auto; right: 10px; }
.badge-best  { background: var(--good); }
.badge-new   { background: var(--orange-500); }

.card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.card-title h3 { margin: 0; font-size: 1.0625rem; line-height: 1.3; }
.price { text-align: right; white-space: nowrap; }
.price .amt { font-size: 1.375rem; font-weight: 800; color: var(--navy-800); letter-spacing: -.02em; }
.price .per { font-size: .8125rem; color: var(--muted); font-weight: 600; }
.price .due { display: block; font-size: .6875rem; color: var(--muted); line-height: 1.3; }

.meta { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: .8125rem; margin-bottom: 10px; }
.meta span { display: inline-flex; align-items: center; gap: 5px; }

.feat { list-style: none; margin: 0 0 14px; padding: 0;
        display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px;
        font-size: .8125rem; color: var(--ink-2); }
.feat li { display: flex; gap: 6px; align-items: flex-start; }
.feat li::before { content: "\2713"; color: var(--teal-600); font-weight: 700; flex: 0 0 auto; }

.card-actions { margin-top: auto; display: flex; gap: 10px; }
.card-actions .btn { flex: 1; padding: 9px 12px; font-size: .875rem; }

/* ------------------------------------------------------------- body types */
.bodytypes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.bodytype {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 10px 14px; text-align: center; color: var(--ink-2);
  font-size: .875rem; font-weight: 600; box-shadow: var(--shadow-1);
}
.bodytype:hover { border-color: var(--teal-600); color: var(--navy-800); text-decoration: none; }
.bodytype svg { margin: 0 auto 8px; display: block; color: var(--teal-600); }

/* ------------------------------------------------------------------ panel */
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-1); padding: 20px;
}
.panel + .panel { margin-top: 20px; }
.panel h3 { margin-top: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.spec-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.spec-table th, .spec-table td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { color: var(--muted); font-weight: 500; width: 46%; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }

/* -------------------------------------------------------------- calculator */
/* Sticky, and it must be the ONLY thing in the aside. A sticky element is
   positioned, so it paints over any later static sibling - with the contact
   panel underneath it here, the panel was fully covered and the "Contact
   Seller" button appeared to do nothing. */
.calc { position: sticky; top: calc(var(--header-h) + 20px); }

/* The site header is sticky, so every anchor target has to clear it. Applied
   to any [id] rather than a list, because scroll-margin only affects scroll
   targeting - it costs nothing on elements that are never jumped to. */
[id] { scroll-margin-top: calc(var(--header-h) + 20px); }

/* Briefly mark where an in-page link landed. */
#contact:target { box-shadow: 0 0 0 2px var(--teal-600), var(--shadow-1); }
.calc-payment {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.calc-payment .big { font-size: 2.25rem; font-weight: 800; color: var(--navy-800); line-height: 1; }
.calc-payment .big span { font-size: 1rem; font-weight: 600; color: var(--muted); }

.slider-row { margin-bottom: 16px; }
.slider-row .row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.slider-row label { font-size: .875rem; font-weight: 600; color: var(--ink-2); }
.slider-row output { font-size: .9375rem; font-weight: 700; color: var(--navy-800); }
input[type=range] { width: 100%; accent-color: var(--teal-600); }
.ticks { display: flex; justify-content: space-between; font-size: .6875rem; color: var(--muted); margin-top: 2px; }

.breakdown { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--line); font-size: .875rem; }
.breakdown li { display: flex; justify-content: space-between; padding: 4px 0; color: var(--ink-2); }
.breakdown li strong { color: var(--navy-800); }
.breakdown li.total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; font-weight: 700; color: var(--navy-800); }

/* ------------------------------------------------------------- dealer link */
.sponsor-panel { border-color: var(--teal-600); }
.sponsor-head { margin-bottom: 10px; }
.sponsor-label {
  font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal-700); background: var(--teal-050);
  border: 1px solid var(--teal-600); border-radius: 3px; padding: 3px 8px;
}
.sponsor-name { font-weight: 700; font-size: 1.0625rem; color: var(--navy-800); margin: 0 0 2px; }
.sponsor-addr { font-size: .9375rem; color: var(--ink-2); margin: 0 0 14px; }
.sponsor-note { font-size: .75rem; color: var(--muted); margin: 10px 0 0; line-height: 1.5; }

/* ------------------------------------------------------------ dealer forms */
.declare {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); padding: 14px 16px; margin: 0;
  display: grid; gap: 10px;
}
.declare legend {
  font-size: .875rem; font-weight: 700; color: var(--navy-800); padding: 0 6px;
}
.declare .check { font-weight: 400; font-size: .875rem; line-height: 1.5; }

.claim-listing { display: flex; gap: 16px; align-items: flex-start; }
.claim-thumb { flex: 0 0 160px; border-radius: var(--r-sm); overflow: hidden; }
.claim-thumb img, .claim-thumb picture { width: 100%; height: auto; display: block; }

.banner-warn {
  background: #FFF6E8; border: 1px solid #F0D9B5; border-left: 4px solid var(--warn);
  border-radius: var(--r-sm); padding: 12px 16px; font-size: .875rem; color: var(--ink-2);
}
.email-preview {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); padding: 16px; overflow-x: auto;
}

/* ----------------------------------------------------------------- legal */
.legal { max-width: 820px; padding-bottom: 56px; }
.legal h1 { margin-top: 18px; }
.legal-meta { color: var(--muted); font-size: .875rem; }
.legal-summary {
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--teal-600);
  border-radius: var(--r-sm); padding: 18px 22px; margin: 24px 0 32px;
}
.legal-summary h2 { font-size: 1rem; margin: 0 0 10px; }
.legal-summary ul { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px;
                    font-size: .9375rem; color: var(--ink-2); }
.legal-body { counter-reset: cl; list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.legal-body > li { counter-increment: cl; }
.legal-body > li > h2 {
  font-size: 1.0625rem; margin: 0 0 8px; display: flex; gap: 10px; align-items: baseline;
}
.legal-body > li > h2::before {
  content: counter(cl) "."; color: var(--teal-600); font-variant-numeric: tabular-nums;
  font-weight: 700; flex: 0 0 auto;
}
.legal-body p { color: var(--ink-2); font-size: .9375rem; margin: 0 0 10px; max-width: 72ch; }
.legal-sub { margin: 0 0 10px; padding-left: 22px; display: grid; gap: 7px;
             font-size: .9375rem; color: var(--ink-2); }
.legal-foot { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); }

@media (max-width: 520px) {
  .claim-listing { flex-direction: column; }
  .claim-thumb { flex: none; width: 100%; max-width: 260px; }
}

/* ------------------------------------------------------- seller information */
.seller-grid { display: flex; gap: 20px; align-items: flex-start; }
.seller-details { flex: 1; min-width: 0; }
.seller-map { flex: 0 0 128px; }
.minimap {
  width: 128px; height: auto; display: block;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 6px;
}
.seller-name { font-weight: 700; font-size: 1rem; color: var(--navy-800); margin: 0 0 4px; }
.seller-address { font-style: normal; color: var(--ink-2); font-size: .9375rem; line-height: 1.5; }
.seller-phone { margin: 8px 0 0; font-size: 1rem; font-weight: 600; }
.seller-phone a { color: var(--teal-700); }

@media (max-width: 520px) {
  .seller-grid { flex-direction: column-reverse; }
  .seller-map { align-self: flex-start; }
}

.req { color: var(--danger); font-weight: 700; }

.form-msg {
  margin: 0; padding: 10px 12px; border-radius: var(--r-sm);
  font-size: .8125rem; font-weight: 500; line-height: 1.45;
}
.form-msg.is-ok    { background: var(--good-bg); color: var(--good); }
.form-msg.is-error { background: #FCECEA; color: var(--danger); }
.form-msg.is-busy  { background: var(--surface-2); color: var(--muted); }

.msd-box {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); padding: 12px 14px; margin-bottom: 16px;
}
.check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-weight: 600; font-size: .875rem; }
.check input { width: auto; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--teal-600); }
.footnote { border-top: 1px dashed var(--line); padding-top: 8px; }

.flag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--good-bg); color: var(--good);
  font-size: .8125rem; font-weight: 600; padding: 8px 12px; border-radius: var(--r-sm);
}
.flag-off { background: var(--surface-2); color: var(--muted); }

/* ------------------------------------------------------------------ wizard */
.steps { display: flex; gap: 0; margin-bottom: 28px; flex-wrap: wrap; }
.step {
  flex: 1; min-width: 120px; text-align: center; padding: 12px 8px;
  border-bottom: 3px solid var(--line); color: var(--muted);
  font-size: .875rem; font-weight: 600;
}
.step .n {
  display: inline-flex; width: 22px; height: 22px; border-radius: 50%;
  background: var(--line); color: var(--surface); align-items: center; justify-content: center;
  font-size: .75rem; margin-right: 6px;
}
.step.is-active { color: var(--navy-800); border-bottom-color: var(--teal-600); }
.step.is-active .n { background: var(--teal-600); }
.step.is-done { color: var(--ink-2); border-bottom-color: var(--teal-600); }
.step.is-done .n { background: var(--good); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.form-grid .span-2 { grid-column: 1 / -1; }

.shot-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.shot {
  border: 1px dashed var(--line); border-radius: var(--r-sm); background: var(--surface-2);
  padding: 14px 12px; text-align: center; font-size: .8125rem; color: var(--ink-2);
}
.shot.req { border-style: solid; border-color: var(--teal-600); background: var(--teal-050); }
.shot .k { display: block; font-weight: 700; color: var(--navy-800); margin-bottom: 2px; }

.channel { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.channel:last-child { border-bottom: 0; }
.channel .name { font-weight: 600; }
.channel .status { margin-left: auto; font-size: .8125rem; color: var(--muted); }

/* ------------------------------------------------------------------ footer */
.site-footer { background: var(--navy-900); color: #B9C9D6; padding: 44px 0 24px; margin-top: 48px; }
.site-footer a { color: #B9C9D6; font-size: .875rem; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.6fr; gap: 32px; }
.footer-grid h4 { color: #fff; font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer .brand { color: #fff; margin-bottom: 12px; }
.site-footer .brand em { color: var(--orange-500); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 32px; padding-top: 16px;
  display: flex; justify-content: space-between; gap: 16px; font-size: .8125rem; flex-wrap: wrap;
}
.newsletter { display: flex; gap: 8px; }
.newsletter input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; }
.newsletter input::placeholder { color: #8FA5B5; }

/* ----------------------------------------------------------------- layout */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }

.crumbs { font-size: .875rem; color: var(--muted); padding: 18px 0 0; }
.crumbs a { color: var(--teal-700); }
.crumbs span { margin: 0 6px; }

.gallery-main { border-radius: var(--r); overflow: hidden; aspect-ratio: 16/10; background: var(--surface-2); position: relative; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 20px;
  background: linear-gradient(180deg, rgba(10,31,51,0) 0%, rgba(10,31,51,.85) 100%);
  color: #fff;
}
.gallery-caption h1 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0 0 4px; }
.gallery-caption .sub { font-size: .9375rem; color: #D3E1EA; }
.thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 8px; }
.thumbs button { padding: 0; border: 2px solid transparent; border-radius: var(--r-sm); overflow: hidden;
                 background: none; cursor: pointer; aspect-ratio: 16/10; }
.thumbs button[aria-current="true"] { border-color: var(--teal-600); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }

.photo-credit { font-size: .6875rem; color: var(--muted); margin: 8px 0 0; }
.photo-credit a { color: var(--muted); text-decoration: underline; }
.photo-note {
  font-size: .8125rem; color: var(--ink-2); margin: 8px 0 0;
  background: #FFF6E8; border: 1px solid #F0D9B5; border-left: 3px solid var(--warn);
  padding: 10px 12px; border-radius: var(--r-sm);
}
.gallery-main #hero-slot, .gallery-main picture { display: block; width: 100%; height: 100%; }

/* ------------------------------------------------------------- responsive */
/* The nav stops fitting comfortably well above the tablet breakpoint. */
@media (max-width: 1280px) {
  .nav { gap: 18px; margin-left: 0; }
  .site-header .wrap { gap: 18px; }
}
@media (max-width: 1140px) {
  .header-actions .link { display: none; }
}

@media (max-width: 1080px) {
  .searchbar { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .searchbar .btn { grid-column: 1 / -1; }
  .grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bodytypes { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr; }
  .calc { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
/* Between 720 and 1000 the brand + five nav items + the CTA no longer fit,
   and the button was pushing the page into horizontal scroll. The drawer and
   the nav both still carry "List Your Lease", so the button is the one to go. */
@media (max-width: 1000px) {
  .header-actions { display: none; }
}

@media (max-width: 720px) {
  :root { --gut: 16px; }
  .hero { padding-top: 40px; }
  .hero-search .searchbar { margin-bottom: -40px; }
  .after-hero { padding-top: 76px; }
  .splash-mark { width: 62px; height: 62px; }
  .splash-name { font-size: 1.6rem; }
  /* The whole action cluster goes; "List Your Lease" already lives in the
     drawer, and keeping the button here pushed the toggle off screen. */
  .nav, .header-actions { display: none; }
  .nav-toggle { display: block; margin-left: auto; }
  .site-header .wrap { gap: 12px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .nav.is-open {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: var(--header-h); left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 8px var(--gut) 16px; box-shadow: var(--shadow-2);
  }
  .nav.is-open a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .grid, .grid-3 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .shot-list { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .thumbs { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  /* The splash clears itself via an animation, which the rule above kills -
     so with reduced motion it must never be shown in the first place. */
  #splash { display: none !important; }
}

/* ==========================================================================
   Detailed lease calculator (assets/js/calculator.js)
   Two columns: inputs on the left in titled sections, a dark results card on
   the right. The card is sticky and alone in its column (see .calc above for
   why a sticky element must never share a column).
   ========================================================================== */
[hidden] { display: none !important; }

.eyebrow {
  margin: 0 0 6px; font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--teal-700);
}

.calc-page { padding-block: 28px 12px; }
.calc-page-head { max-width: 760px; margin-bottom: 24px; }
.calc-page-head h1 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); margin-bottom: 8px; }

.calc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.calc-aside { position: sticky; top: calc(var(--header-h) + 20px); }

.calc-section {
  margin: 0 0 14px; padding: 14px 18px 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-1); min-width: 0;
}
.calc-section legend {
  float: left; width: 100%; padding: 0 0 8px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--navy-800);
}
.calc-section legend + * { clear: both; }

.calc-field {
  display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) 6.5rem;
  align-items: center; gap: 12px; padding: 5px 0; border-bottom: 1px solid #EEF3F6;
}
.calc-field:last-child { border-bottom: 0; }
.calc-label { min-width: 0; line-height: 1.2; }
.calc-label label { display: block; font-size: .8125rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calc-label label[title] { cursor: help; }
.calc-sub { display: block; font-size: .75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.calc-sub b { color: var(--teal-700); font-weight: 700; }
.calc-sub s { color: var(--muted); }
.calc-field-wide { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); }
.calc-field-wide .calc-num { justify-self: end; width: 100%; max-width: 14rem; }
.calc-num { padding: 5px 8px; font-size: .8125rem; text-align: right; font-variant-numeric: tabular-nums; }
select.calc-num { text-align: left; padding-right: 28px; background-position: right 6px center; }
.calc-checks { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 8px 0 4px; }
.calc-section .check.calc-check { margin: 0; font-size: .8125rem; font-weight: 500; }
[data-field="msd_count"] .calc-sub { white-space: normal; }
.calc-hint { margin: 6px 0 0; font-size: .75rem; color: var(--muted); line-height: 1.45; }

/* Slider: teal fill up to the thumb. --fill is set by the script via CSSOM. */
.calc-range {
  -webkit-appearance: none; appearance: none; height: 6px; border-radius: 99px; cursor: pointer;
  background: linear-gradient(to right, var(--teal-600) 0 var(--fill, 0%), #DCE6EC var(--fill, 0%) 100%);
}
.calc-range:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 4px; }
.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 2px solid var(--teal-600); box-shadow: var(--shadow-2);
}
.calc-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--teal-600); box-shadow: var(--shadow-2);
}
.calc-range::-moz-range-track { background: transparent; }

.calc-msd-programme {
  margin: 4px 0 8px; padding: 6px 10px; border-radius: var(--r-sm);
  background: var(--teal-050); color: var(--ink-2); font-size: .75rem; line-height: 1.45;
}
.calc-msd-programme[title]:not([title=""]) { cursor: help; }
.calc-confirmed {
  display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 99px;
  background: #fff; border: 1px solid var(--line); font-size: .6875rem; font-weight: 600; color: var(--muted);
}
.calc-section .check { margin-bottom: 8px; }

/* Results card */
.calc-results {
  color: #fff; border-radius: var(--r-lg); padding: 26px 24px 20px;
  background: radial-gradient(120% 90% at 100% 0%, #1B4E6B 0%, rgba(27, 78, 107, 0) 60%),
              linear-gradient(160deg, var(--navy-800) 0%, var(--navy-900) 100%);
  box-shadow: var(--shadow-3);
}
.calc-results-label { margin: 0 0 6px; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #9FB8C7; }
.calc-results-big { margin: 0; font-size: 2.75rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.calc-results-big span { font-size: 1rem; font-weight: 600; color: #9FB8C7; margin-left: 2px; }
.calc-results-sub { margin: 6px 0 0; font-size: .875rem; color: #C9D8E2; }
.calc-results-list { margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .8125rem; }
.calc-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.calc-row dt { color: #B9C9D6; }
.calc-row dd { margin: 0; font-weight: 600; color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.calc-row-total { margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .14); }
.calc-row-total dt, .calc-row-total dd { color: #fff; font-weight: 700; }
.calc-results-foot { margin: 14px 0 0; font-size: .6875rem; line-height: 1.5; color: #8FA5B5; }

/* Dealer-only block inside the card */
.calc-internal {
  margin: 16px 0 0; padding: 12px 14px; border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .06); border: 1px dashed rgba(255, 255, 255, .22);
}
.calc-internal-label { margin: 0; font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9FB8C7; }
.calc-internal-pct { margin: 4px 0 8px; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.calc-state { display: inline-block; margin: 0; padding: 4px 10px; border-radius: 99px; font-size: .75rem; font-weight: 700; }
.calc-state-best { background: var(--good); color: #fff; }
.calc-state-ok { background: rgba(79, 186, 203, .2); color: #BFE9F0; }
.calc-state-bad { background: #C0392B; color: #fff; }
.calc-state-off { background: rgba(255, 255, 255, .1); color: #C9D8E2; }
.calc-internal-hint { margin: 8px 0 0; font-size: .75rem; color: #C9D8E2; line-height: 1.45; }

@media (max-width: 1000px) {
  .calc-layout { grid-template-columns: 1fr; }
  /* Stacked: the card follows the inputs and stops being sticky. */
  .calc-aside { position: static; }
}
@media (max-width: 520px) {
  .calc-field { grid-template-columns: minmax(0, 1fr) 5.5rem; gap: 4px 10px; }
  .calc-field .calc-label { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px; }
  .calc-field-wide { grid-template-columns: minmax(0, 1fr) 8rem; }
  .calc-field-wide .calc-label { grid-column: auto; display: block; }
  .calc-section { padding: 16px 14px 4px; }
  .calc-results-big { font-size: 2.25rem; }
}

/* ==========================================================================
   Dealer portal + shopper accounts (PHP pages)
   ========================================================================== */
.portal-main { padding-block: 28px 20px; min-height: 60vh; }
.portal-footer { margin-top: 32px; padding: 20px 0; }
.portal-footer .footer-bottom { border: 0; margin: 0; padding: 0; }
.portal-who { font-size: .875rem; font-weight: 600; color: var(--ink-2); }
.inline-form { display: inline; margin: 0; }
.link-button { font: inherit; font-size: .875rem; font-weight: 600; color: var(--teal-700); background: none; border: 0; padding: 0; cursor: pointer; }
.link-button:hover { text-decoration: underline; }
.portal-banner { margin: 0 0 20px; }

.auth-card { max-width: 440px; margin: 24px auto; padding: 28px; }
.auth-card-wide { max-width: 620px; }
.auth-card h1 { font-size: 1.625rem; margin-bottom: 6px; }
.auth-card .form-msg { margin: 12px 0; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: 18px 0 0; }

.portal-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.portal-head h1 { font-size: clamp(1.625rem, 3vw, 2.25rem); margin-bottom: 4px; }
.portal-head p { margin: 0; }
.portal-form .panel + .panel { margin-top: 20px; }
.portal-form .calc-section { box-shadow: none; }
.portal-form > .form-msg, .portal-main > .form-msg { margin-bottom: 16px; }
.portal-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 10px; }
.btn-danger { color: var(--danger); }
.btn-danger:hover { border-color: var(--danger); background: #FCECEA; }
.form-grid-tight { grid-template-columns: 1fr 1.4fr; gap: 12px; }
.error-list { margin: 6px 0 0; padding-left: 18px; }
.input-with-button { display: flex; gap: 10px; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; }
.hint.is-error { color: var(--danger); }
.hint.is-ok { color: var(--good); }
.hint.is-warn { color: var(--warn); }

/* Who-can-see-this chips on the contact page */
.vis { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.vis-public { background: var(--teal-050); color: var(--teal-700); }
.vis-shopper { background: #EAF0F8; color: var(--blue-600); }
.vis-private { background: #FCECEA; color: var(--danger); }

/* The required 2%-of-MSRP notice at the top of List Your Lease */
.notice-2pct {
  margin: 0 0 22px; padding: 14px 18px; border-radius: var(--r);
  background: #FFF6E8; border: 1px solid #F0D9B5; border-left: 5px solid var(--orange-500);
  font-size: .9375rem; color: var(--ink);
}

.table-scroll { overflow-x: auto; }
.portal-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.portal-table th, .portal-table td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.portal-table th { font-size: .75rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.portal-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.portal-table .is-over { color: var(--danger); font-weight: 700; }
.portal-table tr:last-child td { border-bottom: 0; }
.table-sub { display: block; font-size: .75rem; color: var(--muted); }
.row-actions { white-space: nowrap; }
.row-actions a + a { margin-left: 12px; }
.status-pill { display: inline-block; padding: 3px 9px; border-radius: 99px; font-size: .75rem; font-weight: 600; }
.status-on { background: var(--good-bg); color: var(--good); }
.status-off { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }

.portal-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.portal-cards .panel + .panel { margin-top: 0; }
.portal-card { color: inherit; transition: box-shadow .15s ease, border-color .15s ease; }
.portal-card:hover { text-decoration: none; border-color: var(--teal-600); box-shadow: var(--shadow-2); }
.portal-card p { margin: 0; }

/* Listing page: dealer phone / email behind shopper sign-in */
.seller-contact { margin-top: 12px; }
.seller-contact-note { margin: 8px 0 0; }
.seller-email { margin: 4px 0 0; font-weight: 600; }

@media (max-width: 720px) {
  .portal-cards { grid-template-columns: 1fr; }
  .portal-who { display: none; }
  .auth-card { padding: 20px; }
  .form-grid-tight { grid-template-columns: 1fr 1fr; }
}