/* ==========================================================================
   pages.css - inner pages only. Extends assets/site.css.
   Every colour, radius, shadow and easing comes from site.css :root.

   Five page families, five deliberately different treatments:
     .pg-service  dark cinematic hero, angled foot, "what's included" rail
     .pg-area     split hero, copy beside a route card, cool blue ground
     .pg-brand    centred hero under the marque, near-black ground
     .pg-company  light editorial hero, photograph as a band beneath
     .pg-legal    no photograph, narrow measure, contents list
   ========================================================================== */

body.pg { scroll-padding-top: 110px; }
html { scroll-padding-top: 110px; }
body.pg .nav { position: sticky; top: 20px; }

/* ---------- shared hero scaffolding ------------------------------------- */
.page-hero { position: relative; margin-top: -82px; isolation: isolate; overflow: hidden; }
.page-hero .wrap { position: relative; z-index: 3; }
.ph-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #0A1730; }
.ph-bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero h1 { margin: 0; letter-spacing: -.035em; line-height: 1.04; text-wrap: balance; }
.page-hero .lede { margin: 16px 0 26px; line-height: 1.55; }
.page-hero .hero-ask { display: flex; gap: 12px; flex-wrap: wrap; }

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: "PlexM", monospace; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 20px;
}
.crumbs .sep { opacity: .45; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* dark heroes share the ink treatment */
.pg-service .page-hero, .pg-area .page-hero, .pg-brand .page-hero { color: #fff; }
.pg-service .crumbs, .pg-area .crumbs, .pg-brand .crumbs { color: rgba(255, 255, 255, .6); }
.pg-service .crumbs a, .pg-area .crumbs a, .pg-brand .crumbs a { color: rgba(255, 255, 255, .8); }
.pg-service .crumbs [aria-current], .pg-area .crumbs [aria-current], .pg-brand .crumbs [aria-current] { color: #fff; }
.pg-service .page-hero h1, .pg-area .page-hero h1, .pg-brand .page-hero h1 {
  color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, .45);
}
.pg-service .page-hero .lede, .pg-area .page-hero .lede, .pg-brand .page-hero .lede { color: rgba(255, 255, 255, .87); }
.btn-glass {
  background: rgba(255, 255, 255, .13); color: #fff; border-color: rgba(255, 255, 255, .36);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.btn-glass:hover { background: rgba(255, 255, 255, .22); color: #fff; }

/* ---------- 1. service hero: cinematic, angled foot, included rail ------ */
.ph-service { padding: calc(82px + clamp(34px, 5.4vw, 72px)) 0 clamp(46px, 5.4vw, 76px); }
.ph-service .ph-bg img { object-position: 50% 40%; opacity: .85; }
.ph-service::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 10, 20, .58), rgba(5, 10, 20, .3) 44%, rgba(5, 10, 20, .78)),
    linear-gradient(100deg, rgba(5, 10, 20, .78), rgba(5, 10, 20, .12) 62%);
}
.ph-service h1 { font-size: clamp(2rem, 4vw, 3.4rem); max-width: 19ch; }
.ph-service .lede { max-width: 56ch; font-size: 1.06rem; }
.ph-points {
  list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px;
}
.ph-points li {
  font-family: "PlexM", monospace; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 9px 15px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); color: #fff;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}

/* ---------- 2. area hero: split, copy beside a route card --------------- */
.ph-area { padding: calc(82px + clamp(30px, 4.6vw, 62px)) 0 clamp(40px, 4.8vw, 68px); }
.ph-area .ph-bg img { object-position: 50% 42%; opacity: .82; filter: saturate(.88); }
.ph-area::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(112deg, rgba(9,22,45,.9) 0%, rgba(11,27,54,.48) 52%, rgba(6,14,28,.6) 100%);
}
.ph-area-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 44px; align-items: end; }
.ph-area h1 { font-size: clamp(1.9rem, 3.5vw, 3rem); max-width: 16ch; }
.ph-area .lede { max-width: 46ch; }
.ph-route {
  padding: 26px 28px; border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: none;
}
.ph-route-h {
  font-family: "PlexM", monospace; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .68); font-weight: 500; margin: 0 0 14px;
}
.ph-route-addr { color: #fff; font-size: .98rem; line-height: 1.5; margin: 0; }
.ph-route-facts { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; }
.ph-route-facts li {
  display: flex; justify-content: space-between; gap: 14px;
  padding-bottom: 9px; border-bottom: 1px solid rgba(255, 255, 255, .16);
  font-size: .88rem; color: rgba(255, 255, 255, .74);
}
.ph-route-facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.ph-route-facts li span:last-child { color: #fff; font-weight: 700; text-align: right; }
.ph-route .getdir { color: #fff; margin-top: 16px; }
.ph-route .getdir:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 3. brand hero: centred under the marque --------------------- */
.ph-brand { padding: calc(82px + clamp(36px, 5.6vw, 76px)) 0 clamp(48px, 5.6vw, 80px); text-align: center; }
.ph-brand .ph-bg img { object-position: 50% 38%; opacity: .9; filter: saturate(.9); }
.ph-brand::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 10, 16, .66), rgba(6, 10, 16, .5) 48%, rgba(6, 10, 16, .78));
}
.ph-brand .crumbs { justify-content: center; }
.ph-brand .hero-ask { justify-content: center; }
.ph-marque {
  display: block; width: 62px; height: 62px; margin: 0 auto 22px; object-fit: contain;
  filter: brightness(0) invert(1); opacity: .95;
}
.ph-marque.txt {
  display: grid; place-items: center; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
  font-family: "Hanken", sans-serif; font-weight: 800; font-size: 1.3rem; color: #fff;
}
.ph-brand h1 { font-size: clamp(1.95rem, 3.8vw, 3.2rem); margin-inline: auto; max-width: 18ch; }
.ph-brand .lede { margin-inline: auto; max-width: 54ch; }

/* ---------- 4. company hero: light editorial, photo band beneath -------- */
.ph-company { padding: calc(82px + clamp(26px, 3.6vw, 48px)) 0 0; color: var(--ink); }
.ph-company .crumbs { color: var(--ink3); }
.ph-company .crumbs a { color: var(--ink2); }
.ph-company .crumbs [aria-current] { color: var(--ink); }
.ph-company h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.9rem); color: var(--ink); max-width: 17ch;
}
.ph-company .lede { color: var(--ink2); font-size: 1.12rem; max-width: 58ch; }
.ph-band {
  margin-top: clamp(26px, 3vw, 44px); width: 100%;
  height: clamp(220px, 30vw, 420px); overflow: hidden;
  border-radius: 0;
}
.ph-band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }

/* ---------- 5. legal hero: typographic, no photograph ------------------- */
.ph-legal {
  padding: calc(82px + clamp(34px, 5vw, 66px)) 0 clamp(28px, 3.4vw, 44px);
  color: var(--ink); border-bottom: 1px solid var(--line);
}
.ph-legal .crumbs { color: var(--ink3); }
.ph-legal .crumbs a { color: var(--ink2); }
.ph-legal h1 { font-size: clamp(1.9rem, 3.6vw, 3rem); color: var(--ink); max-width: 18ch; }
.ph-legal .lede { color: var(--ink2); max-width: 62ch; font-size: 1.06rem; }
.ph-updated {
  font-family: "PlexM", monospace; font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink3); margin: 0;
}

/* ---------- body: prose plus sticky aside ------------------------------- */
.pg-body { padding: clamp(40px, 5vw, 72px) 0 var(--sp); }
.pg-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: start; }

