/* ---------- icon weight: two documented tiers ----------
   stroke-width 1.5 on 28px+ glyphs (service cards), 2.4 on small glyphs (checks, arrows, inline).
   all icons share the 0 0 24 24 grid. */

/* ---------- shape scale: one documented radius system ----------
   pill = buttons, chips, badges | xl = panels | lg = cards, tiles, images | sm = inline chips */
:root{--r-pill:999px;--r-xl:24px;--r-lg:16px;--r-md:10px;--r-sm:6px}

@font-face{font-family:"Hanken";src:url("fonts/hanken-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Hanken";src:url("fonts/hanken-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Hanken";src:url("fonts/hanken-800.woff2") format("woff2");font-weight:800;font-display:swap}
:root{
  color-scheme:light;
  --bg:#EEECE8; --bg2:#F6F4F0; --band:#E5E1DA; --ink:#14161A; --ink2:#565A62; --ink3:#686B72; --surface:#FFFFFF;
  --cobalt:#1E56E0; --cobalt2:#3A72FF; --cobalt-soft:rgba(30,86,224,.08);
  --line:rgba(18,21,28,.10); --line2:rgba(18,21,28,.16);
  /* WhatsApp buttons carry white label text. White on the old #22C35E was 2.32:1,
     below the 4.5:1 the contrast test enforces, so the green is deepened at the same
     hue (142) and saturation to carry it: 4.64:1 resting, 5.49:1 on hover. */
  --green:#0E9F6E; --gold:#E8A317; --wa:#178641; --wa-dk:#15793A; --wa-ink:#ffffff;
  --plate:#F6D200; --plate-blue:#0A3AA6; --plate-ink:#12151C;
  --panel-a:#183560; --panel-b:#0B1D3E; --panel-fg:#ffffff; --panel-sub:rgba(255,255,255,.82);
  --feature-grad:linear-gradient(158deg,var(--panel-a),var(--panel-b));
  --feature-accent:linear-gradient(90deg,var(--gold),#F6CE17);
  --panel-dark-a:#0d1721; --panel-dark-b:#0a1119;
  --glass-grad:linear-gradient(180deg,rgba(255,255,255,.6),transparent 22%),linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.5));
  --glass-bord:rgba(255,255,255,.62);
  --glass-inset:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.14),inset 0 -20px 44px -30px rgba(30,52,110,.20);
  --field-bg:rgba(255,255,255,.72);
  --nav-bg:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.58));
  --nav-bord:rgba(255,255,255,.6);
  --tile-bg:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.54));
  --tile-bord:rgba(255,255,255,.6);
  --spot:rgba(58,114,255,.16);
  --logo-filter:brightness(0); --marque-filter:none;
  --closed-fg:#C8102E;
  --soft:0 42px 84px -34px rgba(26,46,102,.38),0 16px 36px -24px rgba(26,46,102,.24);
  --soft-sm:0 20px 42px -24px rgba(26,46,102,.30),0 4px 12px -8px rgba(26,46,102,.16);
  --ease:cubic-bezier(.2,1,.3,1); --ease-out:cubic-bezier(.22,.61,.36,1); --maxw:1220px;
}

/* ---------- type scale: one documented system ----------
   Seven steps, every one driven by viewport WIDTH. Body copy must never scale
   with viewport height: a shorter window is not a reason to shrink prose, and
   72 of the old font-size clamps did exactly that. Sections are min-height,
   so a panel that outgrows a short window simply gets taller and scrolls; the
   single (max-height) block at the end of this file steps the whole scale down
   once, in place of the per-section overrides that used to fight each other.
   --measure is calibrated to Hanken: its `ch` (0.56em) runs 1.25x the font's
   average character advance (0.4477em), so 60ch renders ~75 characters a line,
   inside the 45-75 comfortable band. The old 64ch was rendering ~80. */
:root{
  /* one family, three loaded weights: 500 body, 700 labels, 800 display.
     Plex Mono was retired: it filled 24 roles but only 4 were tabular, and
     Hanken's figures are already tabular, so hours and prices still align. */
  --font-sans:"Hanken",system-ui,sans-serif;
  --t-micro:clamp(.7rem,.68rem + .1vw,.78rem);        /* 11.2-12.5px  mono labels, eyebrows */
  --t-fine:clamp(.85rem,.82rem + .14vw,.95rem);       /* 13.6-15.2px  captions, notes, meta */
  --t-body:clamp(1rem,.95rem + .25vw,1.125rem);       /* 16-18px      body copy */
  --t-lead:clamp(1.125rem,1.05rem + .36vw,1.3rem);    /* 18-20.8px    section intros */
  --t-h3:clamp(1.25rem,1.1rem + .7vw,1.75rem);        /* 20-28px */
  --t-h2:clamp(1.5rem,1.15rem + 2.2vw,3.4rem);        /* 24-54px */
  --t-display:clamp(2rem,1.5rem + 3vw,3.8rem);        /* 32-60.8px    statement headings */
  --measure:60ch;                                     /* ~75 characters, top of the 45-75 band */
  --measure-narrow:44ch;                              /* ~55 characters, captions and labels */
  --lh-body:1.6; --lh-lead:1.55; --lh-display:1.08;
}
*{box-sizing:border-box}
button,input,select,textarea{font:inherit;color:inherit}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    scroll-behavior:auto!important;transition-duration:.01ms!important}
}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);font-weight:500;font-size:var(--t-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* The dot field is defined once, here, and drawn on the page ground rather than
   per section. .mesh sits behind everything, so the dots appear exactly where the
   ground is otherwise bare and are covered wherever a section, card or band paints
   its own background — which is the whole trick. It is fixed for the same reason
   .grain is: one texture layer, no second scrolling grid to beat against it.
   The ink is set to read at arm's length in open ground. It is checked behind the
   long-form .prose pages too, where it stays texture rather than pattern: the ink
   is a pale blue-grey and the copy is near-black, so it never competes. */
:root{--dot-pitch:26px;--dot-ink:rgba(30,86,224,.28);
  --dot-field:radial-gradient(circle at 1px 1px,var(--dot-ink) 1px,transparent 0)}
.mesh{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:var(--dot-field) 0 0/var(--dot-pitch) var(--dot-pitch),radial-gradient(52vw 42vw at 82% 6%,rgba(58,114,255,.10),transparent 60%),radial-gradient(48vw 42vw at 8% 94%,rgba(120,150,200,.08),transparent 62%),radial-gradient(40vw 36vw at 50% 50%,rgba(255,255,255,.42),transparent 60%),linear-gradient(180deg,#F2F1EE,#EBEAE6)}
/* The dots move. A second, brighter field is shown only through a soft light
   that drifts on its own and follows the reader down the page; site.js sets
   --mesh-y (0 to 1, how far down), --mesh-shift (the dots' slow parallax, one
   pitch at most) and --mesh-glow (rises while scrolling, settles when idle).
   Motion-reduced and no-JS readers see the still field. */
.mesh::before,.mesh::after{content:"";position:absolute;inset:calc(-1 * var(--dot-pitch)) 0 0;pointer-events:none}
.mesh::after{background:radial-gradient(circle at 1px 1px,rgba(30,86,224,.9) 1.3px,transparent 0) 0 0/var(--dot-pitch) var(--dot-pitch);
  opacity:0;-webkit-mask-image:radial-gradient(34vmax 26vmax at var(--mesh-x,70%) calc(15% + var(--mesh-y,0) * 70%),#000,transparent 70%);
  mask-image:radial-gradient(34vmax 26vmax at var(--mesh-x,70%) calc(15% + var(--mesh-y,0) * 70%),#000,transparent 70%)}
@property --mesh-x{syntax:"<percentage>";inherits:true;initial-value:70%}
@keyframes mesh-drift{0%{--mesh-x:72%}33%{--mesh-x:30%}66%{--mesh-x:58%}100%{--mesh-x:72%}}
@media (prefers-reduced-motion:no-preference){
  html.anim .mesh{background-position:0 calc(var(--mesh-shift,0) * -1px),0 0,0 0,0 0,0 0;animation:mesh-drift 48s ease-in-out infinite}
  html.anim .mesh::after{opacity:calc(.32 + var(--mesh-glow,0) * .5);transform:translate3d(0,calc(var(--mesh-shift,0) * -1px),0);transition:opacity .9s ease}
}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 30px;position:relative;z-index:2}
h1,h2,h3,h4{font-family:var(--font-sans);font-weight:800;line-height:var(--lh-display);letter-spacing:-.028em;margin:0;text-wrap:balance}
p{margin:0}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
:focus-visible{outline:2.5px solid var(--cobalt);outline-offset:3px;border-radius:var(--r-sm)}
.ey{font-family:var(--font-sans);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--cobalt);font-weight:700}

.glass{position:relative;background:var(--glass-grad);backdrop-filter:blur(26px) saturate(165%);-webkit-backdrop-filter:blur(26px) saturate(165%);border:1px solid var(--glass-bord);border-radius:var(--r-xl);box-shadow:var(--soft-sm),var(--glass-inset);overflow:hidden}
.glass::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),var(--spot),transparent 60%)}
.glass:hover::before{opacity:1}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font-family:var(--font-sans);font-weight:700;font-size:1rem;padding:.85em 1.4em;border-radius:var(--r-pill);border:1.5px solid transparent;cursor:pointer;white-space:nowrap;transition:background .22s var(--ease-out),color .22s var(--ease-out),box-shadow .22s var(--ease-out),transform .22s var(--ease-out),border-color .22s}
.btn:active{transform:scale(.975)}
.btn svg{width:1.1em;height:1.1em;flex:0 0 auto}
.btn .ic{width:30px;height:30px;border-radius:var(--r-pill);background:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.42);display:inline-flex;align-items:center;justify-content:center;transition:transform .22s var(--ease-out)}
.btn .ic svg{width:15px;height:15px}
.btn-primary{background:var(--cobalt);color:#fff;box-shadow:0 14px 30px -12px rgba(30,86,224,.6),0 4px 10px -6px rgba(30,86,224,.48),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-primary:hover{background:var(--cobalt2)}.btn-primary:hover .ic{transform:translateX(3px)}
.btn-ghost{background:var(--field-bg);border-color:var(--line2);color:var(--ink);box-shadow:var(--soft-sm),inset 0 1px 0 rgba(255,255,255,.72)}
.btn-ghost:hover{border-color:var(--cobalt);color:var(--cobalt)}
.btn-wa{background:var(--wa);color:var(--wa-ink);box-shadow:0 14px 30px -12px rgba(23,134,65,.6)}
.btn-wa:hover{background:var(--wa-dk)}
.btn-wa svg{width:1.15em;height:1.15em;fill:currentColor}
.btn-lg{font-size:1.14rem;padding:.95em 1.6em}
.hero-ask .btn-lg{font-size:1rem;padding:.72em 1.25em}
.hero-ask .btn .ic{width:25px;height:25px}
.hero-ask .btn .ic svg{width:13px;height:13px}
.nav-in .r .btn{font-size:.94rem;padding:.66em 1.15em}
.mag{display:inline-block;will-change:transform}

/* nav */
.skip-link{position:fixed;top:8px;left:8px;z-index:100;transform:translateY(calc(-100% - 16px));
  padding:10px 16px;min-height:44px;display:inline-flex;align-items:center;border-radius:var(--r-pill);
  background:var(--surface);color:var(--ink);font-weight:800;box-shadow:var(--soft-sm);transition:transform .18s var(--ease-out)}
.skip-link:focus{transform:translateY(0)}
.nav{position:sticky;top:20px;z-index:60;margin-top:20px}
.nav-in{max-width:var(--maxw);margin:0 auto;width:calc(100% - 40px);display:flex;align-items:center;gap:20px;height:62px;padding:0 12px 0 22px;border-radius:var(--r-pill);background:var(--nav-bg);
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border:1px solid var(--nav-bord);box-shadow:var(--soft-sm),inset 0 1px 0 rgba(255,255,255,.5)}
.nav-in .brand{flex:0 0 auto}.nav-in .brand img{height:28px;width:auto;filter:var(--logo-filter)}
.nav-panel{display:flex;align-items:center;gap:20px;flex:1;min-width:0}
.nav-toggle{display:none;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px 16px;
  border:1px solid var(--line2);border-radius:var(--r-pill);background:var(--field-bg);font-weight:800;cursor:pointer}
.nav-in .lk{display:flex;gap:20px;margin-left:6px}
.nav-in .lk a{color:var(--ink2);font-weight:700;font-size:.88rem;transition:color .3s;
  padding:12px 2px;display:inline-flex;align-items:center;min-height:44px}
.nav-in .lk a:hover,.nav-in .lk a[aria-current="page"]{color:var(--cobalt)}
.nav-in .lk a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.nav-in .r{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav-phone{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-weight:800;font-size:.95rem;color:var(--ink)}
.nav-phone svg{width:16px;height:16px;fill:var(--cobalt)}
/* hero - full-bleed photograph, domed bottom edge, floating capability tiles */
.hero{--rail-h:clamp(112px,10.6vw,152px);--rail-pb:clamp(16px,2.4vw,28px);--rail-clear:0px;--dots-h:0px;--cb:0px;
  --dome:clamp(56px,7.1vw,140px);--tabs-h:64px;--arc:100%;
  position:relative;padding:0 0 var(--cb);margin-top:-82px;min-height:100dvh;display:flex;flex-direction:column;isolation:isolate;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
/* The hero photograph is landscape (wide-rays, 1320x971). A portrait source here
   discarded roughly two thirds of its height once the band went wider than about
   2:1, which left the crop landing on the roofline rather than on the car. A
   landscape source keeps the centre of the frame in view at every width, so one
   centred object-position serves the whole range and no breakpoint override is
   needed. */
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 50%}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(96deg,rgba(6,10,22,.90) 0%,rgba(6,10,22,.68) 40%,rgba(6,10,22,.20) 78%),
  linear-gradient(0deg,rgba(6,10,22,.74),transparent 44%)}

.hero-inner{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin:0 auto;flex:1;
  display:flex;align-items:center;
  padding:calc(82px + clamp(14px,2.4vw,34px)) 30px calc(var(--dome) + clamp(16px,2vw,30px))}
.hero-copy{max-width:min(880px,72%)}
.hero .ey{display:block;color:#9DBBFF}
.hero h1{font-size:clamp(2.3rem,4.2vw,3.9rem);text-wrap:balance;margin:0;letter-spacing:-.035em;line-height:1.04;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.42)}
.hero h1 .c{color:#9DBBFF}
.hero .lede{color:rgba(255,255,255,.86);font-size:var(--t-body);max-width:54ch;margin:16px 0 24px;line-height:1.5}

/* single ask: Get a quote and WhatsApp, the same pair at every width. The phone
   number is carried by the floating call bar on the widths where it matters. */
.hero-ask{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* google rating, unboxed, above the eyebrow */
.hero-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-bottom:16px}
.hero-meta .est{font-family:var(--font-sans);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);padding-left:16px;border-left:1px solid rgba(255,255,255,.28);font-weight:700}
@media(max-width:560px){ .hero-meta .est{padding-left:0;border-left:0;flex-basis:100%} }
.rating.bare{display:flex;width:fit-content;background:none;border:0;box-shadow:none;padding:0;border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;margin-bottom:0}
.rating.bare .val{color:#fff}
.rating.bare .cnt{color:rgba(255,255,255,.78)}
a.rating.bare:hover{border-color:transparent}
a.rating.bare:hover .cnt{color:#9DBBFF}

/* reassurance pills - one centred row, inside the arch, above the tile rail */

/* a row of tabs indexing the sections below. no photographs: the hero already has one,
   and five more competing crops at the bottom of it was the noisiest part of the page. */
/* the photograph ends on a single downward arch: the same gesture as the arc at the
   foot of the page, so the two curved moments bracket the sharp edges between them */
.hero-bg{overflow:hidden;bottom:var(--tabs-h);
  clip-path:ellipse(var(--arc) 100% at 50% 0)}
.hero-tabs{position:relative;z-index:3;width:100%;display:flex;flex-wrap:wrap;gap:10px;
  background:var(--bg);padding:clamp(16px,2vw,26px) 30px calc(var(--rail-pb) + clamp(6px,1vw,14px))}
/* The rail centres on the viewport at every width. It used to be flex-start with a
   pair of flex spacers capped at half the gutter, which pinned it to the left edge of
   the content column, and two media queries then re-centred it above 561px. Three
   rules for one decision left 481-560px reading about 20px left of centre, so the
   decision is made once here and the overrides are gone. */
.hero-tabs{justify-content:center}
.hero-tabs a{display:inline-flex;align-items:center;min-height:44px;padding:.6em 1.15em;
  border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);
  color:var(--ink);font-weight:700;font-size:var(--t-fine);letter-spacing:-.01em;line-height:1.2;
  white-space:nowrap;box-shadow:var(--soft-sm);
  transition:border-color .24s var(--ease-out),color .24s var(--ease-out),transform .24s var(--ease-out)}
.hero-tabs a:hover{border-color:var(--cobalt);color:var(--cobalt);transform:translateY(-2px)}
html{scroll-padding-top:118px}
@media(max-width:820px){ html{scroll-padding-top:96px} }
.rail-dots{display:none;position:relative;z-index:3;align-items:center;justify-content:center;gap:8px;height:var(--dots-h)}
.rail-dot{position:relative;width:7px;height:7px;padding:0;border:0;border-radius:var(--r-pill);background:var(--line2);cursor:pointer;transition:width .22s var(--ease-out),background .22s var(--ease-out)}
.rail-dot.active{width:20px;background:var(--cobalt)}

.rating{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px 8px;max-width:100%;background:var(--tile-bg);border:1px solid var(--glass-bord);border-radius:var(--r-lg);padding:8px 13px;box-shadow:var(--soft-sm),inset 0 1px 0 rgba(255,255,255,.7)}
.rating .g{width:17px;height:17px;flex:0 0 auto}.rating .stars{color:var(--gold);letter-spacing:1px;font-size:var(--t-fine)}
.rating .val{font-family:var(--font-sans);font-weight:800;font-size:14px}.rating .cnt{font-family:var(--font-sans);font-size:var(--t-micro);color:var(--ink2)}
a.rating{cursor:pointer}a.rating:hover{border-color:var(--cobalt)}

/* sections */
section{padding:104px 0;position:relative}
.sec-h{max-width:880px;margin-bottom:48px}
.sec-h p{max-width:var(--measure)}
.sec-h h2{margin-top:16px;letter-spacing:-.03em}
.sec-h h2:first-child {margin-top:0}
.sec-h p{color:var(--ink2);margin-top:16px}
.sec-h.center{margin:0 auto 48px;text-align:center}
/* every section intro on the site resolves here, and nowhere else */
.sec-h h2,.split h2{font-size:var(--t-h2)}
.sec-h h2.display{font-size:var(--t-display)}
.sec-h p,.sec-h .lead,.lead,.lead2{font-size:var(--t-lead);line-height:var(--lh-lead);max-width:var(--measure)}
.lead{color:var(--ink2);margin:22px 0 30px}

.stat-strip{margin-bottom:32px}

/* servicing pricing (priority) */
.price-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
#servicing{--dots-h:0px;min-height:100dvh;display:grid;align-content:center;
  padding-top:clamp(38px,5.4vh,80px);padding-bottom:clamp(38px,5.4vh,80px)}
#servicing>.wrap{width:100%}
#servicing .sec-h{margin-bottom:clamp(16px,2.8vh,40px)}
#servicing .sec-h p{margin-top:12px}
#servicing .sec-h h2{margin-top:12px}
#servicing .rail-dots{margin-top:14px}
@media(max-width:1220px){
  /* three cards become one swipeable rail so the section still lands on a screen */
  #servicing{--dots-h:22px;padding-top:clamp(24px,3.4vh,44px);padding-bottom:clamp(24px,3.4vh,44px)}
  #servicing .sec-h{margin-bottom:clamp(14px,2.2vh,26px)}
  #servicing .sec-h h2{margin-top:10px}
  #servicing .sec-h p{margin-top:10px}
  .ptile .pd{font-size:var(--t-fine)}
  .cd-band{padding:12px 16px;font-size:var(--t-micro);gap:8px;line-height:1.45}
  .cd-band svg{width:17px;height:17px}
  .price-note{font-size:var(--t-micro);line-height:1.45}
  #servicing .rail-dots{display:flex}
  .price-tiles{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 20px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .price-tiles::-webkit-scrollbar{display:none}
  .ptile{scroll-snap-align:start}
}
.ptile{padding:clamp(20px,2.6vh,32px) clamp(22px,2vw,30px);display:flex;flex-direction:column;position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:var(--soft-sm);transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s}
.ptile:hover{transform:translateY(-6px);box-shadow:var(--soft);border-color:color-mix(in srgb,var(--cobalt) 30%,var(--line))}
.ptile .pk{font-family:var(--font-sans);font-weight:800;font-size:1.3rem;letter-spacing:-.02em}
.ptile .pv{font-family:var(--font-sans);font-weight:800;font-size:clamp(2.1rem,3.6vh,3rem);letter-spacing:-.035em;color:var(--cobalt);margin:10px 0 0;line-height:1}
.ptile .pv .vat{font-size:.85rem;font-weight:700;color:var(--ink3);letter-spacing:0}
.ptile .pd{color:var(--ink2);font-size:var(--t-fine);margin-top:clamp(10px,1.6vh,16px);flex-grow:1;line-height:1.5}
.ptile .btn{margin-top:clamp(14px,2vh,22px);width:100%}
.ptile.feature{background:var(--feature-grad);color:#fff;border:1px solid rgba(255,255,255,.08);box-shadow:var(--soft)}
.ptile.feature::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--feature-accent);opacity:1}
.ptile.feature:hover{border-color:rgba(255,255,255,.16)}
.ptile.feature .pk{color:#fff}.ptile.feature .pv{color:#fff}.ptile.feature .pv .vat{color:rgba(255,255,255,.66)}
.ptile.feature .pd{color:var(--panel-sub)}
.ptile.feature .btn-primary{background:#fff;color:var(--panel-b)}.ptile.feature .btn-primary:hover{background:#EEF2FF}
.pbadge{align-self:flex-start;font-family:var(--font-sans);font-size:var(--t-micro);letter-spacing:.07em;text-transform:uppercase;padding:6px 12px;border-radius:var(--r-pill);margin-bottom:clamp(10px,1.8vh,18px);background:var(--cobalt-soft);color:var(--cobalt);font-weight:700}
.ptile.feature .pbadge{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.28)}
.cd-band{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;justify-content:center;text-align:center;margin-top:clamp(12px,2vh,22px);padding:clamp(13px,1.8vh,20px) 24px;font-family:var(--font-sans);font-size:var(--t-fine);color:var(--ink2)}
.cd-band b{color:var(--ink)}
.cd-band svg{width:20px;height:20px;fill:var(--green);flex:0 0 auto;margin-top:.12em}
.cd-band>span:not(.cd-cta){flex:1;min-width:0}
.price-note{font-size:var(--t-fine);color:var(--ink3);margin-top:clamp(12px,1.8vh,20px);text-align:left;line-height:1.6;max-width:var(--measure)}
.freecode{font-family:var(--font-sans);font-weight:800;background:var(--gold);color:#3a2a02;padding:1px 7px;border-radius:var(--r-sm);letter-spacing:.02em}

/* welcome / heritage */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split>*{min-width:0}
.heritage{padding:26px;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:center}
.heritage .h{display:flex;flex-direction:column;gap:4px;padding:20px;border-radius:var(--r-lg);background:var(--tile-bg);border:1px solid var(--tile-bord);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.heritage .h .n{font-weight:800;font-size:1.8rem;letter-spacing:-.02em;color:var(--cobalt)}
.heritage .h .l{font-family:var(--font-sans);font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);font-weight:700}
.split h2{letter-spacing:-.03em;margin-bottom:0}

/* checks */
.checks{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:var(--t-body)}
.checks .ck{flex-shrink:0;width:24px;height:24px;border-radius:var(--r-pill);background:var(--cobalt-soft);color:var(--cobalt);display:flex;align-items:center;justify-content:center;margin-top:2px}
.checks .ck svg{width:14px;height:14px}

.svc-note{font-family:var(--font-sans);font-size:var(--t-micro);color:var(--ink3);margin-top:24px;line-height:1.6;text-align:center}

/* diagnostics + DSH chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chips .chip{font-family:var(--font-sans);font-size:var(--t-micro);color:var(--ink2);background:var(--tile-bg);border:1px solid var(--tile-bord);box-shadow:var(--soft-sm),inset 0 1px 0 rgba(255,255,255,.6);padding:9px 15px;border-radius:var(--r-pill)}
.chips .chip b{color:var(--ink);font-weight:700}
.dsh-panel{padding:38px}
.dsh-panel h3{font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.02em}
.dsh-panel .lead{margin:16px 0 22px}

/* capabilities grid */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* media split */
.media{aspect-ratio:5/4;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--soft);position:relative}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.media .tag{position:absolute;left:20px;bottom:20px;background:rgba(255,255,255,.82);backdrop-filter:blur(8px);border:1px solid var(--glass-bord);border-radius:var(--r-lg);padding:11px 14px;display:flex;align-items:center;gap:12px;box-shadow:var(--soft-sm)}
.media .tag img{height:30px;width:auto}.media .tag .t{font-size:var(--t-micro);color:var(--ink2);line-height:1.3}.media .tag .t b{color:var(--ink)}
.split p.lead2{color:var(--ink2);margin:18px 0 24px;max-width:var(--measure)}

/* marquee */
@media (prefers-reduced-motion:reduce){.marq-track{animation:none}.marq{overflow-x:auto}}

/* reviews */
.rev-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px}
.rev-rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 36px)/3);gap:16px;margin-top:8px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:6px}
.rev-rail::-webkit-scrollbar{display:none}
.rev-rail>.rev{scroll-snap-align:start;display:flex;flex-direction:column}
.rev-rail>.rev p{flex:1}
#reviews .rail-dots{display:flex;margin-top:18px}
@media(max-width:900px){ .rev-rail{grid-auto-columns:calc((100% - 18px)/2)} }
@media(max-width:640px){ .rev-rail{grid-auto-columns:88%;gap:12px} }
.rev{padding:26px;min-height:clamp(228px,24vw,290px)}
/* An initials disc, not a photograph: these are Google reviewers, and we hold no
   portrait of any of them. Two letters in the site's own navy reads as a person
   without inventing a face. */
.rev .who{display:flex;align-items:center;gap:12px}
.rev-av{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-sans);font-weight:800;font-size:.78rem;letter-spacing:.02em;color:#fff;
  background:linear-gradient(150deg,var(--panel-a),var(--panel-b));box-shadow:var(--soft-sm)}
