/* ---------- 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}
@font-face{font-family:"PlexM";src:url("fonts/plexm-500.woff2") format("woff2");font-weight:500;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);
  --green:#0E9F6E; --gold:#E8A317; --wa:#22C35E; --wa-dk:#1AA34E; --wa-ink:#12151C;
  --plate:#F6D200; --plate-blue:#0A3AA6; --plate-ink:#12151C;
  --panel-a:#183560; --panel-b:#0B1D3E; --panel-fg:#ffffff; --panel-sub:rgba(255,255,255,.82);
  --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;
}
*{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:"Hanken",system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.mesh{position:fixed;inset:0;z-index:0;pointer-events:none;
  background: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)}
.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:"Hanken",sans-serif;font-weight:800;line-height:1.0;letter-spacing:-.028em;margin:0;text-wrap:balance}
p{margin:0}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
.mono{font-family:"PlexM",monospace}
:focus-visible{outline:2.5px solid var(--cobalt);outline-offset:3px;border-radius:var(--r-sm)}
.ey{font-family:"PlexM",monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cobalt);font-weight:500}

.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:"Hanken";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(37,211,102,.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:"Hanken";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}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
.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:1.04rem;max-width:54ch;margin:16px 0 24px;line-height:1.5}

/* single ask */
.hero-ask{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-ask .hero-call{display:none}
.hero-ask .hero-call{background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.55);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero-ask .hero-call:hover{background:rgba(255,255,255,.26);border-color:#fff;color:#fff}
.hero-ask .hero-call svg{width:1.05em;height:1.05em;fill:currentColor;flex:0 0 auto}

/* 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:"PlexM",monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.72);padding-left:16px;border-left:1px solid rgba(255,255,255,.28)}
@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))}
.hero-tabs{justify-content:flex-start}
.hero-tabs::before,.hero-tabs::after{content:"";flex:1 1 0;min-width:0;max-width:calc((100% - var(--maxw)) / 2)}
.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:.92rem;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:14px}
.rating .val{font-family:"Hanken";font-weight:800;font-size:14px}.rating .cnt{font-family:"PlexM";font-size:12px;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:64ch}
.sec-h h2{font-size:clamp(2.2rem,4.2vw,3.4rem);margin-top:16px;letter-spacing:-.03em}
.sec-h h2:first-child,.hm-head h3:first-child{margin-top:0}
.sec-h p{color:var(--ink2);margin-top:16px;font-size:1.08rem}
.sec-h.center{margin:0 auto 48px;text-align:center}
.lead{color:var(--ink2);font-size:1.12rem;line-height:1.6;max-width:56ch;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{font-size:clamp(.95rem,1.9vh,1.08rem);margin-top:12px}
#servicing .sec-h h2{font-size:clamp(1.9rem,4.6vh,3.4rem);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{font-size:clamp(1.7rem,4.2vh,2.4rem);margin-top:10px}
  #servicing .sec-h p{font-size:.92rem;line-height:1.45;margin-top:10px}
  .ptile .pd{font-size:.86rem}
  .cd-band{padding:12px 16px;font-size:.78rem;gap:8px;line-height:1.45}
  .cd-band svg{width:17px;height:17px}
  .price-note{font-size:.64rem;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:"Hanken";font-weight:800;font-size:1.3rem;letter-spacing:-.02em}
.ptile .pv{font-family:"Hanken";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:.9rem;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:linear-gradient(158deg,var(--panel-a),var(--panel-b));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:linear-gradient(90deg,var(--gold),#F6CE17);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:"PlexM",monospace;font-size:.58rem;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)}
.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:"PlexM";font-size:.86rem;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:.82rem;color:var(--ink3);margin-top:clamp(12px,1.8vh,20px);text-align:left;line-height:1.6;max-width:74ch}
.freecode{font-family:"PlexM";font-weight:600;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:"PlexM",monospace;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.split h2{font-size:clamp(2rem,3.8vw,3rem);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:1.02rem}
.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}

/* services bento */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(200px,auto);gap:16px}
.card.feature{grid-column:span 2}
.card.plain{cursor:default}
.card.plain:hover{transform:none}
/* two of the seven cells carry a photograph, one is flat: a grid of identical
   glass cards reads as filler no matter how good the copy is */
.card.feature{--photo:url("/assets/photos/mechanic-oil.webp");--photo-pos:center 42%;
  --scrim:linear-gradient(100deg,rgba(8,15,32,.90) 0%,rgba(8,15,32,.72) 46%,rgba(8,15,32,.30) 100%)}
.card.feature.alt{--photo:url("/assets/photos/geo-wheel.webp");--photo-pos:center 50%}
.card.feature::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--scrim),var(--photo) var(--photo-pos)/cover no-repeat}
.card.feature{background:#0C1424;border-color:rgba(255,255,255,.14)}
.card.feature>*{position:relative;z-index:1;max-width:62%}
.card.feature h3{font-size:1.8rem;color:#fff}
.card.feature p{color:rgba(255,255,255,.84)}
.card.feature .ic{color:#8FB4FF}
.card.feature .big{color:#fff}
.card.feature .big .vat,.card.feature .big small{color:rgba(255,255,255,.72)}
.card.feature .card-more{color:#9DBBFF}
.card.feature .card-price{color:#fff}
.card.feature .card-foot{border-top-color:rgba(255,255,255,.22)}
.card.feature:hover{border-color:rgba(255,255,255,.32)}
.card.plain{background:var(--cobalt-soft);border-color:rgba(30,86,224,.18);box-shadow:none}
.card{padding:28px;display:flex;flex-direction:column;text-align:left;font-family:inherit;color:inherit;cursor:pointer;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;position:relative;transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.card::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%)}
.card:hover{transform:translateY(-6px);box-shadow:var(--soft)}.card:hover::before{opacity:1}
.card .ic{width:44px;height:44px;color:var(--cobalt);margin-bottom:18px}
.card h3{font-size:1.4rem;letter-spacing:-.02em;margin:0 0 8px}
.card p{color:var(--ink2);font-size:.92rem}
.card.tall{grid-row:span 2;background:#0C1424;border-color:rgba(255,255,255,.14)}
.card.tall::after{content:"";position:absolute;inset:0;z-index:0;background:
  linear-gradient(170deg,rgba(8,15,32,.42) 0%,rgba(8,15,32,.80) 52%,rgba(8,15,32,.95) 100%),
  url("/assets/photos/mechanic-oil.webp") center 38%/cover no-repeat;pointer-events:none}
.card.tall>*{position:relative;z-index:1}
.card.tall h3{font-size:1.9rem;color:#fff}
.card.tall p{color:rgba(255,255,255,.82)}
.card.tall .ic{color:#8FB4FF}
.card.tall .big{color:#fff}
.card.tall .big .vat,.card.tall .big small{color:rgba(255,255,255,.7)}
.card.tall .card-more{color:#9DBBFF}
.card.tall:hover{border-color:rgba(255,255,255,.3)}
.card .big{font-weight:800;font-size:2.9rem;color:var(--cobalt);letter-spacing:-.03em;margin-top:auto;line-height:1}
.card .big .vat{font-size:.8rem;font-weight:700;color:var(--ink3)}
.card .big small{display:block;font-family:"PlexM";font-size:.64rem;color:var(--ink3);letter-spacing:.08em;text-transform:uppercase;margin-top:8px;font-weight:500}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.card-price{font-family:"Hanken";font-weight:800;font-size:1.02rem}
.card-more{font-family:"PlexM";font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--cobalt);display:inline-flex;align-items:center;gap:4px}
.card-more svg{width:14px;height:14px;fill:currentColor;transition:transform .16s}
.card:hover .card-more svg{transform:translateX(3px)}
.svc-note{font-family:"PlexM";font-size:.74rem;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:"PlexM";font-size:.78rem;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:600}
.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}
.grid3 .card{min-height:210px;cursor:default}
.grid3 .card:hover{transform:none;box-shadow:var(--soft-sm),var(--glass-inset)}
.grid3 .card:hover::before{opacity:0}

/* 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:.78rem;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:52ch}

/* bodywork alert */
.bw-alert{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:26px 32px;margin-bottom:32px;background:linear-gradient(150deg,var(--panel-a),var(--panel-b));color:#fff;border-radius:var(--r-xl);box-shadow:var(--soft)}
.bw-alert .bic{flex:0 0 auto;width:56px;height:56px;border-radius:var(--r-lg);background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center}
.bw-alert .bic svg{width:28px;height:28px;fill:#fff}
.bw-alert .bt{flex:1;min-width:240px}
.bw-alert .bt h3{color:#fff;font-size:clamp(1.4rem,2.6vw,1.8rem)}
.bw-alert .bt p{color:var(--panel-sub);margin-top:6px}
.bw-alert .btn-primary{background:#fff;color:var(--cobalt)}

/* 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}
.rev .rs{color:var(--gold);letter-spacing:1px;font-size:14px}
.rev p{font-size:.96rem;margin:12px 0 14px;line-height:1.55;color:var(--ink)}
.rev .who{font-family:"PlexM";font-size:.76rem;color:var(--ink2)}.rev .who b{color:var(--ink);font-weight:500}
.rev-foot{font-family:"PlexM";font-size:.74rem;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:.94rem;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:"Hanken";font-weight:700;font-size:.9rem;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:.92rem;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:"Hanken";font-weight:800;font-size:.78rem;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:.86rem;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:"PlexM";font-size:.78rem;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 .bic{flex-shrink:0;width:56px;height:56px;border-radius:var(--r-lg);background:var(--cobalt-soft);color:var(--cobalt);display:flex;align-items:center;justify-content:center}
.breakdown .bic svg{width:28px;height:28px}
.breakdown .bt{flex:1;min-width:230px}
.breakdown .bt h3{font-size:1.5rem;letter-spacing:-.02em;margin-bottom:4px}
.breakdown .bt p{color:var(--ink2);font-size:.96rem}
.breakdown .bcall{font-family:"PlexM",monospace;font-size:.92rem;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:"PlexM",monospace;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.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.6fr 1fr 1fr 1.2fr;gap:32px}
footer .flogo{height:34px;width:auto;margin-bottom:16px;filter:var(--logo-filter)}
footer h4{font-family:"PlexM",monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin:0 0 14px;font-weight:500}
footer a{display:block;color:var(--ink2);padding:5px 0;font-size:.92rem}footer a:hover{color:var(--cobalt)}
footer .addr{color:var(--ink2);font-size:.92rem;line-height:1.7}
footer .fhours{font-family:"PlexM",monospace;font-size:.84rem;color:var(--ink);line-height:1.9}
.ftb{border-top:1px solid var(--line);margin-top:40px;padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:"PlexM",monospace;font-size:.74rem;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:"Hanken";font-weight:800;font-size:15px;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} }

/* ---------- 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}
  /* a 2x2 of numbers reads as a block of four, so it needs space between them,
     not a cross of hairlines cutting it into quadrants */
  #about .fig-grid{gap:16px 20px}
  #about .fig .l{max-width:none}
  #about .sec-h h2{font-size:clamp(1.45rem,6.2vw,1.9rem)}
  #about .tl-card img{height:clamp(96px,16dvh,150px)}
}
/* 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){
  .sp-full .sp-media,#why .geo-carousel{max-height:11.5dvh}
  #fleet .checks{gap:5px}
  #fleet .lead2{margin:5px 0 8px}
  .sp-full h2{font-size:1.16rem}
  .sp-full .lead2{font-size:.76rem;margin:6px 0 9px}
  #bodywork .checks li,#fleet .checks li{font-size:.74rem;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 .sp-media,#why .geo-carousel{max-height:14dvh}
  .sp-full h2{font-size:1.22rem}
  .sp-full .lead2{font-size:.78rem;margin:7px 0 10px}
  .sp-label{margin-bottom:8px}
  #bodywork .checks li,#fleet .checks li{font-size:.76rem}
  .checks{gap:7px}
  #about .sec-h h2{font-size:1.3rem}
  #about .sec-h p{font-size:.78rem;line-height:1.45}
  #about .heritage-merged{padding:12px}
  #about .hm-head h3{font-size:.98rem}
  #about .tl-card img{height:clamp(70px,11dvh,110px)}
  #about .tl-body{padding:9px 11px 11px}
  #about .fig-grid{gap:10px 14px}
  #about .fig .n{font-size:1.22rem}
  #about .fig .l{font-size:.66rem;margin-top:4px}
  #about .figures{margin-top:10px}
}
/* 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)}
  .hero-ask{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
  .hero-ask .mag{display:none}
  .hero-ask .hero-call{display:inline-flex}
  .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:.88rem;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:.62rem;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}
  .hero-tabs{padding:0 20px var(--rail-pb);flex-wrap:nowrap;overflow-x:auto;
    -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:1rem;max-width:none;margin:16px 0 24px}
}
@media (max-width:620px){ .hero-tabs a{font-size:.85rem;padding:.55em 1em;min-height:42px} }
@media (max-width:560px){
  /* drop the ticks so all three still sit on one centred row */
}
@media (max-width:380px){
}

/* heritage timeline (spotlighted) */
.tl-head{text-align:center;max-width:640px;margin:56px auto 0}
.tl-head .ey{display:block}
.tl-head h3{font-size:clamp(1.6rem,3.2vw,2.4rem);letter-spacing:-.03em;margin-top:12px}
.tl-head p{color:var(--ink2);margin-top:12px;font-size:1.02rem}
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px;counter-reset:tl}
@media(max-width:760px){ .timeline{grid-template-columns:1fr;gap:16px} }
.tl-card{padding:0;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--soft-sm);backdrop-filter:none;-webkit-backdrop-filter:none;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.tl-card:hover{transform:translateY(-6px);box-shadow:var(--soft)}
.tl-media{position:relative;overflow:hidden}
.tl-media{overflow:hidden}
/* each source is a photograph of a framed print on the workshop wall, and the print
   sits differently in every frame, so the crop is measured per image: zoom past the
   frame, mount and printed caption so only the premises itself is left. */
.tl-card img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  transform-origin:center;transition:transform .6s var(--ease)}
.timeline .tl-card:nth-child(1) img{transform:scale(1.95) translate(-2.1%,-1.7%)}
.timeline .tl-card:nth-child(2) img{transform:scale(1.88) translate(-.7%,-2.4%)}
.timeline .tl-card:nth-child(3) img{transform:scale(1.72) translate(2.5%,-1.1%)}
.timeline .tl-card:nth-child(1):hover img{transform:scale(2.04) translate(-2.1%,-1.7%)}
.timeline .tl-card:nth-child(2):hover img{transform:scale(1.97) translate(-.7%,-2.4%)}
.timeline .tl-card:nth-child(3):hover img{transform:scale(1.80) translate(2.5%,-1.1%)}
.tl-yr{display:block;font-family:"PlexM",monospace;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt);margin-bottom:8px}
.tl-body{padding:20px 22px 24px}
.tl-place{font-family:"Hanken";font-weight:800;font-size:1.18rem;margin:0 0 6px;letter-spacing:-.01em}
.tl-sub{font-size:.92rem;color:var(--ink2);margin:0;line-height:1.55}
/* ===== 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))}

/* everything inside the band inverts to read on the dark panel */
#about .sec-h .ey{color:#9DBBFF}
#about .sec-h h2{color:#fff}
#about .sec-h p{color:rgba(255,255,255,.82)}
#about .about-checks li{color:rgba(255,255,255,.9)}
#about .checks .ck{background:rgba(255,255,255,.16);color:#fff}
#about .heritage-merged{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:none}
#about .hm-head .ey{color:#9DBBFF}
#about .hm-head h3{color:#fff}
#about .hm-head p{color:rgba(255,255,255,.78)}
#about .tl-card{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);box-shadow:none}
#about .tl-yr{color:#9DBBFF}
#about .tl-place{color:#fff}
#about .tl-sub{color:rgba(255,255,255,.74)}
#about .hm-stats{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.16)}
#about .hm-stats>div{background:rgba(10,23,48,.55)}
#about .hm-stats .n{color:#9DBBFF}
#about .hm-stats .l{color:rgba(255,255,255,.66)}


@media(max-width:430px){
  /* the trailing sentence just restates the headline - drop it where space is scarce */
  .cd-more{display:none}
  #servicing .sec-h h2{font-size:clamp(1.6rem,3.9vh,2.1rem)}
  .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{font-size:clamp(1.5rem,3.6vh,2rem);margin-top:8px}
  #servicing .sec-h p{font-size:.85rem;line-height:1.4;margin-top:8px}
  .cd-more{display:none}
  .cd-band{padding:10px 14px;font-size:.72rem;margin-top:10px;gap:8px}
  .price-note{font-size:.6rem;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:.82rem;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){
  #servicing .sec-h p{font-size:.8rem}
  #servicing .sec-h h2{font-size:clamp(1.4rem,3.3vh,1.8rem)}
  .ptile{padding:13px 16px}
  .ptile .pd{font-size:.78rem;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:.68rem;margin-top:8px}
  .price-note{font-size:.56rem;margin-top:6px}
}

/* merged heritage block (story timeline + stats in one container) */
.about-checks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 32px;margin:0 0 40px;max-width:none}
@media(max-width:760px){ .about-checks{grid-template-columns:1fr;gap:12px} }
.about-checks li{font-size:.98rem}
.heritage-merged{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(24px,3.2vw,42px);box-shadow:var(--soft-sm)}
.hm-head{max-width:640px;margin:0 0 26px}
.hm-head .ey{display:block}
.hm-head h3{font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.03em;margin-top:10px}
.hm-head p{color:var(--ink2);margin-top:10px;font-size:1rem;line-height:1.55}
.heritage-merged .timeline{margin-top:0}
.hm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:20px;background:var(--line);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
@media(max-width:560px){ .hm-stats{grid-template-columns:1fr 1fr} }
.hm-stats>div{background:var(--surface);padding:24px 18px;text-align:center}
.hm-stats .n{font-family:"Hanken";font-weight:800;font-size:1.7rem;letter-spacing:-.02em;color:var(--cobalt);line-height:1}
.hm-stats .l{font-family:"PlexM",monospace;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-top:8px}

/* family / human gallery */
.family-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:172px;gap:14px;
  margin:40px auto 0;max-width:1080px}
@media(max-width:900px){ .family-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:190px} .fam.tall{grid-row:span 1} .fam.wide{grid-column:span 1} }
.fam{border-radius:var(--r-lg);overflow:hidden;position:relative;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{position:absolute;left:0;right:0;bottom:0;padding:30px 15px 12px;background:linear-gradient(0deg,rgba(6,9,16,.72),transparent);color:#fff;font-family:"PlexM";font-size:.72rem;letter-spacing:.02em}
@media(max-width:560px){ .family-grid{grid-template-columns:1fr 1fr;grid-auto-rows:150px} .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:"PlexM";font-size:.72rem;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:.78rem;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}
  .bento{grid-template-columns:1fr 1fr}
  .card.feature{grid-column:span 2}
  .card.plain{grid-column:span 2}
  .card.feature>*{max-width:78%}
  .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}
  .bento,footer .cols{grid-template-columns:1fr}
  .card.feature,.card.plain{grid-column:span 1}
  .card.feature>*{max-width:100%}
  .card.feature{--scrim:linear-gradient(178deg,rgba(8,15,32,.62) 0%,rgba(8,15,32,.88) 46%,rgba(8,15,32,.96) 100%)}
  .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:"Hanken",sans-serif;text-transform:none;letter-spacing:normal}
.cd-band{font-size:.95rem}
.price-note{font-size:.82rem;line-height:1.6;max-width:74ch}
.svc-note{font-size:.9rem;line-height:1.6}
.freecode{font-family:"PlexM",monospace}
.cd-band b{font-weight:700}

/* ---------- statement type: the loud moments now sit clearly above the workaday ones ---------- */
.sec-h h2.display{font-size:clamp(2.1rem,4.5vw,3.8rem);letter-spacing:-.04em;line-height:1.02}
#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)}
.car img{width:100%;height:100%;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:clamp(.84rem,1.6vh,.98rem);
  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:clamp(96px,15.5dvh,150px) !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 only has room for two rows of cars once the heading has had its say */
@media(max-height:760px) and (max-width:860px){
  #cars .car:nth-child(n+5){display:none}
  #cars .car-grid{grid-auto-rows:clamp(88px,14dvh,130px) !important}
  #cars .sec-h h2{font-size:1.28rem}
  #cars .sec-h p{font-size:.78rem;line-height:1.4}
  #cars .sec-h{margin-bottom:10px}
  #cars .car-foot{font-size:.72rem;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:clamp(150px,26dvh,250px);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 ---------- */
.figures{max-width:var(--maxw);margin:56px auto 0;padding:0 30px}
.fig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.4vw,40px)}
.fig{padding:0}
.fig .n{font-family:"Hanken";font-weight:800;font-size:clamp(2.3rem,4.4vw,3.9rem);letter-spacing:-.045em;
  line-height:.9;color:var(--ink);font-variant-numeric:tabular-nums}
.fig .n em{font-style:normal;color:var(--cobalt)}
.fig .l{margin-top:14px;color:var(--ink2);font-size:.93rem;line-height:1.45;max-width:20ch}
/* the about section sits on a photograph, so the figures need their own ground */
/* inside the story panel now, so it needs no surface of its own */
#about .figures{background:none;border:0;padding:0;box-shadow:none;margin:34px 0 0;max-width:none}

#about .fig .n{color:#fff}
#about .fig .n em{color:#9DBBFF}
#about .fig .l{color:rgba(255,255,255,.72)}
@media(max-width:820px){
  .fig-grid{grid-template-columns:1fr 1fr;gap:18px 20px}
}


/* ---------- 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:.88rem;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:.8rem}
}

/* ---------- heritage lightbox: the framed prints open full size ---------- */
.tl-card{font-family:inherit;cursor:zoom-in;text-align:left;width:100%}
.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:"Hanken";font-weight:800;font-size:1.05rem;margin-bottom:3px}
.lb-cap .y{font-family:"PlexM",monospace;font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:#9DBBFF;display:block;margin-bottom:6px}
.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:44ch;font-size:clamp(.9rem,1.05vw,1rem)}
.sp-full .checks li{font-size:clamp(.86rem,1vw,.96rem)}


@media(max-width:560px){
  .close-meta span{font-size:.58rem;padding:7px 9px}
  #about .tl-card{grid-template-columns:88px 1fr}
}
/* 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. */
@media(max-width:760px){
      }
/* 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:1.1rem;letter-spacing:-.02em;margin:0}
.sp-sub p{color:var(--ink2);font-size:.94rem;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:"PlexM",monospace;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2)}
.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:"PlexM",monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);margin:30px 0 12px}
.area-links a{font-size:.9rem;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}
}
@media(max-width:620px){
      }

/* ---------- 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:"PlexM",monospace;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);margin:0 0 12px}
.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:"PlexM",monospace;font-size:.6rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink2);white-space:nowrap}
.marque-grid{justify-content:center}
.marque-lead,.marque-block{text-align:center}
.marque-note{color:var(--ink3);font-size:.86rem;margin:12px auto 0;line-height:1.5;
  max-width:52ch;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 */
  .sp-full .sp-media,#why .geo-carousel{max-height:13dvh}
  #fleet .checks li{font-size:.72rem;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}

/* 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}
  .sp-full .sp-media{aspect-ratio:16/10;height:auto}
}

/* ---------- 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:"Hanken";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:1rem;line-height:1.55;max-width:46ch;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:"PlexM",monospace;font-size:.72rem;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:"PlexM",monospace;font-size:.64rem;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}
.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:.82rem;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:.72rem;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:.66rem;padding:7px 12px} }
.nap-note{font-family:"PlexM",monospace;font-size:.68rem;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{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)}
#services .card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);box-shadow:none;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#services .card p{color:rgba(255,255,255,.78)}
#services .card .ic{color:#9DBBFF}
#services .card-price{color:#fff}
#services .card-more{color:#9DBBFF}
#services .card-foot{border-top-color:rgba(255,255,255,.2)}
#services .card.plain{background:rgba(157,187,255,.10);border-color:rgba(157,187,255,.22)}
#services .card.feature{border-color:rgba(255,255,255,.24)}

/* ---------- 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 .sp-media{height:auto;max-height:25dvh;aspect-ratio:16/10}
  .sp-full .split{gap:20px}
  .sp-full h2{font-size:clamp(1.5rem,6.4vw,1.95rem)}
  .sp-full .lead2{font-size:.92rem;margin:12px 0 16px}
  .sp-label{margin-bottom:12px;font-size:.58rem;padding:6px 11px}
  .marque{width:42px;height:42px}.marque img{width:21px;height:21px}
  .marque.txt{font-size:.54rem;padding:0 9px}
  .marque-block{margin-top:16px}
  .marque-block + .marque-block{margin-top:14px;padding-top:14px}
  .marque-note{font-size:.76rem;margin-top:8px}
  #bodywork .checks li,#fleet .checks li{font-size:.9rem}
  .sp-cta{margin-top:16px}

  /* about: the three checks repeat facts the figures row states below */
  #about .about-checks{display:none}
  #about .sec-h p{font-size:.9rem;line-height:1.5}
  #about .heritage-merged{padding:18px}
  .timeline{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-top:18px}
  .timeline::-webkit-scrollbar{display:none}
  .tl-card{scroll-snap-align:start}
  #about .figures{margin-top:18px}
  #about .fig{padding:0}
  #about .fig .n{font-size:clamp(1.85rem,6.2vw,2.5rem)}
  #about .fig .l{font-size:clamp(.85rem,1.7vh,1rem);margin-top:9px;line-height:1.5}

  /* services: seven cards become a rail */
  .bento{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .bento::-webkit-scrollbar{display:none}
  .card{scroll-snap-align:start}
  .card.feature,.card.plain{grid-column:span 1}
  #services .sec-h{margin-bottom:16px}
  .bw-alert{gap:12px;padding:16px 18px;margin-bottom:0;align-items:flex-start}
  .bw-alert .bic{width:38px;height:38px;border-radius:var(--r-md)}
  .bw-alert .bic svg{width:20px;height:20px}
  .bw-alert .bt{min-width:0;flex:1 1 100%}
  .bw-alert .bt h3{font-size:1.02rem;line-height:1.25}
  .bw-alert .bt p{font-size:.8rem;margin-top:4px;line-height:1.45}
  .bw-alert .btn{width:100%;justify-content:center}
  .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)}

#about .sec-h{margin-bottom:clamp(12px,2vh,26px);max-width:820px}
#about .sec-h h2{font-size:clamp(1.6rem,3.9vh,2.7rem);margin-top:clamp(6px,1.2vh,14px)}
#about .sec-h p{font-size:clamp(.85rem,1.7vh,1rem);line-height:1.5;margin-top:clamp(8px,1.4vh,14px)}
#about .about-checks{display:none}
#about .heritage-merged{padding:clamp(16px,2.4vh,32px)}
#about .hm-head h3{font-size:clamp(1.1rem,2.4vh,1.6rem)}
#about .hm-head p{font-size:clamp(.8rem,1.5vh,.95rem);margin-top:6px}
#about .timeline{margin-top:clamp(12px,2vh,24px);gap:clamp(10px,1.6vh,20px)}
#about .tl-card img{aspect-ratio:auto;height:clamp(96px,15vh,190px);object-fit:cover;object-position:center 45%}
#about .tl-body{padding:clamp(10px,1.6vh,18px) clamp(12px,1.6vw,20px) clamp(12px,1.8vh,20px)}
#about .tl-yr{font-size:.6rem;margin-bottom:4px}
#about .tl-place{font-size:clamp(.85rem,1.6vh,1rem)}
#about .tl-sub{font-size:clamp(.72rem,1.3vh,.85rem);margin-top:2px}
#about .figures{margin-top:clamp(14px,2.2vh,30px)}
#about .fig{padding:0}
#about .fig .n{font-size:clamp(1.5rem,3.4vh,2.6rem)}
#about .fig .l{font-size:clamp(.72rem,1.3vh,.9rem);margin-top:clamp(6px,1vh,12px)}

#services .sec-h{margin-bottom:clamp(14px,2.4vh,32px)}
#services .sec-h h2{font-size:clamp(1.6rem,3.9vh,2.7rem)}
#services .sec-h p{font-size:clamp(.85rem,1.7vh,1rem);margin-top:clamp(8px,1.2vh,14px)}
#services .bento{grid-auto-rows:minmax(clamp(112px,17.4vh,206px),auto);gap:clamp(8px,1.2vh,14px)}

/* the bento row now shares the screen with the bodywork callout, so the card
   internals scale off viewport height rather than overflowing a fixed row. */
#services .card{padding:clamp(13px,1.9vh,24px) clamp(14px,2vh,26px)}
#services .card .ic{width:clamp(24px,3.1vh,38px);height:clamp(24px,3.1vh,38px);
  margin-bottom:clamp(6px,1.1vh,14px)}
#services .card h3{font-size:clamp(.94rem,1.86vh,1.24rem);margin:0 0 clamp(3px,.6vh,7px)}
#services .card p{font-size:clamp(.72rem,1.42vh,.88rem);line-height:1.4}
#services .card.feature h3{font-size:clamp(1.06rem,2.3vh,1.6rem)}
#services .card .big{font-size:clamp(1.2rem,2.7vh,1.9rem)}
#services .card-foot,#services .card-more{margin-top:auto;padding-top:clamp(5px,.9vh,11px)}
#services .card-foot,#services .card-price,#services .card-more{font-size:clamp(.66rem,1.24vh,.8rem)}
/* the feature card carries a price block and a caption the others do not, so it is
   the one that overflows a short row: its copy is clamped rather than clipped. */
#services .card.feature h3{font-size:clamp(1rem,2.05vh,1.45rem)}
#services .card.feature p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.36}
#services .card .big{font-size:clamp(1.05rem,2.15vh,1.6rem);line-height:1.02}
#services .card .big small{font-size:clamp(.54rem,.95vh,.63rem);margin-top:1px}
#services .card.feature .card-more{padding-top:clamp(3px,.5vh,7px);font-size:clamp(.6rem,1.1vh,.74rem)}
/* the shortest desktops: every card body clamps to two lines rather than being cut */
@media(max-height:800px) and (min-width:861px){
  #services .card p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;line-height:1.36}
}
@media(max-height:960px){
  #services .card .big small{display:none}
  #services .card.feature p{-webkit-line-clamp:2}
}
/* on phones the bento is a swipe rail: the row fills the 100dvh section instead of leaving dead space */
@media(max-width:860px){#services .bento{grid-auto-rows:minmax(clamp(170px,29dvh,270px),auto)}}
#services .card{padding:clamp(14px,2.2vh,26px)}
#services .card h3{font-size:clamp(.98rem,2vh,1.3rem)}
#services .card p{font-size:clamp(.76rem,1.4vh,.9rem)}
#services .card .ic{width:clamp(26px,3.6vh,40px);height:clamp(26px,3.6vh,40px);margin-bottom:clamp(8px,1.4vh,16px)}
#services .card.feature h3{font-size:clamp(1.15rem,2.6vh,1.7rem)}
#services .card .big{font-size:clamp(1.5rem,3.4vh,2.6rem)}
#services .card-foot{margin-top:auto;padding-top:clamp(8px,1.2vh,16px)}

/* ---------- 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}
  .sp-full .sp-media{max-height:21dvh}
  #why .geo-carousel{aspect-ratio:16/10;max-height:21dvh}

  #why .lead2{margin-bottom:16px}
  .geo-cta{gap:8px;margin-top:16px}
  #about .heritage-merged{padding:14px}
  #about .tl-card img{height:clamp(80px,12dvh,130px)}
  #about .tl-body{padding:10px 12px 12px}
  #about .figures{margin-top:12px}
  #about .fig{padding:0}
  #about .fig .n{font-size:1.45rem}
  #about .fig .l{font-size:.68rem;max-width:none}
  #about .hm-head p{display:none}     /* the three cards below say it better */
}
@media(max-height:700px) and (max-width:860px){
  .sp-full .sp-media,#why .geo-carousel{max-height:16dvh}
  #services .bento{grid-auto-rows:minmax(clamp(150px,25dvh,230px),auto)}
  #services .sec-h{margin-bottom:12px}
  .bw-alert{padding:13px 15px}
  .bw-alert .bt h3{font-size:.94rem}
  .bw-alert .bt p{font-size:.76rem}
  #cars .car-grid{grid-auto-rows:clamp(130px,22dvh,200px)}
  #cars .car-foot{font-size:.78rem}
  .sp-full h2{font-size:clamp(1.22rem,5vw,1.45rem)}
  .sp-full .lead2{font-size:.8rem;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:.5rem;padding:0 7px}
  .marque-note{display:none}
  #bodywork .checks li,#fleet .checks li{font-size:.82rem}
  #about .sec-h h2{font-size:1.35rem}
  #about .sec-h p{font-size:.8rem}
  #about .tl-card img{height:74px}
  #about .fig .n{font-size:1.25rem}
  /* on a 640px-tall phone the three dated cards below say this already */
  #about .hm-head{display:none}
  #about .heritage-merged{padding:10px}
  #about .tl-card img{height:66px}
}

/* ---------- 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:.88rem;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}
#about .sec-h{text-align: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%)}
/* contact: a wide arc, so the last band reads as a sheet rising into place */
#contact .band-bg{clip-path:ellipse(150% 100% at 50% 100%)}
/* 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)}
  #services .bento{grid-auto-rows:minmax(clamp(100px,17.7vh,176px),auto)}
  #cars .car-grid{grid-auto-rows:clamp(80px,11vh,150px);gap:10px}
  #cars .sec-h{margin-bottom:clamp(6px,1.2vh,16px)}
  #cars .sec-h h2{font-size:clamp(1.4rem,3.5vh,2.2rem)}
  #cars .car-foot{font-size:clamp(.78rem,1.5vh,.92rem);margin-top:clamp(8px,1.4vh,18px)}
  #services .sec-h{margin-bottom:clamp(10px,1.8vh,24px)}
  .sp-full .sp-media{max-height:52dvh}
  .sp-full h2{font-size:clamp(1.5rem,3.6vh,2.4rem)}
  .sp-full .lead2{font-size:clamp(.84rem,1.7vh,1rem);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)}
  .marque-note{font-size:clamp(.74rem,1.4vh,.86rem);margin-top:clamp(6px,1vh,12px)}
  .sp-cta{margin-top:clamp(12px,2vh,28px)}
  .checks{gap:clamp(6px,1.1vh,12px)}
  .checks li{font-size:clamp(.85rem,1.6vh,1.02rem)}
}
@media(max-height:720px) and (min-width:861px){
  .marque-note{display:none}
  .sp-full .sp-media{max-height:44dvh}
}

/* ---------- 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){
  /* three columns still fit here, and two produced five rows of bento */
  .bento{grid-template-columns:repeat(3,1fr)}
  .card.plain{grid-column:span 1}
  /* the feature card carries a price block the others do not, so it clips first */
  .card.feature>*{max-width:none}
  #services .card.feature h3{font-size:clamp(.98rem,1.9vh,1.25rem)}
  #services .card .big{font-size:clamp(1rem,1.95vh,1.4rem)}
  #services .card .big small{display:none}
  #services .card.feature .card-more{padding-top:3px;font-size:.6rem}
  #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)}
  #services .bento{grid-auto-rows:minmax(clamp(118px,15.2vh,178px),auto)}
  #services .card p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;line-height:1.36}
  .bw-alert{padding:16px 20px}
  .bw-alert .bt h3{font-size:1.06rem}
  .bw-alert .bt p{font-size:.82rem;margin-top:3px}
}
@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 .sp-media,#why .geo-carousel{height:auto;aspect-ratio:16/10;max-height:21dvh}
  #diagnostics .sp-media{max-height:18dvh}
  #bodywork .sp-media{max-height:19dvh}
  .sp-full h2{font-size:clamp(1.25rem,3.1vh,1.7rem)}
  .sp-full .lead2{font-size:clamp(.8rem,1.7vh,.92rem);margin:8px 0 12px;max-width:56ch}
  .sp-full .checks{gap:7px}
  .sp-full .checks li{font-size:clamp(.78rem,1.6vh,.9rem)}
  .sp-full .checks .ck{width:20px;height:20px}
  .sp-full .sp-cta{margin-top:12px}
  .sp-label{margin-bottom:8px;font-size:.56rem;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:.46rem;padding:0 6px}
  .marque-note{font-size:.7rem;margin-top:6px}
  .marque-row{gap:6px}
  .marque-group{margin-top:10px}
}

