/* ==========================================================================
   Everybody Rides — David Wilson, Bob Rohrman Auto Group.
   Delivery-first: he brings the car to you. One light visual world, gold and
   navy, every colour painted explicitly. Vehicle cards keep the .vcard markup
   the inventory plugin emits, so the plugin and the theme stay independent.
   ========================================================================== */
:root{
  /* Ground — a warm neutral biased toward the gold, not a stock grey */
  --paper:#FFFFFF;
  --paper-2:#F8F6F1;
  --paper-3:#EFEBE2;
  --line:#E2DCD0;
  --line-2:#CFC7B7;

  /* Ink */
  --ink:#14151A;
  --ink-soft:#3A3D46;
  --mute:#6A6F7B;

  /* Brand gold, sampled from the Everybody Rides logo (live theme tokens) */
  --gold:#ECBA53;
  --gold-bright:#F5CE79;
  --gold-deep:#C78E2A;
  --gold-ink:#8A6110;          /* gold as TEXT on light — 5.0:1 */
  --on-gold:#14151A;
  --gold-grad:linear-gradient(180deg,#F7D488 0%,#ECBA53 46%,#C78E2A 100%);

  /* Navy, sampled from David's suit and the dealership pylon — the second
     accent that ties the photography to the type */
  --navy:#1B2A4A;
  --navy-deep:#101B31;
  --navy-line:#2E4370;

  --display:'Anton','Arial Narrow',Impact,sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --pad:clamp(1.15rem,4vw,4rem);
  --r:6px;
  --r-lg:20px;
  --shadow:0 1px 2px rgba(20,21,26,.05),0 10px 30px rgba(20,21,26,.08);
  --shadow-lg:0 4px 10px rgba(20,21,26,.07),0 30px 70px rgba(20,21,26,.16);
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Hero figure geometry — see .hero__figure.
     --hero-edge keeps the figure and the chips on a 1520px band, so on a very
     wide monitor David stays near the copy instead of drifting into the corner. */
  --fig-h:113%;
  --fig-drop:26%;
  --hero-edge:max(2vw,calc((100% - 1520px) / 2));
  /* David sits inboard of the figure edge so he reads next to the headline
     rather than in the corner; the chips then tuck in behind him. */
  --fig-right:calc(var(--hero-edge) + clamp(0rem,7vw,10rem));
  --hero-h:clamp(540px,46vw,800px);

  /* Aliases so the rules carried over from the previous theme still resolve. */
  --nav-h:72px;
  --text-mute:var(--mute);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.04;text-wrap:balance}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--gold-deep);outline-offset:3px;border-radius:2px}
[hidden]{display:none!important}   /* .panel and .veh set display; this must win */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* --- Type utilities ----------------------------------------------------- */
.display{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.005em;
  transform:skewX(-7deg);        /* the logo's forward lean */
  transform-origin:left bottom;
}
.h1{font-size:clamp(2.9rem,8vw,6rem)}
.h2{font-size:clamp(1.95rem,4.6vw,3.4rem)}
.h3{font-size:clamp(1.25rem,2.2vw,1.7rem)}
.gold-grad{
  background:var(--gold-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Gold as inline text on a light ground. --gold itself is only ~2.9:1 on white,
   so headline highlights use the darker --gold-ink token (5.0:1) instead. */
.gold-ink{color:var(--gold-ink)}
.eyebrow{
  font-weight:800;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-ink);margin:0 0 1rem;
  display:flex;align-items:center;gap:.65rem;
}
.eyebrow::before{content:'';width:26px;height:3px;background:var(--gold-deep);flex:none}
.eyebrow--center{justify-content:center}
.eyebrow--light{color:var(--gold)}
.eyebrow--light::before{background:var(--gold)}
.lede{font-size:clamp(1.05rem,1.6vw,1.24rem);color:var(--mute);max-width:60ch}
.num{font-variant-numeric:tabular-nums}

/* --- Layout ------------------------------------------------------------- */
.wrap{width:min(1240px,100% - (var(--pad) * 2));margin-inline:auto}
.section{padding:clamp(3.5rem,7.5vw,6.5rem) 0}
.section--tight{padding:clamp(2.5rem,4.5vw,3.75rem) 0}
.section--warm{background:var(--paper-2)}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.center .lede{margin-inline:auto}
.head{max-width:64ch;margin:0 auto clamp(2.5rem,4vw,3.5rem)}

/* --- Buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  padding:1.05rem 1.9rem;
  background:var(--ink);color:#fff;
  font-weight:800;font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;
  border:2px solid var(--ink);border-radius:var(--r);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(20,21,26,.22)}
.btn:active{transform:translateY(0)}
.btn--gold{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.btn--gold:hover{box-shadow:0 12px 26px rgba(236,186,83,.42)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--ink);box-shadow:none}
.btn--onnavy{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn--onnavy:hover{border-color:#fff;box-shadow:none}
.btn--sm{padding:.7rem 1.15rem;font-size:.75rem}
.btn__ico{
  width:30px;height:30px;flex:none;border-radius:50%;
  background:rgba(20,21,26,.14);
  display:grid;place-items:center;margin-right:-.45rem;
}
.btn__ico svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem}
.btn-row--center{justify-content:center}

/* ==========================================================================
   Site nav — text-based branding, no logo mark
   ========================================================================== */
.nav{
  position:sticky;top:0;z-index:80;   /* the preview chrome bar is gone */
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav__in{
  width:min(1240px,100% - (var(--pad) * 2));margin-inline:auto;
  min-height:74px;display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);
}
.wordmark{display:block;line-height:1;margin-right:auto}
.wordmark__main{
  font-family:var(--display);font-size:clamp(1.35rem,2.4vw,1.7rem);
  text-transform:uppercase;letter-spacing:.01em;
  transform:skewX(-7deg);transform-origin:left bottom;display:block;
  color:var(--ink);
}
.wordmark__main em{font-style:normal;color:var(--gold-deep)}
.wordmark__sub{
  display:block;margin-top:.3rem;
  font-size:.6rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  color:var(--mute);
}
.nav__links{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.75rem)}
.nav__links a{
  font-size:.86rem;font-weight:600;color:var(--ink-soft);
  padding:.3rem 0;border-bottom:2px solid transparent;
}
.nav__links a:hover{color:var(--ink);border-bottom-color:var(--line-2)}
.nav__links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--gold)}
.nav__tel{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:800;font-size:.88rem;color:var(--ink);white-space:nowrap;
}
.nav__tel svg{width:16px;height:16px;stroke:var(--gold-deep);fill:none;stroke-width:2}
.nav__burger{display:none;padding:.5rem;margin-left:auto}
.nav__burger svg{width:26px;height:26px;stroke:var(--ink);fill:none;stroke-width:2}

