/* ==========================================================================
   OPPOSITE LOCK — MERGED DESIGN SYSTEM  ("Direction C")
   Palette + light grounds  ....... Direction A (Brand Guidelines v2.0)
   Radii, softness, containers,
   icon language, motion  ......... Direction B
   Built as a WordPress / WooCommerce / Elementor reference build.
   ========================================================================== */

:root{
  /* ---- SOURCE (Brand Guidelines v2.0) ---- */
  --navy:#002D52;
  --red:#FF1F2A;
  --deep:#001D36;
  --mid:#0C4372;

  /* ---- SURFACES (light-led) ---- */
  --white:#FFFFFF;
  --bone:#F4F1EA;
  --bone2:#EFEBE1;
  --bone3:#E7E2D6;
  --pale:#EAEEF7;
  --pale2:#F5F7FC;

  /* ---- TYPE & INTERFACE ---- */
  --graphite:#2A2F3A;
  --granite:#4A4F5A;
  --dust:#8A8F99;
  --redhover:#D6111B;
  --fit:#0F7B3E;

  /* ---- LINES ---- */
  --hair:rgba(0,45,82,.13);
  --hair2:rgba(0,45,82,.07);
  --hairw:rgba(255,255,255,.14);

  /* ---- GEOMETRY (from Direction B) ---- */
  --r:18px;      /* cards, panels          */
  --r2:12px;     /* small tiles, thumbs    */
  --r3:999px;    /* pills, buttons, chips  */
  --rbig:26px;   /* hero + campaign boxes  */
  --ease:cubic-bezier(.16,1,.3,1);

  /* ---- ELEVATION ---- */
  --e1:0 2px 6px rgba(0,45,82,.06);
  --e2:0 18px 34px -20px rgba(0,45,82,.30);
  --e3:0 28px 50px -26px rgba(0,45,82,.40);

  --display:'Archivo Black',Impact,sans-serif;
  --body:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--white);color:var(--graphite);
  -webkit-font-smoothing:antialiased;font-size:14px;line-height:1.6}
img{max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select{font-family:inherit;font-size:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--navy);color:#fff}
/* Widened from 1260 to 1440 at the client's request (27 Aug): with five nav
   tabs, the All button, the search field and the quote pill on one row, 1260
   was squashing them. Every grid inherits the extra width, so the whole page
   breathes rather than just the header. Gutter goes 36 -> 40 to match. */
.container{max-width:1440px;margin:0 auto;padding:0 40px}

/* ==========================================================================
   1. UTILITY / TOP LINE
   ========================================================================== */
.topline{background:var(--navy);color:rgba(255,255,255,.72);overflow:hidden}
.ticker{display:flex;white-space:nowrap;animation:slide 38s linear infinite}
.ticker span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;padding:9px 0}
.ticker i{font-style:normal;color:var(--red);padding:0 22px}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==========================================================================
   2. HEADER — light, blurred, pill nav, circular icons  (B's icon language)
   ========================================================================== */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--hair)}
.hdr .container{display:flex;align-items:center;gap:20px;height:80px}
.logo{display:block;flex-shrink:0;line-height:0}
.logo img{display:block;height:56px;width:auto}
.nav{display:flex;gap:4px;margin-left:6px}
.nav a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  color:var(--granite);padding:9px 17px;border-radius:var(--r3);
  transition:.22s var(--ease);white-space:nowrap}
.nav a:hover{background:var(--bone);color:var(--navy)}
.nav a.on{background:var(--navy);color:#fff}
/* Explore leaves the site, so it says so */
.extico{opacity:.5;flex-shrink:0}
.nav a:hover .extico{opacity:.9}
.tools{margin-left:auto;display:flex;align-items:center;gap:9px}
.srch{display:flex;align-items:center;gap:9px;background:var(--white);
  border:1px solid var(--hair);border-radius:var(--r3);padding:0 18px;height:42px;
  width:230px;transition:.25s var(--ease);position:relative;flex-shrink:0}
.srch:focus-within{width:320px;border-color:var(--navy);box-shadow:var(--e1)}
.srch input{border:0;outline:0;background:none;width:100%;font-size:12.5px}
.srch input::placeholder{color:var(--dust)}
.srch .mag{color:var(--dust);flex-shrink:0}
.ico{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  background:var(--white);border:1px solid var(--hair);color:var(--navy);
  position:relative;transition:.22s var(--ease);flex-shrink:0}
.ico:hover{transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(0,45,82,.4);
  border-color:transparent}
.ico .badge{position:absolute;top:-3px;right:-3px;background:var(--red);color:#fff;
  font-family:var(--mono);font-size:8.5px;font-weight:700;min-width:18px;height:18px;
  padding:0 4px;border-radius:var(--r3);display:grid;place-items:center;line-height:1}

/* ---- "All" button + category sidebar (client, Aug 27) ----
   The button sits before the logo: it is the first thing you reach for, and on
   a phone it is the only navigation there is, so it earns the leftmost slot.
   The panel it opens was a full-width dropdown showing everything at once; it
   is now a left drawer with a search field on top and the eight systems
   collapsed below. Eight systems and fifty-odd children is a wall to read, and
   a wall is slower than a list even though it shows more.
   One component now serves every width, so there is no separate mobile menu. */
.allbtn{display:flex;align-items:center;gap:8px;flex-shrink:0;height:40px;
  padding:0 16px 0 13px;border-radius:var(--r3);background:var(--navy);color:#fff;
  font-size:12.5px;font-weight:700;transition:.22s var(--ease);cursor:pointer}
.allbtn:hover{background:var(--deep)}
.allbtn[aria-expanded="true"]{background:var(--red)}
.allbtn svg{flex-shrink:0}

.quotebtn{flex-shrink:0;white-space:nowrap}

/* the drawer itself */
html.side-locked,html.side-locked body{overflow:hidden}
.sidewrap{position:fixed;inset:0;z-index:200}
.scrim{position:absolute;inset:0;background:rgba(0,20,38,.5);opacity:0;
  transition:opacity .34s var(--ease)}
.sidewrap.open .scrim{opacity:1}
.side{position:absolute;left:0;top:0;bottom:0;width:390px;max-width:90vw;
  background:#fff;display:flex;flex-direction:column;
  transform:translateX(-101%);transition:transform .34s var(--ease);
  box-shadow:0 0 70px rgba(0,29,54,.34)}
.sidewrap.open .side{transform:none}

.side-top{background:var(--navy);color:#fff;padding:18px 20px 20px;flex-shrink:0}
.side-row{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:15px}
.side-ttl{font-family:var(--display);font-style:italic;font-size:21px;
  text-transform:uppercase;letter-spacing:-.02em}
.side-x{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.1);color:#fff;font-size:22px;line-height:1;
  transition:.2s var(--ease)}
.side-x:hover{background:var(--red)}
.side-srch{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);border-radius:var(--r3);
  padding:0 16px;height:44px;position:relative}
.side-srch:focus-within{background:#fff}
.side-srch .mag{color:rgba(255,255,255,.6);flex-shrink:0}
.side-srch:focus-within .mag{color:var(--dust)}
.side-srch input{border:0;outline:0;background:none;width:100%;font-size:13px;color:#fff}
.side-srch input::placeholder{color:rgba(255,255,255,.55)}
.side-srch:focus-within input{color:var(--navy)}
/* the field inverts to white on focus, so the placeholder has to come with it */
.side-srch:focus-within input::placeholder{color:var(--dust)}
.side-srch .sugg{top:52px;left:0;right:0}

.side-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding-bottom:14px}
.side-nav{display:none}
.side-h{font-family:var(--mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dust);padding:20px 20px 9px}

/* one collapsed row per system */
.sd{border-bottom:1px solid var(--hair2)}
.sd summary{display:flex;align-items:center;gap:12px;padding:14px 20px;
  cursor:pointer;list-style:none;transition:background .16s}
.sd summary::-webkit-details-marker{display:none}
.sd summary:hover{background:var(--bone)}
.sd-ic{width:30px;height:26px;flex-shrink:0;display:grid;place-items:center}
.sd-ic svg{width:28px;height:24px;color:var(--mid);opacity:.55}
.sd-n{font-weight:800;font-size:13.5px;color:var(--navy);flex:1;min-width:0}
.sd summary em{font-family:var(--mono);font-style:normal;font-size:9px;
  letter-spacing:.1em;color:var(--dust);flex-shrink:0}
.sd-chev{color:var(--dust);display:grid;place-items:center;flex-shrink:0;
  transform:rotate(90deg);transition:transform .26s var(--ease)}
.sd[open] .sd-chev{transform:rotate(-90deg);color:var(--red)}
.sd[open] summary{background:var(--bone)}
.sd[open] .sd-ic svg{color:var(--navy);opacity:.8}
.sd-body{padding:6px 20px 18px 62px;background:var(--bone)}
.sd-all{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800;
  color:var(--red);padding:5px 0 9px}
.sd-all span{transition:transform .22s var(--ease)}
.sd-all:hover span{transform:translateX(4px)}
.sd-sub{display:block;font-size:12.5px;color:var(--granite);padding:6px 0;
  transition:.16s var(--ease)}
.sd-sub:hover{color:var(--navy);transform:translateX(3px)}
.sd-br{margin-top:12px;padding-top:12px;border-top:1px solid var(--bone3)}
.sd-br>span{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dust);margin-bottom:8px}
.sd-br a{display:inline-block;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mid);
  border:1px solid var(--hair);background:#fff;border-radius:var(--r3);
  padding:4px 9px;margin:0 5px 5px 0;transition:.18s var(--ease)}