/* ---------- mobile refinements ---------- */
@media(max-width:860px){
  /* the three premises stack one per row instead of hiding two behind a swipe */
  .timeline{grid-template-columns:minmax(0,1fr) !important;grid-auto-flow:row !important;
    grid-auto-columns:auto !important;overflow:visible !important;gap:10px !important;
    margin-left:0 !important;margin-right:0 !important;padding-left:0 !important;padding-right:0 !important}
  /* the photographs are the point: the text sits on them rather than beside them */
  #about .tl-card{display:block;position:relative;border:0;background:none;padding:0;
    border-radius:var(--r-lg);overflow:hidden}
  #about .tl-media{height:auto}
  #about .tl-card img{width:100%;height:clamp(96px,15dvh,150px);min-height:0;object-fit:cover}
  #about .tl-body{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;
    background:linear-gradient(0deg,rgba(6,12,28,.9),rgba(6,12,28,.58) 55%,transparent);
    text-align:left}
  #about .tl-yr{color:#9DBBFF}
  #about .tl-place{color:#fff;font-size:.9rem}
  #about .tl-sub{color:rgba(255,255,255,.84);font-size:.74rem;margin-top:1px}

  /* 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:.7rem;left:9px;right:9px;bottom:8px;line-height:1.25}

  /* the bodywork callout stops behaving like a banner */
  .bw-alert{display:grid;grid-template-columns:auto 1fr;gap:10px 12px;text-align:left}
  .bw-alert .bic{grid-row:1}
  .bw-alert .bt{grid-row:1;min-width:0}
  .bw-alert .mag{grid-column:1 / -1}

  /* 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:.6rem;padding:7px 10px;letter-spacing:.04em}

  /* services and company sit side by side rather than stacking the footer out */
  footer .cols{grid-template-columns:1fr 1fr;gap:22px 18px}
  footer .cols>div:first-child{grid-column:1 / -1}
  footer .cols>div:last-child{grid-column:1 / -1}

  /* 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 .band-bg{clip-path:ellipse(260% 100% at 50% 100%)}
}

/* ---------- 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}
}

/* three stacked premises cost more height than the swipe rail did, so on a short
   phone the rows compress rather than the section overflowing */
