/* ====================================================================
   HELLO AUTO GS — design system v2
   Deployed 2026-09-11. One stylesheet, one vocabulary.

   v1 restyled what the theme emitted. This one sits under real
   templates for the vehicle page and the inventory listing, so most of
   what follows describes our own markup rather than fighting someone
   else's. What remains of the theme — header, footer chrome, legacy
   vehicle pages — is neutralised in one place, near the top.

   No web fonts. The system stack is what a shopper's phone renders
   fastest and it costs nothing to load.
   ==================================================================== */

:root{
  /* ink */
  --ink:#0b1220;
  --body:#39465a;
  --muted:#5b6b80;

  /* brand */
  --navy:#0d1b2e;
  --navy-2:#14263f;
  --accent:#0b63e5;
  --accent-dark:#0a4fb8;
  --accent-soft:#e9f1fe;

  /* ground */
  --bg:#ffffff;
  --surface:#f5f8fc;
  --line:#e4e9f1;
  --line-strong:#c9d3e2;

  /* form */
  --r:16px;
  --r-sm:10px;
  --r-pill:999px;
  --shadow:0 1px 2px rgba(11,18,32,.05), 0 10px 28px rgba(11,18,32,.06);
  --shadow-lg:0 2px 6px rgba(11,18,32,.06), 0 24px 56px rgba(11,18,32,.12);

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --max:1280px;
  --gap:clamp(56px,6vw,104px);
}

/* ---------- base ---------------------------------------------------- */
body,
body p, body li, body td, body span, body div, body a, body dt, body dd,
.card__title, .car-details__title{ font-family:var(--font); }

body{ font-size:18px; line-height:1.65; color:var(--body); background:var(--bg);
      -webkit-font-smoothing:antialiased; }
@media (max-width:767px){ body{ font-size:17px; } }

h1,h2,h3,h4,h5,.ui-title-inner,.ui-title-block{
  color:var(--ink); font-weight:800; letter-spacing:-.02em; line-height:1.12; }
h1{ font-size:clamp(34px,4.6vw,56px); }
h2{ font-size:clamp(28px,3.4vw,42px); }
h3{ font-size:clamp(20px,2vw,25px); }
p{ margin:0 0 1.1em; }
a{ color:var(--accent); }
a:hover,a:focus{ color:var(--accent-dark); }
img{ max-width:100%; }

a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* Long unbroken values -- a VIN is 17 characters with no space in it,
   and on a phone that is wider than the column it sits in. */
.hav-spec dd, .hac-facts span, .hai-chip{ overflow-wrap:anywhere; word-break:break-word; }

/* ====================================================================
   THE THEME, NEUTRALISED
   ==================================================================== */

/* Header: the theme paints its own royal blue from an inline rule whose
   specificity beats a plain selector. A white header is what lets the
   photography carry the page. */