.prose { max-width: 68ch; color: var(--ink2); font-size: 1.02rem; line-height: 1.68; }
.prose > * + * { margin-top: 18px; }
.prose h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--ink);
  letter-spacing: -.025em; line-height: 1.14; margin-top: 48px;
}
.prose h3 { font-size: 1.24rem; color: var(--ink); letter-spacing: -.02em; margin-top: 34px; }
.prose h4 { font-size: 1.04rem; color: var(--ink); letter-spacing: -.01em; margin-top: 26px; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p { margin-top: 16px; }
.prose strong, .prose b { color: var(--ink); font-weight: 700; }
.prose a { color: var(--cobalt); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.prose-lead {
  font-size: 1.12rem; line-height: 1.6; color: var(--ink);
  padding: 22px 26px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--soft-sm);
}
.prose ul { list-style: none; padding: 0; margin-top: 18px; display: grid; gap: 10px; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--cobalt); opacity: .55;
}
/* long lists of makes and brands read better as chips than as bullets */
.prose ul.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.prose ul.chips li {
  padding: 6px 13px; border-radius: var(--r-pill);
  background: var(--cobalt-soft); color: var(--cobalt);
  font-family: "PlexM", monospace; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
}
.prose ul.chips li::before { display: none; }

.pg-aside { position: sticky; top: 108px; display: grid; gap: 16px; }
.fact { padding: 26px; }
.fact h3 {
  font-family: "PlexM", monospace; font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink3); font-weight: 500; margin-bottom: 14px;
}
.fact-addr { font-size: .94rem; color: var(--ink); line-height: 1.5; }
.fact-tel { display: block; margin-top: 14px; font-weight: 800; font-size: 1.5rem; letter-spacing: -.03em; color: var(--ink); }
.fact-tel:hover { color: var(--cobalt); }
.fact-hours { list-style: none; padding: 0; margin: 18px 0 0; font-size: .88rem; display: grid; gap: 6px; }
.fact-hours li { display: flex; justify-content: space-between; gap: 12px; color: var(--ink2); }
.fact-hours li span:last-child { font-family: "PlexM", monospace; font-size: .78rem; color: var(--ink); }
.fact-note { margin-top: 16px; font-size: .82rem; line-height: 1.55; color: var(--ink2); }
.fact-checks { margin-top: 4px; font-size: .92rem; color: var(--ink2); }

/* ---------- legal body: one narrow column, contents list ---------------- */
.pg-legal-cols { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; }
.legal-toc { position: sticky; top: 108px; }
.legal-toc h2 {
  font-family: "PlexM", monospace; font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink3); font-weight: 500; margin: 0 0 14px;
}
.legal-toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; display: grid; gap: 2px; }
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: block; padding: 7px 0 7px 26px; position: relative;
  font-size: .88rem; line-height: 1.4; color: var(--ink2);
  border-left: 2px solid var(--line); padding-left: 16px; margin-left: 8px;
  transition: color .2s, border-color .2s;
}
.legal-toc a::before {
  content: counter(toc); position: absolute; left: -8px; top: 7px;
  font-family: "PlexM", monospace; font-size: .62rem; color: var(--ink3);
}
.legal-toc a:hover { color: var(--cobalt); border-color: var(--cobalt); }
.legal-prose { max-width: 66ch; font-size: 1rem; }
.legal-prose h2 {
  font-size: 1.4rem; margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--line);
  scroll-margin-top: 110px;
}
.legal-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-prose h3 { font-size: 1.06rem; margin-top: 26px; }
.legal-prose ul li::before { background: var(--ink3); }
.legal-contact { padding: var(--sp-tight) 0 var(--sp-wide); }
.legal-ask {
  text-align: center; max-width: 640px; margin: 0 auto;
  padding: 40px 32px; border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--soft-sm);
}
.legal-ask h2 { font-size: 1.6rem; letter-spacing: -.025em; }
.legal-ask p { color: var(--ink2); margin: 12px 0 24px; }
.legal-ask .hero-ask { justify-content: center; }

/* ---------- related, brands, areas, faq --------------------------------- */
.pg-h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -.028em; margin-bottom: 28px; }

.pg-related { padding: var(--sp-tight) 0; }
.rel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rel-grid.three { grid-template-columns: repeat(3, 1fr); }
.rel-card { display: flex; flex-direction: column; gap: 8px; padding: 24px; transition: transform .25s var(--ease-out), border-color .25s; }
.rel-card:hover { transform: translateY(-3px); border-color: var(--cobalt); }
.rel-card b { font-size: 1.1rem; letter-spacing: -.02em; color: var(--ink); }
.rel-card span { font-size: .9rem; line-height: 1.5; color: var(--ink2); }

.pg-brands { padding: var(--sp-tight) 0 var(--sp); }
.brand-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.brand-card { display: flex; flex-direction: column; gap: 8px; padding: 22px; transition: transform .25s var(--ease-out), border-color .25s; }
.brand-card:hover { transform: translateY(-3px); border-color: var(--cobalt); }
.brand-card .bl { width: 34px; height: 34px; object-fit: contain; filter: var(--marque-filter); }
/* Hanken, not the mono face: "Al" for Alpina rendered as "A1" in PlexM. */
.brand-card .bl.txt {
  display: grid; place-items: center; border-radius: var(--r-md);
  background: var(--cobalt-soft); color: var(--cobalt);
  font-family: "Hanken", sans-serif; font-size: .92rem; font-weight: 800; letter-spacing: -.02em;
}
.brand-card b { font-size: 1.06rem; letter-spacing: -.02em; color: var(--ink); }
.brand-card span { font-size: .76rem; line-height: 1.5; color: var(--ink3); font-family: "PlexM", monospace; letter-spacing: .04em; }

.pg-areas { padding: var(--sp-tight) 0; }
.pg-areas .area-links a, .area-index .area-links a {
  padding: 9px 16px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
  font-size: .9rem; color: var(--ink2); transition: border-color .2s, color .2s;
}
.pg-areas .area-links a:hover { border-color: var(--cobalt); color: var(--cobalt); }
.pg-areas .area-links .all { background: var(--cobalt-soft); border-color: transparent; color: var(--cobalt); font-weight: 700; }
.area-links.big a { font-size: 1rem; padding: 12px 20px; font-weight: 700; color: var(--ink); }
.area-index { display: grid; gap: 30px; }
/* minmax(0,1fr), not 1fr: a grid track defaults to min-content, so the chip row
   refused to wrap and ran off the right edge. */
.area-group { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; align-items: start; padding-top: 18px; border-top: 1px solid var(--line); }
.area-index .area-links { flex-wrap: wrap; }
.area-group h3 { font-family: "PlexM", monospace; font-size: 1.1rem; color: var(--cobalt); font-weight: 600; letter-spacing: .04em; }