.rev:nth-child(3n+2) .rev-av{background:linear-gradient(150deg,#2E63E8,#1E56E0)}
.rev:nth-child(3n) .rev-av{background:linear-gradient(150deg,#4A5C7A,#2E3D57)}
.rev .who-t{min-width:0}
.rev .rs{color:var(--gold);letter-spacing:1px;font-size:var(--t-fine)}
.rev p{font-size:var(--t-fine);margin:12px 0 14px;line-height:1.55;color:var(--ink)}
.rev .who{font-family:var(--font-sans);font-size:var(--t-micro);color:var(--ink2)}.rev .who b{color:var(--ink);font-weight:500}
.rev-foot{font-family:var(--font-sans);font-size:var(--t-micro);margin-top:18px;text-align:center}
.rev-foot a{color:var(--cobalt);border-bottom:1px solid transparent;transition:border-color .2s}
.rev-foot a:hover{border-bottom-color:var(--cobalt)}

/* fleet */
.fleet{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
@media(max-width:860px){ .fleet{grid-template-columns:1fr;gap:24px} }

/* areas + find */
.area-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.area-links a{font-size:var(--t-fine);color:var(--ink2);background:var(--tile-bg);border:1px solid var(--tile-bord);box-shadow:var(--soft-sm),inset 0 1px 0 rgba(255,255,255,.6);padding:9px 16px;border-radius:var(--r-pill);transition:color .25s,border-color .25s}
.area-links a:hover{color:var(--cobalt);border-color:var(--cobalt)}
.area-links .more{color:var(--ink3);background:none;border:none;box-shadow:none;padding:9px 4px}
.find-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start;margin-top:44px}
@media(max-width:860px){ .find-grid{grid-template-columns:1fr;gap:24px} }
.find-grid>*{min-width:0}
.mapembed{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--glass-bord);position:relative;aspect-ratio:16/10;min-height:240px;min-width:0;background:var(--line);box-shadow:var(--soft-sm)}
@media(max-width:520px){ .mapembed{min-height:0;aspect-ratio:4/3} }
.mapembed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.getdir{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--font-sans);font-weight:700;font-size:var(--t-fine);color:var(--cobalt)}
.getdir svg{width:16px;height:16px;fill:var(--cobalt)}
.napcard{padding:26px}
.napcard .nrow{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;font-size:var(--t-fine);color:var(--ink)}
.napcard .nrow svg{width:19px;height:19px;fill:var(--cobalt);flex:0 0 auto;margin-top:2px}
.napcard .nrow a{color:var(--ink)}.napcard .nrow a.muted{color:var(--ink2)}
.opennow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-weight:800;font-size:var(--t-micro);padding:6px 13px;border-radius:var(--r-pill)}
.opennow.open{background:rgba(14,159,110,.12);color:var(--green)}
.opennow.closed{background:var(--cobalt-soft);color:var(--closed-fg)}
.opennow .dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.hours{margin:4px 0;padding:0;list-style:none;font-size:var(--t-fine);width:100%}
.hours li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:4px 0}
.hours li .d{color:var(--ink2)}.hours li .h{color:var(--ink);font-family:var(--font-sans);font-size:var(--t-micro);white-space:nowrap}
.hours li.today{margin:2px -10px;padding:4px 10px;background:var(--cobalt-soft);border-radius:var(--r-md)}
.hours li.today .d,.hours li.today .h{color:var(--cobalt);font-weight:700}

/* contact tiles */

/* breakdown band */
.breakdown{display:flex;align-items:center;gap:24px;padding:30px 34px;flex-wrap:wrap}

.breakdown .bcall{font-family:var(--font-sans);font-size:var(--t-fine);color:var(--ink2)}.breakdown .bcall b{color:var(--ink)}

/* card carousel (diagnostics / bodywork / fleet) — wide, near-full-width slides */
:root{--vw:100vw}
@media(max-width:820px){ .st-grid{grid-template-columns:1fr;gap:20px} }

/* page close */
.close{margin-top:0;padding:var(--sp-tight) 0}
.close-meta{margin-top:36px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;font-family:var(--font-sans);font-size:var(--t-micro);letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.8);font-weight:700}
.close-meta > span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-pill);padding:8px 15px}
.close-meta > .st{color:#FFD466;border-color:rgba(255,212,102,.35)}
@media(max-width:560px){ .close-cta{flex-direction:column} .close-cta .btn{width:100%;justify-content:center} }

/* footer */
footer{padding:60px 0 34px;border-top:1px solid var(--line);margin-top:40px;position:relative;z-index:2}
footer .cols{display:grid;grid-template-columns:1.3fr 1.55fr 1.05fr 1.1fr;gap:30px 36px;align-items:start}
.fbrand .addr{max-width:36ch}
.faddr{margin-top:16px;font-size:var(--t-fine);line-height:1.7;max-width:30ch}
.flinks{display:grid}
/* eleven service links stacked in one column left the other three columns half empty
   and the footer taller than the block it closes; two columns squares the bottom edge */
@media(min-width:1100px){ .flinks.two{grid-template-columns:1fr 1fr;column-gap:24px} }
footer .flogo{height:34px;width:auto;margin-bottom:16px;filter:var(--logo-filter)}
footer h4{font-family:var(--font-sans);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin:0 0 14px;font-weight:700}
footer a{display:block;color:var(--ink2);padding:5px 0;font-size:var(--t-fine)}footer a:hover{color:var(--cobalt)}
footer .addr{color:var(--ink2);font-size:var(--t-fine);line-height:1.7}
footer .fhours{font-family:var(--font-sans);font-size:var(--t-fine);color:var(--ink);line-height:1.9}
.fcontact .ftel{margin-top:16px;font-size:var(--t-body);font-weight:700;letter-spacing:-.01em}
.fcontact .fmail{margin-top:2px}
.ftb{border-top:1px solid var(--line);margin-top:40px;padding-top:22px;padding-right:88px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--font-sans);font-size:var(--t-micro);color:var(--ink3)}

/* mobile bars */
.callbar{position:fixed;left:0;right:0;z-index:80;display:none;grid-template-columns:1fr 1fr;
  gap:10px;background:none;box-shadow:none;
  bottom:calc(10px + env(safe-area-inset-bottom,0px));padding:0 12px;pointer-events:none}
.callbar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;font-family:var(--font-sans);font-weight:800;font-size:var(--t-fine);pointer-events:auto;border-radius:var(--r-pill);border:0;box-shadow:0 10px 26px -10px rgba(6,13,32,.45);transition:transform .18s var(--ease-out)}
.callbar a:active{transform:scale(.98)}
.callbar .call{background:var(--cobalt);color:#fff}
.callbar .wa{background:var(--wa);color:var(--wa-ink)}
.callbar svg{width:19px;height:19px;fill:currentColor}
@media(max-width:820px){ .callbar{display:grid} footer{padding-bottom:128px} }
/* With JavaScript, the bar waits for the hero to scroll past (site.js adds
   .cb-auto and toggles .is-shown). visibility, not only opacity, so the hidden
   buttons leave the tab order; the delay lets the fade finish first. */
/* A fade only: site.js measures the bar's box for the --callbar-h reserve,
   and a transform would shift that measurement while the bar is hidden. */
html.cb-auto .callbar{opacity:0;visibility:hidden;transition:opacity .35s var(--ease-out),visibility 0s linear .35s}
html.cb-auto .callbar.is-shown{opacity:1;visibility:visible;transition:opacity .35s var(--ease-out),visibility 0s}
@media(prefers-reduced-motion:reduce){ html.cb-auto .callbar,html.cb-auto .callbar.is-shown{transition-duration:0s} }

/* ---------- mobile: the About band ----------
   the fixed call bar sits over the bottom of every full-height section, so the
   centred content has to be given that height back or it reads as clipped. */
@media(max-width:820px){
  :root{--callbar-h:53px}
  .sp-full,#about,#services,#diagnostics,#bodywork,#fleet,#why{
    padding-bottom:calc(clamp(18px,3vh,40px) + var(--callbar-h))}
  .sm-cut{display:none}

}
/* 640-tall phones: fleet carries the most copy of the split sections, so it needs
   one more step before the layout is allowed to give up on a single screen. */
@media(max-height:660px) and (max-width:860px){  #fleet .checks{gap:5px}
  #fleet .lead2{margin:5px 0 8px}
  .sp-full h2{font-size:1.16rem}
  .sp-full .lead2{margin:6px 0 9px}
  #bodywork .checks li,#fleet .checks li{font-size:var(--t-micro);line-height:1.35}
  .checks{gap:6px}
  .sp-cta{margin-top:9px}
}
/* below ~600px of viewport height, holding every section to one screen would mean
   roughly 10px body type. readability wins: these sections scroll instead. */
@media(max-height:600px) and (max-width:860px){
  .sp-full,#about,#services,#diagnostics,#bodywork,#fleet,#why{min-height:0}
}

/* the smallest phones still in use: one more step down */
@media(max-width:360px),(max-height:600px) and (max-width:860px){  .sp-full h2{font-size:1.22rem}
  .sp-full .lead2{margin:7px 0 10px}
  .sp-label{margin-bottom:8px}
  #bodywork .checks li,#fleet .checks li{font-size:var(--t-micro)}
  .checks{gap:7px}

}
/* sticky Call/WhatsApp bar already covers this on phones, so drop the hero CTA */
@media(max-width:820px){ .hero{--cb:0px}
  .hero-tabs{padding-bottom:calc(var(--rail-pb) + 58px)}
  /* The hero asks for a quote at every width. The phone button that used to replace
     Get a quote here is not lost: the floating call bar carries Call us and WhatsApp
     on exactly these widths, so the number stays one tap away. */
  /* The two asks stay on one row the way the rail below them does. Under about 340px
     they are 2px wider than the column, which used to drop WhatsApp onto a second
     line; the row scrolls that fraction sideways instead, with no scrollbar showing.
     The padding is shadow room, since a scroll container cannot overflow visibly. */
  .hero-ask{display:flex;gap:8px;flex-wrap:nowrap;justify-content:safe center;margin-top:4px;
    overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding:6px 0;margin-bottom:-6px}
  .hero-ask::-webkit-scrollbar{display:none}
  .hero-ask>*{flex:0 0 auto}
  .hero-ask .btn-lg{font-size:.88rem;padding:.6em .95em;gap:8px}
  .hero-ask .btn-lg svg{width:1.05em;height:1.05em}
}
/* short phones (SE-class): tighten hard - a small overhang below the fold is
   accepted here rather than cutting copy */
@media (max-height:720px) and (max-width:820px){
  .hero-inner{padding-top:calc(93px + 6px);padding-bottom:calc(var(--dome) + clamp(10px,1.6vw,20px))}
  .hero h1{font-size:clamp(1.7rem,6.4vw,2.05rem);margin-top:10px}
  .hero .lede{font-size:var(--t-fine);margin:10px 0 16px;line-height:1.45}
  .rating.bare{margin-bottom:9px}
  .hero{--rail-h:0px;--rail-clear:0px;--rail-pb:8px}
  .hero .ey{font-size:var(--t-micro);letter-spacing:.1em}
}
.wa-float{position:fixed;right:22px;bottom:22px;z-index:70;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px -6px rgba(11,138,67,.5),0 2px 6px rgba(0,0,0,.2);transition:transform .18s var(--ease-out)}
.wa-float svg{width:31px;height:31px;fill:#fff}.wa-float:hover{transform:translateY(-3px)}
@media(max-width:820px){ .wa-float{display:none} }

@media (prefers-reduced-motion:reduce){ .hero-tabs a{transition:none} }

@media (max-width:1080px){
  .hero{margin-top:-93px;min-height:100dvh;--rail-h:0px;--rail-pb:12px;--dots-h:0px;--rail-clear:0px}
  .hero-inner{padding:calc(93px + clamp(10px,2.4vw,26px)) 20px calc(var(--dome) + clamp(8px,1.4vw,16px))}
  .hero-copy{max-width:none}
  /* The rail stays on one row at every width and scrolls sideways when the badges
     outrun the screen, with no scrollbar showing. `safe center` is what makes both
     cases work from one rule: it centres the row while it fits, and falls back to a
     left-aligned start when it overflows, so the first badge is never scrolled off
     the left edge and out of reach. */
  .hero-tabs{padding:0 20px var(--rail-pb);flex-wrap:nowrap;justify-content:safe center;
    overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-padding:0 20px}
  .hero-tabs::-webkit-scrollbar{display:none}
  .hero-tabs a{flex:0 0 auto}
}
@media (max-width:768px){
  .hero h1{font-size:clamp(2.1rem,8.4vw,3rem)}
  .hero .lede{font-size:var(--t-body);max-width:none;margin:16px 0 24px}
}
@media (max-width:620px){ .hero-tabs a{font-size:var(--t-fine);padding:.55em 1em;min-height:42px} }
@media (max-width:820px){ .ftb{padding-right:0} }

/* ===== about band: photographic panel, arched top and bottom, echoing the hero =====
   edge rule used across the page: the lower surface always arcs UP into the one above. */
#about{--cut:clamp(40px,5vw,96px);position:relative;isolation:isolate;
  padding-top:calc(clamp(52px,5.6vw,86px) + var(--cut));
  padding-bottom:calc(clamp(52px,5.6vw,86px) + var(--cut))}
/* sheared edges - one straight diagonal top and bottom, running the same way,
   so the band reads as a slanted slab cut through the page */
.about-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0A1730;
  clip-path:polygon(0 0,100% var(--cut),100% 100%,0 calc(100% - var(--cut)))}
.about-bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.about-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(9,18,44,.90),rgba(14,36,92,.79) 46%,rgba(24,66,150,.62))}

@media(max-width:430px){
  /* the trailing sentence just restates the headline - drop it where space is scarce */
  .cd-more{display:none}
  
  .ptile{padding:18px 20px}
  .ptile .pv{font-size:clamp(1.9rem,3.2vh,2.4rem)}
}

/* short phones/tablets: the section is height-bound, not width-bound */
@media (max-height:900px) and (max-width:820px){
  #servicing{padding-top:clamp(16px,2.4vh,30px);padding-bottom:clamp(16px,2.4vh,30px)}
  #servicing .sec-h{margin-bottom:13px}
  #servicing .sec-h h2{margin-top:8px}
  #servicing .sec-h p{margin-top:8px}
  .cd-more{display:none}
  .cd-band{padding:10px 14px;font-size:var(--t-micro);margin-top:10px;gap:8px}
  .price-note{font-size:var(--t-micro);margin-top:8px;line-height:1.4}
  .ptile{padding:16px 18px}
  .ptile .pv{font-size:clamp(1.8rem,3vh,2.3rem)}
  .ptile .pd{font-size:var(--t-fine);margin-top:8px}
  .ptile .btn{margin-top:12px}
  .pbadge{margin-bottom:8px}
  #servicing .rail-dots{margin-top:10px}
}

/* very short handsets need one more step */
@media (max-height:680px) and (max-width:820px){

  .ptile{padding:13px 16px}
  .ptile .pd{font-size:var(--t-micro);margin-top:6px}
  .ptile .pv{font-size:1.75rem}
  .ptile .btn{margin-top:10px;padding:.7em 1.2em}
  .cd-band{padding:8px 12px;font-size:var(--t-micro);margin-top:8px}
  .price-note{font-size:var(--t-micro);margin-top:6px}
}

/* family / human gallery */
.family-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:196px;gap:14px;
  margin:40px auto 0;max-width:1080px}
@media(max-width:900px){ .family-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:214px} .fam.tall{grid-row:span 1} .fam.wide{grid-column:span 1} }
.fam{position:relative;display:flex;flex-direction:column}
/* the row track sets the cell height, so the photograph takes what the caption leaves */
.fam-media{flex:1 1 0;min-height:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--soft-sm)}
.fam img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.fam:hover img{transform:scale(1.05)}
.fam.tall{grid-row:span 2}
.fam.wide{grid-column:span 2}
.fam .cap{flex:0 0 auto;display:flex;align-items:flex-start;min-height:calc(1.6em + 9px);
  padding:9px 2px 0;color:var(--ink2);
  font-family:var(--font-sans);font-size:var(--t-micro);letter-spacing:.02em;line-height:1.3}
@media(max-width:560px){ .family-grid{grid-template-columns:1fr 1fr;grid-auto-rows:174px} .fam.tall{grid-row:span 1} }

/* find-us exterior photo */
.find-photo{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--soft-sm);margin-bottom:16px;position:relative}
.find-photo img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.find-photo .cap{position:absolute;left:14px;bottom:12px;background:rgba(6,9,16,.72);color:#fff;font-family:var(--font-sans);font-size:var(--t-micro);padding:7px 13px;border-radius:var(--r-md)}

/* geo by luke carousel (why section) */
.geo-carousel{position:relative;aspect-ratio:5/4;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--soft)}
.gc-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.gc-slide.active{opacity:1}
.gc-slide img{width:100%;height:100%;object-fit:cover;display:block}
.geo-carousel .tag{position:absolute;left:18px;bottom:18px;z-index:2;background:rgba(255,255,255,.84);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--glass-bord);border-radius:var(--r-lg);padding:11px 14px;display:flex;align-items:center;gap:12px;box-shadow:var(--soft-sm)}
.geo-carousel .tag img{height:30px;width:auto}.geo-carousel .tag .t{font-size:var(--t-micro);color:var(--ink2);line-height:1.3}.geo-carousel .tag .t b{color:var(--ink)}
.gc-dots{position:absolute;right:16px;bottom:22px;z-index:2;display:flex;gap:4px}
.gc-dot{position:relative;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);border:0;cursor:pointer;padding:0;transition:width .2s,background .2s}
.gc-dot.active{background:#fff;width:18px;border-radius:var(--r-sm)}
.geo-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;align-items:center}
.geo-cta .btn-luke{background:var(--surface);border:1.5px solid var(--line2);color:var(--ink)}
.geo-cta .btn-luke:hover{border-color:var(--gold);color:var(--gold)}
.geo-cta .btn-luke svg{width:1em;height:1em;fill:currentColor}

/* reveal */
html.anim .rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.anim .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ html.anim .rv{opacity:1;transform:none} }

/* responsive */
@media (max-width:980px){
  .nav-in{height:auto;min-height:62px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
  .nav-panel{flex:1 1 100%;flex-wrap:wrap;gap:8px 16px}
  .nav-in .lk{display:flex;flex:1 1 100%;flex-wrap:wrap;gap:0 16px;margin-left:0}
  .nav-in .r{margin-left:0}
  .nav-panel .r .btn{min-height:44px}
  html.nav-initialized .nav-toggle{display:inline-flex;margin-left:auto}
  html.nav-initialized .nav-panel{display:none}
  html.nav-initialized .nav.nav-open .nav-panel{display:flex}

  .grid3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:32px}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .wrap{padding:0 20px}
  section{padding:64px 0}
  .nav{top:12px;margin-top:12px}
  .nav-in{width:calc(100% - 24px);height:auto;flex-wrap:wrap;gap:12px;padding:12px 16px;border-radius:var(--r-xl)}
  .nav-panel .r{width:100%;margin-left:0;justify-content:space-between;gap:8px}.nav-phone .lbl{display:none}
  .breakdown{padding:26px 24px;gap:16px}
  .dsh-panel{padding:28px 24px}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  section{padding:52px 0}
  footer .cols {grid-template-columns:1fr}

  .heritage{padding:20px;gap:12px}.heritage .h{padding:16px}.heritage .h .n{font-size:1.6rem}
  .final .inner{padding:44px 20px}.final .row{flex-direction:column}.final .row .btn{width:100%}
  .ftb{flex-direction:column;gap:8px}
}

/* ---------- vertical rhythm ----------
   three tiers, assigned by each section's job. a page where every section pays the
   same spacing toll reads as a list; varying it is what makes it read as a sequence. */
:root{--sp:104px;--sp-tight:60px;--sp-wide:150px}
section{padding:var(--sp) 0}
#about{padding-top:var(--sp-wide)}
#family{padding-top:var(--sp-tight)}
#reviews{padding-top:var(--sp-tight)}
.sp-follow{padding-top:0}
#contact{padding-top:var(--sp-wide)}
#breakdown{padding-bottom:var(--sp-tight)}
.close{padding:0}
@media(max-width:900px){ :root{--sp:72px;--sp-tight:44px;--sp-wide:96px} }
@media(max-width:620px){ :root{--sp:56px;--sp-tight:36px;--sp-wide:72px} }

/* ---------- type register ----------
   the mono face is for labels, prices, hours and codes. sentences get the body face. */
.cd-band,.price-note,.svc-note,.brands .lab{font-family:var(--font-sans);text-transform:none;letter-spacing:normal}
.cd-band{font-size:var(--t-fine)}
.price-note{font-size:var(--t-fine);line-height:1.6;max-width:var(--measure)}
.svc-note{font-size:var(--t-fine);line-height:1.6}
.freecode{font-family:var(--font-sans)}
.cd-band b{font-weight:700}

/* ---------- statement type: the loud moments now sit clearly above the workaday ones ---------- */
.sec-h h2.display{letter-spacing:-.04em}
#cars .sec-h{max-width:min(980px,92%)}

/* ---------- what comes up the ramps ---------- */
#cars{padding-top:var(--sp-tight)}
#cars .sec-h{margin-bottom:44px}
.car-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(120px,15.5vh,240px);
  gap:14px;width:100%;max-width:1080px;justify-self:center;margin:0;padding:0 30px}
.car{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--soft-sm);background:var(--bg2);
  display:flex;flex-direction:column}
.car img{width:100%;height:auto;flex:1 1 0;min-height:0;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.car:hover img{transform:scale(1.045)}
.car.big{grid-column:span 2;grid-row:span 2}
.car.wide{grid-column:span 2}
.car-foot{margin-top:clamp(12px,2vh,26px);color:var(--ink2);font-size:var(--t-fine);
  line-height:1.55;text-align:center;max-width:none}
@media(max-width:700px){.cf-br{display:none}}
.car-foot b{color:var(--ink);font-weight:700}
@media(max-width:860px){
  /* six in a grid reads far stronger than one and a half in a rail, and it uses the
     height the rail was leaving empty. the last two are dropped rather than squeezed. */
  #cars .car-grid{grid-template-columns:1fr 1fr !important;grid-auto-flow:row !important;
    grid-auto-columns:auto !important;grid-auto-rows:auto !important;
    overflow:visible !important;gap:8px !important;padding-inline:20px !important}
  #cars .car{scroll-snap-align:none}
  /* every cell is equal here: the spanning cells would push it to a fourth row */
  #cars .car.big,#cars .car.wide{grid-column:auto;grid-row:span 1}
  #cars .car:nth-child(n+7){display:none}
}
/* a short phone keeps all six and takes the height out of the heading and the cells
   instead: four cars read as an off-cut of the set, six read as the set. */
@media(max-height:760px) and (max-width:860px){
  /* a flatter crop is what takes the height out now the tracks size themselves */
  #cars .car img{aspect-ratio:1.9/1}

  #cars .sec-h{margin-bottom:10px}
  #cars .car-foot{font-size:var(--t-micro);margin-top:10px}
}
@media(max-width:900px) and (min-width:861px){
  /* eight tiles cannot stack inside one screen, so they run as a rail instead */
  .car-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:60%;
    grid-auto-rows:auto;gap:10px;padding:0 20px;overflow-x:auto;
    scroll-snap-type:x mandatory;scrollbar-width:none;scroll-padding:0 20px}
  .car-grid::-webkit-scrollbar{display:none}
  .car{scroll-snap-align:start}
  .car.big,.car.wide{grid-column:auto;grid-row:auto}
}
@media(max-width:560px){
  .car-grid{grid-auto-columns:72%;gap:8px}
}

/* ---------- the figures, pulled out of the story card and given air ---------- */

/* ---------- the recovery note, moved out of its own section into the contact block ---------- */
.reach-recover{display:flex;gap:10px;align-items:center;justify-content:center;
  margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16);
  text-align:center;flex-wrap:wrap}
