/* ============================================================================
   SSK MECHANICS — DESIGN v5
   ----------------------------------------------------------------------------
   Every rule is scoped under `body.ssk-v5`, which is only ever printed when
   `ssk_design_v5_enabled` is 1. With the flag off this file is inert even if it
   is served, so rollback is a single option update with no CSS to unpick.

   It layers over the existing theme markup rather than replacing it — the
   theme already ships .ssk-topbar / .ssk-header / .ssk-nav / .ssk-mega /
   .ssk-mobile-panel / .ssk-site-footer, so v5 restyles what is there instead
   of introducing a parallel set of components to keep in sync.

   Palette: black + red only. --ssk-red is the EXISTING brand red, untouched.
   Cross-browser: iOS Safari 13.4+, Chrome 87+, Firefox 78+ — physical
   properties before logical ones, -webkit- prefixes before the standard, and
   every progressive value guarded by @supports.
   ========================================================================== */

body.ssk-v5 {
  /* --- surfaces: warm near-blacks read richer than pure #000 -------------- */
  --v5-ink:      #0b0d0f;
  --v5-ink-2:    #16191d;
  --v5-ink-3:    #242830;
  --v5-red:      var(--ssk-red, #d6001c);   /* existing brand red, unchanged */
  --v5-red-lift: #ff2136;                   /* hover/active only */
  --v5-red-wash: #fff2f3;
  --v5-paper:    #ffffff;
  --v5-paper-2:  #f6f6f7;
  --v5-line:     #e4e4e7;
  --v5-muted:    #6e7278;

  /* --- one z-index scale ------------------------------------------------
     The bug this replaces: .ssk-mobile-panel sits at z-index 1000 while
     .ssk-vswitch, .ssk-notifbell and .ssk-cookie-banner are all pinned at
     99999. Open the drawer on a phone and three fixed elements paint on top
     of it. Numbers picked in isolation always end up like this; a scale is
     the fix, and the drawer now outranks the floats. */
  --v5-z-topbar:  1001;
  --v5-z-header:  1000;
  --v5-z-float:    900;   /* bell, vehicle switcher, WhatsApp */
  --v5-z-scrim:   2000;
  --v5-z-drawer:  2010;
  --v5-z-cookie:  2100;   /* consent has to beat everything, including the drawer */

  --v5-control:    48px;  /* header control height: touch floor AND on the 8px grid */
  --v5-r:          12px;
}

/* ── The drawer fix ────────────────────────────────────────────────────────
   Two halves, and both are needed. Re-ranking alone leaves the floats
   visible over the scrim, which looks like a rendering fault; hiding them
   alone leaves a stacking order that will bite again the next time something
   fixed is added. */
body.ssk-v5 .ssk-mobile-panel  { z-index: var(--v5-z-scrim); }
body.ssk-v5 .ssk-vswitch,
body.ssk-v5 .ssk-notifbell,
body.ssk-v5 .ssk-whatsapp-float { z-index: var(--v5-z-float); }
body.ssk-v5 .ssk-cookie-banner  { z-index: var(--v5-z-cookie); }

body.ssk-v5.ssk-drawer-open .ssk-vswitch,
body.ssk-v5.ssk-drawer-open .ssk-notifbell,
body.ssk-v5.ssk-drawer-open .ssk-whatsapp-float {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: opacity .18s, visibility .18s;
  transition: opacity .18s, visibility .18s;
}

/* ── Global ───────────────────────────────────────────────────────────── */
body.ssk-v5 { background: var(--v5-paper); color: var(--v5-ink); }
body.ssk-v5 *,
body.ssk-v5 *::before,
body.ssk-v5 *::after { -webkit-box-sizing: border-box; box-sizing: border-box; }

/* A 3px outline is only an accessibility win if it is visible on both
   surfaces, so it flips to white inside dark chrome. */
body.ssk-v5 a:focus,
body.ssk-v5 button:focus,
body.ssk-v5 input:focus { outline: 3px solid var(--v5-red); outline-offset: 2px; }
@supports selector(:focus-visible) {
  body.ssk-v5 a:focus,
  body.ssk-v5 button:focus,
  body.ssk-v5 input:focus { outline: none; }
  body.ssk-v5 a:focus-visible,
  body.ssk-v5 button:focus-visible,
  body.ssk-v5 input:focus-visible { outline: 3px solid var(--v5-red); outline-offset: 2px; }
  body.ssk-v5 .ssk-topbar a:focus-visible,
  body.ssk-v5 .ssk-site-footer a:focus-visible,
  body.ssk-v5 .ssk-mobile-panel__head button:focus-visible { outline-color: #fff; }
}

/* Icons arrive from SSK\Icons as inline SVG; give them one consistent shape. */
body.ssk-v5 .ssk-icon {
  display: inline-block;
  vertical-align: -.18em;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── UTILITY BAR ──────────────────────────────────────────────────────── */
body.ssk-v5 .ssk-topbar {
  background: var(--v5-ink);
  color: rgba(255,255,255,.72);
  border-bottom: 1px solid var(--v5-ink-3);
  font-size: 13px;
  z-index: var(--v5-z-topbar);
}
body.ssk-v5 .ssk-topbar__inner {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
}
body.ssk-v5 .ssk-topbar__left,
body.ssk-v5 .ssk-topbar__right {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
body.ssk-v5 .ssk-topbar a,
body.ssk-v5 .ssk-topbar span {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  min-height: 44px;                 /* WCAG 2.5.5 — was under it on touch */
  padding: 0 10px;
  color: rgba(255,255,255,.72);
  text-decoration: none;
}
body.ssk-v5 .ssk-topbar a:hover { color: #fff; }
body.ssk-v5 .ssk-topbar .ssk-icon { width: 16px; height: 16px; margin-right: 7px; }
body.ssk-v5 .ssk-topbar__right a:last-child { padding-right: 0; }
body.ssk-v5 .ssk-topbar__left  a:first-child { padding-left: 0; }

/* ── HEADER ───────────────────────────────────────────────────────────── */
body.ssk-v5 .ssk-header {
  background: var(--v5-paper);
  border-bottom: 1px solid var(--v5-line);
  -webkit-box-shadow: none; box-shadow: none;
  height: auto;
  min-height: 72px;
  z-index: var(--v5-z-header);
}
body.ssk-v5 .ssk-header__inner {
  padding-top: 6px;
  padding-bottom: 6px;
  gap: 16px;
}
body.ssk-v5 .ssk-logo img { height: 40px; }

body.ssk-v5 .ssk-nav__list { gap: 4px; }
body.ssk-v5 .ssk-nav__link {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  min-height: var(--v5-control);
  padding: 0 13px;
  border-radius: 9px;
  font-family: var(--ssk-font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--v5-ink);
  white-space: nowrap;              /* stops "Free Reg Check" folding the header */
  -webkit-transition: background .14s, color .14s;
  transition: background .14s, color .14s;
}
body.ssk-v5 .ssk-nav__link:hover { background: var(--v5-paper-2); color: var(--v5-ink); }
body.ssk-v5 .ssk-nav__caret {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  margin-left: 6px;
  opacity: 1;
  color: var(--v5-muted);
}
body.ssk-v5 .ssk-nav__caret .ssk-icon { width: 15px; height: 15px; }
body.ssk-v5 .ssk-nav__item--has-sub:hover > .ssk-nav__link,
body.ssk-v5 .ssk-nav__item--has-sub.is-open > .ssk-nav__link {
  background: var(--v5-ink);
  color: #fff;
}
body.ssk-v5 .ssk-nav__item--has-sub:hover > .ssk-nav__link .ssk-nav__caret,
body.ssk-v5 .ssk-nav__item--has-sub.is-open > .ssk-nav__link .ssk-nav__caret {
  color: #fff;
  -webkit-transform: rotate(180deg); transform: rotate(180deg);
}

body.ssk-v5 .ssk-header__right {
  gap: 8px;
  margin-left: auto;
}
body.ssk-v5 .ssk-header__phone {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  min-height: var(--v5-control);
  padding: 0 10px;
  font-weight: 700;
  color: var(--v5-ink);
}
body.ssk-v5 .ssk-header__phone .ssk-icon { width: 17px; height: 17px; margin-right: 8px; }

body.ssk-v5 .ssk-header__cta,
body.ssk-v5 .ssk-header__cta-btn,
body.ssk-v5 .ssk-header__login {
  display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  min-height: var(--v5-control);
  padding: 0 18px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  border: 0;
  -webkit-transition: background .14s, border-color .14s;
  transition: background .14s, border-color .14s;
}
body.ssk-v5 .ssk-header__cta,
body.ssk-v5 .ssk-header__cta-btn { background: var(--v5-red); color: #fff; }
body.ssk-v5 .ssk-header__cta:hover,
body.ssk-v5 .ssk-header__cta-btn:hover { background: var(--v5-red-lift); }
body.ssk-v5 .ssk-header__login {
  background: transparent;
  color: var(--v5-ink);
  border: 1.5px solid var(--v5-line);
}
body.ssk-v5 .ssk-header__login:hover { border-color: var(--v5-ink); }

body.ssk-v5 .ssk-hamburger {
  width: var(--v5-control);
  height: var(--v5-control);
  -ms-flex-negative: 0; flex-shrink: 0;
  background: var(--v5-ink);
  border: 0;
  border-radius: 9px;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
body.ssk-v5 .ssk-hamburger__bar { background: #fff; width: 20px; height: 2px; border-radius: 2px; }

/* ── MEGA MENU ────────────────────────────────────────────────────────── */
body.ssk-v5 .ssk-mega {
  border-top: 1px solid var(--v5-line);
  border-radius: 0 0 var(--v5-r) var(--v5-r);
  background: var(--v5-paper);
  padding: 22px;
  -webkit-box-shadow: 0 22px 40px -24px rgba(11,13,15,.5);
          box-shadow: 0 22px 40px -24px rgba(11,13,15,.5);
}
body.ssk-v5 .ssk-mega__grid { gap: 6px 22px; }
body.ssk-v5 .ssk-mega__label {
  font-family: var(--ssk-font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--v5-muted);
  padding: 0 12px 6px;
}
body.ssk-v5 .ssk-mega__col a {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  min-height: 52px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--v5-ink);
  -webkit-transition: background .14s; transition: background .14s;
}
body.ssk-v5 .ssk-mega__col a:hover { background: var(--v5-paper-2); }
/* The icon chip. Reused by the drawer so the two menus read as one system. */
body.ssk-v5 .ssk-mega__col a .ssk-icon,
body.ssk-v5 .ssk-mobile-panel__section a .ssk-icon {
  width: 34px;
  height: 34px;
  padding: 8px;
  margin-right: 11px;
  border: 1px solid var(--v5-line);
  border-radius: 9px;
  background: var(--v5-paper-2);
  color: var(--v5-red);
  overflow: visible;
}
body.ssk-v5 .ssk-mega__col a:hover .ssk-icon {
  background: var(--v5-ink);
  border-color: var(--v5-ink);
  color: #fff;
}

/* ── MOBILE DRAWER ────────────────────────────────────────────────────── */
body.ssk-v5 .ssk-mobile-panel { background: rgba(11,13,15,.6); }
body.ssk-v5 .ssk-mobile-panel__scroll {
  z-index: var(--v5-z-drawer);
  width: 88%;
  max-width: 380px;
  overscroll-behavior: contain;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  -webkit-box-shadow: -20px 0 50px -20px rgba(11,13,15,.55);
          box-shadow: -20px 0 50px -20px rgba(11,13,15,.55);
}
body.ssk-v5 .ssk-mobile-panel__head {
  background: var(--v5-ink);
  padding: 14px 18px;
  border-bottom: 0;
}
body.ssk-v5 .ssk-mobile-panel__head img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); height: 30px; }
body.ssk-v5 .ssk-mobile-panel__close {
  width: 44px; height: 44px;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 0;                     /* hides the glyph; the SVG replaces it */
}
body.ssk-v5 .ssk-mobile-panel__close .ssk-icon { width: 22px; height: 22px; }
body.ssk-v5 .ssk-mobile-panel__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--v5-muted);
  padding: 14px 12px 6px;
}
body.ssk-v5 .ssk-mobile-panel__section a {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  min-height: 52px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--v5-ink);
}
body.ssk-v5 .ssk-mobile-panel__section a .ssk-icon { width: 30px; height: 30px; padding: 6px; }
body.ssk-v5 .ssk-mobile-panel__foot { border-top: 1px solid var(--v5-line); padding: 16px 18px; }
body.ssk-v5 .ssk-mobile-panel__cta {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  min-height: var(--v5-control);
  border-radius: 9px;
  font-weight: 700;
  background: var(--v5-red);
  color: #fff;
}
body.ssk-v5 .ssk-mobile-panel__cta:hover { background: var(--v5-red-lift); }
body.ssk-v5 .ssk-mobile-panel__cta .ssk-icon { width: 17px; height: 17px; margin-right: 8px; }
body.ssk-v5 .ssk-mobile-panel__contact a {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  min-height: 44px;
}

/* ── FOOTER ───────────────────────────────────────────────────────────── */
body.ssk-v5 .ssk-site-footer { background: var(--v5-ink); color: rgba(255,255,255,.68); }
body.ssk-v5 .ssk-footer-main { background: transparent; }
body.ssk-v5 .ssk-footer__col h4,
body.ssk-v5 .ssk-footer__brand h3 {
  color: #fff;
  font-family: var(--ssk-font-heading);
  letter-spacing: .3px;
}
body.ssk-v5 .ssk-footer__list a {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  min-height: 34px;
  color: rgba(255,255,255,.68);
}
body.ssk-v5 .ssk-footer__list a:hover { color: #fff; }
body.ssk-v5 .ssk-footer__social a {
  width: 44px;                      /* was 42 — under the touch floor */
  height: 44px;
  border: 1px solid var(--v5-ink-3);
  border-radius: 10px;
  background: transparent;
  color: rgba(255,255,255,.8);
}
body.ssk-v5 .ssk-footer__social a:hover { background: var(--v5-red); border-color: var(--v5-red); color: #fff; }
body.ssk-v5 .ssk-footer-bottom { border-top: 1px solid var(--v5-ink-3); }
body.ssk-v5 .ssk-footer-bottom__links a {
  display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  min-height: 44px;
  padding: 0 9px;
}

/* Touch pointers get the enhanced target size across the board. */
@media (pointer: coarse) {
  body.ssk-v5 .ssk-nav__link,
  body.ssk-v5 .ssk-topbar a,
  body.ssk-v5 .ssk-footer__list a { min-height: var(--v5-control); }
}

@media (prefers-reduced-motion: reduce) {
  body.ssk-v5 *,
  body.ssk-v5 *::before,
  body.ssk-v5 *::after {
    -webkit-animation-duration: .001ms !important; animation-duration: .001ms !important;
    -webkit-transition-duration: .001ms !important; transition-duration: .001ms !important;
  }
}

/* ── REGRESSION FIX ────────────────────────────────────────────────────────
   I made the header controls 48px tall with 18px padding and nowrap labels,
   which pushed .ssk-header__right to 296px inside a 375px viewport. The
   hamburger ended up spanning 361→409px — 34px PAST the right edge, so on a
   phone it could not be tapped at all. Measured, not guessed:
   getBoundingClientRect().right = 409 vs innerWidth 375.

   Below the desktop nav breakpoint the phone number, log-in and register all
   already exist inside the drawer, so the header keeps only what it needs:
   logo, one primary action, and the burger. */
@media (max-width: 1240px) {
  body.ssk-v5 .ssk-header__inner { gap: 10px; -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
  body.ssk-v5 .ssk-logo { min-width: 0; }
  body.ssk-v5 .ssk-header__right { min-width: 0; gap: 8px; }
  body.ssk-v5 .ssk-header__phone,
  body.ssk-v5 .ssk-header__login { display: none; }
  body.ssk-v5 .ssk-header__cta,
  body.ssk-v5 .ssk-header__cta-btn {
    padding: 0 14px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* Under ~400px even one label plus the burger is too much next to the logo. */
@media (max-width: 419px) {
  body.ssk-v5 .ssk-header__cta,
  body.ssk-v5 .ssk-header__cta-btn { display: none; }
}
/* Belt and braces: nothing in the header may overflow the viewport, whatever
   a future label length does. */
body.ssk-v5 .ssk-header,
body.ssk-v5 .ssk-topbar { max-width: 100vw; overflow-x: clip; }
@supports not (overflow-x: clip) {
  body.ssk-v5 .ssk-header,
  body.ssk-v5 .ssk-topbar { overflow-x: hidden; }
}

/* ── Drawer header: undo my logo inversion ─────────────────────────────────
   I put the drawer head on --v5-ink and used `brightness(0) invert(1)` to make
   the logo read white. That trick only works for a single-colour mark on a
   transparent background; this logo has opaque areas, so the filter flattened
   the whole image into a solid white block.

   Until the logo files themselves are sorted, the honest fix is to stop
   fighting the asset: light header, logo untouched, dark close button. */
body.ssk-v5 .ssk-mobile-panel__head {
  background: var(--v5-paper);
  border-bottom: 1px solid var(--v5-line);
}
body.ssk-v5 .ssk-mobile-panel__head img {
  -webkit-filter: none;
          filter: none;
  height: 34px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
}
body.ssk-v5 .ssk-mobile-panel__close { color: var(--v5-ink); }

/* ── HOMEPAGE: the reg plate ───────────────────────────────────────────────
   Two problems with the current plate, one brand and one factual.

   Brand: it is a yellow-and-blue REAR plate, which imports a whole second
   colour family into a black-and-red identity. UK FRONT plates are white with
   black characters, so switching to the front plate keeps the motif and drops
   the extra hues at no cost.

   Factual: the flag band carries twelve gold EU stars. UK plates have not
   shown the EU band since 2021 — current plates are a UK/GB identifier with a
   Union flag, no stars. On a garage's own site that reads as carelessness, so
   the stars come off rather than get recoloured. */
body.ssk-v5 .ssk-hero__plate {
  background: #fff;
  border-color: var(--v5-ink);
}
body.ssk-v5 .ssk-hero__plate-flag {
  background: var(--v5-ink);
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  padding: 5px 0;
}
body.ssk-v5 .ssk-hero__eu-stars { display: none; }
body.ssk-v5 .ssk-hero__gb-text { color: #fff; font-size: 10px; }
body.ssk-v5 .ssk-hero__vrm-input { color: var(--v5-ink); }
body.ssk-v5 .ssk-hero__vrm-input::-webkit-input-placeholder { color: #b6b8bc; }
body.ssk-v5 .ssk-hero__vrm-input::placeholder { color: #b6b8bc; }

/* ── HERO REG ENTRY: the overflow ──────────────────────────────────────────
   Measured on a 390px viewport: .ssk-hero__plate-wrap rendered 585px wide
   (plate 433 + gap 10 + "Find my car" button) inside a 343px column. Because
   .ssk-hero carries overflow-x:hidden there was no side-scroll to give it
   away — the right-hand quarter of the reg box and the whole submit button
   were simply clipped off the screen. On the primary conversion element.

   Cause is the classic flexbox trap, not a width someone typed: flex items
   default to min-width:auto, so .ssk-hero__plate (flex:1) could not shrink
   below the MIN-CONTENT width of the 36px letter-spaced input inside it —
   about 433px. `flex:1` never had a chance.

   Fix in three parts:
     1. min-width:0 so the items can genuinely shrink;
     2. wrap the row and give the plate and button a full-width basis below
        the point where they stop fitting side by side;
     3. fluid type on the input so the reg still reads large without setting
        a 433px floor.
   Belt and braces at the end: nothing in the hero may exceed its column. */
body.ssk-v5 .ssk-hero__inner,
body.ssk-v5 .ssk-hero__widget,
body.ssk-v5 .ssk-hero__plate-wrap,
body.ssk-v5 .ssk-hero__plate {
  min-width: 0;
  max-width: 100%;
}
body.ssk-v5 .ssk-hero__plate-wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
body.ssk-v5 .ssk-hero__vrm-input {
  min-width: 0;
  width: 100%;
  font-size: 34px;
}
@supports (font-size: clamp(1px, 1vw, 2px)) {
  body.ssk-v5 .ssk-hero__vrm-input { font-size: clamp(20px, 6.4vw, 34px); }
}

/* Below this the plate and the button cannot sit side by side without one of
   them being squeezed under a comfortable tap size, so they stack. */
@media (max-width: 719px) {
  body.ssk-v5 .ssk-hero__plate,
  body.ssk-v5 .ssk-hero__find-btn {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 100%;
        flex: 1 1 100%;
    width: 100%;
  }
  body.ssk-v5 .ssk-hero__find-btn { min-height: 52px; }
  body.ssk-v5 .ssk-hero__plate { height: 62px; }
  body.ssk-v5 .ssk-hero__widget { padding: 18px; }
}

/* ── HERO: the empty vehicle box ───────────────────────────────────────────
   The markup ships `<div id="ssk-hero-vehicle-preview" ... hidden>`, so it is
   MEANT to be invisible until a reg is looked up. It never was: the rule
   `.ssk-hero__vehicle-preview { display: flex }` is a class selector, which
   outranks the browser's own `[hidden] { display: none }`. The attribute has
   been doing nothing, so every visitor has been shown an empty grey box with
   a car icon and a blank space where the vehicle name will go.

   Two parts: make `hidden` mean hidden, and put something useful in the space
   instead of nothing — a line telling people what the reg box is FOR. It
   swaps out automatically the moment a vehicle is found, using the sibling
   state rather than another JS hook to keep in sync. */
body.ssk-v5 .ssk-hero__vehicle-preview[hidden] { display: none; }

body.ssk-v5 .ssk-hero__vp-hint {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px dashed var(--v5-line);
  border-radius: 10px;
  background: var(--v5-paper-2);
  color: var(--v5-muted);
  font-size: 13.5px;
  line-height: 1.45;
}
body.ssk-v5 .ssk-hero__vp-hint .ssk-icon {
  width: 18px; height: 18px;
  margin-top: 1px;
  color: var(--v5-red);
}
/* Once the lookup succeeds the preview loses [hidden]; the hint steps aside. */
body.ssk-v5 .ssk-hero__vehicle-preview:not([hidden]) ~ .ssk-hero__vp-hint { display: none; }

/* ============================================================================
   SITEWIDE DEFENSIVE BASELINE
   ----------------------------------------------------------------------------
   The hero overflow and the always-visible empty vehicle box were not two
   one-off mistakes. They are two instances of three bugs that recur across
   this codebase, so they get fixed as classes rather than one at a time.

   1. FLEX MIN-CONTENT FLOORS. A flex item defaults to min-width:auto, so it
      cannot shrink below its content's min-content width no matter what
      `flex: 1` says. A large-type input is the usual culprit — the hero reg
      field set a 433px floor. Inputs, selects, tables and pre are the
      elements that most often carry an unshrinkable intrinsic width.

   2. CLIPPED, NOT CAUGHT. Several wrappers carry overflow-x:hidden, which
      means an overflowing child is silently chopped off instead of producing
      a side-scroll anyone would notice. The clipping hides the symptom, so
      these ship unseen.

   3. [hidden] THAT DOES NOT HIDE. `[hidden] { display: none }` lives in the
      UA stylesheet at the lowest priority, so ANY class rule setting display
      beats it. `.ssk-hero__vehicle-preview { display: flex }` is why an empty
      placeholder box was shown to every visitor. The booking wizard, the
      account panels and the checkout all toggle `hidden` the same way, so the
      same latent bug exists wherever a class also sets display.
   ========================================================================== */

/* (3) — make the hidden attribute authoritative everywhere. !important is
   justified here precisely because the competing rules are author-level
   display declarations; nothing else can win against them generically. */
body.ssk-v5 [hidden] { display: none !important; }

/* (1) — form controls and other intrinsically-wide elements must be able to
   shrink inside any flex or grid parent, and must never exceed their column. */
body.ssk-v5 input,
body.ssk-v5 select,
body.ssk-v5 textarea,
body.ssk-v5 button,
body.ssk-v5 img,
body.ssk-v5 svg,
body.ssk-v5 table,
body.ssk-v5 pre {
  max-width: 100%;
  min-width: 0;
}
/* Long unbroken strings — reg numbers, emails, URLs in copy — are the other
   common source of an unshrinkable line box. */
body.ssk-v5 p,
body.ssk-v5 h1, body.ssk-v5 h2, body.ssk-v5 h3, body.ssk-v5 h4,
body.ssk-v5 li, body.ssk-v5 td, body.ssk-v5 label {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* (4) iOS FOCUS ZOOM — also a class, not an instance.
   Safari on iOS zooms the whole viewport when a focused control has a
   font-size below 16px, and it does NOT zoom back out afterwards. The user is
   left on a page they now have to pinch and pan. The booking wizard's service
   search (#ssk-svc-search) sits at 14px, and any control added at "small"
   type in future would do the same. A floor on touch-sized viewports costs
   nothing on desktop, where the type scale is unaffected. */
@media (max-width: 1023px) {
  body.ssk-v5 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  body.ssk-v5 select,
  body.ssk-v5 textarea {
    /* NOT !important. It would clamp anything deliberately larger down to 16px —
       tried it, and it shrank the hero number plate from 34px to 16px. CSS has
       no min-font-size, so this can only be a floor for controls that do not
       set their own size. Controls must not carry font-size in a style
       attribute; #ssk-postcode-input did, at 14px, and that was fixed at
       source in booking-wizard.php. */
    font-size: 16px;
  }
}

/* ── LOGO SIZE ────────────────────────────────────────────────────────────
   I shrank this. The theme had .ssk-logo img at 44px and my header rules
   dropped it to 40px to make room for the control row — which made the mark
   smaller than it was BEFORE the redesign, on every device. These dimensions
   are 20% larger than the previous 64px/60px values while keeping the mark's
   aspect ratio and enough room for the mobile controls. */
body.ssk-v5 .ssk-logo img { height: 77px; max-width: 228px; }
@media (max-width: 1023px) { body.ssk-v5 .ssk-logo img { height: 72px; max-width: 202px; } }
@media (max-width: 419px)  { body.ssk-v5 .ssk-logo img { height: 72px; max-width: 180px; } }
body.ssk-v5 .ssk-mobile-panel__head img { height: 48px; max-width: 192px; }
body.ssk-v5 { padding-top: 127px; }
@media (max-width: 1024px) { body.ssk-v5 { padding-top: 84px; } }


/* ── Reduced motion, globally ──────────────────────────────────────────────
   A live audit found 8 animation rules outside any reduced-motion query —
   including .ssk-bk__spinner at 0.6s linear INFINITE in the booking flow, and
   several inside WooCommerce's own wc-blocks.css, which we do not control.
   A visitor who has asked their OS for less motion was getting all of it.

   Durations are collapsed rather than animations removed. Several of these
   use fill-mode to arrive at a visible end state; `animation: none` would
   strand the element in its starting state, which for a fade-in means
   invisible. 0.01ms lands on the same end state immediately. */
@media (prefers-reduced-motion: reduce){
  body.ssk-v5 *,
  body.ssk-v5 *::before,
  body.ssk-v5 *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   HOMEPAGE HERO — v6
   The plate is the thesis. Everything else stays quiet around it.
   ══════════════════════════════════════════════════════════════════════════ */

/* — Composition. The void under the columns came from top alignment in a band
     taller than its content. Centre them and let the band size to the content. */
body.ssk-v5 .ssk-hero{
  padding-block: clamp(48px, 7vw, 88px);
  display: flex;
  align-items: center;
}
body.ssk-v5 .ssk-hero__inner{
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}

/* The diagonal wedge. A dated device that clipped against the trust bar and
   added nothing — the hero already ends on a colour change. */
body.ssk-v5 .ssk-hero::after{ display: none; }

/* — Type. Barlow Condensed is the strongest thing on the page; give it room
     and pull the tracking in so the two lines lock together as one block. */
body.ssk-v5 .ssk-hero__title{
  font-size: clamp(38px, 7.2vw, 82px);
  line-height: .92;
  letter-spacing: -.02em;
  text-wrap: balance;
}
body.ssk-v5 .ssk-hero__lead{
  max-width: 46ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.6;
}

/* — The plate. Real proportions (a UK plate is 520x111mm, ~4.7:1), a proper
     blue GB band, and enough depth to read as an object rather than an input. */
body.ssk-v5 .ssk-hero__plate-wrap{
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 2px 0 rgba(255,255,255,.65) inset;
  overflow: hidden;
}
body.ssk-v5 .ssk-hero__plate{
  background: linear-gradient(180deg,#fff 0%,#f2f3f5 100%);
  border: 1px solid #d7dae0;
}
body.ssk-v5 .ssk-hero__plate-flag{
  background: linear-gradient(180deg,#0b3f9e 0%,#062a6d 100%);
}
body.ssk-v5 .ssk-hero__vrm-input{
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-weight: 700;
  letter-spacing: .06em;
}

/* — The returning-visitor panel. It was a white SaaS card with a grey inner
     box; now it reads as part of the same black surface, so the plate above it
     stays the brightest thing in the composition. */
body.ssk-v5 .ssk-hero__widget{
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 16px;
}
body.ssk-v5 .ssk-hero__vp-info,
body.ssk-v5 .ssk-hero__vehicle-preview{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
}

/* — Trust bar. Was a flex line with fixed dividers, which orphaned the fifth
     stat onto its own centred row. A grid distributes all five evenly and the
     dividers become cell borders, so the count can change without breaking. */
body.ssk-v5 .ssk-trust-bar__inner{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  align-items: stretch;
}
body.ssk-v5 .ssk-trust-bar__divider{ display: none; }
body.ssk-v5 .ssk-trust-bar__stat{
  padding: 14px 12px;
  border-right: 1px solid rgba(255,255,255,.18);
  text-align: center;
}
body.ssk-v5 .ssk-trust-bar__stat:last-child{ border-right: 0; }
@media (max-width: 700px){
  body.ssk-v5 .ssk-trust-bar__inner{ grid-template-columns: repeat(2, 1fr); }
  body.ssk-v5 .ssk-trust-bar__stat:nth-child(2n){ border-right: 0; }
  body.ssk-v5 .ssk-trust-bar__stat{ border-bottom: 1px solid rgba(255,255,255,.18); }
}

/* — Motion. One load sequence, ~560ms, ending on the plate so the eye finishes
     where the customer needs to act. Composited properties only. */
@media (prefers-reduced-motion: no-preference){
  @keyframes ssk-hero-rise{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
  @keyframes ssk-hero-panel{ from{opacity:0; transform:translateY(22px) scale(.985)} to{opacity:1; transform:none} }
  @keyframes ssk-plate-sweep{
    0%   { transform: translateX(-120%); opacity: 0 }
    12%  { opacity: .55 }
    100% { transform: translateX(240%); opacity: 0 }
  }

  body.ssk-v5 .ssk-hero__eyebrow,
  body.ssk-v5 .ssk-hero__title,
  body.ssk-v5 .ssk-hero__lead,
  body.ssk-v5 .ssk-hero__badges{
    animation: ssk-hero-rise .46s cubic-bezier(.22,.61,.36,1) both;
  }
  body.ssk-v5 .ssk-hero__title  { animation-delay: .06s }
  body.ssk-v5 .ssk-hero__lead   { animation-delay: .14s }
  body.ssk-v5 .ssk-hero__badges { animation-delay: .20s }

  body.ssk-v5 .ssk-hero__widget{
    animation: ssk-hero-panel .52s cubic-bezier(.22,.61,.36,1) .18s both;
  }

  /* A single light sweep across the plate once it has landed — the plate being
     "read". Fires once; pointer-events none so it can never eat a tap. */
  body.ssk-v5 .ssk-hero__plate-wrap{ position: relative }
  body.ssk-v5 .ssk-hero__plate-wrap::after{
    content:""; position:absolute; inset:0; width:38%;
    pointer-events:none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.9), transparent);
    animation: ssk-plate-sweep 1.15s ease-out .72s 1 both;
  }
}

/* ── HERO PANEL — text on the inverted surface ─────────────────────────────
   The panel became a dark glass surface, but its type was coloured for the
   white card it used to be, so the heading and vehicle name rendered
   dark-on-dark. Inverting a surface means inverting everything on it. */
body.ssk-v5 .ssk-hero__widget,
body.ssk-v5 .ssk-hero__widget p,
body.ssk-v5 .ssk-hero__widget span,
body.ssk-v5 .ssk-hero__widget strong,
body.ssk-v5 .ssk-hero__widget div{ color: #fff; }

body.ssk-v5 .ssk-hero__widget-head strong,
body.ssk-v5 .ssk-hero__wtitle,
body.ssk-v5 .ssk-hero__widget-head > :first-child{ color: #fff; }

/* Secondary lines: dimmed, but still clear of 4.5:1 on this surface. */
body.ssk-v5 .ssk-hero__widget-head span,
body.ssk-v5 .ssk-hero__wsub,
body.ssk-v5 .ssk-hero__vp-meta,
body.ssk-v5 .ssk-hero__vp-info span{ color: rgba(255,255,255,.72); }

body.ssk-v5 .ssk-hero__vp-name,
body.ssk-v5 .ssk-hero__vp-info strong{ color: #fff; }

body.ssk-v5 .ssk-hero__vp-icon{ color: rgba(255,255,255,.85); }

/* Links keep an underline so they are not colour-only affordances. */
body.ssk-v5 .ssk-hero__vp-change,
body.ssk-v5 .ssk-hero__widget-link,
body.ssk-v5 .ssk-hero__widget-footer a{
  color: rgba(255,255,255,.86);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.ssk-v5 .ssk-hero__vp-change:hover,
body.ssk-v5 .ssk-hero__widget-link:hover,
body.ssk-v5 .ssk-hero__widget-footer a:hover{ color: #fff; }

/* The reg plate is a white object on purpose — keep its own type dark. */
body.ssk-v5 .ssk-hero__plate-wrap,
body.ssk-v5 .ssk-hero__plate,
body.ssk-v5 .ssk-hero__vrm-input{ color: var(--v5-ink, #16181d); }
body.ssk-v5 .ssk-hero__plate-flag,
body.ssk-v5 .ssk-hero__gb-text{ color: #fff; }

/* ── HERO H1 — the element is .ssk-hero__h1, not .ssk-hero__title ──────────
   The type scale and the load sequence above missed the headline entirely
   because of the wrong class name, and it kept running homepage.css's
   hpFadeUp on unrelated timing. Both corrected here. */
body.ssk-v5 .ssk-hero__h1{
  font-size: clamp(38px, 7.2vw, 82px);
  line-height: .92;
  letter-spacing: -.02em;
  text-wrap: balance;
}
body.ssk-v5 .ssk-hero__accent{ display: block; }

@media (prefers-reduced-motion: no-preference){
  body.ssk-v5 .ssk-hero__h1{
    animation: ssk-hero-rise .46s cubic-bezier(.22,.61,.36,1) .06s both;
  }
  /* The red line lands just after the white one, so the sentence reads in the
     order it is meant to be read. */
  body.ssk-v5 .ssk-hero__accent{
    animation: ssk-hero-rise .46s cubic-bezier(.22,.61,.36,1) .14s both;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   HOMEPAGE HERO — v7
   Seven defects measured on the live v6 hero. Fixes only, no new direction.
   ═══════════════════════════════════════════════════════════════════════════ */

/* [1] The hint line was #fff on its own opaque #f6f6f7 card — 1.08:1, i.e.
       invisible. It is a leftover from the white-card panel. Bring it onto the
       same dark glass as everything else it sits inside. */
body.ssk-v5 .ssk-hero__vp-hint{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.78);          /* 8.9:1 on the composited panel */
}
body.ssk-v5 .ssk-hero__vp-hint strong,
body.ssk-v5 .ssk-hero__vp-hint b{ color: #fff; }
body.ssk-v5 .ssk-hero__vp-hint svg,
body.ssk-v5 .ssk-hero__vp-hint .ssk-icon{ color: rgba(255,255,255,.8); }

/* [2] Mobile trust bar: two columns leaves an odd fifth stat alone in the left
       cell. Let an odd last child take the whole row so it centres under the
       four above it. Count-agnostic — holds if a stat is added or removed. */
@media (max-width: 700px){
  body.ssk-v5 .ssk-trust-bar__stat:last-child:nth-child(odd){
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 0;
  }
}

/* [3] Desktop plate proportion. Measured 6.44:1 because nothing capped the row.
       Capping the reg-entry row puts the plate near the real 4.7:1 and stops it
       reading as a generic text field. Desktop only — mobile already lands at
       4.92:1 and must keep its full-width tap area. */
@media (min-width: 900px){
  body.ssk-v5 .ssk-hero__plate-wrap{ max-width: 480px; }
}

/* [4] The bevel belonged to the plate, not to the row that also holds the red
       button — a white line was running across the top of the red. Drop shadow
       stays on the row so plate and button lift as one control. */
body.ssk-v5 .ssk-hero__plate-wrap{
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
body.ssk-v5 .ssk-hero__plate{
  box-shadow: 0 2px 0 rgba(255,255,255,.65) inset;
}

/* [5] Load sequence. accent and lead were both at .14s, so the red half of the
       headline and the paragraph arrived together. Spread so the sentence
       finishes before the supporting copy moves, and the panel still lands
       last — the eye ends on the plate, which is where the customer acts. */
@media (prefers-reduced-motion: no-preference){
  body.ssk-v5 .ssk-hero__eyebrow{ animation-delay: 0s; }
  body.ssk-v5 .ssk-hero__h1     { animation-delay: .06s; }
  body.ssk-v5 .ssk-hero__accent { animation-delay: .13s; }
  body.ssk-v5 .ssk-hero__lead   { animation-delay: .20s; }
  body.ssk-v5 .ssk-hero__badges { animation-delay: .27s; }
  body.ssk-v5 .ssk-hero__widget { animation-delay: .22s; }
}

/* [6] Tap targets. 16px and 34px measured; WCAG 2.5.5 wants 44. Padding only —
       no size change to the type, so nothing reflows. */
body.ssk-v5 .ssk-hero__widget-link{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 10px;
}
body.ssk-v5 .ssk-hero__book-now-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: 18px;
}

/* [7] Keep normal vertical touch/trackpad scrolling. Horizontal containment
       is handled by component wrappers; applying `none` to both roots made
       every page opt out of native scroll chaining and momentum behaviour. */
html, body{ overscroll-behavior-x: none; overscroll-behavior-y: auto; touch-action: auto; }


/* ==========================================================================
   HOMEPAGE HERO - v8
   Tablet regressions found verifying v7. Mechanism fixes, not breakpoints.
   ========================================================================== */

/* [1] Trust bar: flex fills each line and stretches the remainder across the
       last one, so a lone final stat goes full width instead of orphaning in
       the left cell. Replaces the auto-fit grid, whose column count could not
       be reasoned about without another media query at every screen size.
       The v6/v7 grid declarations above go inert on a flex container. */
body.ssk-v5 .ssk-trust-bar__inner{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
}
body.ssk-v5 .ssk-trust-bar__stat{
  flex: 1 1 150px;
  min-width: 150px;
}

/* [2] Plate proportion on tablet. v7 capped the reg row at 900px and left
       701-899 uncovered, where it measured 7.03:1. Same cap, correct floor.
       Below 701 the row stacks and already sits at 4.92:1. */
@media (min-width: 701px){
  body.ssk-v5 .ssk-hero__plate-wrap{ max-width: 480px; }
}


/* ==========================================================================
   HOMEPAGE HERO - v9
   Plate proportion fixed at the flex mechanism, not at breakpoints.
   Measured 2.60:1 at 900 and 3.47:1 at 1024 under v8.
   ========================================================================== */

/* The plate was flex: 1 1 0% with min-width 0, so it absorbed every pixel of
   any squeeze rather than letting the Find button wrap. A ceiling holds the
   real UK plate proportion (68px tall x 4.7 = 320), a floor makes the button
   wrap instead of crushing it. */
body.ssk-v5 .ssk-hero__plate{
  max-width: 320px;
}
@media (min-width: 701px){
  body.ssk-v5 .ssk-hero__plate{ min-width: 300px; }
}


/* ==========================================================================
   HOMEPAGE HERO - v10
   Find button collapsed to 20px once v9 let it wrap. Plate cap for the 62px
   mobile plate height.
   ========================================================================== */

/* [1] A lone flex item on a wrapped line sizes that line to its own content,
       so the button lost the 68px it got from stretching next to the plate.
       Measured h=20 at 900, 1024 and 1100. Floor it, and let it take the rest
       of its line so it is full width wrapped and gapless inline. */
body.ssk-v5 .ssk-hero__find-btn{
  min-height: 48px;
  flex: 1 1 auto;
}

/* [2] Below 701 the plate is 62px tall, so v9's 320px cap (4.7 x 68) gave
       5.16:1. 4.7 x 62 = 291. Under ~360 the row is narrower than that and the
       plate just fills it - tap area wins on the smallest phones. */
@media (max-width: 700px){
  body.ssk-v5 .ssk-hero__plate{ max-width: 291px; }
}


/* ==========================================================================
   HOMEPAGE HERO - v11
   Plate claims its 320px (4.7:1) basis before the button takes the slack.
   Measured 4.41:1 at 768, 820 and 1280+ under v10.
   ========================================================================== */
@media (min-width: 701px){
  body.ssk-v5 .ssk-hero__plate{ flex-basis: 320px; }
}


/* ==========================================================================
   DESKTOP HEADER — BOOKING-FIRST NAVIGATION RAIL
   A composed black rail gives the primary routes one strong visual object,
   while social links replace the phone promotion and booking owns the red.
   ========================================================================== */
body.ssk-v5 .ssk-topbar__right .ssk-topbar__book{
  position: relative;
  z-index: 2;
  color: #fff;
  font-weight: 800;
  letter-spacing: .02em;
}
body.ssk-v5 .ssk-topbar__right .ssk-topbar__book:hover{
  color: #fff;
  text-decoration: none;
}

body.ssk-v5 .ssk-header__socials,
body.ssk-v5 .ssk-mobile-panel__socials{
  display: flex;
  align-items: center;
}
body.ssk-v5 .ssk-header__socials a,
body.ssk-v5 .ssk-mobile-panel__socials a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.ssk-v5 .ssk-header__socials svg,
body.ssk-v5 .ssk-mobile-panel__socials svg{
  display: block;
  width: 18px;
  height: 18px;
}

@media (min-width: 1241px){
  body.ssk-v5 .ssk-header{
    min-height: 96px;
    background:
      linear-gradient(90deg, rgba(214,0,28,.035), transparent 24%),
      var(--v5-paper);
    border-bottom: 1px solid rgba(11,13,15,.12);
    box-shadow: 0 16px 34px -30px rgba(11,13,15,.75);
  }
  body.ssk-v5 .ssk-header::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--v5-red) 18%, var(--v5-red) 82%, transparent 100%);
    opacity: .72;
    pointer-events: none;
  }
  body.ssk-v5 .ssk-header__inner{
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 18px;
  }
  body.ssk-v5 .ssk-nav{
    justify-content: center;
  }
  body.ssk-v5 .ssk-nav__list{
    position: relative;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 6px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 16px;
    background:
      radial-gradient(circle at 18% -30%, rgba(214,0,28,.32), transparent 42%),
      linear-gradient(145deg, #16191d 0%, #08090b 100%);
    box-shadow:
      0 2px 0 rgba(255,255,255,.06) inset,
      0 12px 26px -18px rgba(11,13,15,.85);
  }
  body.ssk-v5 .ssk-nav__list::after{
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: -1px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, transparent, var(--v5-red), transparent);
    opacity: .8;
    pointer-events: none;
  }
  body.ssk-v5 .ssk-nav__link{
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: rgba(255,255,255,.82);
    font-size: 13.5px;
    font-weight: 700;
    transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
  }
  body.ssk-v5 .ssk-nav__link:hover,
  body.ssk-v5 .ssk-nav__link:focus-visible,
  body.ssk-v5 .ssk-nav__item--has-sub:hover > .ssk-nav__link,
  body.ssk-v5 .ssk-nav__item--has-sub.is-open > .ssk-nav__link{
    color: #fff;
    background: var(--v5-red);
    border-color: rgba(255,255,255,.18);
    transform: translateY(-1px);
  }
  body.ssk-v5 .ssk-nav__caret{
    color: rgba(255,255,255,.55);
  }
  body.ssk-v5 .ssk-nav__item--reg .ssk-nav__link{
    color: #fff;
    background: rgba(214,0,28,.2);
    border-color: rgba(214,0,28,.42);
  }
  body.ssk-v5 .ssk-nav__item--reg .ssk-nav__link:hover,
  body.ssk-v5 .ssk-nav__item--reg .ssk-nav__link:focus-visible{
    background: var(--v5-red);
    border-color: var(--v5-red);
  }
  body.ssk-v5 .ssk-header__socials{
    gap: 3px;
    padding: 4px;
    border: 1px solid var(--v5-line);
    border-radius: 12px;
    background: var(--v5-paper-2);
  }
  body.ssk-v5 .ssk-header__socials a{
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: var(--v5-ink);
    transition: color .16s ease, background .16s ease, transform .16s ease;
  }
  body.ssk-v5 .ssk-header__socials a:hover,
  body.ssk-v5 .ssk-header__socials a:focus-visible{
    color: #fff;
    background: var(--v5-red);
    transform: translateY(-2px);
  }
  body.ssk-v5 .ssk-header__cta{
    gap: 8px;
    min-height: 48px;
    padding: 0 18px;
    box-shadow: 0 8px 20px -12px rgba(214,0,28,.9), 0 3px 0 #a80016;
    transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
  }
  body.ssk-v5 .ssk-header__cta:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 24px -14px rgba(214,0,28,.95), 0 5px 0 #a80016;
  }
  body.ssk-v5 .ssk-header__cta .ssk-icon{
    width: 17px;
    height: 17px;
  }
}

@media (max-width: 1240px){
  body.ssk-v5 .ssk-header__socials{ display: none; }
}

body.ssk-v5 .ssk-mobile-panel__socials{
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
body.ssk-v5 .ssk-mobile-panel__socials a{
  width: 44px;
  height: 44px;
  border: 1px solid var(--v5-line);
  border-radius: 10px;
  color: var(--v5-ink);
  background: var(--v5-paper-2);
}
body.ssk-v5 .ssk-mobile-panel__socials a:hover,
body.ssk-v5 .ssk-mobile-panel__socials a:focus-visible{
  color: #fff;
  background: var(--v5-red);
  border-color: var(--v5-red);
}

/* ── Trust-bar inline link ───────────────────────────────────────────────────
   The Bradford link inside the coverage stat inherits the bar's own text
   colour, so without an underline it is indistinguishable from the label
   around it — undiscoverable, and a WCAG 1.4.1 failure since colour alone
   carries no distinction here either. Underline is the only affordance
   available without breaking the bar's visual rhythm. */
.ssk-trust-bar__stat span a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
}

.ssk-trust-bar__stat span a:hover,
.ssk-trust-bar__stat span a:focus-visible {
  color: #fff;
  text-decoration-thickness: 2px;
}

.ssk-trust-bar__stat span a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 2px;
}