@media(max-height:720px) and (max-width:860px){
  #about .tl-card{grid-template-columns:76px 1fr}
  #about .tl-card img{min-height:56px}
  #about .tl-body{padding:7px 10px}
  #about .tl-yr{font-size:.56rem}
  #about .tl-place{font-size:.82rem}
  /* the year and the address are the point; the one-line description is the first
     thing to go when three stacked rows will not fit the screen */
  #about .tl-sub{display:none}
  .timeline{gap:6px !important}
  #about .tl-card img{min-height:48px}
  #about .sec-h h2{font-size:1.18rem}
  #about .sec-h p{font-size:.74rem;line-height:1.4}
  #about .sec-h{margin-bottom:10px}
  #about .figures{margin-top:10px}
  #about .fig .l{font-size:.78rem;margin-top:5px;line-height:1.45}
  #about .fig-grid{gap:7px 12px}
  #about .fig .n{font-size:1.08rem}
  #about .heritage-merged{padding:9px}
}

/* ---------- 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-width:860px){
  .sp-full .sp-media,#why .geo-carousel{max-height:20dvh}
  #about .tl-card img{height:clamp(80px,12dvh,124px)}
  #about .tl-body{padding:18px 11px 8px}
}
@media(max-height:780px) and (max-width:860px){
  .sp-full .sp-media,#why .geo-carousel{max-height:15dvh}
  .sp-full .sp-copy{padding:10px 13px 12px}
  .sp-full h2{font-size:1.14rem}
  .sp-full .lead2{font-size:.77rem;margin:6px 0 9px}
  .sp-full .checks{gap:6px}
  .sp-full .checks li{font-size:.75rem;line-height:1.32}
  .sp-full .sp-cta{margin-top:10px;gap:7px}
  #diagnostics .marque-block{padding:6px 8px;margin-top:6px}
  #about .tl-card img{height:clamp(68px,10dvh,100px)}
}

/* 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:.44rem;padding:0 5px}
  #diagnostics .marque-grid{gap:4px}
  #diagnostics .marque-lead{font-size:.55rem;margin-bottom:6px}
  #diagnostics .marque-note{font-size:.68rem;margin-top:6px;line-height:1.4}
}
@media(max-height:780px) and (max-width:860px){
  #diagnostics .marque{width:29px;height:29px}
  #diagnostics .marque img{width:15px;height:15px}
  #diagnostics .marque-note{display:none}
}

/* ---------- 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.
   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:start;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%}

@media(max-width:860px){
  /* the three premises go three across: at a third of the width the strapline cannot be
     read anyway, so the year and the place carry it */
  .timeline{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:7px !important}
  #about .tl-card img{height:clamp(104px,16dvh,146px)}
  #about .tl-body{padding:14px 7px 6px}
  #about .tl-yr{font-size:.5rem;letter-spacing:.06em}
  #about .tl-place{font-size:.68rem;line-height:1.2}
  #about .tl-sub{display:none}

  /* 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:.6rem;left:7px;right:7px;bottom:6px;line-height:1.2}

  /* the four split cards take more of the screen: the photograph was the thing giving
     height back, and there is room for it now */
  .sp-full .sp-media,#why .geo-carousel{max-height:26dvh}
  /* fleet carries the longest copy of the four, so its photograph runs a little shorter */
  #fleet .sp-media{max-height:21dvh}

  /* 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}
}
@media(max-height:780px) and (max-width:860px){
  .sp-full .sp-media,#why .geo-carousel{max-height:19dvh}
  #about .tl-card img{height:clamp(84px,13dvh,116px)}
}

/* 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}
}

@media(max-width:360px){
  /* only the narrowest phones drop the button under the copy rather than squeezing it */
  .bw-alert{grid-template-columns:auto 1fr}
  .bw-alert .mag{grid-column:1 / -1}
  .bw-alert .btn{width:100%;justify-content:center}
}