.reach-recover svg{width:22px;height:22px;flex:0 0 auto;color:#9DBBFF}
.reach-recover p{margin:0;font-size:var(--t-fine);line-height:1.5;color:rgba(255,255,255,.78)}
.reach-recover b{color:#fff;font-weight:800}
@media(max-width:620px){
  .reach-recover{gap:10px;margin-top:14px;padding-top:13px}
  .reach-recover p{font-size:var(--t-micro)}
}

/* ---------- heritage lightbox: the framed prints open full size ---------- */

.lb{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,48px);background:rgba(6,10,22,.86);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;
  transition:opacity .28s var(--ease-out)}
.lb.open{display:flex}
.lb.shown{opacity:1}
.lb-fig{margin:0;max-width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;gap:14px}
.lb-fig img{max-width:100%;max-height:calc(100dvh - 190px);width:auto;height:auto;object-fit:contain;
  border-radius:var(--r-lg);box-shadow:0 40px 90px -30px rgba(0,0,0,.7);background:#0A1730}
.lb-cap{color:rgba(255,255,255,.86);font-size:.9rem;line-height:1.5;text-align:center}
.lb-cap b{display:block;color:#fff;font-family:var(--font-sans);font-weight:800;font-size:1.05rem;margin-bottom:3px}
.lb-cap .y{font-family:var(--font-sans);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:#9DBBFF;display:block;margin-bottom:6px;font-weight:700}
.lb-x{position:absolute;top:clamp(12px,2vw,26px);right:clamp(12px,2vw,26px);
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.1);cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb-x:hover{background:rgba(255,255,255,.22);border-color:#fff}
.lb-x svg{width:19px;height:19px;fill:#fff}
@media (prefers-reduced-motion:reduce){ .lb{transition:none} }

/* ---------- split sections: tighter, smaller, centred ----------
   the two columns were running the full 1220px rail, which threw the copy and the
   photograph to opposite edges of a wide screen. a narrower rail pulls them together,
   and once the split stacks everything centres rather than staying left-aligned. */
.sp-full>.wrap{max-width:min(1080px,100%)}
.sp-full .split{gap:clamp(26px,3.2vw,46px);align-items:center}
.sp-full h2{font-size:clamp(1.5rem,2.7vw,2.25rem)}
.sp-full .lead2{max-width:var(--measure)}
.sp-full .checks li{font-size:var(--t-fine)}

@media(max-width:560px){
  .close-meta > span{font-size:var(--t-micro);padding:7px 9px}

}
/* the tyre shot is a wide scene: crop in on the mechanic */
.fam.zoomed img{object-position:44% 66%;transform:scale(1.28)}

/* ---------- arrival: the page had no entrance at all ---------- */
.hero-copy>*{opacity:0;transform:translateY(20px);animation:heroRise .85s var(--ease-out) forwards}
.hero-copy>*:nth-child(1){animation-delay:.10s}
.hero-copy>*:nth-child(2){animation-delay:.20s}
.hero-copy>*:nth-child(3){animation-delay:.30s}
.hero-copy>*:nth-child(4){animation-delay:.40s}
.hero-copy>*:nth-child(5){animation-delay:.50s}
.hero-tabs a{opacity:0;transform:translateY(18px);animation:heroRise .7s var(--ease-out) forwards}
.hero-tabs a:nth-child(1){animation-delay:.54s}
.hero-tabs a:nth-child(2){animation-delay:.60s}
.hero-tabs a:nth-child(3){animation-delay:.66s}
.hero-tabs a:nth-child(4){animation-delay:.72s}
.hero-tabs a:nth-child(5){animation-delay:.78s}
.hero-tabs a:hover{transform:translateY(-2px)}
@keyframes heroRise{to{opacity:1;transform:none}}

/* ---------- hero bottom edge ----------
   the photograph used to stop dead. now it dissolves into the page ground, and the
   tile rail straddles the seam: upper half on the photo, lower half on the page. */
/* the photograph stops at a defined edge. the tab row below carries the page ground,
   so there is no long dark-to-light smear across the bottom of the image. */

/* ---------- alternating ground ----------
   hero and about already carry photographic bands. this continues the rhythm down
   the page so it reads as a sequence of bands, not one uninterrupted scroll. */
#services,#cars,#bodywork,#why{background:var(--band)}

/* ---------- contact ----------
   was three icon-in-a-coloured-square cards. rows instead: the value people
   actually want (the number, the address) carries the weight, one accent. */
/* spacing scale: layout gaps snap to 4/8/12/16/20/24/32/40/56.
   two deliberate exceptions: .btn uses gap:.6em so it tracks the label size,
   and full-bleed rails use clamp() so they breathe with the viewport. */

/* dots stay small visually; the touch target does not */
.rail-dot::after,.st-dot::after,.gc-dot::after{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:44px;height:44px}

/* ---------- specialisms: diagnostics / bodywork / fleet ----------
   were three cards in one horizontal rail. now standalone sections. diagnostics and
   bodywork mirror each other; fleet is a band, so image+text never runs three deep. */
.sp-media{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--soft);aspect-ratio:5/4;background:var(--bg2)}
.sp-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.sp-media:hover img{transform:scale(1.04)}
.sp-sub{margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.sp-sub h3{font-size:var(--t-body);letter-spacing:-.02em;margin:0}
.sp-sub p{color:var(--ink2);font-size:var(--t-fine);margin:8px 0 0}
.sp-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
#bodywork .checks{margin-top:24px}

/* thin route out of the price ladder into the full service list */

/* ---------- close: credential strip on the page ground ---------- */
.close-meta{margin:0;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;font-family:var(--font-sans);font-size:var(--t-micro);letter-spacing:.05em;text-transform:uppercase;color:var(--ink2);font-weight:700}
.close-meta > span{background:var(--tile-bg);border:1px solid var(--tile-bord);border-radius:var(--r-pill);
  padding:9px 16px;box-shadow:var(--soft-sm)}
.close-meta > .st{color:#8A6300;border-color:rgba(232,163,23,.4);background:rgba(232,163,23,.10);box-shadow:none}

/* ---------- find us ---------- */
.find-photo{border-radius:var(--r-xl)}
.find-photo .cap{left:14px;bottom:14px;right:auto;border-radius:var(--r-pill);padding:8px 14px;
  background:rgba(6,9,16,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.mapembed{border-radius:var(--r-xl)}
.getdir{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:700;color:var(--cobalt);
  padding:11px 18px;border:1px solid var(--cobalt);border-radius:var(--r-pill);transition:background .25s,color .25s}
.getdir:hover{background:var(--cobalt);color:#fff}
.getdir svg{width:17px;height:17px;fill:currentColor}
.area-lead{font-family:var(--font-sans);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin:30px 0 12px;font-weight:700}
.area-links a{font-size:var(--t-fine);padding:8px 14px}
.napcard{padding:clamp(24px,2.6vw,32px);border-radius:var(--r-xl)}
.napcard .nrow{margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--line);gap:14px}
.napcard .nrow:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}

@media(max-width:860px){
  .split{grid-template-columns:1fr;gap:32px}
}
/* ---------- manufacturer marks ----------
   real badges where a mark exists (Simple Icons, recoloured, stored locally so the page
   stays self-contained). Jaguar and Land Rover have no usable mark, so they take the same
   chip typographically rather than a bad trace. */
.marque-block{margin-top:28px}
.marque-block + .marque-block{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.marque-lead{font-family:var(--font-sans);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin:0 0 12px;font-weight:700}
.marque-grid{display:flex;flex-wrap:wrap;gap:8px}
.marque{width:52px;height:52px;border-radius:var(--r-md);display:grid;place-items:center;flex:0 0 auto;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--soft-sm);
  transition:border-color .25s,transform .25s var(--ease-out)}
.marque:hover{border-color:var(--cobalt);transform:translateY(-2px)}
.marque img{width:26px;height:26px;display:block;filter:var(--marque-filter);opacity:.88}
.marque.txt{width:auto;padding:0 13px;font-family:var(--font-sans);font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);white-space:nowrap;font-weight:700}
.marque-grid{justify-content:center}
.marque-lead,.marque-block{text-align:center}

/* ---------- each specialism owns one screen ---------- */
.sp-full{min-height:100dvh;display:grid;align-content:center;position:relative}

/* ---------- section transitions ----------
   One arc, used three times: the same single-gesture curve as the contact band top.
   It carries the colour of the section above, so the previous ground domes down into
   the next one. The arc steps shallower as you descend, so the run reads as settling
   rather than as three identical dividers. */
.sec-edge{position:absolute;top:0;left:0;right:0;z-index:1;pointer-events:none;
  height:var(--edge-h,clamp(26px,3.6vw,58px));background:var(--edge-from,var(--bg));
  border-bottom-left-radius:50% var(--edge-h,58px);
  border-bottom-right-radius:50% var(--edge-h,58px)}
#bodywork{--edge-from:var(--bg);--edge-to:var(--bg);--edge-h:clamp(54px,7.6vw,124px)}
#why     {--edge-from:var(--bg);--edge-h:clamp(42px,6vw,96px)}
/* the band's lower boundary belongs to the band, drawn at its own bottom edge in the
   colour of the section below so that ground rises into it. no negative offset to clip. */
.sec-edge.up{top:auto;bottom:0;border-radius:50% 50% 0 0 / 100% 100% 0 0;
  background:var(--edge-to,var(--bg))}
#bodywork{padding-bottom:calc(var(--edge-h) + clamp(10px,1.6vh,26px))}
/* the wave eats into the top of each section, so content is padded clear of it */
#bodywork,#why{padding-top:calc(var(--edge-h) + clamp(10px,1.6vh,26px))}
/* on a short phone the wave and its clearance cost more height than the section has */
@media(max-height:720px) and (max-width:860px){
  #bodywork,#why{--edge-h:clamp(24px,5.2vw,40px);
    padding-top:calc(var(--edge-h) + clamp(4px,.8vh,12px))}
  #bodywork{padding-bottom:calc(var(--edge-h) + clamp(4px,.8vh,12px))}
  /* fleet carries the longest copy of the four splits, so it pays first */  #fleet .checks li{font-size:var(--t-micro);line-height:1.3}
  #fleet .sp-cta{margin-top:8px}
}
.sp-full > .wrap{width:100%}
.sp-full .split{gap:clamp(32px,4vw,64px)}
.sp-full .sp-media{aspect-ratio:auto;height:clamp(260px,58dvh,640px);max-height:none}

/* ---------- stacked: the photograph is a photograph, not a strip ----------
   Successive passes each shaved a few dvh off these images to keep the section inside
   one screen, and between them they left a 600px-wide picture 98px tall. The section
   is far shorter than the screen once the copy is stacked, so the height comes off the
   photograph's own ratio and only the cap moves with the viewport. One statement per
   range, the way the family grid states its geometry. */
@media(min-width:861px) and (max-width:1220px){
  .sp-full .sp-media,#why .geo-carousel{aspect-ratio:16/10;height:auto;
    max-height:clamp(180px,32dvh,380px)}
}
@media(min-width:861px) and (max-width:1220px) and (max-height:820px){
  .sp-full .sp-media,#why .geo-carousel{max-height:clamp(140px,21dvh,250px)}
}
@media(max-width:860px){
  .sp-full .sp-media,#why .geo-carousel{aspect-ratio:16/10;height:auto;
    max-height:clamp(160px,34dvh,420px)}
}
@media(max-width:860px) and (max-height:740px){
  .sp-full .sp-media,#why .geo-carousel{max-height:clamp(130px,26dvh,260px)}
}

/* the split stacks below 1000px, so the photograph shares the vertical budget with
   the copy instead of sitting beside it and cannot keep its side-by-side height. */
@media(max-width:1220px){
  .sp-full>.wrap{max-width:min(660px,100%)}
  .sp-full .split{grid-template-columns:minmax(0,1fr);gap:clamp(18px,3vh,32px);
    justify-items:center;text-align:center}
  .sp-full .sp-copy{display:flex;flex-direction:column;align-items:center;width:100%}
  .sp-full .lead2{margin-left:auto;margin-right:auto}
  /* the list centres as a block, but each row stays left-read so the ticks line up */
  .sp-full .checks{width:fit-content;max-width:100%;margin-inline:auto;text-align:left}
  .sp-full .sp-cta{justify-content:center}
  .sp-full .sp-media,#why .geo-carousel{width:100%;max-width:560px}
  #bodywork .sp-copy{order:2}
  #bodywork .sp-media{order:1}
}

@media(max-width:860px){
  .sp-full{min-height:0;display:block}
}

/* ---------- reach ----------
   the number is the product here. one dominant action, two channels under it. */
.reach{text-align:center;padding:clamp(34px,4.4vw,58px) clamp(22px,4vw,48px);margin-top:8px;
  border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--line);box-shadow:var(--soft-sm)}
.reach-tel{display:inline-flex;align-items:center;gap:clamp(12px,1.6vw,20px);text-decoration:none;color:var(--ink);font-family:var(--font-sans);font-weight:800;letter-spacing:-.035em;line-height:1;font-size:clamp(2.1rem,5.4vw,4rem);transition:color .25s}
.reach-tel svg{width:.62em;height:.62em;fill:var(--cobalt);flex:0 0 auto}
.reach-tel:hover{color:var(--cobalt)}
.reach-sub{color:var(--ink2);font-size:var(--t-body);line-height:var(--lh-lead);max-width:var(--measure);margin:18px auto 0}
.reach-alt{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.reach-alt .btn-ghost{background:transparent;border-color:var(--line2);color:var(--ink)}
.reach-alt .btn-ghost:hover{border-color:var(--cobalt);color:var(--cobalt)}
.reach-alt .btn svg{width:1.05em;height:1.05em;fill:currentColor}
.reach-note{font-family:var(--font-sans);font-size:var(--t-micro);color:var(--ink3);margin:26px 0 0;line-height:1.6}
@media(max-width:620px){
  .reach{padding:30px 18px}
  .reach-alt .btn{width:100%;justify-content:center}
}

/* ---------- specialism section labels ----------
   the nav points at these sections; without a name the visitor lands somewhere unnamed. */
.sp-label{display:inline-block;font-family:var(--font-sans);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--cobalt);background:var(--cobalt-soft);border:1px solid rgba(30,86,224,.18);border-radius:var(--r-pill);padding:7px 14px;margin-bottom:20px;font-weight:700}
.sp-full h2{margin-top:0}

/* ---------- find us: one card, full height of the media column ---------- */
.find-grid{align-items:stretch}
.napcard{display:flex;flex-direction:column;height:100%}
.nap-foot{margin-top:auto;padding-top:22px}
.nap-foot .getdir{margin-top:0;width:100%;justify-content:center}

/* ---------- area chips: one line ---------- */
.area-links{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.area-links::-webkit-scrollbar{display:none}
.area-links a{flex:0 0 auto;font-size:var(--t-fine);padding:7px 12px;white-space:nowrap}

/* ---------- credential strip: this is the last thing seen, so give it weight ---------- */
.close{padding:clamp(22px,3.2vw,44px) 0}
.close-meta{gap:8px}
.close-meta > span{font-size:var(--t-micro);padding:8px 16px;letter-spacing:.08em;color:var(--ink);
  background:var(--surface);border:1px solid var(--line2);box-shadow:var(--soft-sm);font-weight:500}
.close-meta > .st{color:#8A6300;border-color:rgba(232,163,23,.45);background:rgba(232,163,23,.12)}
@media(max-width:620px){ .close-meta > span{font-size:var(--t-micro);padding:7px 12px} }
.nap-note{font-family:var(--font-sans);font-size:var(--t-micro);color:var(--ink3);margin-top:10px;line-height:1.5}
.nap-hours{flex:1;min-width:0}
.nap-hours>b{display:block;margin-bottom:6px}
.nap-tel{font-weight:700}
.nrow-first{margin-top:16px}

/* ---------- photographic bands ----------
   the About section already breaks the page with a dark photographic band. repeating that
   on alternating sections gives the page a rhythm a flat tint could not. */
#services,#cars{position:relative;isolation:isolate;background:none;color:#fff}
#contact{position:relative;isolation:isolate;background:var(--band);color:#fff}
/* the closing strip and the footer carry the contact band's ground so the end of the
   page reads as one block rather than three stacked panels. */
.close,footer{background:#0E234D;color:#fff;border-top:0}
footer{margin-top:0}
footer a{color:rgba(255,255,255,.82)}
footer a:hover{color:#fff}
footer h4{color:rgba(255,255,255,.62)}
footer .addr,footer .faddr{color:rgba(255,255,255,.72)}
footer .fhours{color:#fff}
footer .ftel{color:#fff;font-weight:700;padding:0}
footer .fmail{padding:0}
footer .ftb{border-top-color:rgba(255,255,255,.16);color:rgba(255,255,255,.55)}
footer .flogo{filter:brightness(0) invert(1);opacity:.92}
.close-meta > span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.26);
  color:rgba(255,255,255,.88);box-shadow:none}
.close-meta > .st{background:rgba(255,212,102,.14);border-color:rgba(255,212,102,.38);color:#FFD466}
.band-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0A1730}
.band-bg img{width:100%;height:100%;object-fit:cover;object-position:center 45%;opacity:.30}
.band-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(9,20,44,.92),rgba(11,26,58,.86) 55%,rgba(16,38,84,.80))}
#services>.wrap,#cars>.wrap,#contact>.wrap{position:relative;z-index:2}
#services h2,#cars h2,#contact h2,#services h3,#contact h3{color:#fff}
#services .sec-h p,#cars .sec-h p,#contact .sec-h p{color:rgba(255,255,255,.82)}
#services .svc-note{color:rgba(255,255,255,.7)}

/* ---------- one screen per section, phones included ----------
   dense sections become swipe rails on mobile rather than shrinking to illegibility. */
#about,#services,#cars{min-height:100dvh;display:grid;align-content:center}
#about,#services,#cars{grid-template-columns:minmax(0,1fr)}
#about>.wrap,#services>.wrap,#cars>.wrap{width:100%;min-width:0}
@media(max-width:860px){
  .sp-full,#about,#services{min-height:100dvh;display:grid;align-content:center}
  .sp-full .split{gap:20px}
  .sp-full h2{font-size:clamp(1.5rem,6.4vw,1.95rem)}
  .sp-full .lead2{margin:12px 0 16px}
  .sp-label{margin-bottom:12px;font-size:var(--t-micro);padding:6px 11px}
  .marque{width:42px;height:42px}.marque img{width:21px;height:21px}
  .marque.txt{font-size:var(--t-micro);padding:0 9px}
  .marque-block{margin-top:16px}
  .marque-block + .marque-block{margin-top:14px;padding-top:14px}
  #bodywork .checks li,#fleet .checks li{font-size:var(--t-fine)}
  .sp-cta{margin-top:16px}

  #services .sec-h{margin-bottom:16px}

  .h2-br{display:none}
}

/* ---------- about + services on one screen ----------
   both were ~1.3x the viewport at desktop. driven off vh like #servicing rather than
   fixed px, so they hold one screen from 640px tall upward. */
#about,#services{padding-top:clamp(30px,5vh,86px);padding-bottom:clamp(30px,5vh,86px)}

#services .sec-h{margin-bottom:clamp(14px,2.4vh,32px)}

#services .sec-h p{margin-top:clamp(8px,1.2vh,14px)}

/* ---------- phones: hold one screen without shrinking type to nothing ----------
   what gives is duplicated content and image height, not legibility. */
@media(max-width:860px){
  /* content is centred inside a 100dvh box, so section padding is dead height here */
  .sp-full,#about,#services{padding-top:0;padding-bottom:0}
  #why .lead2{margin-bottom:16px}
  .geo-cta{gap:8px;margin-top:16px}
     /* the three cards below say it better */
}
@media(max-height:700px) and (max-width:860px){

  #services .sec-h{margin-bottom:12px}

  #cars .car img{aspect-ratio:1.7/1}
  #cars .car-foot{font-size:var(--t-micro)}
  .sp-full h2{font-size:clamp(1.22rem,5vw,1.45rem)}
  .sp-full .lead2{margin:7px 0 10px}
  .sp-label{margin-bottom:8px}
  .checks{gap:7px}
  .sp-cta{margin-top:11px}
  .marque{width:36px;height:36px}.marque img{width:18px;height:18px}
  .marque.txt{font-size:var(--t-micro);padding:0 7px}
  #bodywork .checks li,#fleet .checks li{font-size:var(--t-fine)}

}

/* ---------- hero headline: two rows, always ---------- */
@media(max-width:560px){ .h1-br{display:none} }

/* ---------- collection band now carries the route into the full service list ---------- */
.cd-band{justify-content:space-between;text-align:left;gap:16px}
.cd-cta{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;white-space:nowrap;
  font-weight:700;font-size:var(--t-fine);color:#fff;background:var(--cobalt);
  padding:10px 18px;border-radius:var(--r-pill);text-decoration:none;transition:transform .2s var(--ease-out)}
.cd-cta:hover{transform:translateY(-1px)}
.cd-cta svg{width:14px;height:14px;fill:currentColor}
/* on a phone the line and the button stop competing for the same row: the copy takes
   the full width and the button sits under it, sized to its own label */
@media(max-width:700px){
  .cd-band{display:grid;grid-template-columns:auto 1fr;align-items:center;
    justify-items:center;text-align:center;row-gap:9px;column-gap:9px}
  .cd-band>svg{grid-column:1;grid-row:1}
  .cd-band>span:not(.cd-cta){grid-column:2;grid-row:1;flex:none;text-align:left}
  .cd-cta{grid-column:1 / -1;grid-row:2;width:auto;min-width:0;justify-self:center;
    justify-content:center;padding-inline:clamp(14px,4.4vw,22px)}
}

/* ---------- price note: full measure, centred ---------- */
.price-note{max-width:none;text-align:center}

/* ---------- section headers all centre ----------
   the page was mixing left-aligned and centred headers, which read as unresolved.
   headers centre; copy that sits beside an image stays left in its column. */
.sec-h{margin-left:auto;margin-right:auto;text-align:center;max-width:900px}
.sec-h p{margin-left:auto;margin-right:auto;text-wrap:pretty}
.rev-head{justify-content:center}

.svc-note{text-align:center}

/* ---------- dark bands: each edge is its own shape ---------- */
:root{--cut:clamp(34px,4.4vw,84px)}
#services,#cars{padding-top:calc(clamp(24px,3.6vh,64px) + var(--cut) * .55);
  padding-bottom:calc(clamp(24px,3.6vh,64px) + var(--cut) * .55)}
/* the arc rises a full --cut at the section edges, so the centred heading needs
   that much clearance again or it reads as crowded by the curve */
#contact{padding-top:calc(clamp(30px,4.4vh,70px) + var(--cut) * 1.15);
  padding-bottom:calc(clamp(24px,3.6vh,64px) + var(--cut) * .55)}
@media(max-width:860px){
  #contact{padding-top:calc(clamp(26px,3.6vh,52px) + var(--cut) * 2.1)}
}
@media(max-width:520px){
  #contact{padding-top:calc(clamp(22px,3vh,44px) + var(--cut) * 2.6)}
}
.band-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0A1730}
.band-bg img{width:100%;height:100%;object-fit:cover;object-position:center 45%;
  opacity:.20;filter:blur(1.5px) saturate(.7)}
.band-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(9,20,44,.90),rgba(11,26,58,.84) 55%,rgba(16,38,84,.78))}
#contact .band-bg::after{background:
  linear-gradient(180deg,rgba(14,35,77,0) 62%,#0E234D 97%),
  linear-gradient(160deg,rgba(9,20,44,.90),rgba(11,26,58,.84) 55%,rgba(16,38,84,.78))}
/* services: diagonal running counter to the About slab */
#services .band-bg{clip-path:polygon(0 var(--cut),100% 0,100% calc(100% - var(--cut)),0 100%)}
/* cars: a shallow chevron dipping to a point, top and bottom */
#cars .band-bg{clip-path:polygon(0 0,50% var(--cut),100% 0,100% 100%,50% calc(100% - var(--cut)),0 100%)}
/* A fixed-depth cap keeps the same visible curve on sections of different heights.
   The multiplier converts edge depth to vertical radius for the 150% wide ellipse. */
#contact,.pg-contact-index .pg-faq{
  --band-ell:150%;--band-arc:clamp(84px,calc(60px + 3vw),118px);
  --band-ry:calc(var(--band-arc) * 17.485281);
}
/* Preserve a visible curve when gradient masks are unavailable. */
#contact .band-bg,.pg-contact-index .pg-faq::before{clip-path:ellipse(var(--band-ell) 100% at 50% 100%)}
@supports (mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000)){
  #contact .band-bg,.pg-contact-index .pg-faq::before{
    clip-path:none;
    /* One pixel of internal overlap joins the curved cap to the solid body. */
    -webkit-mask:
      radial-gradient(ellipse var(--band-ell) var(--band-ry) at 50% var(--band-ry),#000 100%,transparent 100%) top / 100% calc(var(--band-arc) + 1px) no-repeat,
      linear-gradient(#000,#000) bottom / 100% calc(100% - var(--band-arc)) no-repeat;
    mask:
      radial-gradient(ellipse var(--band-ell) var(--band-ry) at 50% var(--band-ry),#000 100%,transparent 100%) top / 100% calc(var(--band-arc) + 1px) no-repeat,
      linear-gradient(#000,#000) bottom / 100% calc(100% - var(--band-arc)) no-repeat;
  }
}
/* about: keep its parallel slab, calmer photograph */
.about-bg img{opacity:.26;filter:blur(1.5px) saturate(.7)}

#cars .car-foot{color:rgba(255,255,255,.78)}
#cars .car-foot b{color:#fff}
#contact .reach{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:none}
#contact .reach-tel{color:#fff}
#contact .reach-tel svg{fill:#9DBBFF}
#contact .reach-sub{color:rgba(255,255,255,.82)}
#contact .reach-note{color:rgba(255,255,255,.6)}
#contact .reach-alt .btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}
/* the card sits on the dark band, so it reads as glass-on-dark, not a light card */
#contact .napcard{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:#fff;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:none}
#contact .napcard .nrow{color:#fff;border-bottom-color:rgba(255,255,255,.16)}
#contact .napcard .nrow a{color:#fff}
#contact .napcard .nrow a.muted{color:rgba(255,255,255,.72)}
#contact .napcard .nrow svg{fill:#9DBBFF}
#contact .hours li .d{color:rgba(255,255,255,.78)}
#contact .hours li .h{color:#fff}
#contact .hours li.today{background:rgba(157,187,255,.16)}
#contact .hours li.today .d,#contact .hours li.today .h{color:#CFE0FF}
#contact .nap-note{color:rgba(255,255,255,.66)}
#contact .getdir{color:#fff;border-color:rgba(255,255,255,.5)}
#contact .getdir:hover{background:#fff;color:var(--cobalt)}
#contact .opennow.closed{background:rgba(255,120,130,.16);color:#FFB3B9}
#contact .opennow.open{background:rgba(60,220,150,.16);color:#7DE8B5}
#contact .area-lead{color:rgba(255,255,255,.7)}
#contact .area-links a{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);color:#fff}
#contact .area-links a:hover{border-color:#fff}

/* ---------- short viewports, any width ----------
   the vh clamps only fired on narrow screens, so a wide-but-short window overflowed. */
@media(max-height:860px) and (min-width:861px){
  :root{--cut:clamp(24px,3.2vw,56px)}
  #contact,.pg-contact-index .pg-faq{--band-arc:clamp(80px,calc(54px + 3.25vw),114px)}

  #cars .car-grid{gap:10px}
  #cars .sec-h{margin-bottom:clamp(6px,1.2vh,16px)}
  
  #cars .car-foot{font-size:var(--t-fine);margin-top:clamp(8px,1.4vh,18px)}
  #services .sec-h{margin-bottom:clamp(10px,1.8vh,24px)}
  .sp-full h2{font-size:clamp(1.5rem,3.6vh,2.4rem)}
  .sp-full .lead2{margin:10px 0 14px}
  .sp-label{margin-bottom:clamp(8px,1.4vh,18px)}
  .marque{width:clamp(36px,5.2vh,52px);height:clamp(36px,5.2vh,52px)}
  .marque img{width:clamp(18px,2.6vh,26px);height:clamp(18px,2.6vh,26px)}
  .marque-block{margin-top:clamp(12px,2vh,28px)}
  .marque-block + .marque-block{margin-top:clamp(10px,1.8vh,24px);padding-top:clamp(10px,1.6vh,22px)}
  .marque-lead{margin-bottom:clamp(6px,1vh,12px)}
  .sp-cta{margin-top:clamp(12px,2vh,28px)}
  .checks{gap:clamp(6px,1.1vh,12px)}
  .checks li{font-size:var(--t-body)}
}

/* ---------- tablet band, 861 to 1080: last so it wins ----------
   this range fell between the two compression tiers, too wide for the mobile rules
   (max-width:860) and too tall for the short-desktop ones (max-height:860), so it
   was getting desktop sizing with a stacked layout. */
@media(min-width:861px) and (max-width:1080px){

  #services{padding-top:calc(clamp(14px,2vh,34px) + var(--cut) * .55);
    padding-bottom:calc(clamp(14px,2vh,34px) + var(--cut) * .55)}
  #services .sec-h{margin-bottom:clamp(8px,1.4vh,18px)}

}
@media(min-width:861px) and (max-width:1000px){
  .sp-full{padding-top:clamp(16px,2.4vh,40px);padding-bottom:clamp(16px,2.4vh,40px)}
  .sp-full .split{gap:clamp(14px,2.2vh,26px)}
  .sp-full h2{font-size:clamp(1.25rem,3.1vh,1.7rem)}
  .sp-full .lead2{margin:8px 0 12px;max-width:56ch}
  .sp-full .checks{gap:7px}
  .sp-full .checks li{font-size:var(--t-fine)}
  .sp-full .checks .ck{width:20px;height:20px}
  .sp-full .sp-cta{margin-top:12px}
  .sp-label{margin-bottom:8px;font-size:var(--t-micro);padding:5px 10px}
  /* diagnostics also carries two rows of brand badges */
  .marque{width:clamp(30px,4.4vh,42px);height:clamp(30px,4.4vh,42px)}
  .marque img{width:clamp(15px,2.2vh,21px);height:clamp(15px,2.2vh,21px)}
  .marque.txt{font-size:var(--t-micro);padding:0 6px}
  .marque-row{gap:6px}
  .marque-group{margin-top:10px}
}

/* ---------- mobile refinements ---------- */
@media(max-width:860px){

  /* the family grid was a flat 2-up of equal tiles: give it a lead image and rhythm */
  .family-grid{gap:8px}
  
  /* full-width top and tail, four square tiles between: six items, no orphan row */
  .fam.wide{grid-column:auto}
  
  .fam .cap{font-size:var(--t-micro);padding:7px 2px 0;line-height:1.25;min-height:calc(1.55em + 7px)}

  /* the reviews rail shows a sliver of the neighbouring cards so it reads as a carousel */
  .rev-rail{grid-auto-columns:78% !important;gap:10px !important;
    padding-inline:11% !important;scroll-padding-inline:0 !important}
  /* snapping to centre is what produces the sliver of the next card either side */
  .rev-rail>.rev{scroll-snap-align:center}

  /* the trust strip fits one row */
  .close .close-meta{flex-wrap:nowrap;gap:5px;overflow-x:auto;scrollbar-width:none;
    justify-content:flex-start;padding-inline:16px;margin-inline:-16px}
  .close .close-meta::-webkit-scrollbar{display:none}
  .close .close-meta > span{flex:0 0 auto;font-size:var(--t-micro);padding:7px 10px;letter-spacing:.04em}

  /* services and company sit side by side rather than stacking the footer out, and
     the contact details come straight after the address rather than under the lists */
  footer .cols{grid-template-columns:1fr 1fr;gap:22px 18px}
  footer .cols>div:nth-child(1){grid-column:1 / -1;order:1}
  footer .cols>div:nth-child(4){grid-column:1 / -1;order:2}
  footer .cols>div:nth-child(2){order:3}
  footer .cols>div:nth-child(3){order:4}
  .fcontact .ftel{margin-top:12px}

  /* the contact arc was eating a third of the screen before the heading */
  #contact{padding-top:calc(clamp(20px,2.6vh,38px) + var(--cut) * 0.9)}
  #contact,.pg-contact-index .pg-faq{
    --band-ell:260%;--band-arc:clamp(42px,calc(36px + 1.5vw),50px);
    --band-ry:calc(var(--band-arc) * 53.575290);
  }
}

/* ---------- mobile and tablet: the four split sections ----------
   Stacked, these read as a photograph with loose text under it. Giving the copy a
   surface turns each one back into a deliberate block. */
@media(max-width:1220px){
  .ptile{min-height:clamp(300px,46dvh,440px)}
  .sp-full .split{gap:0}
  .sp-full .sp-media,#why .geo-carousel{border-radius:var(--r-lg) var(--r-lg) 0 0;
    box-shadow:none;width:100%;max-width:none}
  .sp-full .sp-copy{background:var(--surface);border:1px solid var(--line);border-top:0;
    border-radius:0 0 var(--r-lg) var(--r-lg);padding:clamp(11px,1.8vh,16px) 15px clamp(13px,2vh,18px);
    width:100%;box-shadow:var(--soft-sm)}
  .sp-full .sp-label{margin-bottom:9px}
  .sp-full .checks{width:100%;margin-inline:0}
  .sp-full .checks li{text-align:left}
  .sp-full .sp-cta{flex-direction:column;align-items:stretch}
  .sp-full .sp-cta .btn,.sp-full .sp-cta .mag{width:100%;justify-content:center}
  /* the brand badges sit in a panel so they stop reading as loose chips */
  #diagnostics .marque-block{background:var(--bg2);border:1px solid var(--line);
    border-radius:var(--r-md);padding:clamp(7px,1.1vh,11px) 9px;margin-top:clamp(6px,1vh,10px)}
  #diagnostics .marque-lead{margin-bottom:clamp(5px,.9vh,8px)}
  #diagnostics .marque-grid{gap:5px}
  #diagnostics .sp-cta{margin-top:clamp(6px,.9dvh,11px)}
  #diagnostics .lead2{margin-bottom:clamp(5px,.9dvh,11px)}
}