.pg-faq { padding: var(--sp-tight) 0; }
.faq-list { display: grid; gap: 10px; max-width: 860px; }
.faq { border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--soft-sm); overflow: hidden; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 56px 20px 24px; font-weight: 700; font-size: 1.04rem; color: var(--ink); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 24px; top: 50%;
  width: 10px; height: 10px; margin-top: -6px;
  border-right: 2.2px solid var(--cobalt); border-bottom: 2.2px solid var(--cobalt);
  transform: rotate(45deg); transition: transform .25s var(--ease-out);
}
.faq[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-a { padding: 0 24px 22px; color: var(--ink2); line-height: 1.65; }

.pg-bw { padding: 0 0 var(--sp-tight); }
.pg-find { padding: 0 0 var(--sp); }
.pg-contact { padding: var(--sp-tight) 0 var(--sp-wide); }
.pg-contact .sec-h { text-align: center; margin-left: auto; margin-right: auto; }
.pg-contact .sec-h p { margin-left: auto; margin-right: auto; }


/* ---------- cookie banner ----------------------------------------------- */
.ck-bar {
  position: fixed; z-index: 90; left: 0; right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px));
  padding: 14px; animation: ck-in .32s var(--ease-out) both;
}
@keyframes ck-in { from { transform: translateY(14px); opacity: 0 } to { transform: none; opacity: 1 } }
.ck-in {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap; justify-content: space-between;
  padding: 20px 24px; border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--line2); box-shadow: var(--soft);
}
.ck-copy { flex: 1 1 380px; min-width: 0; }
.ck-copy b { display: block; font-size: 1rem; color: var(--ink); margin-bottom: 4px; }
.ck-copy p { font-size: .88rem; line-height: 1.55; color: var(--ink2); margin: 0; }
.ck-copy a { color: var(--cobalt); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.ck-act { display: flex; gap: 10px; flex-wrap: wrap; }
.ck-act .btn { font-size: .92rem; padding: .7em 1.25em; }
/* Keep measured call-bar space stable while the consent dialog owns interaction. */
html.ck-on .callbar { visibility: hidden; pointer-events: none; }
html.ck-on .wa-float { visibility: hidden; pointer-events: none; }

/* ---------- responsive --------------------------------------------------- */
@media (max-width: 1180px) {
  .pg-cols { grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; }
  .pg-legal-cols { grid-template-columns: 210px minmax(0, 1fr); gap: 44px; }
  .rel-grid, .rel-grid.three { grid-template-columns: repeat(2, 1fr); }
  .brand-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .pg-cols { grid-template-columns: 1fr; gap: 40px; }
  .pg-aside { position: static; grid-template-columns: 1fr 1fr; }
  .ph-area-in { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .ph-area h1, .ph-service h1, .ph-brand h1, .ph-company h1 { max-width: none; }
  .pg-legal-cols { grid-template-columns: 1fr; gap: 28px; }
  .legal-toc { position: static; }
  .legal-toc ol { display: flex; flex-wrap: wrap; gap: 6px; }
  .legal-toc a { border-left: 0; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 7px 14px; margin: 0; background: var(--surface); }
  .legal-toc a::before { display: none; }
}
@media (max-width: 760px) {
  .page-hero { margin-top: -74px; }
  .ph-service, .ph-area, .ph-brand { padding-top: calc(74px + 26px); }
  .ph-company, .ph-legal { padding-top: calc(74px + 24px); }
  .page-hero h1 { font-size: clamp(1.85rem, 7.6vw, 2.45rem) !important; }
  .page-hero .lede { font-size: 1rem; }
  .page-hero .hero-ask .btn { flex: 1 1 100%; }
  /* site.css hides .hero-ask .mag on phones because the homepage hero swaps to
     the WhatsApp/Call pair. On an inner page that button is the link to the
     quote block, so it stays. */
  .page-hero .hero-ask .mag { display: block; flex: 1 1 100%; }
  .page-hero .hero-ask .mag .btn { width: 100%; }
  .ph-points { gap: 6px; }
  .ph-points li { font-size: .62rem; padding: 7px 12px; }
  .pg-aside { grid-template-columns: 1fr; }
  .rel-grid, .rel-grid.three { grid-template-columns: 1fr; }
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
  .area-group { grid-template-columns: 1fr; gap: 10px; }
  .prose { font-size: .98rem; }
  .prose-lead { font-size: 1.02rem; padding: 18px 20px; }
  .ph-band { height: clamp(180px, 46vw, 260px); }
  .ck-in { padding: 16px 18px; gap: 14px; }
  .ck-act { width: 100%; }
  .ck-act .btn { flex: 1 1 0; }
  .legal-ask { padding: 30px 22px; }
  .legal-ask .hero-ask .btn { flex: 1 1 100%; }
}
@media (max-width: 420px) {
  .ph-route { padding: 20px 20px; }
  .ph-route-facts li { flex-direction: column; gap: 2px; }
  .ph-route-facts li span:last-child { text-align: left; }
}
@media (max-width: 340px) {
  .brand-grid { grid-template-columns: 1fr; }
}

/* the fixed call bar covers the last section on phones */
@media (max-width: 860px) {
  .pg-contact:not(.surface-channels), .legal-contact { padding-bottom: calc(var(--sp-wide) + var(--callbar-h, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .ck-bar { animation: none; }
  .rel-card, .brand-card { transition: none; }
}

/* ---------- minor link row (the tyre cluster on the services page) ------ */
.minor-links { margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--line); }
.minor-links h3 {
  font-family: "PlexM", monospace; font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink3); font-weight: 500; margin: 0 0 14px;
}
.minor-links .area-links a {
  padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
  font-size: .84rem; color: var(--ink3); transition: border-color .2s, color .2s;
}
.minor-links .area-links a:hover { border-color: var(--cobalt); color: var(--cobalt); }

/* ---------- cookie choice control on the cookie policy page ------------- */
.pg-consent { padding: 0 0 var(--sp-tight); }
.consent-box {
  max-width: 660px; padding: 30px 32px; border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--soft-sm);
}
.consent-box h2 { font-size: 1.3rem; letter-spacing: -.02em; margin: 0; }
.consent-box p { color: var(--ink2); margin: 10px 0 20px; font-size: .96rem; }
@media (max-width: 620px) {
  .consent-box { padding: 24px 20px; }
  .consent-box .btn { width: 100%; }
}

/* ==========================================================================
   Enquiry form, contact page only.

   Built from the site's existing vocabulary rather than a generic form:
   the glass surface and cursor spotlight used by every other card, the mono
   uppercase micro-label used by .ey and footer h4, the pill chips used by
   .area-links, and the --plate tokens that sat unused in :root waiting for a
   number-plate input.
   ========================================================================== */
.pg-form { padding: var(--sp-tight) 0; }
.pg-form .sec-h { text-align: center; margin-inline: auto; }
.pg-form .sec-h p { margin-inline: auto; }
.fx { max-width: 760px; margin-inline: auto; padding: clamp(26px, 3.2vw, 42px); }

/* --- steps -------------------------------------------------------------- */
.fx-step { border: 0; padding: 0; margin: 0 0 clamp(28px, 3.4vw, 40px); }
.fx-step:last-of-type { margin-bottom: 0; }
.fx-step legend {
  display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 18px;
  font-family: "PlexM", monospace; font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink); font-weight: 500;
}
.fx-num {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--cobalt); color: #fff; font-size: .72rem; letter-spacing: 0;
  box-shadow: 0 6px 16px -8px rgba(30, 86, 224, .8);
}

/* --- fields ------------------------------------------------------------- */
.fx-field { display: flex; flex-direction: column; min-width: 0; }
.fx-lab {
  font-family: "PlexM", monospace; font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink3); font-weight: 500; margin-bottom: 8px;
}
.fx-lab em { font-style: normal; opacity: .68; }
.fx input, .fx textarea {
  width: 100%; padding: 13px 15px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line2); color: var(--ink);
  font-family: "Hanken", sans-serif; font-size: 1rem;
  transition: border-color .18s, box-shadow .18s;
}
.fx textarea { resize: vertical; min-height: 118px; line-height: 1.55; }
.fx input::placeholder, .fx textarea::placeholder { color: var(--ink3); opacity: .75; }
.fx input:focus, .fx textarea:focus {
  outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-soft);
}
.fx [aria-invalid="true"] { border-color: var(--closed-fg); }
.fx-hint { font-size: .78rem; color: var(--ink3); margin-top: 7px; }
.fx-err:empty { display: none; }
.fx-err { font-size: .8rem; color: var(--closed-fg); margin-top: 7px; }

