/*
Theme Name: Tiff Cardealer
Theme URI: https://downtownautosale.com/
Author: Tiff - Kani Tifeki
Author URI: https://downtownautosale.com/
Description: A dealership theme for small, independent used-car lots. Vehicle inventory with body-type filtering, a financing estimator, lead capture straight into wp-admin, and a mobile-first layout. Ships with its own vehicle and staff post types, so it carries no plugin dependencies.
Version: 1.2.0
Requires at least: 5.9
Tested up to: 6.8
Requires PHP: 8.0
License: Proprietary
Text Domain: das-v4
Tags: custom-theme, car-dealer, mobile-first
*/

/* ==========================================================================
   1. TOKENS
   One radius scale, one border colour, one shadow scale, one spacing rhythm.
   Every button, card, banner, input and menu below pulls from these.
   ========================================================================== */

:root{
  --night:#103071;
  --night-2:#15418D;
  --night-3:#1A4EA8;
  --brand:#08318B;
  --brand-hover:#0B3EAF;
  --snow:#F7F9FC;
  --white:#FFFFFF;
  --sky:#8FB3FF;
  --aurora:#AFC6F2;
  --steel:#5A6785;
  --mist:#AAB8D9;
  --line:#E4E9F4;
  --brand-wash:#E9EEFA;
  --line-strong:#D3DBEC;
  --accent:#FFB020;
  --danger:#B3261E;
  --ok:#1B5E33;

  --display:'Barlow Condensed','Arial Narrow',sans-serif;
  --body:'Barlow','Segoe UI',sans-serif;

  --r-btn:12px;
  --r-input:12px;
  --r-card:16px;
  --r-pill:999px;

  --sh-1:0 1px 2px rgba(16,48,113,.05);
  --sh-2:0 6px 20px rgba(16,48,113,.07);
  --sh-3:0 20px 48px rgba(16,48,113,.13);

  --sp-section:52px;   /* 72px was a desktop rhythm on a 390px screen: seven sections of it is over 1000px of nothing. Desktop keeps 104px below. */
  --maxw:1180px;
  --tap:48px;

  --radius:16px;
  --amber:#8FB3FF;
  --amber-dark:#08318B;
  --shadow-lg:0 20px 48px rgba(16,48,113,.13);
}

@media (min-width:940px){ :root{ --sp-section:104px; } }

/* ==========================================================================
   2. BASE
   ========================================================================== */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{font-family:var(--body);background:var(--snow);color:var(--night);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--brand);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;top:10px;left:10px;z-index:9999;width:auto;height:auto;clip:auto;padding:12px 18px;background:var(--white);color:var(--brand);font-weight:600;border-radius:var(--r-btn)}

section{padding:var(--sp-section) 0}

h1,h2,h3{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:1.04;letter-spacing:.4px}
h2{font-size:clamp(28px,4vw,42px)}

.roadline{height:3px;border:none;background:repeating-linear-gradient(90deg,var(--brand) 0 30px,transparent 30px 54px);opacity:.55}

