/* ==========================================================================
   JLR Engines: 2026 Design System  (v2)
   --------------------------------------------------------------------------
   v2 changes:
   - Palette switched to the EXISTING site colours (#d90429 red, #242424 dark)
     so every page stays consistent. A coordinated colour change can happen
     later in one pass across the whole site.
   - Dark sections now re-declare the neutral tokens locally, which fixes the
     whole class of dark-on-dark contrast bugs rather than patching each one.
   - Google review components added.
   - Conversion focused additions: proof beside the form, risk reversal,
     response time promise, WhatsApp route, single primary action per screen.
   ========================================================================== */

:root {

  /* ---- Brand (existing site palette) ---------------------------------- */
  --red:          #d90429;   /* PRIMARY ACTION ONLY */
  --red-hover:    #b40322;
  --red-ink:      #b00320;   /* red as readable text on light */
  --dark:         #242424;   /* dark ground */
  --darker:       #161616;   /* deepest ground */

  /* ---- Neutrals (biased slightly warm to sit with the red) ------------ */
  --ink:          #1C1C1C;
  --ink-soft:     #4A4A4A;
  --muted:        #797979;   /* matches the theme's existing grey */
  --paper:        #FFFFFF;
  --surface:      #F7F7F7;
  --card:         #FFFFFF;
  --line:         #E4E4E4;
  --line-strong:  #CFCFCF;

  --gold:         #FFCB05;   /* review stars only */
  --green-ok:     #1E7A47;   /* positive confirmations only */

  /* ---- Type ------------------------------------------------------------ */
  --font-display: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1.0625rem;
  --t-md:   1.1875rem;
  --t-lg:   1.5rem;
  --t-xl:   clamp(1.75rem, 2.6vw, 2.25rem);
  --t-2xl:  clamp(2.25rem, 4.4vw, 3.5rem);

  /* ---- Space ----------------------------------------------------------- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  --section-y: var(--s-9);
  --gutter:    var(--s-5);
  --container: 1200px;
  --measure:   68ch;

  --radius:    3px;
  --radius-lg: 5px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.14);

  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body.jlr {
  margin: 0; background: var(--paper); color: var(--ink-soft);
  font-family: var(--font-body); font-size: var(--t-base); line-height: 1.7;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

.jlr h1, .jlr h2, .jlr h3, .jlr h4, .jlr h5 {
  font-family: var(--font-display); color: var(--ink); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.12; text-wrap: balance; margin: 0;
}
.jlr p { margin: 0 0 var(--s-4); max-width: var(--measure); }
.jlr p:last-child { margin-bottom: 0; }
/* Base link colour, at ZERO specificity via :where(), so ANY component that
   sets its own colour (buttons, sticky bar, text-links) always wins with no
   fight. This is what fixes both the dark-on-red button text and the sticky
   bar links picking up the link colour. */
:where(.jlr a) { color: var(--red-ink); text-underline-offset: 3px; }
:where(.jlr a:hover) { color: var(--red); }
:where(.jlr img) { max-width: 100%; height: auto; display: block; }
.jlr :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }

.jlr-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ==========================================================================
   Layout
   ========================================================================== */

.jlr-wrap { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }

/* Global overflow guards. Grid `1fr` and flex items default to a min size of
   their content, which lets a wide child (the reg card, a long word, a table)
   push the whole page wider than the screen. min-width:0 lets them shrink.
   overflow-x:hidden on the body is the final backstop so the page can never
   scroll sideways on a phone. */
body.jlr { overflow-x: hidden; }
.jlr-grid > *, .jlr-hero__inner > *, .jlr-split > * { min-width: 0; }
.jlr-section { padding-block: var(--section-y); }
.jlr-section--tight { padding-block: var(--s-8); }
.jlr-section--paper   { background: var(--paper); }
.jlr-section--surface { background: var(--surface); }

/* ---- Dark context ---------------------------------------------------------
   Any dark ground re-declares the neutral tokens. Every component inside then
   inherits correct colours automatically. This is what prevents dark text
   landing on a dark background anywhere.                                    */
.jlr-section--dark,
.jlr-hero,
.jlr-close {
  background: var(--dark);
  --ink:         #FFFFFF;
  --ink-soft:    #CFCFCF;
  --muted:       #9E9E9E;
  --paper:       var(--dark);
  --surface:     #2E2E2E;
  --card:        #2E2E2E;
  --line:        rgba(255,255,255,.14);
  --line-strong: rgba(255,255,255,.30);
  --red-ink:     #FF5A6E;   /* red is not legible on dark; lift it */
  color: var(--ink-soft);
}
.jlr-section--dark { background: var(--darker); }

/* ==========================================================================
   Section headers
   ========================================================================== */

.jlr-head { margin-bottom: var(--s-7); max-width: 780px; }
.jlr-head--center { margin-inline:auto; text-align:center; }

.jlr-eyebrow {
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-family:var(--font-display); font-size:var(--t-xs); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--red-ink);
  margin-bottom:var(--s-3);
}
.jlr-eyebrow::before { content:""; width:22px; height:2px; background:currentColor; }
.jlr-head--center .jlr-eyebrow::before { display:none; }

.jlr-h2 { font-size:var(--t-xl); margin-bottom:var(--s-4); }
.jlr-lead { font-size:var(--t-md); color:var(--muted); max-width:62ch; }
.jlr-head--center .jlr-lead { margin-inline:auto; }

/* ==========================================================================
   Buttons. Red is reserved for the primary conversion action.
   ========================================================================== */

.jlr-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  font-family:var(--font-display); font-size:var(--t-sm); font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  padding:16px 28px; border:1.5px solid transparent; border-radius:var(--radius);
  cursor:pointer; text-decoration:none;
  transition:background .2s var(--ease), border-color .2s var(--ease),
             color .2s var(--ease), transform .2s var(--ease);
}
.jlr-btn:hover { transform:translateY(-1px); }

/* Button colours use compound selectors (.jlr-btn.jlr-btn--x, specificity 0,2,0)
   so they always beat a container's link rule like `.jlr-mnav a` (0,1,1). This
   is what stops button text inheriting a nav/footer link colour in any context. */