/* --- 1. the car: a real UK number plate --------------------------------- */
.fx-car { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; }
.fx-plate-wrap { display: flex; flex-direction: column; }
.fx-plate {
  display: flex; align-items: stretch; border-radius: 7px; overflow: hidden;
  border: 2px solid #11131a; background: var(--plate);
  box-shadow: 0 4px 14px -6px rgba(18, 21, 28, .5); width: max-content;
}
.fx-plate-gb {
  display: grid; place-items: end center; width: 30px; padding-bottom: 6px;
  background: var(--plate-blue); color: #fff;
  font-family: "PlexM", monospace; font-size: .6rem; letter-spacing: .06em;
}
.fx-plate input {
  width: 12.5ch; padding: 10px 16px; border: 0; border-radius: 0; background: transparent;
  color: var(--plate-ink); font-family: "PlexM", monospace; font-weight: 600;
  font-size: 1.4rem; letter-spacing: .06em; text-transform: uppercase; text-align: center;
}
.fx-plate input::placeholder { color: rgba(18, 21, 28, .34); letter-spacing: .08em; }
.fx-plate input:focus { outline: none; box-shadow: none; }
.fx-plate:focus-within {
  outline: 3px solid var(--cobalt); outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--cobalt-soft), 0 4px 14px -6px rgba(18, 21, 28, .5);
}

/* --- 2. the job: chips, not a dropdown ---------------------------------- */
.fx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-chip { position: relative; }
.fx-chip input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer;
}
.fx-chip span {
  display: block; padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line2);
  font-size: .9rem; color: var(--ink2); cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.fx-chip:hover span { border-color: var(--cobalt); color: var(--cobalt); }
.fx-chip input:checked + span {
  background: var(--cobalt); border-color: var(--cobalt); color: #fff; font-weight: 700;
}
.fx-chip input:focus-visible + span { outline: 2.5px solid var(--cobalt); outline-offset: 3px; }
.fx-msg { margin-top: 22px; }

/* --- 3. the person ------------------------------------------------------ */
.fx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