/* ---------- 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,#diagnostics .marque-note{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 */
@media(max-width:400px),(max-height:720px) and (max-width:860px){
  #services .card{padding:9px 10px}
  #services .card .ic{width:27px;height:27px;padding:6px}
  #services .card h3{font-size:.79rem}
  #services .card .big,#services .card .card-price{margin-top:6px;padding:3px 8px;font-size:.62rem}
  #services .card .big{font-size:.85rem}
  #services .bento{gap:7px;grid-auto-rows:minmax(clamp(66px,9.6dvh,92px),auto)}
}

/* 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. */
@media(max-width:860px){
  
}
@media(max-width:360px){
  .bw-alert{grid-template-columns:auto 1fr}
  .bw-alert .mag{grid-column:1 / -1}
  .bw-alert .btn{width:100%}
}
/* ---------- 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. */
  #services .bento{display:block;background:none;border:0;overflow:visible;
    scroll-snap-type:none;margin:0;padding:0}

  /* the lead card: the one job with a photograph, a headline price, and room to breathe */
  #services .card.feature[data-svc="full"]{
    display:grid;grid-template-columns:1fr auto;align-items:end;
    width:100%;margin:0 0 clamp(10px,1.6dvh,16px);text-align:left;
    position:relative;overflow:hidden;border-radius:var(--r-lg);
    padding:clamp(14px,2.2dvh,22px) clamp(14px,3.6vw,18px);
    min-height:clamp(120px,17dvh,190px);
    background-image:var(--photo);background-size:cover;
    background-clip:padding-box;
    background-position:var(--photo-pos,center 42%);
    border:1px solid rgba(157,187,255,.32)}
  #services .card.feature[data-svc="full"]::after{content:"";position:absolute;inset:0;z-index:0;
    border-radius:inherit;
    background:linear-gradient(0deg,rgba(6,13,32,.95),rgba(6,13,32,.62) 55%,rgba(6,13,32,.26));
    display:block}
  #services .card.feature[data-svc="full"]>*{position:relative;z-index:1;max-width:none}
  #services .card.feature[data-svc="full"] .ic{grid-column:1;grid-row:1;
    width:clamp(26px,3.8dvh,34px);height:clamp(26px,3.8dvh,34px);padding:0;
    background:none;border-radius:0;color:#9DBBFF;margin:0 0 auto}
  #services .card.feature[data-svc="full"] h3{grid-column:1;grid-row:2;margin:8px 0 0;
    color:#fff;font-size:clamp(1rem,4.4vw,1.22rem);font-weight:800;line-height:1.15}
  #services .card.feature[data-svc="full"] p{grid-column:1;grid-row:3;display:block;
    margin:5px 0 0;color:rgba(255,255,255,.8);
    font-size:clamp(.76rem,1.55dvh,.88rem);line-height:1.4;
    max-width:34ch}
  #services .card.feature[data-svc="full"] .big{grid-column:2;grid-row:2 / span 2;
    align-self:end;justify-self:end;text-align:right;margin:0 0 0 12px;padding:0;
    background:none;border:0;border-radius:0;display:block;white-space:nowrap;
    font-family:"PlexM",monospace;font-size:clamp(1.5rem,7vw,2.1rem);
    font-weight:400;color:#fff;line-height:1}
  #services .card.feature[data-svc="full"] .big .vat{font-size:.44em;color:rgba(255,255,255,.7)}
  #services .card.feature[data-svc="full"] .big small{display:block;margin-top:4px;
    font-family:"Hanken",sans-serif;font-size:.62rem;letter-spacing:.06em;
    text-transform:uppercase;color:rgba(255,255,255,.66)}
  #services .card.feature[data-svc="full"] .card-more{grid-column:1 / -1;grid-row:4;
    margin:clamp(9px,1.4dvh,14px) 0 0 !important;color:#9DBBFF;font-size:.76rem}

  /* every other job is a row on a rule, price hard right */
  #services .card:not([data-svc="full"]){
    display:grid;grid-template-columns:auto 1fr auto;align-items:center;
    column-gap:clamp(10px,3vw,14px);row-gap:0;
    width:100%;margin:0;text-align:left;
    background:none !important;background-image:none !important;border:0;border-radius:0;
    box-shadow:none;min-height:0;
    padding:clamp(9px,1.55dvh,15px) 2px;
    border-top:1px solid rgba(255,255,255,.16)}
  #services .card:not([data-svc="full"])::after{display:none}
  #services .card:not([data-svc="full"]):last-child{
    border-bottom:1px solid rgba(255,255,255,.16)}
  #services .card:not([data-svc="full"]) .ic{grid-column:1;grid-row:1;
    width:clamp(21px,3dvh,26px);height:clamp(21px,3dvh,26px);padding:0;
    background:none;border-radius:0;color:#9DBBFF;opacity:.92}
  #services .card:not([data-svc="full"]) h3{grid-column:2;grid-row:1;margin:0;
    color:#fff;font-weight:700;line-height:1.25;
    font-size:clamp(.86rem,3.5vw,1rem);letter-spacing:-.01em}
  #services .card:not([data-svc="full"]) p{display:none}
  #services .card:not([data-svc="full"]) .card-foot{grid-column:3;grid-row:1;
    display:flex;align-items:center;gap:6px;margin:0;padding:0;border:0;justify-self:end}
  #services .card:not([data-svc="full"]) .card-price{
    font-family:"PlexM",monospace;font-size:clamp(.76rem,3.1vw,.9rem);
    color:#fff;background:none;border:0;padding:0;white-space:nowrap}
  #services .card.plain .card-price,
  #services .card[data-svc="diagnostics"] .card-price,
  #services .card[data-svc="brakes"] .card-price,
  #services .card[data-svc="bodywork"] .card-price,
  #services .card[data-svc="alloys"] .card-price{
    font-family:"Hanken",sans-serif;font-size:clamp(.72rem,2.9vw,.84rem);
    font-weight:600;color:rgba(255,255,255,.72)}
  #services .card:not([data-svc="full"]) .card-more{font-size:0;gap:0;margin:0}
  #services .card:not([data-svc="full"]) .card-more svg{
    width:15px;height:15px;fill:rgba(255,255,255,.5)}
  #services .card.plain .card-more{display:none}

  /* the callout was three stacked blocks and the tallest thing under the list: it is
     a badge, a line, and a button */
  .bw-alert{display:grid;grid-template-columns:auto 1fr;align-items:center;
    padding:clamp(11px,1.7dvh,15px) clamp(12px,3.2vw,16px);gap:8px 10px}
  .bw-alert .bic{grid-column:1;grid-row:1}
  .bw-alert .bt{grid-column:2;grid-row:1}
  .bw-alert .bt h3{font-size:clamp(.86rem,3.5vw,1rem);line-height:1.28;margin:0}
  .bw-alert .mag{grid-column:1 / -1;grid-row:2;justify-self:stretch;display:block}
  .bw-alert .btn{width:100%;padding:.58em 1.1em;font-size:.82rem;justify-content:center}
@media(max-width:360px){
  .bw-alert{grid-template-columns:auto 1fr}
  .bw-alert .mag{grid-column:1 / -1}
  .bw-alert .btn{width:100%}
}

