/* ==========================================================================
   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}
/* ==========================================================================
   TYPOGRAPHY  (readability pass, 3 Sep)
   Three changes, in the order they mattered:

   1. Base 14 -> 16px, with 14px the floor for anything secondary.
   2. The mono micro-labels were the real offender: 8.5-10px at .16em tracking,
      carrying real content (part codes, spec lines, section labels) below any
      defensible floor. Now 11.5px at roughly half the tracking.
   3. The uppercase italic display face is restricted to page and section
      headings and to numerals. It was doing UI work on card titles, category
      names and product names — the labels most likely to run long, which is
      exactly where uppercase italic costs most: uppercase removes word-shape
      and italic removes it again. Those are now sentence-case sans at 800.

   The pass adds page height; section padding gives it back, because the same
   brief asks for products higher up the page.
   ========================================================================== */
body{font-family:var(--body);background:var(--white);color:var(--graphite);
  -webkit-font-smoothing:antialiased;font-size:16px;line-height:1.62}
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. */
.ol-container{max-width:1440px;margin:0 auto;padding:0 40px}

/* ==========================================================================
   1. (the utility ticker lived here — removed 3 Sep, see ol.ol-js)
   The slide keyframe stays: the brand strip still uses it.
   ========================================================================== */
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==========================================================================
   2. HEADER — light, blurred, pill nav, circular icons  (B's icon language)
   ========================================================================== */
.ol-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)}
.ol-hdr .ol-container{display:flex;align-items:center;gap:20px;height:80px}
.ol-logo{display:block;flex-shrink:0;line-height:0}
.ol-logo img{display:block;height:56px;width:auto}
.ol-nav{display:flex;gap:4px;margin-left:6px}
.ol-nav a{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;
  color:var(--granite);padding:9px 17px;border-radius:var(--r3);
  transition:.22s var(--ease);white-space:nowrap}
.ol-nav a:hover{background:var(--bone);color:var(--navy)}
.ol-nav a.ol-on{background:var(--navy);color:#fff}
/* Explore leaves the site, so it says so */
.ol-extico{opacity:.5;flex-shrink:0}
.ol-nav a:hover .ol-extico{opacity:.9}
.ol-tools{margin-left:auto;display:flex;align-items:center;gap:9px}
.ol-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}
.ol-srch:focus-within{width:320px;border-color:var(--navy);box-shadow:var(--e1)}
.ol-srch input{border:0;outline:0;background:none;width:100%;font-size:14px}
.ol-srch input::placeholder{color:var(--dust)}
.ol-srch .ol-mag{color:var(--dust);flex-shrink:0}
.ol-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}
.ol-ico:hover{transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(0,45,82,.4);
  border-color:transparent}
.ol-ico .ol-badge{position:absolute;top:-3px;right:-3px;background:var(--red);color:#fff;
  font-family:var(--mono);font-size:11.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. */
.ol-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:14px;font-weight:700;transition:.22s var(--ease);cursor:pointer}
.ol-allbtn:hover{background:var(--deep)}
.ol-allbtn[aria-expanded="true"]{background:var(--red)}
.ol-allbtn svg{flex-shrink:0}

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

/* the drawer itself */
html.ol-side-locked,html.ol-side-locked body{overflow:hidden}
.ol-sidewrap{position:fixed;inset:0;z-index:200}
.ol-scrim{position:absolute;inset:0;background:rgba(0,20,38,.5);opacity:0;
  transition:opacity .34s var(--ease)}
.ol-sidewrap.ol-open .ol-scrim{opacity:1}
.ol-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)}
.ol-sidewrap.ol-open .ol-side{transform:none}

.ol-side-top{background:var(--navy);color:#fff;padding:18px 20px 20px;flex-shrink:0}
.ol-side-row{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:15px}
.ol-side-ttl{font-family:var(--display);font-style:italic;font-size:21px;
  text-transform:uppercase;letter-spacing:-.02em}
.ol-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)}
.ol-side-x:hover{background:var(--red)}
.ol-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}
.ol-side-srch:focus-within{background:#fff}
.ol-side-srch .ol-mag{color:rgba(255,255,255,.6);flex-shrink:0}
.ol-side-srch:focus-within .ol-mag{color:var(--dust)}
.ol-side-srch input{border:0;outline:0;background:none;width:100%;font-size:14px;color:#fff}
.ol-side-srch input::placeholder{color:rgba(255,255,255,.55)}
.ol-side-srch:focus-within input{color:var(--navy)}
/* the field inverts to white on focus, so the placeholder has to come with it */
.ol-side-srch:focus-within input::placeholder{color:var(--dust)}
.ol-side-srch .ol-sugg{top:52px;left:0;right:0}

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

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

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

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

.ol-mflag{font-family:var(--mono);font-size:11.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}
.ol-mflag-hot{background:var(--red)}

/* search suggestions */
.ol-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}
.ol-sugg.ol-open{display:block}
.ol-sugg a{display:flex;gap:12px;align-items:center;padding:9px 10px;border-radius:var(--r2);
  transition:.16s}
.ol-sugg a:hover{background:var(--bone)}
.ol-sugg .ol-sg-ic{width:38px;height:34px;border-radius:8px;background:var(--bone2);
  display:grid;place-items:center;flex-shrink:0}
.ol-sugg .ol-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 */
.ol-sugg a>span{min-width:0}
.ol-sugg .ol-sg-n{display:block;font-size:14px;font-weight:700;color:var(--navy);
  line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ol-sugg .ol-sg-m{display:block}
.ol-sugg .ol-sg-m{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--dust);
  margin-top:3px;text-transform:uppercase}
.ol-sugg .ol-sg-p{margin-left:auto;font-weight:800;font-size:14px;color:var(--navy);white-space:nowrap}
.ol-sugg .ol-sg-empty{padding:14px 12px;font-family:var(--mono);font-size:11.5px;
  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. */
.ol-fitpill{padding:16px 0 0}
.ol-fitpill .ol-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)}
.ol-fitpill .ol-k{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:#fff;white-space:nowrap;opacity:.85;
  padding:0 6px 0 12px}
.ol-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:14px;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}
.ol-fitpill select:hover:not(:disabled){background-color:rgba(255,255,255,.2)}
.ol-fitpill select:disabled{opacity:.4;cursor:not-allowed}
.ol-fitpill select option{color:var(--graphite)}
.ol-fitpill .ol-go{background:var(--red);color:#fff;font-weight:800;font-size:14px;
  letter-spacing:.05em;text-transform:uppercase;padding:12px 22px;border-radius:var(--r3);
  white-space:nowrap;transition:.2s var(--ease)}
.ol-fitpill .ol-go:hover{background:var(--redhover);transform:translateY(-1px)}
.ol-fitpill .ol-st{margin-left:auto;display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  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}
.ol-fitpill .ol-st b{color:#fff;font-weight:500}
.ol-fitpill .ol-clr{font-size:14px;color:rgba(255,255,255,.5);border-bottom:1px solid rgba(255,255,255,.3);
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.ol-fitpill .ol-clr:hover{color:#fff}
.ol-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)
   ========================================================================== */
.ol-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:800;font-size:13.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}
.ol-btn .ol-arw{transition:.28s var(--ease)}
.ol-btn:hover .ol-arw{transform:translateX(5px)}
.ol-btn-red{background:var(--red);color:#fff}
.ol-btn-red:hover{background:var(--redhover);transform:translateY(-2px);
  box-shadow:0 14px 28px -12px rgba(255,31,42,.55)}
.ol-btn-navy{background:var(--navy);color:#fff}
.ol-btn-navy:hover{transform:translateY(-2px);box-shadow:0 14px 28px -12px rgba(0,45,82,.5)}
.ol-btn-line{border-color:var(--hair);color:var(--navy);background:#fff}
.ol-btn-line:hover{border-color:var(--navy);transform:translateY(-2px);box-shadow:var(--e1)}
.ol-btn-ghost{border-color:rgba(255,255,255,.36);color:#fff}
.ol-btn-ghost:hover{background:rgba(255,255,255,.1)}
.ol-btn-sm{padding:11px 20px;font-size:12.5px}
/* "Ask us" is short; hold a floor so it does not read as stubby next to the
   long outline button beside it */
.ol-callout .ol-btn-sm{min-width:124px}
.ol-btn-block{width:100%}
.ol-btn[disabled]{opacity:.45;pointer-events:none}
.ol-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)}
.ol-btn-red:hover:after{animation:sheen .8s var(--ease)}
@keyframes sheen{to{left:130%}}

/* ==========================================================================
   5. TYPE SCALE
   ========================================================================== */
.ol-lab{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--red);font-weight:500;display:inline-block}
.ol-lab-d{color:var(--dust)}
.ol-lab-n{color:var(--navy)}
.ol-lab-w{color:rgba(255,255,255,.6)}
.ol-spec{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--granite)}
.ol-h-hero{font-family:var(--display);font-style:italic;font-size:64px;line-height:.9;
  letter-spacing:-.032em;text-transform:uppercase}
.ol-h-sec{font-family:var(--display);font-style:italic;font-size:40px;line-height:.96;
  letter-spacing:-.025em;text-transform:uppercase;color:var(--navy)}
.ol-h-card{font-weight:800;font-size:16px;line-height:1.24;color:var(--navy)}
/* was 82px: the type pass adds height and the brief wants products higher */
.ol-sec{padding:62px 0}
.ol-sec-tight{padding:36px 0}
.ol-sec-bone{background:var(--bone)}
.ol-sec-pale{background:var(--pale2)}
.ol-sec-navy{background:var(--navy);color:#fff}
.ol-sec-navy .ol-h-sec{color:#fff}
.ol-sec-navy .ol-lead{color:rgba(255,255,255,.74)}
.ol-sechead{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;
  margin-bottom:38px;flex-wrap:wrap}
.ol-sechead .ol-lead{max-width:520px;font-size:14.5px;color:var(--granite);margin-top:14px}
.ol-link{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;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)}
.ol-link:hover{gap:14px;color:var(--red);border-color:var(--red)}
.ol-link-w{color:#fff;border-color:rgba(255,255,255,.5)}
.ol-link-w:hover{color:#fff;border-color:#fff}
.ol-crumbs{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dust);padding:22px 0 0}
.ol-crumbs a{color:var(--granite)}
.ol-crumbs a:hover{color:var(--red)}

/* ---- reveal on scroll ----
   Gated behind html.ol-js, which an inline script in the head sets. That gate
   is not decoration: without it .ol-rv{opacity:0} is the CSS default, so if the
   script fails to load, is blocked, or the IntersectionObserver never fires,
   the homepage's category grid -- the most important content on the page after
   the September review -- stays permanently invisible. A reveal is a
   first-scroll affordance and must never be load-bearing for whether content
   can be read at all. With the gate, no JS means no animation and everything
   visible, which is the correct failure. */
.ol-js .ol-rv{opacity:0;transform:translateY(24px);
  transition:opacity .75s var(--ease),transform .75s var(--ease)}
.ol-js .ol-rv.ol-in{opacity:1;transform:none}
.ol-rv-1{transition-delay:.06s}.ol-rv-2{transition-delay:.12s}.ol-rv-3{transition-delay:.18s}
.ol-rv-4{transition-delay:.24s}.ol-rv-5{transition-delay:.30s}.ol-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.
   ========================================================================== */
.ol-hero{padding:0;overflow:hidden}
.ol-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 */
.ol-herobox>.ol-container,.ol-campbox>.ol-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. */
.ol-herobox .ol-bg{position:absolute;inset:0;
  background-image:url('img/hero-79-series.jpg');
  background-size:cover;background-position:68% 62%}
.ol-herobox .ol-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%)}
.ol-hero-in{position:relative;z-index:3;padding:70px 0 62px;max-width:700px}
.ol-hero-in .ol-h-hero{margin:20px 0 22px}
.ol-hero-in .ol-h-hero .ol-ac{color:var(--red)}
.ol-hero-in p{font-size:16px;color:rgba(255,255,255,.78);max-width:430px;margin-bottom:32px}
.ol-hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.ol-hero-veh{display:none}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.ol-hero-terr{display:none}
.ol-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:11.5px;letter-spacing:.07em;text-transform:uppercase;
  display:flex;align-items:center;gap:10px}

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