/* --- actions and status ------------------------------------------------- */
.fx-actions {
  margin-top: clamp(26px, 3vw, 36px); padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 18px 24px; align-items: center;
}
.fx-legal { flex: 1 1 260px; font-size: .8rem; line-height: 1.55; color: var(--ink3); margin: 0; }
.fx-legal a { color: var(--cobalt); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* the honeypot is hidden from sight and from assistive technology */
.fx-pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fx-status {
  margin: 0 0 26px; padding: 17px 19px; border-radius: var(--r-lg);
  font-size: .96rem; line-height: 1.55; color: var(--ink2);
  border: 1px solid var(--line2); background: var(--bg2);
}
.fx-status:focus { outline: 2.5px solid var(--cobalt); outline-offset: 3px; }
.fx-status b { display: block; margin-bottom: 3px; color: var(--ink); }
/* :not(.btn) matters: without it this cobalt beat .btn-primary's white text and
   the fallback button rendered cobalt-on-cobalt, i.e. invisible. */
.fx-status a:not(.btn) { color: var(--cobalt); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.fx-status.is-ok { border-color: rgba(14, 159, 110, .45); background: rgba(14, 159, 110, .09); }
.fx-status.is-error { border-color: rgba(200, 16, 46, .4); background: rgba(200, 16, 46, .06); }
.fx-status.is-warn { border-color: rgba(232, 163, 23, .45); background: rgba(232, 163, 23, .1); }
.fx-alt { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.fx-alt .btn { font-size: .9rem; padding: .65em 1.1em; text-decoration: none; }
.fx-alt .btn-primary { color: #fff; }
.fx-alt .btn-wa { color: var(--wa-ink); }
.fx-alt .btn-ghost { color: var(--ink); }

@media (max-width: 760px) {
  .fx-grid { grid-template-columns: 1fr; }
  .fx-car { grid-template-columns: 1fr; gap: 18px; }
  .fx-actions { flex-direction: column; align-items: stretch; }
  .fx-actions .mag, .fx-actions .btn, .fx-alt .btn { width: 100%; justify-content: center; }
  .fx-chip span { font-size: .86rem; padding: 9px 14px; }
}

/* ==========================================================================
   Primary secondary-page surfaces.

   These six pages are hubs, not leaves. They share one hero (.ph-surface) and
   one section rhythm so they read as a family, and then diverge completely:
   each one is built around a signature block that answers its own job.

       services   .surface-board       a price board, servicing first
       bodywork   .surface-damage-grid photographed damage, not word cards
       fleet      .surface-ledger      a capability specification
       brands     .surface-marque-grid marques over real workshop cars
       areas      .surface-reach       position, reach and opening
       contact    .surface-route-grid  three equal routes to a person

   Only .surface-index is deliberately shared, by the makes and areas A-to-Z
   directories, because they are the same object. Child pages keep the five
   family treatments defined at the top of this file.
   ========================================================================== */

/* ---------- the shared surface hero ------------------------------------- */
.ph-surface { padding: calc(82px + clamp(26px, 3.6vw, 48px)) 0 0; color: var(--ink); }
.ph-surface .crumbs { color: var(--ink3); }
.ph-surface .crumbs a { color: var(--ink2); }
.ph-surface .crumbs [aria-current] { color: var(--ink); }
.ph-surface h1 { font-size: clamp(2.1rem, 4.6vw, 3.9rem); color: var(--ink); max-width: 17ch; }
.ph-surface .lede { color: var(--ink2); font-size: 1.12rem; max-width: 58ch; }
.ph-surface-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(30px, 4vw, 46px) 0 0; padding: 0; border-top: 1px solid var(--line2);
}
.ph-surface-stats > div { min-width: 0; padding: 20px 22px 0 0; }
.ph-surface-stats dt {
  font-size: clamp(1.5rem, 3.1vw, 2.5rem); line-height: 1; font-weight: 800;
  letter-spacing: -.045em; color: var(--ink);
}
.ph-surface-stats dd {
  margin: 10px 0 0; font: 500 .68rem/1.45 "PlexM", monospace;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink3);
}

/* ---------- the shared section rhythm ----------------------------------- */
/* Three rhythm tiers by the section's job, not one padding everywhere — the
   same convention the homepage uses. A page where every section is padded
   identically has no pivotal moment, which is most of why these read flat. */
.pg-surface {
  --tick-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  --sec-lead: clamp(72px, 8.5vw, 126px);
  --sec-base: clamp(54px, 6.5vw, 90px);
  --sec-tight: clamp(42px, 5vw, 68px);
  /* Section headings cap well below the h1. Inheriting the homepage's
     clamp(2.2rem,4.2vw,3.4rem) put every h2 at 87% of the hero, so four
     headings a page all shouted at once and nothing read as primary. */
  --h2-lead: clamp(1.85rem, 3.2vw, 2.55rem);
  --h2: clamp(1.45rem, 2.35vw, 2.05rem);
  --h2-quiet: clamp(1.3rem, 1.9vw, 1.7rem);
}
.pg-surface .surface-section { position: relative; padding: var(--sec-base) 0; }
.pg-surface .surface-section > .wrap { min-width: 0; }
/* site.css pads every <section>. The catalogue and directory groups are
   sections too, and inherited a 104px gap under each heading. */
.pg-surface .surface-section section { padding: 0; }
.pg-surface .surface-section .sec-h { margin: 0 0 clamp(26px, 3.4vw, 44px); text-align: left; }
.pg-surface .surface-section .sec-h p { margin-left: 0; max-width: 58ch; }
.pg-surface .surface-section h2 {
  max-width: 20ch; font-size: var(--h2); line-height: 1.12; margin-top: 12px;
}
.pg-surface .surface-section .sec-h h2:first-child { margin-top: 0; }

/* One lead section per page carries the page's argument and gets the room. */
.pg-services .surface-prices,
.pg-bodywork .surface-estimate,
.pg-fleet .surface-capability,
.pg-brands-index .surface-featured,
.pg-areas-index .surface-location,
.pg-contact-index .surface-channels { padding-block: var(--sec-lead); }
.pg-services .surface-prices h2,
.pg-bodywork .surface-callout h2,
.pg-fleet .surface-capability h2,
.pg-brands-index .surface-featured h2,
.pg-areas-index .surface-split h2,
.pg-contact-index .surface-channels h2 { font-size: var(--h2-lead); max-width: 16ch; }

/* Connective sections — directories, the form, the photo strip — step down. */
.pg-surface .surface-section.surface-directory,
.pg-surface .surface-section.surface-finder,
.pg-surface .surface-section.surface-core,
.pg-surface .surface-section.surface-form,
.pg-surface .surface-section.surface-proof,
.pg-surface .surface-section.surface-reach { padding-block: var(--sec-tight); }
/* Restated at the same specificity as the .pg-surface .surface-section h2
   rule above; at one class less it lost the cascade and every connective
   heading stayed at the standard size. */
.pg-surface .surface-section.surface-directory h2,
.pg-surface .surface-section.surface-finder h2,
.pg-surface .surface-section.surface-core h2,
.pg-surface .surface-section.surface-form h2,
.pg-surface .surface-section.surface-proof h2,
.pg-surface .surface-section.surface-reach h2 { font-size: var(--h2-quiet); }
.surface-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.surface-note { max-width: 72ch; margin: 24px 0 0; color: var(--ink2); font-size: .94rem; line-height: 1.6; }
.surface-photo { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Dark closing panels. Every surface ends on one, which is what makes the six
   feel like one site rather than six templates. */
.surface-guidance, .surface-enquiry {
  color: #fff; background: linear-gradient(135deg, var(--panel-a), var(--panel-b));
}
.surface-guidance .ey, .surface-enquiry .ey { color: #9BB8FF; }
.surface-guidance h2, .surface-enquiry h2 { color: #fff; }
.surface-guidance .sec-h p, .surface-enquiry .sec-h p { color: rgba(255, 255, 255, .78); }
.surface-enquiry .btn-ghost {
  color: #fff; background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .3); box-shadow: none;
}
.surface-enquiry .btn-ghost:hover { background: rgba(255, 255, 255, .18); border-color: #fff; }
/* site.css rings focus in cobalt, which all but vanishes on these navy
   panels. Keyboard users get a white ring on the dark grounds instead. */
.surface-guidance :focus-visible, .surface-enquiry :focus-visible,
.pg-fleet .surface-capability :focus-visible,
.pg-areas-index .surface-location :focus-visible { outline-color: #fff; }

/* ==========================================================================
   1. Services: the price board leads, then the workshop catalogue.
   Servicing is the work the garage wants, so the numbers come before the
   chooser and before the directory. The directory is rows, not tiles: as
   cards it was the tallest section on the site and buried the prices.
   ========================================================================== */
.pg-services .surface-prices { padding-top: clamp(46px, 6vw, 78px); }
/* Stretch, not start or centre: the price list and the photo pair are never
   the same natural height, and either alignment leaves a visible hole on one
   side. The photos take their height from the list instead. */
.surface-board {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .82fr);
  gap: clamp(30px, 5vw, 64px); align-items: start;
}
.surface-board-list { margin: 0; padding: 0; border-top: 1px solid var(--line2); }
.surface-board-list > div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; gap: 6px 20px;
  padding: clamp(18px, 2.4vw, 26px) 0; border-bottom: 1px solid var(--line);
}
.surface-board-list dt {
  font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 700;
  letter-spacing: -.025em; color: var(--ink);
}
.surface-board-list dd {
  margin: 0; text-align: right; white-space: nowrap;
  font: 600 clamp(1.15rem, 2.1vw, 1.6rem)/1.1 "PlexM", monospace;
  letter-spacing: -.02em; color: var(--cobalt);
}
.surface-board-list .surface-board-note {
  grid-column: 1 / -1; text-align: left; white-space: normal;
  font: 400 .92rem/1.5 "Hanken", sans-serif; letter-spacing: 0; color: var(--ink2);
}
/* Two photos sized so the pair lands level with the three price rows beside
   them. 1fr rows here created a cyclic height and blew the pair to 655px each. */
.surface-board-media { display: grid; gap: 14px; }
.surface-board-media .surface-photo {
  height: clamp(132px, 14.5vw, 164px); border-radius: var(--r-xl); box-shadow: var(--soft-sm);
}
.surface-free {
  display: block; max-width: 760px; margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 20px 24px; border-left: 4px solid var(--gold);
  color: var(--ink2); font-size: 1rem; line-height: 1.6;
}
.surface-free b { color: var(--ink); }
.freecode {
  font: 600 .92em/1 "PlexM", monospace; letter-spacing: .04em;
  padding: 3px 8px; border-radius: var(--r-md);
  background: var(--cobalt-soft); color: var(--cobalt);
}

.surface-intents { background: var(--bg2); border-block: 1px solid var(--line); }
.surface-intent-grid { counter-reset: surface-intent; margin: 0; padding: 0; }
.surface-intent-grid .rel-card {
  counter-increment: surface-intent; min-height: 148px; justify-content: flex-end;
}
.surface-intent-grid .rel-card::after {
  content: "0" counter(surface-intent); position: absolute; top: 20px; right: 22px;
  font: 500 .68rem/1 "PlexM", monospace; letter-spacing: .12em; color: var(--ink3);
}

.surface-directory-group + .surface-directory-group { margin-top: clamp(36px, 4.5vw, 58px); }
.surface-directory-group h3 { margin: 0 0 18px; font-size: clamp(1.2rem, 2vw, 1.6rem); }
.surface-directory-group--secondary { padding-top: 30px; border-top: 1px solid var(--line); }
.surface-directory-group--secondary h3 {
  font: 500 .72rem/1.4 "PlexM", monospace; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink3);
}
.surface-catalogue {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(20px, 3vw, 44px); border-top: 1px solid var(--line);
}
.surface-link {
  display: grid; gap: 4px; min-height: 64px; padding: 14px 30px 14px 0; align-content: start;
  border-bottom: 1px solid var(--line); position: relative;
  transition: color .2s, border-color .2s;
}
.surface-link b { font-size: 1rem; letter-spacing: -.015em; color: var(--ink); }
/* Two lines, not one clipped one: the summaries are whole sentences, and a row
   ending in "follows the manufacture..." tells a customer nothing. */
.surface-link span {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; font-size: .84rem; line-height: 1.45; color: var(--ink3);
}
.surface-link::after {
  content: "→"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  color: var(--ink3); opacity: 0; transition: opacity .2s, transform .2s var(--ease-out);
}
.surface-link:hover { border-color: var(--cobalt); }
.surface-link:hover b { color: var(--cobalt); }
.surface-link:hover::after { opacity: 1; transform: translateY(-50%) translateX(4px); color: var(--cobalt); }
.surface-link--secondary { min-height: 48px; padding-block: 11px; }
.surface-link--secondary b { font-size: .92rem; font-weight: 600; color: var(--ink2); }
.surface-link--secondary span { display: none; }

/* ==========================================================================
   2. Bodywork: a walk-in estimate you can act on, then real damage.
   An estimate is a visual job, so the capability grid carries photographs
   from this bodyshop rather than four more text cards.
   ========================================================================== */
.pg-bodywork .surface-estimate { padding-top: clamp(42px, 5vw, 70px); }
.surface-callout { max-width: 980px; padding: clamp(28px, 5vw, 58px); border-top: 5px solid var(--plate); }
.surface-callout h2 { max-width: 17ch; margin-top: 14px; font-size: clamp(2rem, 4vw, 3.35rem); }
.surface-callout p { max-width: 62ch; margin-top: 18px; color: var(--ink2); font-size: 1.08rem; }
.surface-callout .surface-actions { margin-top: clamp(24px, 3vw, 34px); }

.surface-repairs { background: var(--bg2); border-block: 1px solid var(--line); }
.surface-damage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
/* Grid, not flex: as flex children the photographs absorbed the leftover height
   of the tallest tile, so each one cropped to a different depth. */
.surface-damage { display: grid; grid-template-rows: auto 1fr; padding: 0; overflow: hidden; }
.surface-damage-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--band); }
.surface-damage-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 24px; }
.surface-damage-body b { font-size: 1.06rem; letter-spacing: -.02em; color: var(--ink); }
.surface-damage-body span { font-size: .9rem; line-height: 1.5; color: var(--ink2); }

.surface-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); counter-reset: surface-step;
}
.surface-steps li {
  counter-increment: surface-step; position: relative; min-width: 0;
  padding: 58px 20px 0 0; border-top: 1px solid var(--line2);
}
.surface-steps li::before {
  content: counter(surface-step, decimal-leading-zero); position: absolute; top: -18px; left: 0;
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--line2);
  font: 500 .68rem/1 "PlexM", monospace; color: var(--ink3);
}
.surface-steps b, .surface-steps span { display: block; }
.surface-steps b { color: var(--ink); font-size: 1.03rem; }
.surface-steps span { margin-top: 8px; color: var(--ink2); font-size: .9rem; line-height: 1.5; }
.surface-qualifier { max-width: 780px; margin: clamp(38px, 5vw, 64px) 0 0 auto; padding: clamp(24px, 3.2vw, 36px); }
.surface-qualifier h3 { font-size: 1.3rem; }
.surface-qualifier p { margin-top: 12px; color: var(--ink2); line-height: 1.6; }