/* ==========================================================================
   3. BUTTONS - one component, four skins, sentence case
   ========================================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--body);font-weight:600;font-size:16px;letter-spacing:0;
  text-transform:none;
  min-height:var(--tap);
  padding:13px 22px;
  border-radius:var(--r-btn);
  border:1.5px solid transparent;
  cursor:pointer;text-align:center;
  transition:background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.btn svg{width:18px;height:18px;flex:none;fill:currentColor}

.btn-brand{background:var(--brand);color:var(--white);box-shadow:var(--sh-1)}
.btn-brand:hover{background:var(--brand-hover);color:var(--white)}

.btn-light{background:var(--white);color:var(--brand);box-shadow:var(--sh-2)}
.btn-light:hover{background:#EAF0FC;color:var(--brand)}

.btn-ghost{border-color:rgba(255,255,255,.55);color:var(--white);background:transparent}
.btn-ghost:hover{background:var(--white);color:var(--night);border-color:var(--white)}

.btn-quiet{border-color:var(--line-strong);color:var(--brand);background:var(--white)}
.btn-quiet:hover{border-color:var(--brand);background:#F2F6FD;color:var(--brand)}

/* legacy aliases so das_car_card() and older markup keep working */
.btn-dark{background:var(--brand);color:var(--white)}
.btn-dark:hover{background:var(--brand-hover);color:var(--white)}
.btn-amber{background:var(--white);color:var(--brand);box-shadow:var(--sh-2)}
.btn-amber:hover{background:#EAF0FC;color:var(--brand)}

.btn-block{width:100%}

/* ==========================================================================
   4. HEADER - static, not sticky (it covered the hero CTAs on mobile)
   ========================================================================== */

.topbar{background:var(--night);color:var(--mist);font-size:13.5px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
.topbar a{color:var(--white);font-weight:600}
.topbar a:hover{color:#9DBBFF}
.topbar .dot{color:var(--sky);margin:0 6px}
@media(max-width:720px){
  .topbar{font-size:12.5px}
  .topbar .wrap{justify-content:center;text-align:center;gap:4px}
  .topbar .hours-note{display:none}
}

header.site{
  position:static;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}

.logo{display:flex;align-items:center;gap:12px}
.logo img.mark-img{height:48px;width:auto;flex:none;border-radius:10px}
.logo-text{display:flex;flex-direction:column;line-height:1.05}
.logo-text b{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:.6px;text-transform:uppercase}
.logo-text small{font-size:10.5px;color:var(--steel);letter-spacing:2.6px;text-transform:uppercase;margin-top:3px}

nav.menu{display:flex;gap:8px;align-items:center}
nav.menu ul{list-style:none;display:flex;gap:4px;align-items:center;margin:0;padding:0}
nav.menu a{
  font-weight:600;font-size:15.5px;color:var(--night);
  padding:10px 14px;border-radius:var(--r-btn);
  transition:background .16s ease,color .16s ease;
}
nav.menu a:hover,nav.menu li.current-menu-item>a{background:#EEF3FC;color:var(--brand)}

/* --- contrast fix -------------------------------------------------------
   `nav.menu a` (0-1-2) outranked `.btn-dark` (0-1-0), so the Call button
   rendered navy text on a navy fill and looked empty. Scoping to
   `nav.menu a.btn` raises it to 0-2-2 and it wins.
   ---------------------------------------------------------------------- */
nav.menu a.btn{color:var(--white);background:var(--brand);padding:13px 20px}
nav.menu a.btn:hover{background:var(--brand-hover);color:var(--white)}
nav.menu a.btn-quiet{color:var(--brand);background:var(--white)}
nav.menu a.btn-light{color:var(--brand);background:var(--white)}

.hamb{
  display:none;background:var(--white);border:1.5px solid var(--line-strong);
  width:var(--tap);height:var(--tap);border-radius:var(--r-btn);
  cursor:pointer;color:var(--night);align-items:center;justify-content:center;
}
.hamb:hover{border-color:var(--brand);color:var(--brand)}
.hamb svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

@media(max-width:940px){
  nav.menu{
    display:none;order:3;width:100%;
    flex-direction:column;align-items:stretch;gap:6px;
    padding:8px 0 18px;border-top:1px solid var(--line);
  }
  nav.menu.open{display:flex}
  nav.menu ul{flex-direction:column;gap:2px;width:100%}
  nav.menu li{width:100%}
  nav.menu a{display:flex;align-items:center;min-height:var(--tap);padding:12px 14px;width:100%}
  nav.menu a.btn{justify-content:center;margin-top:8px}
  .hamb{display:inline-flex}
  .nav{flex-wrap:wrap;padding:12px 0}
}

/* ==========================================================================
   5. HERO
   ========================================================================== */

.hero{
  background:
    radial-gradient(1100px 460px at 82% -14%,rgba(143,179,255,.16),transparent 60%),
    radial-gradient(820px 480px at 6% 118%,rgba(143,179,255,.12),transparent 55%),
    var(--night);
  color:var(--white);position:relative;overflow:hidden;
}
.hero-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:44px;align-items:start;padding:28px 0 64px;position:relative;z-index:1}
@media(max-width:940px){
  .hero-grid{grid-template-columns:1fr;gap:26px;padding:0 0 48px}
  /* No `order` overrides on purpose. They used to put the showcase and the search
     above the copy, so a phone landed on a photograph and a four-field form and met
     the one sentence this business has to say third. Gianni, 24 Aug 2026:
     "tregon search pastaj hero ... mbi 80% shiqojne ne mobile". DOM order is the
     reading order now: what we are, then a car, then the tool to find one. */
}

.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;
  color:#DCE6FA;border:1px solid rgba(255,255,255,.35);
  border-radius:var(--r-pill);padding:7px 16px;margin-bottom:22px;
}
.hero h1{font-size:clamp(42px,6.6vw,77px);line-height:.98;letter-spacing:.8px}
.hero h1 em{font-style:normal;color:var(--sky)}
.hero p.lead{margin:20px 0 30px;max-width:520px;font-size:17.5px;color:var(--mist)}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:520px){.hero-ctas .btn{flex:1 1 100%}}

.hero-meta{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;color:var(--mist);font-size:13.5px}
.hero-meta b{display:block;font-family:var(--display);font-size:18px;letter-spacing:.8px;color:var(--white);text-transform:uppercase;margin-bottom:2px}
@media(max-width:620px){.hero-meta{grid-template-columns:1fr;gap:14px;margin-top:32px}}

.showcase{background:none;border:none;border-radius:0;padding:0;box-shadow:none}
.showcase .sc-label{
  font-size:12px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--aurora);margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;
}
.sc-stage{aspect-ratio:4/3;border-radius:var(--r-card);background:linear-gradient(135deg,var(--night-3),var(--night-2));display:grid;place-items:center;position:relative;overflow:hidden;margin-bottom:18px}
.sc-stage img{width:100%;height:100%;object-fit:cover}
.sc-stage svg{width:130px;height:130px;opacity:.5}
.sc-info{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.sc-info h3{font-size:24px;letter-spacing:.4px}
.sc-info .sc-price{font-family:var(--display);font-weight:800;font-size:24px;color:var(--white);white-space:nowrap}
.sc-chips{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 16px}
.sc-chip{font-size:12.5px;font-weight:500;color:var(--mist);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-pill);padding:5px 12px}
.sc-foot{display:flex;justify-content:space-between;align-items:center;gap:14px}
.sc-dots{display:flex;gap:7px}
.sc-dot{width:24px;height:4px;border-radius:var(--r-pill);background:rgba(255,255,255,.2);border:none;cursor:pointer;padding:0;transition:background .2s}
.sc-dot.on{background:var(--white)}
.sc-cta{font-weight:600;font-size:14.5px;color:#BFD3FA}
.sc-cta:hover{text-decoration:underline}
.fadeSwap{animation:fadeSwap .4s ease}
@keyframes fadeSwap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.badge{
  position:absolute;top:14px;left:14px;
  font-size:12.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  background:var(--accent);color:#3D2600;padding:8px 15px;border-radius:var(--r-pill);
  box-shadow:0 4px 14px rgba(0,0,0,.28);
}
.badge-sold{background:var(--danger);color:var(--white)}

/* ==========================================================================
   6. SECTION HEADS
   ========================================================================== */

.sec-head{margin-bottom:36px;max-width:640px}
.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;color:var(--brand);margin-bottom:10px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--brand)}
.sec-head p{margin-top:10px;color:var(--steel);font-size:16.5px}
.dark{background:var(--night);color:var(--white)}
.dark .eyebrow{color:var(--aurora)}
.dark .eyebrow::before{background:var(--sky)}
.dark .sec-head p{color:var(--mist)}

/* ==========================================================================
   7. INVENTORY
   ========================================================================== */

.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.chip{
  font-family:var(--body);font-weight:600;font-size:14.5px;text-transform:none;letter-spacing:0;
  min-height:42px;padding:9px 18px;border-radius:var(--r-pill);
  border:1.5px solid var(--line-strong);background:var(--white);color:var(--steel);
  cursor:pointer;transition:all .16s ease;
}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip.active{background:var(--brand);color:var(--white);border-color:var(--brand)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:20px}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-1);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-strong)}
.card-img{aspect-ratio:16/10;background:linear-gradient(135deg,#14307C,#103071);display:grid;place-items:center;position:relative;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-img svg{width:70px;height:70px;opacity:.45}
.card-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:12px;flex:1}
.card-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.card h3{font-size:19.5px;letter-spacing:.3px;line-height:1.15}
.price{font-family:var(--display);font-weight:800;font-size:22px;color:var(--brand);white-space:nowrap}
/* The card's specs, as icons. Wraps rather than a fixed two-column grid: a card that
   knows three things about a vehicle should not draw a gap where the fourth would be. */
.card-specs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px}
.card-specs li{display:flex;align-items:center;gap:6px;min-width:0;font-size:13.5px;color:var(--night)}
.card-specs .spec-ic{width:19px;height:19px;flex:0 0 19px;color:var(--brand)}
.card .btn{margin-top:auto;width:100%;font-size:15px;min-height:44px;padding:11px 16px}