/* ==========================================================================
   HERO — full-bleed dealership photo, gold wave, David breaking the frame
   ========================================================================== */
.hero{padding:0}
.hero__stage{position:relative;overflow-x:clip}   /* contains the figure; -y stays visible */
.hero__photo{
  position:relative;
  height:var(--hero-h);            /* a definite height: the figure is sized off it */
  overflow:visible;                /* the figure must be free to break out */
}
.hero__canvas{
  position:absolute;inset:0;
  overflow:hidden;
  background-image:url("../photos/hero-rohrman.webp");
  background-size:cover;
  background-position:50% 46%;
  background-color:var(--navy-deep);
}
.hero__canvas::after{               /* scrim: keeps the headline legible, and
                                       weights the far right so David reads */
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(100deg,
      rgba(9,14,26,.78) 0%,
      rgba(9,14,26,.6) 30%,
      rgba(9,14,26,.24) 56%,
      rgba(9,14,26,.03) 80%,
      rgba(9,14,26,0) 100%),
    linear-gradient(270deg,rgba(9,14,26,.34) 0%,rgba(9,14,26,0) 24%),
    linear-gradient(180deg,rgba(9,14,26,.24) 0%,rgba(9,14,26,0) 42%);
}
.hero__wave{
  position:absolute;left:-1px;right:-1px;bottom:-1px;
  width:calc(100% + 2px);height:clamp(48px,6vw,120px);
  z-index:2;
}

/* The copy rides the same 1240px grid as every section below it, so the
   headline's left edge lines up with the rest of the page. */
.hero__inner{
  position:absolute;inset:0;z-index:3;
  width:min(1240px,100% - (var(--pad) * 2));
  margin-inline:auto;
  display:flex;align-items:center;
}
.hero__copy{
  padding:0 0 clamp(3rem,6vw,5.5rem);
  max-width:min(620px,58%);
  color:#fff;
}
.hero__copy .lede{color:rgba(255,255,255,.86);max-width:44ch}
.hero__kicker{
  display:inline-block;margin:0 0 1.1rem;
  font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);
}
.hero__copy h1{margin:0 0 1.1rem}
.hero__copy h1 span{display:block}
.hero__note{
  margin:1.4rem 0 0;font-size:.9rem;font-weight:600;
  color:#fff;display:flex;align-items:center;gap:.6rem;
}
.hero__note svg{width:18px;height:18px;flex:none;stroke:var(--gold);fill:none;stroke-width:2.2}

/* Glass proof chips — deliberately sit behind the figure, as in the reference */
.hero__chips{
  position:absolute;z-index:2;
  top:clamp(1.25rem,2.6vw,2.5rem);right:calc(var(--fig-right) + clamp(8rem,18.5vw,18rem));
  display:flex;flex-direction:column;gap:.75rem;align-items:flex-end;
  pointer-events:none;
}
.chip{
  display:flex;align-items:center;gap:.8rem;
  padding:.8rem 1.05rem;
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.3);
  border-radius:14px;color:#fff;
  box-shadow:0 10px 30px rgba(9,14,26,.24);
}
.chip svg{width:20px;height:20px;flex:none;stroke:var(--gold);fill:none;stroke-width:2}
.chip b{display:block;font-size:.95rem;line-height:1.2}
.chip span{display:block;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.76);margin-top:.15rem}
.chip--low{margin-right:clamp(1rem,3vw,3rem)}   /* staggered, still behind him */

/* The figure. Height and drop are percentages of .hero__photo, which has a
   definite height — so his head stays inside the frame and his shins land over
   the white at every width. */
.hero__figure{
  position:absolute;right:var(--fig-right);bottom:calc(-1 * var(--fig-drop));
  height:var(--fig-h);width:auto;z-index:5;
  filter:drop-shadow(6px 14px 22px rgba(9,14,26,.34));
}
.hero__shadow{                      /* grounds him against the white */
  position:absolute;z-index:4;
  right:var(--fig-right);margin-right:clamp(18px,2.6vw,66px);
  bottom:calc(-1 * var(--fig-drop) - 6px);
  width:clamp(130px,15vw,290px);height:26px;
  background:radial-gradient(ellipse at center,rgba(20,21,26,.2),rgba(20,21,26,0) 70%);
}

.hero__below{
  position:relative;z-index:1;
  width:min(1240px,100% - (var(--pad) * 2));
  margin-inline:auto;
  padding-top:clamp(2rem,4vw,3.25rem);
  padding-right:30%;
}
.hero__quote{
  margin:0 0 1.75rem;
  font-size:clamp(1.05rem,1.8vw,1.3rem);line-height:1.6;color:var(--ink-soft);
  max-width:52ch;
}
.hero__quote b{color:var(--ink)}
.hero__quote cite{
  display:block;margin-top:.9rem;font-style:normal;
  font-size:.74rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-ink);
}

/* ==========================================================================
   Delivery — the featured callout
   ========================================================================== */
.deliver{position:relative;overflow:hidden}
.deliver__mark{                     /* his name, set as a watermark */
  position:absolute;left:50%;top:clamp(1rem,4vw,3rem);transform:translateX(-50%) skewX(-7deg);
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(4rem,15vw,13rem);line-height:.85;white-space:nowrap;
  color:var(--ink);opacity:.045;pointer-events:none;user-select:none;
}
.deliver__grid{
  position:relative;
  display:grid;gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:1.15fr .85fr;align-items:start;
}
.steps{counter-reset:s;display:grid;gap:1.1rem;margin-top:2rem}
.steps li{
  counter-increment:s;
  display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;
  padding-bottom:1.1rem;border-bottom:1px solid var(--line);
}
.steps li:last-child{border-bottom:0;padding-bottom:0}
.steps li::before{
  content:counter(s);
  width:38px;height:38px;border-radius:50%;
  background:var(--gold);color:var(--on-gold);
  font-family:var(--display);font-size:1.15rem;
  display:grid;place-items:center;
}
.steps b{display:block;font-size:1.05rem;margin-bottom:.15rem}
.steps span{display:block;color:var(--mute);font-size:.96rem;line-height:1.55}