/* ---------- 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)}
  .close .close-meta{flex-wrap:wrap;justify-content:center;row-gap:6px}
  .close .close-meta span{font-size:clamp(.62rem,3.1vw,.72rem);padding:9px clamp(9px,3.4vw,14px)}

  /* 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 */
  .sp-full .sp-media,#why .geo-carousel{max-height:clamp(132px,26dvh,300px)}

  /* 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:clamp(.44rem,.85dvh,.54rem)}
  #diagnostics .marque-grid{gap:5px}
  #diagnostics .marque-block+.marque-block{margin-top:clamp(9px,1.4dvh,16px)}
  #diagnostics .marque-note{font-size:clamp(.72rem,1.5dvh,.92rem);line-height:1.5;
    color:var(--ink2);margin:clamp(9px,1.4dvh,16px) 0 0}
  #diagnostics .lead2{margin-bottom:clamp(9px,1.4dvh,16px)}

  /* the premises and the figures fill more of the screen */
  #about .tl-card img{height:clamp(112px,17dvh,164px)}
  #about .fig .n{font-size:clamp(2rem,7vw,2.7rem)}
  #about .fig .l{font-size:clamp(.9rem,1.85vh,1.06rem);line-height:1.5;margin-top:9px}
  #about .fig-grid{gap:16px 18px}

  /* 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 .lead2{font-size:clamp(.84rem,1.75dvh,.98rem);line-height:1.5}
  .sp-full .checks li{font-size:clamp(.8rem,1.65dvh,.92rem);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:clamp(.66rem,1.35dvh,.78rem);line-height:1.45;
    margin-top:clamp(7px,1.1dvh,12px)}
  #servicing .sec-h{margin-bottom:clamp(9px,1.5dvh,16px)}
  #servicing .sec-h p{font-size:clamp(.82rem,1.7dvh,.95rem);line-height:1.45}
  #servicing .sec-h h2{font-size:clamp(1.34rem,5.8vw,1.9rem);line-height:1.14}
  #servicing .ptile .pd{font-size:clamp(.78rem,1.6dvh,.9rem);line-height:1.45}
  #servicing .ptile .mag{font-size:clamp(.66rem,1.35dvh,.76rem);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:clamp(.76rem,1.55dvh,.88rem);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 .geo-carousel{max-height:clamp(112px,22dvh,240px)}
  #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)}
  #diagnostics .marque-note{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 h2{font-size:clamp(1.32rem,5.4vw,1.72rem);line-height:1.12}
  .sec-h p,.sec-h .lead{font-size:.82rem;line-height:1.45}
  .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:.68rem;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}

  .bw-alert{padding:10px 12px}

  .sp-full .lead2{font-size:.82rem;line-height:1.45;margin-bottom:9px}
  .sp-full .checks li{font-size:.8rem}
  .sp-full .sp-cta,#why .geo-cta{margin-top:10px}
  #about .tl-card img{height:clamp(84px,13dvh,132px)}

  .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:.78rem;line-height:1.35}
  .sp-full .sp-media,#why .geo-carousel{max-height:clamp(112px,20dvh,180px)}
  #why .geo-cta{margin-top:8px;gap:8px}
  #why .geo-cta .btn{padding:.55em 1em;font-size:.8rem}

  #servicing .sec-h h2{font-size:clamp(1.24rem,5.2vw,1.56rem)}
  #servicing .sec-h p{font-size:.78rem;line-height:1.4}
  #servicing .ptile{padding:clamp(9px,1.5dvh,14px) 12px}
  #servicing .ptile h3{font-size:.92rem}
  #servicing .ptile .p-list li{font-size:.74rem;line-height:1.35}
  #servicing .cd-band{padding:9px 11px;font-size:.76rem}
  #servicing .price-note{font-size:.64rem;margin-top:7px}

  #services{padding-top:clamp(26px,4.4dvh,42px);padding-bottom:clamp(26px,4.4dvh,42px)}
  #services .bw-alert{padding:9px 11px;font-size:.76rem}
  #services .bw-alert .btn{padding:.52em .95em;font-size:.74rem;min-width:118px}
  #servicing .ptile .pd{font-size:.76rem;line-height:1.4}
  #servicing .ptile .mag{font-size:.62rem;margin-top:6px}
  #servicing .ptile .pv{font-size:1.2rem}
  #services .card:not([data-svc="full"]){padding:clamp(7px,1.2dvh,12px) 2px}
  #services .card:not([data-svc="full"]) h3{font-size:clamp(.8rem,3.3vw,.92rem)}
  #services .card.feature[data-svc="full"]{min-height:clamp(96px,15dvh,150px)}
  #services .card.feature[data-svc="full"] p{display:none}
  #servicing .ptile .pbadge{font-size:.58rem;padding:3px 8px}
  #servicing .ptile h3{font-size:.86rem}
  #servicing .ptile .pk{font-size:.56rem}
  #servicing .ptile{padding:clamp(8px,1.3dvh,12px) 11px}
  #servicing .cd-band{padding:8px 10px;font-size:.72rem}
  #fleet .sp-media{max-height:clamp(100px,17dvh,160px)}
  #servicing .sec-h p{font-size:.74rem;line-height:1.38}
  #servicing .sec-h h2{font-size:clamp(1.14rem,4.9vw,1.42rem)}
  #servicing .price-note{font-size:.6rem;line-height:1.35}
  #why .geo-carousel{max-height:clamp(96px,16dvh,150px)}
}


/* ---------- 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;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
.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,.marque-note{text-align:left}
.marque-note{margin-left:0;margin-right:0;max-width:none}

/* the systems note is the one piece of plain english in the block: it stays */
#diagnostics .marque-note{display:block}

/* ---------- 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:clamp(.8rem,1.65dvh,.92rem)}

  /* the workshop photographs take the room the section was leaving empty */
  #cars .car-grid{grid-auto-rows:clamp(104px,15.5dvh,190px) !important}
}

.fam-foot{margin-top:clamp(12px,2vh,26px);color:var(--ink2);text-align:center;
  font-size:clamp(.84rem,1.6vh,.98rem);line-height:1.5;max-width:62ch;
  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)}
  #services .sec-h h2{font-size:clamp(1.4rem,6vw,1.9rem);line-height:1.1}
  #services .sec-h p{font-size:clamp(.8rem,1.65dvh,.92rem);line-height:1.4}
  #services .card.feature[data-svc="full"]{min-height:clamp(110px,15.5dvh,175px)}
  #services .card:not([data-svc="full"]){padding:clamp(8px,1.35dvh,14px) 2px}
  .bw-alert{margin-top:clamp(10px,1.6dvh,18px);margin-bottom:0}
}

/* the family bento pays for its closing line */
@media(max-width:860px){
    #family .sec-h{margin-bottom:clamp(9px,1.5dvh,16px)}
  #family .sec-h p{font-size:clamp(.8rem,1.65dvh,.92rem);line-height:1.42}
  .fam-foot{margin-top:clamp(8px,1.3dvh,16px);font-size:clamp(.76rem,1.55dvh,.88rem);line-height:1.45}
  #about .sec-h p{font-size:clamp(.8rem,1.65dvh,.94rem);line-height:1.45}
}
@media(min-width:861px){
  .fam-foot{margin-top:clamp(10px,1.6vh,20px)}
}

@media(max-width:860px){
  /* the about lead now carries a second paragraph, so both step down a little */
  #about .sec-h{margin-bottom:clamp(14px,2.2dvh,26px) !important}
  #about .sec-h h2{font-size:clamp(1.4rem,5.9vw,1.94rem);line-height:1.12}
  #about .sec-h p{font-size:clamp(.78rem,1.6dvh,.9rem);line-height:1.42;margin-top:8px}
  #servicing .cd-band{padding:clamp(8px,1.25dvh,12px) clamp(10px,1.6vw,14px)}
  #servicing .rail-dots{margin-top:clamp(5px,.85dvh,10px)}
}
@media(min-width:861px){
  #about .sec-h p + p{font-size:.96rem;margin-top: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)}
  .bw-alert{gap:6px 10px;padding:clamp(9px,1.4dvh,13px) clamp(11px,3vw,15px)}
  .bw-alert .btn{padding:.5em 1.1em}
}
@media(max-width:860px) and (max-height:780px){
  #services .card:not([data-svc="full"]){padding:clamp(6px,1.05dvh,11px) 2px}
  #services .card:not([data-svc="full"]) .ic{width:20px;height:20px}
  #services .card.feature[data-svc="full"]{min-height:clamp(92px,14dvh,140px)}
  .bw-alert .bic{width:30px;height:30px}
  .bw-alert .bt h3{font-size:.82rem}
  .bw-alert .btn{font-size:.76rem;padding:.46em 1em}
}
@media(min-width:861px) and (max-height:820px){
  /* a short desktop window: the about lead pays for its second paragraph */
  #about .sec-h h2{font-size:clamp(1.44rem,2.05vw,1.8rem);line-height:1.12}
  #about .sec-h p{font-size:.86rem;line-height:1.4;margin-top:7px}
  #about .sec-h{margin-bottom:14px !important}
  #about .hm-head h3{font-size:1.08rem}
  #about .hm-head p{font-size:.8rem;line-height:1.4}
  #about .hm-head{margin-bottom:12px}
  #about .tl-card img{height:clamp(78px,11vh,116px)}
  #about .tl-body{padding:9px 11px}
  #about .fig .n{font-size:clamp(1.5rem,2.2vw,2rem)}
  #about .fig .l{font-size:.78rem;line-height:1.4;margin-top:5px}
  #about .figures{margin-top:14px}
  #about .timeline{gap:12px}
}

@media(max-width:860px) and (max-height:660px){
  #servicing .sec-h p{font-size:.7rem;line-height:1.34}
  #servicing .price-note{font-size:.56rem;line-height:1.3;margin-top:5px}
  #servicing .cd-band{padding:7px 9px;font-size:.68rem}
  #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,
#diagnostics .marque-note{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:clamp(.36rem,.72dvh,.44rem);overflow:hidden}
  #diagnostics .marque-grid{gap:5px}
}