/* three stacked premises cost more height than the swipe rail did, so on a short
   phone the rows compress rather than the section overflowing */

/* ---------- mobile: paying for the copy card and the photo-led premises ----------
   Both of those blocks are taller than what they replaced, so the photographs give the
   height back rather than the sections overflowing. */

@media(max-height:780px) and (max-width:860px){  .sp-full .sp-copy{padding:10px 13px 12px}
  .sp-full h2{font-size:var(--t-body)}
  .sp-full .lead2{margin:6px 0 9px}
  .sp-full .checks{gap:6px}
  .sp-full .checks li{font-size:var(--t-micro);line-height:1.32}
  .sp-full .sp-cta{margin-top:10px;gap:7px}
  #diagnostics .marque-block{padding:6px 8px;margin-top:6px}

}

/* diagnostics carries two badge panels the other splits do not, 375px of the copy card
   on a phone, so the badges are what pay for it */
@media(max-width:860px){
  #diagnostics .marque{width:33px;height:33px}
  #diagnostics .marque img{width:17px;height:17px}
  #diagnostics .marque.txt{font-size:var(--t-micro);padding:0 5px}
  #diagnostics .marque-grid{gap:4px}
  #diagnostics .marque-lead{font-size:var(--t-micro);margin-bottom:6px}
}
@media(max-height:780px) and (max-width:860px){
  #diagnostics .marque{width:29px;height:29px}
  #diagnostics .marque img{width:15px;height:15px}
}

/* ---------- split sections: the label is a sibling of the photograph now ----------
   Desktop keeps it directly above the copy in the text column, via explicit placement.
   The copy in that column is centred (DESKTOP CORRECTIONS, below), so the badge centres
   with it: pinned to the column's left edge it read as belonging to nothing.
   On a phone it sits above the photograph, which is what the section reads as. */
@media(min-width:1221px){
  .sp-full .split{grid-template-rows:auto auto}
  .sp-full .sp-media,.sp-full .geo-carousel{grid-column:1;grid-row:1 / span 2;align-self:center}
  .sp-full .sp-label{grid-column:2;grid-row:1;justify-self:center;align-self:end}
  .sp-full .sp-copy{grid-column:2;grid-row:2;align-self:start}
  /* bodywork runs the other way round */
  #bodywork .sp-media{grid-column:2}
  #bodywork .sp-label,#bodywork .sp-copy{grid-column:1}
}
@media(max-width:1220px){
  /* auto placement plus order: label, photograph, copy, whatever the DOM order is */
  .sp-full .split>*{grid-column:1;grid-row:auto}
  .sp-full .sp-label{order:0;justify-self:center}
  .sp-full .sp-media,.sp-full .geo-carousel{order:1}
  .sp-full .sp-copy{order:2}
  .sp-full .sp-label{margin-bottom:clamp(8px,1.4vh,14px)}
}

/* ---------- the arcs ----------
   --bg and --band are only nine points apart, so an arc filled with one sitting on the
   other has almost no edge to read. A hairline along the curve makes the shape legible
   without touching the palette, and the depth now scales the same way at every width. */
/* every other boundary on this page is a shear, so these are too. the block carries the
   neighbouring ground and is cut to a wedge, giving a clean diagonal seam. */
.sec-edge{border-radius:0 !important;border:0;
  clip-path:polygon(0 0,100% 0,100% 100%)}
.sec-edge.up{clip-path:polygon(0 100%,100% 100%,100% 0)}
#why .sec-edge{clip-path:polygon(0 0,100% 0,100% 100%)}
@media(max-width:860px) and (min-height:721px){
  #bodywork,#why{--edge-h:clamp(34px,9vw,62px)}
}

/* ---------- per-image crop for the cars mosaic ----------
   These are portrait workshop shots in landscape cells, so a flat 50% crop cuts the car
   out of half of them. Each is anchored on where its subject actually sits in frame. */
.car-grid .car:nth-child(1) img{object-position:center 54%}
.car-grid .car:nth-child(2) img{object-position:center 55%}
.car-grid .car:nth-child(3) img{object-position:center 38%}
.car-grid .car:nth-child(4) img{object-position:center 59%}
.car-grid .car:nth-child(5) img{object-position:center 28%}
.car-grid .car:nth-child(6) img{object-position:center 62%}
.car-grid .car:nth-child(7) img{object-position:center 32%}
.car-grid .car:nth-child(8) img{object-position:center 37%}

/* The phone grid puts the same photographs in shallower, squarer cells, so the crop
   that read correctly in the desktop mosaic cuts the roofline there. Six re-anchored
   positions, one per cell that survives on a phone. */
@media(max-width:860px){
  .car-grid .car:nth-child(1) img{object-position:center 50%}
  .car-grid .car:nth-child(2) img{object-position:center 52%}
  .car-grid .car:nth-child(3) img{object-position:center 44%}
  .car-grid .car:nth-child(4) img{object-position:center 55%}
  .car-grid .car:nth-child(5) img{object-position:center 36%}
  .car-grid .car:nth-child(6) img{object-position:center 58%}
}

@media(max-width:860px){

  /* the family tiles were a full-width lead and tail around two square pairs, which ran
     tall. six equal tiles is a good deal smaller and keeps the captions readable. */
  /* a full-width opener, two pairs, a full-width closer. held in from the page edges
     so the photographs do not fill the whole screen as you scroll past. */
  .family-grid{gap:7px;
    margin:clamp(14px,2.4vh,28px) auto 0;
    width:calc(100% - clamp(18px,7vw,42px));max-width:none}

  .fam .cap{font-size:var(--t-micro);padding:6px 2px 0;line-height:1.2;min-height:calc(1.5em + 6px)}

  /* the four split cards take more of the screen: the photograph was the thing giving
     height back, and there is room for it now */
  /* fleet carries the longest copy of the four, so its photograph runs a little shorter */

  /* the trust strip centres in its own gap rather than sitting left in a scroller */
  .close{padding-block:clamp(18px,3.4vh,34px);display:grid;align-content:center}
  .close .close-meta{justify-content:safe center;margin-inline:0;padding-inline:0;
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:5px}
  .close .close-meta::-webkit-scrollbar{display:none}
}

/* Jaguar and Land Rover have no usable mark, so they render as word chips. They must
   not inherit the fixed square width of the icon badges or the word gets cut off. */
.marque.txt{width:auto;min-width:0;padding-inline:9px;white-space:nowrap}
@media(max-width:860px){
  #diagnostics .marque.txt{width:auto;padding-inline:7px}
}
@media(max-height:780px) and (max-width:860px){
  #diagnostics .marque.txt{width:auto;padding-inline:6px}
}

/* ---------- mobile: remaining refinements ---------- */
@media(max-width:1220px){
  /* the price rail shows more of the cards either side */
  .price-tiles{grid-auto-columns:87% !important;gap:10px !important;
    scroll-padding-inline:6.5% !important;padding-inline:6.5% !important}
  .price-tiles>.ptile{scroll-snap-align:center}

  /* the services band takes the same pronounced shear the About band has */
  #services{--cut:clamp(46px,11vw,74px)}
  #services{padding-top:calc(clamp(14px,2.2vh,30px) + var(--cut) * .8);
    padding-bottom:calc(clamp(14px,2.2vh,30px) + var(--cut) * .8)}

  /* every split section centres its copy, bullets included */
  .sp-full .sp-copy{text-align:center}
  .sp-full .checks{width:fit-content;max-width:100%;margin-inline:auto}
  .sp-full .checks li{text-align:left}
  .sp-full .sp-label{justify-self:center}
  #diagnostics .marque-block,#diagnostics .marque-lead{text-align:center}
}

/* the smallest and shortest phones drop the price from the tile: the name is what is
   being scanned, and the modal carries the number */

/* the older :last-child rule forced a 16/10 box on the final family tile, making it
   three rows tall next to one-row siblings. it is a wide two-row anchor instead. */

/* ---------- mobile: the price list ----------
   Three attempts at this section were all the same idea: put the seven jobs in a grid
   of tiles and make the tiles nicer. On a 390px screen a grid of tiles is the wrong
   object however it is styled - seven boxes of equal weight, each too small to say
   anything, and the prices (the only reason anyone reads this section) buried inside
   them. So this is not a grid. It is the garage's price list: one photographed card
   for the job that pays the bills, then a ruled column of jobs with the price hard
   right, the way a menu or a tariff board works. Prices line up, the eye scans one
   column, and the whole thing grows and shrinks with the screen instead of wrapping. */

/* ---------- mobile: the rest of this pass ---------- */
@media(max-width:860px){
  /* the contact heading breaks in two */
  #contact .h2-br{display:inline}

  /* the recovery line leads with its icon */
  .reach-recover{flex-wrap:nowrap;justify-content:flex-start;text-align:left;gap:9px}
  .reach-recover svg{margin-top:2px;align-self:flex-start}

  /* the trust strip reads larger and sits closer to the block above it */
  .close{padding-top:clamp(10px,1.6vh,20px);padding-bottom:clamp(18px,3vh,32px)}
  /* The four proofs are one line, phone included. Wrapped they read as two half-rows
     of facts; at these metrics the set fits a 360px screen, and on anything narrower
     the row scrolls the remainder rather than breaking. */
  .close .close-meta{flex-wrap:nowrap;justify-content:safe center;gap:5px;
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .close .close-meta::-webkit-scrollbar{display:none}
  .close .close-meta > span{flex:0 0 auto;font-size:var(--t-micro);
    padding:8px clamp(7px,2.2vw,12px);letter-spacing:.04em}

  /* the four split photographs take the room the section has, not a fixed slab: on a
     tall phone that is a good deal more than before, on a 640px screen it is less */

  /* the bullet rows sit as close to the copy as the fleet card's do */
  .sp-full .checks{gap:8px;margin-top:0}
  .sp-full .lead2{margin-bottom:11px}
  .sp-full .checks li{gap:9px}

  /* diagnostics: the systems note reads as body copy at the foot of the card, and the
     brand marks are big enough to actually recognise */
  #diagnostics .marque{width:clamp(31px,4.6dvh,42px);height:clamp(31px,4.6dvh,42px)}
  #diagnostics .marque img{width:56%;height:56%}
  #diagnostics .marque.txt{width:auto;padding-inline:8px;font-size:var(--t-micro)}
  #diagnostics .marque-grid{gap:5px}
  #diagnostics .sp-cta{margin-top:clamp(6px,.9dvh,11px)}
  #diagnostics .lead2{margin-bottom:clamp(5px,.9dvh,11px)}
  #diagnostics .marque-block+.marque-block{margin-top:clamp(9px,1.4dvh,16px)}
  #diagnostics .lead2{margin-bottom:clamp(9px,1.4dvh,16px)}

  /* the family tiles are taller */
  }

/* ---------- mobile: the last of the height ----------
   Four sections still ran a little past the viewport on a normal phone. The copy in
   the split sections was set at desktop proportions, so the lead paragraph alone was
   costing three tall lines; everything here is trimmed rather than cut. */
@media(max-width:860px){
  
  .sp-full .checks li{font-size:var(--t-fine);line-height:1.4}
  .sp-full .sp-copy h2{font-size:clamp(1.34rem,5.6vw,1.86rem);line-height:1.14}
  #why .geo-cta{margin-top:clamp(8px,1.2dvh,14px)}

  #servicing .price-note{font-size:var(--t-micro);line-height:1.45;
    margin-top:clamp(7px,1.1dvh,12px)}
  #servicing .sec-h{margin-bottom:clamp(9px,1.5dvh,16px)}

  #servicing .ptile .pd{font-size:var(--t-fine);line-height:1.45}
  #servicing .ptile .mag{font-size:var(--t-micro);line-height:1.4;
    margin-top:clamp(7px,1.1dvh,12px)}
  #servicing .cd-band{padding:clamp(9px,1.4dvh,14px) clamp(11px,1.7vw,15px);
    font-size:var(--t-fine);line-height:1.4}
  #servicing{padding-top:clamp(10px,1.6dvh,22px);padding-bottom:clamp(10px,1.6dvh,22px)}
  #servicing .rail-dots{margin-top:clamp(6px,1dvh,12px)}  #why .checks{gap:7px}
  #fleet .checks{gap:7px}

  #diagnostics .marque-grid{gap:4px}
  #diagnostics .marque{width:clamp(29px,4.2dvh,40px);height:clamp(29px,4.2dvh,40px)}
  #diagnostics .marque-lead{margin-bottom:clamp(5px,.9dvh,9px)}
  #diagnostics .marque-block+.marque-block{margin-top:clamp(8px,1.2dvh,14px)}
}
/* ---------- short phones: one compression tier ----------
   The sizes above are written for a 390-430px-wide phone with 844-932px of height,
   which is what almost everyone is holding. A 640-700px screen cannot carry that and
   still keep each section inside one viewport, so everything that is merely generous
   — section headers, leads, paddings, the price rail — steps down together rather
   than each section inventing its own shrunken variant. */
@media(max-width:860px) and (max-height:780px){
  .sp-full,section{--callbar-h:48px}
  .sec-h{margin-bottom:clamp(10px,1.6dvh,18px)}

  .sec-h .eyebrow{margin-bottom:6px}

  #servicing{padding-top:10px;padding-bottom:10px}
  #servicing .price-tiles .tile{padding:clamp(10px,1.6dvh,15px) 13px}
  #servicing .price-note{font-size:var(--t-micro);line-height:1.4;margin-top:9px}
  #servicing .cd-band{padding:10px 12px}

  #family{padding-top:20px;padding-bottom:34px}
  
  #reviews{padding-top:20px;padding-bottom:34px}

  .sp-full .lead2{margin-bottom:9px}
  .sp-full .checks li{font-size:var(--t-micro)}
  .sp-full .sp-cta,#why .geo-cta{margin-top:10px}

  .sp-full{padding-bottom:calc(var(--callbar-h) + 8px)}
  .sp-full .sp-copy h2{font-size:clamp(1.2rem,5vw,1.5rem)}
  .sp-full .checks{gap:6px}
  .sp-full .checks li{font-size:var(--t-micro);line-height:1.35}
  #why .geo-cta{margin-top:8px;gap:8px}
  #why .geo-cta .btn{padding:.55em 1em;font-size:.8rem}

  #servicing .ptile{padding:clamp(9px,1.5dvh,14px) 12px}
  #servicing .ptile h3{font-size:var(--t-fine)}
  #servicing .ptile .p-list li{font-size:var(--t-micro);line-height:1.35}
  #servicing .cd-band{padding:9px 11px;font-size:var(--t-micro)}
  #servicing .price-note{font-size:var(--t-micro);margin-top:7px}

  #services{padding-top:clamp(26px,4.4dvh,42px);padding-bottom:clamp(26px,4.4dvh,42px)}

  #servicing .ptile .pd{font-size:var(--t-micro);line-height:1.4}
  #servicing .ptile .mag{font-size:var(--t-micro);margin-top:6px}
  #servicing .ptile .pv{font-size:1.2rem}

  #servicing .ptile .pbadge{font-size:var(--t-micro);padding:3px 8px}
  #servicing .ptile h3{font-size:var(--t-fine)}
  #servicing .ptile .pk{font-size:var(--t-micro)}
  #servicing .ptile{padding:clamp(8px,1.3dvh,12px) 11px}
  #servicing .cd-band{padding:8px 10px;font-size:var(--t-micro)}

  #servicing .price-note{font-size:var(--t-micro);line-height:1.35}
}

/* ---------- the marque walls become one scrollable row ----------
   Two blocks of twelve badges wrapping over three lines was the tallest thing in the
   diagnostics section and the least interesting. One row that runs off the edge reads
   as a wall of marques you can push through, and costs a fifth of the height. It is
   the same gesture as the price rail and the review rail, so it needs no instructions. */
.marque-grid{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:2px}
.marque-grid::-webkit-scrollbar{display:none}
/* a nowrap rail inside a grid column will size the column to its content unless the
   column is told it may shrink */
.marque-block,.marque-grid{min-width:0;max-width:100%}
.sp-copy,.split{min-width:0}
.marque{scroll-snap-align:start}
.marque-lead,.marque-block{text-align:left}

/* the systems note is the one piece of plain english in the block: it stays */

/* ---------- the trust strip sits closer to the block above it ---------- */
.close{padding-top:clamp(8px,1.2vw,18px)}
.close-meta{margin-top:0}

@media(max-width:860px){
  /* the four split headers break in two so the eye gets a shape, not a paragraph */
  #diagnostics .h2-br,#bodywork .h2-br,#fleet .h2-br,#why .h2-br{display:inline}

  /* the family bento closes with a line, the way the cars and reviews grids do */
  .fam-foot{margin-top:clamp(10px,1.8dvh,20px);font-size:var(--t-fine)}

  /* the workshop photographs take the room the section was leaving empty */
  #cars .car img{aspect-ratio:3/2}
}

.sp-foot{margin-top:clamp(12px,2vh,22px);color:var(--ink3);text-align:center;
  font-size:var(--t-fine);line-height:1.5;max-width:60ch;margin-inline:auto}
.fam-foot{margin-top:clamp(12px,2vh,26px);color:var(--ink2);text-align:center;
  font-size:var(--t-fine);line-height:1.5;max-width:var(--measure);
  margin-left:auto;margin-right:auto}
.fam-foot b{color:var(--ink);font-weight:700}

/* ---------- the tab row clears the fixed call bar ----------
   The call bar is fixed to the bottom of the window, so on a phone it sat straight on
   top of the fifth tab. The row now carries the bar's measured height, which keeps all
   five inside the first screen whatever the bar wraps to. */
@media(max-width:820px){
  .hero-tabs{padding-bottom:calc(var(--rail-pb) + var(--callbar-h,54px) + 10px)}
}

/* the price list must still land inside one screen with the call bar over it */
@media(max-width:860px){
  #services{padding-top:calc(clamp(10px,1.6dvh,24px) + var(--cut) * .62);
    padding-bottom:calc(clamp(10px,1.6dvh,24px) + var(--cut) * .62)}
  #services .sec-h{margin-bottom:clamp(10px,1.6dvh,18px)}

}

/* the family bento pays for its closing line */
@media(max-width:860px){
    #family .sec-h{margin-bottom:clamp(9px,1.5dvh,16px)}
  
  .fam-foot{margin-top:clamp(8px,1.3dvh,16px);font-size:var(--t-fine);line-height:1.45}
  
}
@media(min-width:861px){
  .fam-foot{margin-top:clamp(10px,1.6vh,20px)}
}

@media(max-width:860px){

  #servicing .cd-band{padding:clamp(8px,1.25dvh,12px) clamp(10px,1.6vw,14px)}
  #servicing .rail-dots{margin-top:clamp(5px,.85dvh,10px)}
}

@media(max-width:860px){
  #services{padding-top:calc(clamp(8px,1.3dvh,20px) + var(--cut) * .55);
    padding-bottom:calc(clamp(8px,1.3dvh,20px) + var(--cut) * .55)}

}

@media(max-width:860px) and (max-height:660px){
  
  #servicing .price-note{font-size:var(--t-micro);line-height:1.3;margin-top:5px}
  #servicing .cd-band{padding:7px 9px;font-size:var(--t-micro)}
  #servicing .rail-dots{margin-top:4px}
}

/* the marque blocks read left-aligned again now that they are rails, not walls:
   a centred row that scrolls has no fixed left edge for the eye to return to */
#diagnostics .marque-block,
#diagnostics .marque-lead{text-align:left}
#diagnostics .marque-grid{justify-content:flex-start}

/* both marque rails cut at the same point on a phone.
   They already share a container and a fade, but the text badges were wider than the
   icon badges, so the second rail's pitch differed and its cut landed mid-badge in a
   different place. Every badge is now the same square, wordmarks included. */
@media(max-width:860px){
  #diagnostics .marque.txt{width:clamp(29px,4.2dvh,40px);padding:0 3px;
    white-space:normal;text-align:center;line-height:1.05;letter-spacing:.02em;
    font-size:var(--t-micro);overflow:hidden}
  #diagnostics .marque-grid{gap:5px}
  #diagnostics .sp-cta{margin-top:clamp(6px,.9dvh,11px)}
  #diagnostics .lead2{margin-bottom:clamp(5px,.9dvh,11px)}
}

/* a small, short phone: the hero copy, the arch clearance and the tab row (which now
   also carries the floating call bar) do not all fit at full size */
@media(max-width:560px) and (max-height:720px){
  .hero-inner{padding-top:calc(93px + 4px);padding-bottom:calc(var(--dome) + 6px)}
  .hero h1{font-size:clamp(1.66rem,7.2vw,2.1rem)}
  .hero .lede{font-size:var(--t-fine);line-height:1.45;margin:10px 0 14px}
  .hero-meta{margin-bottom:10px;gap:6px 12px}
  .hero-ask{gap:8px}
}

/* ---------- the hero arch is the contact arch ----------
   Measured, not guessed: the contact band sags 103px at 1440 and 41px at 390 across a
   full-width chord. The hero photograph is a different height, so the same visual arc
   needs a different ellipse radius to land on the same sag. These two values were
   solved from r = 0.5 / sqrt(1 - (1 - sag/height)^2) at each breakpoint. */
.hero{--arc:100%}
@media(max-width:860px){ .hero{--arc:149%;--dome:clamp(30px,10.6vw,58px)} }

/* ---------- the cars say what they are ---------- */
/* ---------- the car label reads under its photograph ----------
   A scrim over a workshop photograph is legible on a wide tile and marginal on a small
   one, and it costs the bottom third of the image. Under the tile it is always legible
   and the whole photograph shows. Same treatment as the family captions, at every
   width: one wall, one rule. */
.car{background:transparent;box-shadow:none;overflow:visible;border-radius:0}
.car img{flex:0 0 auto;aspect-ratio:3/2;border-radius:var(--r-lg);box-shadow:var(--soft-sm)}
.car:hover img{transform:none}
.car .cap{position:static;padding:7px 3px 0;background:none;pointer-events:auto;
  color:rgba(255,255,255,.82);font-family:var(--font-sans);font-size:var(--t-micro);
  letter-spacing:.02em;line-height:1.3}
/* the two feature tiles are two columns wide, so they fill the height the singles set
   rather than standing twice as tall as their neighbours */
@media(min-width:901px){
  .car.big img,.car.wide img{aspect-ratio:auto;flex:1 1 0;min-height:0;height:100%}
}

@media(max-width:860px){
  .fam .cap,.car .cap{text-align:center;justify-content:center}
  .car .cap{padding:20px 9px 7px;font-size:var(--t-micro)}

  /* every photograph in the family bento is taller: the section was leaving up to
     100px of a 932px screen unused, so the rows take it */

  #family{padding-bottom:clamp(30px,4.6dvh,52px)}

  /* the button is a button again, not a hairline */
  .cd-cta{min-width:clamp(148px,52vw,210px)}
  /* the band's copy centres with the button under it */
  .cd-band>span:not(.cd-cta){text-align:center}
}

/* short phones: the family rows step back down (this has to sit last, or the
   taller ≤860px rule above wins on source order) */