.grid-empty{grid-column:1/-1;background:var(--white);border:1px dashed var(--line-strong);border-radius:var(--r-card);padding:44px 24px;text-align:center;color:var(--steel)}
.grid-more{margin-top:32px;display:flex;justify-content:center}
@media(max-width:520px){.grid-more .btn{width:100%}}

.das-pagination{margin-top:40px;display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.das-pagination .page-numbers{
  display:inline-grid;place-items:center;min-width:var(--tap);height:var(--tap);padding:0 14px;
  border:1.5px solid var(--line-strong);border-radius:var(--r-btn);background:var(--white);
  font-weight:600;font-size:15.5px;color:var(--steel);
}
.das-pagination .page-numbers:hover{border-color:var(--brand);color:var(--brand)}
.das-pagination .page-numbers.current{background:var(--brand);border-color:var(--brand);color:var(--white)}

/* ==========================================================================
   8. ABOUT / VALUES
   ========================================================================== */

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.stat{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:20px 16px;text-align:center;box-shadow:var(--sh-1)}
.stat b{display:block;font-family:var(--display);font-weight:800;font-size:32px;color:var(--brand);line-height:1}
.stat span{font-size:12px;color:var(--steel);letter-spacing:.8px;text-transform:uppercase;font-weight:600}

.about-visual{background:var(--night);border-radius:var(--r-card);padding:32px;color:var(--white);box-shadow:var(--sh-3)}
.about-visual h3{font-size:23px;letter-spacing:.4px;margin-bottom:18px;color:var(--aurora)}
.about-visual ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.about-visual li{display:flex;gap:13px;color:var(--mist);font-size:15.5px}
.about-visual li b{color:var(--white);font-weight:600}
.about-visual .tick{flex:none;width:24px;height:24px;border-radius:8px;background:rgba(143,179,255,.16);display:grid;place-items:center;color:#DCE6FA;font-weight:700;font-size:13px}

.vals{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.val{background:var(--night-2);border:1px solid rgba(255,255,255,.07);border-radius:var(--r-card);padding:26px 24px}
.val .ico{width:44px;height:44px;border-radius:var(--r-btn);background:rgba(143,179,255,.14);display:grid;place-items:center;margin-bottom:16px;font-size:21px}
.val h3{font-size:20px;letter-spacing:.4px;margin-bottom:8px}
.val p{color:var(--mist);font-size:15px}

/* ==========================================================================
   9. TEAM (rendered via [das_team])
   ========================================================================== */

.team-head{margin-top:0;margin-bottom:30px;max-width:640px}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px}
.tm{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-1);transition:transform .18s ease,box-shadow .18s ease}
.tm:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.tm-img{aspect-ratio:1/1;overflow:hidden;position:relative}
.tm-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.tm:hover .tm-img img{transform:scale(1.03)}
.tm-role{position:absolute;bottom:12px;left:12px;font-size:11.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;background:var(--white);color:var(--brand);padding:6px 12px;border-radius:var(--r-pill);box-shadow:var(--sh-1)}
.tm-body{padding:22px 22px 26px}
.tm-body h3{font-size:22px;letter-spacing:.4px}
.tm-body .tm-sub{font-size:12.5px;color:var(--brand);font-weight:600;letter-spacing:1.2px;text-transform:uppercase;margin:3px 0 12px}
.tm-body p{color:var(--steel);font-size:15px}

/* ==========================================================================
   10. FINANCING
   ========================================================================== */

.fin-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
@media(max-width:880px){.fin-grid{grid-template-columns:1fr;gap:24px}}
.fin-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:28px;box-shadow:var(--sh-1)}
.fin-card label,.cform label{
  display:block;font-weight:600;font-size:13.5px;letter-spacing:.6px;text-transform:uppercase;
  margin:18px 0 7px;color:var(--steel);
}
.fin-card label:first-of-type{margin-top:0}
.fin-card select,.fin-card input,
.cform input,.cform select,.cform textarea{
  width:100%;min-height:var(--tap);padding:13px 14px;
  border:1.5px solid var(--line-strong);border-radius:var(--r-input);
  font-family:var(--body);font-size:16px;background:var(--white);color:var(--night);
}
.fin-card select:focus,.fin-card input:focus,
.cform input:focus,.cform select:focus,.cform textarea:focus{border-color:var(--brand)}
.fin-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:480px){.fin-row{grid-template-columns:1fr}}

.fin-result{background:var(--night);color:var(--white);border-radius:var(--r-card);padding:30px;text-align:center}
@media(min-width:881px){.fin-result{position:sticky;top:24px}}
.fin-result .fr-label{font-size:12.5px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;color:var(--mist)}
.fin-result .fr-amount{font-family:var(--display);font-weight:800;font-size:clamp(48px,9vw,60px);color:var(--white);line-height:1.05;margin:10px 0 4px}
.fin-result .fr-amount small{font-size:22px;color:var(--mist)}
.fin-result .fr-sub{color:var(--mist);font-size:14px}
.fin-result hr{border:none;border-top:1px solid rgba(255,255,255,.12);margin:20px 0}
.fin-break{display:flex;flex-direction:column;gap:10px;text-align:left;font-size:14.5px;color:var(--mist)}
.fin-break div{display:flex;justify-content:space-between;gap:12px}
.fin-break b{color:var(--white);font-weight:600}
.fin-note{font-size:12.5px;color:var(--steel);margin-top:16px;line-height:1.5}
.dark .fin-note{color:var(--mist)}

/* ==========================================================================
   11. BANNERS
   ========================================================================== */

.band{color:var(--white);padding:0}
.band .wrap{
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  padding-top:52px;padding-bottom:52px;
}
.band h2{max-width:560px}
.band h2 em{font-style:normal;color:var(--sky)}
.band p{color:var(--mist);margin-top:6px;max-width:520px}
.band-navy{background:linear-gradient(120deg,var(--night) 55%,var(--night-2))}
.band-brand{background:var(--brand)}
.band-brand p{color:rgba(255,255,255,.85)}
.band-brand h2{font-size:clamp(24px,3.5vw,36px)}
@media(max-width:620px){
  .band .wrap{flex-direction:column;align-items:flex-start;padding-top:44px;padding-bottom:44px}
  .band .btn{width:100%}
}