/* 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:.88rem;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 ---------- */
.car .cap{position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:26px 13px 10px;pointer-events:none;
  background:linear-gradient(0deg,rgba(6,9,16,.76),transparent);
  color:#fff;font-family:"PlexM",monospace;font-size:.7rem;letter-spacing:.02em}

/* the heritage block closes with a line of its own */
.hm-foot{margin:clamp(14px,2.2vh,26px) 0 0;color:rgba(255,255,255,.78);
  font-size:clamp(.86rem,1.6vh,1rem);line-height:1.55;max-width:62ch}

@media(max-width:860px){
  .car .cap{padding:20px 9px 7px;font-size:.6rem}
  .hm-foot{margin-top:clamp(10px,1.6dvh,18px);text-align:center;
    margin-inline:auto;font-size:clamp(.78rem,1.6dvh,.9rem);line-height:1.45}

  /* the figures read as figures: the number carries the weight, not the caption */
  #about .fig .n{font-size:clamp(2.3rem,8.4vw,3.1rem);line-height:1}
  #about .fig .l{font-size:clamp(.74rem,1.5dvh,.85rem);line-height:1.4;margin-top:6px}
  #about .fig-grid{gap:14px 16px}

  /* 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 .sec-h p{font-size:clamp(.78rem,1.6dvh,.9rem);line-height:1.42}
  #family .sec-h h2{font-size:clamp(1.4rem,5.9vw,1.94rem);line-height:1.12}
  #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) */
@media(max-width:860px) and (max-height:780px){
    #family .sec-h p{font-size:.76rem;line-height:1.38}
}

/* ---------- 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)}
.card.open + .acc-panel>*{opacity:1;transform:none;
  transition:opacity .34s ease .08s,transform .42s cubic-bezier(.32,.72,0,1) .06s}
.card.open + .acc-panel>*:nth-child(2){transition-delay:.12s,.1s}
.card.open + .acc-panel>*:nth-child(3){transition-delay:.16s,.14s}
.card.open + .acc-panel>*:nth-child(4){transition-delay:.2s,.18s}
#services .bento>.acc-panel{grid-column:1 / -1}
.acc-panel>*:first-child{margin-top:0}
.acc-desc{color:rgba(255,255,255,.82);font-size:.9rem;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:.86rem;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:.82rem;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)}

/* the chevron is the affordance now, so it turns instead of saying "Details" */
#services .card .card-more svg{transition:transform .42s cubic-bezier(.32,.72,0,1)}
#services .card.open .card-more svg{transform:rotate(90deg)}
/* the open row lifts off the list so the panel reads as belonging to it */
#services .card{transition:background-color .3s ease}
@media(max-width:860px){
  #services .card.open:not([data-svc="full"]){background:rgba(255,255,255,.06) !important}
}

/* the icons are back, but in a fixed well rather than loose beside the text - that is
   what made them look misaligned before: a bare glyph has no consistent optical centre,
   so each row's icon sat at a slightly different height. */
#services .card .ic{display:block}

/* ---------- 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)}

/* the closing line now sits under the heritage panel rather than inside it */
.hm-foot{color:var(--ink2)}

@media(max-width:860px){
  .acc-panel{padding-inline:2px}
  .acc-desc{font-size:.84rem;line-height:1.5}
  .acc-list{margin-top:10px;gap:7px}
  .acc-list li{font-size:.8rem}
  .acc-note{margin-top:11px;padding:10px 12px;font-size:.76rem}
  .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 callout says what it is for again */
  .bw-alert .bt p{display:block;font-size:.76rem;line-height:1.4;margin-top:3px;
    color:rgba(255,255,255,.8)}
  .bw-alert .bt{grid-column:2;grid-row:1}

  /* 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>*,.card.open + .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){
  .sp-full .sp-media,#why .geo-carousel{max-height:clamp(150px,34dvh,340px)}

  /* 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 .marque-note{margin-top:clamp(7px,1.1dvh,12px)}
  #diagnostics .lead2{margin-bottom:clamp(9px,1.4dvh,15px)}
  #diagnostics .sp-cta{margin-top:clamp(9px,1.4dvh,15px)}
}
@media(max-width:860px) and (max-height:780px){
  .sp-full .sp-media,#why .geo-carousel{max-height:clamp(120px,26dvh,220px)}
}

/* 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){
  .sp-full .sp-media{aspect-ratio:auto;height:clamp(150px,30dvh,330px);max-height:none}
  #why .geo-carousel{height:clamp(150px,28dvh,320px);max-height:none}

  /* 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){
  .sp-full .sp-media{height:clamp(120px,23dvh,220px)}
  #why .geo-carousel{height:clamp(110px,21dvh,200px)}

  /* diagnostics carries two marque rails, a note and now a CTA pair */
  #diagnostics .marque-block{padding:5px 7px}
  #diagnostics .marque-lead{font-size:.5rem;margin-bottom:3px}
  #diagnostics .marque-note{font-size:.68rem;margin-top:7px;line-height:1.4}
  #diagnostics .lead2{font-size:.76rem;line-height:1.4;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){
  #services .bento{grid-auto-rows:minmax(clamp(96px,13.4vh,150px),auto)}
  #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)}
  #diagnostics .sp-media{height:clamp(140px,26dvh,290px)}
}
@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 .sp-media{height:clamp(100px,17dvh,150px)}
  #diagnostics .marque-note{font-size:.64rem;margin-top:6px}
  #diagnostics .marque-block+.marque-block{margin-top:6px}
}

/* the family bento still had 46-63px spare: the four middle photographs take it */
@media(max-width:860px){  }
@media(max-width:860px) and (max-height:780px){  }

/* ---------- 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 figures step back down: the numbers were carrying too much weight */
  #about .fig .n{font-size:clamp(1.6rem,6vw,2.15rem);line-height:1.05}
  #about .fig .l{font-size:clamp(.74rem,1.5dvh,.85rem);line-height:1.4;margin-top:5px}

  /* the heritage sub-head centres with the rest of the block */
  #about .hm-head{text-align:center}
  #about .hm-head h3,#about .hm-head p{text-align:center}

  /* 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 */
  #bodywork .sp-media,#fleet .sp-media{height:clamp(170px,30dvh,400px)}
  #why .geo-carousel{height:clamp(165px,30dvh,380px)}

  /* 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 closing line sits on the dark heritage ground */
.hm-foot{color:#fff}

/* 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 .sp-media,#fleet .sp-media{height:clamp(120px,21dvh,190px)}
  #why .geo-carousel{height:clamp(115px,20dvh,180px)}
  #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}
}
@media(max-width:860px) and (max-height:700px){
  #bodywork .sp-media,#fleet .sp-media{height:clamp(105px,17dvh,150px)}
  #why .geo-carousel{height:clamp(100px,16dvh,145px)}
}

/* ---------- 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){
  #bodywork .sp-media,#fleet .sp-media,#why .geo-carousel{max-height:none}

  /* 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%.) */
@media(min-width:861px) and (max-height:860px){
  }

/* ---------- 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 */
  #bodywork .sp-media{height:clamp(170px,29.2dvh,430px)}
  #fleet .sp-media{height:clamp(182px,32.2dvh,450px)}
  #why .geo-carousel{height:clamp(180px,33.5dvh,450px)}
  #diagnostics .sp-media{height:clamp(155px,29.5dvh,350px)}
}
@media(max-width:860px) and (max-height:780px){
  #bodywork .sp-media,#fleet .sp-media{height:clamp(120px,22dvh,200px)}
  #why .geo-carousel{height:clamp(115px,21dvh,190px)}
  #diagnostics .sp-media{height:clamp(105px,18dvh,160px)}
}
@media(max-width:860px) and (max-height:700px){
  #bodywork .sp-media,#fleet .sp-media{height:clamp(105px,18dvh,155px)}
  #why .geo-carousel{height:clamp(100px,17dvh,150px)}
}

/* ---------- 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:clamp(.78rem,1.05vw,.92rem);letter-spacing:.12em;
  padding:9px 18px;border-width:1.5px}
@media(max-width:860px){
  .sp-full .sp-label{font-size:clamp(.72rem,2.9vw,.86rem);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:clamp(.66rem,2.7vw,.78rem);padding:6px 13px;
    margin-bottom:clamp(6px,1.1dvh,12px)}
}

@media(min-width:861px) and (max-height:780px){
  .sp-full .sp-label{font-size:.8rem;padding:7px 15px;margin-bottom:12px}
  #diagnostics .marque-block{margin-top:7px}
  #diagnostics .marque-note{margin-top:8px;font-size:.84rem}
  #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:4/3;height:auto;grid-column:auto;grid-row:auto}
  .family-grid>.fam.tall,.family-grid>.fam.zoomed{grid-column:1 / -1;aspect-ratio:2.1/1}
  #family .sec-h{margin-bottom:clamp(10px,1.6dvh,18px)}
  #family .sec-h h2{font-size:clamp(1.28rem,5.5vw,1.9rem);line-height:1.12}
  #family .sec-h p{font-size:clamp(.76rem,1.55dvh,.9rem);line-height:1.42}
  .fam-foot{margin-top:clamp(9px,1.4dvh,16px);font-size:clamp(.74rem,1.5dvh,.88rem)}
}
@media(max-width:860px) and (max-height:700px){
  .family-grid{gap:6px}
}
@media(min-width:471px) and (max-width:860px){
  .family-grid>.fam{aspect-ratio:3/2}
  .family-grid>.fam.tall,.family-grid>.fam.zoomed{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 gap under servicing was the widest on the page, and it was About's doing:
     83px of centring slack above its content against servicing's 31px. Growing the
     heritage panel closes it from both sides at once rather than shunting the space
     into the next gap. */
  #about .tl-card img{height:clamp(104px,15.5dvh,150px)}
  #about .fig .n{font-size:clamp(1.8rem,6.6vw,2.4rem)}
  #about .fig .l{font-size:clamp(.78rem,1.6dvh,.9rem);line-height:1.45;margin-top:7px}
  #about .fig-grid{gap:16px 18px}
  #about .hm-foot{margin-top:clamp(12px,1.9dvh,22px)}

  /* 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(96px,17.5vh,172px)}
  #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 brings the outer two close enough that the
   centred start shows a sliver of each side and the row reads as scrollable */
@media(max-width:560px){
  .hero-tabs{gap:7px}
  .hero-tabs a{font-size:.82rem;padding:.5em .85em;min-height:40px}
}

@media(max-width:860px){ .hero-tabs .tab-long{display:none} }

/* the smallest phones need another 30px off the rail for the outer two to reach */
@media(max-width:365px){
  .hero-tabs{gap:6px}
  .hero-tabs a{font-size:.76rem;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. */
.fam .cap,.car .cap{border-radius:inherit}
@media(max-width:860px){
  .fam .cap{left:0;right:0;bottom:0;padding:26px 11px 8px;border-radius:inherit}
}

/* the two full-width family photographs get more depth again */
@media(max-width:860px){
  .family-grid>.fam.tall,.family-grid>.fam.zoomed{aspect-ratio:1.75/1}
}
@media(min-width:471px) and (max-width:860px){
  .family-grid>.fam.tall,.family-grid>.fam.zoomed{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 */
@media(max-width:860px){
  .bw-alert{align-items:start}
  .bw-alert .bic{margin-top:1px}
  .bw-alert .bt h3{margin:0 0 3px}
  .bw-alert .bt p{margin-top:0}
}

/* ---------- 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. */
@media(max-width:1220px){
  .bw-alert{display:grid;grid-template-columns:auto 1fr;align-items:center;
    column-gap:10px;row-gap:7px}
  .bw-alert .bic{grid-column:1;grid-row:1;align-self:center}
  .bw-alert .bt{display:contents}
  .bw-alert .bt h3{grid-column:2;grid-row:1;margin:0}
  .bw-alert .bt p{grid-column:1 / -1;grid-row:2;margin:0;
    font-size:.78rem;line-height:1.45;color:rgba(255,255,255,.82)}
  .bw-alert .mag{grid-column:1 / -1;grid-row:3;justify-self:stretch;display:block}
  .bw-alert .btn{width:100%}
}

/* 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%}
}

@media(max-width:860px) and (max-height:700px){
  .bw-alert{row-gap:5px;column-gap:9px}
  .bw-alert .bt p{font-size:.72rem;line-height:1.38}
}

/* ================= 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)}
  #services .bento{gap:0}
  #services .card.feature[data-svc="full"]{
    min-height:clamp(150px,22dvh,260px);margin-bottom:clamp(12px,1.8vh,20px);
    padding:clamp(18px,2.4vh,26px) clamp(18px,2vw,26px)}
  #services .card.feature[data-svc="full"] h3{font-size:clamp(1.2rem,2vw,1.5rem)}
  #services .card.feature[data-svc="full"] p{font-size:.92rem;max-width:44ch}
  #services .card.feature[data-svc="full"] .big{font-size:clamp(2rem,3.4vw,2.7rem)}
  #services .card.feature[data-svc="full"] .card-more{font-size:.8rem}
  #services .card:not([data-svc="full"]){padding:clamp(11px,1.7vh,18px) 4px}
  #services .card:not([data-svc="full"]) h3{font-size:clamp(.98rem,1.3vw,1.12rem)}
  #services .card:not([data-svc="full"]) .card-price{font-size:.95rem}
  #services .card.plain .card-price,
  #services .card[data-svc="diagnostics"] .card-price,
  #services .card[data-svc="brakes"] .card-price,
  #services .card[data-svc="bodywork"] .card-price,
  #services .card[data-svc="alloys"] .card-price{font-size:.9rem}
  .acc-desc{font-size:.94rem}
  .acc-list li{font-size:.9rem}
  .bw-alert{margin-top:clamp(12px,1.8vh,20px);padding:clamp(13px,1.8vh,18px) clamp(15px,1.8vw,20px)}
  .bw-alert .bt h3{font-size:1.02rem}
  .bw-alert .bt p{font-size:.86rem}
  .bw-alert .btn{font-size:.9rem}

  /* the tab rail centres, and sits midway between the arch and the foot of the screen */
  .hero-tabs{justify-content:center;
    padding-top:clamp(18px,2.6vw,34px);
    padding-bottom:clamp(18px,2.6vw,34px)}
  .hero-tabs::before,.hero-tabs::after{display:none}

  /* 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 heritage closing line centres under the panel */
  .hm-foot{text-align:center;margin-left:auto;margin-right:auto}
}

/* the two feature photographs in the car wall are the same height as each other */
@media(min-width:901px){
  /* both feature photographs are 2x2, so the wall is four rows rather than three and
     the row track shrinks to keep the section inside one screen */
  .car-grid{grid-auto-flow:dense;grid-auto-rows:clamp(84px,11.2vh,190px)}
  .car.wide{grid-column:span 2;grid-row:span 2}
}

/* 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)}
  #services .sec-h h2{font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.12}
  #services .sec-h p{font-size:clamp(.86rem,1.5vw,1rem)}
  #services .card.feature[data-svc="full"]{min-height:clamp(120px,17dvh,200px);
    margin-bottom:clamp(8px,1.2vh,14px);padding:clamp(13px,1.8vh,20px) clamp(15px,1.8vw,22px)}
  #services .card.feature[data-svc="full"] p{display:none}
  #services .card:not([data-svc="full"]){padding:clamp(8px,1.3vh,14px) 4px}
  .bw-alert{margin-top:clamp(8px,1.2vh,14px);padding:clamp(10px,1.4vh,14px) clamp(13px,1.6vw,18px)}
  .bw-alert .bt p{font-size:.82rem}
}

/* ---------- tablet portrait (561-860px): the tab rail centres ----------
   It was flex-start with 884px of content in an 805px row, so the JS scroll-centring
   clipped the first and last tab and the row read as left-aligned-and-cut. With the
   qualifiers off the row is ~560px, fits, and centres for real. */
@media(min-width:561px) and (max-width:860px){
  .hero-tabs{justify-content:center;
    padding-top:clamp(16px,2.4vw,30px);
    padding-bottom:calc(var(--rail-pb) + var(--callbar-h,0px) + clamp(16px,2.4vw,30px))}
  .hero-tabs::before,.hero-tabs::after{display:none}
}

/* ---------- 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-media,#why .geo-carousel{aspect-ratio:auto;max-height:none;
    height:clamp(180px,26dvh,320px)}
  #bodywork .sp-media,#fleet .sp-media{height:clamp(180px,26dvh,320px)}
  #diagnostics .sp-media{height:clamp(160px,23dvh,280px)}
  .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 .lead2{font-size:clamp(.92rem,1.5vw,1.02rem);line-height:1.5}
  .sp-full .checks li{font-size:clamp(.88rem,1.4vw,.98rem)}
  .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)}
  #diagnostics .marque-note{font-size:clamp(.82rem,1.4vw,.92rem)}
}

/* 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-media,#why .geo-carousel{height:clamp(120px,17dvh,190px)}
  #bodywork .sp-media,#fleet .sp-media{height:clamp(120px,17dvh,190px)}
  #diagnostics .sp-media{height:clamp(105px,14dvh,160px)}
  .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{font-size:clamp(.85rem,1.3vw,.94rem);line-height:1.45;
    margin-bottom:clamp(9px,1.3vh,15px)}
  .sp-full .checks{gap:clamp(6px,.9vh,10px)}
  .sp-full .checks li{font-size:clamp(.82rem,1.25vw,.9rem);line-height:1.4}
  .sp-full .sp-label{margin-bottom:clamp(7px,1.1vh,12px);font-size:.78rem;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:.54rem;margin-bottom:4px}
  #diagnostics .marque-note{font-size:.8rem;margin-top:9px;line-height:1.45}
  #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:.86rem;line-height:1.45}
}

/* ---------- services rows: the icon wells ---------- */
@media(max-width:1220px){
  #services .card:not([data-svc="full"]) .ic{
    display:block;width:clamp(28px,4.4vw,34px);height:clamp(28px,4.4vw,34px);
    padding:clamp(5px,.9vw,7px);box-sizing:border-box;
    border-radius:var(--r-md);background:rgba(157,187,255,.16);
    color:#9DBBFF;place-self:center;grid-column:1;grid-row:1}
  #services .card.feature[data-svc="full"] .ic{
    display:block;width:clamp(26px,3.8dvh,34px);height:clamp(26px,3.8dvh,34px);
    padding:0;background:none;border-radius:0;color:#9DBBFF}
}

/* ---------- 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)}
@media(max-width:1220px){
  .sp-full.is-centred .sp-media,.sp-full.is-centred .geo-carousel{
    box-shadow:0 -2px 34px -8px rgba(11,29,62,.55)}
  .sp-full.is-centred .sp-copy{
    border-color:rgba(11,29,62,.5);
    box-shadow:0 0 0 1px rgba(11,29,62,.38),
               0 24px 62px -18px rgba(11,29,62,.62),
               0 0 100px -28px rgba(24,53,96,.72)}
}
@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. */
@media(max-width:1220px){
  .bw-alert{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;column-gap:clamp(10px,1.6vw,16px);row-gap:8px}
  .bw-alert .bic{grid-column:1;grid-row:1;align-self:center}
  .bw-alert .bt{display:contents}
  .bw-alert .bt h3{grid-column:2;grid-row:1;margin:0;
    font-size:clamp(.9rem,2.6vw,1.08rem);line-height:1.25}
  .bw-alert .bt p{grid-column:2;grid-row:2;margin:0;
    font-size:clamp(.78rem,2.2vw,.88rem);line-height:1.45;color:rgba(255,255,255,.82)}
  .bw-alert .mag{grid-column:3;grid-row:1 / span 2;justify-self:end;display:block}
  .bw-alert .btn{width:auto;white-space:nowrap;padding:.62em 1.05em;font-size:.86rem}
}
/* on a narrow phone three columns will not fit, so the button drops under the copy -
   still its own width, still hard right */
@media(max-width:600px){
  .bw-alert{grid-template-columns:auto minmax(0,1fr)}
  .bw-alert .bt p{grid-column:1 / -1}
  .bw-alert .mag{grid-column:1 / -1;grid-row:3;justify-self:end}
}

/* ================= 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}
  .hm-foot{text-align:center;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(max-width:860px){
  #services .card:not([data-svc="full"]) .ic{
    width:clamp(20px,3.4vw,24px);height:clamp(20px,3.4vw,24px);padding:4px}
  #services .card:not([data-svc="full"]){padding:clamp(7px,1.15dvh,12px) 2px}
}
@media(min-width:861px){
  #services .card:not([data-svc="full"]) .ic{
    width:clamp(24px,2vw,30px);height:clamp(24px,2vw,30px);padding:clamp(4px,.5vw,6px)}
  #services .card:not([data-svc="full"]){padding:clamp(9px,1.35vh,15px) 4px}
  #services .card.feature[data-svc="full"]{min-height:clamp(120px,16dvh,190px)}
  #services .sec-h{margin-bottom:clamp(8px,1.3vh,16px)}
  .bw-alert{margin-top:clamp(8px,1.2vh,14px)}
}
@media(min-width:1221px){
  #services .card:not([data-svc="full"]){padding:clamp(10px,1.5vh,18px) 4px}
  #services .card:not([data-svc="full"]) h3{font-size:clamp(1rem,1.15vw,1.16rem)}
  #services .card:not([data-svc="full"]) .card-price{font-size:1rem}
}

/* ---------- 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 .card:not([data-svc="full"]){padding:clamp(7px,1.05vh,12px) 4px}
  #services .card:not([data-svc="full"]) h3{font-size:.98rem}
  #services .card.feature[data-svc="full"]{min-height:clamp(104px,13dvh,150px)}
  #services .sec-h{margin-bottom:clamp(6px,1vh,12px)}
  #services .sec-h h2{font-size:clamp(1.5rem,2.4vw,2rem)}
  #services .sec-h p{font-size:.94rem}
  .bw-alert{margin-top:clamp(6px,1vh,12px);padding:clamp(10px,1.3vh,15px) clamp(15px,1.5vw,20px)}
  .bw-alert .bt h3{font-size:1rem}
  .bw-alert .bt p{font-size:.85rem}
}

@media(max-width:860px) and (max-height:780px){
  #services .card:not([data-svc="full"]) .ic{width:18px;height:18px;padding:3px}
  #services .card:not([data-svc="full"]){padding:clamp(5px,.85dvh,10px) 2px}
  #services .card:not([data-svc="full"]) h3{font-size:clamp(.74rem,2.9vw,.86rem)}
  #services .card.feature[data-svc="full"]{min-height:clamp(84px,12.5dvh,130px)}
}
@media(min-width:1221px) and (max-height:800px){
  #services .card:not([data-svc="full"]){padding:clamp(6px,.9vh,10px) 4px}
  #services .card:not([data-svc="full"]) .ic{width:24px;height:24px;padding:4px}
  #services .card.feature[data-svc="full"]{min-height:clamp(92px,11.5dvh,130px)}
  #services .sec-h h2{font-size:1.5rem}
  .bw-alert{padding:9px 15px}
}

@media(max-width:860px) and (max-height:700px){
  #services .card:not([data-svc="full"]){padding:4px 2px}
  #services .card:not([data-svc="full"]) .ic{width:16px;height:16px;padding:2px}
  #services .card:not([data-svc="full"]) h3{font-size:.72rem}
  #services .card:not([data-svc="full"]) .card-price{font-size:.68rem}
  #services .card.feature[data-svc="full"]{min-height:clamp(74px,11dvh,110px)}
  #services .sec-h{margin-bottom:6px}
  .bw-alert{padding:8px 11px}
  .bw-alert .bt p{font-size:.68rem}
}

/* ---------- 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. */
.bw-alert{display:grid !important;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;column-gap:clamp(9px,1.4vw,18px);row-gap:clamp(3px,.6vh,7px);
  flex-wrap:nowrap}
.bw-alert .bic{grid-column:1;grid-row:1 / span 2;align-self:center;
  width:clamp(30px,4.4vw,56px);height:clamp(30px,4.4vw,56px)}
.bw-alert .bic svg{width:52%;height:52%}
.bw-alert .bt{display:contents}
.bw-alert .bt h3{grid-column:2;grid-row:1;margin:0;
  font-size:clamp(.84rem,1.6vw,1.5rem);line-height:1.24}
.bw-alert .bt p{grid-column:2;grid-row:2;margin:0;
  font-size:clamp(.72rem,1.2vw,1rem);line-height:1.42;color:var(--panel-sub)}
.bw-alert .mag{grid-column:3;grid-row:1 / span 2;justify-self:end;align-self:center;
  display:block;width:auto}
.bw-alert .btn{width:auto;white-space:nowrap;
  padding:clamp(.5em,.8vw,.8em) clamp(.7em,1.1vw,1.3em);
  font-size:clamp(.74rem,1.1vw,1rem)}
.bw-alert .btn .ic{display:none}

/* 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){
  .bw-alert{column-gap:8px;padding:11px 12px}
  .bw-alert .bic{width:26px;height:26px;border-radius:var(--r-sm)}
  .bw-alert .btn{padding:.46em .6em;font-size:.7rem}
  .bw-alert .bt h3{font-size:.8rem;line-height:1.22}
  .bw-alert .bt p{font-size:.68rem;line-height:1.36}
}
@media(max-width:400px) and (max-height:760px){
  #services .card:not([data-svc="full"]){padding:4px 2px}
  #services .card.feature[data-svc="full"]{min-height:clamp(70px,10.5dvh,104px)}
  #services .sec-h{margin-bottom:5px}
  #services .sec-h p{font-size:.7rem;line-height:1.34}
}

/* ---------- 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:.68rem}
  .cd-band>svg{width:16px;height:16px}
  .cd-cta{font-size:.68rem;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:clamp(150px,24vh,300px);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)}
}

/* desktop: the hero crop sits lower in the frame, so the eye lands further down the
   photograph rather than on the roofline */
@media(min-width:1221px){
  .hero-bg img{object-position:center 70%}
}

/* ---------- 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:clamp(12.5px,1.4vw,14px) !important}
.tl-yr{font-size:clamp(12px,1.2vw,13px)}
.tl-place{font-size:clamp(14px,1.45vw,16px)}
.tl-sub{font-size:clamp(13.5px,1.35vw,15px)}
.pbadge{font-size:clamp(12px,1.2vw,13px)}
.card-foot,.card-price,.card-more{font-size:clamp(14.5px,1.45vw,16.5px)}
.area-lead,.nap-note,.reach-note{font-size:clamp(14px,1.4vw,15.5px)}
.est,.ey{font-size:clamp(12.5px,1.25vw,13.5px)}
.cd-cta,.btn{font-size:clamp(15px,1.45vw,16.5px)}
.price-note{font-size:clamp(13px,1.3vw,14.5px)}
.fam-foot,.car-foot{font-size:clamp(15.5px,1.55vw,18px)}
.marque-lead{font-size:clamp(12px,1.2vw,13px)}
.marque-note{font-size:clamp(14.5px,1.45vw,16px)}
.acc-desc,.acc-list li{font-size:clamp(15px,1.5vw,16.5px)}
.sp-full .lead2{font-size:clamp(16px,1.6vw,18.5px)}
.sp-full .checks li{font-size:clamp(15.5px,1.5vw,17px)}
.sec-h p{font-size:clamp(16px,1.65vw,18.5px)}
#services .card:not([data-svc="full"]) h3{font-size:clamp(16px,1.6vw,18.5px)}
.bw-alert .bt p{font-size:clamp(14.5px,1.45vw,16.5px)}
.bw-alert .bt h3{font-size:clamp(17px,1.7vw,22px)}
.cd-band{font-size:clamp(14.5px,1.45vw,16px)}
/* 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:clamp(11px,1.1vw,12.5px);white-space:nowrap;line-height:1}

/* the same floor, at the specificity the existing per-section rules use - a bare class
   here loses to #about .tl-yr or #servicing .ptile .pbadge however late it sits */
#about .tl-yr{font-size:clamp(12px,1.2vw,13px)}
#about .tl-place{font-size:clamp(14px,1.45vw,16px)}
#about .tl-sub{font-size:clamp(13.5px,1.35vw,15px)}
#diagnostics .marque-lead{font-size:clamp(12px,1.2vw,13px)}
#diagnostics .marque-note{font-size:clamp(14.5px,1.45vw,16px)}
#diagnostics .marque.txt{font-size:clamp(11px,1.1vw,12.5px)}
#servicing .ptile .pbadge{font-size:clamp(12px,1.2vw,13px)}
#servicing .ptile .pd{font-size:clamp(15px,1.5vw,16.5px)}
#servicing .price-note{font-size:clamp(13px,1.3vw,14.5px)}
#servicing .ptile .pv small,.ptile .mag,.big small{font-size:clamp(12.5px,1.25vw,14px)}
.freecode{font-size:clamp(12.5px,1.25vw,14px)}
/* 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 .card:not([data-svc="full"]){padding:3px 2px}
  #services .card.feature[data-svc="full"]{min-height:clamp(64px,9.5dvh,96px)}
  #services .sec-h{margin-bottom:4px}
  #services .sec-h h2{font-size:clamp(1.1rem,4.6vw,1.34rem)}
  .bw-alert{padding:8px 10px}
}

/* the last two undersized labels, at the specificity that was beating the floor */
#services .card.feature[data-svc="full"] .big small{font-size:clamp(12.5px,1.25vw,14px)}
.close .close-meta span,.close-meta .st{font-size:clamp(12.5px,1.25vw,14px)}

/* 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 .marque-note{margin-top:8px}
  #diagnostics .lead2{margin-bottom:9px}
  #diagnostics .sp-media{height:clamp(120px,20dvh,220px)}
  #diagnostics .sp-cta{margin-top:9px}
}
@media(min-width:1221px){
  #diagnostics .marque-block+.marque-block{margin-top:12px}
  #diagnostics .marque-note{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}
  #services .card:not([data-svc="full"]){padding:3px 2px}
}

@media(min-width:861px) and (max-width:1220px) and (max-height:900px){
  #diagnostics .sp-media{height:clamp(96px,13dvh,150px)}
  #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 .marque-note{margin-top:7px;line-height:1.4}
  #diagnostics .lead2{margin-bottom:8px;line-height:1.4}
  #diagnostics .sp-copy{padding-top:clamp(9px,1.3vh,14px);padding-bottom:clamp(10px,1.5vh,16px)}
  #diagnostics .sp-cta{margin-top:8px}
  #about .tl-card img{height:clamp(70px,10vh,110px)}
  #about .fig .n{font-size:clamp(1.4rem,2vw,1.8rem)}
}
@media(max-width:400px) and (max-height:760px){
  #servicing .ptile{padding:6px 10px}
  #servicing .ptile .pd{font-size:12.4px;line-height:1.32}
  #servicing .sec-h p{font-size:12.6px;line-height:1.34}
  #services .sec-h p{font-size:12.6px;line-height:1.34}
  #services .card:not([data-svc="full"]) h3{font-size:13px}
  .bw-alert .bt p{font-size:12.4px;line-height:1.35}
}

/* 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 .card.feature[data-svc="full"]{min-height:58px}
  #services .card.feature[data-svc="full"] .card-more{margin-top:5px !important}
  #services{padding-top:calc(var(--cut) * .4);padding-bottom:calc(var(--cut) * .4)}
  .bw-alert{margin-top:6px;padding:7px 9px}
}

/* the larger type is paid for in spacing and photograph height, never by shrinking the
   text back down */
@media(max-width:1220px){
  #bodywork .sp-media{height:clamp(140px,24dvh,340px)}
  #diagnostics .sp-media{height:clamp(110px,18dvh,200px)}
}
@media(max-width:860px) and (max-height:780px){
  #bodywork .sp-media{height:clamp(104px,17dvh,150px)}
  #diagnostics .sp-media{height:clamp(92px,14.5dvh,130px)}
}
@media(max-width:860px) and (max-height:700px){
  #bodywork .sp-media{height:clamp(88px,14dvh,120px)}
  #diagnostics .sp-media{height:clamp(80px,12.5dvh,110px)}
}
@media(min-width:861px) and (max-width:1220px) and (max-height:900px){
  #bodywork .sp-media{height:clamp(104px,14dvh,170px)}
  #diagnostics .sp-media{height:clamp(92px,12dvh,140px)}
}
@media(max-width:860px) and (max-height:700px){
  #servicing .ptile{padding:5px 10px}
  #servicing .cd-band{padding:7px 10px;margin-top:7px}
  #services .card:not([data-svc="full"]){padding:3px 2px}
  #services .card.feature[data-svc="full"]{min-height:clamp(62px,9dvh,92px)}
  #services .sec-h{margin-bottom:4px}
  .bw-alert{margin-top:6px;padding:7px 10px}
}
@media(min-width:861px) and (max-width:1220px) and (max-height:820px){
  #services .card:not([data-svc="full"]){padding:clamp(6px,.95vh,11px) 4px}
  #services .card.feature[data-svc="full"]{min-height:clamp(96px,13dvh,150px)}
}
@media(min-width:1221px){
  #cars .car-grid{grid-auto-rows:clamp(150px,23.4vh,300px)}
}

@media(max-width:400px) and (max-height:660px){
  #services .card:not([data-svc="full"]){padding:2px 2px}
  #services .card.feature[data-svc="full"]{min-height:54px}
  #services .card.feature[data-svc="full"] h3{font-size:14px}
  #services .sec-h{margin-bottom:3px}
  #services{padding-top:calc(var(--cut) * .34);padding-bottom:calc(var(--cut) * .34)}
  .bw-alert{margin-top:5px;padding:6px 9px}
  .bw-alert .bic{width:24px;height:24px}
}

/* the larger reading sizes are paid for here - photographs and spacing, never type */
@media(max-width:860px){
  #why .geo-carousel{height:clamp(120px,26dvh,300px)}
  #fleet .sp-media{height:clamp(135px,26dvh,320px)}
}
@media(max-width:860px) and (max-height:780px){
  #why .geo-carousel{height:clamp(92px,15dvh,140px)}
  #fleet .sp-media{height:clamp(96px,16dvh,150px)}
}
@media(max-width:860px) and (max-height:700px){
  #why .geo-carousel{height:clamp(80px,12.5dvh,110px)}
  #fleet .sp-media{height:clamp(84px,13dvh,120px)}
  #servicing .ptile{padding:4px 9px}
  #servicing .cd-band{padding:6px 9px;margin-top:6px}
}
@media(max-width:400px) and (max-height:760px){
  #services .card:not([data-svc="full"]){padding:1px 2px}
  #services .card.feature[data-svc="full"]{min-height:50px}
  #services{padding-top:calc(var(--cut) * .3);padding-bottom:calc(var(--cut) * .3)}
  .bw-alert{margin-top:4px;padding:5px 8px}
}
@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)}
  #bodywork .sp-media,#fleet .sp-media,#diagnostics .sp-media{max-height:clamp(200px,40vh,400px)}
}

@media(min-width:1221px) and (max-height:800px){
  #bodywork .sp-media,#fleet .sp-media,#diagnostics .sp-media{max-height:clamp(180px,34vh,340px)}
  .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)}
  #services .card:not([data-svc="full"]){padding:clamp(6px,.95vh,11px) 4px}
}