/* ==========================================================================
   6a. HERO BAND + SEARCH, and the homepage category grid  (client, 3 Sep)
   The hero was a 600px photographic screen with a stat row beneath it. It is
   now a band: enough photograph to set the tone, and search plus the first row
   of categories reachable without scrolling. Everything here serves one
   instruction — shorten the path from landing to a product.
   ========================================================================== */
.ol-heroband{position:relative;background:var(--deep);color:#fff;overflow:hidden;
  padding:52px 0 46px}
.ol-heroband .ol-bg{position:absolute;inset:0;
  background-image:url('img/hero-79-series.jpg');
  background-size:cover;background-position:62% 46%}
.ol-heroband .ol-bg:after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,20,38,.95) 0%,rgba(0,20,38,.86) 46%,
             rgba(0,20,38,.52) 100%)}
.ol-heroband .ol-container{position:relative;z-index:2}
.ol-heroband-in{max-width:680px}
.ol-heroband h1{font-family:var(--display);font-style:italic;text-transform:uppercase;
  font-size:clamp(30px,4.4vw,46px);line-height:1.02;letter-spacing:-.028em}
.ol-heroband p{font-size:17px;line-height:1.55;color:rgba(255,255,255,.82);
  margin:16px 0 26px;max-width:560px}

/* the search field is the hero's main object */
.ol-herosearch{display:flex;align-items:center;gap:10px;background:#fff;
  border-radius:var(--r3);padding:6px 6px 6px 20px;position:relative;
  box-shadow:0 22px 50px -26px rgba(0,0,0,.6);max-width:620px}
.ol-herosearch .ol-mag{width:18px;height:18px;flex-shrink:0;background:currentColor;
  color:var(--dust);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5 21 21'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5 21 21'/%3E%3C/svg%3E") center/contain no-repeat}
.ol-herosearch input{flex:1;min-width:0;border:0;outline:0;background:none;
  font:inherit;font-size:16px;color:var(--navy);height:48px}
.ol-herosearch input::placeholder{color:var(--dust)}
.ol-herosearch .ol-btn{flex-shrink:0;height:48px}
.ol-herosearch .ol-sugg{top:62px;left:0;right:0;text-align:left}

.ol-heroquick{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px}
.ol-heroquick span{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.6)}
.ol-heroquick a{font-size:14px;font-weight:600;color:#fff;
  border:1px solid rgba(255,255,255,.26);border-radius:var(--r3);padding:7px 15px;
  transition:.2s var(--ease)}
.ol-heroquick a:hover{background:#fff;color:var(--navy);border-color:#fff}

/* ---- category grid: broad groups that show what is under them ----
   A top-level name alone tells a first-time visitor nothing, so each tile
   lists four of its children. Plain white rather than the old shuffled navy
   colourways: eight saturated tiles fight the product photography that now
   has to lead, and the richness is what leadership pushed back on. */
.ol-catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ol-cat{background:#fff;border:1px solid var(--hair);border-radius:var(--r);
  padding:20px 20px 16px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;transition:.28s var(--ease)}
.ol-cat:hover{box-shadow:var(--e2)}
/* bottom-right, not top-right: at the top it sat under the part count */
.ol-cat-g{position:absolute;right:-14px;bottom:-12px;width:108px;opacity:.08;
  color:var(--navy);pointer-events:none}
.ol-cat-g svg{width:100%;height:auto}
.ol-cat-h{display:flex;align-items:baseline;gap:8px;position:relative;z-index:2}
.ol-cat-n{font-weight:800;font-size:17px;color:var(--navy);line-height:1.25}
.ol-cat-c{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--dust);margin-left:auto;flex-shrink:0}
.ol-cat-h:hover .ol-cat-n{color:var(--red)}
.ol-cat-s{list-style:none;margin:14px 0 0;position:relative;z-index:2;flex:1}
.ol-cat-s li+li{margin-top:2px}
.ol-cat-s a{display:block;font-size:14px;color:var(--granite);padding:3px 0;
  transition:.16s var(--ease)}
.ol-cat-s a:hover{color:var(--navy);transform:translateX(3px)}
.ol-cat-all{margin-top:14px;font-size:14px;font-weight:700;color:var(--red);
  display:inline-flex;align-items:center;gap:7px;position:relative;z-index:2}
.ol-cat-all span{transition:transform .24s var(--ease)}
.ol-cat-all:hover span{transform:translateX(4px)}

/* ==========================================================================
   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 .ol-pvt .ol-art unchanged.
   ========================================================================== */
.ol-pv{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ol-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)}
.ol-pvt:hover{transform:translateY(-6px);box-shadow:var(--e3);border-color:transparent}
.ol-pvt.ol-on{border-color:var(--red);border-width:1.5px}
.ol-pvt .ol-art{height:146px;display:grid;place-items:center}
.ol-pvt .ol-art svg,.ol-pvt .ol-art img{width:100%;max-width:320px;height:auto;color:var(--navy);
  transition:.5s var(--ease)}
.ol-pvt .ol-art img{max-height:146px;object-fit:contain}
.ol-pvt:hover .ol-art svg,.ol-pvt:hover .ol-art img{transform:translateX(6px) scale(1.04)}
.ol-pvt .ol-mk{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dust)}
.ol-pvt .ol-n{font-weight:800;font-size:20px;line-height:1.1;color:var(--navy);margin-top:9px}
.ol-pvt .ol-c{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--granite);margin-top:11px}
.ol-pvt .ol-cta{margin-top:16px;display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:700;color:var(--red)}
.ol-pvt .ol-cta span{transition:.28s var(--ease)}
.ol-pvt:hover .ol-cta span{transform:translateX(4px)}
.ol-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.
   ========================================================================== */
.ol-vpage{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ol-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)}
.ol-vp:hover{transform:translateY(-5px);box-shadow:var(--e3);border-color:transparent}
.ol-vp.ol-on{border-color:var(--red);border-width:1.5px}
.ol-vp-art{height:118px;display:grid;place-items:center;margin-bottom:4px}
.ol-vp-art svg,.ol-vp-art img{width:100%;max-width:230px;height:auto;
  transition:.5s var(--ease)}
.ol-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 */
.ol-vp:not(.ol-vp-photo) .ol-vp-art svg{color:var(--pale);max-width:200px}
.ol-vp:hover .ol-vp-art img,.ol-vp:hover .ol-vp-art svg{transform:scale(1.05)}
.ol-vp-mk{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dust)}
.ol-vp-n{font-weight:800;font-size:16px;line-height:1.2;color:var(--navy);margin-top:7px}
.ol-vp-c{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--granite);margin-top:8px}
.ol-vp-cta{margin-top:12px;display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:700;color:var(--red)}
.ol-vp-cta span{transition:transform .26s var(--ease)}
.ol-vp:hover .ol-vp-cta span{transform:translateX(4px)}

/* ==========================================================================
   6d. BRAND LANDING PAGE  (client, Aug 28)
   One template, nine brands. The brand contributes a logo, a tagline and ONE
   accent — exposed as --brand and used on the eyebrow rule and the family
   flags, never on a surface, a button or a heading. That is what keeps nine
   brand pages reading as one site, and it is why the template is reusable
   rather than a per-brand design job.
   ========================================================================== */
:root{--brand:var(--red)}

/* ---- hero: full-bleed, same rule as every other band on the site ---- */
.ol-brhero{position:relative;background:var(--deep);color:#fff;overflow:hidden;
  padding:56px 0 46px}