/* ---------- services accordion ----------
   The panel is a sibling of the card, so on the desktop bento it spans the full row
   under whichever card is open, and on the mobile price list it simply follows the row. */
.acc-panel{overflow:hidden;height:0;
  transition:height .42s cubic-bezier(.32,.72,0,1)}
/* the contents settle in behind the box rather than being squashed by it: the panel
   opens, and the copy rises and fades a beat later. Closing runs faster and without
   the delay so the box never waits on the text. */
.acc-panel>*{opacity:0;transform:translateY(-8px);
  transition:opacity .2s ease,transform .2s cubic-bezier(.32,.72,0,1)}

.acc-panel>*:first-child{margin-top:0}
.acc-desc{color:rgba(255,255,255,.82);font-size:var(--t-fine);line-height:1.55;margin:0}
.acc-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.acc-list li{display:flex;gap:9px;align-items:flex-start;
  color:rgba(255,255,255,.8);font-size:var(--t-fine);line-height:1.45}
.acc-list li svg{width:15px;height:15px;flex:0 0 auto;margin-top:3px;fill:#7BE39B}
.acc-note{margin:14px 0 0;padding:12px 14px;border-radius:var(--r-md);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.78);font-size:var(--t-fine);line-height:1.5}
.acc-actions{display:flex;flex-wrap:nowrap;gap:10px;margin-top:16px}
.acc-actions .btn{flex:1 1 0;min-width:0;justify-content:center;white-space:nowrap}
.acc-actions .btn-ghost{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.acc-actions .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ---------- if a section offers two things, they sit on one row ---------- */
.sp-cta,.geo-cta,.sp-full .sp-cta{flex-direction:row;flex-wrap:nowrap;align-items:stretch}
.sp-cta>.mag,.geo-cta>.mag{flex:1 1 0;min-width:0;display:flex}
.sp-cta>.btn,.geo-cta>.btn,.sp-cta .mag>.btn,.geo-cta .mag>.btn{
  flex:1 1 0;min-width:0;justify-content:center;white-space:nowrap}
.sp-cta .btn-ghost,.geo-cta .btn-ghost{border-color:var(--line2)}

@media(max-width:860px){
  .acc-panel{padding-inline:2px}
  .acc-desc{font-size:var(--t-fine);line-height:1.5}
  .acc-list{margin-top:10px;gap:7px}
  .acc-list li{font-size:var(--t-micro)}
  .acc-note{margin-top:11px;padding:10px 12px;font-size:var(--t-micro)}
  .acc-actions{margin-top:13px;gap:8px}
  .acc-actions .btn{padding:.55em .8em;font-size:.78rem}
  .sp-cta .btn,.geo-cta .btn{padding:.55em .8em;font-size:.8rem}

  /* the tick sits on the first line of the sentence, not centred against both */
  .cd-band{align-items:start}
  .cd-band>svg{margin-top:1px}
  /* the button matches the width of the Get a quote button in the card above it */
  .cd-cta{width:100%;min-width:0}

  /* the hero tab row sits a little lower under the arch */
  .hero-tabs{padding-top:clamp(14px,2.4dvh,26px)}
}

@media (prefers-reduced-motion:reduce){
  .acc-panel,.acc-panel>* {transition:none}
  .acc-panel>*{opacity:1;transform:none}
}

/* ---------- the four split sections use the room they were leaving ----------
   Each was centring its column inside the viewport and leaving 70-150px of a 932px
   screen empty above and below. The photograph takes it. */
@media(max-width:860px){
  /* bodywork's bullets sat 48px under its lead where fleet's sat 24px: one rule for
     all four rather than a per-section margin */
  #bodywork .checks,#fleet .checks,#why .checks{margin-top:0}
  .sp-full .lead2{margin-bottom:clamp(12px,1.9dvh,20px)}

  /* diagnostics gained a CTA row, so the marque blocks give the height back */
  #diagnostics .marque-block{padding:6px 8px}
  #diagnostics .marque-lead{margin-bottom:4px}
  #diagnostics .lead2{margin-bottom:clamp(9px,1.4dvh,15px)}
  #diagnostics .sp-cta{margin-top:clamp(9px,1.4dvh,15px)}
}

/* the photograph is height-led on a phone, not ratio-led: a 16/10 box could never grow
   past the column width however high the cap was, which is why the sections still had
   empty space above and below. object-fit crops the sides instead. */
@media(max-width:860px){
  /* two CTAs stay on one row by wrapping their own labels rather than overflowing */
  .sp-cta .btn,.geo-cta .btn,.acc-actions .btn{white-space:normal;line-height:1.2;
    text-align:center;padding-inline:.7em}
  .sp-cta,.geo-cta{gap:8px}
}
@media(max-width:860px) and (max-height:780px){

  /* diagnostics carries two marque rails, a note and now a CTA pair */
  #diagnostics .marque-block{padding:5px 7px}
  #diagnostics .marque-lead{font-size:var(--t-micro);margin-bottom:3px}
  #diagnostics .lead2{margin-bottom:8px}
  #diagnostics .sp-cta{margin-top:8px}
  #diagnostics .sp-cta .btn{font-size:.72rem;padding:.5em .6em}
}
@media(min-width:861px) and (max-height:780px){

  #diagnostics .sp-cta{margin-top:14px}
}

/* the two-button rows must be allowed to shrink, or a nowrap flex row pushes the page
   wider than the viewport on a 320px screen */
.sp-cta,.geo-cta,.acc-actions{max-width:100%;min-width:0}
.sp-cta>*,.geo-cta>*,.acc-actions>*{min-width:0}

@media(max-width:860px){
  /* diagnostics is the densest of the four splits: two rails, a note and a CTA pair */
  #diagnostics .marque{width:clamp(27px,3.9dvh,38px);height:clamp(27px,3.9dvh,38px)}
  #diagnostics .marque.txt{width:clamp(27px,3.9dvh,38px)}}
@media(min-width:861px) and (max-height:780px){
  #diagnostics .marque{width:38px;height:38px}
  #diagnostics .marque-block{margin-top:10px}
}

@media(max-width:860px) and (max-height:660px){  #diagnostics .marque-block+.marque-block{margin-top:6px}
}

/* the family bento still had 46-63px spare: the four middle photographs take it */
/* ---------- the CTA pairs are a full-width pair, at full size ----------
   They were on one row already, but .sp-cta was shrink-to-fit and centred, so the two
   buttons only spanned 277px of a 343px column and read as undersized. They now split
   the column and keep the normal button metrics. */
.sp-full .sp-cta,#why .geo-cta{width:100%;max-width:100%;margin-inline:0;
  display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
.sp-full .sp-cta>*,#why .geo-cta>*{min-width:0;display:flex}
.sp-full .sp-cta .btn,#why .geo-cta .btn{width:100%;min-width:0;justify-content:center}

@media(max-width:860px){
  /* full-size buttons again: the shrunken type was a fix for an overflow that the
     full-width row no longer has */
  .sp-full .sp-cta .btn,#why .geo-cta .btn{font-size:.92rem;padding:.72em .6em;
    white-space:normal;line-height:1.2;text-align:center}
  .sp-full .sp-cta .btn .ic,#why .geo-cta .btn .ic{display:none}

  /* the recovery line centres as one unit, icon inline with the sentence */
  .reach-recover{flex-wrap:nowrap;justify-content:center;text-align:center;gap:9px;
    align-items:center}
  .reach-recover svg{margin-top:0;align-self:center;flex:0 0 auto}

  /* the button matches the Get a quote button in the price card above it */
  .cd-cta{width:min(100%,15rem);min-width:0}

  /* the three photo cards' media is height-led */

  /* the three photo cards use the height the sections were still leaving empty */
  /* one gap between the four split sections rather than three different ones */
  #diagnostics,#bodywork,#fleet,#why{
    --pad-y:clamp(14px,2.4dvh,30px);
    padding-top:var(--pad-y);
    padding-bottom:calc(var(--pad-y) + var(--callbar-h,54px))}
  #bodywork,#why{padding-top:calc(var(--edge-h) + var(--pad-y))}
  #bodywork{padding-bottom:calc(var(--edge-h) + var(--pad-y) + var(--callbar-h,54px))}
}

/* the middle four family photographs are square. Only on a genuinely narrow grid:
   at tablet widths a square cell is 350px tall and the section triples in height.
   The two full-width cells go wide and short so the four squares fit the screen. */

/* short phones: the three photo cards give the height back. This has to sit after the
   ≤860px sizes above, which would otherwise win on source order. */
@media(max-width:860px) and (max-height:780px){  #bodywork{--pad-y:clamp(8px,1.4dvh,18px)}
  #bodywork .lead2{margin-bottom:clamp(8px,1.2dvh,13px)}
  .sp-full .sp-cta .btn,#why .geo-cta .btn{font-size:.84rem;padding:.62em .5em}
}

/* ---------- family bento, mobile: one wide, four square, one wide ----------
   The four middle photographs are square. The two full-width cells are the first and
   the last: .wide is one of the middle four here, not a full-width cell, and .zoomed
   is the closing one - naming that only matters because the desktop grid uses those
   classes for a different arrangement. */

/* an older cap held the fleet photograph at 21dvh, so raising its height did nothing */
@media(max-width:860px){
  /* the pair splits the row evenly: the magnetic wrapper needs the same basis as the
     bare button beside it */
  .sp-full .sp-cta .btn,#why .geo-cta .btn{width:100%}

  /* the same width as the Get a quote button in the price card above it */
  .cd-cta{width:min(100%,57vw)}
}

/* a short desktop window: the family bento's rows scale rather than collapse.
   (An earlier auto-track here zeroed the whole grid, because the tiles have no
   intrinsic height - their images are height:100%.) */
/* ---------- mobile: close the gaps between sections ----------
   Every section is its own 100dvh panel, so the space a reader sees between two of
   them is the bottom slack of one plus the top slack of the next - 190-240px on a
   932px screen. Most of that was padding rather than breathing room: the decorative
   wedge clearance, the call-bar clearance and a generous --pad-y stacked up. The
   photographs take back what the padding gives up. */
@media(max-width:860px){
  #servicing{padding-top:clamp(6px,1dvh,14px);padding-bottom:clamp(6px,1dvh,14px)}
  #servicing .sec-h{margin-bottom:clamp(8px,1.3dvh,15px)}

  #diagnostics,#bodywork,#fleet,#why{--pad-y:clamp(8px,1.3dvh,18px)}
  #bodywork,#why{--edge-h:clamp(38px,7vw,64px)}

  /* the photographs absorb the height the padding released */
}

/* ---------- the section badges ----------
   Diagnostics / Bodywork / Fleet / Wheel alignment were set at .56-.64rem mono with
   wide tracking, which at phone sizes is under 9px and effectively unreadable. They
   are the only thing naming the section, so they carry a real type size now. */
.sp-full .sp-label{font-size:var(--t-fine);letter-spacing:.12em;
  padding:9px 18px;border-width:1.5px}
@media(max-width:860px){
  .sp-full .sp-label{font-size:var(--t-fine);letter-spacing:.1em;
    padding:8px 15px;margin-bottom:clamp(9px,1.5dvh,16px)}
}
@media(max-width:860px) and (max-height:780px){
  .sp-full .sp-label{font-size:var(--t-micro);padding:6px 13px;
    margin-bottom:clamp(6px,1.1dvh,12px)}
}

@media(min-width:861px) and (max-height:780px){
  .sp-full .sp-label{font-size:var(--t-micro);padding:7px 15px;margin-bottom:12px}
  #diagnostics .marque-block{margin-top:7px}
  #diagnostics .lead2{margin-bottom:10px}
  #diagnostics .marque-lead{margin-bottom:5px}
}

/* ---------- family bento, mobile: the single source of truth ----------
   The four middle photographs are square. This kept coming undone because twenty-five
   separate rules had accumulated for this one grid across the file, several of them
   setting a fixed grid-auto-rows, which pins a cell to the track height and makes
   aspect-ratio inert. Those are gone; the geometry lives here and nowhere else.
   It also used to stop at 560px, so anything from a large phone to a tablet fell
   through to the desktop tracks and was never square at all. The section is free to
   run past one screen - it is not a 100dvh panel - so nothing has to be sacrificed
   to keep the squares square. The two full-width banners flatten as the screen
   shortens, which is what buys the height back. */
@media(max-width:860px){
  .family-grid{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:7px}
  .family-grid>.fam{aspect-ratio:auto;height:auto;grid-column:auto;grid-row:auto}
  .family-grid>.fam .fam-media{aspect-ratio:4/3;flex:0 0 auto}
  .family-grid>.fam.tall,.family-grid>.fam.zoomed{grid-column:1 / -1}
  .family-grid>.fam.tall .fam-media,.family-grid>.fam.zoomed .fam-media{aspect-ratio:2.1/1}
  #family .sec-h{margin-bottom:clamp(10px,1.6dvh,18px)}

  .fam-foot{margin-top:clamp(9px,1.4dvh,16px);font-size:var(--t-fine)}
}
@media(max-width:860px) and (max-height:700px){
  .family-grid{gap:6px}
}
@media(min-width:471px) and (max-width:860px){
  .family-grid>.fam .fam-media{aspect-ratio:3/2}
  .family-grid>.fam.tall .fam-media,.family-grid>.fam.zoomed .fam-media{aspect-ratio:2.8/1}
}

/* ---------- mobile spacing pass ---------- */
@media(max-width:860px){
  /* the servicing block sits a little higher under the hero */
  #servicing{padding-top:clamp(4px,.6dvh,10px);
    padding-bottom:clamp(14px,2.4dvh,34px)}

  /* the family section carried less padding than its neighbours and read as cramped */
  #family{padding-top:clamp(30px,5dvh,58px);padding-bottom:clamp(32px,5.4dvh,62px)}

  /* the reviews rail gets a little more air, and the ground moves with it */
  #reviews{padding-top:clamp(34px,5.6dvh,64px);padding-bottom:clamp(36px,6dvh,70px)}
}

/* The seam sits wholly inside its own section. Centring it on the boundary was tried
   and looked wrong: half the wedge crossed the horizontal join between the two grounds,
   so the diagonal and that join read as two different angles meeting. */
.sec-edge{top:0}
.sec-edge.up{top:auto;bottom:0}

/* ---------- mobile: stop padding the panels out to a full screen ----------
   Every section being exactly 100dvh meant a section whose content is shorter than the
   screen paid for the difference in centring slack, twice - once at its own foot and
   again at the next section's head. That is where the 110-120px gaps came from. A
   min-height of 90dvh only ever removes slack: a section with more content than that
   simply grows to fit it, so nothing is clipped or compressed. The hero keeps its full
   screen, because that one is meant to fill the viewport. */
@media(max-width:860px){
  #servicing,.sp-full,#about,#services,#cars{min-height:95dvh}
  #reviews{min-height:82dvh}
}
@media(max-width:860px) and (max-height:700px){
  #servicing,.sp-full,#about,#services,#cars{min-height:auto}
}

/* a short desktop window: the four-column bento scales its rows rather than overflowing.
   (This was collateral damage from stripping the mobile grid-auto-rows rules.) */
@media(min-width:861px) and (max-height:860px){
  .family-grid{grid-auto-rows:clamp(120px,19.5vh,196px)}
  #family .sec-h{margin-bottom:18px}
}

/* the tab rail is 805px of pills against a 375px screen, so all five can never be on
   screen at once; trimming the metrics puts more of the row on screen at rest, and the
   badge cut by the right edge is what shows the row scrolls */
@media(max-width:560px){
  .hero-tabs{gap:7px}
  .hero-tabs a{font-size:var(--t-fine);padding:.5em .85em;min-height:40px}
}

/* The qualifiers come back only once the full-length row fits on one line. They are
   keyed to 879px rather than the site-wide 860px boundary because between 861 and 879
   the long labels need about 884px in an 846px row, which pushed the rail into a
   scroll for a 19px window. This is a label-length rule, not a layout breakpoint, so
   it does not move the 860/861 boundary the rest of the sheet is built on. */
@media(max-width:879px){ .hero-tabs .tab-long{display:none} }

/* the smallest phones tighten the rail further so more than two badges are readable */
@media(max-width:365px){
  .hero-tabs{gap:6px}
  .hero-tabs a{font-size:var(--t-micro);padding:.5em .72em}
}

/* ---------- overlay scrims sit flush to their card edges ----------
   .car .cap runs edge to edge and reads correctly; .fam .cap was inset 7px on mobile,
   so its gradient floated inside the tile with a strip of photograph showing round it.
   One overlay pattern, applied the same way in both places. Every scrim also inherits
   its container's radius so its corners follow the card rather than squaring off. */

/* the two full-width family photographs get more depth again */
@media(max-width:860px){
  .family-grid>.fam.tall .fam-media,.family-grid>.fam.zoomed .fam-media{aspect-ratio:1.75/1}
}
@media(min-width:471px) and (max-width:860px){
  .family-grid>.fam.tall .fam-media,.family-grid>.fam.zoomed .fam-media{aspect-ratio:2.4/1}
}

/* faces, not chests: these two crops were sitting too low in their frames */
.fam.zoomed img{object-position:44% 57%}
.family-grid>.fam:nth-child(4) img{object-position:center 28%}

/* the callout's tick belongs beside the heading, not floating against the paragraph */

/* ---------- the bodywork callout ----------
   The tick sat in its own column, so the heading AND the paragraph were both indented
   past it while the button ran the full width - three elements on two different left
   edges. display:contents lifts the text wrapper's children into the grid itself, so
   the tick sits beside the heading as a badge and the paragraph and button share one
   flush left edge with each other. */

/* these two crops were sitting too high in their frames on a phone */
@media(max-width:860px){
  #cars .car-grid .car:nth-child(1) img{object-position:center 76%}
  #cars .car-grid .car:nth-child(5) img{object-position:center 80%}
}

/* ================= TABLET (861-1220px) =================
   The bento was six near-identical tiles at a width where they are neither a phone
   list nor a desktop grid. It now uses the same price list the phone does - one
   photographed lead card, then a ruled column of jobs that expand in place - sized up
   for the wider column so it still lands inside one screen. */
@media(min-width:861px){
  #services{min-height:100dvh;display:grid;align-content:center;
    padding-top:calc(clamp(14px,2vh,30px) + var(--cut) * .6);
    padding-bottom:calc(clamp(14px,2vh,30px) + var(--cut) * .6)}
  #services .sec-h{margin-bottom:clamp(12px,2vh,24px)}

  .acc-desc{font-size:var(--t-fine)}
  .acc-list li{font-size:var(--t-fine)}

  /* the tab rail sits midway between the arch and the foot of the screen; the
     centring itself is the base rule and is not restated here */
  .hero-tabs{padding-top:clamp(18px,2.6vw,34px);
    padding-bottom:clamp(18px,2.6vw,34px)}

  /* the collection line centres as one unit, tick included */
  .cd-band{justify-content:center;text-align:center}
  .cd-band>span:not(.cd-cta){flex:0 1 auto;text-align:center}

}

/* the two feature photographs in the car wall are the same height as each other */
@media(min-width:901px) and (max-width:1220px){
  #cars .car-grid{grid-template-columns:repeat(5,1fr);grid-auto-flow:row;
    grid-auto-rows:auto;gap:12px}
  #cars .car.big,#cars .car.wide{grid-column:span 2;grid-row:span 1}
}

/* the tablet price list has to land inside one screen */
@media(min-width:861px){
  #services{padding-top:calc(clamp(8px,1.2vh,20px) + var(--cut) * .45);
    padding-bottom:calc(clamp(8px,1.2vh,20px) + var(--cut) * .45)}
  #services .sec-h{margin-bottom:clamp(8px,1.4vh,18px)}

}

/* ---------- tablet portrait (561-860px): the tab rail's own spacing ----------
   The qualifiers are hidden below 860px, so the row is about 560px and fits on one
   line here. Only the padding is set; centring is the base rule. */
@media(min-width:561px) and (max-width:860px){
  .hero-tabs{padding-top:clamp(16px,2.4vw,30px);
    padding-bottom:calc(var(--rail-pb) + var(--callbar-h,0px) + clamp(16px,2.4vw,30px))}
}

/* ---------- tablet: the four split cards need their own sizes ----------
   The stacked card comes from the phone rules, but the photograph heights and type
   scale there are keyed to a 390px column. On a tablet the card is 660px wide, so the
   photograph is sized from the viewport height instead and the copy steps up. */
@media(min-width:861px) and (max-width:1220px){
  .sp-full{min-height:100dvh;display:grid;align-content:center}  .sp-full .sp-copy{padding:clamp(16px,2.4vh,26px) clamp(20px,2.4vw,30px) clamp(18px,2.6vh,28px)}
  .sp-full .sp-copy h2{font-size:clamp(1.5rem,2.8vw,2.05rem);line-height:1.14}
  
  .sp-full .checks li{font-size:var(--t-fine)}
  .sp-full .sp-label{margin-bottom:clamp(10px,1.6vh,16px)}
  .sp-full .sp-cta,#why .geo-cta{margin-top:clamp(12px,1.8vh,20px)}
  .sp-full .sp-cta .btn,#why .geo-cta .btn{font-size:.92rem;padding:.7em 1em}
  #diagnostics .marque{width:clamp(34px,4.4vh,44px);height:clamp(34px,4.4vh,44px)}
  #diagnostics .marque.txt{width:clamp(34px,4.4vh,44px)}
}

/* a short tablet / small laptop (861-1220px, under ~900px tall): the stacked card is
   inherently taller than the two-column split it replaced, so everything in it steps
   down to keep the section inside one screen */
@media(min-width:861px) and (max-width:1220px) and (max-height:900px){
  .sp-full .sp-copy{padding:clamp(11px,1.7vh,18px) clamp(16px,2vw,24px) clamp(13px,1.9vh,20px)}
  .sp-full .sp-copy h2{font-size:clamp(1.25rem,2.3vw,1.62rem);line-height:1.14}
  .sp-full .lead2{margin-bottom:clamp(9px,1.3vh,15px)}
  .sp-full .checks{gap:clamp(6px,.9vh,10px)}
  .sp-full .checks li{font-size:var(--t-fine);line-height:1.4}
  .sp-full .sp-label{margin-bottom:clamp(7px,1.1vh,12px);font-size:var(--t-micro);padding:6px 13px}
  .sp-full .sp-cta,#why .geo-cta{margin-top:clamp(9px,1.3vh,15px)}
  .sp-full .sp-cta .btn,#why .geo-cta .btn{font-size:.86rem;padding:.6em .8em}
  #diagnostics .marque{width:clamp(28px,3.6vh,36px);height:clamp(28px,3.6vh,36px)}
  #diagnostics .marque.txt{width:clamp(28px,3.6vh,36px)}
  #diagnostics .marque-lead{font-size:var(--t-micro);margin-bottom:4px}
  #diagnostics .marque-block+.marque-block{margin-top:9px}
  #diagnostics .lead2{margin-bottom:9px}
  #servicing .ptile{min-height:clamp(240px,40dvh,360px)}
  #servicing .ptile .pd{font-size:var(--t-fine);line-height:1.45}
}

/* ---------- services rows: the icon wells ---------- */

/* ---------- the four split sections glow when they are the one on screen ----------
   Only these four: the glow is a reading cue for the run of service cards, not a
   decoration for the whole page. */
.sp-full .sp-media,.sp-full .geo-carousel,.sp-full .sp-copy{
  transition:box-shadow .55s var(--ease-out)}
.sp-full.is-centred .sp-media,.sp-full.is-centred .geo-carousel{box-shadow:0 0 0 1px rgba(11,29,62,.5),
             0 22px 64px -16px rgba(11,29,62,.7),
             0 0 110px -26px rgba(24,53,96,.8)}
/* Phone and tablet keep the plain card. At those widths a section fills the screen on
   its own, so the glow marks nothing the reader cannot already see, and a dark halo
   around a light card on a light ground reads as grime rather than emphasis. */
@media(max-width:1220px){
  .sp-full.is-centred .sp-media,.sp-full.is-centred .geo-carousel{box-shadow:none}
  .sp-full.is-centred .sp-copy{border-color:var(--line);box-shadow:var(--soft-sm)}
}
@media (prefers-reduced-motion:reduce){
  .sp-full .sp-media,.sp-full .geo-carousel,.sp-full .sp-copy{transition:none}
}

/* ---------- the bodywork callout: one row, button on the right ----------
   The button was stretched across the foot of the box. It is a link, not a form
   submit, so it takes its own width and sits beside the copy at every size. */

/* on a narrow phone three columns will not fit, so the button drops under the copy -
   still its own width, still hard right */

/* ================= DESKTOP CORRECTIONS =================
   A. the tick lists centre as a block on every screen, the way they already do on a
      phone - each row stays left-read so the ticks line up under one another.
   B/C. the two closing lines centre, and the family lead now sits the same distance
      from the photographs as its closing line does. */
@media(min-width:1221px){
  .sp-full .checks{width:fit-content;max-width:100%;margin-inline:auto}
  .sp-full .checks li{text-align:left}
  .sp-full .sp-copy{text-align:center}
  .sp-full .lead2{margin-left:auto;margin-right:auto}
  .sp-full .sp-cta,#why .geo-cta{justify-content:center;max-width:520px;
    margin-left:auto;margin-right:auto}

  #family .sec-h{margin-bottom:clamp(14px,2vh,26px)}
  .fam-foot{margin-top:clamp(14px,2vh,26px)}
}

/* E. the angled seams get room: content stops well clear of the wedge on both sides,
   and the wedge sits in the middle of that space rather than hard against the copy */
@media(min-width:1221px){
  #bodywork,#why{--edge-h:clamp(70px,7vw,120px)}
  #bodywork,#why{padding-top:calc(var(--edge-h) + clamp(26px,3.4vh,56px))}
  #bodywork{padding-bottom:calc(var(--edge-h) + clamp(26px,3.4vh,56px))}
  #diagnostics,#fleet{padding-top:clamp(26px,3.4vh,56px);
    padding-bottom:clamp(26px,3.4vh,56px)}
  #why{padding-bottom:clamp(26px,3.4vh,56px)}
}

/* The icon well must not be what sets a row's height - it is a marker beside the name,
   not a tile. Sized to the cap height of the label plus its padding, the rows are the
   height they were before the icons came back. */

@media(min-width:861px){

  #services .sec-h{margin-bottom:clamp(8px,1.3vh,16px)}

}

/* ---------- desktop hero: the photograph runs longer, the tabs sit in a tight strip ----------
   The tab row carried enough padding to leave a broad band of empty ground under the
   arch. The strip is now the links plus even padding, and because the photograph ends
   where the strip begins, every pixel the strip gives up the image takes. */
@media(min-width:861px){
  .hero-tabs{padding-top:clamp(14px,1.5vw,22px);
    padding-bottom:clamp(14px,1.5vw,22px)}
}

/* the services list on a laptop-height screen */
@media(min-width:1221px) and (max-height:920px){

  #services .sec-h{margin-bottom:clamp(6px,1vh,12px)}

}

