/* =============================================================================
   JFA DESIGN SYSTEM  —  one stylesheet, every redesigned page
   -----------------------------------------------------------------------------
   John, 29 Aug 2026: "we need to use the same theme, style throughout" and
   "don't use typical AI designs like the coloured line on one side of a container".

   TWO RULES THIS FILE ENFORCES
   1. NO ACCENT BAR DOWN THE SIDE OF A PANEL. That device is the single most
      recognisable "generated by a machine" tell. Emphasis comes from the workshop
      dark panel (#0F1720), the plate-yellow tab, or a real photograph.
   2. NO DECORATIVE UNDERLINE UNDER EVERY HEADING. Sections are introduced by a
      small cyan Oswald kicker ABOVE the heading - the pattern already approved on
      the homepage hero ("INDEPENDENT · MAIDSTONE, KENT · EST. 2011").

   HERO TIERS - the answer to "should the big bold hero be on every page?" No.
     .hero-1  Home and /tuning-parts/. The two front doors. Biggest type, the blue
              slab highlight, chips, full proof band.
     .hero-2  Service pages: /services/, servicing, Abarth, rolling road. Same dark
              photo and kicker, type ONE STEP DOWN, no slab, no chips.
     .hero-3  Detail pages: Bronze/Silver/Gold/Platinum and similar. Compact, tinted
              rather than photographic, smallest heading.
   A page that shouts as loudly as the homepage makes the homepage quieter.
   ============================================================================= */

.hv2{
  /* ---- colour ---- */
  --ink:#10171E;        /* body text, headings                                  */
  --ink2:#55636F;       /* secondary text                                       */
  --soft:#F4F7FA;       /* alternate section background                         */
  --line:#E2E8EE;       /* hairlines and card borders                           */
  --dark:#0F1720;       /* the workshop panel - our emphasis device              */
  --darker:#0B1116;     /* hero base                                            */
  --cyan:#00C6FF;       /* the one accent. Used for action, never decoration.   */
  --cyanText:#0079AE;   /* cyan that passes contrast on white                   */
  --plate:#ffcd26;      /* number plate yellow - ownable, use sparingly         */
  --warn:#B4381F;

  /* ---- type ---- */
  --h1-1:clamp(38px,6.4vw,68px);   /* hero tier 1 */
  --h1-2:clamp(30px,4.6vw,46px);   /* hero tier 2 */
  --h1-3:clamp(26px,3.6vw,36px);   /* hero tier 3 */
  --h2:clamp(22px,3vw,31px);
  --h3:18px;

  /* ---- rhythm ---- */
  --sec:56px;
  --gap:14px;
  --radius:14px;

  font-family:'Open Sans',sans-serif;color:var(--ink);background:#fff;line-height:1.6;
}
.hv2 *{box-sizing:border-box}
.hv2 h1,.hv2 h2,.hv2 h3,.hv2 h4{
  font-family:Oswald,'Arial Narrow',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.01em;margin:0;color:var(--ink)}
.hv2 a{text-decoration:none;color:inherit}
.hv2 a:focus-visible,.hv2 button:focus-visible,.hv2 input:focus-visible{
  outline:3px solid var(--cyanText);outline-offset:2px}
.hv2 .w{max-width:1080px;margin:0 auto;padding:0 22px}
.hv2 p{margin:0 0 14px;font-size:15.5px;line-height:1.75;color:var(--ink2)}

/* ---------- KICKER: replaces the decorative heading underline ---------- */
.hv2 .kick{display:block;font-family:Oswald,sans-serif;font-size:11.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--cyanText);margin-bottom:9px}
.hv2 .hero .kick{color:#7FD8F7}

/* ---------- HERO ---------- */
.hv2 .hero{position:relative;overflow:hidden;background:var(--darker)}
.hv2 .hero .ph{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:brightness(.95) saturate(1.05)}
.hv2 .hero .shade{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,11,16,.22),rgba(6,11,16,.05) 42%,rgba(8,12,17,.8))}
.hv2 .hero .in{position:relative;max-width:1080px;margin:0 auto;text-align:center}
/* With the veil this light the headline needs its own backing, or it fights the car.
   A soft radial scrim behind the TEXT only keeps contrast without darkening the photo. */