.ol-brhero-bg{position:absolute;inset:0;
  background:radial-gradient(74% 86% at 84% 18%,rgba(12,67,114,.95),transparent 62%),
             radial-gradient(60% 90% at 4% 100%,rgba(255,31,42,.16),transparent 60%),
             linear-gradient(174deg,#00243f,#000c18)}
.ol-brhero .ol-container{position:relative;z-index:2}
.ol-brhero .ol-container{display:flex;flex-wrap:wrap;align-items:center;gap:30px}
.ol-brhero-in{max-width:600px;flex:1 1 460px}
/* the reference leads with product photography; this is the same move, held to
   the right so the copy keeps the container's left edge */
.ol-brart{flex:0 0 360px;max-width:38%;display:grid;place-items:center}
.ol-brart img{width:100%;height:auto;max-height:330px;object-fit:contain;display:block;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.5))}
.ol-brmeta{flex:1 1 100%}
/* the brand's real lockup, at a size that respects it */
.ol-brlogo{display:block;max-width:330px;width:100%;height:auto;margin-bottom:22px}
.ol-brtag{font-family:var(--display);font-style:italic;font-size:clamp(26px,4.4vw,40px);
  line-height:1.02;text-transform:uppercase;letter-spacing:-.028em;
  padding-left:16px;border-left:4px solid var(--brand)}
.ol-brlede{font-size:15.5px;color:rgba(255,255,255,.78);margin:22px 0 30px;max-width:580px}
.ol-brmeta{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:26px;margin-top:34px;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.6)}

/* ---- "Select your 4WD": their signature band, writing to our garage ---- */
.ol-br4wd{background:var(--navy);padding:16px 0}
.ol-br4wd-in{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:#fff}
.ol-br4wd .ol-k{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.72);padding-right:6px}
.ol-br4wd 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;
  font:inherit;font-size:14px;font-weight:600;padding:11px 38px 11px 18px;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='%23ffffff' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center}
.ol-br4wd select:hover:not(:disabled){background-color:rgba(255,255,255,.2)}
.ol-br4wd select:disabled{opacity:.4;cursor:not-allowed}
.ol-br4wd select option{color:var(--graphite)}
.ol-br4wd .ol-go{background:var(--red);color:#fff;font-weight:800;font-size:14px;
  text-transform:uppercase;letter-spacing:.04em;border-radius:var(--r3);
  padding:12px 22px;transition:.22s var(--ease)}
.ol-br4wd .ol-go:hover{background:var(--redhover);transform:translateY(-1px)}
.ol-br4wd .ol-st{margin-left:auto;display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.68);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--r3);padding:10px 18px}
.ol-br4wd .ol-st b{color:#fff;font-weight:500}

/* ---- product families ---- */
.ol-brfam{background:#fff;border:1px solid var(--hair);border-radius:var(--r);
  padding:24px 22px 22px;position:relative;overflow:hidden;transition:.32s var(--ease)}
.ol-brfam:hover{transform:translateY(-5px);box-shadow:var(--e3);border-color:transparent}
.ol-brfam-art{height:74px;display:grid;place-items:center;margin-bottom:14px}
.ol-brfam-art svg{height:74px;width:auto;color:var(--pale)}
.ol-brfam:hover .ol-brfam-art svg{color:var(--mid)}
.ol-brfam h4{font-weight:800;font-size:17px;line-height:1.25;color:var(--navy)}
.ol-brfam .ol-m{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dust);margin:9px 0 11px}
.ol-brfam p{font-size:14px;color:var(--granite);line-height:1.6}
.ol-brflag{position:absolute;top:14px;right:14px;background:var(--brand);color:var(--graphite);
  font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;border-radius:var(--r3);padding:4px 9px}

/* ---- kits, indexed by vehicle. No fitment badge: the vehicle IS the name. ---- */
.ol-brkitfind input{border:1px solid var(--hair);border-radius:var(--r3);height:42px;
  padding:0 18px;font:inherit;font-size:14px;color:var(--navy);background:#fff;
  outline:0;width:230px;transition:.2s var(--ease)}
.ol-brkitfind input:focus{border-color:var(--navy);box-shadow:var(--e1)}
.ol-brkits{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ol-brkit{background:#fff;border:1px solid var(--hair);border-radius:var(--r);
  overflow:hidden;display:block;transition:.32s var(--ease)}
.ol-brkit:hover{transform:translateY(-5px);box-shadow:var(--e3);border-color:transparent}
.ol-brkit-art{background:var(--bone);height:186px;display:grid;place-items:center;
  padding:16px;overflow:hidden}
/* an explicit pixel cap, not max-height:100% — a percentage does not reliably
   bind on a grid item once max-width has already sized the image, and the
   photography gets clipped */
.ol-brkit-art img{max-width:100%;max-height:154px;width:auto;height:auto;display:block;
  object-fit:contain;transition:.5s var(--ease)}
.ol-brkit:hover .ol-brkit-art img{transform:scale(1.05)}
.ol-brkit-b{padding:18px 18px 20px}
.ol-brkit-n{font-weight:800;font-size:14px;color:var(--navy);line-height:1.3}
.ol-brkit-y{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dust);margin-top:6px}
.ol-brkit-p{font-weight:800;font-size:15px;color:var(--navy);margin-top:12px}
.ol-brkit-p span{font-weight:600;color:var(--granite)}
.ol-brkit-c{margin-top:12px;font-size:14px;font-weight:700;color:var(--red);
  display:inline-flex;align-items:center;gap:6px}
.ol-brkit-c span{transition:transform .24s var(--ease)}
.ol-brkit:hover .ol-brkit-c span{transform:translateX(4px)}
.ol-brkits-none{background:var(--bone);border-radius:var(--r);padding:34px 30px;text-align:center}
.ol-brkits-none h4{font-weight:800;font-size:19px;color:var(--navy)}
.ol-brkits-none p{font-size:14px;color:var(--granite);margin:10px 0 18px}

/* ==========================================================================
   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.
   ========================================================================== */
.ol-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:208px;gap:16px}
.ol-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)}
.ol-bx:hover{transform:translateY(-5px);box-shadow:var(--e3);border-color:transparent}
.ol-bx .ol-g{position:absolute;right:-14px;top:-6px;width:170px;opacity:.15;
  transition:.5s var(--ease);pointer-events:none;color:var(--navy)}