html header.header.header-background-black,
html header.header.header-background-black .navbar,
html header.header .navbar-default{ background-color:#fff !important; background-image:none !important; }
html header.header{ box-shadow:0 1px 0 var(--line), 0 8px 24px rgba(11,18,32,.05); }
html header.header .container,
html header.header .container-boxed-width{ max-width:var(--max); }

header.header .navbar-brand{ display:flex !important; align-items:center; height:auto !important;
  padding:14px 0 !important; }
header.header .navbar-brand img,
header.header img.normal-logo,
header.header img.sticky-logo{
  height:84px !important; max-height:84px !important; width:auto !important; max-width:none !important;
  object-fit:contain; display:block;
  /* The only logo file the business has is a solid blue rectangle with the
     wordmark reversed out of it -- there is no transparent version in the
     media library (the transparent PNGs there are the theme's own demo
     mark). Rounding the corners makes the block read as a badge somebody
     chose rather than a photograph someone forgot to cut out. */
  border-radius:8px; }
@media (max-width:991px){
  header.header .navbar-brand{ padding:10px 0 !important; }
  header.header .navbar-brand img,
  header.header img.normal-logo,
  header.header img.sticky-logo{ height:58px !important; max-height:58px !important; }
}

html header.header .main-menu{ display:flex; align-items:center; }
html header.header .main-menu > li > a{
  font-family:var(--font) !important; font-size:16.5px !important; font-weight:700 !important;
  letter-spacing:0; color:var(--ink) !important; padding:30px 17px !important;
  text-transform:none !important; }
html header.header.header-color-white .main-menu > li > a{ color:var(--ink) !important; }
html header.header .main-menu > li > a:hover,
html header.header .main-menu > li.current-menu-item > a{ color:var(--accent) !important; }
html header.header .main-menu > li.current-menu-item > a{ box-shadow:inset 0 -3px 0 var(--accent); }
html header.header .menu-marker{ background-color:var(--accent) !important; }

/* The utility strip: one quiet line, not a second header. */
header.header .top-bar,
header.header .header-topbar-view > .container{ background-color:var(--navy) !important; }
header.header .top-bar,
header.header .top-bar a,
header.header .header-topbar-view > .container,
header.header .header-topbar-view > .container a{ color:#c4d3e8 !important; font-size:13.5px; }
header.header .header-topbar-view > .container a:hover{ color:#fff !important; }
header.header .header-topbar-view > .container{ padding-top:8px; padding-bottom:8px; }

/* On a phone the strip was stacking a phone number, an email address and
   four social icons into about a fifth of the first screen, above the
   logo -- before the visitor had seen a single car. The phone number is
   the only one of those worth that space; everything else is in the
   footer and in the sticky bar. */
@media (max-width:767px){
  header.header .top-bar .header-topbarbox-2{ display:none !important; }
  header.header .top-bar .header-topbarbox-1 ul > li:not(:first-child){ display:none !important; }
  header.header .header-topbar-view > .container{ padding-top:5px; padding-bottom:5px; }
  header.header .top-bar{ text-align:center; }
}

/* The call button in the nav. */
.ha-header-cta{ display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:#fff !important; font-weight:700; font-size:16px;
  min-height:50px; padding:0 24px; border-radius:var(--r-sm); text-decoration:none; white-space:nowrap; }
.ha-header-cta:hover{ background:var(--accent-dark); color:#fff !important; }
html header.header .main-menu > li.ha-header-cta-li{ display:flex; align-items:center; margin-left:14px; }
html header.header .main-menu > li.ha-header-cta-li > a{ padding:0 24px !important; box-shadow:none; }
@media (max-width:991px){ .ha-header-cta-li{ display:none !important; } }

/* The hamburger is six white bars; on a white header that is an
   invisible button, and on a phone it is the only way to reach
   Inventory, Financing or Contact. */
header.header .menu-mobile-button{ background:transparent !important; border:0; padding:8px; }
header.header .toggle-menu-button-icon span{ background-color:var(--ink) !important; }

/* On a wide screen the whole menu is already on the bar, so the theme's
   second hamburger -- which opens a full-screen overlay of the same five
   links -- is a duplicate control sitting next to the Call button. */
@media (min-width:992px){
  header.header .menu-mobile-button,
  header.header button.js-toggle-screen.toggle-menu-button{ display:none !important; }
}

/* Sticky on desktop only; the theme's own script takes it from here. */
@media (min-width:992px){
  html header.header{ position:sticky; top:0; z-index:900; }
  body.admin-bar header.header{ top:32px; }
}

/* The theme's full-screen percentage preloader delays first paint on a
   page whose hero image is already the LCP element. */
.fl-top-background-preloader,.fl-bottom-background-preloader,
.preloader-wrap,.fl-preloader{ display:none !important; }

/* The page-title banner. Our templates print their own H1, so on those
   pages the banner is a duplicate heading and a wasted screenful. */
.single-pixad-autos .ui-title-page,
.page-id-104 .ui-title-page{ display:none !important; }

/* Legacy vehicle cards elsewhere on the site (taxonomy archives, the
   search page) still come from the theme. Make them look like ours. */
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--shadow); margin-bottom:26px; padding:0 !important; }
.card .card__img{ float:none !important; width:100% !important; margin:0 !important;
  aspect-ratio:16/10; overflow:hidden; background:var(--surface); }
.card .card__img a{ display:block; height:100%; }
.card .card__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.card .card__inner{ margin:0 !important; width:auto !important; padding:20px 22px 24px !important; }
.card .card__description{ display:none !important; }
.card .card__title{ font-size:21px; font-weight:800; margin:0 0 10px; line-height:1.25; }
.card .card__title a{ color:var(--ink); text-decoration:none; }
.card .card__list{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; padding:0; }
.card .card-list__row{ display:inline-flex; align-items:baseline; gap:5px; font-size:14px; font-weight:600;
  color:var(--body); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:5px 12px; white-space:nowrap; }
.card .card-list__title{ color:var(--muted); }
.card .card__wrap{ display:block !important; width:auto !important; float:none !important; }
.card .card__price{ float:none !important; width:auto !important; margin:0; }
.card .card__price-number{ font-size:28px; font-weight:800; color:var(--ink); letter-spacing:-.02em;
  display:block; text-align:left; }
.card .auto-sale-price,.card .card__price-number del{ font-size:.6em; font-weight:700;
  color:var(--muted); margin-right:8px; }
.list .card__img{ float:none !important; width:100% !important; }
.list .card__inner{ margin:0 !important; }
.taxonomy-auto-body .container,.search .container{ max-width:var(--max); }

/* The homepage sections are printed by a shortcode inside a WPBakery
   column, and WPBakery pads that column by default. Our sections carry
   their own rhythm and their own full-bleed backgrounds, so the wrapper
   must contribute nothing. Scoped to the front page: everywhere else the
   theme's columns are still the theme's business. */
body.home .vc_column-inner{ padding-top:0 !important; padding-bottom:0 !important;
  padding-left:0 !important; padding-right:0 !important; }
body.home .wpb_wrapper > .hac-section:first-child{ padding-top:0; }
body.home .vc_row.vc_row-fluid{ margin-left:0; margin-right:0; }

/* ====================================================================
   PRIMITIVES
   ==================================================================== */

.hac-wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 24px; }
@media (max-width:600px){ .hac-wrap{ padding:0 18px; } }

.hac-section{ padding:var(--gap) 0; }
.hac-section--alt{ background:var(--surface); }
.hac-section--navy{ background:var(--navy); color:#cfdcee; }
.hac-section--navy h2,.hac-section--navy h3{ color:#fff; }

.hac-head{ max-width:720px; margin:0 0 44px; }
.hac-head--center{ margin-left:auto; margin-right:auto; text-align:center; }
.hac-head h2{ margin:0 0 14px; }
.hac-head p{ margin:0; font-size:19px; color:var(--muted); line-height:1.6; }
.hac-section--navy .hac-head p{ color:#adc0d8; }

.hac-eyebrow{ margin:0 0 12px; font-size:13.5px; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); }
.hac-section--navy .hac-eyebrow{ color:#79aaff; }

/* Buttons: one system. 56px so a thumb hits it without aiming. */
.hac-btn,
.wpcf7-submit, input[type="submit"],
.btn, .button, a.btn-default, .btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:56px; padding:0 28px;
  font-family:var(--font); font-size:16.5px; font-weight:700; letter-spacing:.005em;
  border-radius:var(--r-sm); border:1px solid transparent; text-decoration:none; cursor:pointer;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .12s ease;
}
.hac-btn:hover,.wpcf7-submit:hover,input[type="submit"]:hover{ transform:translateY(-1px); text-decoration:none; }
.hac-btn--primary,.wpcf7-submit,input[type="submit"],.btn-primary{ background:var(--accent); color:#fff !important; }
.hac-btn--primary:hover,.wpcf7-submit:hover,input[type="submit"]:hover,.btn-primary:hover{ background:var(--accent-dark); color:#fff !important; }
.hac-btn--dark{ background:var(--navy); color:#fff !important; }
.hac-btn--dark:hover{ background:var(--navy-2); color:#fff !important; }
.hac-btn--ghost{ background:#fff; color:var(--ink) !important; border-color:var(--line-strong); }
.hac-btn--ghost:hover{ border-color:var(--accent); color:var(--accent) !important; }
.hac-btn--onlight{ background:rgba(11,18,32,.04); color:var(--ink) !important; border-color:var(--line-strong); }
.hac-btn--onlight:hover{ background:#fff; border-color:var(--accent); color:var(--accent) !important; }
.hac-btn--onnavy{ background:rgba(255,255,255,.10); color:#fff !important; border-color:rgba(255,255,255,.42); }
.hac-btn--onnavy:hover{ background:rgba(255,255,255,.2); color:#fff !important; }
.hac-btn--quiet{ background:transparent; color:var(--accent) !important; border-color:transparent; min-height:50px; }
.hac-btn--quiet:hover{ background:var(--accent-soft); color:var(--accent-dark) !important; }
.hac-btn--block{ width:100%; }

.hac-actions{ display:flex; flex-wrap:wrap; gap:14px; margin:0; }
@media (max-width:520px){ .hac-actions > a{ flex:1 1 100%; } }

/* Facts list */
.hac-facts{ list-style:none; margin:0 0 26px; padding:0; }
.hac-facts li{ display:flex; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); font-size:17.5px; }
.hac-facts li:last-child{ border-bottom:0; }
.hac-facts b{ min-width:104px; flex:none; color:var(--ink); font-weight:700; }

/* ====================================================================
   VEHICLE CARD
   ==================================================================== */

.hac-grid{ display:grid; gap:30px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.hac-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:1080px){ .hac-grid,.hac-grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } }
@media (max-width:640px){ .hac-grid,.hac-grid--3,.hac-grid--2{ grid-template-columns:1fr; gap:22px; } }

.hac-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow);
  transition:box-shadow .2s ease,transform .2s ease; }
.hac-card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.hac-card__media{ position:relative; display:block; aspect-ratio:16/10; background:var(--surface);
  overflow:hidden; }
.hac-card__media img{ width:100%; height:100%; object-fit:cover; object-position:center 55%; display:block; }
/* NO PHOTOGRAPH YET. Since 2026-09-13 a car publishes whether or not it
   has been photographed, so this tile is the first thing a shopper sees
   on most of the lot. It has to read as deliberate -- a car that landed
   this week -- and never as a broken image. On brand, in the site's own
   navy, and it says so in words rather than leaving a grey rectangle to
   be interpreted. */
.hac-card__noimg{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(11,99,229,.20) 0%, rgba(11,99,229,0) 62%),
    linear-gradient(180deg, var(--navy-2) 0%, var(--navy) 100%);
  color:#fff; text-align:center; padding:16px;
}
.hac-card__noimg::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 2px, rgba(255,255,255,0) 2px 9px);
}
.hac-card__noimg-mark{ color:rgba(255,255,255,.62); line-height:0; }
.hac-card__noimg-text{
  font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.9);
}
@media (max-width:520px){
  .hac-card__noimg-mark svg{ width:38px; height:38px; }
  .hac-card__noimg-text{ font-size:12px; }
}
.hac-card__flag{ position:absolute; left:14px; top:14px; background:rgba(255,255,255,.94); color:var(--ink);
  font-size:12.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  padding:6px 12px; border-radius:var(--r-pill); box-shadow:0 1px 3px rgba(11,18,32,.16); }
.hac-card__flag--sold{ background:#b42318; color:#fff; }
.hac-card__body{ display:flex; flex-direction:column; flex:1; padding:22px 24px 26px; }
.hac-card__title{ margin:0 0 4px; font-size:22px; font-weight:800; line-height:1.25; color:var(--ink); }
.hac-card__title a{ color:inherit; text-decoration:none; }
.hac-card__title a:hover{ color:var(--accent); }
.hac-card__trim{ margin:0 0 14px; font-size:15.5px; color:var(--muted); font-weight:600; }
.hac-card__price{ margin:0 0 8px; font-size:30px; font-weight:800; color:var(--ink);
  letter-spacing:-.025em; line-height:1.1; }
.hac-card__price del{ font-size:.55em; font-weight:700; color:var(--muted); margin-right:10px; }
.hac-card__facts{ margin:0 0 22px; font-size:16px; color:var(--muted); font-weight:600; }
.hac-card__body .hac-btn{ margin-top:auto; }

/* ====================================================================
   HERO

   The first version was a photograph with a dark gradient laid over it,
   and the complaint was fair: the car was dimmed to make the words
   readable, so neither got to be the point. This splits them instead --
   a flat navy panel that owns the type, and the photograph beside it at
   full brightness, cropped but never darkened.
   ==================================================================== */

/* THE HERO. One photograph, edge to edge, with the words laid over the
   half of it that is sky and tarmac rather than car. The previous
   version split the screen down the middle: safe, balanced, and the
   first thing anybody said about it was "boring". A picture that fills
   the screen is what a person notices, so the picture fills the screen
   and the type gets big enough to carry it. */
.hac-hero{ position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(520px, 72vh, 760px); display:flex; align-items:center;
  background:var(--navy); }
.hac-hero__media{ position:absolute; inset:0; z-index:0; }
.hac-hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 58%;
  display:block; transform:scale(1.06); animation:hac-drift 26s ease-out forwards; }
@keyframes hac-drift{ from{ transform:scale(1.06); } to{ transform:scale(1.0); } }

/* Dark where the words are, clear where the car is. Two layers: a
   left-to-right wash for desktop, and a bottom-up wash that takes over
   on a phone, where the text sits under the picture rather than beside it. */
.hac-hero__scrim{ position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(100deg, rgba(9,17,30,.94) 0%, rgba(9,17,30,.88) 34%, rgba(9,17,30,.55) 55%, rgba(9,17,30,.12) 74%, rgba(9,17,30,0) 100%),
    linear-gradient(to top, rgba(9,17,30,.75) 0%, rgba(9,17,30,0) 42%); }

.hac-hero__inner{ position:relative; z-index:2; width:100%; max-width:var(--max);
  margin:0 auto; padding:clamp(48px,6vw,90px) 24px; }
.hac-hero__text{ max-width:min(780px, 92%); animation:hac-rise .7s cubic-bezier(.2,.7,.3,1) both; }
@keyframes hac-rise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

.hac-hero__eyebrow{ display:inline-flex; align-items:center; gap:10px; margin:0 0 20px;
  padding:9px 18px; border-radius:999px;
  background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(6px);
  font-size:14.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#e8f0fb; }
/* A quiet green dot that breathes. It is the one piece of movement on
   the page that means something: there are cars here right now. */
.hac-live{ width:9px; height:9px; border-radius:50%; background:#3ddc84; flex:none;
  box-shadow:0 0 0 0 rgba(61,220,132,.7); animation:hac-pulse 2.4s ease-out infinite; }
@keyframes hac-pulse{ 70%{ box-shadow:0 0 0 11px rgba(61,220,132,0); } 100%{ box-shadow:0 0 0 0 rgba(61,220,132,0); } }

.hac-hero h1{ margin:0 0 22px; color:#fff; font-weight:800; line-height:1.02;
  letter-spacing:-.03em; font-size:clamp(44px, 6.2vw, 82px);
  text-shadow:0 2px 28px rgba(0,0,0,.45); }
.hac-hero__place{ display:block; color:#7fc4ff; }

.hac-hero__sub{ margin:0 0 34px; max-width:54ch; color:#e2ebf7;
  font-size:clamp(18.5px, 1.6vw, 23px); line-height:1.6;
  text-shadow:0 1px 14px rgba(0,0,0,.5); }

.hac-hero__cta{ display:flex; flex-wrap:wrap; gap:16px; margin:0; }
.hac-hero__cta .hac-btn{ min-height:66px; padding:0 38px; font-size:19px; border-radius:12px; }
.hac-hero__cta .hac-btn--primary{ box-shadow:0 12px 34px rgba(11,99,229,.45); }
.hac-hero__cta .hac-btn b{ margin-left:10px; padding:3px 11px; border-radius:999px;
  background:rgba(255,255,255,.22); font-size:16px; }
.hac-hero__cta .hac-btn--onnavy{ background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.5);
  backdrop-filter:blur(6px); }

@media (max-width:900px){
  /* On a phone the words sit over the middle of the photograph rather than
     beside it, so the left-to-right wash is no help -- a line can land on a
     headlight or a chrome grille and lose its contrast. Replace it with a
     single bottom-up wash that is dark wherever the text is and clears in
     time to leave the top of the car visible. */
  .hac-hero__scrim{ background:linear-gradient(to top,
    rgba(9,17,30,.93) 0%, rgba(9,17,30,.86) 44%, rgba(9,17,30,.62) 68%,
    rgba(9,17,30,.30) 86%, rgba(9,17,30,.12) 100%); }
  .hac-hero{ min-height:clamp(500px, 86vh, 680px); align-items:flex-end; }
  .hac-hero__text{ max-width:100%; }
  .hac-hero__inner{ padding:40px 18px 44px; }
  .hac-hero__cta .hac-btn{ flex:1 1 100%; }
}

/* ---- the band of facts directly under the hero ---- */
.hac-stats{ background:var(--navy-2); border-bottom:1px solid rgba(255,255,255,.08); }
.hac-stats__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0;
  padding-top:0; padding-bottom:0; }
.hac-stat{ display:flex; align-items:center; gap:13px; padding:24px 26px 24px 0;
  color:#dfe9f7; font-size:16.5px; font-weight:600; line-height:1.35; }
.hac-stat + .hac-stat{ padding-left:26px; border-left:1px solid rgba(255,255,255,.1); }
.hac-stat__icon{ display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:36px; height:36px; border-radius:50%; background:rgba(61,220,132,.16); color:#3ddc84; }
.hac-stat__icon svg{ width:19px; height:19px; }
@media (max-width:1000px){
  .hac-stats__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hac-stat{ padding:20px 18px 20px 0; }
  .hac-stat:nth-child(odd){ padding-left:0; border-left:0; }
  .hac-stat:nth-child(even){ padding-left:20px; border-left:1px solid rgba(255,255,255,.1); }
  .hac-stat:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.1); }
}
@media (max-width:560px){
  .hac-stats__grid{ grid-template-columns:1fr; }
  .hac-stat{ padding:16px 0 !important; border-left:0 !important; }
  .hac-stat + .hac-stat{ border-top:1px solid rgba(255,255,255,.1); }
}

/* ====================================================================
   HOMEPAGE SECTIONS
   ==================================================================== */

.hac-more{ display:flex; flex-wrap:wrap; gap:14px; margin:40px 0 0; }
.hac-more--center{ justify-content:center; }
@media (max-width:520px){ .hac-more a{ flex:1 1 100%; } }

.hac-tiles{ display:grid; gap:24px; grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1080px){ .hac-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .hac-tiles{ grid-template-columns:1fr; } }
.hac-tile{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:30px 28px;
  box-shadow:var(--shadow); }
.hac-tile__icon{ display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px;
  border-radius:14px; background:var(--accent-soft); color:var(--accent); margin:0 0 18px; }
.hac-tile h3{ margin:0 0 10px; font-size:20px; }
.hac-tile p{ margin:0; font-size:16.5px; color:var(--muted); line-height:1.6; }

.hac-types{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(200px,220px));
  justify-content:center; }
@media (max-width:560px){ .hac-types{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); } }
.hac-type{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  min-height:132px; padding:24px 18px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); color:var(--ink); font-weight:700; font-size:18px; text-decoration:none;
  box-shadow:var(--shadow); transition:border-color .15s ease,transform .15s ease; }