.proof{
  background:var(--navy);color:#fff;border-radius:var(--r-lg);
  padding:clamp(1.75rem,3vw,2.5rem);
  box-shadow:var(--shadow-lg);
}
.proof__big{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.35rem}
.proof__big b{font-family:var(--display);font-size:clamp(3.5rem,8vw,5.5rem);line-height:.85;color:var(--gold)}
.proof__big i{font-style:normal;font-size:1rem;font-weight:700;color:rgba(255,255,255,.8)}
.proof p{color:rgba(255,255,255,.78);font-size:.98rem}
.proof__list{border-top:1px solid var(--navy-line);margin-top:1.5rem;padding-top:.5rem}
.proof__list li{
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.8rem 0;border-bottom:1px solid var(--navy-line);
}
.proof__list li:last-child{border-bottom:0}
.proof__list dt,.proof__list span:first-child{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.proof__list b{font-size:1.05rem;font-weight:700;text-align:right}

/* ==========================================================================
   Rohrman partnership band
   ========================================================================== */
.partner{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.partner__grid{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;
}
.rohrman{width:clamp(130px,17vw,190px);flex:none}
.rohrman img{width:100%;height:auto;display:block}
.brands{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.brands li{
  padding:.4rem .8rem;border:1px solid var(--line-2);border-radius:99px;
  font-size:.78rem;font-weight:600;color:var(--ink-soft);
}

/* ==========================================================================
   Inventory
   ========================================================================== */
.invhead{
  display:flex;flex-wrap:wrap;gap:1.25rem;align-items:flex-end;justify-content:space-between;
  margin-bottom:2rem;
}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.filters__label{
  font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);margin-right:.35rem;
}
.filter{
  padding:.6rem 1.15rem;border:1px solid var(--line-2);border-radius:99px;
  font-size:.82rem;font-weight:700;color:var(--ink-soft);background:var(--paper);
  transition:border-color .15s var(--ease),background .15s var(--ease),color .15s var(--ease);
}
.filter:hover{border-color:var(--ink)}
.filter[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.vehicles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2vw,1.75rem)}
.veh{
  border:1px solid var(--line);border-radius:12px;background:var(--paper);
  overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .2s var(--ease),transform .2s var(--ease);
}
.veh:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.veh__shot{
  position:relative;aspect-ratio:3/2;
  background:
    linear-gradient(135deg,var(--paper-3) 0%,var(--paper-2) 55%,var(--paper-3) 100%);
  display:grid;place-items:center;
}
.veh__shot svg{width:64px;height:64px;stroke:var(--line-2);fill:none;stroke-width:1.5}
.veh__badge{
  position:absolute;top:.7rem;left:.7rem;
  padding:.3rem .65rem;border-radius:4px;
  font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
.veh__badge--new{background:var(--navy);color:#fff}
.veh__badge--used{background:var(--gold);color:var(--on-gold)}
.veh__sample{
  position:absolute;top:.7rem;right:.7rem;
  padding:.3rem .6rem;border-radius:4px;background:rgba(20,21,26,.72);color:#fff;
  font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.veh__body{padding:1.15rem 1.15rem 1.25rem;display:flex;flex-direction:column;flex:1;gap:.65rem}
.veh__body h3{font-size:1.02rem;margin:0;line-height:1.35}
.veh__meta{display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-size:.82rem;color:var(--mute)}
.veh__price{
  font-family:var(--display);font-size:1.6rem;line-height:1;color:var(--ink);
  transform:skewX(-7deg);transform-origin:left bottom;margin-top:auto;
}
.veh__price small{font-family:var(--body);font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);display:block;transform:skewX(7deg);margin-top:.3rem}
.veh .btn{width:100%;padding:.85rem 1rem;font-size:.76rem}
.note-strip{
  display:flex;gap:.75rem;align-items:flex-start;
  margin-top:1.75rem;padding:1rem 1.15rem;
  background:var(--paper-2);border-left:3px solid var(--gold);border-radius:0 var(--r) var(--r) 0;
  font-size:.88rem;color:var(--ink-soft);
}
.note-strip svg{width:18px;height:18px;flex:none;stroke:var(--gold-deep);fill:none;stroke-width:2;margin-top:.2rem}
.note-strip b{color:var(--ink)}

/* --------------------------------------------------------------------------
   Vehicle card — carried over from the live inventory grid unchanged, with a
   New / Used / Certified tag added to the media corner. Same markup, so the
   WordPress template keeps rendering it.
   -------------------------------------------------------------------------- */
.vcard{
  position:relative;background:var(--paper);
  border:1px solid var(--paper-3);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;
}
.vcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent}
.vcard__media{position:relative;aspect-ratio:4/3;background:var(--paper-3);overflow:hidden}
.vcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)}
.vcard:hover .vcard__media img{transform:scale(1.05)}
.vcard__tag{
  position:absolute;top:.8rem;left:.8rem;
  background:var(--ink);color:#fff;
  font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:.35rem .65rem;border-radius:3px;
}
.vcard__tags{
  position:absolute;top:.8rem;left:.8rem;
  display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;
}
.vcard__tags .vcard__tag{position:static;top:auto;left:auto}
.vcard__tag--new{background:var(--navy);color:#fff}
.vcard__tag--used{background:var(--gold);color:var(--on-gold)}
.vcard__tag--cpo{background:#143A6B;color:#fff}
/* The merchandising badge — Low Miles, Work Truck — sits under the condition
   rather than competing with it, so it reads as a note, not a second label. */
.vcard__tag--soft{
  background:rgba(20,21,26,.72);color:#fff;font-size:.62rem;
  padding:.28rem .55rem;
}
.vcard__tag--soft.vcard__tag--deal{background:var(--gold-deep);color:#fff}
.vcard__count{
  position:absolute;bottom:.8rem;right:.8rem;
  background:rgba(12,12,14,.8);color:#fff;
  font-size:.72rem;font-weight:700;
  padding:.3rem .55rem;border-radius:3px;
  display:flex;align-items:center;gap:.3rem;
}
.vcard__count svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.vcard__body{padding:1.15rem 1.25rem 1.35rem;display:flex;flex-direction:column;flex:1}
.vcard__title{font-size:1.08rem;font-weight:800;letter-spacing:-.015em;margin:0 0 .15rem;line-height:1.25}
.vcard__title a::after{content:'';position:absolute;inset:0}   /* whole card is the link */
.vcard__sub{font-size:.82rem;color:var(--mute);margin:0 0 .9rem}
.vcard__specs{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1.1rem}
.vcard__specs li{
  font-size:.72rem;font-weight:600;color:var(--mute);
  background:var(--paper-2);border-radius:3px;padding:.25rem .5rem;
}
.vcard__foot{
  margin-top:auto;padding-top:1rem;border-top:1px solid var(--paper-3);
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
}
.vcard__price{font-family:var(--display);font-size:1.85rem;line-height:1;transform:skewX(-7deg)}
.vcard__pay{font-size:.74rem;color:var(--mute);display:block;margin-top:.3rem;font-family:var(--body)}
.vcard__cta{
  font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-ink);display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap;
}
.invhead__count{font-size:.86rem;color:var(--mute);margin:.35rem 0 0}
.btn--block{width:100%;justify-content:center}
.contact__list a{border-bottom:1px solid var(--line-2)}
.pagehead__lede{color:var(--ink-soft);max-width:62ch;margin:0}
/* A photo behind a light page header. Each page passes its own through
   --head-img; the wash is biased left so the type keeps its contrast while the
   picture still reads on the open right-hand side. */
.pagehead--faint{position:relative;overflow:hidden}
.pagehead--faint::before{
  content:'';position:absolute;inset:0;
  background-image:var(--head-img);
  background-size:cover;background-position:var(--head-pos,50% 58%);
  opacity:.22;
}
.pagehead--faint::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,
    var(--paper-2) 0%,
    rgba(248,246,241,.9) 34%,
    rgba(248,246,241,.6) 66%,
    rgba(248,246,241,.34) 100%);
}
.pagehead--faint .wrap{position:relative;z-index:1}
.pagehead .btn-row{margin-top:2rem}
.inv-empty{
  grid-column:1/-1;padding:3rem 1rem;text-align:center;color:var(--mute);
  border:1px dashed var(--line-2);border-radius:var(--r-lg);
}