.ol-b-deep .ol-g,.ol-b-navy .ol-g,.ol-b-mid .ol-g{color:#fff}
.ol-b-white .ol-g,.ol-b-pale .ol-g{color:var(--navy)}
.ol-bx:hover .ol-g{transform:scale(1.09) rotate(-3deg);opacity:.22}
.ol-bx .ol-nm{font-weight:800;font-size:18px;line-height:1.2;position:relative;z-index:2}
.ol-bx .ol-ct{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  margin-top:9px;position:relative;z-index:2;opacity:.72}
.ol-bx .ol-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}
.ol-bx:hover .ol-go{transform:rotate(-45deg)}
/* kept for the style guide's record of the original bento; unused on the page */
.ol-b-w2{grid-column:span 2}
.ol-b-h2{grid-row:span 2}
/* the "most fitted" flag is the merchandising lever now that sizes are equal */
.ol-bx .ol-flag{position:relative;z-index:2;display:inline-block;margin-bottom:8px}
/* tile colourways — navy family + red signal only */
.ol-b-deep{background:linear-gradient(150deg,#0C4372,#001D36);color:#fff;border-color:transparent}
.ol-b-deep .ol-go{background:var(--red);color:#fff}
.ol-b-navy{background:var(--navy);color:#fff;border-color:transparent}
.ol-b-navy .ol-go{background:var(--red);color:#fff}
.ol-b-mid{background:linear-gradient(150deg,#12507F,#0C4372);color:#fff;border-color:transparent}
.ol-b-mid .ol-go{background:#fff;color:var(--navy)}
.ol-b-pale{background:var(--pale);border-color:transparent}
.ol-b-pale .ol-nm{color:var(--navy)}.ol-b-pale .ol-ct{color:var(--granite)}
.ol-b-pale .ol-go{background:var(--navy);color:#fff}
.ol-b-white .ol-nm{color:var(--navy)}.ol-b-white .ol-ct{color:var(--granite)}
.ol-b-white .ol-go{background:var(--bone);color:var(--navy)}
.ol-b-white:hover .ol-go{background:var(--navy);color:#fff}

/* ==========================================================================
   8. PRODUCT CARDS — rounded, floating, pill tags, rotating add button
   ========================================================================== */
.ol-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ol-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ol-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.ol-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}
.ol-pc:hover{transform:translateY(-6px);box-shadow:var(--e3);border-color:transparent}
.ol-pshot{position:relative;aspect-ratio:4/3;background:linear-gradient(155deg,#fff,var(--bone2));
  display:grid;place-items:center;overflow:hidden}
.ol-pshot>svg{width:auto;max-width:68%;max-height:76%;transition:.5s var(--ease)}
.ol-pc:hover .ol-pshot>svg{transform:scale(1.07) translateY(-3px)}
.ol-pshot .ol-code{position:absolute;left:14px;bottom:11px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.06em;color:var(--dust)}
.ol-tg{position:absolute;top:13px;left:13px;font-family:var(--mono);font-size:11.5px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;
  border-radius:var(--r3);z-index:2}
.ol-tg-red{background:var(--red);color:#fff}
.ol-tg-navy{background:var(--navy);color:#fff}
.ol-tg-pale{background:var(--pale);color:var(--navy)}
.ol-tg-bone{background:var(--bone3);color:var(--granite)}
.ol-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:14px;opacity:0;transform:translateY(-6px);
  transition:.3s var(--ease);z-index:3}
.ol-pc:hover .ol-wish{opacity:1;transform:none}
.ol-wish:hover,.ol-wish.ol-on{color:var(--red);border-color:var(--red)}
.ol-quick{position:absolute;left:14px;right:14px;bottom:14px;background:var(--navy);color:#fff;
  text-align:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;
  text-transform:uppercase;padding:10px;border-radius:var(--r3);opacity:0;
  transform:translateY(12px);transition:.32s var(--ease);z-index:3}
.ol-pc:hover .ol-quick{opacity:1;transform:none}
.ol-pb{padding:18px 19px 20px;display:flex;flex-direction:column;flex:1}
.ol-pbrand{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--red);margin-bottom:8px}
/* the brand line is a link where that brand has a landing page */
.ol-pbrand a{color:inherit;border-bottom:1px solid transparent;transition:.16s}
.ol-pbrand a:hover{color:var(--navy);border-bottom-color:currentColor}
.ol-fitl{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;
  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}
.ol-fitl .ol-d{width:6px;height:6px;border-radius:50%;background:var(--fit)}
.ol-fitl.ol-no{color:var(--granite);background:var(--bone3)}
.ol-fitl.ol-no .ol-d{background:var(--dust)}
.ol-fitl.ol-warn{color:var(--navy);background:var(--pale)}
.ol-fitl.ol-warn .ol-d{background:var(--navy)}
.ol-pname{font-weight:700;font-size:14px;line-height:1.35;color:var(--navy);
  margin-bottom:10px;min-height:37px}
.ol-stars{color:var(--red);font-size:14px;letter-spacing:1px}
.ol-stars span{color:var(--dust);font-family:var(--mono);font-size:11.5px;margin-left:6px;
  letter-spacing:.06em}
.ol-pspec{font-family:var(--mono);font-size:11.5px;color:var(--granite);line-height:1.75;
  padding-top:11px;margin-top:11px;border-top:1px solid var(--hair2)}
.ol-pfoot{margin-top:auto;padding-top:15px;display:flex;align-items:flex-end;
  justify-content:space-between;gap:10px}
.ol-price{font-weight:800;font-size:19px;color:var(--navy);letter-spacing:-.015em}
.ol-price small{display:block;font-family:var(--mono);font-size:11.5px;font-weight:400;
  color:var(--dust);letter-spacing:.06em;text-transform:uppercase;margin-top:4px}
.ol-was{font-size:14px;color:var(--dust);text-decoration:line-through;font-weight:500}
.ol-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)}
.ol-pc:hover .ol-add{background:var(--red);color:#fff;transform:rotate(90deg)}
.ol-add.ol-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.ol-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. */
.ol-mq{background:var(--navy);color:#fff;padding:20px 0;overflow:hidden;border-radius:var(--r)}
.ol-mq-in{display:flex;align-items:center;white-space:nowrap;animation:slide 34s linear infinite}
.ol-mq-in b{font-family:var(--display);font-style:italic;font-size:26px;text-transform:uppercase;
  padding:0 26px;opacity:.92;letter-spacing:-.02em}
.ol-mq-in i{color:var(--red);font-style:normal;font-size:16px;align-self:center}
.ol-bt{flex:0 0 auto;height:74px;padding:0 24px;display:grid;place-items:center;
  opacity:.88;transition:.3s var(--ease)}
.ol-bt img{max-height:52px;max-width:206px;width:auto;height:auto;display:block;
  object-fit:contain}
.ol-bt:hover{opacity:1;transform:translateY(-3px)}
.ol-mq:hover .ol-mq-in{animation-play-state:paused}

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

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

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

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

/* promo boxes */
.ol-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)}
.ol-promo:hover{transform:translateY(-4px);box-shadow:var(--e3)}
.ol-promo .ol-g{position:absolute;right:-24px;bottom:-16px;width:270px;opacity:.5;
  transition:.5s var(--ease)}
.ol-promo:hover .ol-g{transform:scale(1.05)}
.ol-promo .ol-in{position:relative;z-index:2;max-width:340px}
.ol-promo h3{font-weight:800;font-size:23px;line-height:1.15;margin:12px 0}
.ol-promo-sm{min-height:0;padding:22px 26px;flex-direction:row;align-items:center;gap:18px}
.ol-promo-sm svg{width:80px;flex-shrink:0}
.ol-promo-sm .ol-t{font-weight:800;font-size:16.5px;margin-top:6px}

/* ---- locator control row: search + province on one line ---- */
.ol-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 */
.ol-locbar input,.ol-locbar .ol-locsel{height:44px;padding-top:0;padding-bottom:0}
.ol-locsel{width:100%;border:1px solid var(--hair);border-radius:var(--r3);
  padding:13px 40px 13px 18px;font-size:14px;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}
.ol-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. */
.ol-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}
.ol-maphead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  flex-wrap:wrap}
.ol-mapcount{display:flex;align-items:baseline;gap:12px}
.ol-mapcount b{font-family:var(--display);font-style:italic;font-size:44px;line-height:.9;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ol-mapcount span{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.6)}
.ol-mapsvg{display:block;width:100%;height:auto;margin:16px 0 8px}
.ol-m-nb{fill:#062842;stroke:#10405f;stroke-width:1.6}
.ol-m-za{fill:#0C4372;stroke:#4d8cbf;stroke-width:2.2}
.ol-m-lb{font-family:var(--mono);font-size:16px;letter-spacing:.06em;text-transform:uppercase;
  fill:rgba(255,255,255,.5)}
.ol-m-city{fill:rgba(255,255,255,.5)}
.ol-m-pin{cursor:pointer}
.ol-m-halo{fill:rgba(255,31,42,.18);transition:.3s var(--ease);pointer-events:none}
.ol-m-dot{fill:var(--red);stroke:rgba(255,255,255,.85);stroke-width:2;transition:.3s var(--ease)}
.ol-m-n{font-family:var(--mono);font-weight:700;font-size:18px;fill:#fff;text-anchor:middle;
  pointer-events:none}
.ol-m-pin:hover .ol-m-dot{fill:#fff;stroke:var(--red)}
.ol-m-pin:hover .ol-m-halo{fill:rgba(255,255,255,.22)}
.ol-m-pin.ol-off .ol-m-dot{fill:#2b4b66;stroke:rgba(255,255,255,.2)}
.ol-m-pin.ol-off .ol-m-halo{fill:transparent}
.ol-m-pin.ol-off .ol-m-n{fill:rgba(255,255,255,.45)}
.ol-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:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.55)}
.ol-mapkey{display:inline-flex;align-items:center;gap:8px}
.ol-mapkey i{border-radius:50%;background:var(--red);border:1.5px solid rgba(255,255,255,.8);
  display:block}
.ol-mapkey .ol-k1{width:9px;height:9px}
.ol-mapkey .ol-k2{width:17px;height:17px}
.ol-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. */
.ol-ftr{background:var(--deep);color:rgba(255,255,255,.62);padding:70px 0 0;font-size:14px;
  border-radius:0;margin-top:0}
.ol-ftr .ol-cols{display:grid;grid-template-columns:1.5fr repeat(5,1fr);gap:28px;
  padding-bottom:46px;border-bottom:1px solid var(--hairw)}
.ol-ftr .ol-logo img{height:56px}
.ol-ftr h5{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;margin-bottom:18px}
.ol-ftr ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.ol-ftr ul a{transition:.2s var(--ease);display:inline-block}
.ol-ftr ul a:hover{color:#fff;transform:translateX(3px)}
.ol-ftr .ol-bot{padding:22px 0;display:flex;justify-content:space-between;gap:16px;
  flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.38)}


/* ==========================================================================
   12. FITMENT FINDER
   ========================================================================== */
.ol-finder{padding:0 0 60px}
/* full-bleed, same rule as the hero — this box IS the Fit page's hero */
.ol-fbox{background:var(--deep);border-radius:0;padding:54px 0 48px;color:#fff;
  position:relative;overflow:hidden}
.ol-fbox .ol-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%)}
.ol-fbox>*{position:relative;z-index:2}
.ol-prog{height:3px;background:rgba(255,255,255,.14);border-radius:2px;margin:30px 0 26px;
  overflow:hidden}
.ol-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--mid),var(--red));
  border-radius:2px;transition:width .7s var(--ease)}
.ol-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ol-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)}
.ol-st.ol-on{background:#fff;border-color:#fff;color:var(--navy);transform:translateY(-4px);
  box-shadow:0 24px 44px -20px rgba(0,0,0,.5)}
.ol-st .ol-n{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--red);margin-bottom:12px}
.ol-st .ol-q{font-weight:800;font-size:14.5px;margin-bottom:14px}
.ol-st .ol-v{font-size:14px;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}
.ol-st.ol-on .ol-v{background:var(--bone);border-color:var(--hair);color:var(--navy)}
.ol-st.ol-done .ol-q{opacity:.62}
/* a completed step's value is a button — clicking it reopens that question */
.ol-st .ol-v.ol-vback{width:100%;font-family:inherit;font-size:14px;font-weight:600;
  text-align:left;cursor:pointer;transition:.2s var(--ease)}
.ol-st .ol-v.ol-vback:hover{border-color:var(--red)}
.ol-st.ol-on .ol-v.ol-vback:hover{background:#fff}
/* pills sit on the active step's white card, so give them a tinted ground */
.ol-st.ol-on .ol-pill-l{background:var(--bone)}
.ol-st.ol-on .ol-pill-l:hover{background:#fff;border-color:var(--navy)}
.ol-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.ol-st.ol-on .ol-pills{margin-top:2px}
.ol-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}
.ol-pill:hover{background:rgba(255,255,255,.14)}
.ol-pill.ol-on{background:var(--red);border-color:var(--red);color:#fff}
.ol-pill-l{border-color:var(--hair);background:#fff;color:var(--navy)}
.ol-pill-l:hover{background:var(--bone);transform:translateY(-2px)}
.ol-pill-l.ol-on{background:var(--navy);border-color:var(--navy);color:#fff}
.ol-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}
.ol-garage h4{font-weight:800;font-size:18px}
.ol-garage .ol-m{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  color:rgba(255,255,255,.62);margin-top:7px;text-transform:uppercase}
.ol-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
   ========================================================================== */
.ol-cathead{padding:14px 0 0}
.ol-catbox{background:linear-gradient(140deg,var(--navy),var(--deep));border-radius:0;
  padding:48px 0;color:#fff;position:relative;overflow:hidden}
.ol-catbox>.ol-container{position:relative}
.ol-catbox .ol-g{position:absolute;right:26px;top:-26px;width:250px;opacity:.14}
.ol-catbox p{max-width:560px;color:rgba(255,255,255,.76);font-size:14.5px;margin-top:14px}
.ol-layout{display:grid;grid-template-columns:262px 1fr;gap:30px;padding:30px 0 80px;
  align-items:start}
.ol-fx{background:#fff;border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;
  position:sticky;top:152px}
.ol-fc{border-bottom:1px solid var(--hair2);padding:19px 20px}
.ol-fc:last-child{border-bottom:0}
.ol-fc h5{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--navy);font-weight:700;display:flex;justify-content:space-between;
  margin-bottom:14px}
.ol-fc label{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--granite);
  padding:6px 0;cursor:pointer;transition:.2s var(--ease)}
.ol-fc label:hover{color:var(--navy);transform:translateX(3px)}
.ol-fc input{position:absolute;opacity:0;width:0;height:0}
.ol-cb{width:16px;height:16px;border:1.5px solid var(--dust);border-radius:5px;flex-shrink:0;
  transition:.22s var(--ease);position:relative}
.ol-fc input:checked+.ol-cb{background:var(--red);border-color:var(--red)}
.ol-fc input:checked+.ol-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)}
.ol-fc input:focus-visible+.ol-cb{outline:2px solid var(--navy);outline-offset:2px}
.ol-fc .ol-cnt{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--dust)}
.ol-fc-fit{background:linear-gradient(150deg,var(--pale),#fff)}
.ol-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}
.ol-chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:20px;min-height:1px}
.ol-chip{background:#fff;border:1px solid var(--hair);border-radius:var(--r3);padding:7px 14px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--navy);display:inline-flex;gap:9px;align-items:center;
  transition:.24s var(--ease);cursor:pointer}