.sd-br a:hover{background:var(--navy);border-color:var(--navy);color:#fff}

/* flat rows: vehicles, deals, the odds and ends */
.sd-flat{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 20px;font-size:12.5px;font-weight:600;color:var(--navy);
  border-bottom:1px solid var(--hair2);transition:.16s}
.sd-flat:hover{background:var(--bone);color:var(--red)}
.sd-flat em{font-family:var(--mono);font-style:normal;font-size:9px;color:var(--dust)}
.sd-flat-l{color:var(--red);font-weight:800;border-bottom:0}

.side-foot{flex-shrink:0;padding:16px 20px;border-top:1px solid var(--hair);
  background:#fff}

.mflag{font-family:var(--mono);font-size:7.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;background:var(--fit);color:#fff;border-radius:var(--r3);
  padding:2px 6px;vertical-align:1px;margin-left:4px}
.mflag-hot{background:var(--red)}

/* search suggestions */
.sugg{position:absolute;top:46px;left:0;right:0;background:#fff;border:1px solid var(--hair);
  border-radius:var(--r);box-shadow:var(--e3);padding:8px;display:none;z-index:80;
  max-height:330px;overflow:auto}
.sugg.open{display:block}
.sugg a{display:flex;gap:12px;align-items:center;padding:9px 10px;border-radius:var(--r2);
  transition:.16s}
.sugg a:hover{background:var(--bone)}
.sugg .sg-ic{width:38px;height:34px;border-radius:8px;background:var(--bone2);
  display:grid;place-items:center;flex-shrink:0}
.sugg .sg-ic svg{width:24px;height:24px;color:var(--mid)}
/* the name and the meta line stack; without display:block they run together
   in the narrower sidebar search */
.sugg a>span{min-width:0}
.sugg .sg-n{display:block;font-size:12px;font-weight:700;color:var(--navy);
  line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sugg .sg-m{display:block}
.sugg .sg-m{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;color:var(--dust);
  margin-top:3px;text-transform:uppercase}
.sugg .sg-p{margin-left:auto;font-weight:800;font-size:12px;color:var(--navy);white-space:nowrap}
.sugg .sg-empty{padding:14px 12px;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dust)}

/* ==========================================================================
   3. FITMENT PILL — the signature component (B's container, A's colour)
   ========================================================================== */
/* Sits in the flow, not pinned. On the homepage it lands between the hero and
   the counters; elsewhere it sits under the breadcrumb. Padding is even on both
   sides: 12px on the shell, plus 12px on the label, so the optical inset matches
   the status pill's on the right. */
.fitpill{padding:16px 0 0}
.fitpill .inner{background:var(--navy);border-radius:var(--r3);
  padding:10px 12px;display:flex;align-items:center;gap:10px;color:#fff;
  box-shadow:0 16px 36px -22px rgba(0,29,54,.55)}
.fitpill .k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:#fff;white-space:nowrap;opacity:.85;
  padding:0 6px 0 12px}
.fitpill select{appearance:none;-webkit-appearance:none;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);border-radius:var(--r3);color:#fff;
  padding:9px 34px 9px 16px;font-size:12.5px;font-weight:600;cursor:pointer;
  transition:.2s var(--ease);min-width:118px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23fff' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round' opacity='.7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.fitpill select:hover:not(:disabled){background-color:rgba(255,255,255,.2)}
.fitpill select:disabled{opacity:.4;cursor:not-allowed}
.fitpill select option{color:var(--graphite)}
.fitpill .go{background:var(--red);color:#fff;font-weight:800;font-size:11.5px;
  letter-spacing:.05em;text-transform:uppercase;padding:12px 22px;border-radius:var(--r3);
  white-space:nowrap;transition:.2s var(--ease)}
.fitpill .go:hover{background:var(--redhover);transform:translateY(-1px)}
.fitpill .st{margin-left:auto;display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  color:rgba(255,255,255,.72);white-space:nowrap;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r3);padding:10px 18px}
.fitpill .st b{color:#fff;font-weight:500}
.fitpill .clr{color:rgba(255,255,255,.5);border-bottom:1px solid rgba(255,255,255,.3);
  font-size:9px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.fitpill .clr:hover{color:#fff}
.livedot{width:7px;height:7px;border-radius:50%;background:var(--red);flex-shrink:0;
  animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,31,42,.55)}
  50%{box-shadow:0 0 0 7px rgba(255,31,42,0)}}

/* ==========================================================================
   4. BUTTONS — fully rounded (B), navy/red only (A)
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:800;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;
  padding:15px 28px;border-radius:var(--r3);border:1.5px solid transparent;
  cursor:pointer;transition:.28s var(--ease);position:relative;overflow:hidden;
  text-align:center}
.btn .arw{transition:.28s var(--ease)}
.btn:hover .arw{transform:translateX(5px)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--redhover);transform:translateY(-2px);
  box-shadow:0 14px 28px -12px rgba(255,31,42,.55)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{transform:translateY(-2px);box-shadow:0 14px 28px -12px rgba(0,45,82,.5)}
.btn-line{border-color:var(--hair);color:var(--navy);background:#fff}
.btn-line:hover{border-color:var(--navy);transform:translateY(-2px);box-shadow:var(--e1)}
.btn-ghost{border-color:rgba(255,255,255,.36);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-sm{padding:11px 20px;font-size:11px}
/* "Ask us" is short; hold a floor so it does not read as stubby next to the
   long outline button beside it */
.callout .btn-sm{min-width:124px}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn-red:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);
  transform:skewX(-20deg)}
.btn-red:hover:after{animation:sheen .8s var(--ease)}
@keyframes sheen{to{left:130%}}

/* ==========================================================================
   5. TYPE SCALE
   ========================================================================== */
.lab{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);font-weight:500;display:inline-block}
.lab-d{color:var(--dust)}
.lab-n{color:var(--navy)}
.lab-w{color:rgba(255,255,255,.6)}
.spec{font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--granite)}
.h-hero{font-family:var(--display);font-style:italic;font-size:64px;line-height:.9;
  letter-spacing:-.032em;text-transform:uppercase}
.h-sec{font-family:var(--display);font-style:italic;font-size:40px;line-height:.96;
  letter-spacing:-.025em;text-transform:uppercase;color:var(--navy)}
.h-card{font-weight:800;font-size:16px;line-height:1.24;color:var(--navy)}
.sec{padding:82px 0}
.sec-tight{padding:44px 0}
.sec-bone{background:var(--bone)}
.sec-pale{background:var(--pale2)}
.sec-navy{background:var(--navy);color:#fff}
.sec-navy .h-sec{color:#fff}
.sec-navy .lead{color:rgba(255,255,255,.74)}
.sechead{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;
  margin-bottom:38px;flex-wrap:wrap}
.sechead .lead{max-width:520px;font-size:14.5px;color:var(--granite);margin-top:14px}
.link{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy);font-weight:700;display:inline-flex;gap:8px;align-items:center;
  padding-bottom:4px;border-bottom:1.5px solid var(--navy);transition:.24s var(--ease)}
.link:hover{gap:14px;color:var(--red);border-color:var(--red)}
.link-w{color:#fff;border-color:rgba(255,255,255,.5)}
.link-w:hover{color:#fff;border-color:#fff}
.crumbs{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dust);padding:22px 0 0}
.crumbs a{color:var(--granite)}
.crumbs a:hover{color:var(--red)}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(24px);
  transition:opacity .75s var(--ease),transform .75s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-1{transition-delay:.06s}.rv-2{transition-delay:.12s}.rv-3{transition-delay:.18s}
.rv-4{transition-delay:.24s}.rv-5{transition-delay:.30s}.rv-6{transition-delay:.36s}

/* ==========================================================================
   6. HERO — full-bleed band (client, Aug 27) with container-aligned copy
   --------------------------------------------------------------------------
   Originally an inset rounded box, per Direction B. The client asked for
   full-width heroes on every page, so the background now runs to the viewport
   edge while the copy stays on the 1440 container — that keeps the headline
   aligned with the logo and the nav above it instead of drifting out to the
   left edge of a wide monitor. Side radii come off: a band that touches both
   edges cannot have corners. Every other box keeps its 26 px radius, so the
   softer geometry survives everywhere except the four full-bleed bands
   (hero, finder, category head, campaign) and the CTA.
   ========================================================================== */
.hero{padding:0;overflow:hidden}
.herobox{background:var(--deep);border-radius:0;position:relative;
  overflow:hidden;color:#fff;min-height:600px;display:flex;align-items:flex-end}
/* the container is the flex child now, so it has to fill the band */
.herobox>.container,.campbox>.container{width:100%;position:relative}
/* Photographic ground: a loaded 79 Series at golden hour, with a navy scrim so
   the display type keeps its contrast. Scrim is navy-biased, not neutral black,
   so the photograph sits inside the palette rather than beside it. */
.herobox .bg{position:absolute;inset:0;
  background-image:url('img/hero-79-series.jpg');
  background-size:cover;background-position:68% 62%}
.herobox .bg:after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,20,38,.94) 0%,rgba(0,20,38,.80) 34%,
             rgba(0,20,38,.30) 66%,rgba(0,29,54,.36) 100%),
             linear-gradient(0deg,rgba(0,15,30,.72) 0%,transparent 46%)}