/* Light, not dark: this sat directly above the dark closing panel, so the
   page ended in ~1400px of unbroken navy. One dark moment per page, and on
   every surface that moment is the close. */
.surface-proof { background: var(--bg2); border-block: 1px solid var(--line); }
.surface-proof-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; margin: 0; padding: 0; }
.surface-proof-grid .surface-photo { height: clamp(280px, 36vw, 520px); border-radius: var(--r-xl); }
.surface-proof-grid .surface-photo + .surface-photo {
  height: clamp(230px, 30vw, 430px); margin-top: clamp(48px, 7vw, 100px);
}

/* ==========================================================================
   3. Fleet: a specification, not a sales page. An operator wants to know what
   the site can absorb, so the work reads as a ledger with the capacity that
   backs each line, and every number here is one we can point at on site.
   ========================================================================== */
.pg-fleet .surface-capability {
  padding-top: clamp(46px, 6vw, 78px); color: #fff;
  background: linear-gradient(120deg, #0A1730, var(--panel-a));
}
.surface-capability-in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .78fr);
  gap: clamp(32px, 6vw, 80px); align-items: center;
}
.surface-capability .ey { color: #A9C1FF; }
.surface-capability h2 { max-width: 18ch; margin-top: 14px; color: #fff; font-size: clamp(2rem, 4vw, 3.35rem); }
.surface-capability p { max-width: 58ch; margin-top: 16px; color: rgba(255, 255, 255, .76); }
/* The one deliberate break in the set: the photo crosses the band's lower
   edge onto the light ground below, so the page has a moment that isn't
   square to the grid. transform, not a negative margin — a percentage margin
   resolves against the container's width and moved it nowhere useful. It is
   gated to the two-column widths; stacked, it would land on the next heading. */
.surface-capability-media { position: relative; z-index: 2; }
@media (min-width: 1100px) {
  .pg-fleet .surface-capability { padding-bottom: var(--sec-tight); }
  .surface-capability-media { transform: translateY(clamp(96px, 9.5vw, 140px)); }
}
.surface-capability-media .surface-photo {
  height: clamp(220px, 26vw, 360px); border-radius: var(--r-xl);
  box-shadow: 0 26px 70px -24px rgba(0, 0, 0, .8);
}
@media (min-width: 1100px) { .pg-fleet .surface-work { padding-top: clamp(120px, 12vw, 186px); } }
.surface-facts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: clamp(30px, 4vw, 46px) 0 0; padding: 0;
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.surface-facts > div { min-width: 0; padding: 24px 24px 0 0; }
.surface-facts dt {
  font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: .9; font-weight: 800;
  letter-spacing: -.055em; color: #fff;
}
.surface-facts dd {
  margin: 12px 0 0; font: 500 .68rem/1.4 "PlexM", monospace;
  letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .66);
}

.pg-fleet .surface-work { background: var(--bg2); border-bottom: 1px solid var(--line); }
.surface-work-in {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr);
  gap: clamp(30px, 5vw, 64px); align-items: center;
}
.surface-ledger { margin: 0; padding: 0; border-top: 1px solid var(--line2); }
/* A fixed last column, not auto: an auto track is sized per row, so every row
   started its description at a different x and the ledger stopped reading as one. */
.surface-ledger-row {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr) 172px;
  gap: 6px 24px; align-items: baseline;
  padding: clamp(16px, 2vw, 22px) 0; border-bottom: 1px solid var(--line);
}
.surface-ledger-row dt { font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.surface-ledger-row dd { margin: 0; font-size: .93rem; line-height: 1.5; color: var(--ink2); }
.surface-ledger-where {
  justify-self: end; text-align: right; white-space: nowrap;
  font: 500 .66rem/1.4 "PlexM", monospace; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cobalt);
}
.surface-work-media .surface-photo {
  height: clamp(220px, 28vw, 400px); border-radius: var(--r-xl); box-shadow: var(--soft-sm);
}

/* The fleet arrangement is a sequence like bodywork's, but it is read once and
   acted on by one person, so it stacks as rows instead of a five-across strip. */
.surface-arrangement { list-style: none; margin: 0; padding: 0; counter-reset: surface-stage; }
.surface-arrangement li {
  counter-increment: surface-stage; position: relative;
  display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr);
  gap: 6px 28px; align-items: baseline;
  padding: clamp(18px, 2.2vw, 24px) 0 clamp(18px, 2.2vw, 24px) 62px;
  border-bottom: 1px solid var(--line);
}
.surface-arrangement li:first-child { border-top: 1px solid var(--line2); }
.surface-arrangement li::before {
  content: counter(surface-stage, decimal-leading-zero); position: absolute;
  left: 0; top: clamp(18px, 2.2vw, 24px);
  font: 500 .74rem/1.4 "PlexM", monospace; letter-spacing: .1em; color: var(--cobalt);
}
.surface-arrangement b { font-size: 1.05rem; letter-spacing: -.02em; color: var(--ink); }
.surface-arrangement span { font-size: .93rem; line-height: 1.55; color: var(--ink2); }

/* ==========================================================================
   4. Car makes: the marque wall. Featured makes sit over a car we actually
   photographed here; the complete A-to-Z below is text, because forty-seven
   150px tiles made the page six thousand pixels tall and told nobody anything.
   ========================================================================== */
.surface-expertise-in {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr);
  gap: clamp(34px, 6vw, 84px); align-items: center;
}
.surface-expertise h2 { max-width: 18ch; margin-top: 14px; font-size: clamp(1.9rem, 3.6vw, 3rem); }
.surface-expertise p { max-width: 62ch; margin-top: 16px; color: var(--ink2); }
.surface-checks {
  margin-top: clamp(24px, 3vw, 34px); padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--surface); box-shadow: var(--soft-sm);
}
.surface-checks li { min-height: 44px; align-items: center; padding-left: 36px; position: relative; }
/* A drawn tick, not a text glyph: a glyph's weight and baseline shift with
   the font stack, and the rest of the site uses this same SVG mark. */
.surface-checks li::before {
  content: ""; position: absolute; left: 0; top: 50%; margin-top: -12px;
  width: 24px; height: 24px; border-radius: 50%; background: var(--cobalt-soft);
}
.surface-checks li::after {
  content: ""; position: absolute; left: 6px; top: 50%; margin-top: -6px;
  width: 12px; height: 12px; background: var(--cobalt);
  -webkit-mask: var(--tick-mask) center / contain no-repeat;
          mask: var(--tick-mask) center / contain no-repeat;
}
.surface-expertise-media .surface-photo {
  height: clamp(240px, 30vw, 420px); border-radius: var(--r-xl); box-shadow: var(--soft-sm);
}