.ol-chip:hover{border-color:var(--red);transform:translateY(-2px)}
.ol-chip .ol-x{color:var(--red);font-weight:700}
.ol-chip-dash{border-style:dashed}
.ol-sortsel{border:1px solid var(--hair);background:#fff;border-radius:var(--r3);
  padding:10px 34px 10px 18px;font-size:14px;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}
.ol-empty{border:1px dashed var(--hair);border-radius:var(--r);padding:52px 30px;
  text-align:center;color:var(--granite)}
.ol-empty h4{font-weight:800;font-size:19px;color:var(--navy);margin-bottom:10px}
.ol-callout{background:var(--bone);border-radius:var(--r);padding:26px 30px;
  border-left:4px solid var(--red)}

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

/* review block */
.ol-rev{border:1px solid var(--hair);border-radius:var(--r);padding:22px 24px;background:#fff}
.ol-rev+.ol-rev{margin-top:12px}
.ol-rev .ol-h{display:flex;justify-content:space-between;gap:14px;margin-bottom:9px;flex-wrap:wrap}
.ol-rev b{color:var(--navy);font-size:14px}
.ol-rev p{font-size:14px;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.ol-md; in WordPress it is a one-line
   HTML widget dropped into this section.
   ========================================================================== */
.ol-gr{display:grid;grid-template-columns:270px 1fr;gap:30px;align-items:start}
.ol-gr-score{background:#fff;border:1px solid var(--hair);border-radius:var(--r);
  padding:26px 24px;text-align:center}
/* NB: .ol-num is taken by the campaign stat blocks, hence gr-num */
.ol-gr-score .ol-gr-num{height:40px;display:grid;place-items:center}
.ol-gr-stars{display:flex;gap:4px;justify-content:center;margin-top:14px}
.ol-gr-stars i{width:15px;height:15px;border-radius:3px;background:var(--bone3);
  display:block;font-style:normal}
.ol-gr-score .ol-of{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--dust);margin-top:14px}
.ol-gr-score .ol-src{margin-top:16px;padding-top:15px;border-top:1px solid var(--hair2);
  font-size:14px;font-weight:700;color:var(--navy)}
.ol-grc{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:22px 22px 24px}
.ol-grc .ol-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ol-grc .ol-av{width:36px;height:36px;border-radius:50%;background:var(--bone2);flex-shrink:0}
.ol-sk{background:var(--bone2);border-radius:4px;height:9px}
.ol-grc .ol-top .ol-sk{height:10px}
.ol-grc .ol-top .ol-sk+.ol-sk{margin-top:7px;height:7px;background:var(--bone)}
.ol-grc .ol-body .ol-sk{margin-top:9px}
.ol-gr-note{margin-top:20px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dust);display:flex;align-items:center;gap:10px;
  flex-wrap:wrap}
.ol-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. */
.ol-ti-host:empty{display:none}
.ol-ti-host.ol-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.
   ========================================================================== */
.ol-qwrap{display:grid;grid-template-columns:1fr 340px;gap:30px;align-items:start}
.ol-qform{background:#fff;border:1px solid var(--hair);border-radius:var(--r);
  overflow:hidden}
.ol-qsec{padding:26px 30px;border-bottom:1px solid var(--hair2)}
.ol-qsec:last-child{border-bottom:0}
.ol-qsec h3{font-weight:800;font-size:18px;color:var(--navy);margin-bottom:14px}
.ol-qhelp{font-size:14px;color:var(--dust);line-height:1.6}
.ol-qf{display:block;margin-top:14px}
.ol-qf>span{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dust);margin-bottom:7px}
.ol-qf>span b{color:var(--red)}
.ol-qf input,.ol-qf textarea{width:100%;border:1px solid var(--hair);border-radius:var(--r2);
  padding:12px 15px;font:inherit;font-size:14px;color:var(--navy);background:#fff;
  outline:0;transition:.2s var(--ease)}
.ol-qf textarea{border-radius:var(--r2);resize:vertical;line-height:1.6}
.ol-qf input:focus,.ol-qf textarea:focus{border-color:var(--navy);box-shadow:var(--e1)}
.ol-qf input.ol-bad{border-color:var(--red);background:#FFF7F7}
.ol-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:14px;font-weight:600;
  color:var(--redhover)}

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

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

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

.ol-qdone{padding:44px 34px 40px;text-align:center}
.ol-qdone .ol-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}
.ol-qdone h3{font-weight:800;font-size:23px;color:var(--navy);margin-bottom:12px}
.ol-qdone p{font-size:14px;color:var(--granite);max-width:460px;margin:0 auto;line-height:1.65}

/* ==========================================================================
   15. CART / CHECKOUT
   ========================================================================== */
.ol-cartwrap{display:grid;grid-template-columns:1fr 380px;gap:30px;padding:26px 0 80px;
  align-items:start}
.ol-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)}
.ol-cline+.ol-cline{margin-top:12px}
.ol-cline:hover{box-shadow:var(--e2);border-color:transparent}
.ol-cline .ol-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)}
.ol-cline .ol-sh svg{max-width:74%;max-height:74%;color:var(--mid)}
.ol-cline h4{font-weight:700;font-size:14px;color:var(--navy);line-height:1.3;margin-bottom:6px}
.ol-cline .ol-rm{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dust);border-bottom:1px solid var(--hair);margin-top:10px;display:inline-block;
  cursor:pointer}
.ol-cline .ol-rm:hover{color:var(--red);border-color:var(--red)}
.ol-cline .ol-rt{text-align:right}
.ol-qty-sm{display:inline-flex;align-items:center;border:1.5px solid var(--hair);
  border-radius:var(--r3);background:#fff;margin-bottom:10px}
.ol-qty-sm button{padding:7px 12px;color:var(--dust)}
.ol-qty-sm button:hover{color:var(--red)}
.ol-qty-sm span{padding:0 6px;font-weight:700;color:var(--navy);min-width:30px;text-align:center;
  font-size:14px}
.ol-sumbox{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:26px 28px;
  position:sticky;top:152px;box-shadow:var(--e1)}
.ol-sumbox h3{font-weight:800;font-size:19px;color:var(--navy);margin-bottom:20px}
.ol-sr{display:flex;justify-content:space-between;gap:14px;padding:9px 0;font-size:14px;
  color:var(--granite)}
.ol-sr b{color:var(--navy);font-weight:700}
.ol-sr.ol-tot{border-top:1px solid var(--hair);margin-top:10px;padding-top:16px;font-size:15px}
.ol-sr.ol-tot b{font-size:22px;font-weight:800;letter-spacing:-.02em}
.ol-opt{border:1.5px solid var(--hair);border-radius:var(--r);padding:16px 18px;cursor:pointer;
  transition:.24s var(--ease);display:block;background:#fff}
.ol-opt+.ol-opt{margin-top:10px}
.ol-opt:hover{border-color:var(--navy)}
.ol-opt.ol-on{border-color:var(--red);background:linear-gradient(150deg,rgba(255,31,42,.04),#fff)}
.ol-opt .ol-t{display:flex;align-items:center;gap:11px;font-weight:800;font-size:14px;
  color:var(--navy)}
.ol-opt .ol-radio{width:17px;height:17px;border-radius:50%;border:1.5px solid var(--dust);
  flex-shrink:0;position:relative;transition:.2s}
.ol-opt.ol-on .ol-radio{border-color:var(--red);border-width:5px}
.ol-opt p{font-size:14px;color:var(--granite);margin-top:7px;padding-left:28px}
.ol-opt .ol-pr{margin-left:auto;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--granite)}
.ol-field{margin-bottom:14px}
.ol-field label{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--navy);font-weight:700;margin-bottom:7px}
.ol-field input,.ol-field select,.ol-field textarea{width:100%;border:1px solid var(--hair);
  border-radius:var(--r3);padding:13px 18px;font-size:14px;background:#fff;outline:0;
  transition:.2s}
.ol-field textarea{border-radius:var(--r);min-height:82px;resize:vertical}
.ol-field input:focus,.ol-field select:focus,.ol-field textarea:focus{border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(0,45,82,.08)}
.ol-field .ol-hint{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--dust);
  margin-top:6px;text-transform:uppercase}
.ol-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ol-panel{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:28px 30px;
  margin-bottom:16px}
.ol-panel h3{font-weight:800;font-size:18px;color:var(--navy);margin-bottom:18px;display:flex;align-items:center;gap:12px}
.ol-panel h3 .ol-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}
.ol-dealer{border:1px solid var(--hair);border-radius:var(--r2);padding:14px 16px;
  display:flex;gap:12px;align-items:center;transition:.22s var(--ease)}