.trade{background:linear-gradient(120deg,var(--night) 55%,var(--night-2));color:var(--white)}
.cta-band{background:var(--brand);color:var(--white)}
.trade .wrap,.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-top:52px;padding-bottom:52px}

/* ==========================================================================
   12. VISIT
   ========================================================================== */

.visit-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:start}
@media(max-width:880px){.visit-grid{grid-template-columns:1fr}}
.info-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:26px;box-shadow:var(--sh-1)}
.info-row{display:flex;gap:15px;padding:15px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.info-row:first-child{padding-top:0}
.info-row:last-child{border-bottom:none;padding-bottom:0}
.info-ico{flex:none;width:40px;height:40px;border-radius:var(--r-btn);background:var(--snow);display:grid;place-items:center;font-size:18px}
.info-row b{display:block;font-size:12.5px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--steel);margin-bottom:4px}
.info-row a{color:var(--brand);font-weight:600}
.info-row a:hover{text-decoration:underline}
.info-row .sub{color:var(--night);font-size:15.5px}

table.hours{width:100%;border-collapse:collapse;font-size:15px}
table.hours td{padding:9px 0;border-bottom:1px solid var(--line);color:var(--steel)}
table.hours tr:last-child td{border-bottom:none}
table.hours td:last-child{text-align:right;font-weight:600;color:var(--night)}
table.hours tr.today td{color:var(--brand);font-weight:700}
.closed{color:var(--danger)}

.map-shell{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);min-height:380px;background:var(--white)}
.map-shell iframe{width:100%;height:380px;border:0;display:block}

/* ==========================================================================
   13. FORMS / NOTICES
   ========================================================================== */

.cform{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:28px;box-shadow:var(--sh-1)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}
.cform textarea{min-height:130px;resize:vertical;padding-top:13px}
.cform .btn{margin-top:20px}
@media(max-width:520px){.cform .btn{width:100%}}
.das-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.das-notice{border-radius:var(--r-btn);padding:14px 16px;font-size:15px;margin-bottom:16px}
.das-notice-ok{background:#E9F4ED;border:1px solid #A5CFB6;color:var(--ok)}
.das-notice-err{background:#FBEBEA;border:1px solid #E2ABA8;color:var(--danger)}

/* ==========================================================================
   14. SINGLE VEHICLE
   ========================================================================== */

.car-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:24px}
.car-head h1{font-size:clamp(27px,4.4vw,44px);line-height:1.03}
.car-head .price{font-size:32px}
.car-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:36px;align-items:start}
@media(max-width:940px){.car-grid{grid-template-columns:1fr;gap:28px}}
.car-stage{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);background:linear-gradient(135deg,var(--night-3),var(--night-2));aspect-ratio:16/10;display:grid;place-items:center}
.car-stage img{width:100%;height:100%;object-fit:cover}
/* Swipe, because a phone has no click. The stage holds every photo and scrolls; the
   snap is what makes a half-swipe land on a whole picture rather than between two.
   It is a scroll container, so touch swiping is the browser's own behaviour and needs
   no JavaScript at all — the script only moves the arrows, the counter and the
   thumbnails along with it. */
.car-gallery{position:relative}
.car-stage.is-slider{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none}
.car-stage.is-slider::-webkit-scrollbar{display:none}
.car-stage.is-slider img{flex:0 0 100%;scroll-snap-align:center}
.car-stage.is-slider:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.car-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:var(--r-pill);cursor:pointer;color:var(--brand);background:rgba(255,255,255,.92);box-shadow:0 2px 10px rgba(16,48,113,.25)}
.car-nav[hidden]{display:none}
.car-nav.prev{left:10px}
.car-nav.next{right:10px}
.car-nav svg{width:20px;height:20px}
/* A touch device swipes; arrows on top of the photo would only cover it. */
@media (hover:none){.car-nav{display:none}}
.car-count{position:absolute;right:10px;bottom:10px;background:rgba(16,48,113,.78);color:#fff;border-radius:var(--r-pill);padding:3px 10px;font-size:12.5px;font-weight:600}

.car-stage svg{width:120px;height:120px;opacity:.45}
.car-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:10px}
.car-thumbs button{border:1.5px solid var(--line-strong);border-radius:var(--r-btn);overflow:hidden;background:var(--white);cursor:pointer;padding:0;aspect-ratio:4/3}
.car-thumbs button.on{border-color:var(--brand)}
.car-thumbs img{width:100%;height:100%;object-fit:cover}

/* Vehicle specs as an icon list — the plain two-column table it replaces made somebody
   read a caption to find the mileage. An icon is found without reading. */
/* Each spec is a row, not a card. Fourteen bordered boxes in a 414px column put a
   border round every fact and then made the fact itself 15px; the icon was competing
   with its own frame. The frames are gone, the icon sits on a pale brand disc where it
   is the thing the eye lands on, and the value is what is left to read. */
.spec-list{list-style:none;margin:0 0 2px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:15px 12px}
.spec-list li{display:flex;align-items:center;gap:11px;min-width:0}
.spec-list .spec-ic{width:40px;height:40px;flex:0 0 40px;padding:9px;border-radius:var(--r-pill);background:var(--brand-wash);color:var(--brand)}
.spec-list .spec-txt{display:flex;flex-direction:column;min-width:0}
.spec-list .spec-k{font-size:10.5px;line-height:1.25;letter-spacing:.09em;font-weight:600;text-transform:uppercase;color:var(--steel)}
.spec-list .spec-v{font-size:15.5px;line-height:1.3;font-weight:600;color:var(--night);overflow-wrap:anywhere}
/* The VIN is seventeen characters and never fits a half-width cell. */
.spec-list .spec-vin{grid-column:1/-1}
.spec-list .spec-vin .spec-v{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;letter-spacing:.04em}
.car-aside{display:flex;flex-direction:column;gap:12px}
/* Not sticky any more. The enquiry form moved into this column, so the aside is now the
   taller of the two rather than the shorter — and a sticky box taller than the window
   pins its top and puts its own bottom out of reach, which would hide the Send button. */
.car-aside .cform{padding:20px}
/* The shortcode carries an inline 28px on its heading because on the Financing page and
   the contact page it stands alone at full width. In a 414px column that wraps to three
   lines, and an inline style can only be beaten with !important. */