.jlr-btn.jlr-btn--primary { background:var(--red); color:#fff; }
.jlr-btn.jlr-btn--primary:hover { background:var(--red-hover); color:#fff; }

.jlr-btn.jlr-btn--dark { background:var(--dark); color:#fff; }
.jlr-btn.jlr-btn--dark:hover { background:var(--darker); color:#fff; }
/* On a dark ground a "dark" button would disappear, so it inverts. */
.jlr-section--dark .jlr-btn.jlr-btn--dark,
.jlr-hero .jlr-btn.jlr-btn--dark,
.jlr-close .jlr-btn.jlr-btn--dark { background:#fff; color:var(--dark); }
.jlr-section--dark .jlr-btn.jlr-btn--dark:hover,
.jlr-hero .jlr-btn.jlr-btn--dark:hover,
.jlr-close .jlr-btn.jlr-btn--dark:hover { background:#EDEDED; color:var(--dark); }

.jlr-btn.jlr-btn--outline { background:transparent; color:var(--ink); border-color:var(--line-strong); }
.jlr-btn.jlr-btn--outline:hover { border-color:var(--ink); color:var(--ink); }

.jlr-btn.jlr-btn--wa { background:#25D366; color:#0B2E18; }
.jlr-btn.jlr-btn--wa:hover { background:#1EBE5A; color:#0B2E18; }

.jlr-btn--lg { padding:19px 36px; font-size:var(--t-base); }
.jlr-btn--block { width:100%; }

.jlr-textlink {
  font-family:var(--font-display); font-size:var(--t-sm); font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--red-ink);
  text-decoration:none; display:inline-flex; align-items:center; gap:var(--s-2);
}
.jlr-textlink::after { content:"\2192"; transition:transform .2s var(--ease); }
.jlr-textlink:hover::after { transform:translateX(4px); }

/* ==========================================================================
   Hero
   ========================================================================== */

.jlr-hero { position:relative; overflow:hidden; }
.jlr-hero__media { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.28; }
.jlr-hero__veil {
  position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(22,22,22,.97) 0%, rgba(22,22,22,.86) 46%, rgba(22,22,22,.5) 100%);
}
.jlr-hero__inner {
  position:relative; padding-block:clamp(var(--s-8), 8vw, 116px);
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:var(--s-9); align-items:center;
}
.jlr-hero h1 { font-size:var(--t-2xl); letter-spacing:-.032em; margin-bottom:var(--s-5); }
.jlr-hero__sub { font-size:var(--t-md); color:#C4C4C4; max-width:52ch; margin-bottom:var(--s-6); }

.jlr-hero__facts {
  display:flex; flex-wrap:wrap; gap:var(--s-6);
  padding-top:var(--s-6); margin-top:var(--s-6); border-top:1px solid var(--line);
}
.jlr-fact__n {
  font-family:var(--font-display); font-size:1.75rem; font-weight:800;
  color:#fff; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.jlr-fact__l {
  font-family:var(--font-display); font-size:var(--t-xs); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:#9E9E9E; margin-top:6px;
}

/* ==========================================================================
   Quote card. The conversion unit.
   ========================================================================== */

.jlr-reg {
  background:#fff; border-radius:var(--radius-lg); padding:var(--s-6);
  box-shadow:var(--shadow-lg);
  /* Reset the dark context fully: this card is a light island inside the hero.
     --surface and --card MUST be reset too, or the Google proof chip inherits
     the hero's dark surface and renders dark-on-white (the reported bug). */
  --ink:#1C1C1C; --ink-soft:#4A4A4A; --muted:#797979;
  --surface:#F7F7F7; --card:#FFFFFF;
  --line:#E4E4E4; --line-strong:#CFCFCF; --red-ink:#b00320;
  color:var(--ink-soft);
}
.jlr-reg__title { font-family:var(--font-display); font-size:var(--t-lg); font-weight:700; color:var(--ink); margin-bottom:var(--s-2); }
.jlr-reg__note { font-size:var(--t-sm); color:var(--muted); margin-bottom:var(--s-4); }

/* Google proof sits directly above the form field: the strongest position
   for social proof is immediately adjacent to the action it supports. */
.jlr-reg__proof {
  display:flex; align-items:center; gap:var(--s-3);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:10px 14px; margin-bottom:var(--s-4);
}
.jlr-reg__proof .jlr-g { flex:none; }
.jlr-reg__proof .jlr-stars { font-size:13px; }
.jlr-reg__proof-txt { font-family:var(--font-display); font-size:var(--t-xs); color:var(--muted); line-height:1.4; }
.jlr-reg__proof-txt b { color:var(--ink); font-size:var(--t-sm); }

.jlr-plate {
  display:flex; align-items:stretch; border:2px solid var(--ink);
  border-radius:var(--radius); overflow:hidden; background:#FFD500;
}
.jlr-plate__gb {
  background:#063399; color:#fff; width:42px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:11px; font-weight:700; gap:3px;
}
.jlr-plate__stars { font-size:9px; line-height:1; color:#FFD500; }
.jlr-plate input {
  flex:1; border:0; background:#FFD500; font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.5rem,3.2vw,2rem); letter-spacing:.06em; text-transform:uppercase;
  text-align:center; color:#1C1C1C; padding:14px 10px; min-width:0;
}
.jlr-plate input::placeholder { color:rgba(28,28,28,.4); }
.jlr-plate input:focus { outline:none; }
.jlr-plate:focus-within { box-shadow:0 0 0 3px rgba(217,4,41,.35); }

.jlr-reg .jlr-btn { margin-top:var(--s-4); }

/* Risk reversal. Placed under the button because that is the moment of
   hesitation, and it names the fear directly. */
.jlr-reg__assure {
  display:grid; gap:6px; margin-top:var(--s-4);
  font-family:var(--font-display); font-size:var(--t-xs); color:var(--muted);
}
.jlr-reg__assure span { display:flex; align-items:flex-start; gap:8px; }
.jlr-reg__assure span::before {
  content:"\2713"; color:var(--green-ok); font-weight:800; flex:none; line-height:1.35;
}
.jlr-reg__alt { font-size:var(--t-sm); color:var(--muted); margin-top:var(--s-4); text-align:center; }

/* ==========================================================================
   Trust strip
   ========================================================================== */

.jlr-trust { background:var(--darker); padding-block:var(--s-5); }
.jlr-trust ul {
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s-3) var(--s-7);
}
.jlr-trust li {
  font-family:var(--font-display); font-size:var(--t-sm); font-weight:500;
  color:#D2D2D2; display:flex; align-items:center; gap:var(--s-2);
}
.jlr-trust li::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--red); flex:none; }

/* ==========================================================================
   Cards
   ========================================================================== */

.jlr-grid { display:grid; gap:var(--s-5); }
.jlr-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.jlr-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.jlr-grid--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }

.jlr-card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--s-6); display:flex; flex-direction:column;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.jlr-card:hover { border-color:var(--line-strong); box-shadow:var(--shadow-md); transform:translateY(-3px); }
.jlr-card__num {
  font-family:var(--font-display); font-size:var(--t-xs); font-weight:700;
  letter-spacing:.12em; color:var(--red-ink); margin-bottom:var(--s-3);
  font-variant-numeric:tabular-nums;
}
.jlr-card h3 { font-size:var(--t-lg); margin-bottom:var(--s-3); }
.jlr-card p { font-size:var(--t-base); color:var(--ink-soft); margin-bottom:var(--s-5); }
.jlr-card .jlr-textlink { margin-top:auto; }
.jlr-card--compare { border-top:3px solid var(--red); }

/* ==========================================================================
   Faults
   ========================================================================== */

.jlr-faults {
  list-style:none; margin:0; padding:0; display:grid; gap:var(--s-3);
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.jlr-faults li {
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--red);
  border-radius:var(--radius); padding:var(--s-4) var(--s-5);
  font-family:var(--font-display); font-size:var(--t-sm); font-weight:500; color:var(--ink);
}

/* ==========================================================================
   Process
   ========================================================================== */

.jlr-steps { display:grid; grid-template-columns:repeat(5,1fr); position:relative; }
.jlr-step { position:relative; padding:0 var(--s-4); }
.jlr-step::before { content:""; position:absolute; top:17px; left:0; right:0; height:1px; background:var(--line-strong); }
.jlr-step:first-child::before { left:50%; }
.jlr-step:last-child::before { right:50%; }
.jlr-step__dot {
  position:relative; width:36px; height:36px; border-radius:50%;
  background:var(--card); border:1.5px solid var(--red); color:var(--red-ink);
  display:grid; place-items:center; margin:0 auto var(--s-4);
  font-family:var(--font-display); font-size:var(--t-sm); font-weight:800; font-variant-numeric:tabular-nums;
}
.jlr-step h3, .jlr-step h4 { font-size:var(--t-base); margin-bottom:var(--s-2); text-align:center; }
.jlr-step p { font-size:var(--t-sm); color:var(--muted); text-align:center; margin:0; }

/* ==========================================================================
   Models
   ========================================================================== */

.jlr-models h3 { font-size:var(--t-lg); padding-bottom:var(--s-3); border-bottom:2px solid var(--red); margin-bottom:var(--s-4); }
.jlr-models ul { list-style:none; margin:0; padding:0; }
.jlr-models li { padding:var(--s-3) 0; border-bottom:1px solid var(--line); font-family:var(--font-display); font-size:var(--t-sm); color:var(--ink-soft); }
.jlr-models li:last-child { border-bottom:0; }

/* ==========================================================================
   Table
   ========================================================================== */

.jlr-tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--card); }
.jlr-table { width:100%; border-collapse:collapse; font-family:var(--font-display); font-size:var(--t-sm); }
.jlr-table th {
  text-align:left; padding:var(--s-4) var(--s-5); font-size:var(--t-xs); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  background:var(--surface); border-bottom:1px solid var(--line); white-space:nowrap;
}
.jlr-table td { padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--line); color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap; }
.jlr-table tbody tr:last-child td { border-bottom:0; }
.jlr-table tbody tr:hover { background:#FFF5F6; }
.jlr-table .jlr-code { font-weight:700; color:var(--ink); }

/* ==========================================================================
   GOOGLE REVIEWS
   Styled to echo a Google review card so the credibility transfers, while
   still sitting inside our own type and spacing system.
   ========================================================================== */

.jlr-gsummary {
  display:flex; align-items:center; gap:var(--s-6); flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--s-6); margin-bottom:var(--s-6);
}
.jlr-gsummary__score {
  display:flex; align-items:center; gap:var(--s-4); padding-right:var(--s-6);
  border-right:1px solid var(--line);
}
.jlr-gsummary__n {
  font-family:var(--font-display); font-size:3rem; font-weight:800; line-height:1;
  color:var(--ink); letter-spacing:-.04em; font-variant-numeric:tabular-nums;
}
.jlr-gsummary__meta { display:flex; flex-direction:column; gap:5px; }
.jlr-gsummary__count { font-family:var(--font-display); font-size:var(--t-sm); color:var(--muted); }
.jlr-gsummary__brand { display:flex; align-items:center; gap:var(--s-3); }
.jlr-gsummary__brand-txt { font-family:var(--font-display); font-size:var(--t-sm); color:var(--muted); line-height:1.45; }
.jlr-gsummary__brand-txt b { display:block; color:var(--ink); font-size:var(--t-base); }
.jlr-gsummary .jlr-btn { margin-left:auto; }