.ol-dealer+.ol-dealer{margin-top:9px}
.ol-dealer[data-d]{cursor:pointer}
.ol-dealer:hover{border-color:var(--navy)}
.ol-dealer.ol-on{border-color:var(--red);background:rgba(255,31,42,.03)}
.ol-dealer .ol-radio{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--dust);
  flex-shrink:0;transition:.2s}
.ol-dealer.ol-on .ol-radio{border-color:var(--red);border-width:4.5px}
.ol-dealer .ol-dpin{width:30px;height:30px;border-radius:50%;background:var(--pale);color:var(--navy);
  display:grid;place-items:center;flex-shrink:0}
.ol-dealer .ol-n{font-weight:700;font-size:14px;color:var(--navy);line-height:1.3}
.ol-dealer .ol-m{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--dust);
  text-transform:uppercase;margin-top:5px;line-height:1.5}
.ol-dealer .ol-tel{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--granite);
  white-space:nowrap;border-bottom:1px solid transparent;align-self:flex-start;padding-top:2px}
.ol-dealer .ol-tel:hover{color:var(--red);border-color:var(--red)}
/* The list is long — 58 centres — so it scrolls inside its own panel. */
.ol-loclist{max-height:430px;overflow-y:auto;padding-right:6px;
  -webkit-overflow-scrolling:touch}
.ol-loclist::-webkit-scrollbar{width:8px}
.ol-loclist::-webkit-scrollbar-track{background:var(--bone);border-radius:4px}
.ol-loclist::-webkit-scrollbar-thumb{background:var(--hair);border-radius:4px}
.ol-loclist::-webkit-scrollbar-thumb:hover{background:var(--dust)}
/* The prompt state, shown before anyone has searched. It has to read as an
   invitation rather than a failure, so it borrows the dashed-hairline treatment
   of the empty states but keeps the navy pin and a positive heading. */
/* min-height holds the panel at roughly the height the results list will take,
   so the column does not collapse next to the map and then jump when the first
   search runs */
.ol-locask{border:1px dashed var(--hair);border-radius:var(--rbig);background:var(--bone);
  padding:46px 34px;text-align:center;min-height:410px;
  display:grid;align-content:center;justify-items:center}
.ol-locask svg{color:var(--navy);opacity:.5;margin-bottom:14px}
.ol-locask h4{font-size:16px;font-weight:800;color:var(--navy);letter-spacing:-.01em;
  margin-bottom:8px}
.ol-locask p{font-size:14px;color:var(--granite);max-width:340px;margin:0 auto;line-height:1.6}
.ol-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)}
.ol-done-box .ol-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}
.ol-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}
.ol-done-box p{color:var(--granite);font-size:14.5px;max-width:460px;margin:0 auto 12px}

/* toast */
.ol-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:.06em;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}
.ol-toast.ol-up{transform:translate(-50%,0)}
.ol-toast .ol-d{width:7px;height:7px;border-radius:50%;background:var(--fit)}

/* ==========================================================================
   16. CAMPAIGN PAGE
   ========================================================================== */