.hv2 .hero .in:before{content:"";position:absolute;left:50%;top:50%;width:120%;height:130%;
  transform:translate(-50%,-50%);pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at center,rgba(6,11,16,.62),rgba(6,11,16,.28) 55%,rgba(6,11,16,0) 78%)}
.hv2 .hero .in > *{position:relative;z-index:1}
.hv2 .hero h1{color:#fff;line-height:1}
.hv2 .hero .sub{color:#B6C4D1;font-size:16.5px;line-height:1.62;margin:16px auto 0;max-width:650px}
.hv2 .hero .ans{color:#93A3B1;font-size:13.5px;margin:10px 0 0}

/* MOBILE (John, 7 Sep): on a phone the photo fills the whole width, so the grey paragraph sat
   straight on the car and was hard to read. The photo stays as light as desktop; the TEXT gets a
   stronger backing: a near-solid band under the copy, white paragraph, and a shadow on the type. */
@media(max-width:700px){
  .hv2 .hero .in:before{width:140%;height:120%;
    background:radial-gradient(ellipse at center,rgba(6,11,16,.86),rgba(6,11,16,.62) 55%,rgba(6,11,16,.1) 85%)}
  .hv2 .hero h1{text-shadow:0 2px 14px rgba(0,0,0,.55)}
  .hv2 .hero .sub{color:#F2F6F9;font-size:16px;text-shadow:0 1px 10px rgba(0,0,0,.7)}
  .hv2 .hero .ans{color:#C9D4DE;text-shadow:0 1px 8px rgba(0,0,0,.7)}
}
.hv2 .hero-1 .in{padding:64px 22px 52px}
.hv2 .hero-1 h1{font-size:var(--h1-1)}
/* the slab highlight - tier 1 ONLY. It is the homepage's signature and stops being
   a signature the moment every page has one. */
.hv2 .hero-1 h1 .slab{display:inline-block;background:linear-gradient(100deg,#0091c9,#00C6FF);
  padding:.02em .18em;transform:skewX(-4deg);box-shadow:0 10px 30px -14px rgba(0,198,255,.8)}

.hv2 .hero-2 .in{padding:56px 22px 44px}
.hv2 .hero-2 h1{font-size:var(--h1-2)}
.hv2 .hero-2 h1 em{font-style:normal;color:var(--cyan)}

.hv2 .hero-3{background:var(--dark)}
.hv2 .hero-3 .in{padding:44px 22px 36px;text-align:left}
.hv2 .hero-3 h1{font-size:var(--h1-3)}
.hv2 .hero-3 .sub{margin-left:0;text-align:left}

/* ---------- SECTIONS ---------- */
.hv2 .sec{padding:var(--sec) 0;background:#fff}
.hv2 .sec.alt{background:var(--soft)}
.hv2 .sec.dark{background:var(--dark);color:#fff}
.hv2 .sec.dark h2,.hv2 .sec.dark h3,.hv2 .sec.dark h4{color:#fff}
.hv2 .sec.dark p{color:#AEBDCA}
.hv2 .sec.dark .kick{color:#7FD8F7}
.hv2 .shead{margin-bottom:22px}
.hv2 .shead h2{font-size:var(--h2);line-height:1.1}
.hv2 .shead p{margin:10px 0 0;max-width:680px}
.hv2 .shead.mid{text-align:center}
.hv2 .shead.mid p{margin-left:auto;margin-right:auto}

/* ---------- CARDS ---------- */
.hv2 .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--gap)}
.hv2 .card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;transition:transform .2s,box-shadow .2s,border-color .2s}
.hv2 .card:hover{transform:translateY(-3px);box-shadow:0 18px 38px -28px rgba(16,23,30,.85);
  border-color:rgba(16,23,30,.28)}
.hv2 .card h3{font-size:17px;line-height:1.2;margin-bottom:7px}
.hv2 .card p{margin:0;font-size:13.5px;line-height:1.55}
.hv2 .card .go{display:inline-block;margin-top:11px;font-family:Oswald,sans-serif;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--cyanText)}
/* EMPHASIS = the workshop panel, not a coloured edge */
.hv2 .card.lead{background:var(--dark);border-color:var(--dark)}
.hv2 .card.lead h3{color:#fff}
.hv2 .card.lead p{color:#AEBDCA}
.hv2 .card.lead .go{color:#7FD8F7}

/* ---------- NOTE PANEL (was the left-accent bar) ----------
   A quiet inset panel with an Oswald label. No coloured edge. */
.hv2 .panel{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;margin-top:22px}
.hv2 .panel b.lab{display:block;font-family:Oswald,sans-serif;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink2);margin-bottom:6px}
.hv2 .panel p:last-child{margin-bottom:0}
.hv2 .sec.dark .panel{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}

/* ---------- PLATE TAB: the one ownable flourish ---------- */
.hv2 .tab{display:inline-block;font-family:Oswald,sans-serif;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:#08131A;background:var(--plate);padding:5px 11px;border-radius:4px}

/* ---------- NUMBERED STEPS (replaces the vertical rail) ---------- */
.hv2 .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--gap)}
.hv2 .step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 20px 18px;overflow:hidden}
.hv2 .step .n{position:absolute;right:14px;top:6px;font-family:Oswald,sans-serif;font-weight:600;
  font-size:52px;line-height:1;color:var(--line)}
.hv2 .sec.dark .step{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.hv2 .sec.dark .step .n{color:rgba(255,255,255,.12)}
.hv2 .step h4{font-size:16px;margin-bottom:4px;position:relative}
.hv2 .step .out{font-family:Oswald,sans-serif;font-size:15px;color:var(--cyanText);margin:2px 0 7px}
.hv2 .sec.dark .step .out{color:#7FD8F7}
.hv2 .step p{margin:0;font-size:14px;line-height:1.65}

/* ---------- TICK LIST ----------
   The theme paints its own li marker next to a drawn tick, hence both overrides. */
.hv2 .ticks{list-style:none!important;padding:0;margin:14px 0 0}
.hv2 .ticks li{position:relative;padding:9px 0 9px 22px;font-size:14.5px;color:#3B4954;
  border-top:1px solid var(--line);list-style:none!important}
.hv2 .ticks li::marker{content:""!important;font-size:0!important}
.hv2 .ticks li:before{content:"";position:absolute;left:2px;top:15px;width:6px;height:11px;
  border:solid var(--cyanText);border-width:0 2.5px 2.5px 0;transform:rotate(42deg)}
.hv2 .sec.dark .ticks li{color:#C6D2DC;border-top-color:rgba(255,255,255,.12)}
.hv2 .sec.dark .ticks li:before{border-color:var(--cyan)}

/* ---------- THE PLATE ----------
   THE ONLY PLACE IN THIS FILE THAT USES `html body`, and it is deliberate.
   The theme styles .reg-search and its input globally. !important alone is not enough: when two
   rules both carry !important at equal specificity, the stylesheet that loads LAST wins, and that
   is the theme's. The old inline <style> in each template only won because inline body styles are
   parsed after every enqueued sheet. Moving to a shared stylesheet lost that accident, and the
   plate went straight back to 72px tall with the button flung 335px away - the third time this
   exact bug has appeared.
   Canon, measured from the theme's own plate on /contact/:
     input 225x45, font 27px, line-height 43, centred, padding 0 20px 0 33px
     :before EU strip 23x45. Pin the WRAPPER as well as the input. */
html body .hv2 .pf{display:flex!important;gap:10px!important;justify-content:center!important;
  align-items:center!important;flex-wrap:wrap!important;margin:26px 0 10px!important}
html body .hv2 .pf .reg-search{position:relative!important;display:inline-flex!important;
  align-items:center!important;width:225px!important;height:45px!important;padding:0!important;
  margin:0!important;background:none!important;border:0!important;box-shadow:none!important;
  outline:none!important;flex:0 0 auto!important}
html body .hv2 .pf input{font-family:"UK Numberplate","Open Sans",sans-serif!important;
  width:225px!important;height:45px!important;font-size:27px!important;line-height:43px!important;
  text-align:center!important;padding:0 20px 0 33px!important;background:var(--plate)!important;
  border:0!important;border-radius:3px!important;color:#10171E!important;
  text-transform:uppercase!important;box-shadow:none!important;margin:0!important;display:block!important}
html body .hv2 .pf .reg-search:before{content:""!important;position:absolute!important;left:0!important;
  top:0!important;width:23px!important;height:45px!important;
  background:url(/wp-content/themes/jfautomotive/img/backgrounds/eu-numberplate-banner.svg) no-repeat center/cover!important;
  border-radius:3px 0 0 3px!important;z-index:2!important;pointer-events:none!important}
html body .hv2 .pf .go{height:45px!important;background:var(--cyan)!important;color:#04141C!important;
  border:0!important;border-radius:9px!important;font-family:Oswald,sans-serif!important;
  font-weight:600!important;font-size:14px!important;letter-spacing:.06em!important;
  text-transform:uppercase!important;padding:0 20px!important;cursor:pointer!important;
  white-space:nowrap!important;position:static!important;opacity:1!important;flex:0 0 auto!important}
html body .hv2 .pf .go:before,
html body .hv2 .pf .go:after{display:none!important;content:none!important}


/* MOBILE: plate 225 + button do not fit side by side under 600px, so the button wraps under the
   plate at the SAME 225px width (John, 6 Sep: servicing hero button was clipped at 104px). */
@media(max-width:600px){html body .hv2 .pf .go{width:225px!important;flex:0 0 225px!important;
  padding:0!important;text-align:center!important;justify-content:center!important}}
/* ---------- BUTTONS ---------- */
.hv2 .cta{display:inline-flex;align-items:center;gap:9px;background:var(--cyan);color:#04141C;
  font-family:Oswald,sans-serif;font-weight:600;font-size:15px;letter-spacing:.06em;
  text-transform:uppercase;padding:15px 26px;border-radius:11px;margin-top:20px;
  box-shadow:0 12px 30px -16px rgba(0,198,255,.9);transition:transform .16s,filter .16s}
.hv2 .cta:hover{transform:translateY(-1px);filter:brightness(1.06)}
.hv2 .cta.ghost{background:transparent;color:var(--cyanText);border:1px solid var(--line);box-shadow:none}

/* ---------- PROOF BAND ---------- */
.hv2 .proof{background:var(--dark);color:#fff;padding:26px 0}
.hv2 .proof .g{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;
  text-align:center}
.hv2 .proof b{display:block;font-family:Oswald,sans-serif;font-size:30px;line-height:1}
.hv2 .proof span{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#93A3B1;margin-top:6px;font-family:Oswald,sans-serif}

/* ---------- PILL LIST ---------- */
.hv2 .pills{display:flex;flex-wrap:wrap;gap:8px}
.hv2 .pills span{border:1px solid var(--line);border-radius:99px;padding:7px 14px;font-size:13.5px;
  color:#3B4954;background:#fff}

/* ---------- FAQ ---------- */
.hv2 .faq{max-width:820px;margin:0 auto}
.hv2 .faq details{border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:10px}
.hv2 .faq summary{cursor:pointer;padding:16px 20px;font-family:Oswald,sans-serif;font-size:15px;
  list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
.hv2 .faq summary::-webkit-details-marker{display:none}
.hv2 .faq summary:after{content:"+";color:var(--cyanText);font-size:20px;line-height:1}
.hv2 .faq details[open] summary:after{content:"\2212"}
.hv2 .faq .a{padding:0 20px 17px;color:var(--ink2);line-height:1.7;font-size:14.5px}
.hv2 .faq .a a{color:var(--cyanText);text-decoration:underline;text-underline-offset:3px}

/* ---------- REVEAL ---------- */
.jfa-rv .hv2 .rv{opacity:0;transform:translateY(22px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.jfa-rv .hv2 .rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.jfa-rv .hv2 .rv{opacity:1;transform:none;transition:none}}
/* NOTE: .rv is hidden ONLY under .jfa-rv, which jfa_ds() puts on <html> from an inline head
   script. Without the script nothing is hidden, so a JS failure can never white out a page.
   The rolling road page went blank below the hero because it used .rv without the observer,
   which used to be copied into each template rather than living here. */

/* ---------- MOCK-UP BANNER ---------- */
.hv2 .note{background:#FDF3F0;border-bottom:1px solid #F0D8D0;padding:9px 22px;text-align:center;
  font-size:12.5px;color:#8A4433}
.hv2 .note b{color:var(--warn);font-family:Oswald,sans-serif;letter-spacing:.1em}

/* the theme's own header reg box duplicates ours on these pages */
.header-reg-search{display:none!important}
/* ============================================================================
   JFA QUOTE FORM - two step, car first
   Part of the design system. No coloured edge, no heading underline: the step
   indicator and the plate do the work.
   ============================================================================ */
.hv2 .jqf{max-width:560px;margin:0 auto}
.hv2 .jqf-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 26px 24px}
.hv2 .sec.dark .jqf-form{background:var(--dark);border-color:rgba(255,255,255,.14)}

/* step indicator - three words, the done ones fill in */
.hv2 .jqf-steps{display:flex;gap:0;margin:0 0 22px;border-bottom:1px solid var(--line)}
.hv2 .jqf-steps span{flex:1;font-family:Oswald,sans-serif;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink2);padding:0 0 10px;position:relative;text-align:center}
.hv2 .jqf-steps span:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:transparent;transition:background .25s}
.hv2 .jqf-steps span.on{color:var(--ink)}
.hv2 .jqf-steps span.on:after{background:var(--cyan)}
.hv2 .sec.dark .jqf-steps span.on{color:#fff}

.hv2 .jqf-step{display:none}
.hv2 .jqf-step.on{display:block}
.hv2 .jqf-lab{display:block;font-family:Oswald,sans-serif;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink2);margin:14px 0 6px}
.hv2 .jqf-step > .jqf-lab:first-child{margin-top:0}
.hv2 .sec.dark .jqf-lab{color:#93A3B1}

.hv2 .jqf input:not([type=checkbox]),.hv2 .jqf textarea,.hv2 .jqf select{
  width:100%;border:1px solid var(--line);border-radius:10px;padding:13px 14px;font-size:16px;
  font-family:'Open Sans',sans-serif;color:var(--ink);background:#fff;transition:border-color .18s,box-shadow .18s}
.hv2 .jqf input:focus,.hv2 .jqf textarea:focus,.hv2 .jqf select:focus{outline:none;border-color:var(--cyanText);
  box-shadow:0 0 0 3px rgba(0,198,255,.18)}
.hv2 .jqf input.bad{border-color:#B4381F;background:#FDF3F0}
.hv2 .jqf textarea{resize:vertical;min-height:84px}
/* a select needs less vertical padding than a text input to end up the same height, and room
   on the right for the browser's own chevron */
.hv2 .jqf select{padding:12px 34px 12px 13px;cursor:pointer}
/* the theme pins selects to a fixed width, so a lone dropdown came out 252px wide in a
   560px form. Same html body escalation the plate uses. The dialling-code select opts
   back out below, and has to stay AFTER this rule to win. */
html body .hv2 .jqf select{width:100%!important;max-width:100%!important}
html body .hv2 .jqf-tel select{width:132px!important;flex:0 0 auto}
@media(max-width:420px){html body .hv2 .jqf-tel select{width:118px!important}}
.hv2 .jqf select:invalid,.hv2 .jqf select option[value=""]{color:#8B98A4}

/* step 1 uses the real plate, because that is the thing people recognise */
.hv2 .jqf-plate{position:relative;display:block;width:225px;height:45px}
.hv2 .jqf-plate:before{content:"";position:absolute;left:0;top:0;width:23px;height:45px;z-index:2;
  background:url(/wp-content/themes/jfautomotive/img/backgrounds/eu-numberplate-banner.svg) no-repeat center/cover;
  border-radius:3px 0 0 3px;pointer-events:none}
html body .hv2 .jqf-plate input{font-family:"UK Numberplate","Open Sans",sans-serif!important;
  width:225px!important;height:45px!important;font-size:27px!important;line-height:43px!important;
  text-align:center!important;padding:0 20px 0 33px!important;background:var(--plate)!important;
  border:0!important;border-radius:3px!important;color:#10171E!important;text-transform:uppercase!important;
  box-shadow:none!important;margin:0!important;display:block!important}

.hv2 .jqf-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.hv2 .jqf-two{grid-template-columns:1fr;gap:0}}

.hv2 .jqf-next,.hv2 .jqf-submit,.hv2 .jqf-extra{
  display:inline-flex;align-items:center;gap:8px;background:var(--cyan);color:#04141C;border:0;
  font-family:Oswald,sans-serif;font-weight:600;font-size:15px;letter-spacing:.06em;
  text-transform:uppercase;padding:15px 26px;border-radius:11px;cursor:pointer;margin-top:18px;
  box-shadow:0 12px 30px -16px rgba(0,198,255,.9);transition:transform .16s,filter .16s}
.hv2 .jqf-next:hover,.hv2 .jqf-submit:hover,.hv2 .jqf-extra:hover{transform:translateY(-1px);filter:brightness(1.06)}
.hv2 .jqf-next[disabled],.hv2 .jqf-submit[disabled]{opacity:.6;cursor:default;transform:none}
.hv2 .jqf-back,.hv2 .jqf-skip{background:none;border:0;color:var(--ink2);font-family:Oswald,sans-serif;
  font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;padding:15px 4px;margin-top:18px}
.hv2 .jqf-back:hover,.hv2 .jqf-skip:hover{color:var(--ink)}
.hv2 .sec.dark .jqf-back,.hv2 .sec.dark .jqf-skip{color:#93A3B1}
.hv2 .jqf-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

.hv2 .jqf-consent{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-size:13px;
  line-height:1.5;color:var(--ink2)}
.hv2 .jqf-consent input{margin-top:2px;width:16px;height:16px;flex:0 0 auto}
.hv2 .jqf-consent a{color:var(--cyanText);text-decoration:underline;text-underline-offset:3px}
.hv2 .jqf-note{font-size:13px;color:var(--ink2);margin:12px 0 0}
.hv2 .sec.dark .jqf-note,.hv2 .sec.dark .jqf-consent{color:#93A3B1}
.hv2 .jqf-done{font-size:16.5px;line-height:1.6;color:var(--ink)}
.hv2 .sec.dark .jqf-done{color:#fff}
.hv2 .jqf-err{display:none;margin:14px 0 0;font-size:14px;color:#B4381F}
.hv2 .jqf-err.on{display:block}
.hv2 .jqf #jqf-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* phone row: dialling code + number. RampDesk stores one phone string, so these are joined on
   submit rather than being two stored values. */
.hv2 .jqf-tel{display:flex;gap:8px}
.hv2 .jqf-tel select{flex:0 0 auto;width:132px;padding-right:28px;border:1px solid var(--line);border-radius:10px;
  padding:13px 10px;font-size:15px;font-family:'Open Sans',sans-serif;color:var(--ink);
  background:#fff;cursor:pointer}
.hv2 .jqf-tel select:focus{outline:none;border-color:var(--cyanText);
  box-shadow:0 0 0 3px rgba(0,198,255,.18)}
.hv2 .jqf-tel input{flex:1 1 auto;min-width:0}
@media(max-width:420px){.hv2 .jqf-tel select{width:118px}}

/* boot line while the RampDesk definition loads */
.hv2 .jqf-boot{font-size:14px;color:var(--ink2);margin:6px 0 0}
.hv2 .jqf-fields:empty{display:none}

/* Second marketing ask. Deliberately quiet: an inset panel, not a modal, and both buttons send. */
.hv2 .jqf-perk{display:none;margin-top:16px;background:var(--soft);border:1px solid var(--line);
  border-radius:12px;padding:16px 18px}
.hv2 .jqf-perk.on{display:block}
.hv2 .jqf-perk p{margin:0 0 12px;font-size:14.5px;line-height:1.6;color:var(--ink)}
.hv2 .jqf-perk-btns{display:flex;gap:10px;flex-wrap:wrap}
.hv2 .jqf-perk-btns button{font-family:Oswald,sans-serif;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;border-radius:10px;padding:12px 18px;cursor:pointer;border:1px solid var(--line)}
.hv2 #jqf-perk-yes{background:var(--cyan);color:#04141C;border-color:var(--cyan)}
.hv2 #jqf-perk-no{background:#fff;color:var(--ink2)}
.hv2 #jqf-perk-no:hover{color:var(--ink)}


/* ============================================================================
   HEADER NAV - spread it when there is no reg box (John, 29 Aug 2026)
   The theme reserves 16rem on the right of .main-navigation for a header reg
   search, on every page that is not the shop. On our rebuilt pages that box is
   not visible, so the space was reserved for nothing and the menu bunched to
   the left. jfa-design-system.php adds .jfa-nav-wide when no VISIBLE header reg
   box is found, which puts the menu back across the full width.
   ========================================================================= */
/* moved inline into jfa-design-system2.php so it applies on EVERY page, not
   only the ones that load this stylesheet. */

/* A .cta placed INSIDE a hero came out cyan-on-cyan: the hero's own link colour beat .cta's,
   so the button rendered as a solid block with invisible text. First hero to use one was the
   rolling road page. Fixed here rather than in that template so the next one cannot repeat it. */
/* THE CULPRIT, found by listing every matching rule rather than guessing: the theme ships
   'p a{color:#00C6FF!important}'. Any .cta inside a paragraph - which is most of them - came out
   cyan on cyan, i.e. a solid block with invisible text. !important is required to beat it. */
.hv2 .cta,.hv2 p a.cta,.hv2 .hero .in a.cta{color:#04141C!important}
.hv2 .cta.ghost,.hv2 p a.cta.ghost,.hv2 .hero .in a.cta.ghost{color:#fff!important}

/* Checkbox groups in the quote form (multi_checkbox fields from RampDesk). Added 31 Aug for the
   AdBlue form's which services are you interested in?. */
/* ☠️ These first shipped using --soft and --line, which are LIGHT theme values - inside the dark
   form panel that produced a near-white row with white text on it, i.e. invisible. The form is
   dark, so these are dark. Check computed colours, not token names. */
.hv2 .jqf-ckgroup{display:grid;gap:8px;margin-top:2px}
.hv2 .jqf-ck{display:flex;gap:12px;align-items:center;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:10px;
  padding:13px 15px;font-size:15px;line-height:1.4;color:#C7D3DD;
  transition:border-color .15s,background .15s,color .15s}
.hv2 .jqf-ck:hover{border-color:rgba(0,198,255,.55);color:#fff}
.hv2 .jqf-ck input{flex:0 0 auto;width:19px;height:19px;margin:0;accent-color:#00C6FF;cursor:pointer}
.hv2 .jqf-ck:has(input:checked){background:rgba(0,198,255,.12);border-color:#00C6FF;color:#fff}
.hv2 .jqf-ckgroup.bad .jqf-ck{border-color:#FF6B6B}