.car-aside .cform h2{font-size:21px!important;line-height:1.15}
.car-desc{margin-top:32px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:26px;box-shadow:var(--sh-1)}
.car-desc h2{font-size:24px;margin-bottom:12px}
.car-desc p{color:var(--steel);margin-bottom:14px}

/* ==========================================================================
   15. GENERIC PAGES
   ========================================================================== */

.page-hero{background:var(--night);color:var(--white);padding:56px 0}
.page-hero h1{font-size:clamp(28px,4.4vw,44px);letter-spacing:.5px}
.page-hero p{color:var(--mist);margin-top:10px}
.entry{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:32px;box-shadow:var(--sh-1)}
.entry h2,.entry h3,.entry h4{margin:26px 0 12px}
.entry h2:first-child,.entry h3:first-child{margin-top:0}
.entry p,.entry li{color:var(--steel);margin-bottom:14px}
.entry ul,.entry ol{padding-left:22px}
.entry a{color:var(--brand);font-weight:600;text-decoration:underline}
.entry img{border-radius:var(--r-btn);margin:18px 0}
@media(max-width:560px){.entry{padding:22px}}

/* ==========================================================================
   16. FOOTER
   ========================================================================== */

footer{background:var(--night);color:var(--mist);font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding:56px 0 40px}
@media(max-width:880px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr;gap:28px}}
footer h4{font-size:12.5px;font-weight:600;letter-spacing:2.2px;text-transform:uppercase;color:var(--white);margin-bottom:14px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
footer a:hover{color:#9DBBFF}
.socials{display:flex;gap:10px;margin-top:16px}
.socials a{width:42px;height:42px;border-radius:var(--r-btn);border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;transition:all .16s ease}
.socials a:hover{background:var(--white);border-color:var(--white)}
.socials svg{width:18px;height:18px;fill:var(--white)}
.socials a:hover svg{fill:var(--brand)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.09);padding:20px 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13.5px}

/* ==========================================================================
   17. SCROLL REVEAL
   ========================================================================== */

.rv{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.rv.in{opacity:1;transform:none}

/* ==========================================================================
   18. HERO ON MOBILE - the photo leads, the copy follows
   80% of visitors arrive on a phone, so this is the primary layout.
   ========================================================================== */

@media(max-width:940px){
  /* full-bleed photo: cancel the .wrap gutter so nothing frames the car */
  .showcase .sc-stage{
    margin-left:-20px;margin-right:-20px;
    width:calc(100% + 40px);
    border-radius:0;
    aspect-ratio:4/3;
    margin-bottom:16px;
  }
  .showcase .sc-label{display:none}
  .showcase .badge{top:14px;left:14px}

  .sc-info h3{font-size:27px}
  .sc-info .sc-price{font-size:27px}
  .sc-chips{margin:12px 0 14px}

  .hero h1{font-size:clamp(31px,7.4vw,44px)}
  .hero p.lead{font-size:16.5px;margin:16px 0 24px}
  .kicker{margin-bottom:16px}
  .hero-meta{margin-top:28px}
}

@media(max-width:620px){
  .sc-foot{flex-direction:column;align-items:stretch;gap:12px}
  .sc-dots{justify-content:center}
  .sc-cta{text-align:center}
}
/* ==========================================================================
   19. HEADER LOGO - 30% larger
   ========================================================================== */

header.site .logo img.mark-img{height:57px;border-radius:11px}
header.site .logo{gap:14px}
header.site .logo-text b{font-size:22px}
@media(max-width:480px){
  header.site .logo img.mark-img{height:50px}
  header.site .logo-text b{font-size:18px;letter-spacing:.4px}
}

/* ==========================================================================
   20. SUBMENUS
   Mobile is the primary case: the submenu is always open and indented, so
   there is nothing to discover and nothing to tap twice.
   ========================================================================== */

nav.menu ul li{position:relative}
nav.menu .sub-menu{list-style:none;margin:0;padding:0}

/* --- mobile: indented, always visible --- */
@media(max-width:940px){
  nav.menu .sub-menu{
    display:flex;flex-direction:column;
    margin:2px 0 8px;padding-left:14px;
    border-left:2px solid var(--line);
  }
  nav.menu .sub-menu a{
    font-weight:500;font-size:15px;color:var(--steel);
    min-height:44px;padding:10px 14px;
  }
  nav.menu .sub-menu a:hover{color:var(--brand);background:#EEF3FC}
}

/* --- desktop: hover / focus dropdown --- */
@media(min-width:941px){
  nav.menu .sub-menu{
    position:absolute;top:calc(100% + 6px);left:0;z-index:60;
    min-width:210px;flex-direction:column;gap:2px;
    background:var(--white);border:1px solid var(--line);
    border-radius:var(--r-card);box-shadow:var(--sh-3);
    padding:8px;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .16s ease,transform .16s ease,visibility .16s;
  }
  nav.menu li:hover > .sub-menu,
  nav.menu li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none}
  nav.menu .sub-menu a{display:block;white-space:nowrap;font-size:15px;font-weight:500;padding:10px 12px}
  /* parent keeps its hover state while the panel is open */
  nav.menu li:hover > a,nav.menu li:focus-within > a{background:#EEF3FC;color:var(--brand)}
  /* caret on parents that have children */
  nav.menu li.menu-item-has-children > a::after{
    content:"";display:inline-block;margin-left:7px;vertical-align:2px;
    width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg) translateY(-2px);opacity:.65;
  }
}

/* ==========================================================================
   21. FILTER CHIPS AS LINKS (archive) + counts
   ========================================================================== */

a.chip{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.chip-n{
  display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;
  border-radius:var(--r-pill);background:var(--snow);color:var(--steel);
  font-size:12px;font-weight:700;line-height:1;
}
.chip.active .chip-n{background:rgba(255,255,255,.22);color:var(--white)}

/* ==========================================================================
   22. FOOTER SLOGAN + STAFF LOGIN
   ========================================================================== */

.foot-slogan{
  margin-top:16px;font-family:var(--display);font-weight:700;
  font-size:17px;letter-spacing:1.6px;text-transform:uppercase;color:var(--sky);
}
.foot-staff a{color:var(--mist);text-decoration:underline;text-underline-offset:3px}
.foot-staff a:hover{color:var(--white)}
@media(max-width:560px){.foot-bottom{flex-direction:column;gap:8px}}

/* ==========================================================================
   23. HERO CTA - single button now that the phone button is gone
   ========================================================================== */

@media(max-width:520px){.hero-ctas .btn{flex:0 1 auto;min-width:220px}}
/* designer credit */
.foot-credit{color:var(--steel)}
.foot-credit a{color:var(--mist);font-weight:600}
.foot-credit a:hover{color:var(--white)}

/* search form */
.das-search{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.das-search input[type=search]{flex:1 1 220px;min-height:var(--tap);padding:13px 14px;border:1.5px solid var(--line-strong);border-radius:var(--r-input);font-family:var(--body);font-size:16px;background:var(--white);color:var(--night)}
.das-search input[type=search]:focus{border-color:var(--brand)}

/* ---------------------------------------------------------------------------
 * Inventory search and filters.
 *
 * Every control is a plain form field posting GET, so the page works with
 * JavaScript switched off and each result is a link somebody can send on. The
 * controls wrap rather than scroll: on a phone this is a column, on a desktop
 * it is one row.
 * ------------------------------------------------------------------------- */
.inv-filter { margin: 0 0 14px; }
.inv-filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}
.inv-filter-row label { display: block; }
.inv-filter .inv-search { flex: 1 1 260px; min-width: 0; }
.inv-filter input[type="search"],
.inv-filter select,
.inv-sort select {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	font: inherit;
	color: inherit;
}
.inv-filter select,
.inv-sort select { min-width: 150px; }
.inv-filter input[type="search"]:focus-visible,
.inv-filter select:focus-visible,
.inv-sort select:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 1px;
}
.inv-clear {
	font-size: 14px;
	text-decoration: underline;
	white-space: nowrap;
}

/* The count is the honest part of a filter: it says what is left before anyone scrolls. */
.inv-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	margin: 14px 0 18px;
}
.inv-count { margin: 0; font-size: 15px; }
.inv-count strong { font-size: 19px; }
.inv-of { color: var(--steel); }
.inv-sort { margin: 0; }

@media (max-width: 560px) {
	.inv-filter-row > label { flex: 1 1 100%; }
	.inv-filter-row > button { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------------------
   Quick search in the homepage hero.
   A GET form aimed at the inventory archive; the controls mirror the inventory
   filter bar, sitting on a white panel so they read on the navy hero.
--------------------------------------------------------------------------- */
.hero-search{
	display:flex;flex-wrap:wrap;gap:8px;align-items:center;
	background:var(--white);border-radius:var(--r-card);
	padding:10px;margin:0;box-shadow:var(--sh-3);
}
.hero-search label{display:block;margin:0}
.hero-search .hs-q{flex:1 1 170px;min-width:0}
.hero-search input[type="search"],
.hero-search select{
	width:100%;
	padding:11px 12px;
	border:1px solid var(--line);
	border-radius:10px;
	background:#fff;
	font:inherit;
	color:var(--night);
}
.hero-search select{min-width:130px}
.hero-search input[type="search"]:focus-visible,
.hero-search select:focus-visible{
	outline:2px solid var(--brand);outline-offset:1px;
}
@media(max-width:560px){
	.hero-search > label{flex:1 1 100%}
	.hero-search > .btn{flex:1 1 auto}
}

/* Footer credit: the vendor's mark beside the name, readable on the navy footer. */
.foot-credit .tiff-credit{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:inherit}
.foot-credit .tiff-credit img{width:13px;height:14px;display:block}
.foot-credit .tiff-credit b{font-weight:700;letter-spacing:1.5px}
.foot-credit .tiff-credit:hover{color:var(--white)}

/* Reviews: the real Google aggregate, with room for verbatim quotes. */
#reviews .rev-summary{display:flex;flex-wrap:wrap;align-items:center;gap:14px;background:var(--white);border:1px solid var(--line-strong);border-radius:var(--r-card);padding:18px 22px;box-shadow:var(--sh-1)}
#reviews .rev-stars{position:relative;display:inline-block;font-size:22px;letter-spacing:3px;color:var(--line-strong);white-space:nowrap}
#reviews .rev-stars-on{position:absolute;top:0;left:0;overflow:hidden;color:var(--accent);white-space:nowrap}
#reviews .rev-score{font-family:var(--display);font-size:22px}
#reviews .rev-score b{font-size:30px}
#reviews .rev-count{color:var(--steel)}
#reviews .rev-summary .btn{margin-left:auto}
.rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:20px}
.rev-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:20px;box-shadow:var(--sh-1);margin:0}
.rev-card-stars{color:var(--accent);letter-spacing:2px;margin-bottom:10px}
.rev-card blockquote{margin:0 0 12px;font-size:15.5px}
.rev-card figcaption{color:var(--steel);font-size:14px}
@media (max-width:560px){#reviews .rev-summary .btn{margin-left:0;flex:1 1 100%}}

/* ---------------------------------------------------------------------------
   Vehicle page: highlights, equipment, payment estimate, similar vehicles.
--------------------------------------------------------------------------- */
.car-highlights{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 22px;padding:0}
.car-highlights li{display:inline-flex;align-items:center;gap:8px;background:#EAF0FC;color:var(--brand);border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:7px 15px;font-size:14px;font-weight:600}
.car-highlights li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}

.car-calc{margin-top:18px;border:1px solid var(--line-strong);border-radius:var(--r-card);padding:16px;background:var(--snow)}
.car-calc h3{font-family:var(--display);font-size:19px;margin:0 0 12px}
.car-calc label{display:block;font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--steel);margin:0 0 5px}
.car-calc input,.car-calc select{width:100%;padding:10px 11px;border:1px solid var(--line-strong);border-radius:10px;background:#fff;font:inherit;color:var(--night)}
.car-calc-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.car-calc-out{display:flex;align-items:baseline;gap:4px;margin-top:14px;font-family:var(--display);font-size:34px;font-weight:800;color:var(--brand)}
.car-calc-out small{font-size:15px;color:var(--steel);font-weight:600}
.car-calc-note{margin:8px 0 0;font-size:12.5px;color:var(--steel)}

.car-features,.car-similar{margin-top:48px}
.car-features h2,.car-similar h2{font-family:var(--display);font-size:clamp(24px,3vw,32px);margin:0 0 18px}

/* A notice, deliberately not a wall: it sits at the foot and never covers the page. */
.cookie-note{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;background:var(--night);color:#fff;border-radius:var(--r-card);box-shadow:var(--sh-3);padding:14px 18px}
.cookie-note[hidden]{display:none}
.cookie-note p{margin:0;font-size:14.5px;color:var(--mist);max-width:70ch}
.cookie-note a{color:#fff;text-decoration:underline}
.cookie-note .btn{min-height:40px;padding:9px 18px;font-size:15px}
@media (max-width:560px){.cookie-note{left:10px;right:10px;bottom:10px}.cookie-note .btn{flex:1 1 100%}}

/* ---------------------------------------------------------------------------
   The Financing page: the steps, and the block that says what we never ask for.
--------------------------------------------------------------------------- */
.fin-steps{list-style:none;counter-reset:step;margin:0 0 8px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.fin-steps li{counter-increment:step;position:relative;background:transparent;border:1px solid var(--line);border-radius:var(--r-card);padding:18px 18px 16px}
.fin-steps li::before{content:counter(step);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--brand-wash);color:var(--brand);font-family:var(--display);font-weight:800;font-size:15px;margin-bottom:10px}
.fin-steps li strong{display:block;margin-bottom:5px;font-size:16px}
.fin-steps li p{margin:0;color:var(--steel);font-size:15px}

.fin-never{background:var(--snow);border:1px solid var(--line-strong);border-left:4px solid var(--ok);border-radius:var(--r-card);padding:24px 26px;margin:8px 0 8px}
.fin-never h3{font-family:var(--display);font-size:23px;margin:0 0 12px}
.fin-never ul{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px 20px}
.fin-never li{position:relative;padding-left:26px;font-weight:600}
.fin-never li::before{content:'';position:absolute;left:6px;top:9px;width:11px;height:2px;background:var(--danger);border-radius:2px}
.fin-never p{margin:0;color:var(--steel)}

/* ---------- photo lightbox ---------- */
/* The stage crops to 16:10 (`object-fit:cover`), so even the photo a buyer is looking
   at is only part of the frame we hold. Clicking opens the whole of it. It reuses the
   stage's own <img> src, so opening costs no request, and it exists for a one-photo
   vehicle too — that one had no way to be seen large at all. */
.car-stage.can-zoom{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;
    background:rgba(8,18,42,.93);padding:clamp(10px,3vw,44px)}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r-card);
        box-shadow:0 24px 60px rgba(0,0,0,.55)}
.lb-btn{position:absolute;width:46px;height:46px;display:grid;place-items:center;border:0;
        border-radius:var(--r-pill);cursor:pointer;color:var(--brand);
        background:rgba(255,255,255,.94);box-shadow:0 2px 12px rgba(0,0,0,.4)}
.lb-btn:hover{background:#fff}
.lb-btn:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.lb-btn[hidden]{display:none}
.lb-close{top:14px;right:14px}
/* Kept on touch, unlike the stage's own arrows: the stage swipes and this does not. */
.lb-prev{left:14px;top:50%;transform:translateY(-50%)}
.lb-next{right:14px;top:50%;transform:translateY(-50%)}
.lb-count{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
          background:rgba(16,48,113,.85);color:#fff;border-radius:var(--r-pill);
          padding:4px 12px;font-size:13px;font-weight:600}
.lb-count[hidden]{display:none}
body.lb-open{overflow:hidden}

/* The hero's right column: the featured car, with the search under it.
   Gianni, 23 Aug 2026 — the search sat bottom-left under the copy and the two
   columns ended at different heights. Under the card it balances them, and it is
   also where somebody looking at a car is already looking. */
.hero-right{display:flex;flex-direction:column;gap:16px}

/* Vehicle videos — 16:9, under the photographs, where a buyer is already looking.
   Only YouTube and Vimeo render; anything else das_video_embed_url() cannot read is
   left out rather than drawn as a broken frame. */
.car-videos{margin-top:22px}
.car-videos h2{font-size:20px;margin:0 0 12px}
.car-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;margin-bottom:14px}
.car-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------------------------------------------------------------------------
   Mobile first, and meant literally — 24 August 2026.

   Over 80% of this dealership's visitors are on a phone, so the phone is not the
   narrow case to be tolerated; it is the page. What follows shortens the home page
   on a phone without taking anything off the desktop one or out of the markup.
--------------------------------------------------------------------------- */
@media(max-width:940px){
  /* Four cars, not eight. Eight cards on a 390px screen is about 3,200px of
     scrolling before anything else on the page, and the vehicle somebody wants is
     almost never the fifth one. "Browse all inventory" is directly under them.
     Hidden rather than not printed: the desktop grid and a crawler still get all
     eight, and a display:none image is not fetched. */
  #carGrid > .card:nth-child(n+5){display:none}
}
@media(max-width:560px){
  /* One search box, not four controls. Make and price are two full-width rows
     under the hero on a phone, and the inventory page they submit to carries the
     whole filter bar anyway — so the hero asks the one question a person arrives
     with and the next screen narrows it. */
  .hero-search > label:not(.hs-q){display:none}
  .hero-search{padding:8px}
}

/* ---------------------------------------------------------------------------
   The reviews fold — 24 August 2026.
   Open everywhere, and closed on a phone by the script beside it. Above 940px the
   grid is one row of three, so there is nothing to fold and the toggle is hidden.
--------------------------------------------------------------------------- */
.rev-more{margin-top:20px}
.rev-more > summary{list-style:none;cursor:pointer}
.rev-more > summary::-webkit-details-marker{display:none}
@media(min-width:941px){
  .rev-more > summary{display:none}
}
@media(max-width:940px){
  .rev-more > summary{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    min-height:var(--tap);padding:13px 18px;
    background:var(--white);border:1.5px solid var(--line-strong);border-radius:var(--r-btn);
    font-weight:600;font-size:15.5px;color:var(--brand);
  }
  .rev-more > summary::after{
    content:"";width:9px;height:9px;flex:none;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .16s ease;
  }
  .rev-more[open] > summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
  .rev-more[open] > summary{margin-bottom:4px}
}

/* ---------------------------------------------------------------------------
   Two columns that end on the same line — 25 August 2026.

   Gianni sent About us and Visit us and asked for them symmetric. Same fault in
   both, and it is not the widths: the right-hand column did not follow the height
   of the left one, so each block finished as a tall column beside a short one with
   a pool of white under it. The same thing the vehicle page was fixed for in
   August (CLAUDE.md, "The columns did not balance").

   Only above 880px — below it both grids are already one column, and a height
   that follows a sibling has no sibling to follow.
--------------------------------------------------------------------------- */
@media(min-width:881px){
  /* About: the promise card was `align-items:center`, so it floated with uneven
     air above and below. Stretched it matches the copy-and-stats column, and its
     own content is centred inside — which is where the centring belonged. */
  .about-visual{display:flex;flex-direction:column;justify-content:center}
  /* The card is now as tall as the column beside it, which left 87px of dead navy
     around four items. A roomier list spends it as rhythm rather than as a void.
     `space-between` was tried and rejected: it reads well at 1280px and blows the
     gaps out to 79px at 900px, where the list stops looking like a list. */
  .about-visual ul{gap:20px}

  /* Visit: the map was a fixed 380px next to a card carrying an address, two
     phone numbers, two addresses and seven rows of opening hours — about 950px.
     A taller map is also a better map: more of the neighbourhood is visible. */
  .visit-grid{align-items:stretch}
  .map-shell{display:flex}
  /* `height:auto` is required, not tidiness: `align-self:stretch` only applies to
     a flex item whose height is auto, and the base rule sets it to 380px. */
  .map-shell iframe{flex:1 1 auto;height:auto}
}

/* ---------------------------------------------------------------------------
   The three stat tiles — 25 August 2026.
   A grid makes them equal height, and one label wraps to two lines while the other
   two do not — so the short ones sat with their content at the top and white space
   under it. Centred, all three read as one row. Every width: nothing about this
   depends on there being a column beside it.
--------------------------------------------------------------------------- */
.stat{display:flex;flex-direction:column;justify-content:center;gap:4px}

/* The financing link sits at the end of the row rather than the start — the
   estimator above it is the thing being read, and this is what to do next.
   Full width and back to the left on a phone, where a right-aligned button is
   a small target in a corner. */
.sec-more{margin-top:24px;text-align:right}
@media(max-width:520px){.sec-more{text-align:left}.sec-more .btn{width:100%}}

/* ---------------------------------------------------------------------------
   Features in two named tiers — 25 August 2026.

   Gianni put Carsforsale's vehicle page beside ours: they split equipment into
   Premium and Standard, both balanced, with Standard behind a Show-more control.
   He is right, and the reason ours looked ragged is in the data: the groups are
   wildly uneven on real vehicles — Comfort & interior 18 items, Exterior 2 — and
   two columns of blocks that size cannot balance. A flat list can.

   The rules this replaces — `.car-features-grid` and `.car-feature-group*` — were
   removed rather than left behind, since no template refers to them any more and dead
   CSS that looks live is a trap for whoever reads this next. A copy of exactly what
   came out is in uploads/tiff-backups/2026-08-25-feature-tiers/removed-css.txt.
--------------------------------------------------------------------------- */
.feat-tier + .feat-tier{margin-top:28px}
.feat-tier h3{
  font-size:13px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--steel);margin:0 0 12px;
}
.feat-tier.is-key h3{color:var(--brand)}
/* A grid, not CSS columns: rows fill left-to-right, so clamping the height cuts
   whole rows across both columns instead of slicing one column mid-way. */
.feat-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}
@media(max-width:640px){.feat-list{grid-template-columns:1fr}}
.feat-list li{position:relative;padding:7px 0 7px 26px;font-size:15.5px;line-height:1.45}
.feat-list li::before{
  content:"";position:absolute;left:4px;top:15px;width:10px;height:5.5px;
  border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg);
}
.feat-tier.is-key .feat-list li{font-weight:600}
.feat-tier.is-key .feat-list li::before{
  content:"\2605";left:2px;top:7px;width:auto;height:auto;border:0;transform:none;
  color:var(--accent);font-size:14px;line-height:1.45;
}
.feat-body{position:relative}
.feat-body.is-clamped{max-height:224px;overflow:hidden}
/* The fade ends in the page's own background — this block sits on the canvas, not
   on a white card like `.car-desc`. The transparent stop is written out in rgba
   rather than as `transparent`, which some engines interpolate through black. */