.ol-camp{padding:0}
.ol-campbox{border-radius:0;overflow:hidden;position:relative;background:var(--deep);
  color:#fff;min-height:580px;display:flex;align-items:flex-end}
.ol-campbox .ol-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)}
.ol-campbox .ol-in{position:relative;z-index:3;padding:0 0 62px;max-width:640px}
.ol-campbox .ol-h-hero{font-size:66px}
.ol-kick{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.ol-kick .ol-rule{height:1px;width:54px;background:var(--red)}
.ol-campbox p{max-width:470px;font-size:16px;color:rgba(255,255,255,.8);margin:20px 0 30px}
.ol-campart{position:absolute;right:40px;top:50%;transform:translateY(-50%);width:210px;
  z-index:2;animation:float 10s ease-in-out infinite}
.ol-numrow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px}
.ol-num{border-radius:var(--r);padding:28px 26px;color:#fff;transition:.34s var(--ease)}
.ol-num:hover{transform:translateY(-5px);box-shadow:var(--e3)}
.ol-num:nth-child(1){background:var(--navy)}
.ol-num:nth-child(2){background:var(--mid)}
.ol-num:nth-child(3){background:var(--deep)}
.ol-num:nth-child(4){background:var(--red)}
.ol-num .ol-v{font-family:var(--display);font-style:italic;font-size:40px;line-height:1;
  letter-spacing:-.035em}
.ol-num .ol-k{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  margin-top:10px;opacity:.85}
.ol-feat{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.ol-fside{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:52px 46px;
  display:flex;flex-direction:column;justify-content:center}
.ol-fside.ol-bone{background:linear-gradient(150deg,var(--bone),var(--bone3));border-color:transparent}
.ol-fvis{border-radius:var(--r);overflow:hidden;position:relative;min-height:430px;
  display:grid;place-items:center;background:linear-gradient(150deg,#0C4372,#001D36)}
.ol-feat h3{font-weight:800;font-size:25px;line-height:1.15;color:var(--navy);margin:16px 0}
.ol-feat p{color:var(--granite);font-size:14.5px;margin-bottom:14px}
.ol-cutlist{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:10px}
.ol-cutlist li{display:flex;gap:12px;font-size:14px;color:var(--granite);align-items:flex-start}
.ol-cutlist .ol-tk{color:var(--red);font-weight:800}
.ol-route{border:1px solid var(--hair);background:#fff;border-radius:var(--r);padding:26px;
  transition:.32s var(--ease)}
.ol-route:hover{transform:translateY(-5px);box-shadow:var(--e2)}
.ol-route h4{font-weight:800;font-size:16px;margin:12px 0 9px;color:var(--navy)}
.ol-route p{font-size:14px;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. */
.ol-cta-band{background:linear-gradient(102deg,var(--deep) 0%,var(--navy) 56%,var(--red) 116%);
  border-radius:0;color:#fff;padding:52px 0}
.ol-cta-band>.ol-container{display:flex;align-items:center;justify-content:space-between;
  gap:30px;flex-wrap:wrap}
.ol-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
   ========================================================================== */
.ol-gwrap{padding:34px 0 90px}
.ol-gcard{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:38px 40px;
  margin-bottom:18px}
.ol-sws{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:18px 0 8px}
.ol-sw{border-radius:var(--r2);overflow:hidden;border:1px solid var(--hair)}
.ol-sw .ol-c{height:72px}
.ol-sw .ol-m{padding:11px 12px;font-family:var(--mono);font-size:11.5px;line-height:1.7;
  color:var(--granite)}
.ol-sw .ol-m b{display:block;color:var(--navy);font-size:14px;letter-spacing:.09em;
  text-transform:uppercase}
.ol-tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ol-tbl{width:100%;min-width:620px;border-collapse:collapse;margin-top:18px;font-size:14px}
.ol-tbl th{background:var(--navy);color:#fff;text-align:left;padding:12px 14px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  font-weight:500}
.ol-tbl td{padding:12px 14px;border-bottom:1px solid var(--hair);color:var(--granite);
  vertical-align:top}
.ol-tbl td:first-child{color:var(--navy);font-weight:700}
.ol-tbl tr:nth-child(even) td{background:#FBFAF8}
.ol-tbl code{font-family:var(--mono);font-size:11px;background:var(--pale);padding:2px 6px;
  border-radius:4px;color:var(--navy)}
.ol-prin{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px}
.ol-prin .ol-p{border-top:2px solid var(--red);padding-top:17px}
.ol-prin .ol-p:nth-child(3n-1){border-color:var(--navy)}
.ol-prin .ol-p:nth-child(3n){border-color:var(--mid)}
.ol-prin h4{font-weight:800;color:var(--navy);font-size:14.5px;margin-bottom:9px}
.ol-prin p{font-size:14px;color:var(--granite);line-height:1.62}
.ol-notebox{background:linear-gradient(140deg,var(--navy),var(--deep));color:#fff;
  border-radius:var(--r);padding:38px 42px;margin-top:8px}
.ol-notebox h3{font-weight:800;font-size:20px;margin-bottom:16px}
.ol-notebox p{color:rgba(255,255,255,.78);font-size:14px;max-width:820px;margin-bottom:12px}
.ol-notebox ul{margin-left:18px;color:rgba(255,255,255,.78);font-size:14px;line-height:1.95}
.ol-notebox b{color:#fff}
.ol-demobar{background:var(--graphite);color:rgba(255,255,255,.7);font-family:var(--mono);
  font-size:11.5px;letter-spacing:.07em;text-transform:uppercase}
.ol-demobar .ol-container{display:flex;align-items:center;gap:16px;height:34px;flex-wrap:wrap}
.ol-demobar b{color:#fff;font-weight:500}
.ol-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 */
  .ol-icohide{display:none}
  .ol-srch{width:168px}
  .ol-nav a{padding:8px 9px;font-size:14px}
}
@media(max-width:1180px){
  .ol-vgrid{grid-template-columns:repeat(3,1fr)}
  .ol-nav a{padding:8px 7px;font-size:14px}
  .ol-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 */
  .ol-fitpill .ol-inner{flex-wrap:wrap;border-radius:var(--r);padding:12px 14px}
  .ol-fitpill select{flex:1 1 118px;min-width:0}
  .ol-fitpill .ol-st{margin-left:0;width:100%;justify-content:flex-start}
}
@media(max-width:980px){
  .ol-container{padding:0 22px}
  .ol-grid4,.ol-grid3,.ol-trust,.ol-counts,.ol-steps,.ol-numrow,.ol-sws,.ol-prin,.ol-bento,.ol-vpage,
  .ol-brkits,.ol-catgrid{grid-template-columns:repeat(2,1fr)}
  .ol-layout,.ol-pdp,.ol-split,.ol-feat,.ol-gal,.ol-cartwrap,.ol-row2,.ol-grid2,.ol-gr,.ol-qwrap{grid-template-columns:1fr}
  .ol-bento{grid-auto-rows:178px}
  .ol-b-h2{grid-row:span 1}
  .ol-h-hero{font-size:42px}
  .ol-campbox .ol-h-hero{font-size:44px}
  .ol-hero-veh,.ol-campart,.ol-hero-badge{display:none}
  .ol-hero-in,.ol-campbox .ol-in{padding:44px 0}
  .ol-fbox,.ol-catbox{padding:36px 0}
  .ol-fx{position:static}
  .ol-sumbox,.ol-qside{position:static}
  .ol-split .ol-cp,.ol-fside{padding:36px 30px}
  .ol-cta-band{padding:36px 0}
  .ol-heroband{padding:34px 0 30px}
  .ol-heroband .ol-bg:after{background:linear-gradient(180deg,rgba(0,20,38,.9),rgba(0,20,38,.82))}
  .ol-herosearch{padding:6px;flex-wrap:wrap}
  .ol-herosearch .ol-mag{display:none}
  .ol-herosearch input{flex:1 1 100%;height:44px;padding:0 12px}
  .ol-herosearch .ol-btn{width:100%}
  .ol-brhero{padding:40px 0 34px}
  .ol-brlogo{max-width:250px}
  .ol-brart{display:none}
  .ol-br4wd .ol-st{margin-left:0;width:100%;justify-content:flex-start}
  .ol-br4wd select{flex:1 1 130px;min-width:0}
  .ol-brkitfind input{width:100%}
  .ol-gcard{padding:26px 22px}
  .ol-nav{display:none}
  /* ...ol-except the copy of it inside the drawer, which IS the navigation at
     this width — same component, no second mobile menu to maintain */
  .ol-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 */
  .ol-side-nav a{background:var(--bone);color:var(--navy);padding:9px 15px;
    font-size:14px;border-radius:var(--r3)}
  .ol-side-nav a.ol-on{background:var(--navy);color:#fff}
  /* the button keeps its slot but drops the word — the icon is enough here */
  .ol-allbtn{padding:0;width:40px;justify-content:center}
  .ol-allbtn span{display:none}
  .ol-quotebtn{display:none}
  .ol-icohide{display:none}
  .ol-hdr .ol-container{height:66px;gap:12px}
  .ol-fitpill{top:66px}
  .ol-fitpill .ol-inner{flex-wrap:wrap;border-radius:var(--r);padding:14px}
  .ol-fitpill .ol-st{margin-left:0;padding-right:0;width:100%}
  .ol-fitpill select{flex:1;min-width:104px}
  .ol-srch{display:none}
  .ol-cline{grid-template-columns:78px 1fr;gap:14px}
  .ol-cline .ol-rt{grid-column:1/-1;text-align:left;border-top:1px solid var(--hair2);padding-top:12px}
  .ol-sec{padding:44px 0}
  .ol-thumbs{flex-direction:row;overflow:auto}
  .ol-th{width:74px;flex-shrink:0}
  /* the demo bar collapses to one line on small screens */
  .ol-demobar .ol-container{height:auto;min-height:30px;padding:7px 22px;gap:10px;line-height:1.5}
  .ol-demobar .ol-container span:nth-child(2){display:none}
  .ol-demobar a{margin-left:0!important}
}
@media(max-width:620px){
  .ol-grid4,.ol-grid3,.ol-trust,.ol-counts,.ol-steps,.ol-numrow,.ol-sws,.ol-prin,.ol-bento,.ol-vgrid,.ol-assure,.ol-pv,
  .ol-catgrid{grid-template-columns:1fr}
  .ol-vpage,.ol-brkits{grid-template-columns:repeat(2,1fr)}
  .ol-b-w2{grid-column:span 1}
  .ol-h-hero{font-size:34px}
  .ol-h-sec{font-size:29px}
  .ol-ftr .ol-cols{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .ol-herobox .ol-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 */
  .ol-dealer{flex-wrap:wrap;row-gap:8px}
  .ol-dealer>div{flex:1 1 0;min-width:0}
  .ol-dealer .ol-tel{flex:0 0 100%;margin-left:42px;padding-top:0}
  .ol-dealer .ol-m{margin-top:4px}
  .ol-locbar{grid-template-columns:1fr}
  .ol-bt{height:64px;padding:0 16px}
  .ol-bt img{max-height:36px;max-width:170px}
  .ol-split .ol-art{min-height:260px}
  .ol-mapbox{padding:22px 20px 16px}
  .ol-mapcount b{font-size:34px}
  .ol-mapnote{display:none}
  .ol-herobox{min-height:480px}
  .ol-logo img{height:42px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .ol-rv{opacity:1;transform:none}
}

/* ==========================================================================
   19. ADDENDA FOR THE WORDPRESS BUILD
   Rules the standalone demo did not need because its chrome was generated by
   JavaScript. On the live site the header and footer are Elementor widgets, so
   a few classes are new here rather than ported.
   ========================================================================== */

/* The icon sprite's <use> wrapper. Sized inline per call; this only stops it
   sitting on the text baseline and inheriting a stray stroke. */
.ol-i{display:block;flex:0 0 auto;fill:none;stroke:currentColor}

/* A nav item that leaves the site says so. The Explore tab points at a
   separate application, and a navigation item that silently navigates away
   is a trap rather than a link. */
.ol-navext{display:inline-flex;align-items:center;gap:5px}
.ol-extico{opacity:.55;transform:translateY(-1px)}
.ol-navext:hover .ol-extico{opacity:1}

/* Shown in the drawer only while the eight system categories are still being
   set up, so an empty panel reads as "not finished" rather than "broken". */
.ol-side-note{font-size:14px;color:var(--granite);padding:4px 2px 14px;line-height:1.6}

/* ---- product card, real photography ----
   The demo drew products as flat SVG glyphs, so .ol-pshot only ever styled a
   direct <svg> child. 391 of the 399 live products have a real featured image,
   so the <img> needs the same treatment: contained rather than cropped,
   because a bullbar cropped to fill a 4:3 box stops being recognisable. */
.ol-pshot img{width:100%;height:100%;object-fit:contain;padding:12px;
  transition:.5s var(--ease)}
.ol-pc:hover .ol-pshot img{transform:scale(1.05) translateY(-3px)}
.ol-pshot .ol-pshot-ph{width:96px;height:96px;color:var(--dust);opacity:.35}

/* Visually hidden, still read aloud.
   Defined here rather than relied on from WooCommerce's or the parent theme's
   stylesheet, because the product card prints WooCommerce's price_html, and
   that includes a screen-reader-only "Price range: X through Y" span. If
   nothing hides it the card reads "R34 755,00 - R56 235,00Price range: R34
   755,00 through R56 235,00". Owning the rule means the card cannot be broken
   by another plugin's CSS load order. */
.screen-reader-text,
.ol-site .screen-reader-text{position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0}
.screen-reader-text:focus{position:static!important;width:auto;height:auto;
  margin:0;overflow:visible;clip:auto;clip-path:none;white-space:normal}

/* WooCommerce's own price markup inside our card. */
.ol-price .woocommerce-Price-amount{white-space:nowrap}
.ol-price del{color:var(--dust);font-weight:500;font-size:14px;margin-right:6px}
.ol-price ins{text-decoration:none}

/* .ol-pname is an anchor here rather than the demo's div, so it needs to be a
   block for its min-height to apply and keep every card the same height. */
a.ol-pname{display:block}
a.ol-pname:hover{color:var(--red)}

/* The rail scrolls horizontally rather than wrapping: a best-of row that
   reflows to two ragged lines stops reading as a row. */
.ol-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(258px,1fr);
  gap:18px;overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:6px;scrollbar-width:thin}
.ol-rail>*{scroll-snap-align:start}
.ol-rail::-webkit-scrollbar{height:8px}
.ol-rail::-webkit-scrollbar-track{background:var(--bone);border-radius:4px}
.ol-rail::-webkit-scrollbar-thumb{background:var(--hair);border-radius:4px}
.ol-rail::-webkit-scrollbar-thumb:hover{background:var(--dust)}

/* Elementor wraps every widget in its own div. Left alone that wrapper adds a
   stacking context and a width the full-bleed header and footer bands have to
   fight, so it is flattened here once rather than per template. */
.elementor-widget-ol-site-header,
.elementor-widget-ol-site-footer{width:100%}
.elementor-widget-ol-site-header .elementor-widget-container,
.elementor-widget-ol-site-footer .elementor-widget-container{width:100%}

/* The editor renders widgets inside an iframe with its own body margin; the
   footer band is full-bleed and would otherwise show a white gutter there. */
.elementor-editor-active .ol-ftr,
.elementor-editor-active .ol-hdr{margin-left:0;margin-right:0}

/* ==========================================================================
   19b. HEADINGS UNDER HELLO ELEMENTOR
   Site-wide, not specific to any one band. This is a correction, so it is
   worth saying exactly what it corrects.

   Hello Elementor ships assets/css/reset.css, which is enqueued on every page
   and contains one rule:

     h1,h2,h3,h4,h5,h6{color:inherit;font-family:inherit;font-weight:500;
       line-height:1.2;margin-block-end:1rem;margin-block-start:.5rem}

   Three things follow from it, and all three move the build away from the
   signed-off design.

   1. WEIGHT. Not one of the twelve rules in this stylesheet that uses
      var(--display) declares a font-weight, so Hello's 500 is what every OL
      heading computes to -- measured, not assumed. Archivo Black ships a
      single 400 cut, so the browser is being asked for a weight that does not
      exist. Chromium resolves that to the 400 face and draws it correctly, so
      nothing looks wrong today; Safari and Firefox are freer with synthetic
      bold, and the day anyone adds an Archivo Black 700 file or sets a weight
      in the Elementor kit, every heading on the site changes at once. It is
      pinned here rather than left to that.

      The numerals are the case where it already bites: .ol-mapcount b,
      .ol-mq-in b and the .ol-v counters are <b> elements, so their UA default
      is bold -- they have been asking for 700 Archivo Black all along.

   2. MARGINS. This is the visible one. `margin-block-start:.5rem` and
      `margin-block-end:1rem` beat this file's `*{margin:0}` on specificity
      (0-0-1 against 0-0-0) no matter which file loads first. So every heading
      on the site carries 8px above it, and every heading that does not set its
      own bottom margin carries 16px below. That includes .ol-h-sec,
      .ol-heroband h1 and .ol-cta-band h2 -- the three largest headings there
      are, and the ones the design spaces most tightly.

   3. FAMILY. `font-family:inherit` means a heading with no OL class renders in
      the body face. Every heading the theme itself writes is covered by a
      class or a descendant rule, but an Elementor Heading widget the team
      drops on a page is not, and neither is a WooCommerce or blog title. Those
      get brand defaults below.

   ON SPECIFICITY, because it is the whole trick here
   The two resets use `.ol-site :where(...)`, which computes as a single class
   (0-1-0): above Hello's bare tags, and below every intentional rule in this
   stylesheet -- `.ol-tr h4`, `.ol-ftr h5`, `.ol-hero-in .ol-h-hero` and the
   rest are 0-1-1 or higher and keep their own margins untouched. Matching
   Hello's specificity and winning on order instead would have overridden those
   as well, which is the trap: `margin-block-end` and `margin-bottom` are the
   same property to the cascade, so a blunt reset at the end of the file wipes
   the 7px under a promise title and the 18px under a footer column head.

   Deliberately NOT set on the bare-heading defaults: color, font-size,
   line-height and letter-spacing.
     - color, because .ol-cta-band h2 sits on a dark band and takes its colour
       by inheritance. A default of var(--navy) here would render it navy on
       navy. It inherits, exactly as Hello had it.
     - the other three, because .ol-h-sec is also 0-1-0 and comes earlier in
       the file, so anything set here at the same specificity would silently
       replace its line-height of .96 and its -.025em tracking.
   ========================================================================== */

/* 1. the weight, pinned on every rule that uses the display face */
.ol-side-ttl,
.ol-h-hero,
.ol-h-sec,
.ol-count .ol-v,
.ol-heroband h1,
.ol-brtag,
.ol-mq-in b,
.ol-mapcount b,
.ol-pdp h1,
.ol-done-box h1,
.ol-num .ol-v,
.ol-cta-band h2{
  font-weight:400;
  /* and if a weight ever does leak past the line above, still never fake it */
  font-synthesis-weight:none}

/* 2. Hello's heading margins, removed without touching the ones we set */
.ol-site :where(h1,h2,h3,h4,h5,h6){margin-block-start:0;margin-block-end:0}

/* 3. brand defaults for a heading with no OL class -- an Elementor Heading
      widget, a WooCommerce title, a blog post title. h1 and h2 take the
      display face because they are page and section headings by role; h3
      downwards take Archivo 800 sentence-case, which is the .ol-h-card
      treatment and what the 3 Sep readability pass restricted the display
      face in favour of. */
.ol-site :where(h1,h2){font-family:var(--display);font-style:italic;font-weight:400;
  font-synthesis-weight:none;text-transform:uppercase}
.ol-site :where(h3,h4,h5,h6){font-family:var(--body);font-weight:800;
  font-synthesis-weight:none}

/* ...except inside article body copy, where an h2 is a subheading in running
   text rather than a section head. Uppercase italic Archivo Black is precisely
   what the 3 Sep readability pass took OUT of that role: uppercase removes
   word-shape and italic removes it again, and a subhead in a 600-word article
   is the place that costs most. The Journal template is Phase 6, so this
   guards a page that does not exist yet -- three lines now against finding it
   the hard way later. */
.ol-site :where(.entry-content,.elementor-widget-theme-post-content)
  :where(h2,h3,h4,h5,h6){font-family:var(--body);font-style:normal;font-weight:800;
  text-transform:none}

/* .ol-ftr h5 sets a mono face, a size and a colour but no weight, so in the
   prototype it rendered at the browser's own bold for <h5> -- 700, which
   JetBrains Mono actually ships. Under the defaults above it would have picked
   up 800, a weight that family does not have. Stated explicitly, because a
   design that depends on a UA default is a design that breaks the first time a
   theme resets it, which is exactly what happened here. */
.ol-ftr h5{font-weight:700}

/* ==========================================================================
   19c. POPULAR VEHICLES + CENTRE LOOKUP  (WordPress build)
   Appended rather than edited into sections 6b and 10, so the namespaced
   transform of the prototype's stylesheet stays a straight transform and this
   file's history shows what the WordPress build actually added.
   ========================================================================== */

/* ---- the vehicle silhouette ----
   The prototype inlined its silhouettes with a per-call class. Here they come
   out of the sprite through ol_vehicle_glyph(), so the sizing that used to sit
   on .pvt .art svg lives on the glyph itself and works wherever it is used. */
.ol-vsil{width:100%;max-width:320px;height:auto;color:var(--navy)}

/* A silhouette is a placeholder for cut-out photography, so it steps back
   rather than competing with a photographed tile beside it in the same row --
   but not so far back that a row of three unphotographed tiles reads as three
   empty boxes. #B9C7D6 is a deliberate midpoint: legible as a drawing of a
   bakkie, obviously not a photograph. --pale was tried first and disappeared. */
.ol-pvt-ph .ol-art .ol-vsil{color:#B9C7D6;max-width:290px}

/* ---- the centre lookup: two columns that end level ----
   The list column is scoped by its own class rather than by .ol-rv. Targeting
   .ol-grid2>.ol-rv turned the MAP column into a flex row too -- both columns
   carry .ol-rv -- and .ol-mapbox then shrank to its content width, 488px inside
   a 671px column. Worth naming: it looked like a grid bug for a while. */
.ol-loccol{display:flex}
.ol-loccol>.ol-panel{display:flex;flex-direction:column;flex:1}
.ol-loc{display:flex;flex-direction:column;flex:1}

/* The map's height comes from the SVG's aspect ratio, so it is the taller
   column. Letting the list fill its panel means the prompt state and the
   results sit in a box the height of the map instead of leaving a band of
   white under the panel. max-height goes because flex now owns the height;
   the list still scrolls, it just scrolls at the map's height. */
.ol-loc .ol-loclist{flex:1;max-height:none;min-height:0}
.ol-loc .ol-locask{min-height:0;height:100%}
.ol-loc-mapfirst .ol-locmap{order:-1}

/* One column, no map: the panel would otherwise run the full container width
   and the search row would look lost in it. */
.ol-loc-solo{max-width:760px}

/* ---- the province select's dropdown arrow ----
   A real bug inherited from the prototype, not a new rule. .ol-locsel paints
   its own chevron as a background-image, but the select sits inside .ol-field,
   and `.ol-field select` (section 15) sets the `background` SHORTHAND, which
   resets background-image to none -- and it both outranks .ol-locsel on
   specificity and comes later in the file. So the province select has been
   rendering with appearance:none and no chevron at all: a pill with no hint
   that it opens. Restated here at a specificity that wins, using longhands
   only, so the next shorthand somewhere else cannot silently erase it again. */
.ol-field select.ol-locsel{
  background-color:#fff;
  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;
  padding-right:40px}

/* ---- lookup states ----
   The list is aria-live, so it announces changes; aria-busy plus a dim is the
   visible half of the same message while a query is in flight. */
.ol-loclist[aria-busy="true"]{opacity:.55}
.ol-locpick{margin-bottom:14px}

/* A centre whose number has not been imported yet renders as plain text, never
   as a tel: link -- a dial link that dials nothing is worse than no link, and
   an invented number is worse than both. Same metrics as .ol-tel so the rows
   stay on one grid whether the number is there or not. */
.ol-tel-tbc{margin-left:auto;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.06em;color:var(--dust);white-space:nowrap;align-self:flex-start;
  padding-top:2px;text-transform:uppercase}

/* The placeholder marker on a seeded row. Amber rather than red: this is
   "not confirmed yet", not "broken".

   The word itself is rendered by the script, not by a CSS `content` string.
   Text in a stylesheet cannot be translated, and this site has a fair chance of
   wanting Afrikaans. */
.ol-provtag{margin-left:8px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#996800;background:rgba(153,104,0,.09);border-radius:20px;padding:2px 7px;
  vertical-align:1px;font-weight:700;white-space:nowrap}

/* The retry in the failure state is a button, because it performs an action
   rather than going anywhere -- so it needs the anchor styling of .ol-link
   without the button chrome the browser adds. */
.ol-empty button.ol-link{background:none;border:0;padding:0;font:inherit;
  color:var(--red);cursor:pointer;text-decoration:underline;text-underline-offset:2px}

/* Map bubbles are buttons, so they need a visible focus ring. SVG cannot take
   a box-shadow, so the ring is drawn on the halo circle instead.

   The selector has to carry [tabindex] to outrank Hello Elementor's own focus
   style, which is
     [tabindex]:not([tabindex="-1"]):focus-visible{box-shadow:0 0 0 4px #fff;
       outline:2px solid #000;outline-offset:2px}
   at 0-3-0. A plain .ol-m-pin:focus-visible loses to that, and the bubble then
   gets a black outline and a white glow on top of the halo below -- two focus
   rings, one of them off-palette on a navy map. The dashed white halo is a
   clear indicator in its own right against that ground, and the list beside
   the map is the accessible route to the same filter either way. */
.ol-m-pin[tabindex]:not([tabindex="-1"]):focus,
.ol-m-pin[tabindex]:not([tabindex="-1"]):focus-visible{outline:none;box-shadow:none}
.ol-m-pin:focus-visible .ol-m-halo{fill:rgba(255,255,255,.30);
  stroke:#fff;stroke-width:2;stroke-dasharray:3 3}

@media (max-width:900px){
  /* Stacked, the map no longer sets the row height, so the list goes back to
     its own scroll height rather than stretching to nothing. */
  .ol-loc .ol-loclist{max-height:430px}
  .ol-loc .ol-locask{min-height:340px;height:auto}
  .ol-loc-mapfirst .ol-locmap{order:0}
}