@media(min-width:861px) and (max-width:1220px) and (max-height:900px){
  #services .card:not([data-svc="full"]){padding:clamp(5px,.85vh,10px) 4px}
  #services .card.feature[data-svc="full"]{min-height:clamp(88px,11.5dvh,130px)}
  #services .sec-h{margin-bottom:clamp(6px,1vh,12px)}
  .bw-alert{margin-top:clamp(6px,1vh,12px);padding:clamp(8px,1.2vh,13px) clamp(13px,1.6vw,18px)}
}

/* 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 */
.sec-h p,.sp-full .lead2,.acc-desc,#servicing .ptile .pd{line-height:1.5}
.sp-full .checks li,.acc-list li,.bw-alert .bt p{line-height:1.45}
.fam-foot,.car-foot,.marque-note{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:clamp(15.5px,1.5vw,17px);line-height:1.45}
.sp-full .sp-cta .btn,#why .geo-cta .btn,.sp-cta .btn,.geo-cta .btn,
.bw-alert .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:15px}
  .sp-full .sp-cta .btn,#why .geo-cta .btn{font-size:14.5px}
  #bodywork .sp-media{height:clamp(104px,17dvh,150px)}
  #why .geo-carousel{height:clamp(88px,14dvh,130px)}
  #fleet .sp-media{height:clamp(96px,15dvh,140px)}
  #diagnostics .sp-media{height:clamp(84px,13dvh,120px)}
  .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:700px){
  #bodywork .sp-media{height:clamp(78px,12dvh,110px)}
  #why .geo-carousel{height:clamp(70px,11dvh,100px)}
  #fleet .sp-media{height:clamp(74px,11.5dvh,105px)}
  #diagnostics .sp-media{height:clamp(66px,10dvh,95px)}
}