.feat-body.is-clamped::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:72px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(247,249,252,0),var(--snow));
}
.feat-toggle{
  margin-top:8px;background:none;border:0;padding:6px 0;cursor:pointer;
  font:inherit;font-weight:600;font-size:15px;color:var(--brand);
  display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);
}
.feat-toggle[hidden]{display:none}
.feat-toggle:hover{text-decoration:underline}
.feat-toggle::after{
  content:"";width:9px;height:9px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .16s ease;
}
.feat-toggle[aria-expanded="true"]::after{transform:rotate(-135deg) translate(-3px,-3px)}

/* ---------------------------------------------------------------------------
   Where a button sits — 25 August 2026.

   Gianni: *"bukuria eshte ne detaje apo jo, gati te gjitha butonat i kemi djathe
   ky?"* — pointing at Send enquiry, which was left while three others are right.
   He is right that it looked arbitrary, and the audit says why: three right, one
   centred, two left, none of it by a rule.

   The rule, and the answer is not "all of them right":

     • A form's primary action **fills its form**. It is the one thing that box is
       for, it is the biggest target, and left-or-right stops being a question.
       This is also what the Call button directly above it already does in the
       vehicle aside — two primary buttons in one column, one full width and one
       not, was the actual thing his eye caught.
     • A link that **leaves** the section sits at its end, on the right:
       How financing works, Read them on Google, Get an appraisal. Those are not
       submits; they are what to do next.
     • A control that **expands what is under it** stays on the left, under it:
       Show all N features.
     • A button ending a **full-width grid** is centred: Browse all inventory.

   The `@media(max-width:520px)` rule below is now subsumed by this one rather than
   contradicted by it — it said the same thing for phones only.
--------------------------------------------------------------------------- */
.cform button[type="submit"]{width:100%}

/* ---------------------------------------------------------------------------
   The About block on the front page — 25 August 2026.

   Gianni: the homepage and the page named About Us read as two About sections and
   the homepage was long for it. Checked before acting: /about-us/ held only
   [das_team] — 222 words, four staff cards — so it was not duplication but an
   inversion. The story was on the homepage and the page named for it had only faces.

   So the homepage keeps a lead paragraph, the three stats and a link; the story, the
   promise card and the team are on the page. 1129px → 799px on a 390px phone.

   `.sec-more` is `.fin-more` renamed: one class for "a link that leaves the section",
   which is what the button rule above calls for.
--------------------------------------------------------------------------- */
.about-lead{max-width:640px}
.about-lead p{color:var(--steel);margin-top:16px;font-size:16.5px}
/* 860px rather than the full 1180: three tiles across the whole page are wide and
   empty, which is the same fault as the stacked version that was rejected. */
.stats{max-width:860px;margin-top:30px}
.sec-more{max-width:860px}
@media(max-width:560px){.stats{grid-template-columns:1fr}}