.surface-featured { background: var(--bg2); border-block: 1px solid var(--line); }
.surface-marque-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.surface-marque {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-xl); border: 1px solid var(--line);
  background: var(--panel-b); box-shadow: var(--soft-sm);
  transition: transform .25s var(--ease-out), border-color .25s;
}
.surface-marque:hover { border-color: var(--cobalt); }
.surface-marque-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--panel-b); }
/* The workshop photographs are already dim. .62 sank them into the navy, so
   the car is kept near full strength and the scrim below carries the text. */
.surface-marque-media .surface-photo { opacity: .88; }
.surface-marque-body {
  position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: 6px;
  padding: 24px 22px 22px;
  background: linear-gradient(to top, rgba(7, 16, 28, .97), rgba(7, 16, 28, .88) 62%, transparent);
}
.surface-marque-body .bl { width: 34px; height: 34px; margin-bottom: 6px; object-fit: contain; filter: brightness(0) invert(1); }
.surface-marque-body .bl.txt {
  display: grid; place-items: center; border-radius: var(--r-md); filter: none;
  background: rgba(255, 255, 255, .16); color: #fff;
  font-family: "Hanken", sans-serif; font-size: .92rem; font-weight: 800; letter-spacing: -.02em;
}
.surface-marque-body b { font-size: 1.2rem; letter-spacing: -.025em; color: #fff; }
.surface-marque-body > span:last-child {
  font: 400 .74rem/1.5 "PlexM", monospace; letter-spacing: .04em; color: rgba(255, 255, 255, .74);
}

/* ==========================================================================
   5. Areas: where the garage is and how far it reaches, before the index.
   ========================================================================== */
.pg-areas-index .surface-location {
  padding-top: clamp(46px, 6vw, 78px); color: #fff;
  background: linear-gradient(120deg, #0A1730, var(--panel-a));
}
.surface-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .82fr);
  gap: clamp(34px, 6vw, 84px); align-items: center;
}
.surface-split h2 { max-width: 17ch; margin-top: 14px; color: #fff; font-size: clamp(2rem, 4vw, 3.35rem); }
.surface-split p { max-width: 62ch; margin: 16px 0 24px; color: rgba(255, 255, 255, .76); }
.surface-split .getdir {
  display: inline-flex; justify-content: center; align-items: center;
  min-height: 54px; margin: 0; padding: 0 24px; color: #fff;
  border: 1px solid rgba(255, 255, 255, .46); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .1);
}
.surface-split .getdir:hover { color: #0A1730; background: #fff; border-color: #fff; }
.surface-location-media .surface-photo {
  height: clamp(220px, 26vw, 360px); border-radius: var(--r-xl);
  box-shadow: 0 26px 70px -24px rgba(0, 0, 0, .8);
}

.surface-reach { background: var(--bg2); border-bottom: 1px solid var(--line); }
.surface-reach-in {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(240px, .9fr);
  gap: clamp(30px, 5vw, 64px); align-items: center;
}
.surface-reach-list { margin: 0; padding: 0; border-top: 1px solid var(--line2); }
.surface-reach-list > div {
  display: grid; gap: 8px;
  padding: clamp(18px, 2.4vw, 26px) 0; border-bottom: 1px solid var(--line);
}
.surface-reach-list dt {
  font: 500 .7rem/1.3 "PlexM", monospace; letter-spacing: .13em;
  text-transform: uppercase; color: var(--cobalt);
}
.surface-reach-list dd { margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--ink); }
.surface-reach-media .surface-photo {
  height: clamp(220px, 28vw, 380px); border-radius: var(--r-xl); box-shadow: var(--soft-sm);
}
.surface-core { background: var(--bg); border-bottom: 1px solid var(--line); }
/* A later .area-links rule turns the row into a scrollbar-less horizontal
   rail for the homepage. Inherited here it put all 20 core areas on one
   2593px line inside a 1160px box, so half of them were simply unreachable. */
.pg-areas-index .surface-core .area-links {
  margin-top: 0; flex-wrap: wrap; overflow-x: visible; padding-bottom: 0;
}
.surface-core .area-links a { min-height: 44px; display: inline-flex; align-items: center; }

/* ==========================================================================
   The shared A-to-Z directory, used by makes and areas.
   ========================================================================== */
.surface-finder { background: var(--bg2); border-top: 1px solid var(--line); }
.surface-filter { max-width: 760px; padding: clamp(22px, 3vw, 30px); overflow: visible; }
.surface-filter label {
  display: block; margin-bottom: 10px; font: 500 .7rem/1.2 "PlexM", monospace;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink3);
}
.surface-filter-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.surface-filter input {
  width: 100%; min-height: 48px; padding: 11px 15px;
  border: 1px solid var(--line2); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); font-size: 1rem;
}
.surface-filter input:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-soft); }
.surface-filter [data-filter-count] { margin-top: 10px; color: var(--ink3); font: 500 .7rem/1.5 "PlexM", monospace; }
/* Sticky: the index below runs ~2400px, so a static rail meant scrolling back
   to the top to jump from the M's to the W's.
   It pins at 0 and carries its own 84px of top padding rather than sitting at
   top:74px — that way the band's background covers the strip under the
   floating nav instead of leaving open ground for names to scroll through.
   The negative top margin cancels the extra padding, so the unpinned position
   is exactly where it was. */
.surface-az {
  display: flex; flex-wrap: wrap; gap: 6px; margin: -46px 0 36px;
  position: sticky; top: 0; z-index: 5;
  padding: 84px 0 12px; background: var(--bg2);
  box-shadow: 0 0 0 100vmax var(--bg2); clip-path: inset(0 -100vmax);
}
.surface-az a {
  display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 8px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  font: 500 .82rem/1 "PlexM", monospace; color: var(--ink2);
  transition: color .2s, border-color .2s, background .2s;
}
.surface-az a:hover { color: var(--cobalt); border-color: var(--cobalt); background: var(--cobalt-soft); }
.surface-results [hidden], .surface-result-group[hidden] { display: none !important; }

/* Anchor targets need to clear the chrome that floats over them, or the jump
   lands the heading underneath it. The A-to-Z rail was hiding the very group
   its own links scrolled to; the catalogue and form anchors only have to
   clear the nav. */
.pg-surface .surface-result-group { scroll-margin-top: 164px; }
.pg-surface .surface-directory-group h3,
.pg-surface .surface-section[id] { scroll-margin-top: 96px; }

/* Multi-column, not a grid of per-letter blocks. All 217 area pages and 47 makes
   are server-rendered for crawlers, and a grid wastes up to five slots per letter
   rounding out its last row: that alone was over 3000px of empty page. Letting
   the letters flow down the columns packs them with no waste, and break-after on
   the heading stops a letter being stranded at the foot of a column. */
.surface-results.area-index {
  display: block; gap: 0;
  columns: 6 auto; column-gap: clamp(16px, 2.2vw, 32px);
}
.surface-results .area-group {
  display: block; break-inside: auto; padding: 0; border-top: 0;
  margin-bottom: clamp(14px, 1.6vw, 22px);
}
.surface-results .area-group h3 {
  break-after: avoid; margin: 0 0 4px;
  padding-bottom: 6px; border-bottom: 1px solid var(--line2);
}
.surface-index { display: block; }
.surface-index a {
  display: flex; align-items: center; min-height: 44px; min-width: 0;
  padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line);
  font-size: .95rem; color: var(--ink2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.surface-index a:hover { color: var(--cobalt); border-color: var(--cobalt); }

/* The directory collapsed to a 0px hole when a search matched nothing; the
   only feedback was the small count line above it. Shown only when every
   group is filtered out — without :has() it stays hidden, as before. */
.surface-empty {
  display: none; max-width: 60ch; margin: 8px 0 0;
  padding: 22px 24px; border-left: 4px solid var(--gold);
  background: var(--surface); border-radius: 0 var(--r-lg) var(--r-lg) 0;
  color: var(--ink2); font-size: 1rem; line-height: 1.6;
}
.surface-empty a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 3px; }
.surface-results:not(:has(.surface-result-group:not([hidden]))) + .surface-empty { display: block; }