@media(max-width:860px) and (max-height:700px){

  #services .sec-h{margin-bottom:6px}

}

/* ---------- the bodywork callout: one layout, every screen ----------
   Icon, then the two lines of copy, then the button on the right - identical structure
   from 320px to 2560px, so nothing about it re-formats as the screen changes. The only
   thing that varies is scale. */

/* On the narrowest screens the button keeps its place on the right, so the icon and
   the button give up width instead of the copy - otherwise the two lines wrap to a
   85px column and the callout doubles in height. */

@media(max-width:400px) and (max-height:760px){

  #services .sec-h{margin-bottom:5px}
  
}

/* ---------- the collection band matches the bodywork callout ----------
   Same object, same shape at every width: tick, the line, then the button on the
   right. It was a wrapping flex row that re-formed differently at three breakpoints. */
.cd-band{display:grid !important;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;column-gap:clamp(9px,1.4vw,18px);row-gap:6px;
  text-align:left;flex-wrap:nowrap}
.cd-band>svg{grid-column:1;grid-row:1;align-self:center;margin-top:0}
.cd-band>span:not(.cd-cta){grid-column:2;grid-row:1;text-align:left;flex:none;min-width:0}
.cd-cta{grid-column:3;grid-row:1;justify-self:end;width:auto;min-width:0;
  white-space:nowrap;padding-inline:clamp(.8em,1.2vw,1.4em)}
@media(max-width:400px){
  .cd-band{column-gap:8px;padding:11px 12px;font-size:var(--t-micro)}
  .cd-band>svg{width:16px;height:16px}
  .cd-cta{font-size:var(--t-micro);padding-inline:.6em}
}

/* ---------- desktop: every section is exactly one screen ----------
   family and reviews were shorter than the viewport, so the next section was already
   showing before you had finished the one you were on. */
@media(min-width:1221px){
  #family,#reviews{min-height:100dvh;display:grid;align-content:center}
}

/* the tablet price rail: a taller card, two neighbours peeking */
@media(min-width:861px) and (max-width:1220px){
  .price-tiles{grid-auto-columns:64% !important;
    scroll-padding-inline:18% !important;padding-inline:18% !important}
  .ptile{min-height:clamp(250px,40dvh,400px)}
}

/* the tablet price card was 410px tall against short copy, hollowing out the middle of
   the shortest of the three */
@media(min-width:861px) and (max-width:1220px){
  .ptile{min-height:clamp(230px,33dvh,330px)}
}

/* ---------- desktop: the car wall is two rows of equal-height photographs ----------
   The six smaller cars were half the height of the Rolls and the Audi, so the right of
   the wall read as filler beside two feature tiles. Five columns instead of four lets
   the two feature photographs stay double-width while every tile shares one height:
   row one is the Rolls plus three, row two is the Audi plus three - twenty cells in
   4x5... in 5x2, exactly filled, no dense backfill and no holes. */
@media(min-width:1221px){
  #cars .car-grid{grid-template-columns:repeat(5,1fr);grid-auto-flow:row;
    grid-auto-rows:auto;gap:14px}
  #cars .car.big,#cars .car.wide{grid-column:span 2;grid-row:span 1}
}

/* ---------- desktop: the photographic bands reach further up and down ----------
   Each band is sheared, so the cut takes a slice off both ends and left more page
   ground showing above and below than the design intends. Extending the band past the
   section edge by half the shear puts the dark ground back where the padding expects. */
@media(min-width:1221px){
  #about .about-bg,#services .band-bg,#cars .band-bg{
    top:calc(var(--cut) * -.55);bottom:calc(var(--cut) * -.55)}
}

/* ---------- seamless grounds ----------
   The page carries a soft radial mesh and a grain texture behind everything. Anything
   that paints a solid --bg or --band block covers those up, and the join to a
   transparent neighbour shows as a faint tonal step. The hero's tab strip and the two
   banded split sections were doing exactly that. They go transparent, and the wedge
   that marks the seam becomes a translucent tint instead of an opaque slab - so the
   mesh runs straight through it and the only thing you see is the diagonal itself. */
.hero-tabs{background:transparent}
#bodywork,#why{background:transparent}
/* the tone is a clipped overlay rather than a background on the section: a solid
   section colour covers the page mesh and the join to a transparent neighbour shows as
   a step, and a wedge painted on top can only ever be a second flat colour. As a
   translucent slab the mesh reads through it, and the triangle it leaves uncovered is
   literally the neighbouring section's ground - so the two always match exactly. */
#bodywork::before,#why::before{content:"";position:absolute;inset:0;z-index:0;
  pointer-events:none;background:rgba(20,22,26,.05)}
#bodywork::before{clip-path:polygon(0 0,100% var(--edge-h),100% calc(100% - var(--edge-h)),0 100%)}
#why::before{clip-path:polygon(0 0,100% var(--edge-h),100% 100%,0 100%)}
#bodywork>*,#why>*{position:relative;z-index:1}
.sec-edge{display:none}

/* ---------- readability floor ----------
   A run of fitting passes had shaved type down to 6-11px in places - the marque
   wordmarks were 6.1px on a phone. Every one of these now has a floor, and the caps
   are unchanged, so nothing shrinks below the point where it stops being readable. */
.cap{font-size:var(--t-fine) !important}

.pbadge{font-size:var(--t-fine)}

.area-lead,.nap-note,.reach-note{font-size:var(--t-fine)}
.est,.ey{font-size:var(--t-fine)}
.cd-cta,.btn{font-size:clamp(15px,1.45vw,16.5px)}
.price-note{font-size:var(--t-fine)}
.fam-foot,.car-foot,.sp-foot{font-size:var(--t-body)}
.marque-lead{font-size:var(--t-fine)}
.acc-desc,.acc-list li{font-size:var(--t-body)}

.sp-full .checks li{font-size:var(--t-body)}

.cd-band{font-size:var(--t-body)}
/* the wordmark badges: a square that small cannot hold a legible word, so they take
   the width they need and the rails scroll a little further instead */
#diagnostics .marque.txt{width:auto !important;min-width:0;padding-inline:7px;
  font-size:var(--t-micro);white-space:nowrap;line-height:1}

#diagnostics .marque-lead{font-size:var(--t-fine)}
#diagnostics .marque.txt{font-size:var(--t-micro)}
#servicing .ptile .pbadge{font-size:var(--t-fine)}
#servicing .ptile .pd{font-size:var(--t-body)}
#servicing .price-note{font-size:var(--t-fine)}
#servicing .ptile .pv small,.ptile .mag,.big small{font-size:clamp(12.5px,1.25vw,14px)}
.freecode{font-size:var(--t-fine)}
/* the chevron-only cell is an icon, not text: it keeps font-size:0 by design */

/* the last of the fit: the smallest phones pay for the larger type out of padding */
@media(max-width:400px) and (max-height:760px){

  #services .sec-h{margin-bottom:4px}

}

.close .close-meta > span,.close-meta > .st{font-size:var(--t-fine)}

/* diagnostics carries the most small print of the four, so the larger type is paid for
   in its own spacing rather than by shrinking it again */
@media(max-width:1220px){
  #diagnostics .marque-block{padding:6px 9px}
  #diagnostics .marque-block+.marque-block{margin-top:7px}
  #diagnostics .lead2{margin-bottom:9px}  #diagnostics .sp-cta{margin-top:9px}
}
@media(min-width:1221px){
  #diagnostics .marque-block+.marque-block{margin-top:12px}
}
@media(max-width:400px){
  #servicing .ptile{padding:8px 11px}
  #servicing .ptile .pd{line-height:1.38}
  #servicing .cd-band{padding:8px 10px}

}

@media(min-width:861px) and (max-width:1220px) and (max-height:900px){
  #diagnostics .marque{width:clamp(26px,3.2vh,32px);height:clamp(26px,3.2vh,32px)}
  #diagnostics .marque-block{padding:5px 8px}
  #diagnostics .marque-block+.marque-block{margin-top:6px}
  #diagnostics .lead2{margin-bottom:8px}
  #diagnostics .sp-copy{padding-top:clamp(9px,1.3vh,14px);padding-bottom:clamp(10px,1.5vh,16px)}
  #diagnostics .sp-cta{margin-top:8px}

}
@media(max-width:400px) and (max-height:760px){
  #servicing .ptile{padding:6px 10px}
  #servicing .ptile .pd{font-size:var(--t-micro);line-height:1.32}

}

/* 320px: the readability floor and a full screen genuinely compete here, so the last
   of the room comes out of spacing and the photograph, never the type */
@media(max-width:340px){
  #servicing{padding-top:4px;padding-bottom:4px}
  #servicing .ptile{padding:5px 9px;min-height:0}
  #servicing .ptile .btn{margin-top:8px}
  #servicing .cd-band{padding:7px 9px;margin-top:7px}
  #servicing .rail-dots{margin-top:3px}
  #servicing .price-note{margin-top:4px}

  #services{padding-top:calc(var(--cut) * .4);padding-bottom:calc(var(--cut) * .4)}

}

/* the larger type is paid for in spacing and photograph height, never by shrinking the
   text back down */

@media(max-width:860px) and (max-height:700px){
  #servicing .ptile{padding:5px 10px}
  #servicing .cd-band{padding:7px 10px;margin-top:7px}

  #services .sec-h{margin-bottom:4px}

}

@media(max-width:400px) and (max-height:660px){

  #services .sec-h{margin-bottom:3px}
  #services{padding-top:calc(var(--cut) * .34);padding-bottom:calc(var(--cut) * .34)}

}

/* the larger reading sizes are paid for here - photographs and spacing, never type */

@media(max-width:860px) and (max-height:700px){  #servicing .ptile{padding:4px 9px}
  #servicing .cd-band{padding:6px 9px;margin-top:6px}
}
@media(max-width:400px) and (max-height:760px){

  #services{padding-top:calc(var(--cut) * .3);padding-bottom:calc(var(--cut) * .3)}

}
@media(min-width:1221px) and (max-height:880px){
  .sp-full .lead2{margin-bottom:clamp(10px,1.4vh,18px)}
  .sp-full .checks{gap:clamp(7px,1vh,12px)}
  .sp-full .sp-cta,#why .geo-cta{margin-top:clamp(12px,1.6vh,20px)}
  .sp-full .sp-label{margin-bottom:clamp(8px,1.2vh,14px)}}

@media(min-width:1221px) and (max-height:800px){
  .sp-full .sp-copy h2{font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.14}
  .sp-full .lead2{margin-bottom:clamp(8px,1.1vh,14px)}
  .sp-full .checks{gap:clamp(6px,.85vh,10px)}
  .sp-full .sp-cta,#why .geo-cta{margin-top:clamp(10px,1.3vh,16px)}
}
@media(max-width:400px) and (max-height:660px){
  #servicing .ptile{padding:3px 8px}
  #servicing .ptile .btn{margin-top:6px}
  #servicing .cd-band{padding:5px 8px;margin-top:5px}
  #servicing .price-note{margin-top:3px}
}

/* a short desktop window: the seam clearance was costing 243px of a 768px screen, which
   is more than the copy it was making room for */
@media(min-width:1221px) and (max-height:860px){
  #bodywork,#why{--edge-h:clamp(48px,4.6vw,74px)}
  #bodywork,#why{padding-top:calc(var(--edge-h) + clamp(14px,2vh,28px))}
  #bodywork{padding-bottom:calc(var(--edge-h) + clamp(14px,2vh,28px))}
  #diagnostics,#fleet{padding-top:clamp(14px,2vh,28px);padding-bottom:clamp(14px,2vh,28px)}
  #why{padding-bottom:clamp(14px,2vh,28px)}

}

@media(min-width:861px) and (max-width:1220px) and (max-height:900px){

  #services .sec-h{margin-bottom:clamp(6px,1vh,12px)}

}

/* reading text gets the line-height that goes with the size - 1.5 is the accepted
   figure for body copy, and it matters as much as the size itself */
.acc-desc,#servicing .ptile .pd{line-height:1.5}
.sp-full .checks li,.acc-list li {line-height:1.45}
.fam-foot,.car-foot,.sp-foot{line-height:1.5}

/* the scale restated at the specificity the older per-section rules use - an ID in the
   selector beats a later class rule however far down the file it sits */
#bodywork .checks li,#fleet .checks li,#diagnostics .checks li,#why .checks li{
  font-size:var(--t-body);line-height:1.45}
.sp-full .sp-cta .btn,#why .geo-cta .btn,.sp-cta .btn,.geo-cta .btn,.acc-actions .btn,#servicing .ptile .btn {
  font-size:clamp(15px,1.45vw,16.5px)}

/* the smallest phones sit at the foot of the scale rather than below it: 15px body-
   adjacent text is still within the accepted range, and the rest comes from the
   photographs */
@media(max-width:400px){
  #bodywork .checks li,#fleet .checks li,#diagnostics .checks li,#why .checks li{font-size:var(--t-fine)}
  .sp-full .sp-cta .btn,#why .geo-cta .btn{font-size:14.5px}  .sp-full .sp-copy{padding:clamp(9px,1.4dvh,14px) 13px clamp(10px,1.6dvh,15px)}
  .sp-full .lead2{margin-bottom:clamp(8px,1.2dvh,13px)}
  .sp-full .checks{gap:clamp(6px,.9dvh,10px)}
  .sp-full .sp-cta,#why .geo-cta{margin-top:clamp(8px,1.2dvh,13px)}
}

@media(max-width:400px) and (max-height:760px){
  #bodywork{--edge-h:clamp(24px,4vw,34px)}
  #bodywork .sp-copy{padding-top:8px;padding-bottom:9px}
  #bodywork .lead2{margin-bottom:7px}
  #bodywork .checks{gap:6px}
  #bodywork .sp-cta{margin-top:7px}

}

/* ================= ACCESSIBILITY & POLISH PASS =================
   Findings from a measured audit across 320-1920px. */

/* 1. Carousel dots were 7x7 hit areas. The dot stays the same size; an invisible
   44x44 target is centred on it, which is the guidance for touch controls. */
.rail-dot,.gc-dot{position:relative}
.rail-dot::after,.gc-dot::after{content:"";position:absolute;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%}
.rail-dots,.gc-dots{position:relative;z-index:4}
.rail-dots{gap:37px}
.gc-controls{position:absolute;top:16px;right:16px;z-index:4;display:flex;
  flex-direction:column;align-items:flex-end;gap:6px}
.gc-controls .gc-dots{position:relative;right:auto;bottom:auto;gap:37px}
.rail-dot:focus-visible,.gc-dot:focus-visible{outline:none}
.rail-dot:focus-visible::after{outline:3px solid var(--cobalt);outline-offset:2px}
.gc-dot:focus-visible::after,.lb-x:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(max-width:420px){.gc-controls{top:10px;right:10px}.gc-controls .gc-dots{gap:34px}}

/* 2. The nav's phone link was a bare 16px icon. It keeps its look and gains a real
   target around it. */
.nav-phone{position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px}

/* 3. Stacked footer and area links get a comfortable row height on touch screens */
@media(max-width:860px){
  footer .cols a{min-height:44px;display:flex;align-items:center;width:max-content;max-width:100%}
  .area-links a,.rev-foot a{min-height:44px;display:inline-flex;align-items:center}
}
@media(max-width:560px){footer .cols{grid-template-columns:1fr}}

/* 4. The lightbox carries an empty <img> until a photograph is chosen, which counts as
   a broken image until then */
.lb-fig img:not([src]){display:none}

/* 5. A floor on anything you have to tap. The fitting passes had squeezed the service
   rows to 26px and the section buttons to 27px on small phones - below the point where
   they can be hit reliably. A comfortable target wins over fitting one more pixel of
   the section into a single screen. */
@media(max-width:860px){

  .sp-full .sp-cta .btn,#why .geo-cta .btn,.acc-actions .btn,#servicing .ptile .btn,.cd-cta {min-height:40px}
  .reach-tel,.nap-tel,.napcard .nrow a,footer .ftel,footer .fmail{
    min-height:36px;display:inline-flex;align-items:center}
  .brand{min-height:40px;display:inline-flex;align-items:center}
  .rating.bare{min-height:32px;align-items:center}
}

/* the price-list rule sets min-height:0 at a higher specificity, so the tap floor has
   to be restated on the same selector */

/* On the smallest phones seven 40px rows plus the feature card and the callout cannot
   also fit one screen while the type stays at 16px. 36px rows are still a comfortable
   list target, and the rest comes out of the feature card and the section padding. */

@media(max-width:400px) and (max-height:720px){

  #services{padding-top:calc(var(--cut) * .26);padding-bottom:calc(var(--cut) * .26)}
  #services .sec-h{margin-bottom:3px}

}

/* ---------- a floor on the space between sections ----------
   The gap a reader sees is the slack left in each section, so a section whose content
   fills its panel ends up almost touching its neighbour - 4px at 320px wide against
   119px elsewhere on the same screen. This puts a real minimum on the block padding so
   no join can collapse, whatever the content does. */
@media(max-width:860px){
  #servicing,#about,#family,#services,#reviews,#cars,.sp-full{
    padding-block:max(var(--sec-gap,26px), var(--pad-y, 0px))}
  #servicing{--sec-gap:26px}
  #family,#reviews{--sec-gap:30px}
}
@media(max-width:860px) and (max-height:720px){
  #servicing,#about,#family,#services,#reviews,#cars,.sp-full{--sec-gap:18px}
}
@media(min-width:861px){
  #servicing,#about,#family,#services,#reviews,#cars,.sp-full{
    padding-block:max(40px, var(--pad-y, 0px))}
}

/* the gap floor costs About ~13px on the smallest phones, taken back from the heritage
   panel rather than from the type */

/* every centred panel's wrapper must be allowed to shrink: a grid item defaults to
   min-width:auto, which lets a nowrap rail inside it force the whole page wider */
#servicing>.wrap,#about>.wrap,#services>.wrap,#cars>.wrap,#reviews>.wrap,
#family>.wrap,.sp-full>.wrap{min-width:0}

/* ---------- undersized labels found in the audit ----------
   .pk is the price card's title ("Full Service") and a fitting pass had it at 9px
   against a 21px base - a heading, not fine print. The row prices and section badges
   were similarly undercut. */
#servicing .ptile .pk{font-size:clamp(15px,4vw,21px) !important;line-height:1.2}

.sp-full .sp-label{font-size:var(--t-fine)}
.ptile .pv .vat,.big .vat{font-size:clamp(12px,1.2vw,13.5px)}
.hero-meta .est{font-size:var(--t-fine)}

/* ================= HORIZONTAL RAILS ON TOUCH =================
   Every rail below 1221px is swiped, and three things fought the swipe.

   1. The cards carry the page's reveal, so a card entering the rail from the side
      played a 26px rise as it arrived: the row appeared to move up and down while the
      reader was moving it sideways. The reveal belongs to vertical scrolling; inside a
      rail the cards are already on screen as a set, so it is dropped there.
   2. The review cards are .glass, so each one blurred what sat behind it while the row
      moved. That is the expensive part of a swipe on a phone. The price tiles already
      opt out of the blur for the same reason; the review cards now match them.
   3. Mandatory snapping re-ran on every one of those repaints. Proximity snapping still
      parks a card square in the row, and lets a short flick settle where it lands. */
@media(max-width:1220px){
  html.anim .rev-rail>.rv,html.anim .price-tiles>.rv,html.anim .car-grid>.rv {
    opacity:1;transform:none;transition:none}
  .rev-rail>.rev{background:var(--surface);border-color:var(--line);
    backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:var(--soft-sm)}
  .rev-rail,.price-tiles,.car-grid {scroll-snap-type:x proximity}

  /* The dots sat 37px apart so their invisible 44px targets could not overlap. Six of
     them read as a scattered row rather than one control. They keep a 24px target,
     which is the WCAG 2.2 AA minimum, and the row reads as a group again. */
  .rail-dots,.gc-controls .gc-dots{gap:17px}
  .rail-dot::after,.gc-dot::after{width:24px;height:24px}
}

/* ================= PHONE: THE THREE PRICE CARDS =================
   The rail stays a rail: three cards on one row, swiped. What was wrong was the empty
   band between the sentence and the button - the tile held a minimum height set for a
   three-column desktop grid, and on a phone the copy could not fill it. The tile now
   takes the height its own content needs, so the card reads as one block. */
@media(max-width:700px){
  #servicing .ptile{min-height:0 !important;
    padding:clamp(12px,1.8dvh,16px) clamp(14px,3.8vw,18px) !important}
  #servicing .ptile .pd{flex-grow:0;margin-top:clamp(7px,1.1dvh,11px) !important}
  #servicing .ptile .btn{margin-top:clamp(10px,1.6dvh,14px);min-height:40px}
  #servicing .ptile .pv{margin-top:clamp(5px,.8dvh,9px) !important}
}

/* The four proofs above the footer are one line on a phone. Below 430px that row is
   80px wider than the screen at the sheet's 12.5px floor, so three things give: the
   rating chip drops the word Google (the star and the score are the proof), the chips
   lose half their side padding, and the type sits at 11px. A deliberate exception to
   the floor, taken because these are four repeated proof labels rather than reading
   matter, and the alternative is a second row of facts or a row that must be swiped.
   It sits here because the floor pass further up would otherwise win on order. */
@media(max-width:430px){
  .close .close-meta{gap:2px}
  .close .close-meta .meta-long{display:none}
  .close .close-meta > span,.close .close-meta > .st{font-size:var(--t-micro);
    padding:7px clamp(4px,1.5vw,8px);letter-spacing:.01em}
}

/* ================= PHONE: PAIRED ASKS STAY ON ONE ROW =================
   Every pair of buttons on the page reads as one decision - the direct ask beside the
   page that explains it - and stacked they read as two. They stay side by side at every
   width, shrink to fit, and scroll the remainder on the narrowest phones rather than
   breaking the pair apart. Single-button rows are untouched. */
@media(max-width:1220px){
  .sp-full .sp-cta,#why .geo-cta{flex-direction:row;flex-wrap:nowrap;align-items:center;
    justify-content:safe center;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;padding:4px 0;margin-bottom:-4px}
  .sp-full .sp-cta::-webkit-scrollbar,#why .geo-cta::-webkit-scrollbar{display:none}
  .sp-full .sp-cta>*,#why .geo-cta>*{flex:0 0 auto;width:auto}
  .sp-full .sp-cta .btn,#why .geo-cta .btn{width:auto;justify-content:center;
    font-size:clamp(12.5px,3.3vw,14.5px);padding:.62em .8em;gap:.45em;white-space:nowrap}
}

/* ================= PHONE: THE FOOTER IN TWO COLUMNS =================
   Twenty link rows in a single column made the footer longer than the page it closes.
   Services and Company sit side by side, with the address block and the hours spanning
   the pair, which halves the height without dropping a single link. */
@media(max-width:560px){
  footer .cols{grid-template-columns:1fr 1fr;gap:20px 14px}
  footer .cols>div:nth-child(1),footer .cols>div:nth-child(4){grid-column:1 / -1}
  footer .cols a{width:auto;min-height:40px;font-size:var(--t-fine);line-height:1.3;padding:7px 0}
}

/* ================= PHONE AND TABLET: THE MENU IS AN OVERLAY =================
   The panel used to open inside the bar itself, which pushed the pill into a tall
   block of small links and left the page showing through underneath. It is now a
   sheet: it starts where the floating bar ends, runs to the bottom of the screen,
   animates in, and carries the four things a visitor arrives wanting - a way to find
   any of the 300 pages, the six sections, the offer, and the two ways to get hold of
   the garage. The bar itself stays exactly where it was. */
.nav-find,.nav-promo{display:none}

@media(max-width:980px){
  html.menu-open,html.menu-open body{overflow:hidden}
  /* the floating call bar carries the same two actions the sheet ends with, and it
     would otherwise sit on top of them */
  html.menu-open .callbar,html.menu-open .wa-float{display:none}

  /* the scrim is the nav's own layer, so a tap on it lands on .nav and closes */
  html.nav-initialized .nav.nav-open::before{content:"";position:fixed;inset:0;
    background:rgba(8,14,30,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
    animation:menuScrim .22s var(--ease-out) both;z-index:59}

  /* the bar's backdrop-filter makes it the containing block for anything fixed inside
     it, which pinned the sheet to the 62px bar instead of the screen. The blur comes
     off while the menu is open: the scrim behind it is doing that work anyway. */
  html.nav-initialized .nav.nav-open .nav-in{backdrop-filter:none;-webkit-backdrop-filter:none}

  html.nav-initialized .nav.nav-open .nav-panel{
    display:flex;flex-direction:column;align-items:stretch;flex-wrap:nowrap;
    gap:clamp(12px,2vh,18px);
    position:fixed;left:12px;right:12px;
    top:calc(20px + var(--nav-h,62px) + 10px);bottom:12px;
    padding:clamp(14px,2.2vh,20px) clamp(14px,4vw,20px) clamp(16px,2.4vh,22px);
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
    box-shadow:0 30px 80px -30px rgba(11,29,62,.55);
    overflow-y:auto;overscroll-behavior:contain;z-index:61;
    animation:menuIn .26s var(--ease-out) both}

  .nav.nav-open .nav-find,.nav.nav-open .nav-promo{display:block}

  /* search */
  /* the label reads only to a screen reader: the field says what it is */
  .nav-find-label.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  .nav-search{width:100%;min-height:48px;padding:11px 14px;font:inherit;font-size:16px;
    color:var(--ink);background:var(--field-bg,var(--bg2));border:1px solid var(--line2);
    border-radius:var(--r-md);appearance:none;-webkit-appearance:none}
  .nav-search::placeholder{color:var(--ink3)}
  .nav-search:focus{outline:3px solid var(--gold);outline-offset:2px;border-color:var(--gold)}
  .nav-find-note{font-family:var(--font-sans);font-size:.66rem;color:var(--ink3);margin:7px 0 0}
  .nav-results{margin-top:10px;border:1px solid var(--line);border-radius:var(--r-md);
    overflow:hidden;background:var(--bg2)}
  .nav-results a{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:11px 13px;min-height:46px;border-bottom:1px solid var(--line);
    color:var(--ink);font-weight:700;font-size:.94rem}
  .nav-results a:last-child{border-bottom:0}
  .nav-results a:hover,.nav-results a:focus-visible{color:var(--ink);background:rgba(232,163,23,.14)}
  .nav-results .nr-kind{flex:0 0 auto;font-family:var(--font-sans);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);font-weight:700}
  .nav-results-note{margin:0;padding:12px 13px;font-family:var(--font-sans);font-size:.7rem;color:var(--ink2)}

  /* the six sections, at the size a thumb is aiming at */
  html.nav-initialized .nav.nav-open .nav-in .lk{display:flex;flex-direction:column;
    flex:0 0 auto;gap:0;margin:0}
  .nav.nav-open .nav-in .lk a{font-family:var(--font-sans);font-weight:800;letter-spacing:-.02em;font-size:clamp(1.22rem,5.8vw,1.6rem);color:var(--ink);padding:clamp(6px,1.1vh,11px) 0;border-bottom:1px solid var(--line);min-height:48px;display:flex;align-items:center}
  .nav.nav-open .nav-in .lk a:last-child{border-bottom:0}
  .nav.nav-open .nav-in .lk a[aria-current="page"]{color:var(--gold);text-decoration:none}

  /* the offer, stated once, in the same type the price card uses for the code */
  .nav-promo{margin:0}
  /* the offer sits on the near-black panel with the gold code, which is how the
     homepage price card carries it */
  .nav-promo a{display:block;font-family:var(--font-sans);font-size:.74rem;line-height:1.5;color:rgba(255,255,255,.82);background:linear-gradient(150deg,var(--panel-a),var(--panel-b));border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);padding:12px 13px}
  .nav-promo a:hover{color:#fff;border-color:rgba(232,163,23,.5)}
  .nav-promo .freecode{white-space:nowrap}
  /* the offer closes the sheet, under call and quote: the actions come first */
  html.nav-initialized .nav.nav-open .nav-panel .nav-promo{order:2}

  /* call and quote sit at the foot of the sheet, side by side */
  html.nav-initialized .nav.nav-open .nav-panel .r{margin-top:auto;width:100%;
    display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:8px}
  .nav.nav-open .nav-panel .r>*{flex:1 1 0;min-width:0}
  .nav.nav-open .nav-panel .nav-phone,.nav.nav-open .nav-panel .r .btn{
    width:100%;min-height:48px;display:flex;align-items:center;justify-content:center}
  .nav.nav-open .nav-panel .nav-phone{gap:8px;border:1px solid var(--line2);
    border-radius:var(--r-pill);background:var(--bg2);color:var(--ink);font-weight:700}
  .nav.nav-open .nav-panel .nav-phone .lbl{display:inline}
}