/* Full filter bar — the inventory page only */
.filterbar{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.1rem,2vw,1.5rem);margin-bottom:1.5rem;
}
.filterbar__grid{
  display:grid;gap:.9rem;
  grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
}
.filterbar .field label{
  display:block;font-size:.68rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);margin-bottom:.35rem;
}
.filterbar input,.filterbar select{
  width:100%;font:inherit;font-size:.92rem;color:var(--ink);
  padding:.7rem .8rem;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--paper);
}
.filterbar input:focus,.filterbar select:focus{outline:2px solid var(--gold);outline-offset:1px}
.filterbar__foot{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line);
}

/* --------------------------------------------------------------------------
   Delivery spotlight — one real car from stock, drawn at random on load
   -------------------------------------------------------------------------- */
.spot{
  background:var(--navy);color:#fff;border-radius:var(--r-lg);
  padding:clamp(1.5rem,2.6vw,2rem);
  box-shadow:var(--shadow-lg);
}
.spot__eyebrow{
  display:flex;align-items:center;gap:.5rem;
  font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.9rem;
}
.spot__eyebrow::before{
  content:'';width:8px;height:8px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 4px rgba(236,186,83,.22);
}
.spot__shot{
  position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;
  background:var(--navy-deep);margin-bottom:1.1rem;
}
.spot__shot img{width:100%;height:100%;object-fit:cover}
.spot__tag{
  position:absolute;top:.7rem;left:.7rem;
  padding:.3rem .6rem;border-radius:3px;
  font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
.spot__tag--new{background:var(--gold);color:var(--on-gold)}
.spot__tag--used{background:#fff;color:var(--ink)}
.spot h3{font-size:1.25rem;margin:0 0 .25rem;line-height:1.25}
.spot__sub{font-size:.82rem;color:rgba(255,255,255,.6);margin:0 0 .9rem}
.spot__row{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  padding-top:.9rem;border-top:1px solid var(--navy-line);
}
.spot__price{font-family:var(--display);font-size:2rem;line-height:1;color:var(--gold);transform:skewX(-7deg)}
.spot__line{
  margin:1.1rem 0 0;font-size:.95rem;font-weight:700;color:#fff;
  display:flex;align-items:center;gap:.55rem;
}
.spot__line svg{width:18px;height:18px;flex:none;stroke:var(--gold);fill:none;stroke-width:2.2}
.spot__note{font-size:.82rem;color:rgba(255,255,255,.6);margin:.5rem 0 1.4rem}

/* --------------------------------------------------------------------------
   Financing page — components carried over from the live /financing/ page.
   Same layout and proportions; the red accents are re-tokened to the gold and
   navy this build uses, so nothing arrives from the old palette.
   -------------------------------------------------------------------------- */
.grid{display:grid;gap:clamp(1.25rem,2.5vw,2rem)}
.cards-3{grid-template-columns:repeat(3,1fr)}


.pillar{
  background:var(--paper);border:1px solid var(--paper-3);
  border-top:4px solid var(--gold-deep);border-radius:var(--r);
  padding:2rem 1.75rem;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.pillar__ico{
  width:52px;height:52px;display:grid;place-items:center;
  background:rgba(236,186,83,.18);color:var(--gold-ink);
  border-radius:var(--r);margin-bottom:1.25rem;
}
.pillar__ico svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2}
.pillar h3{font-size:1.2rem;font-weight:800;letter-spacing:-.01em}
.pillar p{margin:0;color:var(--mute);font-size:.95rem}

.section--dark{background:var(--navy);color:#fff}
.section--dark h2,.section--dark h3{color:#fff}
.section--dark .lede,.section--dark p{color:rgba(255,255,255,.78)}
.section--dark .eyebrow{color:var(--gold)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}

.info-row{display:flex;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--navy-line)}
.info-row:last-child{border-bottom:0}
.info-row__ico{
  width:42px;height:42px;flex:none;display:grid;place-items:center;
  background:rgba(236,186,83,.18);color:var(--gold);border-radius:var(--r);
}
.info-row__ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
.info-row b{
  display:block;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-bottom:.15rem;font-weight:800;
}
.info-row span{font-weight:600;color:#fff;font-size:.95rem;line-height:1.5}

.apply-panel{
  display:grid;grid-template-columns:.9fr 1.1fr;
  background:var(--navy);border-radius:var(--r-lg);overflow:hidden;
  max-width:1060px;margin-inline:auto;box-shadow:var(--shadow-lg);
}
.apply-panel__media{position:relative;min-height:260px}
.apply-panel__media img{width:100%;height:100%;object-fit:cover}
.apply-panel__body{padding:clamp(1.75rem,3.5vw,2.75rem);color:#fff}
.apply-panel__body h3{color:#fff}
.apply-panel__body .form-note{color:rgba(255,255,255,.6)}
.apply-panel__body .btn{background:var(--gold);color:var(--on-gold)}
.apply-steps{counter-reset:astep;margin:1.5rem 0 2rem;padding:0;list-style:none}
.apply-steps li{counter-increment:astep;position:relative;padding:0 0 1.1rem 3rem}
.apply-steps li::before{
  content:counter(astep);position:absolute;left:0;top:-2px;
  width:30px;height:30px;border-radius:50%;
  background:var(--gold);color:var(--on-gold);
  display:grid;place-items:center;font-family:var(--display);font-size:.95rem;line-height:1;
}
.apply-steps li:not(:last-child)::after{
  content:'';position:absolute;left:14px;top:32px;bottom:6px;width:2px;background:var(--navy-line);
}
.apply-steps b{display:block;font-size:1rem;margin-bottom:.1rem}
.apply-steps span{font-size:.89rem;color:rgba(255,255,255,.7)}

.callback{
  display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(1.5rem,4vw,3rem);align-items:center;
  max-width:1060px;margin:3rem auto 0;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.75rem,3.5vw,2.5rem);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.consent{
  display:flex;gap:.7rem;align-items:flex-start;font-size:.84rem;
  color:var(--ink-soft);line-height:1.55;margin:1.25rem 0;
}
.consent input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--gold-deep)}
.form-note{font-size:.78rem;color:var(--mute);margin-top:1rem}

.cta-strip{
  background:var(--gold-grad);color:var(--on-gold);
  padding:clamp(2.5rem,6vw,4.5rem) 0;position:relative;overflow:hidden;
}
.cta-strip::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(114deg,rgba(0,0,0,.07) 0 2px,transparent 2px 64px);
}
.cta-strip .wrap{
  position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:1.75rem;
  align-items:center;justify-content:space-between;
}
.cta-strip h2{margin-bottom:.35rem}
.cta-strip p{margin:0;color:rgba(20,21,26,.76)}
.cta-strip .btn{background:var(--ink);color:#fff}

/* --------------------------------------------------------------------------
   FAQ — straight answers
   -------------------------------------------------------------------------- */
.faq{max-width:820px;margin-inline:auto}
.faq details{
  border-bottom:1px solid var(--line);padding:0;
}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:1.15rem 0;font-size:1.05rem;font-weight:700;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';flex:none;width:14px;height:14px;margin-top:.35rem;
  border-right:2.5px solid var(--gold-deep);border-bottom:2.5px solid var(--gold-deep);
  transform:rotate(45deg);transition:transform .2s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{
  margin:0 0 1.25rem;padding-right:2.5rem;
  color:var(--ink-soft);font-size:.98rem;line-height:1.65;
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(1.75rem,4vw,3rem);align-items:start}
.contact__card{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.35rem,2.4vw,1.85rem);
}
.contact__list{margin:0}
.contact__list li{padding:.9rem 0;border-bottom:1px solid var(--line)}
.contact__list li:last-child{border-bottom:0;padding-bottom:0}
.contact__list span{
  display:block;font-size:.68rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);margin-bottom:.2rem;
}
.contact__list b{font-size:1.05rem;font-weight:700}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form .field{margin-bottom:1rem}
.form .field--wide{grid-column:1/-1}
.form label{
  display:block;font-size:.68rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);margin-bottom:.35rem;
}
.form .req{color:var(--gold-deep)}
.form input,.form select,.form textarea{
  width:100%;font:inherit;font-size:.95rem;color:var(--ink);
  padding:.75rem .85rem;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--paper);
}
.form textarea{min-height:130px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
.form__consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.86rem;color:var(--ink-soft)}
.form__consent input{width:auto;margin-top:.25rem}
.field{margin-bottom:1rem}
.field label{
  display:block;font-size:.68rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);margin-bottom:.35rem;
}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:.95rem;color:var(--ink);
  padding:.75rem .85rem;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--paper);
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
.req{color:var(--gold-deep)}
.alert{
  background:rgba(23,163,74,.1);border:1px solid rgba(23,163,74,.35);color:#0F7A37;
  border-radius:var(--r);padding:1rem 1.15rem;font-size:.93rem;font-weight:600;margin-bottom:1.25rem;
}