.jlr-stars { color:var(--gold); letter-spacing:2px; line-height:1; font-size:var(--t-md); }
.jlr-stars .off { color:var(--line-strong); }

.jlr-greview {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-3); height:100%;
}
.jlr-greview__top { display:flex; align-items:center; gap:var(--s-3); }
.jlr-greview__av {
  width:40px; height:40px; border-radius:50%; flex:none; background:var(--dark); color:#fff;
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:var(--t-sm);
  background-size:cover; background-position:center;
}
.jlr-greview__who { min-width:0; flex:1; }
.jlr-greview__name { font-family:var(--font-display); font-weight:700; font-size:var(--t-sm); color:var(--ink); }
.jlr-greview__when { font-family:var(--font-display); font-size:var(--t-xs); color:var(--muted); }
.jlr-greview__g { flex:none; opacity:.9; }
.jlr-greview__text { font-size:var(--t-base); color:var(--ink-soft); line-height:1.62; margin:0; }
.jlr-greview__text.is-clamped { display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; }

/* ==========================================================================
   Split feature
   ========================================================================== */

.jlr-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s-9); align-items:center; }
.jlr-split--flip .jlr-split__media { order:2; }
.jlr-split__media img { border-radius:var(--radius-lg); width:100%; }
.jlr-checks {
  list-style:none; margin:var(--s-5) 0 var(--s-6); padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3) var(--s-5);
}
.jlr-checks li {
  font-family:var(--font-display); font-size:var(--t-sm); color:var(--ink);
  display:flex; gap:var(--s-3); align-items:flex-start;
}
.jlr-checks li::before { content:"\2713"; color:var(--red); font-weight:800; flex:none; line-height:1.5; }
.jlr-section--dark .jlr-checks li::before { color:#FF5A6E; }

/* ==========================================================================
   Pricing transparency. Directly answers the anxiety that stops people
   enquiring at all.
   ========================================================================== */

.jlr-price { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); }
.jlr-price__item {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--s-6); text-align:center;
}
.jlr-price__label { font-family:var(--font-display); font-size:var(--t-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--s-3); }
.jlr-price__range { font-family:var(--font-display); font-size:1.6rem; font-weight:800; color:var(--ink); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.jlr-price__note { font-family:var(--font-display); font-size:var(--t-xs); color:var(--muted); margin-top:var(--s-3); }

/* ==========================================================================
   Areas
   ========================================================================== */

.jlr-areas { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--s-2); }
.jlr-areas li {
  font-family:var(--font-display); font-size:var(--t-sm); background:var(--card);
  border:1px solid var(--line); border-radius:100px; padding:8px 18px; color:var(--ink-soft);
}
.jlr-areas li.is-base { background:var(--dark); color:#fff; border-color:var(--dark); font-weight:600; }

/* ==========================================================================
   FAQ
   ========================================================================== */

.jlr-faq { border-top:1px solid var(--line); max-width:860px; }
.jlr-faq details { border-bottom:1px solid var(--line); }
.jlr-faq summary {
  list-style:none; cursor:pointer; padding:var(--s-5) var(--s-7) var(--s-5) 0; position:relative;
  font-family:var(--font-display); font-size:var(--t-md); font-weight:600; color:var(--ink);
}
.jlr-faq summary::-webkit-details-marker { display:none; }
.jlr-faq summary::after {
  content:""; position:absolute; right:var(--s-3); top:50%; width:11px; height:11px; margin-top:-6px;
  border-right:2px solid var(--red); border-bottom:2px solid var(--red);
  transform:rotate(45deg); transition:transform .25s var(--ease);
}
.jlr-faq details[open] summary::after { transform:rotate(-135deg); }
.jlr-faq details[open] summary { color:var(--red-ink); }
.jlr-faq__a { padding:0 var(--s-8) var(--s-6) 0; color:var(--ink-soft); }
.jlr-faq__a p { max-width:70ch; }

/* ==========================================================================
   Closing CTA. One primary action only.
   ========================================================================== */

.jlr-close { text-align:center; }
.jlr-close h2 { font-size:var(--t-xl); margin-bottom:var(--s-4); }
.jlr-close p { color:var(--ink-soft); margin-inline:auto; margin-bottom:var(--s-6); }
.jlr-close__btns { display:flex; flex-wrap:wrap; gap:var(--s-3); justify-content:center; align-items:center; }
.jlr-close__or { font-family:var(--font-display); font-size:var(--t-sm); color:var(--muted); }

/* ==========================================================================
   Sticky mobile bar
   ========================================================================== */

.jlr-sticky { display:none; }
@media (max-width:767px) {
  .jlr-sticky {
    display:grid; grid-template-columns:1fr 1fr 1fr; gap:1px;
    position:fixed; left:0; right:0; bottom:0; z-index:900;
    background:var(--line-strong); box-shadow:0 -4px 18px rgba(0,0,0,.18);
  }
  .jlr-sticky a {
    padding:15px 6px; text-align:center; text-decoration:none;
    font-family:var(--font-display); font-size:var(--t-xs); font-weight:700;
    letter-spacing:.04em; text-transform:uppercase;
  }
  .jlr-sticky .is-call  { background:var(--dark);  color:#fff; }
  .jlr-sticky .is-wa    { background:#25D366; color:#0B2E18; }
  .jlr-sticky .is-quote { background:var(--red);  color:#fff; }
  body.jlr { padding-bottom:54px; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:1024px) {
  .jlr-hero__inner { grid-template-columns:minmax(0,1fr); gap:var(--s-7); }
  .jlr-split { grid-template-columns:minmax(0,1fr); gap:var(--s-7); }
  .jlr-split--flip .jlr-split__media { order:0; }
  .jlr-grid--4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .jlr-steps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-6); }
  .jlr-step::before { display:none; }
  .jlr-price { grid-template-columns:minmax(0,1fr); }
}

@media (max-width:767px) {
  :root { --section-y:56px; }
  .jlr-grid--2, .jlr-grid--3, .jlr-grid--4 { grid-template-columns:1fr; }
  .jlr-steps { grid-template-columns:1fr; gap:var(--s-5); }
  .jlr-checks { grid-template-columns:1fr; }
  .jlr-reg { padding:var(--s-5); }
  .jlr-hero__facts { gap:var(--s-5); }
  .jlr-close__btns .jlr-btn { width:100%; }
  .jlr-gsummary__score { border-right:0; padding-right:0; }
  .jlr-gsummary .jlr-btn { margin-left:0; width:100%; }
}

@media (prefers-reduced-motion:reduce) {
  .jlr *, .jlr *::before, .jlr *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ==========================================================================
   SITE HEADER
   --------------------------------------------------------------------------
   Thin utility bar (address + contact) that scrolls away, over a main bar
   (logo, nav, phone, primary CTA) that sticks with a solid ground and a shadow
   once scrolled. Only the main bar is sticky, so the two never overlap. On
   mobile the nav collapses to a slide-down panel with a click-to-call button.
   ========================================================================== */

.jlr-topbar { background: var(--darker); color: #A7A7A7; font-family: var(--font-display); font-size: 13px; }
.jlr-topbar__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 9px; flex-wrap: wrap; }
.jlr-topbar a { color: #D2D2D2; text-decoration: none; }
.jlr-topbar a:hover { color: #fff; }
.jlr-topbar__contact { display: flex; gap: 22px; align-items: center; }
.jlr-topbar strong { color: #fff; font-weight: 600; }

.jlr-header {
  background: #fff; position: sticky; top: 0; z-index: 800;
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s var(--ease);
}
.jlr-header.is-stuck { box-shadow: 0 6px 22px rgba(0,0,0,.09); }
.jlr-header__row { display: flex; align-items: center; gap: 28px; padding-block: 14px; }

.jlr-logo { display: flex; flex-direction: column; text-decoration: none; flex: none; line-height: 1.05; }
.jlr-logo__name { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -.03em; color: var(--ink); }
.jlr-logo__name b { color: var(--red); font-weight: 800; }
.jlr-logo__sub { font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }

.jlr-nav { display: flex; gap: 24px; margin-left: auto; align-items: center; }
.jlr-nav > a, .jlr-nav__has > a {
  font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--ink-soft);
  text-decoration: none; padding: 22px 0; display: inline-flex; align-items: center; gap: 5px;
  border-bottom: 2px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease);
}
.jlr-nav > a:hover, .jlr-nav__has:hover > a { color: var(--ink); border-bottom-color: var(--red); }

.jlr-nav__has { position: relative; }
.jlr-nav__has > a::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -3px; opacity: .6; }
.jlr-nav__menu {
  position: absolute; top: 100%; left: 0; min-width: 230px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s; z-index: 10;
}
.jlr-nav__has:hover .jlr-nav__menu, .jlr-nav__has:focus-within .jlr-nav__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.jlr-nav__menu a { display: block; padding: 11px 14px; border-radius: var(--radius); font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--ink-soft); text-decoration: none; }
.jlr-nav__menu a:hover { background: var(--surface); color: var(--red); }

.jlr-header__cta { display: flex; align-items: center; gap: 16px; flex: none; }
.jlr-header__phone { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.jlr-header__phone span { display: block; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.jlr-burger { display: none; margin-left: auto; background: none; border: 1px solid var(--line); border-radius: var(--radius); width: 44px; height: 44px; cursor: pointer; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.jlr-burger span { display: block; width: 22px; height: 2px; background: var(--ink); transition: .25s var(--ease); }
.jlr-mcall { display: none; width: 44px; height: 44px; border-radius: var(--radius); background: var(--red); color: #fff; align-items: center; justify-content: center; text-decoration: none; flex: none; }
.jlr-mcall svg { width: 20px; height: 20px; fill: currentColor; }

.jlr-mnav { display: none; }
#jlr-mtoggle { display: none; } /* state holder, never visible */

@media (max-width: 1080px) {
  .jlr-nav, .jlr-header__cta { display: none; }
  .jlr-header__row { gap: 10px; }              /* was 28px, too wide with the buttons */
  .jlr-logo__name { font-size: 16px; }         /* let logo + 2 buttons fit at 360px */
  .jlr-mcall { display: inline-flex; margin-left: auto; }
  .jlr-burger { display: inline-flex; margin-left: 0; }
  .jlr-topbar { display: none; }

  #jlr-mtoggle { display: none; }
  /* .jlr-mnav and the burger live INSIDE .jlr-header, which is the checkbox's
     sibling, so the path must go through .jlr-header. */
  #jlr-mtoggle:checked ~ .jlr-header .jlr-mnav { display: block; }
  #jlr-mtoggle:checked ~ .jlr-header .jlr-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  #jlr-mtoggle:checked ~ .jlr-header .jlr-burger span:nth-child(2) { opacity: 0; }
  #jlr-mtoggle:checked ~ .jlr-header .jlr-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .jlr-mnav { background: #fff; border-top: 1px solid var(--line); padding: 10px 0 18px; }
  .jlr-mnav a { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none; padding: 14px var(--gutter); border-bottom: 1px solid var(--line); }
  .jlr-mnav a:active { background: var(--surface); }
  .jlr-mnav__cta { padding: 16px var(--gutter) 4px; }
  .jlr-mnav__cta .jlr-btn { width: 100%; }
}

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

.jlr-footer { background: var(--darker); color: #A0A0A0; }

.jlr-footer__cta {
  background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-6) 0; flex-wrap: wrap;
}
.jlr-footer__cta h3 { color: #fff; font-size: var(--t-lg); margin: 0; }
.jlr-footer__cta p { color: rgba(255,255,255,.85); margin: 4px 0 0; font-size: var(--t-sm); font-family: var(--font-display); }
.jlr-footer__cta .jlr-btn { background: #fff; color: var(--red); border: 0; }
.jlr-footer__cta .jlr-btn:hover { background: #F0F0F0; color: var(--red); }

.jlr-footer__main { padding-block: var(--s-8) var(--s-6); }
.jlr-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 48px; }
.jlr-footer a { color: #C4C4C4; text-decoration: none; }
.jlr-footer a:hover { color: #fff; }
.jlr-footer h4 { font-family: var(--font-display); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 18px; }
.jlr-footer__brand-name { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: #fff; letter-spacing: -.03em; }
.jlr-footer__brand-name b { color: var(--red); }
.jlr-footer__blurb { margin-top: 14px; max-width: 34ch; line-height: 1.7; font-size: 14px; }
.jlr-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-family: var(--font-display); font-size: 14px; }
.jlr-footer__contact li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.jlr-footer__contact svg { width: 17px; height: 17px; fill: var(--red); flex: none; margin-top: 2px; }
.jlr-footer__social { display: flex; gap: 10px; margin-top: 20px; }
.jlr-footer__social a { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); display: grid; place-items: center; }
.jlr-footer__social a:hover { background: var(--red); border-color: var(--red); }
.jlr-footer__social svg { width: 16px; height: 16px; fill: #fff; }

.jlr-footer__bottom { border-top: 1px solid rgba(255,255,255,.12); padding-block: var(--s-5); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-family: var(--font-display); font-size: 13px; color: #8A8A8A; }
.jlr-footer__bottom a { color: #A0A0A0; }
.jlr-footer__legal { display: flex; gap: 20px; }

@media (max-width: 900px) {
  .jlr-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .jlr-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .jlr-footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .jlr-footer__cta { text-align: center; justify-content: center; }
  .jlr-footer__cta .jlr-btn { width: 100%; }
  .jlr-footer__bottom { flex-direction: column; }
}


/* ==========================================================================
   INNER PAGE COMPONENTS
   Added for the service / vehicle content pages. Reuses the homepage hero and
   card systems; adds breadcrumb, rich prose, engine-code tags, a detailed
   vertical process list, and a mid-page CTA band.
   ========================================================================== */

/* Compact page hero (reuses .jlr-hero ground + veil, less height) */
.jlr-phero .jlr-hero__inner { padding-block: clamp(var(--s-7), 6vw, 84px); }

.jlr-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: var(--s-4); font-family: var(--font-display); font-size: var(--t-sm); }
.jlr-breadcrumb a { color: #B7B7B7; text-decoration: none; }
.jlr-breadcrumb a:hover { color: #fff; }
.jlr-breadcrumb span { color: #7C7C7C; }
.jlr-breadcrumb .is-current { color: #fff; }

/* Rich body text for content sections */
.jlr-prose { max-width: 72ch; }
.jlr-prose > * + * { margin-top: var(--s-4); }
.jlr-prose p { font-size: var(--t-md); color: var(--ink-soft); line-height: 1.75; margin: 0; }
.jlr-prose strong, .jlr-prose b { color: var(--ink); font-weight: 600; }
.jlr-prose ul { margin: var(--s-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s-3); }
.jlr-prose ul li { position: relative; padding-left: 26px; font-size: var(--t-base); color: var(--ink-soft); line-height: 1.6; }
.jlr-prose ul li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; background: var(--red); border-radius: 2px; }

/* Engine-code chips */
.jlr-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: var(--s-4); }
.jlr-tag { font-family: var(--font-mono); font-size: 12px; font-weight: 600; background: var(--surface); border: 1px solid var(--line); color: var(--ink); padding: 5px 11px; border-radius: 3px; letter-spacing: .02em; }
.jlr-card .jlr-tags { margin-top: auto; padding-top: var(--s-4); }

/* Model card: name, tagline, body, engine tags */
.jlr-modelcard h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.jlr-modelcard .jlr-modelcard__tag { font-family: var(--font-display); font-size: var(--t-sm); font-weight: 700; color: var(--red-ink); display: block; margin-bottom: var(--s-3); line-height: 1.35; }
.jlr-modelcard p { font-size: var(--t-base); color: var(--ink-soft); margin: 0; }

/* Detailed vertical process (for the 5 rebuild stages) */
.jlr-proclist { display: grid; gap: 0; counter-reset: proc; max-width: 860px; }
.jlr-procstep { display: grid; grid-template-columns: 56px 1fr; gap: var(--s-5); padding: var(--s-6) 0; border-bottom: 1px solid var(--line); }
.jlr-proclist .jlr-procstep:last-child { border-bottom: 0; }
.jlr-procstep__n { counter-increment: proc; }
.jlr-procstep__n::before { content: counter(proc, decimal-leading-zero); font-family: var(--font-display); font-size: var(--t-lg); font-weight: 800; color: var(--red); font-variant-numeric: tabular-nums; }
.jlr-procstep h3, .jlr-procstep h4 { font-size: var(--t-md); margin-bottom: var(--s-2); }
.jlr-procstep p { font-size: var(--t-base); color: var(--ink-soft); margin: 0; }
.jlr-procstep ul { margin: var(--s-3) 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.jlr-procstep ul li { position: relative; padding-left: 24px; font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.55; }
.jlr-procstep ul li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--red); font-weight: 800; }

/* Mid-page CTA band */
.jlr-ctaband { background: var(--dark); border-radius: var(--radius-lg); padding: var(--s-7); display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
.jlr-ctaband h3 { color: #fff; font-size: var(--t-lg); margin: 0 0 4px; }
.jlr-ctaband p { color: #B9B9B9; font-family: var(--font-display); font-size: var(--t-sm); margin: 0; }
.jlr-ctaband__btns { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.jlr-ctaband__phone { font-family: var(--font-display); font-weight: 800; font-size: var(--t-md); color: #fff; text-decoration: none; white-space: nowrap; }

/* Two-column intro: prose beside a boxed aside */
.jlr-aside { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: var(--radius-lg); padding: var(--s-6); }
.jlr-aside h3, .jlr-aside h4 { font-size: var(--t-base); margin-bottom: var(--s-3); }
.jlr-aside p { font-size: var(--t-sm); color: var(--ink-soft); margin: 0 0 var(--s-3); }
.jlr-aside p:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
  .jlr-procstep { grid-template-columns: 40px 1fr; gap: var(--s-4); padding: var(--s-5) 0; }
  .jlr-ctaband { padding: var(--s-6); }
  .jlr-ctaband__btns { width: 100%; }
  .jlr-ctaband__btns .jlr-btn { flex: 1; }
}


/* ==========================================================================
   v3 ADDITIONS: proof bar, related links, second conversion block,
   plus accessibility and performance fixes found in the full-site audit.
   ========================================================================== */

/* ---- FIX: sticky-header anchor offset -------------------------------------
   The header is sticky, so any in-page anchor (#available-engines, #get-a-quote)
   used to land with its heading hidden behind the header. -------------------- */
:target, [id] { scroll-margin-top: 96px; }
@media (max-width: 1080px) { :target, [id] { scroll-margin-top: 76px; } }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- FIX: contrast --------------------------------------------------------
   --muted was #797979, roughly 4.1:1 on the surface grey, under the 4.5:1 AA
   threshold for body text. Darkened to clear AA on both grounds. ------------- */
:root { --muted: #6B6B6B; }

/* ---- PERF: skip layout/paint for long offscreen sections ------------------ */
.jlr-section { content-visibility: auto; contain-intrinsic-size: auto 600px; }
.jlr-hero, .jlr-trust { content-visibility: visible; }

/* ---- FIX: table scroll affordance on small screens ------------------------ */
.jlr-tablewrap { position: relative; }
.jlr-tablewrap::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 34px;
  pointer-events: none; opacity: 0; transition: opacity .2s var(--ease);
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(0,0,0,.10));
}
@media (max-width: 900px) { .jlr-tablewrap::after { opacity: 1; } }

/* ==========================================================================
   PROOF BAR
   ========================================================================== */

.jlr-proofbar {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-7);
  align-items: center;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--s-6);
}
.jlr-proofbar__score { display: flex; align-items: center; gap: var(--s-4); padding-right: var(--s-7); border-right: 1px solid var(--line); }
.jlr-proofbar__n {
  font-family: var(--font-display); font-size: 2.1rem; font-weight: 800;
  line-height: 1; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.jlr-proofbar__n span { font-size: 1rem; font-weight: 600; color: var(--muted); }
.jlr-proofbar__count { font-family: var(--font-display); font-size: var(--t-xs); color: var(--muted); margin-top: 4px; }
.jlr-proofbar__quotes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); min-width: 0; }
.jlr-proofbar__quote { margin: 0; min-width: 0; }
.jlr-proofbar__quote blockquote {
  margin: 0 0 6px; font-size: var(--t-sm); line-height: 1.6; color: var(--ink-soft);
}
.jlr-proofbar__quote blockquote::before { content: "\201C"; }
.jlr-proofbar__quote blockquote::after  { content: "\201D"; }
.jlr-proofbar__quote figcaption { font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700; color: var(--ink); }
.jlr-proofbar__cta { white-space: nowrap; }

@media (max-width: 1024px) {
  .jlr-proofbar { grid-template-columns: 1fr; gap: var(--s-5); }
  .jlr-proofbar__score { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--line); padding-bottom: var(--s-5); }
  .jlr-proofbar__cta { justify-self: start; }
}
@media (max-width: 620px) { .jlr-proofbar__quotes { grid-template-columns: 1fr; gap: var(--s-4); } }

/* ==========================================================================
   RELATED LINK CARDS
   ========================================================================== */

.jlr-relcard { text-decoration: none; }
.jlr-relcard h3 { font-size: var(--t-lg); margin-bottom: var(--s-3); color: var(--ink); }
.jlr-relcard p { color: var(--ink-soft); }
.jlr-relcard .jlr-textlink { margin-top: auto; }
.jlr-relcard:hover h3 { color: var(--red-ink); }

/* ==========================================================================
   SECOND CONVERSION BLOCK
   ========================================================================== */

.jlr-convert__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-9); align-items: center; }
.jlr-convert__inner > * { min-width: 0; }
.jlr-convert__checks { grid-template-columns: 1fr 1fr; margin: var(--s-5) 0 var(--s-5); --red: #FF5A6E; }
.jlr-convert__proof {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  font-family: var(--font-display); font-size: var(--t-sm); color: var(--ink-soft);
  border-top: 1px solid var(--line); padding-top: var(--s-5);
}
.jlr-convert__proof strong { color: #fff; }

.jlr-convert__action {
  background: #fff; border-radius: var(--radius-lg); padding: var(--s-6);
  box-shadow: var(--shadow-lg);
  /* light island inside a dark section: reset the inherited dark tokens */
  --ink:#1C1C1C; --ink-soft:#4A4A4A; --muted:#6B6B6B;
  --surface:#F7F7F7; --card:#FFFFFF; --line:#E4E4E4; --line-strong:#CFCFCF; --red-ink:#b00320;
  color: var(--ink-soft);
}
.jlr-convert__label {
  display: block; font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-3);
}
.jlr-convert__form .jlr-btn { margin-top: var(--s-4); }
.jlr-convert__alt { font-size: var(--t-sm); color: var(--muted); margin-top: var(--s-3); text-align: center; }

.jlr-convert__or { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-5) 0; }
.jlr-convert__or::before, .jlr-convert__or::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.jlr-convert__or span {
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

.jlr-convert__channels { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.jlr-channel {
  display: flex; flex-direction: column; gap: 2px; text-decoration: none;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 13px 16px; transition: border-color .2s var(--ease), background .2s var(--ease);
}
.jlr-channel:hover { border-color: var(--ink); background: var(--surface); }
.jlr-channel__k { font-family: var(--font-display); font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.jlr-channel__v { font-family: var(--font-display); font-size: var(--t-base); font-weight: 800; color: var(--ink); }
.jlr-channel--wa:hover { border-color: #25D366; background: rgba(37,211,102,.08); }

@media (max-width: 1024px) { .jlr-convert__inner { grid-template-columns: 1fr; gap: var(--s-7); } }
@media (max-width: 620px) {
  .jlr-convert__checks { grid-template-columns: 1fr; }
  .jlr-convert__channels { grid-template-columns: 1fr; }
  .jlr-convert__action { padding: var(--s-5); }
}


/* ==========================================================================
   v4 ADDITIONS: components required by the SEO specification.
   - Hero now carries the three specified CTAs.
   - Section 2 is the specified nine field quote form.
   - Brand blocks carry the specified internal links.
   ========================================================================== */

/* ---- Hero: three specified CTAs ---- */
.jlr-hero__ctas {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-bottom: var(--s-6);
}
@media (max-width: 620px) {
  .jlr-hero__ctas { flex-direction: column; align-items: stretch; }
  .jlr-hero__ctas .jlr-btn { width: 100%; }
}

/* ---- Section 2: the nine field quote form ---- */
.jlr-quoteform {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--s-7);
  box-shadow: var(--shadow-md); max-width: 940px; margin-inline: auto;
}
.jlr-formgrid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}
.jlr-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.jlr-field--full { grid-column: 1 / -1; }
.jlr-field label {
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.jlr-field input,
.jlr-field select,
.jlr-field textarea {
  font-family: var(--font-display); font-size: var(--t-base); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 13px 15px; width: 100%;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.jlr-field textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.jlr-field input::placeholder,
.jlr-field textarea::placeholder { color: var(--muted); opacity: .75; }
.jlr-field input:focus,
.jlr-field select:focus,
.jlr-field textarea:focus {
  outline: none; border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(217, 4, 41, .16);
}
/* Native select arrow, drawn so it matches the rest of the system. */
.jlr-field select {
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

.jlr-quoteform__foot {
  display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
  margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--line);
}
.jlr-quoteform__note {
  font-family: var(--font-display); font-size: var(--t-sm); color: var(--muted);
  margin: 0; max-width: 46ch;
}

@media (max-width: 900px) { .jlr-formgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .jlr-quoteform { padding: var(--s-5); }
  .jlr-formgrid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .jlr-quoteform__foot .jlr-btn { width: 100%; }
}

/* ---- Brand blocks: the specified internal links ---- */
.jlr-card__links {
  list-style: none; margin: 0 0 var(--s-5); padding: 0;
  display: grid; gap: 7px;
}
.jlr-card__links a {
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 600;
  color: var(--red-ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
}
.jlr-card__links a::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--red); flex: none;
}
.jlr-card__links a:hover { text-decoration: underline; }

/* ---- Availability cell in the engines preview ---- */
.jlr-stock {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--green-ok);
}
.jlr-stock::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green-ok); flex: none;
}

/* ---- Three column checks list, used in Areas Covered ---- */
.jlr-checks--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .jlr-checks--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .jlr-checks--3 { grid-template-columns: minmax(0, 1fr); } }


/* ==========================================================================
   v5 ADDITIONS: imagery and the service areas section.
   - Cards can now carry a photograph, which is what lifts the long
     card grids out of looking like walls of text.
   - Service areas section, following the client supplied reference layout.
   ========================================================================== */

/* ---- Accent word inside a heading (used in the areas title) ---- */
.jlr-accent { color: var(--red); }

/* ---- Short centred rule under a section heading ---- */
.jlr-rule {
  display: block; width: 54px; height: 3px; background: var(--red);
  border-radius: 2px; margin: var(--s-5) auto 0;
}
.jlr-head:not(.jlr-head--center) .jlr-rule { margin-left: 0; }

/* ==========================================================================
   CARD IMAGERY
   A card with a photograph. The image sits flush to the card edges, so the
   card padding moves onto an inner body wrapper.
   ========================================================================== */

.jlr-card--media { padding: 0; overflow: hidden; }
.jlr-card--media .jlr-card__media {
  display: block; position: relative; overflow: hidden;
  background: var(--surface);
}
.jlr-card--media .jlr-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 16 / 10;
  transition: transform .45s var(--ease);
}
.jlr-card--media:hover .jlr-card__media img { transform: scale(1.04); }

/* Optional label sitting on the image, used for engine codes and model names */
.jlr-card__tagline {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  background: rgba(0,0,0,.72); color: #fff;
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 2px;
}

.jlr-card--media .jlr-card__body {
  padding: var(--s-6); display: flex; flex-direction: column; flex: 1;
}
@media (max-width: 620px) { .jlr-card--media .jlr-card__body { padding: var(--s-5); } }

/* Media inside the split layout, when a section previously had no image */
.jlr-split__media img { border-radius: var(--radius-lg); width: 100%; }
.jlr-split__media--tall img { aspect-ratio: 4 / 5; object-fit: cover; }
.jlr-split__media--wide img { aspect-ratio: 16 / 10; object-fit: cover; }

/* A framed image with a caption, for process and proof sections */
.jlr-figure { margin: 0; }
.jlr-figure img { border-radius: var(--radius-lg); width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.jlr-figure figcaption {
  font-family: var(--font-display); font-size: var(--t-xs); color: var(--muted);
  margin-top: var(--s-3); letter-spacing: .02em;
}

/* ==========================================================================
   SERVICE AREAS
   ========================================================================== */

.jlr-areagrid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
}
.jlr-areacard {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--s-6);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.jlr-areacard:hover {
  border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-3px);
}
.jlr-areacard__title {
  display: flex; align-items: flex-start; gap: 9px;
  font-family: var(--font-display); font-size: var(--t-base); font-weight: 700;
  color: var(--red-ink); margin: 0 0 4px; line-height: 1.3;
}
.jlr-areacard__pin { width: 16px; height: 16px; fill: var(--red); flex: none; margin-top: 2px; }
.jlr-areacard__note {
  font-family: var(--font-display); font-size: var(--t-xs); color: var(--muted);
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: var(--s-4);
  padding-bottom: var(--s-4); border-bottom: 1px solid var(--line);
}
.jlr-arealist { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.jlr-arealist li {
  display: flex; align-items: flex-start; gap: 9px;
  font-family: var(--font-display); font-size: var(--t-sm); color: var(--ink-soft);
  line-height: 1.45;
}
.jlr-arealist li::before {
  content: "\2713"; color: var(--red); font-weight: 800; flex: none; line-height: 1.35;
}

.jlr-areasec__foot {
  margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap;
}
.jlr-areasec__foot p {
  font-family: var(--font-display); font-size: var(--t-sm); color: var(--muted); margin: 0;
}
.jlr-areasec__btns { display: flex; gap: var(--s-3); flex-wrap: wrap; }

@media (max-width: 1024px) { .jlr-areagrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .jlr-areagrid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .jlr-areacard { padding: var(--s-5); }
  /* Two columns of place names on a phone keeps the card short */
  .jlr-arealist { grid-template-columns: 1fr 1fr; display: grid; gap: 9px var(--s-4); }
  .jlr-areasec__foot { flex-direction: column; align-items: stretch; text-align: center; }
  .jlr-areasec__btns { flex-direction: column; }
  .jlr-areasec__btns .jlr-btn { width: 100%; }
}


/* ==========================================================================
   v5 FIX: splits that carry an image plus two stacked text blocks.
   Some sections have three children (media, prose, aside). The media is set to
   span both rows on desktop so the right column stacks beside it. On single
   column widths any such span must be neutralised, otherwise the spanning item
   reserves an empty row and opens a gap. Resetting placement for every child in
   the stacked state is safe because source order is already correct.
   ========================================================================== */
@media (max-width: 1024px) {
  .jlr-split > * { grid-row: auto !important; grid-column: auto !important; }
}

/* ==========================================================================
   Proof bar without a verified rating.
   Shown when no Google API key and no manually entered figures exist. The
   customer quotes still appear; no rating or count is claimed.
   ========================================================================== */
.jlr-proofbar__label {
  font-family: var(--font-display); font-size: var(--t-base); font-weight: 700;
  color: var(--ink); line-height: 1.25;
}
.jlr-proofbar--norating .jlr-proofbar__score { align-items: center; }

/* ==========================================================================
   Star row. Half stars so a 4.7 does not display as a perfect 5.
   ========================================================================== */
.jlr-stars .on   { color: var(--gold); }
.jlr-stars .off  { color: var(--line-strong); }
.jlr-stars .half {
  position: relative; color: var(--line-strong);
  display: inline-block;
}
.jlr-stars .half::before {
  content: "\2605"; position: absolute; left: 0; top: 0;
  width: 50%; overflow: hidden; color: var(--gold);
}

/* ==========================================================================
   HEADER / FOOTER  (v4)
   --------------------------------------------------------------------------
   Paired with app/Views/partials/jlr-header.php and jlr-footer.php.

   No JavaScript is used here on purpose. The mobile menu is a checkbox
   toggle and the sticky header is position:sticky, so navigation still works
   if a script fails to load or JS is switched off. On a site whose whole job
   is to capture a phone call, the phone number must never depend on a script.
   ========================================================================== */

/* ---- Top bar ------------------------------------------------------------ */
.jlr-topbar{
  background:var(--darker); color:#B9B9B9;
  font-family:var(--font-display); font-size:var(--t-xs);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.jlr-topbar__row{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-4); min-height:34px; flex-wrap:wrap;
}
.jlr-topbar__contact{ display:flex; gap:var(--s-5); flex-wrap:wrap; }
.jlr-topbar a{ color:#E6E6E6; text-decoration:none; }
.jlr-topbar a:hover{ color:#fff; text-decoration:underline; }
.jlr-topbar strong{ color:#fff; }
@media (max-width:860px){ .jlr-topbar{ display:none; } }

/* ---- Header ------------------------------------------------------------- */
.jlr-header{
  position:sticky; top:0; z-index:100;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.jlr-header__row{
  display:flex; align-items:center; gap:var(--s-5);
  min-height:72px;
}

.jlr-logo{ display:block; text-decoration:none; flex:0 0 auto; }
.jlr-logo__name{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:1.0625rem; letter-spacing:-.02em; color:var(--ink);
  text-transform:uppercase; line-height:1.1;
}
.jlr-logo__name b{ color:var(--red); font-weight:800; }
.jlr-logo__sub{
  display:block; font-family:var(--font-display); font-size:.6875rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  margin-top:3px;
}

/* ---- Desktop nav -------------------------------------------------------- */
.jlr-nav{ display:flex; align-items:center; gap:var(--s-2); margin-left:auto; }
.jlr-nav > a,
.jlr-nav__has > a{
  display:inline-block; padding:10px var(--s-3);
  font-family:var(--font-display); font-size:.875rem; font-weight:600;
  color:var(--ink); text-decoration:none; border-radius:var(--radius);
  white-space:nowrap;
}
.jlr-nav > a:hover,
.jlr-nav__has:hover > a,
.jlr-nav > a[aria-current="page"]{ color:var(--red-ink); background:var(--surface); }

.jlr-nav__has{ position:relative; }
.jlr-nav__has > a::after{
  content:''; display:inline-block; width:5px; height:5px; margin-left:7px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}
.jlr-nav__menu{
  position:absolute; top:100%; left:0; min-width:260px;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:0 12px 32px rgba(0,0,0,.12);
  padding:var(--s-2); opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .14s ease, transform .14s ease, visibility .14s;
}
.jlr-nav__has:hover .jlr-nav__menu,
.jlr-nav__has:focus-within .jlr-nav__menu{ opacity:1; visibility:visible; transform:translateY(0); }
.jlr-nav__menu a{
  display:block; padding:9px var(--s-3);
  font-family:var(--font-display); font-size:.875rem; font-weight:500;
  color:var(--ink); text-decoration:none; border-radius:var(--radius);
}
.jlr-nav__menu a:hover{ background:var(--surface); color:var(--red-ink); }

/* ---- Header calls to action -------------------------------------------- */
.jlr-header__cta{ display:flex; align-items:center; gap:var(--s-4); flex:0 0 auto; }
.jlr-header__phone{
  display:block; text-decoration:none; text-align:right;
  font-family:var(--font-display); font-weight:800; font-size:1.0625rem;
  color:var(--ink); line-height:1.15; white-space:nowrap;
}
.jlr-header__phone span{
  display:block; font-size:.6875rem; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); margin-bottom:2px;
}
.jlr-header__phone:hover{ color:var(--red-ink); }

/* ---- Mobile controls ---------------------------------------------------- */
#jlr-mtoggle{ position:absolute; opacity:0; pointer-events:none; }
.jlr-mcall,.jlr-burger{ display:none; }
.jlr-mcall{
  width:44px; height:44px; border-radius:var(--radius);
  background:var(--red); align-items:center; justify-content:center;
  flex:0 0 auto; text-decoration:none;
}
.jlr-mcall svg{ width:22px; height:22px; fill:#fff; }
.jlr-burger{
  width:44px; height:44px; border:1px solid var(--line-strong);
  border-radius:var(--radius); cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  flex:0 0 auto; background:var(--paper);
}
.jlr-burger span{ display:block; width:20px; height:2px; background:var(--ink); }
.jlr-mnav{ display:none; }

@media (max-width:1080px){
  .jlr-nav,.jlr-header__cta{ display:none; }
  .jlr-mcall{ display:flex; margin-left:auto; }
  .jlr-burger{ display:flex; }
  .jlr-header__row{ min-height:58px; gap:var(--s-3); }

  .jlr-mnav{
    display:block; max-height:0; overflow:hidden;
    border-top:0 solid var(--line); background:var(--paper);
    transition:max-height .25s ease;
  }
  #jlr-mtoggle:checked ~ .jlr-header .jlr-mnav{
    max-height:calc(100vh - 58px); overflow-y:auto; border-top-width:1px;
  }
  .jlr-mnav a{
    display:block; padding:13px var(--gutter);
    font-family:var(--font-display); font-size:.9375rem; font-weight:600;
    color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line);
  }
  .jlr-mnav a:active{ background:var(--surface); }
  .jlr-mnav__cta{ padding:var(--s-4) var(--gutter) var(--s-6); }
  .jlr-mnav__cta a{ border:0; text-align:center; }
}

/* ---- Sticky call bar (small screens only) ------------------------------- */
.jlr-stickycall{ display:none; }
@media (max-width:720px){
  .jlr-stickycall{
    position:fixed; left:0; right:0; bottom:0; z-index:99;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:9px var(--s-4) calc(9px + env(safe-area-inset-bottom));
    background:var(--red); color:#fff; text-decoration:none;
    font-family:var(--font-display); line-height:1.2;
    box-shadow:0 -4px 16px rgba(0,0,0,.18);
  }
  .jlr-stickycall span{ font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase; opacity:.9; }
  .jlr-stickycall strong{ font-size:1.0625rem; font-weight:800; }
  .jlr-footer{ padding-bottom:76px; }
}

/* ---- Footer ------------------------------------------------------------- */
.jlr-footer{
  background:var(--darker); color:#B4B4B4;
  padding-top:var(--s-8);
  /* Dark ground: re-declare the neutral tokens so any shared component
     dropped in here inherits readable colours instead of dark on dark. */
  --ink:#FFFFFF; --ink-soft:#D4D4D4; --muted:#9A9A9A;
  --surface:#1F1F1F; --card:#1F1F1F; --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18); --paper:#161616;
}
.jlr-footer__top{
  display:grid; gap:var(--s-7);
  grid-template-columns:1.5fr 1fr 1fr 1.1fr;
  padding-bottom:var(--s-7);
}
.jlr-footer__brand p{ color:#A9A9A9; font-size:var(--t-sm); margin:var(--s-4) 0 var(--s-5); max-width:42ch; }
.jlr-footer__brand .jlr-logo__name{ color:#fff; }
.jlr-footer__checks li{ color:#C8C8C8; font-size:var(--t-sm); }

.jlr-footer__h{
  font-family:var(--font-display); font-size:.75rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:#fff;
  margin:0 0 var(--s-4);
}
.jlr-footer ul{ list-style:none; margin:0; padding:0; }
.jlr-footer__col li{ margin-bottom:9px; }
.jlr-footer a{ color:#B4B4B4; text-decoration:none; font-size:var(--t-sm); }
.jlr-footer a:hover{ color:#fff; text-decoration:underline; }

.jlr-footer__phone{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:1.375rem !important; color:#fff !important;
  margin-bottom:var(--s-2); letter-spacing:-.01em;
}
.jlr-footer__contact address{ font-style:normal; color:#A9A9A9; font-size:var(--t-sm); margin:var(--s-3) 0 var(--s-5); }
.jlr-footer__cta{ margin-bottom:var(--s-5); }
.jlr-footer__cta:hover{ text-decoration:none; color:#fff !important; }
.jlr-footer__more{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-4); }

.jlr-footer__bottom{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:var(--s-3);
  border-top:1px solid rgba(255,255,255,.10);
  padding:var(--s-5) 0;
  font-size:var(--t-xs); color:#8E8E8E;
}
.jlr-footer__bottom p{ margin:0; }
.jlr-footer__bottom ul{ display:flex; flex-wrap:wrap; gap:var(--s-5); }
.jlr-footer__bottom a{ font-size:var(--t-xs); }

@media (max-width:900px){
  .jlr-footer__top{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-6); }
  .jlr-footer__brand{ grid-column:1 / -1; }
}
@media (max-width:560px){
  .jlr-footer__top{ grid-template-columns:minmax(0,1fr); }
  .jlr-footer__bottom{ justify-content:flex-start; }
}

/* ---- Header/footer fixes found in mobile QA at 390px ------------------- */

/*
 * 1. The logo rendered 271px wide, but with the call button and burger
 *    (44px each plus gaps) only 246px was free. The burger was pushed 17px
 *    off the right edge and the whole page scrolled sideways. Scaling the
 *    wordmark down on small screens keeps everything on one row.
 */
@media (max-width:1080px){
  .jlr-logo{ min-width:0; overflow:hidden; }
  .jlr-logo__name{ font-size:.9375rem; }
}
@media (max-width:420px){
  .jlr-logo__name{ font-size:.8125rem; }
  .jlr-logo__sub{ font-size:.625rem; letter-spacing:.06em; }
}

/*
 * 2. The closed mobile menu still measured 28px tall because its padding sits
 *    outside the capped height, leaving a dead grey strip under the header.
 *    Zeroing the padding on the panel itself fixes it; the button block inside
 *    carries its own spacing, so the open menu is unchanged.
 */
@media (max-width:1080px){
  .jlr-mnav{ padding:0; box-sizing:border-box; }
}

/* ==========================================================================
   v5: real logo, rebuilt footer CTA, one header and footer sitewide
   ========================================================================== */

/* ---- Logo -------------------------------------------------------------- */
/* The real mark is 428x244, so it is taller than a typical wordmark. Height
   is fixed and width left auto so it never distorts, and the intrinsic
   width/height attributes on the img reserve the space to avoid layout shift. */
.jlr-logo{ display:flex; align-items:center; flex:0 0 auto; text-decoration:none; }
.jlr-logo img{ display:block; height:46px; width:auto; }
@media (max-width:1080px){ .jlr-logo img{ height:38px; } }
@media (max-width:560px){  .jlr-logo img{ height:32px; } }

.jlr-footer__logo{ display:block; height:64px; width:auto; margin-bottom:var(--s-4); }

/* ---- Footer closing call to action ------------------------------------- */
.jlr-footer__cta-band{
  background:var(--red);
  padding:var(--s-7) 0;
  margin-bottom:var(--s-8);
}
.jlr-footer__cta-inner{
  display:grid; grid-template-columns:1.2fr 1fr; gap:var(--s-7); align-items:center;
}
.jlr-footer__cta-copy h2{
  font-family:var(--font-display); font-weight:800; color:#fff;
  font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.15; letter-spacing:-.02em;
  margin:0 0 var(--s-3);
}
.jlr-footer__cta-copy p{
  color:rgba(255,255,255,.92); margin:0; max-width:46ch; font-size:var(--t-base);
}
.jlr-footer__cta-actions{ display:flex; flex-direction:column; gap:var(--s-3); }

/* On the red band the primary button must invert: white ground, red text. */
.jlr-footer__cta-actions .jlr-btn.jlr-btn--primary{
  background:#fff; color:var(--red);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  line-height:1.15; padding-block:14px;
}
.jlr-footer__cta-actions .jlr-btn.jlr-btn--primary:hover{ background:#F3F3F3; color:var(--red-hover); }
.jlr-footer__cta-call span{
  font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; opacity:.75; font-weight:700;
}
.jlr-footer__cta-call strong{ font-size:1.3125rem; font-weight:800; letter-spacing:-.01em; }

.jlr-footer__cta-actions .jlr-btn.jlr-btn--ghost{
  background:transparent; color:#fff; border:2px solid rgba(255,255,255,.6); text-align:center;
}
.jlr-footer__cta-actions .jlr-btn.jlr-btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.1); color:#fff; }

.jlr-footer__cta-note{
  margin:0; text-align:center; color:rgba(255,255,255,.85);
  font-family:var(--font-display); font-size:var(--t-xs);
}

@media (max-width:860px){
  .jlr-footer__cta-inner{ grid-template-columns:minmax(0,1fr); gap:var(--s-5); }
  .jlr-footer__cta-band{ padding:var(--s-6) 0; margin-bottom:var(--s-7); }
}

.jlr-footer__email{ display:block; margin-bottom:var(--s-2); }
.jlr-footer__wa{
  display:inline-block; margin-bottom:var(--s-5);
  border-bottom:1px solid rgba(255,255,255,.3); padding-bottom:2px;
}

/* ==========================================================================
   LEGACY PAGES
   --------------------------------------------------------------------------
   Pages whose body is still 2023 theme markup now use the same header and
   footer as everything else. Both stylesheets load on those pages, so a few
   collisions need settling. The rules below are scoped to .jlr-legacy so they
   can never affect a revamped page, and the whole block is deleted once the
   last page body is rebuilt.
   ========================================================================== */

/* The old theme sets body/typography globals that would otherwise fight the
   new header and footer. Re-assert ours only inside our own regions. */
body.jlr-legacy .jlr-header,
body.jlr-legacy .jlr-footer,
body.jlr-legacy .jlr-topbar{
  font-family:var(--font-display);
}
body.jlr-legacy .jlr-footer p,
body.jlr-legacy .jlr-footer li,
body.jlr-legacy .jlr-footer address{ font-family:var(--font-body); }

/* The theme styles every h2 and h3 globally. Ours must win inside the footer. */
body.jlr-legacy .jlr-footer h2{ margin-top:0; }
body.jlr-legacy .jlr-footer__h{
  font-size:.75rem !important; font-weight:700 !important; color:#fff !important;
  letter-spacing:.11em; text-transform:uppercase; line-height:1.4;
}
body.jlr-legacy .jlr-footer__cta-copy h2{ color:#fff !important; }

/* The theme's list styling would add bullets and indents to our link columns. */
body.jlr-legacy .jlr-footer ul{ list-style:none !important; margin:0 !important; padding:0 !important; }
body.jlr-legacy .jlr-footer li{ margin-left:0 !important; }

/* Theme link colours are set with high specificity. */
body.jlr-legacy .jlr-footer a{ color:#B4B4B4; }
body.jlr-legacy .jlr-footer a:hover{ color:#fff; }
body.jlr-legacy .jlr-footer__phone{ color:#fff !important; }
body.jlr-legacy .jlr-nav a,
body.jlr-legacy .jlr-mnav a{ color:var(--ink); text-decoration:none; }
body.jlr-legacy .jlr-nav__menu a:hover{ color:var(--red-ink); }
body.jlr-legacy .jlr-header__cta .jlr-btn--primary{ color:#fff !important; }
body.jlr-legacy .jlr-footer__cta-actions .jlr-btn--primary{ color:var(--red) !important; }
body.jlr-legacy .jlr-footer__cta-actions .jlr-btn--ghost{ color:#fff !important; }

/* The old theme animates elements in with wow.js and starts them invisible.
   If a script fails, content stays hidden. Our regions never opt into that. */
body.jlr-legacy .jlr-header .wow,
body.jlr-legacy .jlr-footer .wow{ visibility:visible !important; animation:none !important; }

/* NOTE: do NOT override .page-wrapper overflow here. The theme sets
   overflow:hidden on it and the old page bodies rely on that to contain
   Bootstrap's negative row margins. The sticky header sits outside the
   wrapper instead, so nothing needs overriding. */

/* Old bodies contain wide tables and fixed-width blocks; keep the page from
   scrolling sideways on a phone without touching their internals. */
body.jlr-legacy{ overflow-x:hidden; }


/* ==========================================================================
   v6: header height
   --------------------------------------------------------------------------
   The header measured 87px plus a 39px top bar, 126px of furniture before any
   content. The page button size (58px tall) was setting that height, not the
   logo. Buttons in a nav bar should be smaller than buttons in the page body,
   so the header gets its own compact size.

   Result: 60px header, 34px top bar, 94px total. The logo is sized to fit
   inside that rather than the header being sized to fit the logo.
   ========================================================================== */

.jlr-header__row{ min-height:60px; }

/* Compact nav-bar button. The page-body .jlr-btn size is unchanged. */
.jlr-header__cta .jlr-btn{
  padding:9px 18px; font-size:.8125rem; line-height:1.2; border-radius:var(--radius);
}
.jlr-header__phone{ font-size:.9375rem; }
.jlr-header__phone span{ font-size:.625rem; margin-bottom:0; }

.jlr-logo img{ height:40px; }
@media (max-width:1080px){ .jlr-logo img{ height:34px; } }
@media (max-width:560px){  .jlr-logo img{ height:30px; } }

.jlr-nav > a,
.jlr-nav__has > a{ padding:8px 10px; font-size:.8125rem; }

@media (max-width:1080px){
  .jlr-header__row{ min-height:54px; }
  #jlr-mtoggle:checked ~ .jlr-header .jlr-mnav{ max-height:calc(100vh - 54px); }
  .jlr-mcall,.jlr-burger{ width:40px; height:40px; }
}

/* Sticky offset for in-page anchors has to match the shorter header. */
:target, [id]{ scroll-margin-top:76px; }

/* The row inherited 14px of vertical padding from the wrapper, so a 40px logo
   produced a 68px bar. Setting it explicitly makes the header height the value
   in min-height rather than an accident of inherited padding. */
.jlr-header__row{ padding-block:6px; }
.jlr-topbar__row{ padding-block:5px; min-height:0; }
@media (max-width:1080px){ .jlr-header__row{ padding-block:5px; } }
/* Final logo sizing.
   This mark is 428x244, nearly square, with three lines of type under the car
   graphic. Below about 46px that type stops being readable, so the logo sets a
   floor on how short the bar can be. 50px keeps it legible and still gives a
   64px header, which reads as a normal nav bar rather than a banner. */
.jlr-logo img{ height:50px; }
@media (max-width:1080px){ .jlr-logo img{ height:42px; } }
@media (max-width:560px){  .jlr-logo img{ height:36px; } }