/* ==========================================================================
   6. Contact: three equal routes to a person, then the form, then the map.
   The garage takes no bookings online, so the page never pretends otherwise:
   the three things that actually reach someone are given equal weight and
   everything else drops to a facts row beneath them.
   ========================================================================== */
.pg-contact-index .surface-channels { padding-top: clamp(46px, 6vw, 78px); }
.pg-contact-index .surface-channels .sec-h { text-align: left; margin-inline: 0; }
.pg-contact-index .surface-channels .sec-h p { margin-inline: 0; }
.surface-route-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.surface-route {
  display: flex; flex-direction: column; gap: 10px; min-height: 176px;
  padding: 26px 24px; border-radius: var(--r-xl); border: 1px solid var(--line);
  background: var(--surface); box-shadow: var(--soft-sm);
  transition: transform .25s var(--ease-out), border-color .25s;
}
.surface-route:hover { border-color: var(--cobalt); }
.surface-route-kind {
  font: 500 .68rem/1.2 "PlexM", monospace; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink3);
}
.surface-route b {
  margin-top: auto; font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  letter-spacing: -.03em; color: var(--ink);
}
.surface-route > span:last-child { font-size: .88rem; line-height: 1.5; color: var(--ink2); }
.surface-route--call { color: #fff; background: linear-gradient(145deg, var(--cobalt), var(--cobalt2)); border-color: transparent; }
.surface-route--call .surface-route-kind { color: rgba(255, 255, 255, .74); }
.surface-route--call b { color: #fff; }
.surface-route--call > span:last-child { color: rgba(255, 255, 255, .84); }
.surface-route--call:hover { border-color: var(--cobalt); }
.surface-route--wa { border-color: rgba(37, 211, 102, .45); }
.surface-route--wa:hover { border-color: #25D366; }

.surface-facts-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(20px, 3vw, 44px);
  margin: clamp(26px, 3.4vw, 40px) 0 0; padding: 0; border-top: 1px solid var(--line2);
}
.surface-facts-row > div { min-width: 0; padding: 20px 0; }
.surface-facts-row dt {
  font: 500 .68rem/1.3 "PlexM", monospace; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink3);
}
.surface-facts-row dd { margin: 10px 0 0; }
.surface-facts-row a {
  display: inline-flex; align-items: center; min-height: 32px;
  font-size: .96rem; line-height: 1.45; color: var(--ink);
  border-bottom: 1px solid var(--line2); transition: color .2s, border-color .2s;
}
.surface-facts-row a:hover { color: var(--cobalt); border-color: var(--cobalt); }

.pg-contact-index .surface-form { background: var(--bg2); border-block: 1px solid var(--line); }
.pg-contact-index .surface-location { padding-bottom: calc(var(--sp-wide) + var(--callbar-h, 0px)); }
.pg-contact-index .surface-location-media { margin-bottom: clamp(22px, 3vw, 36px); }
.pg-contact-index .surface-location-media .surface-photo {
  height: clamp(200px, 26vw, 380px); border-radius: var(--r-xl); box-shadow: var(--soft-sm);
}
.surface-estimate-note { max-width: 760px; margin: clamp(28px, 4vw, 46px) auto 0; padding: 24px 28px; border-left: 4px solid var(--plate); }
.surface-estimate-note h3 { font-size: 1.16rem; }
.surface-estimate-note p { margin-top: 8px; color: var(--ink2); }

/* ---------- responsive --------------------------------------------------- */
@media (max-width: 1180px) {
  .surface-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px 0; }
  .surface-results.area-index { columns: 5 auto; }
  .surface-proof-grid { grid-template-columns: 1fr 1fr; }
  .surface-damage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .surface-catalogue { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .surface-expertise-in, .surface-split, .surface-capability-in,
  .surface-work-in, .surface-reach-in, .surface-board {
    grid-template-columns: 1fr; align-items: start;
  }
  .surface-marque-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .surface-results.area-index { columns: 4 auto; }
  .surface-board-media { grid-template-columns: 1fr 1fr; }
  .surface-facts { grid-template-columns: repeat(3, 1fr); }
  .surface-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .surface-route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pg-surface .surface-section { padding: clamp(44px, 12vw, 68px) 0; }
  .pg-contact-index .surface-location {
    padding-bottom: calc(clamp(44px, 12vw, 68px) + var(--callbar-h, 0px));
  }
  .ph-surface-stats { grid-template-columns: 1fr; gap: 0; border-top: 0; }
  .ph-surface-stats > div { padding: 16px 0; border-top: 1px solid var(--line2); }
  .ph-surface-stats dt { font-size: 1.7rem; }
  .surface-board-media { grid-template-columns: 1fr; }
  .surface-catalogue, .surface-damage-grid, .surface-marque-grid,
  .surface-route-grid, .surface-proof-grid, .surface-steps { grid-template-columns: 1fr; }
  /* One tile per row on a phone, so a 4:3 crop would put six of them over
     1900px. The car still reads at 16:9. */
  .surface-marque-media, .surface-damage-media { aspect-ratio: 16 / 9; }
  .surface-facts, .surface-facts-row { grid-template-columns: 1fr; gap: 0; border-top: 0; }
  .surface-facts > div { padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, .2); }
  .surface-facts-row > div { border-top: 1px solid var(--line2); }
  .surface-steps { gap: 0; border-top: 1px solid var(--line2); }
  .surface-steps li { min-height: 104px; padding: 22px 0 22px 58px; border-top: 0; border-bottom: 1px solid var(--line); }
  .surface-steps li::before { top: 20px; }
  .surface-proof-grid .surface-photo,
  .surface-proof-grid .surface-photo + .surface-photo { height: clamp(230px, 72vw, 380px); margin-top: 0; }
  .surface-ledger-row, .surface-arrangement li { grid-template-columns: 1fr; }
  .surface-ledger-where { justify-self: start; text-align: left; margin-top: 4px; }
  .surface-actions { flex-direction: column; }
  .surface-actions .btn { width: 100%; white-space: normal; text-align: center; min-height: 48px; }
  .surface-filter-row { grid-template-columns: 1fr; }
  .surface-filter-row .btn { width: 100%; min-height: 46px; }
  .surface-az { gap: 5px; margin-bottom: 28px; }
  .surface-result-group { grid-template-columns: 1fr; gap: 10px; }
  .surface-results.area-index { columns: 2 auto; }
}
@media (max-width: 420px) {
  .surface-results.area-index { columns: 1 auto; }
  .surface-board-list dd { font-size: 1.3rem; }
  .surface-callout { padding: 26px 22px; }
  .surface-az a { min-width: 44px; }
  .surface-filter { padding: 20px 18px; }
  .surface-route { min-height: 148px; }
}

/* The lift is pointer-only: on touch it fires on tap, after the finger has
   already left, so it reads as a rendering glitch rather than as feedback. */
@media (hover: hover) and (pointer: fine) {
  .surface-marque:hover, .surface-route:hover { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .surface-az a, .surface-filter input, .surface-enquiry .btn-ghost,
  .surface-marque, .surface-route, .surface-link, .surface-index a,
  .surface-damage, .surface-callout { transition: none; }
  .surface-marque:hover, .surface-route:hover { transform: none; }
}