/* ==========================================================================
   Statewide coverage
   ========================================================================== */
.area{background:var(--navy);color:#fff}
.area .lede{color:rgba(255,255,255,.78)}
.area__cities{
  display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;
  max-width:70ch;margin:2.25rem auto 0;
}
.area__cities li{
  padding:.45rem .9rem;border:1px solid var(--navy-line);border-radius:99px;
  font-size:.84rem;color:rgba(255,255,255,.88);
}
.area__cities li.is-mark{border-color:var(--gold);color:var(--gold);font-weight:700}

/* ==========================================================================
   Reviews
   ========================================================================== */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2vw,1.75rem)}
.quote{
  padding:1.75rem;border:1px solid var(--line);border-radius:12px;background:var(--paper);
  display:flex;flex-direction:column;gap:.9rem;
}
.stars{display:flex;gap:.15rem}
.stars svg{width:17px;height:17px;fill:var(--gold);stroke:none}
.quote h3{font-size:1.02rem;margin:0}
.quote p{margin:0;color:var(--ink-soft);font-size:.96rem;line-height:1.6}
.quote__by{display:flex;align-items:center;gap:.75rem;margin-top:auto;padding-top:.35rem}
.quote__av{
  width:38px;height:38px;border-radius:50%;flex:none;
  background:var(--paper-3);color:var(--ink);
  display:grid;place-items:center;font-weight:800;font-size:.9rem;
}
.quote__by div b{display:block;font-size:.9rem}
.quote__by div span{display:block;font-size:.74rem;color:var(--mute)}
.quote--feed{
  border-style:dashed;border-color:var(--line-2);background:var(--paper-2);
  align-items:flex-start;justify-content:center;text-align:left;
}
.quote--feed svg.g{width:34px;height:34px;stroke:var(--gold-deep);fill:none;stroke-width:1.8}