.hac-type:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.hac-type span{ font-size:14.5px; font-weight:600; color:var(--muted); }
.hac-type:hover span{ color:var(--accent); }

.hac-split{ display:grid; gap:26px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:900px){ .hac-split{ grid-template-columns:1fr; } }
.hac-panel{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:38px;
  box-shadow:var(--shadow); }
.hac-panel--navy{ background:var(--navy); border-color:var(--navy); color:#c6d6ea; }
.hac-panel--navy h3{ color:#fff; }
.hac-panel h3{ margin:0 0 14px; font-size:25px; }
.hac-panel p{ margin:0 0 20px; font-size:17.5px; line-height:1.6; }
.hac-panel small{ display:block; margin-top:18px; font-size:14.5px; line-height:1.55; color:var(--muted); }
.hac-panel--navy small{ color:#94aac6; }
@media (max-width:560px){ .hac-panel{ padding:28px 24px; } }

.hac-steps{ display:grid; gap:26px; grid-template-columns:repeat(3,minmax(0,1fr));
  margin:0; padding:0; list-style:none; }
@media (max-width:900px){ .hac-steps{ grid-template-columns:1fr; gap:20px; } }
.hac-steps li{ background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:32px 28px 28px; box-shadow:var(--shadow); }
.hac-steps li > span{ display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:var(--r-pill); background:var(--accent); color:#fff;
  font-weight:800; font-size:19px; margin:0 0 18px; }
.hac-steps h3{ margin:0 0 10px; font-size:21px; }
.hac-steps p{ margin:0; font-size:16.5px; line-height:1.6; color:var(--muted); }

.hac-location{ display:grid; gap:32px; grid-template-columns:1fr 1.2fr; align-items:stretch; }
@media (max-width:900px){ .hac-location{ grid-template-columns:1fr; } }
.hac-map{ min-height:380px; border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow); }
.hac-map iframe{ width:100%; height:100%; min-height:380px; border:0; display:block; }

.hac-ways{ display:grid; gap:18px; grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:900px){ .hac-ways{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .hac-ways{ grid-template-columns:1fr; } }
.hac-way{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px;
  min-height:146px; justify-content:center; padding:26px 18px; text-decoration:none;
  background:#fff; border:1px solid var(--line); border-radius:var(--r); color:var(--ink);
  box-shadow:var(--shadow); transition:border-color .15s ease,transform .15s ease; }
.hac-way:hover{ border-color:var(--accent); transform:translateY(-2px); color:var(--ink); text-decoration:none; }
.hac-way svg{ color:var(--accent); margin-bottom:4px; }
.hac-way b{ font-size:18px; font-weight:800; }
.hac-way span{ font-size:16px; color:var(--muted); overflow-wrap:anywhere; }

/* ====================================================================
   INVENTORY PAGE
   ==================================================================== */

.hai-head{ background:var(--surface); border-bottom:1px solid var(--line); padding:52px 0 46px; }
.hai-head__title{ margin:0 0 16px; }
.hai-head__sub{ margin:0; font-size:19px; color:var(--muted); max-width:66ch; line-height:1.6; }
.hai-head__cta{ display:flex; flex-wrap:wrap; gap:14px; margin:28px 0 0; }
@media (max-width:520px){ .hai-head__cta a{ flex:1 1 100%; } }

/* The filter rows used to sit loose on the page, which read as a form
   somebody had forgotten to finish. One bordered panel, hairlines between
   the rows: the same controls, but now obviously a tool. */
.hai-filters{ margin:38px 0 0; }
.hai-filters__toggle{ display:none; width:100%; min-height:56px; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line-strong); border-radius:var(--r-sm);
  font-family:var(--font); font-size:16.5px; font-weight:700; color:var(--ink); }
.hai-filters__panel{ display:grid; gap:0; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); padding:6px 28px; }
.hai-filter{ display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap; padding:18px 0; }
.hai-filter + .hai-filter{ border-top:1px solid var(--line); }
.hai-filter__label{ flex:none; min-width:110px; padding-top:11px; font-size:13.5px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.hai-filter__chips{ display:flex; flex-wrap:wrap; gap:10px; }
.hai-chip{ display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 18px;
  border-radius:var(--r-pill); background:#fff; border:1px solid var(--line-strong);
  color:var(--ink); font-size:15.5px; font-weight:600; text-decoration:none; white-space:nowrap; }
.hai-chip span{ color:var(--muted); font-size:14px; }
.hai-chip:hover{ border-color:var(--accent); color:var(--accent); }
.hai-chip.is-active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.hai-chip.is-active span{ color:rgba(255,255,255,.82); }
@media (max-width:820px){
  .hai-filters__toggle{ display:flex; }
  .hai-filters__panel{ display:none; margin-top:14px; padding:6px 20px; }
  .hai-filters__panel.is-open{ display:grid; }
  .hai-filter{ flex-direction:column; gap:10px; padding:16px 0; }
  .hai-filter__label{ padding-top:0; }
}

.hai-result{ margin:22px 0 0; font-size:16.5px; color:var(--muted); }
.hai-grid{ margin:34px 0 0; }
.hai .hac-wrap > .hai-grid:last-child{ padding-bottom:var(--gap); }
.hai-empty{ margin:48px 0; padding:48px 32px; text-align:center; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); }
.hai-empty h2{ margin:0 0 12px; font-size:26px; }
.hai-empty p{ max-width:56ch; margin:0 auto 22px; color:var(--muted); }

.hai-help{ margin-top:var(--gap); background:var(--navy); color:#c6d6ea; padding:56px 0; }
.hai-help h2{ color:#fff; margin:0 0 12px; font-size:clamp(24px,2.6vw,32px); }
.hai-help p{ margin:0; color:#adc0d8; max-width:56ch; font-size:17.5px; }
.hai-help__inner{ display:flex; gap:32px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.hai-help__cta{ display:flex; gap:14px; flex-wrap:wrap; margin:0; }

/* ====================================================================
   VEHICLE PAGE
   ==================================================================== */

.hav{ padding:0 0 var(--gap); }
.hav-crumbs{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; padding:26px 0 22px;
  font-size:15px; color:var(--muted); }
.hav-crumbs a{ color:var(--muted); text-decoration:none; }
.hav-crumbs a:hover{ color:var(--accent); }
.hav-crumbs span[aria-hidden]{ color:var(--line-strong); }

.hav-top{ display:grid; gap:34px; grid-template-columns:minmax(0,1.65fr) minmax(340px,1fr);
  align-items:start; }
/* minmax(0,...) rather than 1fr, and min-width:0 on the children: a grid
   column sized 1fr still refuses to go below its content's min-content
   width, and the scrolling thumbnail strip below reports the full width
   of every thumbnail as its own. Without these two the single-column
   layout on a phone was 872px wide inside a 339px page. */
.hav-top > *{ min-width:0; }
@media (max-width:1000px){ .hav-top{ grid-template-columns:minmax(0,1fr); gap:26px; } }

/* ---- gallery ---- */
.hav-gallery__stage{ position:relative; margin:0; border-radius:var(--r); overflow:hidden;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); }
.hav-gallery__stage img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block; }
.hav-gallery__count{ position:absolute; right:14px; bottom:14px; margin:0; padding:6px 13px;
  border-radius:var(--r-pill); background:rgba(11,18,32,.72); color:#fff; font-size:14px; font-weight:700; }
/* The same state, on the vehicle's own page. Matched to the card so a
   shopper who clicks through from a "Photos coming soon" tile is not
   met by a different-looking apology. */
.hav-gallery__empty{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:4/3; padding:24px; text-align:center;
  border-radius:var(--r); border:1px solid var(--line);
  box-shadow:var(--shadow);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(11,99,229,.20) 0%, rgba(11,99,229,0) 62%),
    linear-gradient(180deg, var(--navy-2) 0%, var(--navy) 100%);
  color:rgba(255,255,255,.92);
  font-size:16px; font-weight:700; letter-spacing:.01em;
}
.hav-gallery__empty::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 2px, rgba(255,255,255,0) 2px 9px);
}

/* One scrolling strip at every width. As a six-across grid a seventh
   photograph dropped onto a row of its own with five empty cells beside
   it, and how ragged the page looked depended on how many pictures the
   car happened to have. */
.hav-thumbs{ display:flex; gap:10px; margin:12px 0 0; min-width:0; max-width:100%; overflow-x:auto;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  padding-bottom:6px; scrollbar-width:thin; }
.hav-thumbs .hav-thumb{ flex:0 0 96px; scroll-snap-align:start; }
@media (max-width:1000px){
  .hav-thumb{ flex:0 0 116px !important; scroll-snap-align:start; }
}
.hav-thumb{ padding:0; border:2px solid transparent; border-radius:10px; overflow:hidden;
  background:var(--surface); cursor:pointer; aspect-ratio:4/3; }
.hav-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.hav-thumb.is-active{ border-color:var(--accent); }

/* ---- action panel ---- */
.hav-panel__inner{ background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-lg); padding:30px 28px 28px; }
@media (min-width:1001px){ .hav-panel{ position:sticky; top:132px; } }
body.admin-bar .hav-panel{ top:164px; }
.hav-panel__stock{ margin:0 0 10px; font-size:13.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); }
.hav-panel__title{ margin:0 0 6px; font-size:clamp(26px,2.6vw,34px); line-height:1.14; }
.hav-panel__trim{ margin:0 0 18px; font-size:17px; font-weight:600; color:var(--muted); }
.hav-panel__price{ margin:0 0 4px; font-size:clamp(38px,4vw,48px); font-weight:800;
  letter-spacing:-.03em; line-height:1; color:var(--ink); }
