/* Russo One — SIL OFL 1.1 (assets/fonts/OFL-RussoOne.txt). Self-hosted; base for the CWV-style strapline SVG. */
@font-face{font-family:"Russo One";src:url(fonts/RussoOne-Regular.woff2) format("woff2"),url(fonts/RussoOne-Regular.ttf) format("truetype");font-display:swap}
/* Michroma — SIL Open Font License 1.1 (assets/fonts/OFL-Michroma.txt). Self-hosted; closest free match to the logo's Microgramma/Eurostile Extended lettering. */
@font-face{font-family:"Michroma";src:url(fonts/Michroma-Regular.woff2) format("woff2"),url(fonts/Michroma-Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}
:root{--blue:#0b4f9c;--blue-d:#083b75;--blue-l:#e8f0fb;--ink:#4b5563;--head:#2b3440;--muted:#5f6b7a;--grey:#e9edf2;--page:#f3f5f8;--hdr:#f6f7f9;--card:#fafbfc;--line:#dde3ea;--warn-bg:#fff6d6;--warn:#7a5600;--r:12px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--page);line-height:1.6;font-size:1rem}
img{max-width:100%}
a{color:var(--blue)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #f0a500;outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--card);padding:.5rem 1rem;z-index:99}
.skip:focus{left:.5rem}
.wrap{width:min(1120px,100% - 2rem);margin-inline:auto}
header.site{background:var(--hdr);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.logo{display:inline-grid;place-items:center;width:52px;height:40px;border-radius:8px;background:var(--blue);color:#fff;font-weight:800;letter-spacing:.04em;font-size:.95rem;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18)}
.brand b{display:block;font-size:1rem;line-height:1.1}
.brand small{display:block;color:var(--muted);font-size:.75rem}
nav.main ul{list-style:none;margin:0;padding:0}
nav.main{display:none;position:absolute;left:0;right:0;top:100%;background:var(--hdr);border-bottom:1px solid var(--line)}
nav.main.open{display:block}
nav.main a{display:block;padding:.85rem 1rem;text-decoration:none;color:var(--ink);font-weight:600;border-top:1px solid var(--line)}
nav.main a[aria-current=page]{color:var(--blue)}
.btn.nav-call{display:none}
@media(min-width:900px){.menu-btn{display:none}nav.main{display:block;position:static;border:0}nav.main ul{display:flex;gap:.25rem}nav.main a{border:0;padding:.5rem .7rem;border-radius:8px}nav.main a:hover{background:var(--grey)}.btn.nav-call{display:inline-flex}}
.hero{background:linear-gradient(180deg,var(--blue-l),var(--page));padding:3rem 0 2.5rem}
.hero h1{font-size:clamp(1.9rem,6vw,3rem);line-height:1.15;margin:.2rem 0 .8rem}
.eyebrow{color:var(--blue);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.8rem}
.lead{font-size:1.1rem;color:var(--muted);max-width:62ch}
.ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.4rem}
.hero-grid{display:grid;gap:2rem;align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:1.4fr 1fr}}
.photo-ph{border:2px dashed #9fb3cc;border-radius:var(--r);background:repeating-linear-gradient(45deg,#f4f6f9,#f4f6f9 12px,#eef2f7 12px,#eef2f7 24px);min-height:220px;display:grid;place-items:center;text-align:center;padding:1rem;color:var(--muted)}
section{padding:3rem 0}
section.grey{background:var(--grey)}
h2{font-size:clamp(1.5rem,4vw,2rem);margin:0 0 .5rem;line-height:1.2}
h3{margin:.2rem 0 .4rem}
.grid{display:grid;gap:1rem}
@media(min-width:640px){.grid.c2{grid-template-columns:repeat(2,1fr)}.grid.c3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.grid.c3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem}
.card .ico{position:relative;width:60px;height:60px;border-radius:16px;background:linear-gradient(145deg,#f1f3fd,#e2e7fb);display:grid;place-items:center;margin-bottom:.6rem;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(51,51,154,.08)}
.card .ico svg{width:42px;height:42px;position:relative;z-index:1}
.card .ico::after{content:"";position:absolute;right:-3px;top:9px;width:20px;height:11px;background:repeating-linear-gradient(to bottom,rgba(51,51,154,.13) 0 2px,transparent 2px 4.5px);transform:skewX(-24deg)}
.ico-row{display:flex;gap:.5rem}
.ticks{list-style:none;padding:0;margin:0}
.ticks li{padding:.55rem 0 .55rem 2rem;position:relative;border-bottom:1px solid var(--line)}
.ticks li::before{content:"";position:absolute;left:0;top:.68rem;width:1.3rem;height:1.3rem;border-radius:50%;background:#e2e7fb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.6' fill='none' stroke='%2333339a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.map{width:100%;height:320px;border:1px solid var(--line);border-radius:var(--r)}
.contact-list{list-style:none;padding:0;margin:0}
.contact-list li{margin:.4rem 0}
table.hours{border-collapse:collapse;width:100%;max-width:520px;background:var(--card)}
table.hours th,table.hours td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--line)}
.callbar{background:var(--blue);color:#fff;padding:2rem 0}
footer.site{background:#0f1f33;color:#d7e0ea;padding:2.5rem 0 1.5rem;font-size:.92rem}
footer.site a{color:#fff}
footer .fgrid{display:grid;gap:1.5rem}
@media(min-width:800px){footer .fgrid{grid-template-columns:1.3fr 1fr 1fr}}
footer .legal{border-top:1px solid #2b3c52;margin-top:1.5rem;padding-top:1rem;font-size:.8rem;color:#a9b7c6}
.page-head{background:var(--blue-l);padding:2.2rem 0}
.page-head h1{margin:0;font-size:clamp(1.7rem,5vw,2.4rem)}
.demo-banner{background:#fff1f0;border:2px solid #c62828;color:#8e1b1b;border-radius:var(--r);padding:1rem;font-weight:700;margin-bottom:1.25rem}
.steps{display:flex;gap:.3rem;list-style:none;padding:0;margin:0 0 1rem}
.steps li{flex:1 1 0;min-width:0;text-align:center;font-size:.78rem;padding:.45rem .3rem;border-radius:8px;background:var(--grey);color:var(--muted);font-weight:600}
.steps li.on{background:var(--blue);color:#fff}
.steps li.done{background:var(--blue-l);color:var(--blue)}
form.demo label{display:block;font-weight:600;margin:.8rem 0 .3rem}
form.demo input,form.demo select{width:100%;min-height:46px;padding:.5rem .7rem;border:1px solid #b8c4d2;border-radius:8px;font-size:1rem;background:var(--card)}
input.reg{font-family:"UK Number Plate",monospace;background:#ffd400!important;font-weight:800;font-size:1.4rem!important;text-transform:uppercase;letter-spacing:.08em;text-align:center;max-width:280px}
.step{display:none}.step.active{display:block}
.row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.1rem}
.vehicle{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;background:var(--grey);border-radius:10px;padding:1rem;margin:.5rem 0}
.err{color:#b00020;font-weight:600;min-height:1.4em}
.flow{counter-reset:f;list-style:none;padding:0}
.flow li{counter-increment:f;padding:.5rem 0 .5rem 2.6rem;position:relative}
.flow li::before{content:counter(f);position:absolute;left:0;top:.45rem;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.9rem}
.muted{color:var(--muted)}
button{font-family:inherit}

/* Real logo (white-background version) */
.logo-img{display:block;height:40px;width:auto}
@media(min-width:900px){.logo-img{height:52px}}
footer .flogo{display:inline-block;background:var(--card);border-radius:10px;padding:.6rem .9rem;margin-top:0}
footer .flogo img{display:block;height:60px;width:auto}

/* Warmer service cards: logo-style stripe accent + gentle lift */
.card.svc{position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card.svc::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#33339a 0 62%,transparent 62% 64%,#7b8fe6 64% 82%,transparent 82% 84%,#c5cff7 84%)}
.card.svc:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(27,36,80,.10);border-color:#c9d2f3}
@media(prefers-reduced-motion:reduce){.card.svc{transition:none}.card.svc:hover{transform:none}}
.contact-list.icons li{display:flex;align-items:flex-start;gap:.55rem;flex-wrap:wrap}
.contact-list.icons .si{flex:none;color:#33339a;margin-top:.15rem;width:20px;height:20px}
h2.ih{display:flex;align-items:center;gap:.5rem}h2.ih .si{color:#33339a;width:24px;height:24px}

/* Punchier hero heading */
.hero h1.hero-h{font-size:clamp(2.3rem,6.4vw,3.6rem);font-weight:800;line-height:1.04;letter-spacing:-.02em;margin:.3rem 0 1rem}
.hero-h .hl{color:#33339a;font-style:italic;position:relative;white-space:nowrap}
.hero-h .hl::after{display:none;content:"";position:absolute;left:.1em;right:-.05em;bottom:-.08em;height:.16em;background:repeating-linear-gradient(to bottom,#7b8fe6 0 2px,transparent 2px 4px);transform:skewX(-24deg);opacity:.75}

/* Logo-matching display type */
.strap{margin:.6rem 0 1.4rem;line-height:0;font-size:inherit}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.strap svg{height:auto}
.strap .strap-wide{display:block;width:100%;max-width:1000px}
.strap .strap-stack{display:none;width:100%;max-width:400px}
@media(max-width:560px){.strap .strap-wide{display:none}.strap .strap-stack{display:block}}
.card.svc h3,.card.svc h2{font-family:"Michroma",sans-serif;letter-spacing:.02em;font-weight:400}
.card.svc h3{font-size:1.02rem;text-transform:uppercase;letter-spacing:.06em;color:var(--head)}
.card.svc h2{font-size:1.15rem;text-transform:uppercase;letter-spacing:.06em}
.hero-top .strap{margin:.5rem 0 1.6rem}
.hero-grid .lead{margin-top:0}

/* Hero background photo slot. Real photo goes at assets/img/hero.jpg (build.py adds .has-photo when it exists).
   Without it the hero falls back to the plain light theme gradient. */
.hero.hero-img{position:relative;overflow:hidden;padding:3.2rem 0 3.4rem;background:linear-gradient(180deg,var(--blue-l),var(--page))}
.hero-img > .wrap{position:relative;z-index:2}
.hero-img .hero-grid{grid-template-columns:1fr;max-width:620px}
.hero-img .hero-top{max-width:820px}
.hero-img.has-photo{min-height:460px;display:flex;align-items:center;background:var(--page)}
/* Photo sits on the right with its own left-edge fade (mask), so there is never a hard edge at any width */
.hero-img.has-photo::after{content:"";position:absolute;top:0;bottom:0;right:-140px;aspect-ratio:1.6;z-index:0;pointer-events:none;
  background:url(img/hero.jpg) center/cover no-repeat;
  background-image:image-set(url(img/hero.webp) type("image/webp"),url(img/hero.jpg) type("image/jpeg"));
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 14%,rgba(0,0,0,.85) 26%,#000 34%);
          mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 14%,rgba(0,0,0,.85) 26%,#000 34%)}
.hero-img.has-photo > .wrap{width:min(1120px,100% - 2rem)}
.hero-img.has-photo .ctas{margin-top:0}
@media(min-width:1100px){.hero-img.has-photo .strap .strap-wide{max-width:620px}}
@media(max-width:1099px){
 .hero-img.has-photo::after{display:none}
 .hero-img.has-photo{display:block;min-height:0;padding:clamp(240px,66vw,420px) 0 2.4rem;background-color:var(--page);
  --fade:linear-gradient(180deg,rgba(243,245,248,0) 0,rgba(243,245,248,0) clamp(160px,46vw,300px),#f3f5f8 clamp(240px,66vw,420px));
  background-image:var(--fade),url(img/hero-960.jpg);
  background-image:var(--fade),image-set(url(img/hero-960.webp) type("image/webp"),url(img/hero-960.jpg) type("image/jpeg"));
  background-repeat:no-repeat;background-position:0 0,30% 0;background-size:100% 100%,125% auto}
}
@media(min-width:600px) and (max-width:1099px){
 .hero-img.has-photo{padding-top:40vw;
  --fade:linear-gradient(180deg,rgba(243,245,248,0) 0,rgba(243,245,248,0) 28vw,#f3f5f8 40vw);
  background-image:var(--fade),url(img/hero.jpg);
  background-image:var(--fade),image-set(url(img/hero.webp) type("image/webp"),url(img/hero.jpg) type("image/jpeg"));
  background-position:0 0,0 -17vw;background-size:100% 100%,100% auto}
}

/* Softer text greys (AA-checked): headings #2b3440, body #4b5563, muted #5f6b7a */
h1,h2,h3,h4,.brand{color:var(--head)}
nav.main a{color:var(--head)}
table.hours th{color:var(--head)}
/* Buttons: Book online = solid blue (primary); Call/Email = white with blue outline */
.nav-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.nav-actions .nav-call{display:none}
@media(min-width:900px){.nav-actions{margin-left:0}.nav-actions .nav-call{display:inline-flex}.nav-book-li{display:none}}
/* CTA band (blue background) */

/* Google rating box */
.rating{display:flex;align-items:center;gap:.8rem;margin:.4rem 0 .6rem}
.rating-num{font-size:2.6rem;font-weight:800;color:var(--head);line-height:1}
.rating-meta{display:flex;flex-direction:column;font-size:.9rem;color:var(--muted)}
.stars{color:#e7a500;font-size:1.15rem;letter-spacing:.1em}
/* Used cars */
.car-card{display:flex;flex-direction:column}
.car-card .car-img{aspect-ratio:4/3;border-radius:10px;background:var(--grey);display:grid;place-items:center;margin-bottom:.9rem}
.car-card .car-img .ico{margin:0;background:none;box-shadow:none;opacity:.6}.car-card .car-img .ico::after{display:none}
.car-card h3{margin:0 0 .2rem}.car-card .car-spec{margin:0 0 .4rem;font-size:.95rem}
.car-card .car-price{font-weight:700;color:var(--blue);margin:0 0 1rem}
.car-card .btn{margin-top:auto;align-self:flex-start}
/* Used cars: real stock cards with lightweight swipe gallery (scroll-snap + tiny JS) */
.grid.cars{align-items:start}
.car-card{padding:0;overflow:hidden}
.car-card .car-img{display:none}
.gallery{position:relative;background:var(--grey)}
.g-main{position:relative}
.g-track{display:flex;margin:0;padding:0;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;aspect-ratio:4/3;background:var(--grey)}
.g-track::-webkit-scrollbar{display:none}
.g-track:focus-visible{outline:3px solid #f0a500;outline-offset:-3px}
.g-track{overflow-y:hidden}
.g-slide{flex:0 0 100%;height:100%;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always}
.g-slide picture{display:contents}
.g-slide img{width:100%;height:100%;object-fit:contain;display:block}
.g-prev{left:.6rem}.g-next{right:.6rem}
.g-count{position:absolute;right:.6rem;bottom:.6rem;background:rgba(15,31,51,.7);color:#fff;font-size:.8rem;font-weight:600;padding:.15rem .55rem;border-radius:999px}
.g-thumbs{display:grid;grid-template-columns:repeat(8,minmax(60px,1fr));gap:.35rem;margin:0;padding:.45rem;list-style:none;overflow-x:auto;scrollbar-width:thin;background:var(--card);border-bottom:1px solid var(--line)}
.g-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.car-body{padding:1.1rem 1.25rem 1.3rem;display:flex;flex-direction:column;flex:1}
.car-card h2.car-title{font-family:"Michroma",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.05em;font-size:1.05rem;line-height:1.4;margin:0 0 .3rem;color:var(--head)}
.car-card .car-price{font-size:1.75rem;font-weight:800;color:var(--blue);margin:0 0 .7rem;line-height:1.1}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0 0 .9rem;padding:0}
.chips li{background:var(--blue-l);color:var(--blue-d);border:1px solid #d3e0f3;border-radius:999px;padding:.2rem .7rem;font-size:.86rem;font-weight:600}
.car-hl{margin-bottom:1.1rem}.car-hl li{padding-top:.4rem;padding-bottom:.4rem;font-size:.95rem}.car-hl li::before{top:.52rem}
.car-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:auto}
.car-card .car-actions .btn{margin-top:0;align-self:auto;flex:1 1 200px}
.nw{white-space:nowrap}
/* Booking requests */
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:.5rem;margin:.5rem 0}
form.demo textarea{width:100%;padding:.5rem .7rem;border:1px solid #b8c4d2;border-radius:8px;font:inherit;font-size:1rem;background:var(--card)}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.bk-note{background:var(--warn-bg);color:var(--warn);border:1px solid #ecd27a;border-radius:var(--r);padding:.8rem 1rem;margin-bottom:1rem;font-weight:600}
.bk-small{font-size:.88rem;margin:.8rem 0 0}
.bk-ref{font-family:"Michroma",sans-serif;font-size:1.25rem;letter-spacing:.06em;color:var(--blue)}
[hidden]{display:none!important}
/* Workshop photo (About main image, MOT supporting image) */
figure.photo{margin:0}
figure.photo picture{display:block;border-radius:var(--r);overflow:hidden;background:var(--grey);border:1px solid var(--line)}
figure.photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
figure.photo figcaption{margin-top:.5rem;font-size:.9rem;color:var(--muted)}
.mot-photo{margin-top:1rem}

/* ===== Button system (3 Nov 2026) =====
   One system: primary (solid blue) · secondary (white, 1px blue outline) · tertiary (text).
   "Book online" = primary + bold + calendar icon. Call/Email = secondary. 46px tall, 8px radius, 600 weight. */
:root{--btn-h:46px;--btn-r:8px;--btn-line:#c9d6e6;--btn-ring:#0b4f9c;--btn-shadow:0 1px 2px rgba(11,79,156,.20),0 2px 6px rgba(11,79,156,.14)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:var(--btn-h);padding:0 1.15rem;border-radius:var(--btn-r);
 border:1px solid var(--blue);background:var(--blue);color:#fff;font-family:inherit;font-size:1rem;font-weight:600;line-height:1.2;letter-spacing:.005em;
 text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:var(--btn-shadow);-webkit-tap-highlight-color:transparent;
 transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease}
.btn:hover{background:var(--blue-d);border-color:var(--blue-d);color:#fff}
.btn:active{background:#062f5e;border-color:#062f5e;box-shadow:0 1px 1px rgba(11,79,156,.2)}
.btn .si{width:18px;height:18px;flex:none}
.btn.book{font-weight:700}
/* Secondary: Call / Email / other actions */
.btn.alt,.btn.ghost{background:#fff;color:var(--blue);border-color:var(--blue);box-shadow:none}
.btn.alt:hover,.btn.ghost:hover{background:#f1f6fd;color:var(--blue-d);border-color:var(--blue-d)}
.btn.alt:active,.btn.ghost:active{background:var(--blue-l)}
/* Tertiary: text-only action */
.btn.text{background:transparent;border-color:transparent;color:var(--blue);box-shadow:none;padding-inline:.5rem}
.btn.text:hover{background:transparent;color:var(--blue-d);text-decoration:underline;text-underline-offset:3px}
/* Focus + disabled */
.btn:focus-visible,.menu-btn:focus-visible,.g-nav:focus-visible,.g-thumb:focus-visible,nav.main .nav-book-li a:focus-visible{outline:2px solid var(--btn-ring);outline-offset:2px}
.btn:disabled,.btn[aria-disabled=true]{background:#e9edf2;border-color:#dde3ea;color:#7d8794;box-shadow:none;cursor:not-allowed}
.btn#send:disabled{cursor:progress}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}
/* Button groups: even gaps; on phones primary takes its own row, pairs share the next row evenly */
.ctas{gap:.75rem}
@media(max-width:560px){.ctas .btn{flex:1 1 auto;padding-inline:.9rem}.ctas .btn.book{flex-basis:100%}}
.row{gap:.75rem}
.row .btn.alt{min-width:96px}
@media(max-width:560px){.row .btn{flex:1 1 auto}.row .btn.alt{flex:0 0 auto}}
.car-actions{gap:.75rem}
.car-card .car-actions .btn{flex:1 1 210px;padding-inline:.9rem}
/* Header */
.nav-actions{gap:.5rem}
.nav-actions .btn{min-height:44px;padding:0 1rem;font-size:.95rem}
@media(max-width:899px){.nav-actions .nav-book{padding:0 .85rem}}
@media(max-width:360px){.nav-actions .nav-book{font-size:.9rem;padding:0 .7rem;gap:.4rem}}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;padding:0;border:1px solid var(--btn-line);background:#fff;color:var(--head);border-radius:var(--btn-r);font-size:1.25rem;line-height:1;cursor:pointer;transition:background-color .15s,border-color .15s}
.menu-btn:hover{background:#f1f6fd;border-color:var(--blue)}
.menu-btn[aria-expanded=true]{background:var(--blue-l);border-color:var(--blue);color:var(--blue)}
@media(min-width:900px){.menu-btn{display:none}}
/* Mobile menu: Book online shown as the primary button */
@media(max-width:899px){
 nav.main .nav-book-li{padding:.75rem 1rem 1rem;border-top:1px solid var(--line)}
 nav.main .nav-book-li a{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:var(--btn-h);padding:0 1.15rem;border:1px solid var(--blue);border-radius:var(--btn-r);background:var(--blue);color:#fff;font-weight:700;box-shadow:var(--btn-shadow)}
 nav.main .nav-book-li a::before{content:"";width:18px;height:18px;flex:none;background:currentColor;
  -webkit-mask:url(icons/calendar.svg) center/contain no-repeat;mask:url(icons/calendar.svg) center/contain no-repeat}
 nav.main .nav-book-li a:hover{background:var(--blue-d)}
}
/* Bottom CTA band: light so the solid-blue Book online stands out */
.callbar{background:var(--blue-l);color:var(--ink);border-top:1px solid #d3e0f3;border-bottom:1px solid #d3e0f3}
.callbar h2{color:var(--head)!important}
/* Booking: service type cards = selectable tiles */
form.demo label.radio{display:flex;align-items:center;gap:.8rem;margin:.5rem 0;padding:.85rem 1rem;min-height:56px;border:1px solid var(--line);border-radius:var(--btn-r);background:#fff;font-weight:400;cursor:pointer;transition:border-color .15s,background-color .15s,box-shadow .15s}
form.demo label.radio:hover{border-color:#9fb6d6;background:#fbfcfe}
form.demo label.radio input{flex:none;width:18px;height:18px;min-height:0;margin:0;padding:0;accent-color:var(--blue);cursor:pointer}
form.demo label.radio:has(input:checked){border-color:var(--blue);background:var(--blue-l);box-shadow:inset 0 0 0 1px var(--blue)}
form.demo label.radio:has(input:checked) strong{color:var(--blue-d)}
form.demo label.radio:has(input:focus-visible){outline:2px solid var(--btn-ring);outline-offset:2px}
form.demo label.radio input:focus-visible{outline:none}
/* Booking: date chips + time slots = selectable tiles, selected = solid blue */
.slot-grid{gap:.5rem}
.slot-grid .btn,.slot-grid .btn.alt{min-height:var(--btn-h);padding:0 .5rem;background:#fff;color:var(--head);border:1px solid var(--line);font-size:.95rem;font-weight:600;box-shadow:none;font-variant-numeric:tabular-nums}
.slot-grid .btn:hover,.slot-grid .btn.alt:hover{background:#f1f6fd;border-color:#9fb6d6;color:var(--blue-d)}
.slot-grid .btn[aria-pressed=true],.slot-grid .btn[aria-pressed=true]:hover{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:var(--btn-shadow)}
/* Gallery: neat circular arrows + thumbnails */
.g-nav{display:none;position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;padding:0;border-radius:50%;border:1px solid rgba(15,31,51,.08);background:rgba(255,255,255,.94);color:var(--head);font-size:0;line-height:0;cursor:pointer;
 box-shadow:0 1px 2px rgba(15,31,51,.16),0 3px 10px rgba(15,31,51,.12);transition:background-color .15s,color .15s,box-shadow .15s}
.g-nav::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat}
.g-prev{--chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.5 6l-6 6 6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.g-next{--chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.g-nav:hover{background:#fff;color:var(--blue);box-shadow:0 2px 4px rgba(15,31,51,.18),0 6px 14px rgba(15,31,51,.14)}
.g-nav:active{background:var(--blue-l)}
.gallery.js .g-nav{display:grid;place-items:center}
.g-thumb{display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--grey);cursor:pointer;aspect-ratio:4/3;opacity:.75;transition:opacity .15s,box-shadow .15s,border-color .15s}
.g-thumb:hover{opacity:1}
.g-thumb[aria-current=true]{opacity:1;border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
/* Very narrow phones: let an unusually long label wrap inside the button rather than overflow */
@media(max-width:380px){.ctas .btn{white-space:normal;text-align:center;padding-block:.5rem}}
/* ===== Reg lookup "Is this your vehicle?" (4 Nov 2026, local preview, not deployed) ===== */
.reg-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:stretch}
.reg-row input.reg{flex:1 1 12rem;max-width:16rem;margin:0}
.reg-row .btn{flex:0 0 auto}
#reg-help{margin:.35rem 0 0}
#reg-out:empty{display:none}
#reg-out{margin-top:.75rem}
.veh-card{border:1px solid var(--line);border-left:4px solid var(--blue);background:var(--blue-l);padding:.9rem 1rem;border-radius:0}
.veh-q{margin:0 0 .25rem;font-weight:700;color:var(--head)}
.veh-d{margin:0 0 .75rem;font-size:1.05rem;color:var(--ink)}
.veh-card .row{display:flex;flex-wrap:wrap;gap:.5rem;margin:0}
.veh-hint{margin:.75rem 0 0;font-size:.95rem;color:var(--ink)}
.veh-ok{margin:0;padding:.6rem .9rem;border:1px solid #b9d3b9;border-left:4px solid #2e7d32;background:#f1f8f1;color:#1d4d20;font-weight:600}
.veh-none{margin:0;padding:.6rem .9rem;border:1px solid var(--line);border-left:4px solid #8a97a8;background:#f4f6f9;color:var(--ink)}
@media(max-width:480px){.reg-row input.reg{max-width:none;flex-basis:100%}.reg-row .btn,.veh-card .row .btn{flex:1 1 100%}}