/* ==========================================================================
   CTA + footer
   ========================================================================== */
.cta{background:var(--gold);color:var(--on-gold)}
.cta__in{
  display:flex;flex-wrap:wrap;gap:1.75rem;align-items:center;justify-content:space-between;
}
.cta p{margin:0;max-width:46ch;font-weight:500}
.cta .btn{background:var(--ink);border-color:var(--ink);color:#fff}
.cta .btn--ghost{background:transparent;color:var(--on-gold);border-color:rgba(20,21,26,.35)}

.footer{background:var(--navy-deep);color:rgba(255,255,255,.7);padding:clamp(3rem,6vw,4.5rem) 0 2rem}
.footer__grid{display:grid;grid-template-columns:1.4fr .8fr .8fr 1fr;gap:clamp(1.75rem,3vw,3rem)}
.footer .wordmark__main{color:#fff}
.footer .wordmark__main em{color:var(--gold)}
.footer .wordmark__sub{color:rgba(255,255,255,.5)}
.footer h4{
  color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  margin:0 0 1.1rem;
}
.footer li{margin-bottom:.6rem;font-size:.92rem}
.footer a:hover{color:var(--gold)}
.footer__tel{font-family:var(--display);font-size:1.5rem;color:#fff;display:block;transform:skewX(-7deg);transform-origin:left bottom;margin-bottom:.65rem}
.footer__legal{
  margin:clamp(2.5rem,4vw,3.5rem) 0 0;padding-top:1.5rem;border-top:1px solid var(--navy-line);
  font-size:.76rem;line-height:1.7;color:rgba(255,255,255,.45);
}
.footer__bar{
  display:flex;flex-wrap:wrap;gap:.75rem;justify-content:space-between;
  margin-top:1.5rem;font-size:.78rem;color:rgba(255,255,255,.45);
}

/* ==========================================================================
   About page
   ========================================================================== */
.pagehead{background:var(--paper-2);border-bottom:1px solid var(--line);padding:clamp(2.5rem,5vw,4rem) 0}
.crumbs{font-size:.8rem;color:var(--mute);margin-bottom:1.25rem}
.crumbs a:hover{color:var(--ink)}
.crumbs span{margin:0 .45rem}
.bio{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,4vw,4rem);align-items:start}
.bio__figure{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.bio__figure img{width:100%;height:auto}
.bio__plate{
  position:absolute;left:0;right:0;bottom:0;
  padding:1.5rem 1.25rem .9rem;
  background:linear-gradient(180deg,rgba(9,14,26,0),rgba(9,14,26,.85));
  color:#fff;
}
.bio__plate b{display:block;font-family:var(--display);font-size:1.5rem;transform:skewX(-7deg);transform-origin:left bottom;text-transform:uppercase}
.bio__plate span{display:block;font-size:.7rem;font-weight:700;letterspacing:.16em;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-top:.4rem}
.prose{font-size:clamp(1.02rem,1.5vw,1.12rem);line-height:1.75;max-width:62ch}
.prose p{margin:0 0 1.3rem}
.prose strong{color:var(--ink);font-weight:700}
.prose .pull{
  margin:2rem 0;padding:1.5rem 0 1.5rem 1.5rem;
  border-left:3px solid var(--gold);
  font-family:var(--display);font-size:clamp(1.35rem,2.6vw,1.9rem);line-height:1.15;
  text-transform:uppercase;color:var(--ink);
}
.sig{
  margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:1rem;
}
.sig b{font-family:var(--display);font-size:1.5rem;transform:skewX(-7deg);transform-origin:left bottom;text-transform:uppercase}
.sig span{font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

.creds{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}

/* --------------------------------------------------------------------------
   Good Ground — David's foundation. Its own brown, kept inside one panel so it
   reads as a separate organisation rather than a third brand colour loose on
   the page.
   -------------------------------------------------------------------------- */
.gg{
  --gg-ink:#7C5530;              /* brown as TEXT on the panel — 5.6:1 */
  --gg-mark:#96683E;             /* the logo brown, for rules and numbers */
  background:#FAF5EE;
  border:1px solid #E8D9C8;
  border-radius:var(--r-lg);
  padding:clamp(1.75rem,4vw,3.25rem);
}
.gg__top{
  display:grid;grid-template-columns:minmax(0,260px) 1fr;
  gap:clamp(1.75rem,4vw,3.5rem);align-items:center;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.gg__logo{width:100%;height:auto;max-width:260px}
.gg__link{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;
  font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gg-ink);border-bottom:1px solid rgba(124,85,48,.35);
}
.gg .eyebrow{color:var(--gg-ink)}
.gg .eyebrow::before{background:var(--gg-mark)}
.gg__top h2{margin-bottom:.75rem}
.gg__top p{margin:0;color:var(--ink-soft);font-size:1.02rem;line-height:1.65}
.gg__shots{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.gg__shots img{
  width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;   /* beats the height attribute */
  border-radius:var(--r);display:block;
}
.gg__programs{grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)}
.gg__card{
  background:var(--paper);border:1px solid #EADCCB;border-top:4px solid var(--gg-mark);
  border-radius:var(--r);padding:1.6rem 1.5rem;
  display:flex;flex-direction:column;
}
.gg__n{
  font-family:var(--display);font-size:1.6rem;line-height:1;
  color:var(--gg-mark);margin-bottom:.75rem;
}
.gg__card h3{font-size:1.08rem;margin:0 0 .2rem;line-height:1.3}
.gg__card h4{
  font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gg-ink);margin:0 0 1rem;
}
.gg__verse{
  margin:0 0 1rem;padding-left:.9rem;border-left:2px solid var(--gg-mark);
  font-size:.86rem;font-style:italic;line-height:1.55;color:var(--mute);
}
.gg__verse cite{display:block;font-style:normal;font-weight:700;color:var(--gg-ink);margin-top:.3rem}
.gg__card p{margin:0;color:var(--ink-soft);font-size:.94rem;line-height:1.6}

.cert{display:grid;gap:1rem}
.cert__row{
  display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;
  padding-bottom:1rem;border-bottom:1px solid var(--line);
}
.cert__row:last-child{border-bottom:0;padding-bottom:0}
.cert__ico{
  width:40px;height:40px;border-radius:50%;flex:none;
  background:var(--paper-3);display:grid;place-items:center;
}
.cert__ico svg{width:19px;height:19px;stroke:var(--gold-deep);fill:none;stroke-width:2}
.cert__row b{display:block;font-size:1rem}
.cert__row span{display:block;font-size:.9rem;color:var(--mute);line-height:1.55}
.letter{
  border:1px solid var(--line);border-radius:12px;background:var(--paper);
  padding:.75rem;box-shadow:var(--shadow);
}
.letter img{width:100%;height:auto;border-radius:6px}
.letter figcaption{
  padding:.9rem .5rem .35rem;font-size:.78rem;color:var(--mute);line-height:1.55;
}
.letter figcaption b{color:var(--ink)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .footer__grid{grid-template-columns:1fr 1fr}
  .vehicles,.quotes{grid-template-columns:1fr 1fr}
}
@media (max-width:1080px){
  :root{--hero-h:clamp(480px,58vw,640px)}
}
@media (max-width:980px){
  .chip--low{display:none}          /* no room beside the figure below this */
}
@media (max-width:900px){
  :root{--fig-right:var(--hero-edge)}   /* no room to pull him inboard */
  .nav__links,.nav__tel{display:none}
  .nav__burger{display:block}
  .hero__canvas{background-position:62% 48%}
  .hero__copy{max-width:none;padding-right:34%}
  .hero__below{padding-right:0;padding-top:clamp(3rem,9vw,4.5rem)}
  .deliver__grid,.bio,.creds{grid-template-columns:1fr}
  .partner__grid{grid-template-columns:1fr;justify-items:start}
  .contact__grid{grid-template-columns:1fr}
  .form__grid{grid-template-columns:1fr}
  .contact-grid,.callback,.cards-3{grid-template-columns:1fr}
  .gg__top,.gg__programs{grid-template-columns:1fr}
}
@media (max-width:760px){
  :root{--fig-h:86%;--fig-drop:0%;--hero-h:clamp(460px,86vw,600px);--hero-edge:0px}
  .hero__canvas{background-position:34% 50%}
  .hero__copy{padding-right:38%}
  .hero__chips{top:auto;bottom:clamp(3.5rem,11vw,6rem);left:0;right:auto;align-items:flex-start}
  .hero__shadow{display:none}
  .vehicles,.quotes{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .apply-panel,.field-row{grid-template-columns:1fr}
  .cta__in{flex-direction:column;align-items:flex-start}
}
@media (max-width:520px){
  :root{--fig-h:66%;--fig-drop:0%;--hero-edge:0px;--hero-h:clamp(470px,118vw,560px)}
  .hero__chips{display:none}
  /* Set from a dev-tools measurement, not derived: the clamp above resolves to
     about 46px here, which left the name looking timid on a phone. */
  .hero__copy h1{font-size:85px}
  .hero__copy{padding-right:38%;padding-bottom:clamp(5rem,20vw,7rem)}
}

/* ==========================================================================
   Carried over from the previous theme — markup the redesign did not touch:
   the vehicle detail page, the inventory filter form and the scroll reveal.
   ========================================================================== */
.stack-sm > * + *{margin-top: .75rem;}
.vcard__pay{font-size: .74rem; color: var(--text-mute); display: block; margin-top: .3rem; transform: none; font-family: var(--body);}
.vcard__pay b{color: var(--gold-ink); font-size: .85rem;}
.filters__grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .9rem; align-items: end;}
.filters__meta{display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem;}
.filters__count{font-weight: 700;}
.filters__count b{font-family: var(--display); font-size: 1.5rem; transform: skewX(-7deg); display: inline-block; margin-right: .2rem;}
.empty{text-align: center; padding: 4rem 1rem; color: var(--text-mute);}
.empty svg{width: 48px; height: 48px; color: var(--paper-3); margin: 0 auto 1rem;}
/* --- Vehicle detail ------------------------------------------------------ */
.vdetail{display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start;}
.gallery__main{aspect-ratio: 4/3; background: var(--paper-3); border-radius: var(--r-lg); overflow: hidden;}
.gallery__main img{width: 100%; height: 100%; object-fit: cover;}
.gallery__thumbs{display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; margin-top: .5rem;}
.gallery__thumbs button{padding: 0; border: 2px solid transparent; border-radius: var(--r); overflow: hidden; cursor: pointer; background: none; aspect-ratio: 4/3;}
.gallery__thumbs button[aria-current="true"]{border-color: var(--gold-deep);}
.gallery__thumbs img{width: 100%; height: 100%; object-fit: cover;}
.vbuy{background: var(--paper-2); border-radius: var(--r-lg); padding: 1.75rem; position: sticky; top: calc(var(--nav-h) + 1.25rem);}
.vbuy__price{font-family: var(--display); font-size: 3rem; line-height: 1; transform: skewX(-7deg); margin-bottom: .25rem;}
.vbuy__terms{font-size: .82rem; color: var(--text-mute); margin-bottom: 1.25rem;}
.spec-table{width: 100%; border-collapse: collapse;}
.spec-table th, .spec-table td{text-align: left; padding: .75rem .25rem; border-bottom: 1px solid var(--paper-3); font-size: .92rem;}
.spec-table th{font-weight: 700; color: var(--text-mute); width: 45%; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase;}
.feature-list{columns: 2; column-gap: 2rem;}
/* Full-width variant. `columns: 2` above is sized for a half-width column; across
   a 1240px row it makes two 600px columns and flings the halves to opposite edges.
   Grid instead — as many even columns as fit, capped and centred under the heading.
   Base rule left alone: the vehicle page renders .feature-list from JS. */
.feature-list--grid{columns: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); column-gap: 2rem; max-width: 940px; margin-inline: auto;}
.feature-list li{break-inside: avoid; padding: .4rem 0 .4rem 1.6rem; position: relative; font-size: .93rem;}
.feature-list li::before{content: ''; position: absolute; left: 0; top: .78rem; width: 8px; height: 8px; background: var(--gold-deep); transform: skewX(-12deg);}
.footer__logo{width: 100%; max-width: 260px; height: auto; margin-bottom: 1.5rem;}
.footer__social{display: flex; gap: .6rem; margin-top: 1.25rem;}
.footer__social a{width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r); color: #fff; transition: background .18s, border-color .18s;}
.footer__social a:hover{background: var(--gold); border-color: var(--gold); color: var(--on-gold);}
.footer__social svg{width: 18px; height: 18px;}
.disclaimer{font-size: .78rem; line-height: 1.6; color: #767C89; max-width: 90ch; margin-top: 1.5rem;}
.mobilebar a.is-primary{background: var(--gold); color: var(--on-gold);}
/* --- Reveal on scroll ----------------------------------------------------
   Content is visible by default. The hidden state is applied only after JS
   adds .js-reveal to <html>, so a script error, a missing IntersectionObserver
   or a slow load can never leave a section permanently invisible. */
.reveal{transition: opacity .6s var(--ease), transform .6s var(--ease);}
.js-reveal .reveal:not(.is-in){opacity: 0; transform: translateY(22px);}
/* --- Misc ---------------------------------------------------------------- */
.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;}
.skip{position: absolute; top: -60px; left: 1rem; z-index: 200; background: var(--gold); color: var(--on-gold); padding: .75rem 1.25rem; border-radius: var(--r); font-weight: 700; text-decoration: none; transition: top .2s;}
.skip:focus{top: 1rem;}
@media (max-width: 940px){
  .vdetail{grid-template-columns: 1fr;}
}
@media (max-width: 620px){
  .gallery__thumbs{grid-template-columns: repeat(4, 1fr);}
}
@media (max-width: 620px){
  .feature-list{columns: 1;}
}
@media (max-width: 780px){
  .vbuy{position: static;}
}
@media (prefers-reduced-motion: reduce){
  .js-reveal .reveal:not(.is-in){opacity: 1; transform: none;}
  .reveal{transition: none;}
}


/* ---------------------------------------------------------------------------
   Honeypot field paired with .ni-fld-x in lead_form_fields() (inc/leads.php).
   Deliberately hidden here rather than inline: a bot must fetch and parse this
   stylesheet to know to leave the field alone. Do not remove.
   Offscreen rather than display:none so the field stays in the DOM for bots.
   --------------------------------------------------------------------------- */
.ni-fld-x {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* --- Mobile quick-action bar --------------------------------------------
   Fixed to the bottom of the viewport on small screens only. Hidden outright
   on desktop, where the header nav already carries these three actions.

   Revealed by main.js adding .is-visible past a scroll threshold. Without
   that class the bar sits off-screen, which is the safe direction to fail.

   The icon sizing below is load-bearing: the inline SVGs in footer.php carry
   a viewBox and no width/height, so with no explicit size they expand to the
   full width of the page. Do not remove.
   -------------------------------------------------------------------- */
.mobilebar{display: none;}

@media (max-width:760px){
  .mobilebar{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--navy-line);
    border-top: 1px solid var(--navy-line);
    transform: translateY(100%);
    transition: transform .28s var(--ease);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mobilebar.is-visible{transform: translateY(0);}
  .mobilebar a{
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: .28rem;
    min-height: 58px; padding: .65rem .35rem;
    background: var(--navy-deep); color: #fff;
    text-decoration: none; text-align: center;
    font-size: .72rem; font-weight: 600; line-height: 1.2;
  }
  .mobilebar a svg{width: 20px; height: 20px; flex: none;}
}

@media (prefers-reduced-motion: reduce){
  .mobilebar{transition: none;}
}

/* --- Inventory pagination ------------------------------------------------
   Output of paginate_links() in page-inventory.php. Note the markup nests a
   ul.page-numbers whose children also carry .page-numbers, so the item rules
   are scoped through li to keep the list itself unstyled.
   -------------------------------------------------------------------- */
.pagination{margin-top: clamp(2rem,4vw,3rem);}
.pagination ul.page-numbers{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem;
}
.pagination li{margin: 0;}
.pagination li .page-numbers{
  display: grid; place-items: center;
  min-width: 42px; height: 42px; padding: 0 .7rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper); color: var(--ink);
  font-weight: 600; font-size: .9rem; text-decoration: none;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.pagination li a.page-numbers:hover{background: var(--paper-2); border-color: var(--line-2);}
.pagination li a.page-numbers:focus-visible{outline: 2px solid var(--gold-deep); outline-offset: 2px;}
.pagination li .page-numbers.current{
  background: var(--gold); border-color: var(--gold-deep); color: var(--on-gold);
}
.pagination li .page-numbers.dots{
  background: none; border-color: transparent; color: var(--mute);
}
.pagination li .next, .pagination li .prev{padding: 0 1rem;}

@media (max-width:520px){
  .pagination li .page-numbers{min-width: 38px; height: 38px; padding: 0 .5rem; font-size: .84rem;}
  .pagination li .next, .pagination li .prev{padding: 0 .7rem;}
}

/* --- Mobile navigation drawer -------------------------------------------
   main.js toggles .is-open on .nav__links. Without these rules the burger
   flips a class nothing responds to, so the menu never opens -- the links
   are display:none below 900px and nothing turns them back on.

   .nav is position:sticky, which makes it the containing block for the
   absolutely positioned panel, so top:100% lands just under the bar.
   ---------------------------------------------------------------------- */
.wordmark__main{white-space:nowrap}

@media (max-width:900px){
  .nav__links.is-open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;left:0;right:0;top:100%;
    padding:.25rem var(--pad) 1rem;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);
  }
  .nav__links.is-open a{padding:.95rem 0;font-size:1rem;border-bottom:1px solid var(--line)}
  .nav__links.is-open a:last-child{border-bottom:0}
  /* keep the current-page marker the flat list would otherwise overwrite */
  .nav__links.is-open a[aria-current="page"]{border-bottom-color:var(--gold);color:var(--ink)}
  /* Apply Online already sits in the sticky bottom bar on these widths, so the
     duplicate in the header only crowds the wordmark. */
  .nav__in > .btn{display:none}
}

/* The wordmark gained a word ("Indy"); on a narrow phone it has to give up
   some size to stay on one line beside the Apply button and the burger. */
@media (max-width:520px){
  .wordmark__main{font-size:clamp(.95rem,4.4vw,1.35rem)}
}