.hav-panel__was{ margin:0 0 16px; font-size:15.5px; font-weight:600; color:var(--muted); }
.hav-panel__sold{ margin:0 0 16px; font-size:24px; font-weight:800; color:#b42318; }
.hav-panel__facts{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 24px; padding:0; list-style:none; }
.hav-panel__facts li{ font-size:15px; font-weight:600; color:var(--body); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:7px 14px; }
.hav-panel__cta{ display:grid; gap:11px; }
.hav-panel__where{ margin:22px 0 0; padding-top:20px; border-top:1px solid var(--line);
  font-size:15.5px; line-height:1.6; color:var(--muted); }
.hav-panel__where p{ margin:0 0 2px; }
.hav-panel__where strong{ color:var(--ink); }

/* ---- sections ---- */
.hav-section{ padding:var(--gap) 0 0; }
.hav-section h2{ margin:0 0 22px; }
.hav-section h3{ margin:34px 0 14px; font-size:21px; }
.hav-section--alt{ margin-top:var(--gap); padding:calc(var(--gap) * .8) 32px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); }
@media (max-width:600px){ .hav-section--alt{ padding:34px 22px; } }
.hav-lede{ font-size:19.5px; line-height:1.7; color:var(--body); max-width:72ch; }
.hav-section p{ max-width:72ch; }

/* Prose beside a highlights card, so the section fills its own width. */
.hav-over{ display:grid; gap:32px 48px; align-items:start;
  grid-template-columns:minmax(0,1.42fr) minmax(0,1fr); }
.hav-over--solo{ grid-template-columns:minmax(0,1fr); }
@media (max-width:900px){ .hav-over{ grid-template-columns:minmax(0,1fr); gap:28px; } }
.hav-over__text h3:first-of-type{ margin-top:30px; }
.hav-over__side{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:28px 30px 24px; }
.hav-over__side h3{ margin:0 0 18px; font-size:19px; }
.hav-over__note{ margin:20px 0 0; font-size:14.5px; line-height:1.5; color:var(--muted);
  padding-top:16px; border-top:1px solid var(--line); }

.hav-highlights{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px;
  margin:0; padding:0; list-style:none; max-width:none; }