.hero-in{position:relative;z-index:3;padding:70px 0 62px;max-width:700px}
.hero-in .h-hero{margin:20px 0 22px}
.hero-in .h-hero .ac{color:var(--red)}
.hero-in p{font-size:16px;color:rgba(255,255,255,.78);max-width:430px;margin-bottom:32px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-veh{display:none}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.hero-terr{display:none}
.hero-badge{position:absolute;right:40px;top:48px;z-index:4;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(8px);border-radius:var(--r3);padding:10px 20px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:center;gap:10px}

/* counters */
.counts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
.count{background:#fff;border:1px solid var(--hair);border-radius:var(--r);
  padding:24px 26px;transition:.3s var(--ease)}
.count:hover{transform:translateY(-4px);box-shadow:var(--e2);border-color:transparent}
.count .v{font-family:var(--display);font-style:italic;font-size:38px;color:var(--navy);
  line-height:1;letter-spacing:-.03em}
.count .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dust);margin-top:10px}

/* ==========================================================================
   6b. POPULAR VEHICLES — three tiles, no carousel (client, Aug 27)
   The visual entry to the fitment engine, sitting directly under the fitment
   bar: the bar is for the customer who knows their variant, these tiles are for
   the one who would rather point at their truck. Artwork is a silhouette
   placeholder — cut-out photography drops into .pvt .art unchanged.
   ========================================================================== */
.pv{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pvt{background:#fff;border:1px solid var(--hair);border-radius:var(--rbig);
  padding:26px 26px 24px;display:block;text-align:center;position:relative;
  overflow:hidden;transition:.34s var(--ease)}
.pvt:hover{transform:translateY(-6px);box-shadow:var(--e3);border-color:transparent}
.pvt.on{border-color:var(--red);border-width:1.5px}
.pvt .art{height:146px;display:grid;place-items:center}
.pvt .art svg,.pvt .art img{width:100%;max-width:320px;height:auto;color:var(--navy);
  transition:.5s var(--ease)}
.pvt .art img{max-height:146px;object-fit:contain}
.pvt:hover .art svg,.pvt:hover .art img{transform:translateX(6px) scale(1.04)}
.pvt .mk{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dust)}
.pvt .n{font-family:var(--display);font-style:italic;font-size:25px;line-height:1;
  text-transform:uppercase;color:var(--navy);letter-spacing:-.022em;margin-top:9px}
.pvt .c{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--granite);margin-top:11px}
.pvt .cta{margin-top:16px;display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:700;color:var(--red)}
.pvt .cta span{transition:.28s var(--ease)}
.pvt:hover .cta span{transform:translateX(4px)}
.pvfoot{text-align:center;margin-top:30px}

/* ==========================================================================
   6c. SHOP BY VEHICLE PAGE — the grid behind "Browse the full catalogue"
   Same tile as the homepage trio, four across instead of three. A tile with a
   photograph and a tile with a silhouette are the same shape and the same
   height, so the grid does not go ragged while the shoot list is outstanding.
   ========================================================================== */
.vpage{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.vp{background:#fff;border:1px solid var(--hair);border-radius:var(--rbig);
  padding:20px 20px 18px;display:block;text-align:center;position:relative;
  overflow:hidden;transition:.34s var(--ease)}
.vp:hover{transform:translateY(-5px);box-shadow:var(--e3);border-color:transparent}
.vp.on{border-color:var(--red);border-width:1.5px}
.vp-art{height:118px;display:grid;place-items:center;margin-bottom:4px}
.vp-art svg,.vp-art img{width:100%;max-width:230px;height:auto;
  transition:.5s var(--ease)}
.vp-art img{max-height:118px;object-fit:contain}
/* the silhouette is a placeholder, so it sits back rather than competing with
   the photographed tiles beside it */
.vp:not(.vp-photo) .vp-art svg{color:var(--pale);max-width:200px}
.vp:hover .vp-art img,.vp:hover .vp-art svg{transform:scale(1.05)}
.vp-mk{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dust)}
.vp-n{font-family:var(--display);font-style:italic;font-size:19px;line-height:1.05;
  text-transform:uppercase;color:var(--navy);letter-spacing:-.02em;margin-top:7px}
.vp-c{font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--granite);margin-top:8px}
.vp-cta{margin-top:12px;display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;color:var(--red)}
.vp-cta span{transition:transform .26s var(--ease)}
.vp:hover .vp-cta span{transform:translateX(4px)}

/* ==========================================================================
   7. CATEGORY GRID — B's icon language, A's palette
   --------------------------------------------------------------------------
   Was a bento of mixed sizes. The client asked for eight equal tiles, 4 × 2
   (Aug 27), so tile size no longer carries merchandising weight — the "most
   fitted" flag and grid position do that job instead. Rows are taller than the
   old bento cell so an equal tile still has presence.
   ========================================================================== */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:208px;gap:16px}
.bx{border-radius:var(--r);overflow:hidden;position:relative;background:#fff;
  border:1px solid var(--hair);padding:26px;display:flex;flex-direction:column;
  justify-content:flex-end;transition:.34s var(--ease)}
.bx:hover{transform:translateY(-5px);box-shadow:var(--e3);border-color:transparent}
.bx .g{position:absolute;right:-14px;top:-6px;width:170px;opacity:.15;
  transition:.5s var(--ease);pointer-events:none;color:var(--navy)}