@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}
  #services .card:not([data-svc="full"]){padding:0 2px}
  #services .card.feature[data-svc="full"]{min-height:46px}
}

/* ================= 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}
.gc-toggle{min-width:68px;min-height:44px;padding:8px 14px;border:1px solid rgba(255,255,255,.5);
  border-radius:var(--r-pill);background:rgba(6,10,22,.78);color:#fff;box-shadow:var(--soft-sm);
  font-family:"PlexM",monospace;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.gc-toggle:hover{background:rgba(6,10,22,.92);border-color:#fff}
.gc-toggle:disabled{cursor:default;opacity:.78}
.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,.gc-toggle:focus-visible,.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){
  #services .card{min-height:40px}
  .sp-full .sp-cta .btn,#why .geo-cta .btn,.bw-alert .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 */
@media(max-width:860px){
  #services .card:not([data-svc="full"]){min-height:40px}
}
@media(min-width:861px){
  #services .card:not([data-svc="full"]){min-height:44px}
}

/* 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){
  #services .card:not([data-svc="full"]){min-height:36px}
}
@media(max-width:400px) and (max-height:720px){
  #services .card:not([data-svc="full"]){min-height:34px}
  #services .card.feature[data-svc="full"]{min-height:44px}
  #services .card.feature[data-svc="full"] .card-more{display:none}
  #services{padding-top:calc(var(--cut) * .26);padding-bottom:calc(var(--cut) * .26)}
  #services .sec-h{margin-bottom:3px}
  .bw-alert{margin-top:4px;padding:5px 8px}
  .bw-alert .bt p{display:none}
}

/* ---------- 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 */
@media(max-width:400px) and (max-height:720px){
  #about .tl-card img{height:clamp(58px,9dvh,90px)}
  #about .fig-grid{gap:10px 14px}
  #about .fig .n{font-size:clamp(1.3rem,5.4vw,1.7rem)}
  #about .hm-head{margin-bottom:8px}
  #about .hm-foot{margin-top:8px}
  #about .sec-h{margin-bottom:10px !important}
}

/* 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}
#services .card:not([data-svc="full"]) .card-price,
#services .card.plain .card-price,
#services .card[data-svc="diagnostics"] .card-price,
#services .card[data-svc="brakes"] .card-price,
#services .card[data-svc="bodywork"] .card-price,
#services .card[data-svc="alloys"] .card-price{font-size:clamp(13px,1.35vw,15px)}
.sp-full .sp-label{font-size:clamp(12px,1.25vw,14px)}
.ptile .pv .vat,.big .vat{font-size:clamp(12px,1.2vw,13.5px)}
.hero-meta .est{font-size:clamp(12px,1.2vw,13.5px)}