.hav-over--solo .hav-highlights{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 26px; }
@media (max-width:900px){ .hav-over--solo .hav-highlights{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .hav-over--solo .hav-highlights{ grid-template-columns:1fr; } }
.hav-highlights li{ position:relative; padding-left:28px; font-size:17px; line-height:1.55; color:var(--body); }
.hav-highlights li:before{ content:""; position:absolute; left:4px; top:.62em; width:9px; height:9px;
  border-radius:50%; background:var(--accent); }

.hav-specs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 32px; margin:0; }
@media (max-width:900px){ .hav-specs{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .hav-specs{ grid-template-columns:1fr; } }
.hav-spec{ display:flex; flex-direction:column; gap:3px; padding:16px 0;
  border-bottom:1px solid var(--line); min-width:0; }
.hav-spec dt{ font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); }
.hav-spec dd{ margin:0; font-size:18px; font-weight:700; color:var(--ink); min-width:0; }
/* A VIN is 17 unbroken characters. It is allowed a whole row of its own
   and it is allowed to wrap; it is not allowed outside its box. */
.hav-spec--wide{ grid-column:1 / -1; }
.hav-spec--wide dd{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:16.5px; letter-spacing:.02em; }
.hav-specs__note{ margin:24px 0 0; font-size:15.5px; color:var(--muted); }

.hav-finance{ display:flex; gap:34px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  margin-top:var(--gap); padding:44px 40px; background:var(--navy); color:#c6d6ea;
  border-radius:var(--r); }