.b-deep .g,.b-navy .g,.b-mid .g{color:#fff}
.b-white .g,.b-pale .g{color:var(--navy)}
.bx:hover .g{transform:scale(1.09) rotate(-3deg);opacity:.22}
.bx .nm{font-family:var(--display);font-style:italic;font-size:22px;text-transform:uppercase;
  line-height:1;position:relative;z-index:2;letter-spacing:-.02em}
.bx .ct{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  margin-top:9px;position:relative;z-index:2;opacity:.72}
.bx .go{position:absolute;right:24px;top:24px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;font-size:15px;transition:.3s var(--ease);z-index:3}
.bx:hover .go{transform:rotate(-45deg)}
/* kept for the style guide's record of the original bento; unused on the page */
.b-w2{grid-column:span 2}
.b-h2{grid-row:span 2}
/* the "most fitted" flag is the merchandising lever now that sizes are equal */
.bx .flag{position:relative;z-index:2;display:inline-block;margin-bottom:8px}
/* tile colourways — navy family + red signal only */
.b-deep{background:linear-gradient(150deg,#0C4372,#001D36);color:#fff;border-color:transparent}
.b-deep .go{background:var(--red);color:#fff}
.b-navy{background:var(--navy);color:#fff;border-color:transparent}
.b-navy .go{background:var(--red);color:#fff}
.b-mid{background:linear-gradient(150deg,#12507F,#0C4372);color:#fff;border-color:transparent}
.b-mid .go{background:#fff;color:var(--navy)}
.b-pale{background:var(--pale);border-color:transparent}
.b-pale .nm{color:var(--navy)}.b-pale .ct{color:var(--granite)}
.b-pale .go{background:var(--navy);color:#fff}
.b-white .nm{color:var(--navy)}.b-white .ct{color:var(--granite)}
.b-white .go{background:var(--bone);color:var(--navy)}
.b-white:hover .go{background:var(--navy);color:#fff}

/* ==========================================================================
   8. PRODUCT CARDS — rounded, floating, pill tags, rotating add button
   ========================================================================== */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.pc{background:#fff;border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:.34s var(--ease);position:relative}
.pc:hover{transform:translateY(-6px);box-shadow:var(--e3);border-color:transparent}
.pshot{position:relative;aspect-ratio:4/3;background:linear-gradient(155deg,#fff,var(--bone2));
  display:grid;place-items:center;overflow:hidden}
.pshot>svg{width:auto;max-width:68%;max-height:76%;transition:.5s var(--ease)}
.pc:hover .pshot>svg{transform:scale(1.07) translateY(-3px)}
.pshot .code{position:absolute;left:14px;bottom:11px;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.07em;color:var(--dust)}
.tg{position:absolute;top:13px;left:13px;font-family:var(--mono);font-size:8.5px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;
  border-radius:var(--r3);z-index:2}
.tg-red{background:var(--red);color:#fff}
.tg-navy{background:var(--navy);color:#fff}
.tg-pale{background:var(--pale);color:var(--navy)}
.tg-bone{background:var(--bone3);color:var(--granite)}
.wish{position:absolute;top:13px;right:13px;width:30px;height:30px;border-radius:50%;
  background:#fff;border:1px solid var(--hair);display:grid;place-items:center;
  color:var(--dust);font-size:12px;opacity:0;transform:translateY(-6px);
  transition:.3s var(--ease);z-index:3}
.pc:hover .wish{opacity:1;transform:none}
.wish:hover,.wish.on{color:var(--red);border-color:var(--red)}
.quick{position:absolute;left:14px;right:14px;bottom:14px;background:var(--navy);color:#fff;
  text-align:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:10px;border-radius:var(--r3);opacity:0;
  transform:translateY(12px);transition:.32s var(--ease);z-index:3}
.pc:hover .quick{opacity:1;transform:none}
.pb{padding:18px 19px 20px;display:flex;flex-direction:column;flex:1}
.pbrand{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);margin-bottom:8px}
.fitl{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--fit);
  background:rgba(15,123,62,.08);padding:4px 10px;border-radius:var(--r3);
  margin-bottom:10px;align-self:flex-start}
.fitl .d{width:6px;height:6px;border-radius:50%;background:var(--fit)}
.fitl.no{color:var(--granite);background:var(--bone3)}
.fitl.no .d{background:var(--dust)}
.fitl.warn{color:var(--navy);background:var(--pale)}
.fitl.warn .d{background:var(--navy)}
.pname{font-weight:700;font-size:13.5px;line-height:1.35;color:var(--navy);
  margin-bottom:10px;min-height:37px}
.stars{color:var(--red);font-size:10px;letter-spacing:1px}
.stars span{color:var(--dust);font-family:var(--mono);font-size:9px;margin-left:6px;
  letter-spacing:.04em}
.pspec{font-family:var(--mono);font-size:9.5px;color:var(--granite);line-height:1.75;
  padding-top:11px;margin-top:11px;border-top:1px solid var(--hair2)}
.pfoot{margin-top:auto;padding-top:15px;display:flex;align-items:flex-end;
  justify-content:space-between;gap:10px}
.price{font-weight:800;font-size:19px;color:var(--navy);letter-spacing:-.015em}
.price small{display:block;font-family:var(--mono);font-size:8.5px;font-weight:400;
  color:var(--dust);letter-spacing:.09em;text-transform:uppercase;margin-top:4px}
.was{font-size:11.5px;color:var(--dust);text-decoration:line-through;font-weight:500}
.add{background:var(--bone);color:var(--navy);width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;font-size:17px;flex-shrink:0;transition:.28s var(--ease)}
.pc:hover .add{background:var(--red);color:#fff;transform:rotate(90deg)}
.add.done{background:var(--fit);color:#fff;transform:none!important}

/* ==========================================================================
   9. MARQUEE / BRAND STRIP
   ========================================================================== */
/* Brand strip. The nine partner marks are now knocked out to white and sit
   directly on the navy band — no white tiles (client, Aug 27).
   tools/knockout-logos.py does the recolour. Eight of the nine survive it
   cleanly; three of those come through as reversed badges, because their own
   artwork is white type inside a solid box, so the box becomes the white shape
   and the type reads navy through it. That is a legitimate mono treatment, not
   a defect.
   Tough Dog needed a different measure, not an exception. Its lockup IS a yellow
   shield, so measuring ink as "distance from white" inked the whole shield and
   produced a blob. Measuring it as darkness instead drops the shield and keeps
   what was printed on it, so the wordmark, the paw and the banner become the
   white shape. All nine now sit on the band with no holders.
   This also retires the Direction Plus orange workaround: that mark was always
   the reversed lockup, and reversed is exactly what the band now wants.
   The row is duplicated in the markup so the scroll loops seamlessly. */
.mq{background:var(--navy);color:#fff;padding:20px 0;overflow:hidden;border-radius:var(--r)}
.mq-in{display:flex;align-items:center;white-space:nowrap;animation:slide 34s linear infinite}
.mq-in b{font-family:var(--display);font-style:italic;font-size:26px;text-transform:uppercase;
  padding:0 26px;opacity:.92;letter-spacing:-.02em}
.mq-in i{color:var(--red);font-style:normal;font-size:16px;align-self:center}
.bt{flex:0 0 auto;height:74px;padding:0 24px;display:grid;place-items:center;
  opacity:.88;transition:.3s var(--ease)}
.bt img{max-height:52px;max-width:206px;width:auto;height:auto;display:block;
  object-fit:contain}
.bt:hover{opacity:1;transform:translateY(-3px)}
.mq:hover .mq-in{animation-play-state:paused}

/* ==========================================================================
   10. SPLIT / EDITORIAL / TRUST / JOURNAL
   ========================================================================== */
.split{display:grid;grid-template-columns:1.05fr .95fr;border-radius:var(--r);
  overflow:hidden;border:1px solid var(--hair);background:#fff}
.split .art{position:relative;min-height:420px;
  background:linear-gradient(150deg,#0C4372,#001D36);overflow:hidden}
.split .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block}
.split .cp{padding:56px 52px;display:flex;flex-direction:column;justify-content:center}
.split h3{font-family:var(--display);font-style:italic;font-size:33px;line-height:1;
  text-transform:uppercase;color:var(--navy);margin:16px 0;letter-spacing:-.025em}
.split p{color:var(--granite);font-size:14.5px;margin-bottom:26px}

.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tr{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:26px;
  transition:.3s var(--ease)}
.tr:hover{transform:translateY(-4px);box-shadow:var(--e2);border-color:transparent}
.tr .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  margin-bottom:16px;background:var(--pale);color:var(--navy)}
.tr .ic svg{width:21px;height:21px}
.tr .ic-fit{background:rgba(15,123,62,.1);color:var(--fit)}
.tr .ic-red{background:rgba(255,31,42,.09);color:var(--red)}
.tr h4{font-weight:800;font-size:14px;color:var(--navy);margin-bottom:7px}
.tr p{font-size:12.5px;color:var(--granite);line-height:1.55}

.jc{background:#fff;border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;
  transition:.34s var(--ease);display:block}
.jc:hover{transform:translateY(-5px);box-shadow:var(--e3);border-color:transparent}
.jart{aspect-ratio:16/10;position:relative;overflow:hidden;background:var(--deep)}
.jart svg{transition:.7s var(--ease)}
.jc:hover .jart svg{transform:scale(1.06)}
.jc .b{padding:22px}
.jc h4{font-weight:800;font-size:15px;color:var(--navy);line-height:1.28;margin:10px 0 9px}
.jc p{font-size:12.5px;color:var(--granite);line-height:1.55}

/* vehicle picker tiles */
.vgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.vt{border:1px solid var(--hair);border-radius:var(--r);padding:18px 14px;text-align:center;
  background:#fff;transition:.28s var(--ease);display:block}
.vt:hover{transform:translateY(-4px);box-shadow:var(--e2);border-color:transparent}
.vt.on{border-color:var(--red);border-width:1.5px}
.vt svg{width:100%;height:44px;color:var(--pale)}
.vt.on svg{color:#FFD9DB}
.vt .n{font-weight:800;font-size:12.5px;color:var(--navy);margin-top:8px}
.vt .c{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--dust);
  text-transform:uppercase;margin-top:3px}

/* promo boxes */
.promo{position:relative;border-radius:var(--r);overflow:hidden;padding:38px 40px;
  min-height:216px;display:flex;flex-direction:column;justify-content:center;
  transition:.34s var(--ease)}
.promo:hover{transform:translateY(-4px);box-shadow:var(--e3)}
.promo .g{position:absolute;right:-24px;bottom:-16px;width:270px;opacity:.5;
  transition:.5s var(--ease)}
.promo:hover .g{transform:scale(1.05)}
.promo .in{position:relative;z-index:2;max-width:340px}
.promo h3{font-family:var(--display);font-style:italic;font-size:29px;text-transform:uppercase;
  line-height:1.02;margin:12px 0;letter-spacing:-.025em}
.promo-sm{min-height:0;padding:22px 26px;flex-direction:row;align-items:center;gap:18px}
.promo-sm svg{width:80px;flex-shrink:0}
.promo-sm .t{font-weight:800;font-size:16.5px;margin-top:6px}

/* ---- locator control row: search + province on one line ---- */
.locbar{display:grid;grid-template-columns:1fr 210px;gap:12px;align-items:end;
  margin-bottom:18px}
/* input and select render a pixel apart on their own — pin both so the row
   reads as one control, not two that nearly line up */
.locbar input,.locbar .locsel{height:44px;padding-top:0;padding-bottom:0}
.locsel{width:100%;border:1px solid var(--hair);border-radius:var(--r3);
  padding:13px 40px 13px 18px;font-size:13px;background-color:#fff;color:var(--navy);
  font-weight:600;outline:0;appearance:none;-webkit-appearance:none;cursor:pointer;
  transition:.2s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23002D52' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.locsel:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,45,82,.08)}

/* ---- fitment centre map (homepage locator, right-hand side) ----
   Deep navy ground, mid-navy landmass, red bubbles sized by centre count.
   Neighbouring countries sit a shade above the ground so the border reads
   without competing with the pins. */
.mapbox{background:var(--deep);border-radius:var(--r);color:#fff;padding:28px 26px 20px;
  height:100%;display:flex;flex-direction:column;justify-content:space-between;
  overflow:hidden}
.maphead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  flex-wrap:wrap}
.mapcount{display:flex;align-items:baseline;gap:12px}
.mapcount b{font-family:var(--display);font-style:italic;font-size:44px;line-height:.9;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.mapcount span{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.6)}
.mapsvg{display:block;width:100%;height:auto;margin:16px 0 8px}
.m-nb{fill:#062842;stroke:#10405f;stroke-width:1.6}
.m-za{fill:#0C4372;stroke:#4d8cbf;stroke-width:2.2}
.m-lb{font-family:var(--mono);font-size:16px;letter-spacing:.12em;text-transform:uppercase;
  fill:rgba(255,255,255,.5)}
.m-city{fill:rgba(255,255,255,.5)}
.m-pin{cursor:pointer}
.m-halo{fill:rgba(255,31,42,.18);transition:.3s var(--ease);pointer-events:none}
.m-dot{fill:var(--red);stroke:rgba(255,255,255,.85);stroke-width:2;transition:.3s var(--ease)}
.m-n{font-family:var(--mono);font-weight:700;font-size:18px;fill:#fff;text-anchor:middle;
  pointer-events:none}
.m-pin:hover .m-dot{fill:#fff;stroke:var(--red)}
.m-pin:hover .m-halo{fill:rgba(255,255,255,.22)}
.m-pin.off .m-dot{fill:#2b4b66;stroke:rgba(255,255,255,.2)}
.m-pin.off .m-halo{fill:transparent}
.m-pin.off .m-n{fill:rgba(255,255,255,.45)}
.mapfoot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.12);padding-top:14px;margin-top:8px;
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.55)}
.mapkey{display:inline-flex;align-items:center;gap:8px}
.mapkey i{border-radius:50%;background:var(--red);border:1.5px solid rgba(255,255,255,.8);
  display:block}
.mapkey .k1{width:9px;height:9px}
.mapkey .k2{width:17px;height:17px}
.mapnote{margin-left:auto;color:rgba(255,255,255,.4)}

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
/* The CTA band runs straight into the footer with no white between them
   (client, 27 Aug), so the top corners square off and the margin goes: a
   straight edge and a 26 px radius cannot both be true where they meet. */
.ftr{background:var(--deep);color:rgba(255,255,255,.62);padding:70px 0 0;font-size:12.5px;
  border-radius:0;margin-top:0}
.ftr .cols{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:34px;
  padding-bottom:46px;border-bottom:1px solid var(--hairw)}
.ftr .logo img{height:56px}
.ftr h5{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;margin-bottom:18px}
.ftr ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.ftr ul a{transition:.2s var(--ease);display:inline-block}
.ftr ul a:hover{color:#fff;transform:translateX(3px)}
.ftr .bot{padding:22px 0;display:flex;justify-content:space-between;gap:16px;
  flex-wrap:wrap;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.38)}


/* ==========================================================================
   12. FITMENT FINDER
   ========================================================================== */
.finder{padding:0 0 60px}
/* full-bleed, same rule as the hero — this box IS the Fit page's hero */
.fbox{background:var(--deep);border-radius:0;padding:54px 0 48px;color:#fff;
  position:relative;overflow:hidden}
.fbox .bg{position:absolute;inset:0;
  background:radial-gradient(80% 80% at 78% 26%,rgba(12,67,114,.95),transparent 62%),
             radial-gradient(60% 80% at 8% 100%,rgba(255,31,42,.16),transparent 60%)}
.fbox>*{position:relative;z-index:2}
.prog{height:3px;background:rgba(255,255,255,.14);border-radius:2px;margin:30px 0 26px;
  overflow:hidden}
.prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--mid),var(--red));
  border-radius:2px;transition:width .7s var(--ease)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.st{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r);padding:22px;transition:.34s var(--ease)}
.st.on{background:#fff;border-color:#fff;color:var(--navy);transform:translateY(-4px);
  box-shadow:0 24px 44px -20px rgba(0,0,0,.5)}
.st .n{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red);margin-bottom:12px}
.st .q{font-weight:800;font-size:14.5px;margin-bottom:14px}
.st .v{font-size:12.5px;font-weight:600;padding:11px 16px;border-radius:var(--r3);
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.14);display:flex;
  justify-content:space-between;align-items:center;gap:10px}
.st.on .v{background:var(--bone);border-color:var(--hair);color:var(--navy)}
.st.done .q{opacity:.62}
/* a completed step's value is a button — clicking it reopens that question */
.st .v.vback{width:100%;font-family:inherit;font-size:12.5px;font-weight:600;
  text-align:left;cursor:pointer;transition:.2s var(--ease)}
.st .v.vback:hover{border-color:var(--red)}
.st.on .v.vback:hover{background:#fff}
/* pills sit on the active step's white card, so give them a tinted ground */
.st.on .pill-l{background:var(--bone)}
.st.on .pill-l:hover{background:#fff;border-color:var(--navy)}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.st.on .pills{margin-top:2px}
.pill{border:1px solid rgba(255,255,255,.18);border-radius:var(--r3);padding:8px 16px;
  font-size:11.5px;font-weight:600;background:rgba(255,255,255,.05);
  transition:.24s var(--ease);cursor:pointer}
.pill:hover{background:rgba(255,255,255,.14)}
.pill.on{background:var(--red);border-color:var(--red);color:#fff}
.pill-l{border-color:var(--hair);background:#fff;color:var(--navy)}
.pill-l:hover{background:var(--bone);transform:translateY(-2px)}
.pill-l.on{background:var(--navy);border-color:var(--navy);color:#fff}
.garage{margin-top:26px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:24px 28px;
  display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.garage h4{font-family:var(--display);font-style:italic;font-size:20px;
  text-transform:uppercase;letter-spacing:-.02em}
.garage .m{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:rgba(255,255,255,.62);margin-top:7px;text-transform:uppercase}
.resultbar{background:var(--bone);border-radius:var(--r);padding:20px 26px;display:flex;
  align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}

/* ==========================================================================
   13. CATEGORY / ARCHIVE
   ========================================================================== */
.cathead{padding:14px 0 0}
.catbox{background:linear-gradient(140deg,var(--navy),var(--deep));border-radius:0;
  padding:48px 0;color:#fff;position:relative;overflow:hidden}
.catbox>.container{position:relative}
.catbox .g{position:absolute;right:26px;top:-26px;width:250px;opacity:.14}
.catbox p{max-width:560px;color:rgba(255,255,255,.76);font-size:14.5px;margin-top:14px}
.layout{display:grid;grid-template-columns:262px 1fr;gap:30px;padding:30px 0 80px;
  align-items:start}
.fx{background:#fff;border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;
  position:sticky;top:152px}
.fc{border-bottom:1px solid var(--hair2);padding:19px 20px}
.fc:last-child{border-bottom:0}
.fc h5{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy);font-weight:700;display:flex;justify-content:space-between;
  margin-bottom:14px}
.fc label{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--granite);
  padding:6px 0;cursor:pointer;transition:.2s var(--ease)}
.fc label:hover{color:var(--navy);transform:translateX(3px)}
.fc input{position:absolute;opacity:0;width:0;height:0}
.cb{width:16px;height:16px;border:1.5px solid var(--dust);border-radius:5px;flex-shrink:0;
  transition:.22s var(--ease);position:relative}
.fc input:checked+.cb{background:var(--red);border-color:var(--red)}
.fc input:checked+.cb:after{content:"";position:absolute;left:4.5px;top:1px;width:4px;
  height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.fc input:focus-visible+.cb{outline:2px solid var(--navy);outline-offset:2px}
.fc .cnt{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--dust)}
.fc-fit{background:linear-gradient(150deg,var(--pale),#fff)}
.tbar{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding-bottom:20px;border-bottom:1px solid var(--hair);margin-bottom:22px;flex-wrap:wrap}
.chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:20px;min-height:1px}
.chip{background:#fff;border:1px solid var(--hair);border-radius:var(--r3);padding:7px 14px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--navy);display:inline-flex;gap:9px;align-items:center;
  transition:.24s var(--ease);cursor:pointer}
.chip:hover{border-color:var(--red);transform:translateY(-2px)}
.chip .x{color:var(--red);font-weight:700}
.chip-dash{border-style:dashed}
.sortsel{border:1px solid var(--hair);background:#fff;border-radius:var(--r3);
  padding:10px 34px 10px 18px;font-size:12px;font-weight:600;color:var(--navy);
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23002D52' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.empty{border:1px dashed var(--hair);border-radius:var(--r);padding:52px 30px;
  text-align:center;color:var(--granite)}
.empty h4{font-family:var(--display);font-style:italic;font-size:22px;color:var(--navy);
  text-transform:uppercase;margin-bottom:10px}
.callout{background:var(--bone);border-radius:var(--r);padding:26px 30px;
  border-left:4px solid var(--red)}

/* ==========================================================================
   14. PDP
   ========================================================================== */
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;padding:24px 0 70px;
  align-items:start}
.gal{display:grid;grid-template-columns:80px 1fr;gap:14px}
.thumbs{display:flex;flex-direction:column;gap:10px}
.th{aspect-ratio:1;border:1px solid var(--hair);border-radius:var(--r2);
  background:linear-gradient(155deg,#fff,var(--bone2));display:grid;place-items:center;
  padding:10px;overflow:hidden;transition:.26s var(--ease);cursor:pointer}
.th svg{max-width:100%;max-height:100%;width:auto;color:var(--dust)}
.th:hover{transform:translateY(-2px)}
.th.on{border-color:var(--red);border-width:2px}
.th.on svg{color:var(--navy)}
.mainshot{position:relative;aspect-ratio:1/.9;border:1px solid var(--hair);
  border-radius:var(--r);background:linear-gradient(155deg,#fff,var(--bone2));
  display:grid;place-items:center;overflow:hidden}
.mainshot>svg{width:auto;max-width:60%;max-height:78%;color:var(--navy);
  transition:.5s var(--ease)}
.mainshot .code{position:absolute;left:20px;bottom:18px;font-family:var(--mono);
  font-size:9.5px;color:var(--dust);letter-spacing:.08em}
.mainshot .zoom{position:absolute;right:18px;bottom:18px;font-family:var(--mono);font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--granite);border:1px solid var(--hair);
  background:#fff;padding:7px 13px;border-radius:var(--r3)}
.pdp h1{font-family:var(--display);font-style:italic;font-size:36px;line-height:.98;
  text-transform:uppercase;color:var(--navy);margin:14px 0 16px;letter-spacing:-.03em}
.pdp .sub{font-size:14.5px;color:var(--granite);margin-bottom:22px}
.pbox{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:26px 28px;
  margin-bottom:18px;box-shadow:var(--e1)}
.pbox .row{display:flex;align-items:flex-end;gap:18px;padding-bottom:20px;
  border-bottom:1px solid var(--hair2);margin-bottom:20px;flex-wrap:wrap}
.pbox .big{font-weight:800;font-size:34px;color:var(--navy);letter-spacing:-.025em;line-height:1}
.fitpanel{border:1.5px solid rgba(15,123,62,.4);
  background:linear-gradient(150deg,rgba(15,123,62,.07),#fff);border-radius:var(--r);
  padding:18px 20px;margin-bottom:18px}
.fitpanel .t{display:flex;align-items:center;gap:10px;font-weight:800;font-size:13.5px;
  color:var(--fit);margin-bottom:8px}
.fitpanel p{font-size:12.5px;color:var(--granite)}
.fitpanel .chg{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--navy);border-bottom:1px solid var(--navy);
  margin-top:11px;display:inline-block;cursor:pointer}
.fitpanel.no{border-color:var(--hair);background:var(--bone)}
.fitpanel.no .t{color:var(--granite)}
.fitpanel.warn{border-color:rgba(0,45,82,.35);
  background:linear-gradient(150deg,var(--pale),#fff)}
.fitpanel.warn .t{color:var(--navy)}
.opts h5{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy);font-weight:700;margin-bottom:12px}
.buyrow{display:flex;gap:11px;margin:20px 0 12px}
.qty{display:flex;align-items:center;border:1.5px solid var(--hair);border-radius:var(--r3);
  background:#fff;flex-shrink:0}
.qty span{padding:0 14px;font-weight:700;color:var(--navy);min-width:44px;text-align:center}
.qty button{padding:15px 14px;color:var(--dust);font-weight:400;font-size:15px;
  transition:.2s}
.qty button:hover{color:var(--red)}
.assure{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:20px}
.assure .a{display:flex;gap:10px;align-items:flex-start;font-size:11.5px;color:var(--granite);
  line-height:1.45}
.assure .a b{display:block;color:var(--navy);font-size:12px}
.assure .a .tk{color:var(--red);font-weight:800}
.sstrip{background:var(--navy);color:#fff;border-radius:var(--r);padding:24px 26px;
  margin-top:18px}
.sstrip .r{display:flex;justify-content:space-between;gap:20px;padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.11);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.03em}
.sstrip .r:last-child{border-bottom:0}
.sstrip .r span:first-child{color:rgba(255,255,255,.6);text-transform:uppercase;
  white-space:nowrap}
.sstrip .r span:last-child{text-align:right}
.tabs{display:flex;gap:8px;padding:0 0 26px;flex-wrap:wrap}
.tabs button{padding:11px 20px;border-radius:var(--r3);font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--granite);background:#fff;
  border:1px solid var(--hair);transition:.24s var(--ease)}
.tabs button:hover{transform:translateY(-2px)}
.tabs button.on{background:var(--navy);color:#fff;border-color:var(--navy);font-weight:700}
.prose{max-width:740px}
.prose p{font-size:14.5px;color:var(--granite);margin-bottom:16px;line-height:1.75}
.prose h4{font-weight:800;color:var(--navy);font-size:15.5px;margin:26px 0 10px}
.prose ul{margin:0 0 16px 18px;color:var(--granite);font-size:13.5px;line-height:1.85}
.prose table{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:16px}
.prose td{padding:11px 0;border-bottom:1px solid var(--hair2);color:var(--granite)}
.prose td:first-child{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--navy);width:210px;vertical-align:top}
.tabpane{display:none}
.tabpane.on{display:block}

/* review block */
.rev{border:1px solid var(--hair);border-radius:var(--r);padding:22px 24px;background:#fff}
.rev+.rev{margin-top:12px}
.rev .h{display:flex;justify-content:space-between;gap:14px;margin-bottom:9px;flex-wrap:wrap}
.rev b{color:var(--navy);font-size:13px}
.rev p{font-size:13px;color:var(--granite);line-height:1.65}

/* ==========================================================================
   14b. GOOGLE REVIEWS BAND (client, Aug 27)
   The real thing is a Trustindex embed and it cannot run in this demo: the
   file is self-contained and makes no external requests, which is what lets it
   be opened offline and sent as one attachment, and the hosted copy blocks
   third-party scripts outright. So this is the layout at the right size, with
   the content deliberately left as placeholder bars rather than invented
   reviews and an invented star rating — a demo should not put words in a
   customer's mouth or a number on the business that nobody has earned.
   The embed script is recorded in README.md; in WordPress it is a one-line
   HTML widget dropped into this section.
   ========================================================================== */
.gr{display:grid;grid-template-columns:270px 1fr;gap:30px;align-items:start}
.gr-score{background:#fff;border:1px solid var(--hair);border-radius:var(--r);
  padding:26px 24px;text-align:center}
/* NB: .num is taken by the campaign stat blocks, hence gr-num */
.gr-score .gr-num{height:40px;display:grid;place-items:center}
.gr-stars{display:flex;gap:4px;justify-content:center;margin-top:14px}
.gr-stars i{width:15px;height:15px;border-radius:3px;background:var(--bone3);
  display:block;font-style:normal}
.gr-score .of{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dust);margin-top:14px}
.gr-score .src{margin-top:16px;padding-top:15px;border-top:1px solid var(--hair2);
  font-size:11.5px;font-weight:700;color:var(--navy)}
.grc{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:22px 22px 24px}
.grc .top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.grc .av{width:36px;height:36px;border-radius:50%;background:var(--bone2);flex-shrink:0}
.sk{background:var(--bone2);border-radius:4px;height:9px}
.grc .top .sk{height:10px}
.grc .top .sk+.sk{margin-top:7px;height:7px;background:var(--bone)}
.grc .body .sk{margin-top:9px}
.gr-note{margin-top:20px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dust);display:flex;align-items:center;gap:10px;
  flex-wrap:wrap}
.gr-note b{color:var(--granite);font-weight:700}
/* the live widget's own container. Trustindex brings its own styling; this only
   gives it room and stops it inheriting anything of ours. */
.ti-host:empty{display:none}
.ti-host.ti-live{margin:0}

/* ==========================================================================
   14c. REQUEST A QUOTE (client, Aug 27)
   The form's job is to be shorter than it looks. The vehicle is carried in from
   the garage rather than asked for again, the system tags are one tap each, and
   only three fields are actually required — everything else is optional context.
   ========================================================================== */
.qwrap{display:grid;grid-template-columns:1fr 340px;gap:30px;align-items:start}
.qform{background:#fff;border:1px solid var(--hair);border-radius:var(--r);
  overflow:hidden}
.qsec{padding:26px 30px;border-bottom:1px solid var(--hair2)}
.qsec:last-child{border-bottom:0}
.qsec h3{font-family:var(--display);font-style:italic;font-size:20px;
  text-transform:uppercase;color:var(--navy);letter-spacing:-.02em;margin-bottom:14px}
.qhelp{font-size:12px;color:var(--dust);line-height:1.6}
.qf{display:block;margin-top:14px}
.qf>span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dust);margin-bottom:7px}
.qf>span b{color:var(--red)}
.qf input,.qf textarea{width:100%;border:1px solid var(--hair);border-radius:var(--r2);
  padding:12px 15px;font:inherit;font-size:13px;color:var(--navy);background:#fff;
  outline:0;transition:.2s var(--ease)}
.qf textarea{border-radius:var(--r2);resize:vertical;line-height:1.6}
.qf input:focus,.qf textarea:focus{border-color:var(--navy);box-shadow:var(--e1)}
.qf input.bad{border-color:var(--red);background:#FFF7F7}
.qerr{margin-top:16px;background:rgba(255,31,42,.07);border-left:3px solid var(--red);
  border-radius:var(--r2);padding:12px 14px;font-size:12.5px;font-weight:600;
  color:var(--redhover)}

.qveh-on{display:flex;align-items:center;gap:18px;background:var(--pale);
  border-radius:var(--r);padding:18px 22px}
.qveh-art{width:104px;flex-shrink:0;display:block}
.qveh-art svg,.qveh-art img{width:100%;height:auto;display:block;color:var(--navy)}
.qveh-on .m{font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mid)}
.qveh-on b{display:block;font-size:16px;color:var(--navy);margin-top:5px}
.qveh-on .s{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--granite);margin-top:4px}
.qveh-off{background:var(--bone);border-radius:var(--r);padding:20px 22px}
.qveh-off p{font-size:13px;color:var(--granite);margin-bottom:14px;max-width:440px}

.qtags{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px}
.qtag{border:1px solid var(--hair);border-radius:var(--r3);padding:9px 16px;
  font-size:12px;font-weight:600;color:var(--navy);background:#fff;
  transition:.2s var(--ease)}
.qtag:hover{border-color:var(--navy);transform:translateY(-2px)}
.qtag.on{background:var(--navy);border-color:var(--navy);color:#fff}

.qside{display:flex;flex-direction:column;gap:16px;position:sticky;top:152px}
.qcard{background:#fff;border:1px solid var(--hair);border-radius:var(--r);
  padding:22px 24px}
.qcard-note p{font-size:12.5px;color:var(--granite);line-height:1.65;margin-top:9px}
.qs-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--hair2);font-size:12.5px}
.qs-row span{color:var(--granite)}
.qs-row b{color:var(--navy);text-align:right}
.qs-cart{margin-top:12px;background:var(--bone);border-radius:var(--r2);padding:12px 14px}
.qs-line{display:flex;justify-content:space-between;gap:12px;font-size:11.5px;
  color:var(--granite);padding:4px 0}
.qs-line b{color:var(--navy);white-space:nowrap}

.qdone{padding:44px 34px 40px;text-align:center}
.qdone .tick{width:60px;height:60px;border-radius:50%;background:rgba(15,123,62,.1);
  color:var(--fit);display:grid;place-items:center;margin:0 auto 18px}
.qdone h3{font-family:var(--display);font-style:italic;font-size:27px;
  text-transform:uppercase;color:var(--navy);letter-spacing:-.025em;margin-bottom:12px}
.qdone p{font-size:14px;color:var(--granite);max-width:460px;margin:0 auto;line-height:1.65}

/* ==========================================================================
   15. CART / CHECKOUT
   ========================================================================== */
.cartwrap{display:grid;grid-template-columns:1fr 380px;gap:30px;padding:26px 0 80px;
  align-items:start}
.cline{display:grid;grid-template-columns:104px 1fr auto;gap:20px;align-items:center;
  background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:18px;
  transition:.28s var(--ease)}
.cline+.cline{margin-top:12px}
.cline:hover{box-shadow:var(--e2);border-color:transparent}
.cline .sh{aspect-ratio:1;border-radius:var(--r2);
  background:linear-gradient(155deg,#fff,var(--bone2));display:grid;place-items:center;
  border:1px solid var(--hair2)}
.cline .sh svg{max-width:74%;max-height:74%;color:var(--mid)}
.cline h4{font-weight:700;font-size:14px;color:var(--navy);line-height:1.3;margin-bottom:6px}
.cline .rm{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dust);border-bottom:1px solid var(--hair);margin-top:10px;display:inline-block;
  cursor:pointer}
.cline .rm:hover{color:var(--red);border-color:var(--red)}
.cline .rt{text-align:right}
.qty-sm{display:inline-flex;align-items:center;border:1.5px solid var(--hair);
  border-radius:var(--r3);background:#fff;margin-bottom:10px}
.qty-sm button{padding:7px 12px;color:var(--dust)}
.qty-sm button:hover{color:var(--red)}
.qty-sm span{padding:0 6px;font-weight:700;color:var(--navy);min-width:30px;text-align:center;
  font-size:12.5px}
.sumbox{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:26px 28px;
  position:sticky;top:152px;box-shadow:var(--e1)}
.sumbox h3{font-family:var(--display);font-style:italic;font-size:22px;text-transform:uppercase;
  color:var(--navy);margin-bottom:20px;letter-spacing:-.02em}
.sr{display:flex;justify-content:space-between;gap:14px;padding:9px 0;font-size:13px;
  color:var(--granite)}
.sr b{color:var(--navy);font-weight:700}
.sr.tot{border-top:1px solid var(--hair);margin-top:10px;padding-top:16px;font-size:15px}
.sr.tot b{font-size:22px;font-weight:800;letter-spacing:-.02em}
.opt{border:1.5px solid var(--hair);border-radius:var(--r);padding:16px 18px;cursor:pointer;
  transition:.24s var(--ease);display:block;background:#fff}
.opt+.opt{margin-top:10px}
.opt:hover{border-color:var(--navy)}
.opt.on{border-color:var(--red);background:linear-gradient(150deg,rgba(255,31,42,.04),#fff)}
.opt .t{display:flex;align-items:center;gap:11px;font-weight:800;font-size:13.5px;
  color:var(--navy)}
.opt .radio{width:17px;height:17px;border-radius:50%;border:1.5px solid var(--dust);
  flex-shrink:0;position:relative;transition:.2s}
.opt.on .radio{border-color:var(--red);border-width:5px}
.opt p{font-size:12px;color:var(--granite);margin-top:7px;padding-left:28px}
.opt .pr{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--granite)}
.field{margin-bottom:14px}
.field label{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--navy);font-weight:700;margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--hair);
  border-radius:var(--r3);padding:13px 18px;font-size:13px;background:#fff;outline:0;
  transition:.2s}
.field textarea{border-radius:var(--r);min-height:82px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(0,45,82,.08)}
.field .hint{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--dust);
  margin-top:6px;text-transform:uppercase}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.panel{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:28px 30px;
  margin-bottom:16px}
.panel h3{font-family:var(--display);font-style:italic;font-size:20px;text-transform:uppercase;
  color:var(--navy);margin-bottom:18px;letter-spacing:-.02em;display:flex;
  align-items:center;gap:12px}
.panel h3 .num{width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;
  font-family:var(--mono);font-size:11px;font-style:normal;display:grid;place-items:center;
  flex-shrink:0}
.dealer{border:1px solid var(--hair);border-radius:var(--r2);padding:14px 16px;
  display:flex;gap:12px;align-items:center;transition:.22s var(--ease)}
.dealer+.dealer{margin-top:9px}
.dealer[data-d]{cursor:pointer}
.dealer:hover{border-color:var(--navy)}
.dealer.on{border-color:var(--red);background:rgba(255,31,42,.03)}
.dealer .radio{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--dust);
  flex-shrink:0;transition:.2s}
.dealer.on .radio{border-color:var(--red);border-width:4.5px}
.dealer .dpin{width:30px;height:30px;border-radius:50%;background:var(--pale);color:var(--navy);
  display:grid;place-items:center;flex-shrink:0}
.dealer .n{font-weight:700;font-size:13px;color:var(--navy);line-height:1.3}
.dealer .m{font-family:var(--mono);font-size:9px;letter-spacing:.07em;color:var(--dust);
  text-transform:uppercase;margin-top:5px;line-height:1.5}
.dealer .tel{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--granite);
  white-space:nowrap;border-bottom:1px solid transparent;align-self:flex-start;padding-top:2px}
.dealer .tel:hover{color:var(--red);border-color:var(--red)}
/* The list is long — 58 centres — so it scrolls inside its own panel. */
.loclist{max-height:430px;overflow-y:auto;padding-right:6px;
  -webkit-overflow-scrolling:touch}
.loclist::-webkit-scrollbar{width:8px}
.loclist::-webkit-scrollbar-track{background:var(--bone);border-radius:4px}
.loclist::-webkit-scrollbar-thumb{background:var(--hair);border-radius:4px}
.loclist::-webkit-scrollbar-thumb:hover{background:var(--dust)}
.done-box{background:#fff;border:1px solid var(--hair);border-radius:var(--rbig);
  padding:60px 54px;text-align:center;max-width:720px;margin:40px auto 90px;
  box-shadow:var(--e2)}
.done-box .tick{width:74px;height:74px;border-radius:50%;background:rgba(15,123,62,.1);
  color:var(--fit);display:grid;place-items:center;margin:0 auto 24px;font-size:32px}
.done-box h1{font-family:var(--display);font-style:italic;font-size:34px;
  text-transform:uppercase;color:var(--navy);letter-spacing:-.03em;margin-bottom:14px}
.done-box p{color:var(--granite);font-size:14.5px;max-width:460px;margin:0 auto 12px}

/* toast */
.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,120%);
  background:var(--navy);color:#fff;border-radius:var(--r3);padding:14px 26px;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  z-index:300;box-shadow:0 20px 40px -16px rgba(0,29,54,.7);transition:.4s var(--ease);
  display:flex;align-items:center;gap:12px}
.toast.up{transform:translate(-50%,0)}
.toast .d{width:7px;height:7px;border-radius:50%;background:var(--fit)}

/* ==========================================================================
   16. CAMPAIGN PAGE
   ========================================================================== */
.camp{padding:0}
.campbox{border-radius:0;overflow:hidden;position:relative;background:var(--deep);
  color:#fff;min-height:580px;display:flex;align-items:flex-end}
.campbox .bg{position:absolute;inset:0;
  background:radial-gradient(90% 80% at 84% 22%,rgba(12,67,114,.92),transparent 62%),
             radial-gradient(64% 84% at 6% 100%,rgba(255,31,42,.22),transparent 62%),
             linear-gradient(178deg,#00243f,#000a14)}
.campbox .in{position:relative;z-index:3;padding:0 0 62px;max-width:640px}
.campbox .h-hero{font-size:66px}
.kick{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.kick .rule{height:1px;width:54px;background:var(--red)}
.campbox p{max-width:470px;font-size:16px;color:rgba(255,255,255,.8);margin:20px 0 30px}
.campart{position:absolute;right:40px;top:50%;transform:translateY(-50%);width:210px;
  z-index:2;animation:float 10s ease-in-out infinite}
.numrow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px}
.num{border-radius:var(--r);padding:28px 26px;color:#fff;transition:.34s var(--ease)}
.num:hover{transform:translateY(-5px);box-shadow:var(--e3)}
.num:nth-child(1){background:var(--navy)}
.num:nth-child(2){background:var(--mid)}
.num:nth-child(3){background:var(--deep)}
.num:nth-child(4){background:var(--red)}
.num .v{font-family:var(--display);font-style:italic;font-size:40px;line-height:1;
  letter-spacing:-.035em}
.num .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  margin-top:10px;opacity:.85}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.fside{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:52px 46px;
  display:flex;flex-direction:column;justify-content:center}
.fside.bone{background:linear-gradient(150deg,var(--bone),var(--bone3));border-color:transparent}
.fvis{border-radius:var(--r);overflow:hidden;position:relative;min-height:430px;
  display:grid;place-items:center;background:linear-gradient(150deg,#0C4372,#001D36)}
.feat h3{font-family:var(--display);font-style:italic;font-size:31px;text-transform:uppercase;
  line-height:1.02;color:var(--navy);margin:16px 0;letter-spacing:-.028em}
.feat p{color:var(--granite);font-size:14.5px;margin-bottom:14px}
.cutlist{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:10px}
.cutlist li{display:flex;gap:12px;font-size:13.5px;color:var(--granite);align-items:flex-start}
.cutlist .tk{color:var(--red);font-weight:800}
.route{border:1px solid var(--hair);background:#fff;border-radius:var(--r);padding:26px;
  transition:.32s var(--ease)}
.route:hover{transform:translateY(-5px);box-shadow:var(--e2)}
.route h4{font-weight:800;font-size:16px;margin:12px 0 9px;color:var(--navy)}
.route p{font-size:12.5px;color:var(--granite);line-height:1.6}
/* Full-bleed CTA (client, Aug 27). Going edge-to-edge would have doubled the
   amount of red on the page, and red is reserved for add-to-cart and primary
   actions — it stops reading as THE action colour once it becomes a large
   background. So the gradient's transition is pushed right: navy holds the
   extra width, red stays a corner, and the final stop sits past 100% so the
   right edge never reaches the pure CTA red. */
.cta-band{background:linear-gradient(102deg,var(--deep) 0%,var(--navy) 56%,var(--red) 116%);
  border-radius:0;color:#fff;padding:52px 0}
.cta-band>.container{display:flex;align-items:center;justify-content:space-between;
  gap:30px;flex-wrap:wrap}
.cta-band h2{font-family:var(--display);font-style:italic;font-size:34px;
  text-transform:uppercase;line-height:1.02;letter-spacing:-.028em}

/* ==========================================================================
   17. STYLE GUIDE PAGE
   ========================================================================== */
.gwrap{padding:34px 0 90px}
.gcard{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:38px 40px;
  margin-bottom:18px}
.sws{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:18px 0 8px}
.sw{border-radius:var(--r2);overflow:hidden;border:1px solid var(--hair)}
.sw .c{height:72px}
.sw .m{padding:11px 12px;font-family:var(--mono);font-size:9px;line-height:1.7;
  color:var(--granite)}
.sw .m b{display:block;color:var(--navy);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;min-width:620px;border-collapse:collapse;margin-top:18px;font-size:12.5px}
.tbl th{background:var(--navy);color:#fff;text-align:left;padding:12px 14px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--hair);color:var(--granite);
  vertical-align:top}
.tbl td:first-child{color:var(--navy);font-weight:700}
.tbl tr:nth-child(even) td{background:#FBFAF8}
.tbl code{font-family:var(--mono);font-size:11px;background:var(--pale);padding:2px 6px;
  border-radius:4px;color:var(--navy)}
.prin{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px}
.prin .p{border-top:2px solid var(--red);padding-top:17px}
.prin .p:nth-child(3n-1){border-color:var(--navy)}
.prin .p:nth-child(3n){border-color:var(--mid)}
.prin h4{font-weight:800;color:var(--navy);font-size:14.5px;margin-bottom:9px}
.prin p{font-size:12.5px;color:var(--granite);line-height:1.62}
.notebox{background:linear-gradient(140deg,var(--navy),var(--deep));color:#fff;
  border-radius:var(--r);padding:38px 42px;margin-top:8px}
.notebox h3{font-family:var(--display);font-style:italic;font-size:23px;text-transform:uppercase;
  margin-bottom:16px;letter-spacing:-.02em}
.notebox p{color:rgba(255,255,255,.78);font-size:13.5px;max-width:820px;margin-bottom:12px}
.notebox ul{margin-left:18px;color:rgba(255,255,255,.78);font-size:13.5px;line-height:1.95}
.notebox b{color:#fff}
.demobar{background:var(--graphite);color:rgba(255,255,255,.7);font-family:var(--mono);
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
.demobar .container{display:flex;align-items:center;gap:16px;height:34px;flex-wrap:wrap}
.demobar b{color:#fff;font-weight:500}
.demobar a{color:var(--red);border-bottom:1px solid rgba(255,31,42,.5)}

/* ==========================================================================
   18. RESPONSIVE
   ========================================================================== */
@media(max-width:1320px){
  /* the wishlist icon is the first thing to go when the nav, the All button and
     the quote pill are all competing for the same row */
  .icohide{display:none}
  .srch{width:168px}
  .nav a{padding:8px 9px;font-size:12px}
}
@media(max-width:1180px){
  .vgrid{grid-template-columns:repeat(3,1fr)}
  .nav a{padding:8px 7px;font-size:11.5px}
  .srch{display:none}
  /* the fitment bar is one row of four selects, a button and a status pill —
     it runs out of room well before the nav does, so it wraps here rather than
     at the mobile breakpoint */
  .fitpill .inner{flex-wrap:wrap;border-radius:var(--r);padding:12px 14px}
  .fitpill select{flex:1 1 118px;min-width:0}
  .fitpill .st{margin-left:0;width:100%;justify-content:flex-start}
}
@media(max-width:980px){
  .container{padding:0 22px}
  .grid4,.grid3,.trust,.counts,.steps,.numrow,.sws,.prin,.bento,.vpage{grid-template-columns:repeat(2,1fr)}
  .layout,.pdp,.split,.feat,.gal,.cartwrap,.row2,.grid2,.gr,.qwrap{grid-template-columns:1fr}
  .bento{grid-auto-rows:178px}
  .b-h2{grid-row:span 1}
  .h-hero{font-size:42px}
  .campbox .h-hero{font-size:44px}
  .hero-veh,.campart,.hero-badge{display:none}
  .hero-in,.campbox .in{padding:44px 0}
  .fbox,.catbox{padding:36px 0}
  .fx{position:static}
  .sumbox,.qside{position:static}
  .split .cp,.fside{padding:36px 30px}
  .cta-band{padding:36px 0}
  .gcard{padding:26px 22px}
  .nav{display:none}
  /* ...except the copy of it inside the drawer, which IS the navigation at
     this width — same component, no second mobile menu to maintain */
  .side-nav{display:flex;flex-wrap:wrap;gap:6px;padding:16px 20px 4px}
  /* explicit, not inherited: the desktop nav's padding is shrunk at this width
     and the pills would come out cramped */
  .side-nav a{background:var(--bone);color:var(--navy);padding:9px 15px;
    font-size:12.5px;border-radius:var(--r3)}
  .side-nav a.on{background:var(--navy);color:#fff}
  /* the button keeps its slot but drops the word — the icon is enough here */
  .allbtn{padding:0;width:40px;justify-content:center}
  .allbtn span{display:none}
  .quotebtn{display:none}
  .icohide{display:none}
  .hdr .container{height:66px;gap:12px}
  .fitpill{top:66px}
  .fitpill .inner{flex-wrap:wrap;border-radius:var(--r);padding:14px}
  .fitpill .st{margin-left:0;padding-right:0;width:100%}
  .fitpill select{flex:1;min-width:104px}
  .srch{display:none}
  .cline{grid-template-columns:78px 1fr;gap:14px}
  .cline .rt{grid-column:1/-1;text-align:left;border-top:1px solid var(--hair2);padding-top:12px}
  .sec{padding:56px 0}
  .thumbs{flex-direction:row;overflow:auto}
  .th{width:74px;flex-shrink:0}
  /* the demo bar collapses to one line on small screens */
  .demobar .container{height:auto;min-height:30px;padding:7px 22px;gap:10px;line-height:1.5}
  .demobar .container span:nth-child(2){display:none}
  .demobar a{margin-left:0!important}
}
@media(max-width:620px){
  .grid4,.grid3,.trust,.counts,.steps,.numrow,.sws,.prin,.bento,.vgrid,.assure,.pv{
    grid-template-columns:1fr}
  .vpage{grid-template-columns:repeat(2,1fr)}
  .b-w2{grid-column:span 1}
  .h-hero{font-size:34px}
  .h-sec{font-size:29px}
  .ftr .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .herobox .bg{background-image:url('img/hero-79-series-sm.jpg');background-position:64% 58%}
  /* at this width the phone number crushes the address, so only it wraps —
     the pin and the name stay on one line together */
  .dealer{flex-wrap:wrap;row-gap:8px}
  .dealer>div{flex:1 1 0;min-width:0}
  .dealer .tel{flex:0 0 100%;margin-left:42px;padding-top:0}
  .dealer .m{margin-top:4px}
  .locbar{grid-template-columns:1fr}
  .bt{height:64px;padding:0 16px}
  .bt img{max-height:36px;max-width:170px}
  .split .art{min-height:260px}
  .mapbox{padding:22px 20px 16px}
  .mapcount b{font-size:34px}
  .mapnote{display:none}
  .herobox{min-height:480px}
  .logo img{height:42px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}