@keyframes menuIn{from{opacity:0;transform:translateY(-10px) scale(.99)}to{opacity:1;transform:none}}
@keyframes menuScrim{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  html.nav-initialized .nav.nav-open .nav-panel,html.nav-initialized .nav.nav-open::before{
    animation:none}
}

/* ================= PHONE AND TABLET: THE RAILS RUN TO THE EDGE =================
   A card carousel inset inside the text column ended in a hard vertical cut a third
   of the way into the next card, which reads as a broken card rather than as more of
   them. Two changes fix that. The rail is taken out to the full width of the screen,
   so the cards themselves are 30 to 40px wider and the section reads edge to edge.
   And each end fades out instead of being sliced: the fade is only ever on the side
   that has something to scroll to, so the first card is never dimmed at rest and the
   fade doubles as the signal that the row moves. assets/site.js sets --fade-start and
   --fade-end from the scroll position; with no script they stay 0 and the rail simply
   reads as it did before, cards and all. */
@media(max-width:1220px){
  .price-tiles,.rev-rail{
    width:var(--vw,100vw);max-width:var(--vw,100vw);
    margin-inline:calc(50% - var(--vw,100vw) / 2)}
}
.price-tiles,.rev-rail,.marque-grid,.area-links,.hero-tabs,.close .close-meta{
  --rail-fade:clamp(16px,5vw,30px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-start,0px),
    #000 calc(100% - var(--fade-end,0px)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-start,0px),
    #000 calc(100% - var(--fade-end,0px)),transparent 100%)}

/* On a phone the two rails size their cards off the screen rather than off a text
   column: one card, near enough the full width, and the same slack either side of it
   whether the rail snaps to the start of a card (prices) or its centre (reviews).
   Percentage columns could not do this once the rail went full-bleed, because a
   percentage resolves against the content box the percentage padding has already
   shrunk, so the card came out no wider than it was inset. */
@media(max-width:860px){
  .price-tiles,.rev-rail{
    grid-auto-columns:calc(var(--vw,100vw) - var(--rail-slack)) !important;
    padding-inline:calc(var(--rail-slack) / 2) !important;
    scroll-padding-inline:calc(var(--rail-slack) / 2) !important}
  /* a phone gets one card and an edge of the next */
  .price-tiles,.rev-rail{--rail-slack:clamp(52px,15vw,74px)}
}
/* the small tablet has the width for a card and a real neighbour either side of it */
@media(min-width:641px) and (max-width:860px){
  .price-tiles,.rev-rail{--rail-slack:30vw}
}

/* ================= PHONE: THE ROUND OF CORRECTIONS =================
   Measured at 320, 360, 390, 430, 560 and 768, and against a 640px-tall screen. */

/* 1. Two labels sat under the sheet's 12.5px floor: the carousel's own play control
      and the three footer column headings. */
footer h4{font-size:var(--t-fine)}

/* 2. The heritage cards run three across on a phone, but their caption was styled for
      the full-width card of an earlier pass: the year wrapped onto two lines and met
      the place name coming the other way. The year holds one line, and the caption
      takes the room back from its own padding. */

/* 3. The alignment carousel is a 110px strip on a phone, and the Geo by Luke tag was
      covering half of it at desktop metrics. The tag keeps its words and takes a third
      of the room, so the photograph behind it is a photograph again. */
@media(max-width:860px){
  .geo-carousel .tag{left:10px;bottom:10px;right:auto;padding:6px 9px;gap:8px;
    border-radius:var(--r-md);max-width:calc(100% - 20px)}
  .geo-carousel .tag img{height:20px}
  .geo-carousel .tag .t{font-size:var(--t-micro);line-height:1.25}
  .gc-controls{top:8px;right:8px;gap:4px}
}
/* On a short phone the section's share of the screen leaves the carousel about 75px
   deep, and even the compact tag covers most of that. The tag comes off: Geo by Luke
   is named in the copy and again on the button directly under the photograph, so
   nothing is lost but the label sitting on top of the picture. */
@media(max-width:860px) and (max-height:700px){
  #why .geo-carousel .tag{display:none}
}

/* ---------- short viewports: one lever, not seventy-two ----------
   The panels are min-height:100dvh and centre their content. On a short desktop
   window the scale steps down here, once, so every section stays in proportion
   with every other. Anything that still will not fit simply scrolls. */
@media (max-height:820px) and (min-width:861px){
  :root{
    --t-body:clamp(.94rem,.9rem + .2vw,1.05rem);
    --t-lead:clamp(1rem,.96rem + .28vw,1.15rem);
    --t-h3:clamp(1.1rem,1rem + .55vw,1.45rem);
    --t-h2:clamp(1.35rem,1.05rem + 1.7vw,2.5rem);
    --t-display:clamp(1.7rem,1.3rem + 2.3vw,2.9rem);
  }
}
@media (max-height:660px) and (min-width:861px){
  :root{
    --t-body:clamp(.88rem,.86rem + .14vw,.96rem);
    --t-lead:clamp(.94rem,.91rem + .2vw,1.04rem);
    --t-h3:clamp(1rem,.95rem + .35vw,1.25rem);
    --t-h2:clamp(1.2rem,1rem + 1.2vw,1.95rem);
    --t-display:clamp(1.5rem,1.2rem + 1.7vw,2.3rem);
  }
}

/* ---------- the About intro: two rows of heading, three of copy ----------
   The block changed shape at every step of the page: three heading rows and five
   copy rows on a phone, two and four on a laptop, three and four at 1920. Three
   levers, in the order they cost the least.

   1. The measure. `.sec-h p` is capped at 60ch, and a ch cap is font-size invariant -
      shrinking the type cannot take a row out of a paragraph, only a wider measure
      can. This one paragraph gets 76ch and the band's own container widens to match,
      which is what puts the full sentence on three rows from 821px up.
   2. The copy. Below 700px three rows of the full sentence would need ~12px type,
      under the readability floor set above. The paragraph carries a shorter phone
      sentence instead - the same device as the `.sm-cut` clause inside it - and steps
      down to body size on the narrowest handsets so the three rows have headroom.
   3. The heading. Below 700px it is held to 6.05vw, which is what two rows of it
      costs at 360px; above 1220px the wider container is what buys the second row
      back at 1920px. */

@media(max-width:560px){
  .xs-cut{display:none}
}
@media(min-width:561px){
  .xs-only{display:none}
}

/* ---------- mobile photographic bands: room inside the cut ----------
   Reserve a full cut plus clear space on both sides of the content, even on short
   phones. Padding grows the background with its section rather than painting over
   the neighbouring content. Contact keeps its arc and the fade into the footer. */
@media(max-width:860px){
  .pg-home #about,.pg-home #services,.pg-home #cars{--sec-gap:calc(var(--cut) + 3rem)}
  .pg-home #cars .band-bg{top:0;bottom:0}
  .pg-home #contact{padding-top:calc(var(--cut) + 4rem);padding-bottom:calc(var(--cut) + 3rem)}
}

/* ---------- the reviews block sits where it reads ----------
   #reviews is one screen with its content centred, and its content is short, so the
   heading was carrying ~190px of empty band above it against ~140px below - the
   block read as having fallen down the screen. The extra room goes under it instead.
   Phones and tablets already sit tight to the band above, so this is the desktop
   tier only. */
@media(min-width:1221px){
  #reviews{padding-block:40px calc(40px + clamp(60px,12vh,140px))}
}

/* ---------- bodywork and fleet: the copy inside the card steps down ----------
   These two are the only splits whose card carries a lead, a ticked list and a
   button pair under a full-width photograph, and on a phone and a tablet that stack
   was setting the card's height. The lead and the list each drop one step of the
   scale - lead to body, list to fine - which is the same pair of sizes the ≤400px
   floor above already settles on. The heading is untouched: it is what names the
   card. */
@media(max-width:1220px){
  #bodywork .lead2,#fleet .lead2{font-size:var(--t-body)}
  #bodywork .checks li,#fleet .checks li{font-size:var(--t-fine)}
}

/* ---------- the flat blue surfaces take a photograph too ----------
   Three panels here were solid navy while every other blue surface on the site
   carries a workshop photograph under a near-opaque veil - `.band-bg` above, and
   `--band-veil` on the secondary surfaces. They join it, and by the same rule: the veil
   gradient is the FIRST background layer and paints over the photograph beneath it,
   so each surface stays one declaration. That matters twice - nothing needs a
   pseudo-element or a z-index on its children, and a page-level override still
   clears the lot (the bodywork page's transparent footer).

   All three photographs are ones the homepage already loads, so this costs no extra
   request there. The alphas are tuned so the picture reads as texture rather than
   subject: the bands run their photograph at .20, and a panel with copy sitting
   directly on it wants roughly half that. */
:root{
  --panel-veil:linear-gradient(158deg,rgba(24,53,96,.90),rgba(11,29,62,.94));
}
.ptile.feature{background:var(--panel-veil),
  url("/assets/photos/mechanic-oil.webp") center 45%/cover no-repeat,var(--panel-b)}

/* the closing strip and the footer are two elements reading as one navy block, so the
   photograph cannot simply be set on both - two `cover` crops of different heights meet
   in a hard line at the join. It lives in the footer alone and fades in out of the
   strip's own flat navy over the first fifth of it, so the seam has nothing to show,
   and the strip is left exactly as it was. */
footer{background:linear-gradient(180deg,#0E234D 0,rgba(14,35,77,.945) 17%,rgba(9,23,52,.965) 100%),
  url("/assets/photos/workshop-corridor.webp") center 55%/cover no-repeat,#0E234D}

/* ================= RESPONSIVE SECTION SIZING =================
   Viewport units set a minimum, not a ceiling. Mobile photographic bands keep their
   cut-aware padding and family photographs keep their proportions, even when either
   makes a section taller than the screen. Desktop sizing remains independent. */

/* ---------- the family gallery ----------
   Auto rows keep captions outside the photographs without taking height from them.
   The full-width opener and closer are deeper banners; the four middle images are
   4:3. Fixed viewport-height rows are reserved for the wider tablet layout. */
@media(max-width:1220px){
  #family{min-height:100dvh;display:grid;align-content:center}
  #family>.wrap{width:100%;min-width:0}
  #family .sec-h p{font-size:var(--t-body)}
}
@media(max-width:860px){
  .pg-home #family .family-grid{grid-auto-rows:auto;row-gap:1rem}
  .pg-home #family .fam-media{aspect-ratio:4/3;flex:0 0 auto}
  .pg-home #family .fam.tall .fam-media,.pg-home #family .fam.zoomed .fam-media{aspect-ratio:16/9}
}
@media(min-width:861px) and (max-width:1220px){
  .family-grid>.fam .fam-media{aspect-ratio:auto;flex:1 1 0;min-height:0}
  .family-grid>.fam.tall .fam-media,.family-grid>.fam.zoomed .fam-media{aspect-ratio:auto}
  .family-grid{grid-auto-rows:clamp(96px,15.5dvh,190px)}
}

/* ---------- the price board ----------
   Two different screens were failing it. On a phone the intro ran to eight rows, and its
   last two sentences are the collection promise the `.cd-band` under the tiles already
   states, qualifiers and all - so they take `.sm-cut` and the intro is four rows. On a
   short desktop (a 768- or 864-tall window) nothing was shrinking at all: the one
   `max-height` type tier in this file starts at 820px and these windows sit just above
   it. The heading, the intro and the gaps step down here instead. */
@media(min-width:861px) and (max-height:940px){
  #servicing .sec-h{margin-bottom:clamp(10px,1.8vh,20px)}
  #servicing .sec-h h2{font-size:clamp(1.6rem,3.1vw,2.55rem)}
  #servicing .sec-h p{font-size:var(--t-body)}
  #servicing .cd-band{margin-top:clamp(8px,1.4vh,16px)}
  #servicing .price-note{margin-top:clamp(6px,1.1vh,12px)}
}

/* ---------- the heritage band ----------
   The intro's bottom margin was an inline 32px on the markup, which no tier could reach;
   it is stated here instead, and steps with the viewport like everything else. The rest
   is the same short-desktop problem the price board had: at 768-900px tall the heading
   is still at its full 52px and the timeline photographs are still sized by a 3/2 crop,
   so the band ran 100px past the screen. */

/* ---------- the cars wall ----------
   Six photographs in a 2-column grid on phones and tablets, sized by their own width,
   so the wall was 939px inside an 1112px screen before the heading and the closing line
   were paid for. Rather than guess a `dvh` row that suits both a 568px phone and a
   1180px tablet, the section states its own shape: heading, wall, closing line, with the
   wall taking `1fr` of whatever the screen has left. Rows share that out, the photograph
   takes what its caption leaves (`.car img` is already `flex:1 1 0`), and the wall can
   never be the thing that overflows. The `!important` matches the mobile grid rules
   above, which use it to unwind the desktop rail. */
@media(max-width:860px){
  #cars{grid-template-rows:auto minmax(0,1fr) auto;align-content:stretch}
  /* Extra band padding adds height instead of borrowing it from the photographs. */
  .pg-home #cars{min-height:calc(95dvh + var(--sec-gap) * 2)}
  #cars .car-grid{grid-auto-rows:minmax(0,1fr) !important;align-self:stretch;min-height:0}
  #cars .car{min-height:0}
  /* the photograph is height-led here, not 3/2: the row decides, `object-fit:cover`
     and the six tuned `object-position` values above keep the crop honest */
  #cars .car img{flex:1 1 0;aspect-ratio:auto;min-height:0;height:auto}
  #cars .sec-h{margin-bottom:clamp(12px,2.2dvh,30px)}
  #cars .car .cap{padding:9px 0 4px}
  #cars .car-foot{margin-top:clamp(10px,1.6dvh,22px)}
}

/* ---------- the four split sections ----------
   Diagnostics, bodywork, fleet and why-White-Rose share one card: a label, a photograph
   and a copy block. On a phone the photograph was `26dvh` and the lead ran five rows at
   lead size, which put diagnostics 133px past a 667px screen. The photograph takes one
   notch less of the screen and the lead sits at the size the ticked list beside it
   already uses; diagnostics, which carries two marque rails the other three do not, pays
   a little more out of the space around them. */
@media(max-width:860px){
  .sp-full .sp-media,#why .geo-carousel{max-height:clamp(104px,20dvh,240px)}
  .sp-full .lead2{font-size:var(--t-fine)}
  .sp-foot{font-size:var(--t-fine);margin-top:clamp(8px,1.3dvh,16px)}
  #diagnostics .marque-block{margin-top:clamp(5px,.9dvh,10px)}
  #diagnostics .marque-block+.marque-block{padding-top:clamp(5px,.9dvh,10px)}
  #diagnostics .marque-lead{margin-bottom:2px;line-height:1.25}
}
@media(max-width:860px) and (max-height:800px){
  .sp-full .sp-media,#why .geo-carousel{max-height:clamp(96px,17dvh,200px)}
  .sp-full .lead2{margin:clamp(6px,1.1dvh,13px) 0 clamp(6px,1dvh,12px)}
  .sp-full .sp-cta,#why .geo-cta{margin-top:clamp(7px,1.1dvh,13px)}
}

/* ---------- short phones: the last tier ----------
   640- and 667-tall handsets are still in use and they are the tightest real case. The
   photographs take one more step, and the two intros that still ran long - the price
   board's and the splits' - sit at the size the notes beside them use. Nothing here goes
   under the 15px floor set above. */
@media(max-width:860px) and (max-height:700px){
  .sp-full .sp-media,#why .geo-carousel{max-height:clamp(84px,14dvh,160px)}
  #servicing .sec-h p{font-size:var(--t-fine)}
  #servicing .cd-band{margin-top:clamp(5px,.9dvh,10px)}
  #servicing .price-note{margin-top:clamp(5px,.9dvh,10px)}
  #diagnostics .marque-grid{gap:5px}
  #diagnostics .sp-cta{margin-top:clamp(6px,.9dvh,11px)}
  #diagnostics .lead2{margin-bottom:clamp(5px,.9dvh,11px)}
}

/* ---------- short viewports above the phone width ----------
   A 600-tall tablet in landscape gets none of the phone tiers above, and the one
   `max-height` type step in this file is not enough on its own: the split card still
   carried a 140px photograph and a lead at full size. Same two levers, same order. */
@media(min-width:861px) and (max-height:760px){
  .sp-full .sp-media,#why .geo-carousel{max-height:clamp(92px,16vh,190px)}
  .sp-full .lead2{font-size:var(--t-fine)}
  .sp-foot{font-size:var(--t-fine);margin-top:clamp(8px,1.4vh,16px)}
  .sp-full .sp-cta,#why .geo-cta{margin-top:clamp(8px,1.3vh,15px)}
  #servicing .sec-h p{font-size:var(--t-fine)}
  #servicing .sec-h h2{font-size:clamp(1.4rem,2.6vw,2rem)}
  #servicing .sec-h{margin-bottom:clamp(8px,1.4vh,16px)}
  #servicing .ptile{padding:clamp(10px,2vh,22px) clamp(14px,1.6vw,24px)}
  #servicing .ptile .pd{font-size:var(--t-fine)}
  #services .sec-h{margin-bottom:clamp(6px,1.1vh,14px)}

  .sp-full h2{font-size:clamp(1.25rem,2.3vw,1.8rem)}
  .sp-full .checks{gap:clamp(5px,.9vh,10px)}
  .sp-full .checks li,#bodywork .checks li,#fleet .checks li,
  #diagnostics .checks li,#why .checks li{font-size:var(--t-fine)}
  .sp-full .sp-copy{padding:clamp(10px,1.8vh,20px) clamp(14px,1.8vw,24px)}
  .sp-label{margin-bottom:clamp(6px,1.1vh,12px)}

  /* the wedge between the split sections is 7.6vw deep, which is 262px of a 600px
     screen spent on two diagonals before any copy is placed */
  #bodywork{--edge-h:clamp(28px,4.2vw,70px)}
  #why{--edge-h:clamp(24px,3.4vw,56px)}
  #diagnostics .marque{width:34px;height:34px}
  #diagnostics .marque img{width:18px;height:18px}
  #diagnostics .marque-block{margin-top:clamp(5px,.9vh,11px)}
  #diagnostics .marque-block+.marque-block{padding-top:clamp(5px,.9vh,11px)}
  #diagnostics .marque-lead{margin-bottom:2px;line-height:1.25}

  #servicing .ptile .pd{margin-top:clamp(5px,.9vh,12px)}
  #servicing .ptile .btn{margin-top:clamp(8px,1.3vh,16px)}
}

/* `.short-cut` is `.sm-cut`'s other half: the same clause, dropped when the viewport is
   short rather than narrow. The price board's intro carries both, because its last two
   sentences are the collection promise the band under the tiles already states. */
@media(max-height:760px){
  .short-cut{display:none}
}

/* ---------- 320x568: the smallest screen still in use ----------
   One more step, and the last one that can be taken without going under the 15px floor.
   Everything here is space rather than type: the bands' own padding, the gaps inside the
   price tiles and the heritage panel, and the photographs, which give up the most
   because they are the only thing on the page that can. */
@media(max-width:400px) and (max-height:620px){
  #servicing,#about,#family,#services,#reviews,#cars,.sp-full{--sec-gap:12px}
  #servicing .sec-h{margin-bottom:8px}
  #servicing .ptile{padding:4px 9px}
  #servicing .ptile .pd{margin-top:5px}
  #servicing .ptile .btn{margin-top:8px}
  #servicing .cd-band{padding:5px 8px;margin-top:5px}
  #servicing .price-note{margin-top:5px}

  .family-grid{gap:5px}
  #family .sec-h{margin-bottom:8px}
  .fam-foot,.car-foot{margin-top:8px}
  .sp-full .sp-media,#why .geo-carousel{max-height:clamp(66px,11.5dvh,120px)}
  .sp-full .sp-copy{padding:8px 11px 9px}
  .sp-full .lead2{margin:6px 0 7px}
  .sp-full .checks{gap:5px}
  .sp-full .sp-cta,#why .geo-cta{margin-top:7px}
  .sp-foot{margin-top:7px}
  #diagnostics .marque{width:30px;height:30px}
  #diagnostics .marque img{width:16px;height:16px}
  #diagnostics .marque-block{margin-top:5px}
  #diagnostics .marque-block+.marque-block{padding-top:5px}
}

/* ================= HOMEPAGE DESKTOP SCALE (trial) =================
   Scoped to `.pg-home` so the landing page can be judged on it before the rest of the
   site takes it. Four findings from a measured desktop audit at 1440x900, 1920x1080 and
   2560x1440. Everything here is desktop: the phone and tablet tiers above are unchanged,
   and 1440x900 - which was already the best-proportioned view of the page - barely
   moves. */

/* 1. The section heading was 54.4px against a 62.4px hero h1 from 1920 up: a 1.15x step
      where a display scale wants 1.3-1.5x, so the hierarchy flattened exactly where
      there is most room for it. The cap comes down to 2.9rem. It also closes a jump the
      one-screen work introduced - the same 1920 monitor rendered 40.8px headings in a
      900-tall window and 54.4px in a 1080-tall one, because the short-desktop tier stops
      at 940px of height. 40.8 against 46.4 is a step you cannot see. */
/* Stated as a ceiling on the rendered heading, not as a new `--t-h2`. The short-viewport
   tiers at the foot of this file redefine that token on `:root`, and `.pg-home` is `body`
   - a descendant - so overriding it here would have cancelled every one of them. */
/* `.display` is excluded on purpose: the cars wall's statement heading is meant to
   rival the hero, and it carries its own `--t-display` scale. */
.pg-home .sec-h h2:not(.display){font-size:min(var(--t-h2),2.9rem)}

/* 2. The price board's intro ran five centred rows, and centred copy past three rows
      moves its own left edge on every line. Its last two sentences are the collection
      promise the band directly under the tiles already states in full, qualifiers
      included - `.short-cut` drops them on a phone and on a short window, and here it
      drops them everywhere. The intro is two rows and nothing has left the screen. */
.pg-home .short-cut{display:none}

/* 3. Above 1600px the column stopped growing while the screen did not: sections filled
      40-53% of a 2560x1440 screen and the page read as a strip in a void rather than as
      anything oversized. The column grows, and sections stop stretching at 1100px so a
      tall monitor sees the next one begin. 1080p is under the cap and is untouched. */
@media(min-width:1600px){
  .pg-home{--maxw:1440px}
  /* the four split cards cap their own wrap at 1080px, so `--maxw` alone left them the
     narrowest thing on a wide screen - and their photograph is the element that turns
     width into height, so they were also the emptiest */
  .pg-home .sp-full>.wrap{max-width:min(1320px,100%)}
}
@media(min-width:1221px){
  .pg-home #servicing,.pg-home #about,.pg-home #family,.pg-home #services,
  .pg-home #reviews,.pg-home #cars,.pg-home .sp-full{min-height:min(100dvh,1100px)}
}

/* 4. Two labels sat under the floor the foot of this file sets. The section buttons were
      already at 16.5px and are left alone; it is the navigation's own action and the
      bento cards' "Details" that read as secondary when they are not. */
.pg-home .nav .btn{font-size:16px}

/* ==========================================================================
   Homepage About band: "Family-run since 1974", in the About page hero's
   vocabulary. The founding year at full width, filled with the workshop; the
   story beside the headline; the three addresses on a ruled line with a dot at
   each (the stops open the framed prints, site.js); four figures in one row.
   The band keeps its navy ground, photo veil and curved cut from the rules
   above, so this block only lays out what sits inside it.
   ========================================================================== */
#about .ab{display:grid;gap:clamp(14px,2.2vh,28px)}
#about .ab-top{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap}
#about .ab-top .ey{color:#9DBBFF}
#about .ab-kicker{font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:rgba(255,255,255,.58)}
#about .ab-year{margin:0 0 0 -.05em;font-weight:800;line-height:.76;letter-spacing:-.075em;user-select:none;
  font-size:clamp(6rem,min(38vw,40vh),30rem);
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(157,187,255,.12)),url("/assets/photos/workshop-rays-2.webp") 50% 45%/cover;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.14)}
#about .ab-row{display:grid;grid-template-columns:minmax(0,.48fr) minmax(0,.52fr);gap:clamp(18px,4vw,64px);align-items:start}
#about .ab-row h2{color:#fff;font-size:min(var(--t-h2),2.9rem);max-width:16ch}
#about .ab-copy{display:grid;gap:14px}
#about .ab-copy p{color:rgba(255,255,255,.82);max-width:62ch}
#about .ab-checks{list-style:none;margin:0;padding:0;display:grid;gap:6px}
#about .ab-checks li{position:relative;padding-left:24px;color:rgba(255,255,255,.9);font-size:var(--t-fine);font-weight:700;line-height:1.4}
#about .ab-checks li::before{content:"";position:absolute;left:3px;top:.38em;width:10px;height:5px;border:solid #9DBBFF;border-width:0 0 2px 2px;transform:rotate(-45deg)}
#about .ab-line-head{display:flex;align-items:baseline;gap:6px 18px;flex-wrap:wrap;margin-top:clamp(4px,1vh,12px)}
#about .ab-line-head h3{margin:0;color:#fff;font-size:clamp(1.15rem,1rem + .6vw,1.5rem);letter-spacing:-.02em}
#about .ab-line-head p{margin:0;color:rgba(255,255,255,.66);font-size:var(--t-fine)}
#about .ab-line{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,28px);margin:0;padding:24px 0 0;list-style:none}
#about .ab-line::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,rgba(255,255,255,.7) 0 66%,#9DBBFF 66%);transform-origin:0 0}
#about .ab-line li{position:relative;min-width:0}
#about .ab-line li::before{content:"";position:absolute;top:-29px;left:0;width:12px;height:12px;border-radius:50%;background:#0B1D3E;border:2px solid rgba(255,255,255,.8)}
#about .ab-line li:last-child::before{background:#9DBBFF;border-color:#9DBBFF;box-shadow:0 0 0 6px rgba(157,187,255,.2)}
#about .ab-stop{display:grid;grid-template-columns:clamp(70px,7vw,104px) 1fr;gap:12px;align-items:center;width:100%;padding:0;margin:0;
  font:inherit;text-align:left;color:inherit;background:none;border:0;cursor:zoom-in;border-radius:var(--r-md)}