@media (max-width:600px){ .hav-finance{ padding:32px 24px; } }
.hav-finance h2{ color:#fff; margin:0 0 12px; font-size:clamp(24px,2.6vw,32px); }
.hav-finance p{ margin:0 0 10px; font-size:17.5px; color:#adc0d8; max-width:60ch; }
.hav-finance__small{ font-size:14.5px !important; color:#8fa6c2 !important; }
.hav-finance__cta{ flex:none; }

.hav-visit{ display:grid; gap:32px; grid-template-columns:1fr 1.15fr; align-items:stretch; }
@media (max-width:900px){ .hav-visit{ grid-template-columns:1fr; } }
.hav-visit__map{ min-height:340px; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); }
.hav-visit__map iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; }
.hav-visit__cta{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---- sticky phone bar ---- */
.hav-sticky{ display:none; }
@media (max-width:1000px){
  .hav-sticky{ position:fixed; left:0; right:0; bottom:0; z-index:950; display:grid;
    grid-template-columns:1fr 1fr 1.2fr; gap:1px; background:var(--line-strong);
    box-shadow:0 -2px 20px rgba(11,18,32,.16); }
  .hav-sticky a{ display:flex; align-items:center; justify-content:center; min-height:60px;
    font-size:17px; font-weight:800; text-decoration:none; }
  .hav-sticky__call{ background:var(--accent); color:#fff !important; }
  .hav-sticky__text{ background:var(--navy); color:#fff !important; }
  .hav-sticky__drive{ background:#fff; color:var(--ink) !important; }
  body.single-pixad-autos{ padding-bottom:60px; }
  .whatsapp-float{ bottom:74px !important; }
}
/* The storefront UX layer's own bar would be a second one. */
.single-pixad-autos .ha-actions{ display:none !important; }
.ha-actions{ display:none; }
@media (max-width:767px){
  .ha-actions{ position:fixed; left:0; right:0; bottom:0; z-index:940; display:grid;
    grid-template-columns:1fr 1fr; gap:1px; background:var(--line-strong); }
  .ha-actions a{ display:flex; align-items:center; justify-content:center; min-height:58px;
    font-size:17px; font-weight:800; text-decoration:none; }
  .ha-actions .ha-call{ background:var(--accent); color:#fff !important; }
  .ha-actions .ha-text{ background:var(--navy); color:#fff !important; }
  body:not(.single-pixad-autos){ padding-bottom:58px; }
}

/* ====================================================================
   FOOTER
   ==================================================================== */

.ha-footer{ background:var(--navy) !important; color:#adc0d8; padding:64px 0 0; margin-top:0; }
.ha-footer .hac-wrap,.ha-footer .ha-wrap{ max-width:var(--max); }
.ha-footer__grid{ display:grid; gap:40px; grid-template-columns:1.5fr 1fr 1.2fr 1fr; }
@media (max-width:900px){ .ha-footer__grid{ grid-template-columns:1fr 1fr; gap:32px; } }
@media (max-width:560px){ .ha-footer__grid{ grid-template-columns:1fr; gap:28px; } }
.ha-footer img{ height:84px; width:auto; background:#fff; border-radius:12px; padding:10px 14px;
  display:block; margin:0 0 20px; }
.ha-footer h4{ margin:0 0 16px; font-size:13.5px; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:#fff !important; }
.ha-footer p{ margin:0 0 18px; font-size:16.5px; line-height:1.6; color:#adc0d8; max-width:34ch; }
.ha-footer ul{ list-style:none; margin:0; padding:0; }
.ha-footer li{ margin:0 0 11px; font-size:16.5px; line-height:1.55; color:#adc0d8; }
.ha-footer a{ color:#c9dbf0; text-decoration:none; }
.ha-footer a:hover{ color:#fff; text-decoration:underline; }
.ha-footer .hac-btn--primary{ color:#fff !important; }
.ha-footer__bar{ margin-top:52px; border-top:1px solid rgba(255,255,255,.14); padding:22px 0 26px;
  font-size:15px; color:#8fa6c2; }
.ha-footer__bar a{ color:#8fa6c2; }

/* ====================================================================
   FORMS AND ODDS AND ENDS
   ==================================================================== */

.wpcf7 input[type="text"],.wpcf7 input[type="tel"],.wpcf7 input[type="email"],
.wpcf7 textarea,.wpcf7 select{
  width:100%; min-height:56px; padding:0 16px; font-family:var(--font); font-size:17px;
  color:var(--ink); background:#fff; border:1px solid var(--line-strong); border-radius:var(--r-sm); }
.wpcf7 textarea{ min-height:130px; padding:14px 16px; }
.wpcf7 input:focus,.wpcf7 textarea:focus,.wpcf7 select:focus{
  border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft); }
.wpcf7 .row{ margin-bottom:14px; }

.whatsapp-float{ bottom:92px !important; }

/* ====================================================================
   BIGGER, AND WITH A LITTLE LIFE IN IT
   Added 2026-09-11. The owner's words: "it doesn't catch the eye, the
   writing is small, it is boring." All three are fair. Nothing here
   changes what the page says -- only how loudly it says it.
   ==================================================================== */

/* ---- type, one size up across the board ---- */
body{ font-size:19px; }
@media (max-width:767px){ body{ font-size:17.5px; } }

.hac-section{ padding:clamp(64px,7vw,116px) 0; }
.hac-head{ max-width:780px; margin-bottom:52px; }
.hac-head h2{ font-size:clamp(32px,4vw,52px); letter-spacing:-.025em; line-height:1.08; }
.hac-head p{ font-size:clamp(18px,1.5vw,21px); }
.hac-eyebrow{ font-size:14px; letter-spacing:.2em; }

/* ---- cards: the price is the headline ---- */
.hac-card{ transition:box-shadow .25s ease, transform .25s ease; }
.hac-card:hover{ transform:translateY(-6px); box-shadow:0 24px 60px rgba(11,18,32,.18); }
.hac-card__media{ overflow:hidden; }
.hac-card__media img{ transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.hac-card:hover .hac-card__media img{ transform:scale(1.06); }
.hac-card__title{ font-size:23px; }
.hac-card__price{ font-size:34px; color:var(--accent); letter-spacing:-.03em; }
.hac-card__price del{ color:var(--muted); font-size:.5em; }
.hac-card__facts{ font-size:16.5px; }
.hac-card__body .hac-btn{ min-height:54px; font-size:16.5px; }

/* ---- the tiles and steps: give them presence ---- */
.hac-tile{ padding:34px 30px; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.hac-tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--line-strong); }
.hac-tile h3{ font-size:22px; }
.hac-tile p{ font-size:17px; }
.hac-tile__icon{ width:60px; height:60px; }
.hac-steps li{ transition:transform .25s ease, box-shadow .25s ease; }
.hac-steps li:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.hac-steps li > span{ width:52px; height:52px; font-size:21px; }
.hac-panel h3{ font-size:27px; }
.hac-panel p{ font-size:18px; }

/* ---- sections arrive as you reach them ---- */
@media (prefers-reduced-motion:no-preference){
  .hac-section > .hac-wrap{ animation:hac-fade-up .8s cubic-bezier(.2,.7,.3,1) both; animation-timeline:view(); animation-range:entry 0% cover 26%; }
  @keyframes hac-fade-up{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
}

/* Anybody who has asked their device to stop moving things gets a page
   that does not move. The dot stops breathing, the photograph stops
   drifting, and nothing slides in. */
@media (prefers-reduced-motion:reduce){
  .hac-hero__media img{ animation:none; transform:none; }
  .hac-hero__text{ animation:none; }
  .hac-live{ animation:none; }
  .hac-card, .hac-card__media img, .hac-tile, .hac-steps li{ transition:none; }
  .hac-card:hover, .hac-tile:hover, .hac-steps li:hover{ transform:none; }
}

/* ====================================================================
   CONSISTENCY PASS -- 2026-09-13

   From the design audit in docs/helloautogs-design-system.md, which
   measured this site's computed CSS page by page rather than judging it
   by eye. Six defects, each one measured. Nothing here changes what any
   page SAYS.
   ==================================================================== */

/* 1. ONE FAMILY. The redesign set headings to the system stack and
      never touched the body, so every paragraph was Poppins under a
      heading that was not, and the footer and the whole Contact page
      were Montserrat. The theme out-specifies `body p`, so this names
      the elements the theme names. */
html, body, button, input, select, textarea, optgroup,
body p, body li, body td, body th, body span, body div, body a,
body dt, body dd, body blockquote, body figcaption,
h1, h2, h3, h4, h5, h6,
.ui-title-inner, .ui-title-block, .block-title__title{
  font-family:var(--font);
}

/* 2. THE PRICE. Measured at Poppins 300 -- the lightest weight on the
      site, on the one number a shopper came to read. */
.hav-panel__price, .hac-card__price, .ha-price, .price{
  font-family:var(--font) !important;
  font-weight:800 !important;
}

/* 3. THE VEHICLE PAGE HIERARCHY WAS UPSIDE DOWN. The car's own name
      rendered at 31.2px under a section heading at 40.8px. */
.hav-panel__title{ font-size:clamp(30px,3.4vw,46px); line-height:1.1; }
.hav-section h2{ font-size:clamp(23px,2.2vw,30px); line-height:1.16; }

/* 4. THE HEADER BUTTON. One instance computed to #0b1220 on #0b63e5 --
      about 2.6:1, which fails WCAG AA -- and squared off while every
      other button on the site is rounded. */
.ha-header-cta, .ha-header-cta:link, .ha-header-cta:visited{
  color:#fff !important;
  border-radius:var(--r-sm) !important;
  text-transform:none !important;
  font-size:16.5px;
}

/* 5. FORM FIELDS NOBODY CAN SEE. Border #eee on #fff is 1.2:1. Text
      #888 is 3.5:1, under the 4.5:1 minimum. */
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel],
.wpcf7 input[type=url], .wpcf7 input[type=number], .wpcf7 input[type=date],
.wpcf7 textarea, .wpcf7 select{
  border:1px solid var(--line-strong) !important;
  border-radius:var(--r-sm) !important;
  color:var(--ink) !important;
  font-size:16px !important;
  min-height:52px;
  padding:0 14px !important;
  width:100%; max-width:100%; box-sizing:border-box;
}
.wpcf7 textarea{ padding:12px 14px !important; min-height:132px; }
.wpcf7 ::placeholder{ color:var(--muted); opacity:1; }

/* 6. ONE BUTTON SHAPE. The Contact Form 7 submit was the only uppercase
      button on the site and the only one with a transparent fill. */
.wpcf7 input[type=submit], .wpcf7 .wpcf7-submit, .km_cf7-button{
  background:var(--accent) !important;
  color:#fff !important;
  border:1px solid transparent !important;
  border-radius:var(--r-sm) !important;
  text-transform:none !important;
  font-family:var(--font) !important;
  font-size:16.5px !important;
  font-weight:700 !important;
  min-height:56px;
  padding:0 28px !important;
  cursor:pointer;
}
.wpcf7 input[type=submit]:hover, .wpcf7 .wpcf7-submit:hover, .km_cf7-button:hover{
  background:var(--accent-dark) !important;
}

/* ====================================================================
   THE HOMEPAGE: CARS ABOVE THE FOLD -- 2026-09-13

   Measured before this change, at a 1200px viewport:
       header 128px + hero 574px + stats 94px -> first car at 1085px.
   A shopper on a phone got an entire screen with no car on it. Both
   dealerships the Owner is losing to put cars in the first screen, and
   one of them does it with placeholder images.

   After: first car at 772px, four across instead of three, and the
   price in a solid band where it cannot be missed.
   ==================================================================== */
.hac-wrap{ padding-left:clamp(20px,3vw,40px); padding-right:clamp(20px,3vw,40px); }
.hac-hero{ min-height:0; }
.hac-hero__inner{ padding:34px 0 30px; }
.hac-hero h1{ font-size:clamp(28px,3.6vw,44px); margin:0 0 8px; line-height:1.08; }
.hac-hero__sub{ font-size:16px; margin:0 0 16px; max-width:600px; }
.hac-hero__eyebrow{ margin:0 0 8px; }
.hac-hero__cta .hac-btn{ min-height:52px; font-size:16px; padding:0 24px; }
.hac-stats .hac-wrap{ padding-top:10px; padding-bottom:10px; }
.hac-stats + .hac-section{ padding-top:26px; }
.hac-head{ margin-bottom:20px; max-width:720px; }
.hac-head h2{ font-size:clamp(24px,2.8vw,34px); margin-bottom:6px; }
.hac-head p{ font-size:15.5px; }
.hac-eyebrow{ font-size:12.5px; margin-bottom:6px; }

/* A FULL LOT LOOKS LIKE A FULL LOT. Three across a 1280 container made
   twelve cars look like a short list. */
.hac-grid--3{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
@media (max-width:1180px){ .hac-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:860px){ .hac-grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; } }

/* THE PRICE IS THE PRODUCT. A solid band under the photograph, in Hello
   Auto's own blue. It is what every dealer site that works does, and it
   is the thing this one was whispering in grey. */
.hac-card__media{ aspect-ratio:4/3; }
.hac-card__body{ padding:0; display:flex; flex-direction:column; }
.hac-card__price{ order:-1; margin:0; background:var(--accent); color:#fff;
  padding:10px 14px; font-size:21px; font-weight:800; letter-spacing:-.01em; }
.hac-card__price del{ color:rgba(255,255,255,.62); font-size:14px; margin-right:8px; font-weight:600; }
.hac-card__title{ order:0; padding:12px 14px 0; margin:0; font-size:17px; line-height:1.22; }
.hac-card__trim{ order:1; padding:2px 14px 0; margin:0; font-size:13px; }
.hac-card__facts{ order:2; padding:6px 14px 0; margin:0; font-size:13px; flex:1 1 auto; }
.hac-card .hac-btn--block{ order:3; margin:12px 14px 14px; width:auto; min-height:42px; font-size:14px; }

@media (max-width:860px){
  .hac-hero__inner{ padding:22px 0 20px; }
  .hac-hero__sub{ display:none; }
  .hac-stats + .hac-section{ padding-top:18px; }
  .hac-head{ margin-bottom:14px; }
  .hac-head p{ display:none; }
  .hac-card__title{ font-size:14.5px; }
  .hac-card__price{ font-size:18px; padding:8px 11px; }
  .hac-card__title, .hac-card__trim, .hac-card__facts{ padding-left:11px; padding-right:11px; }
  .hac-card__trim{ display:none; }
  .hac-card .hac-btn--block{ display:none; }
}


/* ====================================================================
   THE FRONT PAGE -- 2026-09-13, second pass: LIGHT
   ====================================================================

   The first pass replaced a black rectangle with a photograph of a car
   key being handed over, shot close and dark. It was a real improvement
   and it was still wrong. The Owner's words for what this page should
   feel like are "peaceful", "no pressure", "peace of mind" -- and the
   last of those is printed on his own logo. A dark hero fights all
   three. His instruction was plain: light blue, a car, calm, something
   that makes a stranger want to look.

   So the hero is now light. Pale blue ground, dark navy type, and the
   photograph living on the right half and dissolving into the ground
   rather than being covered by a black wash. Nothing about the words
   changed.

   THE PHOTOGRAPH
   `uploads/hello-auto-hero-calm.jpg` (2000x1125, 178,093 bytes) and
   `uploads/hello-auto-hero-calm-sm.jpg` (1000px, 61,843 bytes) for
   phones. A clean car parked by open water under a wide pale-blue sky.
   David Gabric on Unsplash
   (https://unsplash.com/photos/SXlY0dapm38), Unsplash License: free for
   commercial use, attribution appreciated and given here. The number
   plate is blurred in the file we host -- it is a European plate, and on
   a Massachusetts dealership's front page that is the single detail
   that says "stock photo".

   NO NUMBERS
   The site publishes fewer cars than the lot actually holds, because the
   photographs are still catching up. So the count came off: the "12"
   badge on the button, and the "N cars ready to drive today" line in the
   band underneath. Both are hidden only while the old template is still
   live -- once `hello-auto-templates.php` ships a `.hac-hero__promise`
   paragraph, `:has()` switches every one of these stopgaps off by
   itself, and the template's own wording ("See our inventory") takes
   over.
   ==================================================================== */

.hac-hero{
  min-height:clamp(540px, 64vh, 680px);
  display:flex; align-items:center;
  background:linear-gradient(155deg,#f8fbff 0%,#eaf3fe 46%,#d9eafd 100%);
}

/* The photograph sits in the right two-thirds and fades out to the left
   instead of being buried under a scrim. On a light ground a mask reads
   as air; a dark overlay reads as a tarpaulin. */
.hac-hero__media{ inset:0 0 0 auto; width:66%; z-index:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.32) 20%, #000 54%);
          mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.32) 20%, #000 54%); }
.hac-hero__media:not(:has(img.hac-hero__img[src*="hero-calm"])){
  background-image:url("hello-auto-hero-calm.jpg");
  background-size:cover; background-position:center 48%; background-repeat:no-repeat;
  transform:scale(1.04); animation:hac-drift 34s ease-out forwards;
}
.hac-hero__media img:not(.hac-hero__img),
.hac-hero__media img.hac-hero__img:not([src*="hero-calm"]){ display:none !important; }
.hac-hero__media img.hac-hero__img{
  width:100%; height:100%; object-fit:cover; object-position:center 48%; display:block; }

/* A whisper of the page's own colour over the left, so a line of type
   never has to compete with the water. */
.hac-hero__scrim{ z-index:1;
  background:linear-gradient(100deg,
    rgba(248,251,255,.96) 0%, rgba(248,251,255,.90) 26%,
    rgba(248,251,255,.46) 44%, rgba(248,251,255,.06) 60%,
    rgba(248,251,255,0) 72%); }

.hac-hero__inner{ padding:clamp(40px,5vw,72px) 24px; }
.hac-hero__text{ max-width:min(680px, 94%);
  display:flex; flex-direction:column; align-items:flex-start; }

.hac-hero__eyebrow{
  margin:0 0 20px; padding:8px 16px; border-radius:999px;
  background:#fff; border:1px solid #cfe0f6;
  box-shadow:0 2px 10px rgba(11,99,229,.10); backdrop-filter:none;
  font-size:12.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:#0b4bb0; }

/* ---- the promise ---- */
.hac-hero__promise,
.hac-hero__text:not(:has(.hac-hero__promise))::before{
  display:block; margin:0 0 12px;
  color:#0b1a2e; font-weight:800; letter-spacing:-.032em; line-height:1.03;
  font-size:clamp(34px, 4.9vw, 62px);
  text-shadow:none; max-width:13.5em; text-wrap:balance;
}
.hac-hero__text:not(:has(.hac-hero__promise))::before{
  content:"Great cars. Fair prices. No pressure.";
}
.hac-hero__promise-last,
.hac-hero__text:not(:has(.hac-hero__promise))::after{
  display:block; margin:0 0 22px;
  color:#0b63e5; font-weight:800; letter-spacing:-.02em; line-height:1.1;
  font-size:clamp(21px, 2.4vw, 31px); text-shadow:none;
}
.hac-hero__text:not(:has(.hac-hero__promise))::after{
  content:"Test drive it before you buy it.";
}
.hac-hero__text > .hac-hero__eyebrow{ order:1; }
.hac-hero__text:not(:has(.hac-hero__promise))::before{ order:2; }
.hac-hero__text:not(:has(.hac-hero__promise))::after{ order:3; }
.hac-hero__text > .hac-hero__promise{ order:2; }
.hac-hero__text > .hac-hero__promise-last{ order:3; }
.hac-hero__text > h1{ order:4; }
.hac-hero__text > .hac-hero__sub{ order:5; }
.hac-hero__text > .hac-hero__cta{ order:6; }

/* Still the heading Google reads; just no longer the loudest thing. */
.hac-hero h1{
  margin:0 0 15px; color:#4a5a70;
  font-size:clamp(17px, 1.5vw, 21px); font-weight:600;
  letter-spacing:0; line-height:1.35; text-shadow:none; }
.hac-hero__place{ display:inline; color:#0b63e5; }

.hac-hero__sub{
  display:block; margin:0 0 28px; max-width:46ch; color:#3b4a5f;
  font-size:clamp(16.5px, 1.3vw, 18.5px); line-height:1.62; text-shadow:none; }

.hac-hero__cta{ display:flex; flex-wrap:wrap; gap:14px; }
.hac-hero__cta .hac-btn{ min-height:60px; padding:0 32px; font-size:17.5px; border-radius:12px; }
.hac-hero__cta .hac-btn--primary{ box-shadow:0 12px 30px rgba(11,99,229,.30); }
/* The second button was white-on-transparent, which was invisible the
   moment the ground turned light. */
.hac-hero__cta .hac-btn--onnavy{
  background:#fff; border:1px solid #c7d7ec; color:#0b1a2e !important;
  backdrop-filter:none; box-shadow:0 2px 10px rgba(11,26,46,.06); }
.hac-hero__cta .hac-btn--onnavy:hover{
  background:#fff; border-color:#0b63e5; color:#0b63e5 !important; }

/* ---- no counts anywhere ---- */
.hac-hero__cta .hac-btn b{ display:none; }
.hac-hero:not(:has(.hac-hero__promise)) + .hac-stats .hac-stat:first-child{ display:none; }
.hac-hero:not(:has(.hac-hero__promise)) + .hac-stats .hac-stats__grid{
  grid-template-columns:repeat(3,minmax(0,1fr)); }
.hac-hero:not(:has(.hac-hero__promise)) + .hac-stats .hac-stat:nth-child(2){
  padding-left:0; border-left:0; }

/* ---- the band of facts ---- */
.hac-stats{ background:var(--navy-2); }
.hac-stats .hac-wrap{ padding-top:0; padding-bottom:0; }
.hac-stat{ padding:21px 26px 21px 0; font-size:15.5px; }
.hac-stat__icon{ width:32px; height:32px; }

/* ---- phones: the picture becomes a band under the words ---- */
@media (max-width:900px){
  .hac-hero{ min-height:0; align-items:flex-start; padding-bottom:42vw; }
  .hac-hero__media{ inset:auto 0 0 0; width:100%; height:46vw;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 15%, #000 40%);
            mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 15%, #000 40%); }
  .hac-hero__media:not(:has(img.hac-hero__img[src*="hero-calm"])){
    background-image:url("hello-auto-hero-calm-sm.jpg");
    background-position:64% 52%; animation:none; transform:none; }
  .hac-hero__scrim{ display:none; }
  .hac-hero__inner{ padding:30px 18px 10px; }
  .hac-hero__text{ max-width:100%; }
  .hac-hero__promise,
  .hac-hero__text:not(:has(.hac-hero__promise))::before{ max-width:none; font-size:clamp(30px,7.8vw,42px); }
  .hac-hero__sub{ display:block; font-size:16px; margin:0 0 20px; }
  .hac-hero__cta .hac-btn{ flex:1 1 100%; min-height:54px; font-size:16.5px; }
}
@media (max-width:560px){
  .hac-hero{ padding-bottom:46vw; }
  .hac-hero__media{ height:50vw; }
  .hac-hero__promise,
  .hac-hero__text:not(:has(.hac-hero__promise))::before{ font-size:clamp(28px,8.4vw,38px); }
  .hac-hero__promise-last,
  .hac-hero__text:not(:has(.hac-hero__promise))::after{ font-size:18.5px; margin-bottom:16px; }
  .hac-hero h1{ font-size:16px; }
}

@supports not selector(:has(*)){
  .hac-hero__media{ background:url("hello-auto-hero-calm.jpg") center/cover no-repeat; }
}

@media (prefers-reduced-motion:reduce){
  .hac-hero__media:not(:has(img.hac-hero__img[src*="hero-calm"])){ animation:none; transform:none; }
}


/* ====================================================================
   THE MENU IN BOXES, AND THE LOGO IN THE BACKGROUND -- 2026-09-13
   ====================================================================

   The Owner asked for two things: every menu item and the phone number
   in light blue boxes, and the logo sitting in the background of the
   home page.

   THE BOXES widened the menu enough to run under the logo, so the logo
   column is given the width it was always overflowing (the image is
   176px wide inside a 135px box) and the menu is nudged right. The
   theme also draws a 2px hover bar as `a::before`, absolutely
   positioned against the old geometry; with padding on the link it
   landed through the middle of the word, so it is switched off -- the
   box is now the indicator.

   THE LOGO is the file the header already uses, so nothing new is
   downloaded. It is white line-art on a solid blue field, which cannot
   be laid over a pale page as-is. `grayscale(1) contrast(14) invert(1)`
   turns that into black art on a white field -- a threshold, done with
   filters -- and `mix-blend-mode:multiply` then drops the white field
   out completely, leaving only the drawing. The background-size and
   position crop to the waving figure alone: the wordmark is already in
   the header two inches above, and repeating it reads as a mistake.
   ==================================================================== */

@media (min-width:992px){
  .header-navibox-1{ width:210px !important; }
  .header-navibox-1 img{ max-width:180px !important; height:auto !important; }
  .header-navibox-2{ padding-left:18px !important; }

  html header.header .main-menu > li > a{
    display:inline-block !important; height:auto !important;
    padding:9px 13px !important; margin:3px 2px !important;
    border-radius:10px !important;
    background:#e8f2fe !important; color:#0b3e8f !important;
    border:1px solid #cfe0f6 !important;
    font-size:15px !important; font-weight:700 !important; line-height:1.2 !important;
    box-shadow:none !important; text-decoration:none !important;
    transition:background .15s ease, border-color .15s ease, color .15s ease;
  }
  html header.header .main-menu > li > a::before,
  html header.header .main-menu > li > a::after,
  html header.header .main-menu > li::before{ display:none !important; content:none !important; }

  html header.header .main-menu > li > a:hover,
  html header.header .main-menu > li > a:focus{
    background:#d6e8fd !important; color:#0b63e5 !important; border-color:#9cc6f7 !important;
    box-shadow:none !important; }
  html header.header .main-menu > li.current-menu-item > a{
    background:#cfe4ff !important; color:#0a3f96 !important;
    border-color:#9cc6f7 !important; box-shadow:none !important; }

  /* The phone is a light blue box too, as asked, but a heavier border
     keeps it findable -- it is the one thing on this page that turns a
     visitor into a conversation. */
  html header.header .main-menu > li.ha-header-cta-li{ margin-left:8px !important; }
  html header.header .main-menu > li.ha-header-cta-li > a.ha-header-cta{
    background:#e8f2fe !important; color:#0b3e8f !important;
    border:1.5px solid #7db3f5 !important; border-radius:10px !important;
    padding:9px 15px !important; margin:3px 2px !important; height:auto !important;
    font-size:15px !important; font-weight:800 !important; box-shadow:none !important; }
  html header.header .main-menu > li.ha-header-cta-li > a.ha-header-cta:hover{
    background:#0b63e5 !important; color:#fff !important; border-color:#0b63e5 !important; }
}

/* The logo used to be drawn here, pinned to the bottom of the hero.
   The hero is taller than a laptop window, so the mark slid in and out
   of view as the page scrolled and never sat anywhere on purpose. It
   now lives further down the page -- see the 2026-09-14 block at the
   end of this file. */


/* ====================================================================
   EVEN BOXES, FULL ROWS, AND SOME COLOUR -- 2026-09-14
   ====================================================================

   Four things the Owner counted on the live page, in his order.

   1. THE MENU BOXES were as wide as their words, so "News" was a small
      box and "Financing" a big one. They are one width now. The phone
      number keeps its own width -- a telephone number cannot be
      squeezed into the width of the word "About" without breaking, and
      a broken phone number is worse than an uneven row.

   2. THE LOGO came out of the hero. It was anchored to the bottom of a
      section taller than the window, so it slid in and out of view as
      the page scrolled and never sat anywhere on purpose. It now sits
      still, whole, and faint behind "A local dealership, not a listings
      page" -- far enough down to be background rather than decoration,
      which is what he asked for.

   3. THE RAGGED ROW. The grid is four cards wide and the template was
      still counting in threes, so twelve published cars became two full
      rows and one card alone beside three empty cells. The template fix
      shows whole rows of four; the rules below are the belt to that
      braces -- whatever number of cards arrives, any card that would be
      stranded on the last row is hidden, so the block is a rectangle at
      every width even before the template lands.

   4. COLOUR. Body styles are now a real car off this lot under a
      coloured band, and the panels down the page carry a small family
      of accents -- blue, green, amber, violet -- instead of four
      identical blue chips. Enough to have a pulse; not so much that it
      stops looking like one dealership.
   ==================================================================== */

/* ---- 1. one width for every menu box ---- */
/* Only where there is room for it. Between 992 and 1199 the container is
   narrow enough that equal boxes push the menu under the logo, so there
   the boxes stay compact and the logo column gives a little back. */
@media (min-width:992px) and (max-width:1199px){
  html header.header .main-menu > li:not(.ha-header-cta-li) > a{
    min-width:0 !important; padding:8px 10px !important; font-size:14px !important; }
  html header.header .main-menu > li.ha-header-cta-li > a.ha-header-cta{
    padding:8px 12px !important; font-size:14px !important; }
  .header-navibox-1{ width:196px !important; }
  .header-navibox-1 img{ max-width:168px !important; }
}
@media (min-width:1200px){
  html header.header .main-menu > li:not(.ha-header-cta-li) > a{
    min-width:116px !important; text-align:center !important; }
}

/* ---- 2. the logo, still and far down ---- */
/* `:has()` rather than "the third section", because a section identified
   by its position stops being the right section the moment anything
   above it changes. This is the block with the four tiles. */
.hac-section:has(.hac-tiles){ position:relative; isolation:isolate; overflow:hidden; }
.hac-section:has(.hac-tiles)::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:50%; top:44%; transform:translate(-50%,-50%);
  width:min(760px,84vw); aspect-ratio:466/222;
  background:url("2024/05/Hello-Auto-GS-Logo-600x450-1.jpg") center/contain no-repeat;
  filter:grayscale(1) contrast(14) invert(1);
  mix-blend-mode:multiply;
  opacity:.065;
}
.hac-section:has(.hac-tiles) > *{ position:relative; z-index:1; }
@media (max-width:700px){
  .hac-section:has(.hac-tiles)::before{ width:92vw; opacity:.055; }
}

/* ---- 3. full rows, always ---- */
.hac-grid--3{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
@media (max-width:1000px){ .hac-grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } }
@media (max-width:560px){ .hac-grid--3{ grid-template-columns:1fr; gap:18px; } }

/* Hide whatever would be stranded on an incomplete last row. At four
   across that is one, two or three cards; at two across it is one. */
@media (min-width:1001px){
  .hac-grid--3 > :nth-child(4n+1):nth-last-child(1),
  .hac-grid--3 > :nth-child(4n+1):nth-last-child(2),
  .hac-grid--3 > :nth-child(4n+2):nth-last-child(1),
  .hac-grid--3 > :nth-child(4n+1):nth-last-child(3),
  .hac-grid--3 > :nth-child(4n+2):nth-last-child(2),
  .hac-grid--3 > :nth-child(4n+3):nth-last-child(1){ display:none !important; }
}
@media (min-width:561px) and (max-width:1000px){
  .hac-grid--3 > :nth-child(2n+1):nth-last-child(1){ display:none !important; }
}

/* ---- 4a. body styles: a real car, and a colour ---- */
/* Scoped to the new markup so the old tiles are untouched until the
   template lands. */
.hac-types:has(.hac-type__photo){
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  max-width:1000px; margin:0 auto; gap:22px; }
.hac-type:has(.hac-type__photo){
  display:block; padding:0; min-height:0; gap:0; overflow:hidden;
  border:1px solid var(--line); background:#fff; }
.hac-type:has(.hac-type__photo):hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.hac-type__photo{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--surface); }
.hac-type__photo img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .45s ease; }
.hac-type:hover .hac-type__photo img{ transform:scale(1.06); }
.hac-type__photo svg{ width:54px; height:54px; margin:22px auto; display:block; color:var(--muted); }
.hac-type__name{ display:block; padding:15px 18px; color:#fff !important;
  font-size:18.5px; font-weight:800; letter-spacing:-.01em; }
.hac-type:hover .hac-type__name{ color:#fff !important; }

.hac-type:nth-child(4n+1) .hac-type__name{ background:linear-gradient(100deg,#0b63e5,#3b8cff); }
.hac-type:nth-child(4n+2) .hac-type__name{ background:linear-gradient(100deg,#0b8a5e,#22c58a); }
.hac-type:nth-child(4n+3) .hac-type__name{ background:linear-gradient(100deg,#b4530a,#f0a52a); }
.hac-type:nth-child(4n+4) .hac-type__name{ background:linear-gradient(100deg,#5b28c4,#9a7bf0); }

/* Until the template lands the old tiles at least stop being three
   identical grey outlines. */
.hac-type:not(:has(.hac-type__photo)){ border-top:4px solid var(--accent); }
.hac-type:not(:has(.hac-type__photo)):nth-child(4n+2){ border-top-color:#0b8a5e; }
.hac-type:not(:has(.hac-type__photo)):nth-child(4n+3){ border-top-color:#d98315; }
.hac-type:not(:has(.hac-type__photo)):nth-child(4n+4){ border-top-color:#6d28d9; }

/* ---- 4b. the panels down the page ---- */
.hac-tiles .hac-tile:nth-child(4n+2) .hac-tile__icon{ background:#e2f7ee; color:#0b8a5e; }
.hac-tiles .hac-tile:nth-child(4n+3) .hac-tile__icon{ background:#fdf1de; color:#b4650a; }
.hac-tiles .hac-tile:nth-child(4n+4) .hac-tile__icon{ background:#efe8fe; color:#5b28c4; }

.hac-steps li{ position:relative; overflow:hidden; }
.hac-steps li::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:var(--accent); }
.hac-steps li:nth-child(3n+2) > span{ background:#0b8a5e; }
.hac-steps li:nth-child(3n+2)::before{ background:#0b8a5e; }
.hac-steps li:nth-child(3n+3) > span{ background:#b4650a; }
.hac-steps li:nth-child(3n+3)::before{ background:#b4650a; }