#about .ab-stop img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-md);transition:transform .5s var(--ease)}
#about .ab-stop:hover img{transform:scale(1.04)}
#about .ab-stop:focus-visible{outline:2px solid #fff;outline-offset:4px}
#about .ab-text{display:grid;gap:2px;min-width:0}
#about .ab-yr{font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:#E8C46A}
#about .ab-line li:last-child .ab-yr{color:#9DBBFF}
#about .ab-place{color:#fff;font-weight:800;font-size:var(--t-body);line-height:1.25}
#about .ab-sub{color:rgba(255,255,255,.68);font-size:var(--t-fine);line-height:1.4}
#about .ab-figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.18);margin-top:clamp(4px,1vh,10px)}
#about .ab-fig{min-width:0;padding:clamp(12px,1.8vh,20px) clamp(10px,1.6vw,22px) 0;border-left:1px solid rgba(255,255,255,.14)}
#about .ab-fig:first-child{padding-left:0;border-left:0}
#about .ab-fig .n{font-weight:800;font-size:clamp(1.7rem,1.2rem + 1.8vw,3rem);letter-spacing:-.045em;line-height:.95;color:#fff;font-variant-numeric:tabular-nums}
#about .ab-fig .n em{font-style:normal;color:#9DBBFF}
#about .ab-fig .l{margin-top:8px;color:rgba(255,255,255,.7);font-size:var(--t-fine);line-height:1.4}
#about .ab-foot{margin:0;color:rgba(255,255,255,.78);font-size:var(--t-fine);max-width:76ch}
@keyframes ab-line{from{transform:scaleX(0)}}
@media (prefers-reduced-motion:no-preference){
  html.anim #about .ab-line.in::before{animation:ab-line 1.4s var(--ease) both}
}
@media (max-width:860px){
  #about .ab-row{grid-template-columns:1fr}
  #about .ab-year{font-size:clamp(5rem,44vw,18rem)}
  #about .ab-figs{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}
  #about .ab-fig:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:760px){
  #about .ab-line{grid-template-columns:1fr;gap:12px;padding:0 0 0 26px}
  #about .ab-line::before{left:5px;right:auto;top:0;bottom:0;width:2px;height:auto;background:linear-gradient(180deg,rgba(255,255,255,.7) 0 66%,#9DBBFF 66%)}
  #about .ab-line li::before{left:-26px;top:50%;transform:translateY(-50%)}
  #about .ab-sub{display:none}
  #about .ab-kicker{display:none}
  #about .ab-checks{display:none}
  /* Figures are capped by the column's width, not only by rem, so 200% text
     cannot push "6,000+" out of a half-width column. */
  #about .ab-fig .n{font-size:min(clamp(1.7rem,1.2rem + 1.8vw,3rem),10.5vw)}
  #about .ab-fig .l{overflow-wrap:anywhere}
}

/* ==========================================================================
   Homepage Contact: one screen on a desktop. The talk-to-us column (heading,
   phone, WhatsApp/email, recovery) sits beside the find column (map, then the
   opening card laid out in two columns). The garage-front photograph is the
   band's own background, so its framed copy is hidden here. CSS only: the
   find grid is lifted verbatim into contact-us.html by build.py, and that
   page keeps its own layout.
   ========================================================================== */
@media (min-width:1100px) and (min-height:700px){
  .pg-home #contact{min-height:100dvh;display:grid;align-content:center;
    padding-top:calc(var(--cut) + clamp(16px,2.4vh,36px));padding-bottom:clamp(28px,4vh,56px)}
  .pg-home #contact>.wrap{display:grid;grid-template-columns:minmax(0,.48fr) minmax(0,.52fr);
    grid-template-rows:auto 1fr;column-gap:clamp(32px,4vw,64px);row-gap:clamp(14px,2vh,24px);align-items:start;width:100%}
  .pg-home #contact .sec-h{grid-column:1;grid-row:1;text-align:left;margin:0;max-width:none}
  .pg-home #contact .sec-h h2{font-size:clamp(2rem,1.2rem + 1.8vw,3rem)}
  .pg-home #contact .sec-h p{margin-left:0;font-size:var(--t-body)}
  .pg-home #contact .reach{grid-column:1;grid-row:2;margin:0;text-align:left;padding:clamp(18px,2.6vh,30px) clamp(20px,2vw,30px)}
  .pg-home #contact .reach-tel{justify-content:flex-start}
  .pg-home #contact .reach-alt{justify-content:flex-start}
  .pg-home #contact .reach-sub,.pg-home #contact .reach-note{margin-left:0;margin-right:0}
  .pg-home #contact .find-grid{grid-column:2;grid-row:1/3;margin:0;grid-template-columns:1fr;gap:12px;align-self:center}
  .pg-home #contact .find-photo{display:none}
  .pg-home #contact .mapembed{aspect-ratio:auto;height:clamp(170px,23vh,250px);min-height:0}
  .pg-home #contact .area-lead{margin:4px 0 0}
  .pg-home #contact .area-links{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .pg-home #contact .napcard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:22px;
    padding:clamp(14px,2vh,22px) clamp(18px,1.6vw,24px);height:auto}
  .pg-home #contact .napcard>#openState{grid-column:1/-1}
  .pg-home #contact .napcard>.nrow{grid-column:1}
  .pg-home #contact .napcard>.nrow:nth-child(4){grid-column:2;grid-row:2/4;border-bottom:0}
  .pg-home #contact .napcard>.nap-foot{grid-column:1/-1;margin-top:4px;padding-top:0}
  .pg-home #contact .napcard .nrow{padding:6px 0}
  .pg-home #contact .hours li{padding:1px 8px;font-size:var(--t-fine)}
  .pg-home #contact .napcard{align-items:start}
  .pg-home #contact .nap-note{margin-top:6px}
  .pg-home #contact .reach-recover{text-align:left;justify-content:flex-start;align-items:flex-start;display:flex;gap:10px}
  .pg-home #contact .reach-recover svg{flex:0 0 auto;margin:2px 0 0}
  .pg-home #contact .reach-tel{font-size:clamp(2rem,1.2rem + 2vw,3.2rem)}
}
@media (min-width:1100px) and (min-height:700px) and (max-height:860px){
  .pg-home #contact .mapembed{height:clamp(150px,20vh,200px)}
  .pg-home #contact .area-lead{display:none}
  .pg-home #contact .sec-h p{font-size:var(--t-fine)}
  .pg-home #contact .reach{padding:16px 22px}
  .pg-home #contact .reach-note{display:none}
}

/* ==========================================================================
   Homepage Services: an index of jobs. The list on the left names every job
   with its price; the preview on the right shows the chosen one as a large
   photograph of that work with what is included and how to ask for it.
   site.js swaps the preview (wide screens) or opens the job in place under
   its row (phones). One screen tall on a desktop.
   ========================================================================== */
#services .svc-index{display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);gap:clamp(24px,4vw,64px);align-items:stretch}
#services .svc-side{display:grid;align-content:center;gap:clamp(14px,2vh,22px);min-width:0}
#services .svc-side .sec-h{margin:0;text-align:left;max-width:none}
#services .svc-side .sec-h p{margin-left:0}
#services .svc-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
#services .svc-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:14px;width:100%;min-height:52px;
  padding:9px 12px 9px 10px;border-radius:var(--r-lg);border:1px solid transparent;background:transparent;color:#fff;font:inherit;text-align:left;cursor:pointer;
  transition:background .25s var(--ease),border-color .25s var(--ease)}
#services .svc-row:hover{background:rgba(255,255,255,.06)}
#services .svc-row[aria-current],#services .svc-row.open{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.2)}
#services .svc-row:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
#services .svc-row-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.1);color:#CFE0FF;transition:background .25s,color .25s}
#services .svc-row[aria-current] .svc-row-ic,#services .svc-row.open .svc-row-ic{background:var(--gold);color:#2e2100}
#services .svc-row-ic svg{width:20px;height:20px}
#services .svc-row-name{font-weight:800;font-size:clamp(1rem,.92rem + .3vw,1.18rem);letter-spacing:-.015em}
#services .svc-row-price{font-weight:800;font-size:var(--t-fine);color:#CFE0FF;white-space:nowrap}
#services .svc-row-go svg{width:18px;height:18px;fill:currentColor;opacity:.55;transition:transform .3s var(--ease),opacity .3s}
#services .svc-row[aria-current] .svc-row-go svg{opacity:1;transform:translateX(3px)}
#services .svc-walkin{margin:0;color:rgba(255,255,255,.78);font-size:var(--t-fine)}
#services .svc-walkin b{color:#fff}
#services .svc-walkin a{color:#fff;font-weight:800;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px;white-space:nowrap}
#services .svc-preview{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-xl);min-height:clamp(440px,64vh,640px);display:flex;align-items:flex-end;
  border:1px solid rgba(255,255,255,.16);box-shadow:0 40px 80px -40px rgba(0,0,0,.8);background:#0B1D3E}
#services .svc-preview-photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;max-width:none;object-fit:cover}
#services .svc-preview::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,13,30,0) 0%,rgba(6,13,30,.15) 22%,rgba(6,13,30,.82) 42%,rgba(6,13,30,.96) 58%,rgba(6,13,30,.98) 100%)}
#services .svc-preview.is-swapping .svc-preview-photo{animation:svc-swap .6s var(--ease) both}
#services .svc-preview.is-swapping .svc-preview-body{animation:svc-body .5s var(--ease) both}
@keyframes svc-swap{from{opacity:.25;transform:scale(1.04)}}
@keyframes svc-body{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){#services .svc-preview.is-swapping .svc-preview-photo,#services .svc-preview.is-swapping .svc-preview-body{animation:none}}
#services .svc-preview-body{padding:clamp(20px,2.4vw,34px);display:grid;gap:10px;width:100%}
#services .svc-preview-price{margin:0;justify-self:start;padding:6px 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.94);color:var(--ink);font-weight:800;font-size:var(--t-fine)}
#services .svc-preview-name{margin:0;color:#fff;font-size:clamp(1.6rem,1.1rem + 1.4vw,2.5rem);letter-spacing:-.035em}
#services .acc-desc{color:rgba(255,255,255,.86);margin:0 0 12px;max-width:64ch}
#services .acc-list{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px 18px}
#services .acc-list li{display:flex;gap:8px;align-items:flex-start;color:rgba(255,255,255,.9);font-size:var(--t-fine)}
#services .acc-list svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px;fill:#7DE8B5}
#services .acc-note{color:rgba(255,255,255,.66);font-size:var(--t-fine);margin:0 0 12px}
#services .acc-actions{display:flex;flex-wrap:wrap;gap:10px}
#services .acc-actions .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4);background:transparent}
#services .svc-list .acc-panel{display:none}
@media (min-width:980px) and (max-height:860px){
  #services .svc-row{min-height:46px;padding-block:6px}
  #services .acc-note{display:none}
  #services .svc-preview{min-height:clamp(400px,62vh,560px)}
}
@media (max-width:979px){
  #services .svc-index{grid-template-columns:1fr}
  #services .svc-preview{display:none}
  #services .svc-side .sec-h{text-align:center}
  #services .svc-side .sec-h p{margin-left:auto}
  #services .svc-list{gap:6px}
  #services .svc-row{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
  #services .svc-row[aria-current]:not(.open){background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
  #services .svc-row[aria-current]:not(.open) .svc-row-ic{background:rgba(255,255,255,.1);color:#CFE0FF}
  #services .svc-row .svc-row-go svg{transform:rotate(90deg)}
  #services .svc-row.open .svc-row-go svg{transform:rotate(-90deg);opacity:1}
  #services .svc-list .acc-panel{display:block;overflow:hidden;transition:height .45s var(--ease);margin:0 0 6px;padding:0 14px;
    border-radius:var(--r-lg);background:rgba(255,255,255,.05)}
  #services .svc-list .acc-panel:not([hidden]){padding:14px}
  #services .svc-list .acc-panel[hidden]{display:none}
  #services .svc-walkin{text-align:center}
}
@media (max-width:420px){
  #services .svc-row{gap:10px;padding:8px 10px 8px 8px}
  #services .svc-row-ic{width:34px;height:34px}
  #services .svc-row-price{font-size:.74rem}
}

/* Homepage anchors land a full-screen section flush with the top of the
   viewport. Each of these is exactly one screen tall and centres its own
   content clear of the floating nav, so the root scroll-padding (meant for
   ordinary content anchors) would push its lower 118px off screen and make
   the content sit visibly low. Desktop only: on phones these sections are
   content-height and keep the padding. */
@media (min-width:821px) and (min-height:600px){
  .pg-home #servicing,.pg-home #about,.pg-home #services,.pg-home #cars,.pg-home #diagnostics,
  .pg-home #bodywork,.pg-home #fleet,.pg-home #why,.pg-home #contact{scroll-margin-top:-118px}
}

/* Homepage About band, one screen on a desktop: the year sits beside the
   headline and story instead of above them, and the line, figures and foot
   follow full width. */
@media (min-width:1100px) and (min-height:680px){
  .pg-home #about{min-height:100dvh;padding-top:calc(var(--cut) + clamp(10px,2vh,32px));padding-bottom:calc(var(--cut) * .6 + clamp(10px,2vh,32px))}
  #about .ab{grid-template-columns:minmax(0,.52fr) minmax(0,.48fr);column-gap:clamp(28px,4vw,64px);row-gap:clamp(12px,2vh,22px);align-items:center}
  /* The story starts level with the eyebrow, beside the year, so nothing
     waits below the numerals and the line and figures move up. */
  #about .ab-line-head,#about .ab-line,#about .ab-figs,#about .ab-foot{grid-column:1/-1}
  #about .ab-top{grid-column:1;grid-row:1}
  #about .ab-kicker{display:none}
  #about .ab-year{grid-column:1;grid-row:2;font-size:clamp(7rem,min(19vw,34vh),20rem)}
  #about .ab-row{grid-column:2;grid-row:1/3;align-self:start;grid-template-columns:1fr;gap:14px}
  #about .ab-row h2{max-width:18ch}
}
@media (min-width:1100px) and (min-height:680px) and (max-height:960px){
  #about .ab-foot{display:none}
}
@media (min-width:1100px) and (min-height:680px) and (max-height:880px){
  #about .ab-checks{display:none}
}

/* ==========================================================================
   Homepage Contact, the three ways in: a call tile that carries the number
   and hours, WhatsApp and email side by side under it, and the breakdown
   line as a slim strip. Homepage only: the same REACH markup closes the
   inner pages, which keep their own card.
   ========================================================================== */
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:10px;padding:0;background:none;border:0;box-shadow:none;text-align:left}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-alt{display:contents}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-tel{grid-column:1/-1;display:flex;align-items:center;gap:16px;justify-content:flex-start;
  padding:clamp(16px,2.2vh,24px) clamp(18px,2vw,26px) 0;border-radius:var(--r-xl) var(--r-xl) 0 0;
  background:linear-gradient(180deg,var(--cobalt),#1546B8);color:#fff;font-size:clamp(1.9rem,1.2rem + 1.8vw,2.9rem);font-weight:800;letter-spacing:-.03em;box-shadow:none}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-tel svg{width:.8em;height:.8em;flex:0 0 auto;fill:#fff;padding:.28em;box-sizing:content-box;border-radius:50%;background:rgba(255,255,255,.18)}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-tel:hover{background:linear-gradient(150deg,var(--cobalt2),var(--cobalt))}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-sub{grid-column:1/-1;max-width:none;width:auto;margin:-10px 0 0;padding:6px clamp(18px,2vw,26px) clamp(14px,2vh,20px);
  border-radius:0 0 var(--r-xl) var(--r-xl);background:#1546B8;color:rgba(255,255,255,.88);font-size:var(--t-fine);text-align:left}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-alt .btn{justify-content:flex-start;min-height:clamp(56px,7vh,68px);border-radius:var(--r-lg);padding:0 18px;font-size:var(--t-body)}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-alt .btn-ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.24);color:#fff;box-shadow:none}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-alt .btn-ghost:hover{background:rgba(255,255,255,.14)}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-note{grid-column:1/-1;margin:2px 0 0;color:rgba(255,255,255,.62);font-size:var(--t-fine);text-align:left}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-recover{grid-column:1/-1;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:12px;max-width:none;margin:0;padding:12px 16px;border-radius:var(--r-lg);
  background:rgba(232,163,23,.12);border:1px solid rgba(232,163,23,.32);text-align:left}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-recover svg{flex:0 0 auto;width:22px;height:22px;color:var(--gold);margin:0}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-recover p{flex:1 1 auto;min-width:0;width:auto;margin:0;font-size:var(--t-fine);color:rgba(255,255,255,.86)}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-recover b{color:#fff}
.pg-home #contact .napcard{background:rgba(9,20,44,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.pg-home #contact .mapembed{border:1px solid rgba(255,255,255,.18)}
@media (max-width:420px){
  :is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-alt .btn{justify-content:center}
}
/* On the inner pages the same three ways in sit centred under the heading. */
body:is(.pg-service,.pg-area,.pg-brand) #quote .reach{max-width:760px;margin:clamp(20px,3vw,32px) auto 0}

/* ---------- homepage contact: one card for the visit ----------
   The phone and email are already the left column's call tile, so the visit
   card drops them: status and address on one line, the week as two columns,
   then directions. The areas wrap to two rows instead of running off the edge,
   and the map takes the height the card gives back. */
@media (min-width:1100px) and (min-height:700px){
  .pg-home #contact>.wrap{align-items:center;padding-top:clamp(28px,5vh,56px)}
  .pg-home #contact .find-grid{gap:14px}
  .pg-home #contact .mapembed{height:clamp(200px,30vh,320px);border-radius:var(--r-xl);overflow:hidden}
  .pg-home #contact .area-links{flex-wrap:wrap;overflow:visible;gap:6px}
  .pg-home #contact .area-links a{padding:6px 12px;font-size:var(--t-fine)}
  .pg-home #contact .area-links a:nth-child(n+9):not(.all){display:none}
  .pg-home #contact .area-links a.all{background:var(--gold);color:var(--panel-b);border-color:var(--gold);font-weight:800}
  .pg-home #contact .napcard{grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:10px;padding:18px 22px}
  .pg-home #contact .napcard>#openState{grid-column:2;grid-row:1;align-self:center}
  .pg-home #contact .napcard>.nrow-first{grid-column:1;grid-row:1;border:0;padding:0}
  .pg-home #contact .napcard>.nrow:nth-child(3){display:none}
  .pg-home #contact .napcard>.nrow:nth-child(4){grid-column:1/-1;grid-row:2;padding:10px 0 0;border-top:1px solid rgba(255,255,255,.12)}
  .pg-home #contact .napcard>.nrow:nth-child(4)>svg{display:none}
  .pg-home #contact .nap-hours{width:100%}
  .pg-home #contact .hours{display:grid;grid-template-columns:1fr 1fr;column-gap:18px;row-gap:2px;margin-top:6px}
  .pg-home #contact .hours li{grid-auto-flow:row}
  .pg-home #contact .napcard>.nap-foot{grid-row:3}
}
@media (min-width:1100px) and (min-height:700px){
  .pg-home #contact>.wrap{row-gap:22px}
  .pg-home #contact .sec-h{align-self:end}
  .pg-home #contact .reach{align-self:start}
  .pg-home #contact .hours{grid-template-rows:repeat(4,auto);grid-auto-flow:column}
  .pg-home #contact .mapembed{height:clamp(150px,22vh,240px)}
  .pg-home #contact .napcard{padding:14px 20px;row-gap:6px}
  .pg-home #contact .nap-foot .getdir{min-height:44px}
}
@media (min-width:1100px) and (min-height:700px) and (max-height:820px){
  .pg-home #contact .area-links a:nth-child(n+6):not(.all){display:none}
  .pg-home #contact .nap-note{display:none}
  .pg-home #contact .mapembed{height:clamp(140px,19vh,180px)}
  .pg-home #contact .napcard>.nrow:nth-child(4){padding-top:6px}
}
body:is(.pg-service,.pg-area,.pg-brand) #quote .reach{grid-template-columns:1fr 1fr}
@media (max-width:420px){body:is(.pg-service,.pg-area,.pg-brand) #quote .reach{grid-template-columns:1fr}}

/* ==========================================================================
   The call block, rebuilt as one panel (homepage contact and every inner
   page's closing #quote). It was four loose objects - a blue slab, two
   buttons, a sentence and a strip - each with its own shape. Now one dark
   glass panel with a gold edge: the number as the headline beside a gold
   phone mark, the hours under it, WhatsApp and email as two matching tiles,
   and the no-booking line and recovery note as the panel's footer.
   ========================================================================== */
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach{
  position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0 12px;text-align:left;overflow:hidden;
  padding:clamp(20px,2.6vw,32px);border-radius:var(--r-xl);
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03) 60%),rgba(8,18,40,.55);
  border:1px solid rgba(255,255,255,.16);box-shadow:0 40px 90px -40px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--gold),#F6D27A 50%,var(--gold))}
/* the number */
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-tel{
  grid-column:1/-1;display:flex;align-items:center;gap:clamp(12px,1.6vw,18px);justify-content:flex-start;
  padding:0;margin:0;border-radius:0;background:none;box-shadow:none;color:#fff;
  font-size:clamp(2rem,1.1rem + 2.4vw,3.2rem);font-weight:800;letter-spacing:-.035em;line-height:1;transition:color .25s}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-tel svg{
  width:.5em;height:.5em;padding:.3em;box-sizing:content-box;flex:0 0 auto;border-radius:50%;fill:var(--panel-b);background:var(--gold);
  box-shadow:0 0 0 .14em rgba(232,163,23,.22)}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-tel:hover{background:none;color:#F6D27A}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-tel span{background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;padding-bottom:4px;transition:background-size .35s var(--ease)}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-tel:hover span{background-size:100% 2px}
@media (prefers-reduced-motion:no-preference){
  html.anim :is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-tel svg{animation:reach-ring 2.6s 1s ease-out infinite}
}
@keyframes reach-ring{0%{box-shadow:0 0 0 0 rgba(232,163,23,.45)}70%,100%{box-shadow:0 0 0 .45em rgba(232,163,23,0)}}
/* the hours */
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-sub{
  grid-column:1/-1;max-width:none;width:auto;margin:12px 0 clamp(18px,2.4vw,24px);padding:0 0 clamp(18px,2.4vw,24px);
  border-radius:0;background:none;border-bottom:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.72);font-size:var(--t-fine);line-height:1.6;text-align:left}
/* the two other ways in */
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-alt{display:contents}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-alt .btn{
  position:relative;justify-content:flex-start;gap:12px;min-height:60px;margin:0;padding:0 44px 0 16px;border-radius:var(--r-lg);
  font-size:var(--t-body);font-weight:800;color:#fff;box-shadow:none;transition:transform .25s var(--ease),background .25s,border-color .25s}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-alt .btn::after{
  content:"";position:absolute;right:16px;top:50%;width:9px;height:9px;border:solid currentColor;border-width:2px 2px 0 0;transform:translateY(-50%) rotate(45deg);opacity:.7;transition:right .25s var(--ease)}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-alt .btn:hover{transform:translateY(-2px)}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-alt .btn:hover::after{right:12px}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-alt .btn svg{
  width:20px;height:20px;padding:8px;box-sizing:content-box;border-radius:12px;fill:currentColor;flex:0 0 auto}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-alt .btn-wa{background:var(--wa);border:1px solid transparent}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-alt .btn-wa svg{background:rgba(255,255,255,.18)}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-alt .btn-ghost{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22)}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-alt .btn-ghost svg{background:rgba(157,184,255,.16);fill:#CFE0FF}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-alt .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
/* the footer: a promise and a rescue */
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-note{
  grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:clamp(16px,2vw,22px) 0 0;color:rgba(255,255,255,.66);font-size:var(--t-fine);line-height:1.5;text-align:left}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-note::before{
  content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#3BD38A;box-shadow:0 0 0 4px rgba(59,211,138,.18)}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-recover{
  grid-column:1/-1;display:flex;align-items:center;gap:12px;flex-wrap:nowrap;max-width:none;
  margin:clamp(14px,1.8vw,18px) calc(-1 * clamp(20px,2.6vw,32px)) calc(-1 * clamp(20px,2.6vw,32px));
  padding:clamp(14px,1.8vw,18px) clamp(20px,2.6vw,32px);border:0;border-top:1px dashed rgba(232,163,23,.4);border-radius:0;
  background:rgba(232,163,23,.08);text-align:left}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-recover svg{width:24px;height:24px;flex:0 0 auto;margin:0;color:var(--gold)}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-recover p{margin:0;flex:1 1 auto;min-width:0;font-size:var(--t-fine);line-height:1.5;color:rgba(255,255,255,.8)}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-recover b{color:#F6D27A}
@media (max-width:420px){
  :is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach{grid-template-columns:1fr;row-gap:10px}
  :is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-sub{margin-bottom:8px}
}
@media (min-width:1100px) and (max-height:760px){
  html body.pg-home #contact .reach{padding:16px 20px}
  html body.pg-home #contact .reach-tel{font-size:clamp(1.8rem,1rem + 2vw,2.5rem)}
  html body.pg-home #contact .reach-sub{margin:8px 0 12px;padding-bottom:12px}
  html body.pg-home #contact .reach-alt .btn{min-height:50px}
  html body.pg-home #contact .reach-note{display:none}
  html body.pg-home #contact .reach-recover{margin:10px -20px -16px;padding:10px 20px}
}
/* The two tiles share the panel equally and never push past it: plain 1fr
   lets a column grow to its button's text, which spilled the email tile out
   of the panel on a 430px phone. Phones stack them. */
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach > *{min-width:0}
:is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-alt .btn{min-width:0;white-space:normal}
@media (max-width:560px){
  html :is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach{grid-template-columns:minmax(0,1fr);row-gap:10px}
  html :is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-sub{margin-bottom:8px}
  html :is(.pg-home #contact, body:is(.pg-service,.pg-area,.pg-brand) #quote) .reach-tel{font-size:clamp(1.7rem,1rem + 4.4vw,2.2rem)}
}