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

   The first screen of every inner page is one of the ten heroes in block 0
   (scripts/heroes.py renders them; HERO_FAMILY in build.py assigns them).
   The legal pages keep their typographic masthead and the error page its
   light editorial head with a photograph band.
   ========================================================================== */

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; }

.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:var(--font-sans);font-size:var(--t-micro);letter-spacing: .1em;text-transform: uppercase;margin-bottom: 20px;font-weight:700}
.crumbs .sep { opacity: .45; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

.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; }

/* ==========================================================================
   0. The hero family. Ten first screens, one per kind of page, each built
   around one thing from the garage's own world. scripts/heroes.py renders
   them; HERO_FAMILY in scripts/build.py says which page gets which.

   Shared grammar: section.page-hero.hx.hx-<family> > .wrap.hx-in > .hx-copy
   holding crumbs, .hx-eye, h1.hx-h1 (with .hx-h1-tail), .hx-lede and
   .hero-ask. Figures are dl.hx-facts. Layers inside a hero use z-index 0-2;
   the copy's .wrap is 3 (shared scaffolding above).

   Motion is entrance-only, CSS, keyed to html.anim (set by site.js) and
   inside prefers-reduced-motion: no-preference. Without either, every hero
   renders at rest, complete.
   ========================================================================== */
.hx {
  --hx-clear: calc(var(--nav-bottom, 82px) - var(--hero-top, 0px) + clamp(22px, 3.4vw, 48px));
  --hx-foot: clamp(44px, 6.5vh, 88px);
  --hx-ease: cubic-bezier(.16, 1, .3, 1);
  --hx-night: #060C1A;
  display: grid; min-height: max(620px, calc(100svh - var(--callbar-h, 0px)));
  color: var(--ink);
  /* site.css pads every section; a hero sets its own space through .hx-in. */
  padding: 0;
}
.hx > .wrap { width: 100%; }
.hx-in { padding-top: var(--hx-clear); padding-bottom: var(--hx-foot); }
.hx img { max-width: none; height: auto; }
.hx-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hx-media img { width: 100%; height: 100%; object-fit: cover; }
.hx-copy { display: grid; gap: clamp(14px, 2vh, 24px); align-content: start; min-width: 0; }
.hx .crumbs { margin: 0; color: var(--ink3); }
.hx .crumbs a { color: var(--ink2); }
.hx .crumbs [aria-current] { color: var(--ink); }
.hx-eye {
  margin: 0; font-size: var(--t-micro); font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cobalt); display: flex; align-items: center; gap: 12px;
}
.hx-eye::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--gold); flex: 0 0 auto; }
.hx .hx-h1 {
  overflow-wrap: break-word;
  margin: 0; font-weight: 800; letter-spacing: -.05em; line-height: .95; text-wrap: balance;
  font-size: clamp(2.35rem, 1.1rem + 4.6vw, 5.6rem); max-width: 15ch; color: inherit;
}
.hx-h1-tail { display: block; color: var(--cobalt); }
/* A place phrase is the second line, smaller, wherever the service is the
   subject. The route hero keeps it full size: there the place is
   the point. */
.hx-menu .hx-h1-tail, .hx-plate .hx-h1-tail, .hx-ramp .hx-h1-tail, .hx-print .hx-h1-tail, .hx-clearcoat .hx-h1-tail,
.hx-ticket .hx-h1-tail, .hx-chevron .hx-h1-tail, .hx-open .hx-h1-tail, .hx-marque .hx-h1-tail,
.hx-desk .hx-h1-tail {
  font-size: .62em; letter-spacing: -.035em; line-height: 1.02; margin-top: .14em;
}
.hx .hx-lede { margin: 0; font-size: var(--t-lead); line-height: 1.5; max-width: 50ch; color: var(--ink2); }
.hx .hero-ask { display: flex; flex-wrap: wrap; gap: 12px; }
.hx-facts { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; }
.hx-facts > div { min-width: 0; padding: 0 clamp(12px, 1.8vw, 24px); border-left: 1px solid var(--line2); }
.hx-facts > div:first-child { padding-left: 0; border-left: 0; }
.hx-facts dt { font-weight: 800; font-size: clamp(1.05rem, .9rem + .6vw, 1.35rem); letter-spacing: -.02em; line-height: 1.2; }
.hx-facts dd { margin: 3px 0 0; font-size: var(--t-fine); color: var(--ink2); line-height: 1.35; }
.hx-facts .freecode { font-size: .86em; }

.hx-dark { color: #fff; background: var(--hx-night); }
.hx-dark .crumbs, .hx-dark .crumbs a { color: rgba(255, 255, 255, .72); }
.hx-dark .crumbs [aria-current] { color: #fff; }
.hx-dark .hx-eye { color: #9DB8FF; }
.hx-dark .hx-lede { color: rgba(255, 255, 255, .84); }
.hx-dark .hx-h1-tail { color: #9DB8FF; }
.hx-dark .hx-facts > div { border-left-color: rgba(255, 255, 255, .2); }
.hx-dark .hx-facts dd { color: rgba(255, 255, 255, .7); }
.hx-dark :focus-visible { outline-color: #fff; }

@keyframes hx-rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes hx-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  html.anim .hx-copy > * { animation: hx-rise .85s var(--hx-ease) both; }
  html.anim .hx-copy > :nth-child(2) { animation-delay: .07s; }
  html.anim .hx-copy > :nth-child(3) { animation-delay: .14s; }
  html.anim .hx-copy > :nth-child(4) { animation-delay: .21s; }
  html.anim .hx-copy > :nth-child(5) { animation-delay: .28s; }
  html.anim .hx-copy > :nth-child(n+6) { animation-delay: .35s; }
}

/* ---------- plate: the MOT ----------------------------------------------
   The MOT desk, with the garage's own £45 sign on the wall behind it, a UK
   number plate to the 520 x 111 mm proportion reading FREE MOT, and double
   yellow lines along the kerb of the screen. The plate carries only the UK
   identifier: no EU stars, which UK plates no longer use. Its lettering is
   condensed and tall, after the plate face, rather than the body face. */
.hx-plate { background: var(--bg); }
.hx-plate::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--dot-field); background-size: var(--dot-pitch) var(--dot-pitch);
  -webkit-mask-image: radial-gradient(110% 90% at 80% 30%, #000, transparent 72%);
  mask-image: radial-gradient(110% 90% at 80% 30%, #000, transparent 72%);
}
.plate-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.hx-plate .hx-h1 { max-width: 12ch; }
.plate-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.plate-chips li {
  font-size: var(--t-fine); font-weight: 700; padding: 7px 13px 7px 30px; border-radius: var(--r-pill); position: relative;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--soft-sm);
}
.plate-chips li::before {
  content: ""; position: absolute; left: 12px; top: 50%; width: 10px; height: 6px; margin-top: -5px;
  border: solid var(--green); border-width: 0 0 2px 2px; transform: rotate(-45deg);
}
.plate-stage { position: relative; perspective: 1400px; min-width: 0; padding-bottom: clamp(70px, 9vw, 120px); }
.plate-photo { position: relative; margin: 0 0 0 auto; width: 86%; aspect-ratio: 5 / 4; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--soft); }
.plate-photo img { width: 100%; height: 100%; object-fit: cover; }
.plate-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,15,32,.5), rgba(8,15,32,0) 34%); }
.plate-photo figcaption { position: absolute; left: 20px; top: 16px; right: 20px; z-index: 1; color: #fff; font-size: var(--t-fine); font-weight: 700; }
.plate-tilt {
  position: absolute; left: 0; bottom: 0; width: 92%; z-index: 2;
  transform-style: preserve-3d; transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, -10deg)) rotateZ(-2.5deg);
  transition: transform .5s var(--hx-ease);
}
.plate {
  position: relative; aspect-ratio: 520 / 111; border-radius: clamp(7px, 1vw, 12px); display: flex; align-items: stretch; overflow: hidden;
  background: linear-gradient(180deg, #FFE94A 0%, var(--plate) 48%, #E6C200 100%);
  box-shadow: inset 0 0 0 2px #1d1d1d, inset 0 0 0 5px var(--plate), inset 0 1px 0 6px rgba(255,255,255,.35),
    0 36px 60px -24px rgba(40,32,0,.55), 0 12px 22px -12px rgba(0,0,0,.4);
}
.plate-band {
  flex: 0 0 9.5%; margin: 7px 0 7px 7px; border-radius: clamp(4px, .6vw, 8px) 0 0 clamp(4px, .6vw, 8px);
  background: var(--plate-blue); color: #fff; display: grid; place-items: end center; padding-bottom: 10%;
  font-weight: 800; font-size: clamp(.62rem, .3rem + .9vw, 1.1rem); letter-spacing: .03em;
}
.plate-text {
  flex: 1; display: grid; place-items: center; grid-auto-flow: column; justify-content: center; color: var(--plate-ink);
  font-weight: 800; font-size: clamp(2.2rem, .6rem + 5.8vw, 6.4rem); letter-spacing: .03em; line-height: 1;
  transform: scale(.8, 1.1); white-space: nowrap;
}
.plate-gap { display: inline-block; width: .5em; }
.plate::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; background-repeat: no-repeat;
  background-image: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.6) 45%, transparent 58%);
  background-size: 250% 100%; background-position: 120% 0;
}
.plate i { position: absolute; top: 50%; width: clamp(6px, .65vw, 9px); aspect-ratio: 1; border-radius: 50%; transform: translateY(-50%);
  background: radial-gradient(circle at 35% 35%, #fff, #9aa0a6 55%, #4a4f55); }
.plate i:nth-of-type(1) { left: 14%; }
.plate i:nth-of-type(2) { right: 3.2%; }
.plate-code { margin: 16px 0 0 4%; font-size: var(--t-fine); font-weight: 700; color: var(--ink2); }
.plate-lines {
  position: absolute; left: 0; right: 0; bottom: calc(var(--callbar-h, 0px) + 18px); height: 22px; z-index: 0; pointer-events: none;
  background: linear-gradient(var(--plate), var(--plate)) 0 0 / 100% 6px no-repeat, linear-gradient(var(--plate), var(--plate)) 0 100% / 100% 6px no-repeat;
  opacity: .85;
}
@keyframes plate-in { from { opacity: 0; transform: translate3d(-6%, 30%, 0) rotateX(40deg) rotateY(-28deg) rotateZ(-12deg); } }
@keyframes plate-sheen { from { background-position: 120% 0; } to { background-position: -30% 0; } }
@keyframes plate-photo { from { opacity: 0; transform: translateY(30px) scale(.96); } }
@keyframes plate-lines { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: no-preference) {
  html.anim .plate-photo { animation: plate-photo 1s var(--hx-ease) both; }
  html.anim .plate-tilt { animation: plate-in 1.3s .2s var(--hx-ease) both; }
  html.anim .plate::after { animation: plate-sheen 1.6s 1.2s ease-in-out both; }
  html.anim .plate-lines { transform-origin: 0 50%; animation: plate-lines 1.2s .3s var(--hx-ease) both; }
}

/* ---------- ramp: the individual service pages --------------------------
   A navy slab cut at the ramp's angle with a gold edge, the job photograph
   framed beside the copy, the service as an outlined word wider than the
   screen and a turning seal on the frame's edge. */
.hx-ramp { background: var(--panel-b); }
.ramp-frame { position: relative; margin: 0; min-width: 0; aspect-ratio: 6 / 5; max-height: 62vh; justify-self: end; width: 100%; }
.ramp-frame > img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-xl);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 40px 80px -40px rgba(0,0,0,.75); }
.ramp-slab, .ramp-edge { position: absolute; top: 0; bottom: 0; left: 0; width: 56%; pointer-events: none; }
.ramp-slab { z-index: 1; background: var(--feature-grad); clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%); }
.ramp-edge { z-index: 1; background: var(--feature-accent); clip-path: polygon(calc(100% - 1px) 0, calc(100% + 5px) 0, calc(78% + 5px) 100%, calc(78% - 1px) 100%); }
.ramp-word {
  position: absolute; left: -1vw; bottom: -.16em; z-index: 2; margin: 0; pointer-events: none; user-select: none; white-space: nowrap;
  font-weight: 800; line-height: .8; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.24);
  font-size: min(21vw, calc(128vw / var(--len, 6)), 22rem);
}
.ramp-in { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, .5fr); gap: clamp(28px, 5vw, 88px); align-items: center; padding-bottom: clamp(110px, 17vh, 200px); }
.hx-ramp .hx-h1 { font-size: clamp(2.5rem, 1.1rem + 4.2vw, 5.4rem); max-width: 11ch; }
.hx-ramp .hx-h1-tail { color: var(--gold); }
.ramp-seal {
  position: absolute; z-index: 3; left: calc(clamp(128px, 14vw, 192px) / -2); top: 14%;
  width: clamp(128px, 14vw, 192px); aspect-ratio: 1; border-radius: 50%;
  background: rgba(11,29,62,.74); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(232,163,23,.5), 0 24px 50px -20px rgba(0,0,0,.6);
}
.ramp-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ramp-seal text { fill: #fff; font-family: var(--font-sans); font-weight: 800; font-size: 10.4px; letter-spacing: 2.3px; }
.ramp-seal img { position: absolute; left: 50%; top: 50%; width: 52%; transform: translate(-50%, -50%); filter: brightness(0) invert(1); }
@keyframes ramp-spin { to { transform: rotate(360deg); } }
@keyframes ramp-wipe { from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } }
@keyframes ramp-word { from { transform: translateX(16%); opacity: 0; } }
@keyframes ramp-seal { from { transform: scale(.4) rotate(-90deg); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  html.anim .ramp-seal svg { animation: ramp-spin 26s linear infinite; }
  html.anim .ramp-slab, html.anim .ramp-edge { animation: ramp-wipe 1.1s var(--hx-ease) both; }
  html.anim .ramp-edge { animation-delay: .1s; }
  html.anim .ramp-frame > img { animation: hx-rise 1.2s .15s var(--hx-ease) both; }
  html.anim .ramp-word { animation: ramp-word 1.6s .2s var(--hx-ease) both; }
  html.anim .ramp-seal { animation: ramp-seal 1s .7s var(--hx-ease) both; }
}

/* ---------- marque: the car-make pages ----------------------------------
   A dark showroom: the make's name in letters bigger than the car, a
   spotlight cone and a reflective floor. With a photograph of that make the
   car takes the floor; without one, the marque does, on a lit plinth. */
.hx-marque { background: radial-gradient(120% 80% at 62% 18%, #1d3561 0%, #0d1721 52%, #05090f 100%); }
.marque-word {
  position: absolute; left: 50%; top: calc(var(--hx-clear) - 20px); transform: translateX(-50%); z-index: 1; margin: 0;
  white-space: nowrap; pointer-events: none; user-select: none; font-weight: 800; line-height: .8; letter-spacing: -.07em;
  font-size: min(30vw, calc(150vw / var(--len, 5)), 30rem);
  background: linear-gradient(180deg, rgba(157,184,255,.3), rgba(157,184,255,0) 78%); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.16);
}
.marque-cone {
  position: absolute; left: 44%; top: -10%; width: 60%; height: 100%; z-index: 1; pointer-events: none; mix-blend-mode: screen; filter: blur(10px);
  background: conic-gradient(from 180deg at 50% 0, transparent 160deg, rgba(157,184,255,.2) 176deg, rgba(157,184,255,.26) 180deg, rgba(157,184,255,.2) 184deg, transparent 200deg);
}
.marque-in { display: grid; grid-template-columns: minmax(0, .44fr) minmax(0, .56fr); gap: clamp(20px, 3vw, 56px); align-items: start; }
.marque-floor { align-self: center; }
.marque-id { display: flex; align-items: center; gap: 14px; }
.marque-id .hx-eye::before { display: none; }
.marque-disc {
  flex: 0 0 auto; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.1), 0 14px 30px -14px rgba(0,0,0,.8);
}
.marque-disc img { width: 38px; height: 38px; object-fit: contain; }
.hx-marque .hx-h1 { font-size: clamp(2.2rem, 1.1rem + 3.2vw, 4.4rem); }
.marque-floor { position: relative; min-width: 0; display: grid; }
.marque-car {
  aspect-ratio: 16 / 10;
  -webkit-mask-image: radial-gradient(64% 62% at 50% 52%, #000 58%, transparent 100%); mask-image: radial-gradient(64% 62% at 50% 52%, #000 58%, transparent 100%);
}
.marque-car img, .marque-reflect img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.06) saturate(1.05); }
.marque-reflect { aspect-ratio: 16 / 1.7; margin-top: -1%; overflow: hidden; transform: scaleY(-1); opacity: .2; filter: blur(2px);
  -webkit-mask-image: linear-gradient(0deg, #000, transparent 80%); mask-image: linear-gradient(0deg, #000, transparent 80%); }
.marque-reflect img { aspect-ratio: 16 / 10; height: auto; display: block; }
.marque-turntable { display: grid; place-items: center; padding: clamp(24px, 4vh, 48px) 0 clamp(36px, 6vh, 64px); position: relative; }
.marque-turntable::after {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: clamp(8px, 2vh, 22px); height: 34px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(157,184,255,.45), rgba(157,184,255,0));
}
.marque-plinth {
  width: clamp(170px, 18vw, 250px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 1;
  background: radial-gradient(circle at 50% 30%, #fff, #e4e8ef 70%, #c3cad6);
  box-shadow: 0 0 0 10px rgba(255,255,255,.06), 0 0 0 22px rgba(255,255,255,.03), 0 50px 80px -30px rgba(0,0,0,.9), 0 0 120px rgba(157,184,255,.25);
}
.marque-plinth img { width: 56%; height: 56%; object-fit: contain; }
.marque-spec { margin: 0; border-top: 1px solid rgba(255,255,255,.16); }
.marque-spec div { display: flex; justify-content: space-between; gap: 18px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.marque-spec dt { color: rgba(255,255,255,.62); font-size: var(--t-fine); }
.marque-spec dd { margin: 0; font-weight: 700; text-align: right; font-size: var(--t-fine); }
@keyframes marque-word { from { transform: translate(-50%, 22%); opacity: 0; } }
@keyframes marque-cone { from { opacity: 0; transform: scaleY(.4); } }
@keyframes marque-car { from { opacity: 0; transform: translateX(10%) scale(.96); filter: brightness(.2); } }
@keyframes marque-plinth { from { opacity: 0; transform: translateY(40px) rotateY(120deg); } }
@media (prefers-reduced-motion: no-preference) {
  html.anim .marque-word { animation: marque-word 1.6s var(--hx-ease) both; }
  html.anim .marque-cone { transform-origin: 50% 0; animation: marque-cone 2s .3s ease-out both; }
  html.anim .marque-car { animation: marque-car 1.6s .2s var(--hx-ease) both; }
  html.anim .marque-reflect { animation: hx-fade 1.6s .5s ease-out both; }
  html.anim .marque-plinth { animation: marque-plinth 1.4s .2s var(--hx-ease) both; }
}

/* ---------- route: the area pages and the Areas hub ---------------------
   The map is the hero's object: a framed card filling the right column,
   drawn by scripts/route_map.py from content/geo. Each area's card shows the
   real driving route to N12 over the A-road network, with the trip stated on
   a strip across its foot; the hub's card shows every area as a dot. What a
   driver needs on arrival sits under the copy. */
.hx-route { background: var(--bg2); }
.hx-route::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(20,22,26,.1) 1px, transparent 0); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000); mask-image: linear-gradient(90deg, transparent 30%, #000); }
.route-in { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, .5fr); gap: clamp(24px, 4vw, 64px); align-items: center; position: relative; z-index: 3; }
.hx-route .hx-h1 { font-size: clamp(2.2rem, 1.1rem + 3.2vw, 4.4rem); max-width: 13ch; }
.route-card { position: relative; margin: 0; min-width: 0; aspect-ratio: 1 / 1.08; max-height: calc(100svh - var(--hx-clear) - 40px);
  border-radius: var(--r-xl); overflow: hidden; background: #F3F1EC; border: 1px solid var(--line2); box-shadow: var(--soft); }
.route-card--hub { aspect-ratio: 1 / 1; }
.route-map { position: absolute; inset: 0; }
.route-map .rm { width: 100%; height: 100%; display: block; }
.route-bar { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 12px 12px 18px; border-radius: var(--r-lg); background: rgba(255,255,255,.94); box-shadow: 0 14px 30px -18px rgba(11,18,32,.5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.route-trip { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
.route-trip span { flex-basis: 100%; font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--ink3); }
.route-trip b { font-size: clamp(1.25rem, 1rem + .9vw, 1.7rem); font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.route-trip b + b { color: var(--cobalt); }
.route-trip small { font-size: var(--t-fine); color: var(--ink2); font-weight: 700; }
.route-trip--hub { gap: 4px 14px; }
.route-trip--hub b { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.8rem); color: var(--cobalt); }
.route-trip--hub span { flex-basis: auto; max-width: 24ch; text-transform: none; letter-spacing: 0; font-size: var(--t-fine); color: var(--ink2); }
.route-dir { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill);
  font-weight: 800; color: #fff; background: var(--cobalt); box-shadow: 0 10px 22px -12px rgba(30,86,224,.7); }
.route-dir:hover { background: var(--cobalt2); }
.route-dir .ic { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; background: rgba(255,255,255,.2); }
.route-dir .ic svg { width: 13px; height: 13px; }
.route-credit { position: absolute; top: 10px; left: 12px; right: 12px; margin: 0; font-size: .62rem; line-height: 1.3; color: var(--ink3); text-align: left; pointer-events: none; }
.route-rows { margin: 6px 0 0; padding-top: 14px; border-top: 1px solid var(--line2); max-width: 60ch;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.route-rows div { min-width: 0; font-size: var(--t-fine); line-height: 1.4; }
.route-rows dt { font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--ink3); }
.route-rows dd { margin: 3px 0 0; font-weight: 700; }
.route-facts { grid-template-columns: repeat(3, minmax(0, auto)); }
/* The Areas hub is the dark one of the pair: a night map. */
.hx-route.hx-dark { background: linear-gradient(160deg, #0B1D3E, #050D22); }
.hx-route.hx-dark::before { background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 0); }
.hx-route.hx-dark .route-card { background: #0A1733; border-color: rgba(255,255,255,.14); }
.hx-route.hx-dark .rm .rm-net { stroke: rgba(255,255,255,.08); }
.hx-route.hx-dark .rm .rm-net-trunk { stroke: rgba(255,255,255,.13); }
.hx-route.hx-dark .rm .rm-net-motorway { stroke: rgba(255,255,255,.18); }
.hx-route.hx-dark .rm .rm-net-routes { stroke: rgba(157,184,255,.16); }
.hx-route.hx-dark .rm .rm-ring { stroke: rgba(157,184,255,.45); }
.hx-route.hx-dark .rm .rm-motorway { stroke: rgba(157,184,255,.4); }
.hx-route.hx-dark .rm .rm-river { stroke: rgba(58,114,255,.4); }
.hx-route.hx-dark .rm .rm-road-lbl { stroke: #0A1733; }
.hx-route.hx-dark .rm .rm-lbl-ring, .hx-route.hx-dark .rm .rm-lbl-motorway { fill: #9DB8FF; }
.hx-route.hx-dark .rm .rm-lbl { fill: #fff; stroke: #0A1733; }
.hx-route.hx-dark .rm .rm-sub { fill: rgba(255,255,255,.62); stroke: #0A1733; }
.hx-route.hx-dark .rm-all .rm-spokes { stroke: rgba(232,163,23,.18); }
.hx-route.hx-dark .rm-all .rm-dots circle { fill: var(--gold); stroke: #0A1733; }
.hx-route.hx-dark .rm .rm-pin .rm-dot { fill: #fff; }
.hx-route.hx-dark .rm .rm-pin .rm-core { fill: var(--cobalt); }
.hx-route.hx-dark .rm .rm-scale path { stroke: rgba(255,255,255,.6); }
.hx-route.hx-dark .rm .rm-scale .rm-north, .hx-route.hx-dark .rm .rm-scale text { fill: rgba(255,255,255,.7); }
.hx-route.hx-dark .route-credit { color: rgba(255,255,255,.5); }
.hx-route.hx-dark .route-bar { background: rgba(10,23,51,.9); border: 1px solid rgba(255,255,255,.14); }
.hx-route.hx-dark .route-trip--hub b { color: var(--gold); }
.hx-route.hx-dark .route-trip--hub span { color: rgba(255,255,255,.78); }
.hx-route.hx-dark .route-facts { border-top-color: rgba(255,255,255,.18); }
.rm path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.rm .rm-ring { stroke: rgba(30,86,224,.28); stroke-width: 9; }
.rm .rm-motorway { stroke: rgba(30,86,224,.34); stroke-width: 6; }
.rm .rm-trunk { stroke: rgba(20,22,26,.16); stroke-width: 3; }
.rm .rm-river { stroke: rgba(58,114,255,.22); stroke-width: 7; }
.rm .rm-road-lbl { font-family: var(--font-sans); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; paint-order: stroke; stroke: var(--bg2); stroke-linejoin: round; }
.rm .rm-lbl-ring, .rm .rm-lbl-motorway { fill: rgba(30,86,224,.8); }
.rm .rm-lbl-river { fill: rgba(58,114,255,.75); font-style: italic; letter-spacing: .04em; text-transform: none; }
/* The road ground under each route: A roads as hairlines, trunk roads a
   little firmer, motorways firmer again, all in ink so the route and the
   landmark roads above them carry the colour. */
.rm .rm-net { stroke: rgba(20,22,26,.13); stroke-width: 1.2; }
.rm .rm-net-trunk { stroke: rgba(20,22,26,.2); stroke-width: 2; }
.rm .rm-net-routes { stroke: rgba(20,22,26,.16); stroke-width: 1.6; }
.rm .rm-net-motorway { stroke: rgba(20,22,26,.26); stroke-width: 2.6; }
.rm .rm-near circle { fill: var(--ink3); }
.rm .rm-near text { font-family: var(--font-sans); font-weight: 700; fill: var(--ink3); paint-order: stroke; stroke: var(--bg2); stroke-linejoin: round; }
.rm .rm-trip-case { stroke: #fff; stroke-width: 9; }
.rm .rm-trip { stroke: var(--cobalt); stroke-width: 5; stroke-dasharray: 1; }
.rm .rm-trip-dash { stroke: rgba(255,255,255,.55); stroke-width: 1.2; stroke-dasharray: 4 10; }
.rm .rm-from circle { fill: #fff; stroke: var(--cobalt); stroke-width: 4; vector-effect: non-scaling-stroke; }
.rm .rm-pin .rm-dot { fill: var(--cobalt); }
.rm .rm-pin .rm-core { fill: #fff; }
.rm .rm-pin .rm-ring { fill: none; stroke: var(--cobalt); stroke-width: 2; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; opacity: 0; }
/* Label halos are sized in map units by route_map.py (stroke-width on each
   text): in a viewBox measured in miles a CSS pixel stroke is miles wide. */
.rm .rm-lbl { font-family: var(--font-sans); font-weight: 800; fill: var(--ink); paint-order: stroke; stroke: var(--bg2); stroke-linejoin: round; }
.rm .rm-sub { font-family: var(--font-sans); font-weight: 800; letter-spacing: .14em; fill: var(--ink3); paint-order: stroke; stroke: var(--bg2); stroke-linejoin: round; }
.rm .rm-scale path { stroke: var(--ink2); stroke-width: 1.5; }
.rm .rm-scale .rm-north { fill: var(--ink2); stroke: none; }
.rm .rm-scale text { font-family: var(--font-sans); font-weight: 800; fill: var(--ink2); letter-spacing: .06em; }
.rm-all .rm-spokes { stroke: rgba(30,86,224,.14); stroke-width: 1; }
.rm-all .rm-dots circle { fill: var(--cobalt); stroke: #fff; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
@keyframes rm-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rm-march { to { stroke-dashoffset: -28; } }
@keyframes rm-ring { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.8); opacity: 0; } }
@keyframes rm-pop { from { opacity: 0; transform: scale(0); } }
@keyframes rm-ticket { from { opacity: 0; transform: translateY(40px) rotate(2.5deg); } }
@media (prefers-reduced-motion: no-preference) {
  html.anim .rm .rm-trip { animation: rm-draw 2.6s .4s cubic-bezier(.65,0,.35,1) both; }
  html.anim .rm .rm-trip-case { animation: hx-fade .6s .3s both; }
  html.anim .rm .rm-trip-dash { animation: hx-fade .5s 2.6s both, rm-march 1.4s 2.6s linear infinite; }
  html.anim .rm .rm-pin .rm-ring { animation: rm-ring 2.6s 2.2s ease-out infinite; }
  html.anim .rm .rm-pin .rm-ring-2 { animation-delay: 3.5s; }
  html.anim .rm-all .rm-dots circle { transform-box: fill-box; transform-origin: center; animation: rm-pop .5s calc(.4s + var(--i) * 6ms) var(--hx-ease) both; }
  html.anim .rm-all .rm-spokes { animation: hx-fade 1.6s .6s both; }
  html.anim .route-card { animation: rm-ticket 1s .2s var(--hx-ease) both; }
}

/* ---------- year: About -------------------------------------------------
   The founding year at the full width of the screen, filled with the
   workshop, and the three addresses on a ruled line beneath. */
.hx-year { background: var(--bg); }
.year-in { display: grid; align-content: center; gap: clamp(14px, 2.2vh, 26px); }
.year-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.year-top .hx-eye { color: var(--ink3); }
.year-num {
  margin: 0 0 0 -.05em; font-weight: 800; font-size: clamp(7rem, min(40vw, 46vh), 36rem); line-height: .76; letter-spacing: -.075em;
  background: linear-gradient(180deg, rgba(11,29,62,.1), rgba(11,29,62,.55)), var(--fill) 50% 40% / cover;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.year-row { display: grid; grid-template-columns: minmax(0, .46fr) minmax(0, .54fr); gap: clamp(20px, 4vw, 64px); align-items: end; }
.hx-year .hx-h1 { font-size: clamp(2rem, 1.2rem + 2.2vw, 3.4rem); max-width: 14ch; }
.hx-year .hx-copy { gap: 18px; }
.year-line { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); margin: 6px 0 0; padding: 22px 0 0; list-style: none; }
.year-line::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--ink) 0 66%, var(--cobalt) 66%); transform-origin: 0 0; }
.year-line li { position: relative; display: grid; grid-template-columns: clamp(64px, 7vw, 96px) 1fr; gap: 12px; align-items: center; min-width: 0; }
.year-line li::before { content: ""; position: absolute; top: -28px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--ink); }
.year-line li:last-child::before { background: var(--cobalt); border-color: var(--cobalt); box-shadow: 0 0 0 6px rgba(30,86,224,.16); }
.year-line img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); }
.year-line b { display: block; font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: #9a6a00; font-weight: 800; }
.year-line li:last-child b { color: var(--cobalt); }
.year-line span { display: block; font-weight: 700; font-size: var(--t-fine); line-height: 1.3; }
@keyframes year-in { from { opacity: 0; letter-spacing: .04em; transform: translateY(8%); } }
@keyframes year-pan { to { background-position: 0 0, 50% 80%; } }
@keyframes year-line { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: no-preference) {
  html.anim .year-num { animation: year-in 1.8s var(--hx-ease) both, year-pan 18s 1.8s ease-in-out infinite alternate; }
  html.anim .year-line::before { animation: year-line 1.6s .6s var(--hx-ease) both; }
  html.anim .year-line li { animation: hx-rise .9s .9s var(--hx-ease) both; }
  html.anim .year-line li:nth-child(2) { animation-delay: 1.1s; }
  html.anim .year-line li:nth-child(3) { animation-delay: 1.3s; }
  html.anim .hx-year .hx-h1 { animation: hx-rise .9s .3s var(--hx-ease) both; }
}

/* ---------- open: Contact -------------------------------------------------
   The first thing on the contact page is whether you can reach us now, set
   as display type and filled from the published hours by site.js. The front
   desk is photographed beside it. */
.hx-open { background: var(--bg); }
.hx-open::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 80% at 85% 20%, rgba(14,159,110,.10), transparent 60%); }
.open-in { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, .5fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.hx-open .hx-h1 { font-size: clamp(2.3rem, 1.1rem + 3.6vw, 4.8rem); max-width: 13ch; }
.open-side { display: grid; gap: 18px; min-width: 0; }
.open-live { display: grid; gap: 6px; padding: 0 0 18px; border-bottom: 1px solid var(--line2); }
.open-state { margin: 0; display: flex; align-items: center; gap: 16px; font-weight: 800; letter-spacing: -.05em; line-height: .95;
  font-size: clamp(2.6rem, 1.4rem + 4vw, 5.6rem); color: var(--ink); }
.open-dot { flex: 0 0 auto; width: .32em; height: .32em; border-radius: 50%; background: var(--ink3); }
.open-live.is-open .open-dot { background: var(--green); box-shadow: 0 0 0 .12em rgba(14,159,110,.2); }
.open-live.is-open .open-state { color: var(--green); }
.open-live.is-closed .open-dot { background: var(--closed-fg); }
.open-next { margin: 0; color: var(--ink2); font-size: var(--t-lead); font-weight: 700; }
.open-fig { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--soft); }
.open-fig img { width: 100%; height: 100%; object-fit: cover; }
.open-fig figcaption { position: absolute; left: 14px; bottom: 14px; display: flex; color: #fff; font-size: .8rem; font-weight: 700; }
.open-fig figcaption span { padding: 6px 11px; border-radius: var(--r-pill); background: rgba(11,18,32,.66); }
@keyframes open-pulse { 0% { box-shadow: 0 0 0 0 rgba(14,159,110,.45); } 100% { box-shadow: 0 0 0 .28em rgba(14,159,110,0); } }
@media (prefers-reduced-motion: no-preference) {
  html.anim .open-live { animation: hx-rise .9s .2s var(--hx-ease) both; }
  html.anim .open-live.is-open .open-dot { animation: open-pulse 2.2s 1s ease-out infinite; }
  html.anim .open-fig { animation: hx-rise 1s .35s var(--hx-ease) both; }
}

/* ---------- chevron: Fleet -------------------------------------------------
   A light ground with the workshop framed on the right, a fleet van's rear
   chevron stripe in gold and navy along the frame's foot, and what one site
   covers on a navy plate overlapping the frame. */
.hx-chevron { background: var(--bg); }
.hx-chevron::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--dot-field);
  background-size: var(--dot-pitch) var(--dot-pitch); -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
.chev-in { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, .5fr); gap: clamp(28px, 4vw, 72px); align-items: center; position: relative; z-index: 1; }
.hx-chevron .hx-h1 { font-size: clamp(2.3rem, 1.1rem + 3.4vw, 4.6rem); max-width: 13ch; }
.chev-fig { position: relative; margin: 0; min-width: 0; display: grid; }
.chev-photo { aspect-ratio: 4 / 3.2; border-radius: var(--r-xl) var(--r-xl) 0 0; overflow: hidden; }
.chev-photo img { width: 100%; height: 100%; object-fit: cover; }
.chev-stripe { display: block; height: clamp(22px, 2.4vw, 30px); border-radius: 0 0 6px 6px;
  background: repeating-linear-gradient(135deg, var(--gold) 0 22px, var(--panel-b) 22px 44px); }
.chev-covers { position: absolute; left: clamp(-36px, -2.5vw, -16px); bottom: clamp(44px, 5vw, 64px); width: min(300px, 70%);
  padding: 16px 18px; border-radius: var(--r-lg); background: var(--feature-grad); color: #fff; box-shadow: var(--soft); }
.chev-covers::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--feature-accent); }
.chev-covers b { display: block; font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: #9DB8FF; font-weight: 800; margin-bottom: 8px; }
.chev-covers ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.chev-covers li { position: relative; padding-left: 22px; font-size: var(--t-fine); font-weight: 700; line-height: 1.35; }
.chev-covers li::before { content: ""; position: absolute; left: 2px; top: .35em; width: 9px; height: 5px; border: solid #3BD38A; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
@keyframes chev-run { from { background-position: -88px 0; } }
@media (prefers-reduced-motion: no-preference) {
  html.anim .chev-photo { animation: hx-rise 1s .1s var(--hx-ease) both; }
  html.anim .chev-stripe { animation: hx-fade .6s .5s both, chev-run 1.4s .5s var(--hx-ease) both; }
  html.anim .chev-covers { animation: hx-rise .9s .7s var(--hx-ease) both; }
}

/* ---------- menu: the Services hub ---------------------------------------------
   A light ground with the workshop framed on the right and the three prices
   people come for pinned over it as cards, each a link to its page. */
.hx-menu { background: var(--bg2); }
.hx-menu::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--dot-field); background-size: var(--dot-pitch) var(--dot-pitch);
  -webkit-mask-image: radial-gradient(90% 80% at 80% 40%, #000, transparent 75%); mask-image: radial-gradient(90% 80% at 80% 40%, #000, transparent 75%); }
.menu-in { display: grid; grid-template-columns: minmax(0, .46fr) minmax(0, .54fr); gap: clamp(28px, 4vw, 72px); align-items: center; position: relative; z-index: 1; }
.hx-menu .hx-h1 { font-size: clamp(2.3rem, 1.1rem + 3.4vw, 4.6rem); max-width: 13ch; }
.menu-fig { position: relative; margin: 0; padding: 0 0 clamp(40px, 6vh, 70px); min-width: 0; }
.menu-photo { aspect-ratio: 16 / 11; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--soft); }
.menu-photo img { width: 100%; height: 100%; object-fit: cover; }
.menu-cards { list-style: none; margin: 0; padding: 0; position: absolute; left: clamp(-30px, -2.4vw, -14px); right: clamp(16px, 2vw, 28px); bottom: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.menu-card { position: relative; display: grid; gap: 4px; padding: 16px 16px 14px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--soft); color: var(--ink); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.menu-card:hover { transform: translateY(-4px); }
.menu-card:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.menu-cards li:nth-child(2) .menu-card { background: var(--feature-grad); color: #fff; border-color: transparent; }
.menu-cards li:nth-child(2) .menu-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--feature-accent); }
.menu-name { font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--ink3); }
.menu-cards li:nth-child(2) .menu-name { color: #9DB8FF; }
.menu-card b { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.menu-qual { font-size: .78rem; color: var(--ink2); line-height: 1.35; }
.menu-cards li:nth-child(2) .menu-qual { color: rgba(255,255,255,.8); }
.menu-card .ic { position: absolute; right: 12px; top: 12px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--cobalt-soft); color: var(--cobalt); }
.menu-cards li:nth-child(2) .menu-card .ic { background: rgba(255,255,255,.16); color: #fff; }
.menu-card .ic svg { width: 13px; height: 13px; }
@keyframes menu-in { from { opacity: 0; transform: translateY(24px); } }
@media (prefers-reduced-motion: no-preference) {
  html.anim .menu-photo { animation: hx-rise 1s .1s var(--hx-ease) both; }
  html.anim .menu-cards li { animation: menu-in .8s calc(.5s + var(--i, 0) * 90ms) var(--hx-ease) both; }
}

/* ---------- desk: Bodywork ---------------------------------------------------
   The estimate desk on a light ground: the job in the booth, a close-up of
   the prep pinned to its corner, and the walk-in window as a ruler of the
   working day with today's time marked on it. */
.hx-desk { background: var(--bg2); }
.hx-desk::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--dot-field); background-size: var(--dot-pitch) var(--dot-pitch);
  -webkit-mask-image: radial-gradient(90% 80% at 80% 40%, #000, transparent 75%); mask-image: radial-gradient(90% 80% at 80% 40%, #000, transparent 75%); }
.desk-in { display: grid; grid-template-columns: minmax(0, .46fr) minmax(0, .54fr); gap: clamp(28px, 4vw, 72px); align-items: center; position: relative; z-index: 1; }
.hx-desk .hx-h1 { font-size: clamp(2.3rem, 1.1rem + 3.4vw, 4.6rem); max-width: 13ch; }
.desk-fig { position: relative; margin: 0; padding: 0 0 clamp(70px, 9vh, 110px) clamp(40px, 5vw, 80px); min-width: 0; }
.desk-main { aspect-ratio: 16 / 10.5; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--soft); }
.desk-main img { width: 100%; height: 100%; object-fit: cover; }
.desk-inset { position: absolute; left: 0; bottom: clamp(30px, 4vh, 54px); width: 34%; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden;
  border: 6px solid var(--surface); box-shadow: var(--soft); transform: rotate(-3deg); }
.desk-inset img { width: 100%; height: 100%; object-fit: cover; }
.desk-ruler { position: absolute; right: clamp(-12px, -1vw, 0px); bottom: 0; width: min(66%, 380px); padding: 16px 18px 12px; border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--soft); }
.desk-ruler-state { margin: 0 0 12px; display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: var(--t-fine); color: var(--ink); }
.desk-ruler .coat-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.desk-ruler.is-open .coat-dot { background: var(--green); box-shadow: 0 0 0 4px rgba(14,159,110,.18); }
.desk-track { position: relative; height: 12px; border-radius: 8px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.desk-window { position: absolute; top: 0; bottom: 0; border-radius: 8px; background: linear-gradient(90deg, var(--gold), #F6CE17); }
.desk-now { position: absolute; top: -6px; bottom: -6px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--cobalt); box-shadow: 0 0 0 3px rgba(30,86,224,.18); }
.desk-ticks { position: relative; height: 1.4em; margin: 6px 0 0; font: 700 .68rem/1.4 var(--font-sans); letter-spacing: .06em; color: var(--ink3); }
.desk-ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.desk-ticks span:nth-child(1) { left: 0; transform: none; }
.desk-ticks span:nth-child(2) { left: 21.7%; }
.desk-ticks span:nth-child(3) { left: 65.2%; }
.desk-ticks span:nth-child(4) { left: auto; right: 0; transform: none; }
@keyframes desk-in { from { opacity: 0; transform: translateY(24px) rotate(-8deg); } }
@keyframes desk-window { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: no-preference) {
  html.anim .desk-main { animation: hx-rise 1s .1s var(--hx-ease) both; }
  html.anim .desk-inset { animation: desk-in 1s .45s var(--hx-ease) both; }
  html.anim .desk-ruler { animation: hx-rise .9s .6s var(--hx-ease) both; }
  html.anim .desk-window { transform-origin: 0 50%; animation: desk-window 1.1s 1s var(--hx-ease) both; }
}

/* ---------- wall: the Car makes hub ------------------------------------------
   The marques we service as a wall of badges on a light ground, every second
   column set lower so the wall reads as stacked plates rather than a table.
   Each badge links to its make's page. */
.hx-wall { background: var(--bg); }
.wall-in { display: grid; grid-template-columns: minmax(0, .44fr) minmax(0, .56fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.hx-wall .hx-h1 { font-size: clamp(2.3rem, 1.1rem + 3.4vw, 4.6rem); max-width: 12ch; }
.wall-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); }
.wall-grid li:nth-child(4n+2), .wall-grid li:nth-child(4n+4) { transform: translateY(clamp(18px, 2.4vw, 34px)); }
.wall-badge { display: grid; justify-items: center; align-content: center; gap: 10px; aspect-ratio: 1; padding: 12px; border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--soft-sm); color: var(--ink2); font-size: .78rem; font-weight: 800; text-align: center;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), color .25s; }
.wall-badge img { width: 46%; height: auto; aspect-ratio: 1; object-fit: contain; }
.wall-badge:hover { transform: translateY(-4px); box-shadow: var(--soft); color: var(--cobalt); }
.wall-badge:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
@keyframes wall-in { from { opacity: 0; transform: translateY(26px) scale(.94); } }
@media (prefers-reduced-motion: no-preference) {
  html.anim .wall-badge { animation: wall-in .7s calc(.15s + var(--i, 0) * 45ms) var(--hx-ease) both; }
}

/* ---------- print: the technical services -------------------------------
   Navy drawing paper with a two-scale grid, the job inside crop marks, a scan
   line passing over it and the page's own points pinned on as callouts. */
.hx-print {
  background-color: var(--panel-b);
  background-image:
    linear-gradient(rgba(58,114,255,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(58,114,255,.22) 1px, transparent 1px),
    linear-gradient(rgba(58,114,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(58,114,255,.09) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; background-position: -1px -1px;
}
.hx-print::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(80% 70% at 70% 50%, transparent 30%, rgba(5,12,28,.7)); }
.print-in { display: grid; grid-template-columns: minmax(0, .46fr) minmax(0, .54fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.hx-print .hx-h1 { font-size: clamp(2.3rem, 1.1rem + 3.8vw, 5rem); max-width: 12ch; }
.print-read { grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid rgba(157,184,255,.3); border-radius: var(--r-md); }
.print-read > div, .print-read > div:first-child { padding: 12px 14px; border-left: 0; }
.print-read > div + div { border-left: 1px solid rgba(157,184,255,.3); }
.print-read dd { color: #9DB8FF; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.print-fig { position: relative; margin: 0; padding: clamp(18px, 2.4vw, 30px); }
.print-frame { position: relative; aspect-ratio: 5 / 4; overflow: hidden; border-radius: 4px; }
.print-frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25) contrast(1.06); }
.print-frame::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(11,29,62,.5), transparent 50%); }
.print-scan { position: absolute; left: 0; right: 0; top: 0; height: 22%; z-index: 2; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(180deg, rgba(58,114,255,0), rgba(58,114,255,.28) 80%, rgba(157,184,255,.95)); }
.print-fig .c { position: absolute; width: 26px; height: 26px; border: 0 solid #9DB8FF; }
.print-fig .c1 { left: 0; top: 0; border-width: 2px 0 0 2px; }
.print-fig .c2 { right: 0; top: 0; border-width: 2px 2px 0 0; }
.print-fig .c3 { left: 0; bottom: 0; border-width: 0 0 2px 2px; }
.print-fig .c4 { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.print-tag { position: absolute; z-index: 3; display: flex; align-items: center; margin: 0; color: #fff; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.print-tag i { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; background: var(--cobalt); box-shadow: 0 0 0 4px rgba(58,114,255,.35); }
.print-tag s { display: block; height: 1.5px; width: var(--lead, 40px); background: #fff; text-decoration: none; transform-origin: 0 50%; }
.print-tag span { padding: 7px 12px; border-radius: var(--r-pill); background: rgba(11,29,62,.88); border: 1px solid rgba(157,184,255,.5); }
.print-tag--r { flex-direction: row-reverse; }
.print-tag--r s { transform-origin: 100% 50%; }
.print-dim { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: #9DB8FF; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; }
.print-dim::before, .print-dim::after { content: ""; flex: 1; height: 1px; background: rgba(157,184,255,.6); }
@keyframes print-scan { from { transform: translateY(-100%); opacity: 1; } to { transform: translateY(460%); opacity: 1; } }
@keyframes print-develop { from { filter: grayscale(1) brightness(.3) contrast(1.4); } }
@keyframes print-corner { from { transform: scale(2.2); opacity: 0; } }
@keyframes print-pop { from { transform: scale(0); } }
@keyframes print-lead { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: no-preference) {
  html.anim .print-scan { animation: print-scan 3.4s .6s cubic-bezier(.45,0,.55,1) 2; }
  html.anim .print-frame img { animation: print-develop 1.4s var(--hx-ease) both; }
  html.anim .print-fig .c { animation: print-corner .8s var(--hx-ease) both; }
  html.anim .print-tag i { animation: print-pop .5s 1.3s var(--hx-ease) both; }
  html.anim .print-tag s { animation: print-lead .6s 1.45s var(--hx-ease) both; }
  html.anim .print-tag span { animation: hx-fade .5s 1.8s both; }
  html.anim .print-tag:nth-of-type(2) i { animation-delay: 2s; }
  html.anim .print-tag:nth-of-type(2) s { animation-delay: 2.15s; }
  html.anim .print-tag:nth-of-type(2) span { animation-delay: 2.5s; }
  html.anim .print-tag:nth-of-type(3) i { animation-delay: 2.7s; }
  html.anim .print-tag:nth-of-type(3) s { animation-delay: 2.85s; }
  html.anim .print-tag:nth-of-type(3) span { animation-delay: 3.2s; }
}

/* ---------- clearcoat: alloy wheels ----------------------------------------
   The job framed beside the copy on a graphite ground, one band of light
   crossing it the way a lamp crosses fresh clearcoat, and over the frame's
   corner a glass panel: a fanned deck of finish chips and what the workshop
   repairs. On a phone the frame follows the copy. */
.hx-clearcoat { background: var(--bg); }
.coat-in { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, .5fr); gap: clamp(28px, 5vw, 88px); align-items: center; position: relative; z-index: 3; }
.coat-fig { position: relative; margin: 0 0 clamp(20px, 4vh, 44px); min-width: 0; }
.coat-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3.2; max-height: 60vh; border-radius: var(--r-xl);
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 40px 80px -40px rgba(0,0,0,.8); }
.coat-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.06) contrast(1.05); }
.coat-sweep { position: absolute; inset: -30% -40%; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  transform: translateX(-60%) rotate(16deg);
  background: linear-gradient(90deg, transparent 42%, rgba(255,255,255,.22) 48%, rgba(255,255,255,.5) 50%, rgba(255,255,255,.22) 52%, transparent 58%); }
.hx-clearcoat .hx-h1 { font-size: clamp(2.3rem, 1.1rem + 3.6vw, 4.8rem); max-width: 13ch; }
.coat-status { margin: 0; display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 9px 14px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); font-weight: 700; font-size: var(--t-fine);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.coat-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #E3BE5C; }
.coat-status.is-open .coat-dot { background: #3BD38A; box-shadow: 0 0 0 4px rgba(59,211,138,.2); }
.coat-panel { position: absolute; z-index: 2; left: clamp(-44px, -3vw, -16px); bottom: clamp(-44px, -4vh, -16px); width: min(62%, 320px);
  padding: 20px 20px 10px 22px; border-radius: var(--r-xl); background: rgba(14,16,21,.72); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.coat-panel > b { display: block; font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.62); font-weight: 800; margin-bottom: 8px; }
.coat-panel ul { list-style: none; margin: 0; padding: 0; }
.coat-panel li { position: relative; padding: 9px 0 9px 22px; border-top: 1px solid rgba(255,255,255,.1); font-size: var(--t-fine); font-weight: 700; color: rgba(255,255,255,.9); line-height: 1.3; }
.coat-panel li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 9px; height: 5px; border: solid #E3BE5C; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.coat-fan { position: absolute; left: -44px; top: -54px; width: 120px; height: 104px; pointer-events: none; }
.coat-fan i { position: absolute; left: 0; bottom: 0; width: 40px; height: 98px; border-radius: 7px; background: var(--c);
  transform-origin: 20px 88px; transform: rotate(calc(var(--n) * 11deg - 28deg));
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.2); }
.coat-fan i::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 8px; height: 3px; border-radius: 2px; background: rgba(0,0,0,.18); }
@keyframes coat-sweep { 0% { opacity: 0; transform: translateX(-60%) rotate(16deg); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(60%) rotate(16deg); } }
@keyframes coat-fan { from { transform: rotate(-28deg); opacity: 0; } }
@keyframes coat-push { from { transform: scale(1.08); } }
@media (prefers-reduced-motion: no-preference) {
  html.anim .coat-media img { animation: coat-push 2.4s var(--hx-ease) both; }
  html.anim .coat-sweep { animation: coat-sweep 2.6s .8s cubic-bezier(.45,0,.2,1) both; }
  html.anim .coat-panel { animation: hx-rise .9s .4s var(--hx-ease) both; }
  html.anim .coat-fan i { animation: coat-fan .9s calc(.9s + var(--n) * 70ms) var(--hx-ease) both; }
}

/* ---------- ticket: Full service and Oil service ------------------------
   The service menu runs behind in outlined type, and the offer is a tear-off
   ticket: the price on the body, the offer on the stub, the code on a button
   that copies it. */
.hx-ticket { background: radial-gradient(90% 90% at 80% 50%, #183560 0%, var(--panel-b) 55%, #071330 100%); }
.run { position: absolute; inset: -10% -20%; z-index: 0; display: grid; align-content: center; gap: 1vw; transform: rotate(-7deg); pointer-events: none; user-select: none; }
.run div { display: flex; width: max-content; font-weight: 800; font-size: clamp(4rem, 9vw, 9.5rem); line-height: 1; letter-spacing: -.05em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.2px rgba(255,255,255,.11); }
.run div:nth-child(2) { -webkit-text-stroke-color: rgba(232,163,23,.22); }
.run span { padding-right: .5em; }
.ticket-in { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, .5fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.hx-ticket .hx-eye { color: var(--gold); }
.hx-ticket .hx-h1 { font-size: clamp(2.4rem, 1.1rem + 4.2vw, 5.4rem); max-width: 12ch; }
.tk-wrap { justify-self: center; width: min(100%, 520px); }
.tk { display: grid; grid-template-columns: minmax(0, 1fr) 28%; transform: rotate(-5deg); transition: transform .5s var(--hx-ease); filter: drop-shadow(0 34px 40px rgba(0,0,0,.45)); }
@media (hover: hover) { .tk:hover { transform: rotate(-2deg) translateY(-6px); } }
.tk-body, .tk-stub { position: relative; min-width: 0; }
.tk-body { background: #fff; color: var(--ink); padding: clamp(20px, 2.6vw, 32px); border-radius: 20px 0 0 20px;
  -webkit-mask: radial-gradient(circle 14px at 100% 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 14px at 100% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle 14px at 100% 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 14px at 100% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; }
.tk-stub { background: linear-gradient(160deg, #F6CE17, var(--gold)); color: #2e2100; border-radius: 0 20px 20px 0; display: grid; place-items: center; border-left: 2px dashed rgba(46,33,0,.35);
  -webkit-mask: radial-gradient(circle 14px at 0 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 14px at 0 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle 14px at 0 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 14px at 0 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; }
.tk-stub b { writing-mode: vertical-rl; transform: rotate(180deg); font-size: clamp(1.4rem, .9rem + 1.8vw, 2.4rem); font-weight: 800; letter-spacing: .04em; line-height: 1; white-space: nowrap; }
.tk-kind { margin: 0; font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--ink3); }
.tk-price { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 4px; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.tk-price b { font-size: clamp(2.8rem, 2rem + 2.8vw, 4.4rem); }
.tk-price small { font-size: 1rem; letter-spacing: 0; color: var(--ink3); font-weight: 700; }
.tk-note { margin: 0; color: var(--ink2); font-size: var(--t-fine); max-width: 32ch; }
.tk-code { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.tk-code button { font: inherit; font-weight: 800; font-size: .95rem; cursor: pointer; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill);
  border: 1.5px dashed var(--ink); background: var(--bg2); color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.tk-code button:hover { border-color: var(--cobalt); color: var(--cobalt); }
.tk-code svg { width: 16px; height: 16px; }
.tk-code output { font-size: .82rem; font-weight: 700; color: var(--green); }
.tk-body .mag { display: inline-block; margin-top: 16px; }
@keyframes tk-run-l { to { transform: translateX(-50%); } }
@keyframes tk-run-r { from { transform: translateX(-50%); } }
@keyframes tk-in { from { opacity: 0; transform: translateY(80px) rotate(-22deg) scale(.9); } }
@media (prefers-reduced-motion: no-preference) {
  html.anim .run div { animation: tk-run-l 60s linear infinite; }
  html.anim .run div:nth-child(2) { animation: tk-run-r 48s linear infinite; }
  html.anim .run div:nth-child(3) { animation-duration: 72s; }
  html.anim .tk { animation: tk-in 1.3s .3s cubic-bezier(.3,1.35,.5,1) both; }
}

/* ---------- the hero family on smaller screens -------------------------- */
/* Short desktop screens (laptops at 768-820px tall) keep the quote in the
   first screen: the display size steps down and the copy tightens. A height
   condition, not width alone, or a landscape phone would pick it up too. */
@media (min-width: 1001px) and (max-height: 820px) {
  .hx .hx-h1 { font-size: clamp(2.2rem, 1rem + 2.9vw, 4rem); }
  .hx .hx-lede { font-size: var(--t-body); }
  .hx-copy { gap: 12px; }
  .hx { --hx-clear: calc(var(--nav-bottom, 82px) - var(--hero-top, 0px) + 18px); --hx-foot: 36px; }
  .year-num { font-size: clamp(7rem, min(36vw, 40vh), 30rem); }
  .marque-car { aspect-ratio: 16 / 9; }
}
@media (max-width: 1000px) {
  .plate-in, .ramp-in, .marque-in, .route-in, .print-in, .ticket-in, .year-row { grid-template-columns: 1fr; }
  .route-card { aspect-ratio: 4 / 3.4; max-height: none; }
  .open-in, .chev-in, .desk-in, .wall-in, .menu-in { grid-template-columns: 1fr; }
  .chev-covers { left: 16px; }
}
@media (max-width: 1000px) and (min-width: 761px) {
  .ramp-photo { width: 46%; } .ramp-slab, .ramp-edge { width: 64%; }
  .ramp-seal { left: auto; right: 24px; top: auto; bottom: 22%; }
}
@media (max-width: 760px) {
  .hx { min-height: 0; --hx-clear: calc(var(--nav-bottom, 82px) - var(--hero-top, 0px) + 14px); }
  .hx .hx-h1 { font-size: clamp(2.45rem, 1.3rem + 6vw, 3.5rem); }
  .hx-in { padding-bottom: calc(clamp(32px, 6vh, 48px) + var(--callbar-h, 0px)); }
  .hx-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx-facts > div { padding: 0 10px; }
  /* plate */
  .plate-stage { padding-bottom: 76px; margin-top: 8px; }
  .plate-photo { width: 92%; aspect-ratio: 4 / 3.3; }
  .plate-tilt { width: 100%; }
  .plate-photo figcaption { font-size: .78rem; }
  /* ramp */
  .ramp-slab, .ramp-edge { display: none; }
  .ramp-in { grid-template-columns: minmax(0, 1fr); padding-bottom: calc(96px + var(--callbar-h, 0px)); }
  .ramp-frame { aspect-ratio: 16 / 11; max-height: none; }
  .ramp-seal { left: auto; right: 12px; top: auto; bottom: -36px; width: 104px; }
  .ramp-word { font-size: min(30vw, calc(150vw / var(--len, 6))); bottom: calc(var(--callbar-h, 0px) - .12em); }
  /* marque */
  .marque-in { gap: 10px; }
  .marque-floor { display: contents; }
  .marque-car, .marque-turntable { order: -3; margin-top: clamp(18px, 5vw, 36px); }
  /* The floor reflection costs a phone the room its quote button needs. */
  .marque-reflect { display: none; }
  .marque-turntable { padding: 12px 0 24px; }
  /* A shorter stage and a smaller identity disc keep the quote clear of the
     contact bar on a 390x844 phone, with the car still the first thing seen. */
  .marque-car { aspect-ratio: 16 / 8; }
  .marque-disc { width: 44px; height: 44px; }
  .marque-disc img { width: 28px; height: 28px; }
  .marque-spec { order: 1; margin-top: 16px; }
  .marque-word { font-size: min(34vw, calc(170vw / var(--len, 5))); top: calc(var(--hx-clear) - 4px); }
  .marque-cone { left: 15%; width: 80%; }
  .marque-plinth { width: 150px; }
  /* route: on a phone the map comes straight after the copy and the
     arrival details follow it, so the route is seen before the address. */
  .route-in { gap: 22px; }
  .route-in > .hx-copy { display: contents; }
  .route-in > .hx-copy > * { order: 0; }
  .route-in > .hx-copy > .route-rows, .route-in > .hx-copy > .route-facts { order: 3; }
  .route-card, .route-card--hub { order: 2; aspect-ratio: 1 / 1; }
  .route-rows { grid-template-columns: 1fr; gap: 10px; }
  /* open: a wider, shorter photograph under the live state */
  .open-fig { aspect-ratio: 16 / 9; }
  .route-bar { left: 8px; right: 8px; bottom: 8px; padding: 10px 10px 10px 14px; }
  .route-trip b { font-size: 1.15rem; }
  .route-trip small { flex-basis: 100%; font-size: .78rem; }
  .route-dir { padding: 0 12px; }
  /* year */
  .year-num { font-size: 41vw; }
  .year-line { grid-template-columns: 1fr; gap: 14px; padding: 0 0 0 26px; }
  .year-line::before { left: 5px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, var(--ink) 0 66%, var(--cobalt) 66%); }
  .year-line li::before { left: -26px; top: 50%; transform: translateY(-50%); }
  /* open */
  .open-state { font-size: clamp(2.4rem, 1.4rem + 7vw, 3.4rem); }
  .open-next { font-size: var(--t-body); }
  /* chevron */
  .chev-photo { aspect-ratio: 4 / 3; }
  .chev-covers { position: relative; left: auto; bottom: auto; width: auto; margin-top: 14px; }
  /* menu */
  .menu-in { grid-template-columns: 1fr; }
  .menu-fig { padding: 0; }
  .menu-cards { position: relative; left: auto; right: auto; margin-top: -40px; padding: 0 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .menu-card { padding: 12px 10px 10px; }
  .menu-card .ic { display: none; }
  .menu-qual { font-size: .7rem; }
  /* desk */
  .desk-fig { padding: 0 0 92px 0; margin-top: 8px; }
  .desk-inset { display: none; }
  .desk-ruler { right: 12px; left: 12px; width: auto; }
  /* wall */
  .wall-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .wall-grid li:nth-child(4n+2), .wall-grid li:nth-child(4n+4) { transform: translateY(14px); }
  .wall-badge { padding: 8px; gap: 4px; font-size: .62rem; border-radius: var(--r-lg); }
  /* clearcoat: the photograph is the top of the hero, the copy runs on below */
  .coat-in { grid-template-columns: minmax(0, 1fr); }
  .coat-media { aspect-ratio: 16 / 11; max-height: none; }
  .coat-panel { position: relative; left: auto; bottom: auto; width: auto; margin: 14px 0 0; padding: 16px 16px 6px 18px; }
  .coat-panel ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .coat-fan { left: auto; right: 10px; top: -48px; width: 96px; height: 84px; }
  .coat-fan i { width: 32px; height: 78px; transform-origin: 16px 70px; }
  /* print */
  .print-read > div, .print-read > div:first-child { padding: 10px; }
  .print-read dt { font-size: 1rem; }
  .print-tag { font-size: .74rem; }
  .print-tag span { padding: 5px 9px; }
  /* ticket */
  .run div { font-size: 20vw; }
  .tk { transform: rotate(-3deg); }
}
@media (max-width: 760px) and (max-height: 700px) {
  .ramp-photo { height: 36svh; }
  .ramp-seal { top: calc(36svh - 82px); }
}
@media (max-width: 420px) {
  /* Three figures share a row at normal text; enlarged text stacks them
     rather than clipping, because the track minimum is in rem. */
  .hx-facts:not(.hx-facts.t-facts) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.2rem), 1fr)); row-gap: 10px; }
  .coat-panel ul { grid-template-columns: minmax(0, 1fr); }
  .hx .hero-ask .btn-lg { font-size: 1rem; padding: .85em 1.2em; }
  .print-tag:nth-of-type(3) { display: none; }
  .hx-facts dt { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .plate-tilt, .tk { transition: none; }
}


/* ---------- company hero: the error page, light, 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:var(--t-body); max-width: var(--measure); }
.ph-band {
  margin-top: clamp(22px, 2.6vw, 38px); width: 100%;
  height: clamp(220px, 30vw, 420px); overflow: hidden;
  border-radius: 0;
}
/* The company band is the error page's: one photograph, centred. */
.ph-band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }

/* ---------- 5. legal masthead: typographic, no photograph ---------------
   A policy is a document, so it is set as one. The only decoration is the rule
   under it and the facts strip beneath that: what raises a legal page is
   navigation, not ornament, because nobody opens one to read it end to end. */
.ph-legal {
  padding: calc(82px + clamp(34px, 5vw, 66px)) 0 clamp(26px, 3vw, 40px);
  color: var(--ink);
}
.ph-legal .crumbs { color: var(--ink3); }
.ph-legal .crumbs a { color: var(--ink2); }
.ph-legal-kind {font-family:var(--font-sans);font-size:var(--t-micro);letter-spacing: .16em;text-transform: uppercase;color: var(--cobalt);font-weight:800;margin: 0 0 10px}
.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: var(--measure); font-size:var(--t-body); margin-bottom: 20px; }
.ph-updated {font-family:var(--font-sans);font-size:var(--t-micro);letter-spacing: .12em;text-transform: uppercase;color: var(--ink3);margin: 0;font-weight:700}
.ph-updated time { color: var(--ink2); }

/* The three questions each document is most often opened to answer, stated
   before any of its prose. Same (figure, label) shape as the heroes' .hx-facts, on
   its own class so neither inherits the other's spacing: the masthead has no
   photograph. */
.ph-legal-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0; padding: clamp(20px, 2.5vw, 28px) 0; text-align: center;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.ph-legal-stats > div { min-width: 0; padding: 0 clamp(8px, 1.6vw, 24px); }
.ph-legal-stats > div + div { border-left: 1px solid var(--line); }
.ph-legal-stats dt, .ph-legal-stats dd { overflow-wrap: anywhere; }
.ph-legal-stats dt {
  font-size: clamp(1.05rem, 1.6vw, 1.45rem); line-height: 1.2; font-weight: 800;
  letter-spacing: -.03em; color: var(--ink);
}
.ph-legal-stats dd { margin: 6px 0 0; font: 600 var(--t-fine)/1.4 var(--font-sans); color: var(--ink2); }

/* ---------- body: prose plus sticky aside ------------------------------- */
.pg-body { padding: clamp(40px, 5vw, 72px) 0 var(--sp); }
/* The prose fills its column. Capped at --measure inside a 756px track it left
   156px of dead space down the whole article, and the rail ran out after 750px
   against 3,800px of copy, so two thirds of the page was empty. 74 characters is
   still inside the readable band. */
.pg-cols { display: grid; grid-template-columns: minmax(0, 1fr) 348px; gap: clamp(40px, 4vw, 60px); align-items: start; }
.pg-cols > .prose { max-width: 74ch; }

.prose { max-width: var(--measure); color: var(--ink2); font-size:var(--t-body); line-height: 1.68; }
.prose > * + * { margin-top: 18px; }
.prose h2 {
  font-size: var(--h2-quiet); color: var(--ink);
  letter-spacing: -.02em; line-height: 1.25; margin-top: 48px;
}
.prose h3 { font-size: var(--h3); color: var(--ink); letter-spacing: -.01em; line-height: 1.3; margin-top: 34px; }
.prose h4 { font-size:var(--t-body); 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:var(--t-body); 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:var(--font-sans);font-size:var(--t-micro);letter-spacing: .06em;text-transform: uppercase;font-weight:700}
.prose ul.chips li::before { display: none; }

.pg-aside { position: sticky; top: 108px; display: grid; gap: 16px; align-content: start; }
.fact { padding: 26px; }
.fact h3 {font-family:var(--font-sans);font-size:var(--t-micro);letter-spacing: .14em;text-transform: uppercase;color: var(--ink3);font-weight:700;margin-bottom: 14px}
.fact-addr { font-size:var(--t-fine); 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:var(--t-fine); 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:var(--font-sans);font-size:var(--t-micro);color: var(--ink)}
.fact-note { margin-top: 16px; font-size:var(--t-fine); line-height: 1.55; color: var(--ink2); }
.fact-checks { margin-top: 4px; font-size:var(--t-fine); color: var(--ink2); }

/* ---------- legal body: the spine beside the document -------------------
   The composition is centred rather than pinned left. Pinned left, a 60ch
   measure beside a 240px rail left 286-356px of dead ground on the right at
   every desktop width, which reads as a layout that ran out rather than one
   that was placed. */
.pg-legal-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; }
/* Below the two-column breakpoint the document centres itself rather than
   hugging the left edge. On a 1024px tablet a 60ch measure pinned left left
   454px of empty ground beside it. The cap is above any measure the prose
   itself uses, so on a phone it does nothing. */
.legal-main { min-width: 0; display: grid; gap: clamp(26px, 3.2vw, 40px); max-width: 66ch; margin-inline: auto; }

/* The spine. One <details> serving two shapes: a closed disclosure on phones
   and tablets, an always-open rail from 1100px. Sixteen chips pushed the first
   section 1,627px down a 360px screen, which is two and a half viewports of
   navigation before a word of the policy. Native <details> means both shapes
   work with JavaScript off and the list is never rendered twice.

   Its label is not a heading. As an h2 it sat as a peer of every section
   heading and flattened the document outline into one flat list; the nav
   landmark is named instead. */
/* Below 1100px the spine sticks under the navigation, so on a nine-thousand
   pixel policy it is still there when you are two thirds of the way down. It
   sits under the nav's own layer and above the prose it scrolls over.
   The scroll line has to clear it too, or every anchored section lands behind
   the very control used to reach it. The spine's own scroll-spy reads this
   value, so both stay in step from one number. */
@media (max-width: 1099px) {
  html:has(.pg-legal) { scroll-padding-top: 172px; }
}
.legal-toc {
  margin: 0 0 clamp(26px, 3.2vw, 40px); position: sticky;
  top: calc(var(--nav-bottom, 92px) + 8px); z-index: 6;
}
.legal-toc-open {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 18px; border-radius: var(--r-pill); cursor: pointer;
  background: var(--surface); border: 1px solid var(--line2);
  list-style: none; min-height: 48px; box-shadow: var(--soft-sm);
}
.legal-toc-open::-webkit-details-marker { display: none; }
.legal-toc-open:hover { border-color: var(--cobalt); }
.legal-toc-open:focus-visible { outline: 2.5px solid var(--cobalt); outline-offset: 3px; }
.legal-toc-label {font-family:var(--font-sans);font-size:var(--t-micro);letter-spacing: .14em;text-transform: uppercase;color: var(--ink);font-weight:800;margin: 0;flex: none}
/* The section you are in, so the closed control still says where you are. */
.legal-toc-where {
  font-size:var(--t-fine); color: var(--ink2); margin-left: auto; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.legal-toc-open::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-left: 2px;
  border-right: 2px solid var(--ink3); border-bottom: 2px solid var(--ink3);
  transform: rotate(45deg) translateY(-3px); transition: transform .2s var(--ease-out);
}
.legal-toc[open] > .legal-toc-open::after { transform: rotate(-135deg) translateY(-3px); }
.legal-toc[open] > .legal-toc-open { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.legal-toc-body {
  padding: 6px 14px 14px; background: var(--surface);
  border: 1px solid var(--line2); border-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg);
  max-height: min(56vh, 420px); overflow-y: auto; overscroll-behavior: contain;
}
.legal-toc-label-wide, .legal-toc-count { display: none; }
.legal-toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; display: grid; gap: 1px; }
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); align-items: baseline;
  font-size:var(--t-fine); line-height: 1.4; color: var(--ink2);
  padding: 9px 6px; border-radius: var(--r-sm); min-height: 24px;
  transition: color .18s, background-color .18s;
}
.legal-toc a::before {content: counter(toc);font-family:var(--font-sans);font-size:var(--t-micro);color: var(--ink3);font-weight:700}
.legal-toc a:hover { color: var(--cobalt); background: var(--cobalt-soft); }
.legal-toc a:hover::before { color: var(--cobalt); }
/* Set by assets/site.js as you read. Without JavaScript the spine is a plain
   list of links, which is what it was before. */
.legal-toc a[aria-current="true"] { color: var(--cobalt); font-weight: 700; background: var(--cobalt-soft); }
.legal-toc a[aria-current="true"]::before { color: var(--cobalt); }

/* From 1100px the spine is simply there: no disclosure control, no box, and a
   rule down its edge that the section being read lights up. */
@media (min-width: 1100px) {
  .pg-legal-cols {
    grid-template-columns: 15rem minmax(0, 66ch);
    gap: clamp(44px, 4.6vw, 80px); justify-content: center;
  }
  .legal-main { max-width: none; margin-inline: 0; }
  .legal-prose { max-width: var(--measure); }
  .legal-toc { position: sticky; top: 104px; margin: 0; }
  .legal-toc > .legal-toc-open { display: none; }
  /* Two overrides, because browsers hide a closed details two different ways.
     Older engines use `display: none` on the non-summary children; current
     Chrome wraps them in ::details-content and hides that with
     content-visibility, which the display rule alone does not touch — the
     spine drew but its parent collapsed to zero height. assets/site.js also
     sets the open attribute outright, so this only has to carry the no-JS case. */
  .legal-toc::details-content { content-visibility: visible; block-size: auto; }
  .legal-toc > .legal-toc-body {
    display: block; padding: 0; background: none; border: 0; border-radius: 0;
    max-height: calc(100dvh - 150px); overflow-y: auto; scrollbar-width: thin;
  }
  .legal-toc-label-wide { display: block; margin: 0 0 4px; }
  .legal-toc-count {display: block;font-family:var(--font-sans);font-size:var(--t-micro);color: var(--ink3);margin: 0 0 14px;font-variant-numeric: tabular-nums}
  .legal-toc ol { gap: 0; border-left: 2px solid var(--line); }
  .legal-toc a {
    grid-template-columns: 1.6rem minmax(0, 1fr); border-radius: 0;
    padding: 7px 4px 7px 14px; margin-left: -2px; border-left: 2px solid transparent;
  }
  .legal-toc a:hover { background: none; border-left-color: var(--line2); }
  .legal-toc a[aria-current="true"] { background: none; border-left-color: var(--cobalt); }
}

/* The plain summary, and the one moment of weight on an otherwise white page.
   It takes the featured card's navy and gold edge, because the thing a reader
   actually came for should be the thing that carries weight. */
.legal-summary {
  position: relative; overflow: hidden; padding: clamp(26px, 3vw, 36px) clamp(22px, 3vw, 36px);
  border-radius: var(--r-xl); background: var(--feature-grad); color: var(--panel-fg);
  box-shadow: var(--soft-sm);
}
.legal-summary::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--feature-accent); }
.legal-summary h2 { font-size: 1.35rem; letter-spacing: -.025em; color: var(--panel-fg); margin: 0; }
.legal-summary-note { margin: 8px 0 0; font-size:var(--t-fine); color: var(--panel-sub); }
.legal-summary ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; }
.legal-summary li {
  position: relative; padding-left: 26px; font-size:var(--t-fine);
  line-height: 1.6; color: var(--panel-sub);
}
.legal-summary li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
}
.legal-summary a { color: var(--gold); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.legal-summary a:hover { color: #F6CE17; }
.legal-summary a:focus-visible { outline: 2.5px solid var(--gold); outline-offset: 4px; }

/* The cookie control, on the page the policy points at. PECR wants withdrawing
   consent to be as easy as giving it, so it sits with the summary rather than
   under nine hundred words of policy. */
.legal-consent {
  padding: clamp(22px, 2.6vw, 30px) clamp(20px, 2.6vw, 32px); border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--line2); box-shadow: var(--soft-sm);
}
.legal-consent h2 { font-size: 1.2rem; letter-spacing: -.02em; margin: 0; }
.legal-consent p { color: var(--ink2); margin: 10px 0 20px; font-size:var(--t-fine); }

/* ---------- the document itself ----------------------------------------- */
.legal-prose { max-width: none; font-size:var(--t-body); }
.legal-prose h2 {
  display: grid; grid-template-columns: 1.9rem minmax(0, 1fr) auto; align-items: baseline;
  font-size: 1.4rem; margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--line);
  column-gap: 4px;
}
/* No scroll-margin-top here. html already carries scroll-padding-top: 110px for
   the sticky navigation, and the two used to add up, landing every anchored
   section 220px down the viewport with a screen of dead space above it. */
.legal-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-prose h2:focus { outline: none; }
.legal-prose h2:focus-visible { outline: 2.5px solid var(--cobalt); outline-offset: 6px; }
/* Numbered so a clause can be named out loud and pointed at, which is most of
   what a customer or a member of staff needs from terms. */
.legal-n {font-family:var(--font-sans);font-size:var(--t-fine);font-weight:800;color: var(--ink3);letter-spacing: 0}
.legal-permalink {
  color: var(--ink3); font-weight: 700; text-decoration: none; padding: 0 6px;
  opacity: 0; transition: opacity .2s, color .2s;
}
.legal-prose h2:hover .legal-permalink, .legal-permalink:focus-visible { opacity: 1; color: var(--cobalt); }
.legal-legacy-anchor { display: block; height: 0; }
.legal-prose h3 { font-size:var(--t-body); margin-top: 26px; }
.legal-prose ul li::before { background: var(--ink3); }
.legal-top { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); }
.legal-top a {font-family:var(--font-sans);font-size:var(--t-micro);letter-spacing: .12em;text-transform: uppercase;color: var(--ink3);font-weight:700}
.legal-top a:hover { color: var(--cobalt); }

/* A clause the client has still to supply. It is marked as unfinished rather
   than set in bold body copy, so it can never be mistaken for policy. */
.legal-pending {
  margin-top: 22px; padding: 18px 20px; border-radius: var(--r-lg);
  background: rgba(232, 163, 23, .08); border: 1px dashed rgba(150, 100, 8, .45);
}
.legal-pending-label {font-family:var(--font-sans);font-size:var(--t-micro);letter-spacing: .12em;text-transform: uppercase;color: #7A5206;font-weight:800;margin: 0 0 6px}
.legal-pending p + p { margin-top: 0; }
.legal-pending p:last-child { margin: 0; color: var(--ink2); font-size:var(--t-fine); line-height: 1.6; }

/* Purpose and lawful basis, side by side. Run together in a sentence the basis
   disappeared into the middle of the line, which is the one thing a reader
   checking a privacy policy is actually looking for. */
.legal-basis { margin: 20px 0 0; display: grid; gap: 0; }
.legal-basis > div {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 8px 26px; padding: 16px 0; border-top: 1px solid var(--line);
}
.legal-basis > div:last-child { border-bottom: 1px solid var(--line); }
.legal-basis dt { color: var(--ink); font-weight: 700; line-height: 1.5; }
.legal-basis dd { margin: 0; color: var(--ink2); font-size:var(--t-fine); line-height: 1.5; }
.legal-basis-tag {display: block;font-family:var(--font-sans);font-size:var(--t-micro);letter-spacing: .1em;text-transform: uppercase;color: var(--ink3);font-weight:700;margin-bottom: 3px}
@media (max-width: 700px) {
  .legal-basis > div { grid-template-columns: 1fr; gap: 6px; }
}

/* The named-cookie disclosure. A table is the honest shape for it. */
.table-scroll { margin-top: 20px; overflow-x: auto; }
.legal-prose table { width: 100%; border-collapse: collapse; font-size:var(--t-fine); }
.legal-prose th, .legal-prose td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.legal-prose th {font-family:var(--font-sans);font-size:var(--t-micro);letter-spacing: .1em;text-transform: uppercase;color: var(--ink3);font-weight:700;border-bottom-color: var(--line2)}
.legal-prose td { color: var(--ink2); line-height: 1.55; }
.legal-prose tbody td:first-child { color: var(--ink); font-weight: 700; white-space: nowrap; }

/* ---------- the closing panel: the siblings and the ask, on one dark ground
   The page ends the way the six landing surfaces end, and because it is the
   last block in <main> the footer's flat #0E234D starts where it stops.

   Its top edge caves in rather than bulging out. The arc is the light ground
   above hanging DOWN into the panel on an ellipse, which is the inverse of the
   Bodywork panel's ::after, where the light ground rises up into it. A radius
   on the panel itself would have rounded its corners outward and read as a
   tab. ------------------------------------------------------------------- */
.legal-close {
  position: relative; isolation: isolate; overflow: hidden; color: var(--panel-fg);
  margin-top: clamp(56px, 7vw, 104px);
  padding: calc(var(--legal-arc) + clamp(30px, 4vw, 56px)) 0 clamp(48px, 6vw, 84px);
  --legal-arc: clamp(38px, 5.5vw, 84px);
  background:
    linear-gradient(180deg, rgba(14, 35, 77, 0) 62%, #0E234D 97%),
    linear-gradient(135deg, var(--panel-a), var(--panel-b));
}
.legal-close-arc {
  position: absolute; top: -1px; left: -2%; right: -2%; z-index: 1; pointer-events: none;
  height: var(--legal-arc); background: var(--bg);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.legal-close > .wrap { position: relative; z-index: 2; }
.legal-close .surface-mark { z-index: 1; }
.legal-close-h {
  font-size: var(--t-h3); letter-spacing: -.025em; color: var(--panel-fg);
  margin: 0 0 clamp(18px, 2.2vw, 26px);
}

/* ---------- the other two documents, on the dark ground ------------------ */
.legal-docs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.legal-doc-in {
  display: grid; gap: 8px; height: 100%; align-content: start;
  padding: 22px 20px; border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18);
  transition: background-color .2s, border-color .2s, transform .2s var(--ease);
}
a.legal-doc-in:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .42); transform: translateY(-2px); }
a.legal-doc-in:focus-visible { outline: 2.5px solid var(--gold); outline-offset: 3px; }
.legal-doc-ic { width: 24px; height: 24px; color: var(--gold); }
.legal-doc-name { font-weight: 800; letter-spacing: -.02em; color: var(--panel-fg); }
.legal-doc-blurb { font-size:var(--t-fine); line-height: 1.55; color: var(--panel-sub); }
/* The document you are on is stated, not offered: no lift, no border glow. */
.legal-doc.is-current .legal-doc-in { background: rgba(0, 0, 0, .22); border-style: dashed; border-color: rgba(255, 255, 255, .26); }
.legal-doc.is-current .legal-doc-ic { color: rgba(255, 255, 255, .6); }
.legal-doc-here {font-family:var(--font-sans);font-size:var(--t-micro);letter-spacing: .12em;text-transform: uppercase;color: #FFD466;font-weight:700}

/* ---------- the ask ------------------------------------------------------ */
.legal-close-ask { margin-top: clamp(34px, 4.4vw, 56px); }
.legal-ask {
  text-align: center; max-width: 640px; margin: 0 auto;
  padding: clamp(28px, 3.4vw, 40px) clamp(22px, 3vw, 34px); border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
}
.legal-ask h2 { font-size: 1.6rem; letter-spacing: -.025em; color: var(--panel-fg); margin: 0; }
.legal-ask p { color: var(--panel-sub); margin: 12px 0 24px; }
.legal-ask .hero-ask { justify-content: center; }

/* ---------- related, brands, areas, faq --------------------------------- */
.pg-h2 { font-size: var(--h2); line-height: 1.18; letter-spacing: -.024em; 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:var(--t-body); letter-spacing: -.02em; color: var(--ink); }
.rel-card span { font-size:var(--t-fine); 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); }
/* Kept explicit: "Al" for Alpina used to render as "A1" in the retired mono face. */
.brand-card .bl.txt {display: grid;place-items: center;border-radius: var(--r-md);background: var(--cobalt-soft);color: var(--cobalt);font-family:var(--font-sans);font-size:var(--t-fine);font-weight: 800;letter-spacing: -.02em}
.brand-card b { font-size:var(--t-body); letter-spacing: -.02em; color: var(--ink); }
.brand-card span {font-size:var(--t-micro);line-height: 1.5;color: var(--ink3);font-family:var(--font-sans);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:var(--t-fine); 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:var(--t-body); 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:var(--font-sans);font-size:var(--t-body);color: var(--cobalt);font-weight:700;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 {
  --faq-inset: 16px; --faq-mark: 32px;
  cursor: pointer; list-style: none; padding: 20px 60px 20px 24px; min-height: 44px;
  font-weight: 700; font-size:var(--t-body); color: var(--ink); position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: calc(var(--faq-inset) + var(--faq-mark) / 2); top: 50%;
  width: 16px; height: 16px; background: var(--cobalt);
  -webkit-mask: var(--band-arrow) center / contain no-repeat;
          mask: var(--band-arrow) center / contain no-repeat;
  transform: translate(50%, -50%); transition: transform .25s var(--ease-out);
}
.faq[open] summary::after { transform: translate(50%, -50%) rotate(180deg); }
.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:var(--t-body); color: var(--ink); margin-bottom: 4px; }
.ck-copy p { font-size:var(--t-fine); 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; }
  .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-company h1 { max-width: none; }
  .legal-docs { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .page-hero { margin-top: -74px; }

  .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:var(--t-body); }
  .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%; }
  .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:var(--t-fine); }
  .pg-legal .prose, .pg-legal .legal-prose { font-size:var(--t-body); line-height: 1.7; }
  .prose-lead { font-size:var(--t-body); 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%; }
  .ph-legal-stats { grid-template-columns: 1fr; text-align: left; padding: 4px 0; }
  .ph-legal-stats > div { padding: 16px 0; }
  .ph-legal-stats > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .legal-prose h2 { grid-template-columns: 1.5rem minmax(0, 1fr) auto; font-size: 1.3rem; }
  .legal-permalink { display: none; }
  .legal-consent .btn { width: 100%; }
  /* The cookie table restacks as labelled rows rather than scrolling sideways:
     four columns of prose in a 320px viewport is not a table any more. */
  .legal-prose thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .legal-prose tbody tr { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .legal-prose tbody td { display: grid; grid-template-columns: 1fr; padding: 4px 0; border: 0; }
  .legal-prose tbody td::before {
    content: attr(data-label); font-family:var(--font-sans); font-size:var(--t-micro);
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); font-weight: 700;
  }
  .legal-prose tbody td:first-child { white-space: normal; }
}

@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-close { 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:var(--font-sans);font-size:var(--t-micro);letter-spacing: .14em;text-transform: uppercase;color: var(--ink3);font-weight:700;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:var(--t-fine); color: var(--ink3); transition: border-color .2s, color .2s;
}
.minor-links .area-links a:hover { border-color: var(--cobalt); color: var(--cobalt); }

/* The cookie choice control used to be its own section at the foot of the
   cookie policy. It now sits in the document column with the summary, so
   .legal-consent above owns it and there is nothing left to style here. */

/* ---------- printing a policy -------------------------------------------
   People print and save terms and privacy notices, and until now the printed
   copy carried the navigation, the call bar and no link destinations. */
@media print {
  .nav, .callbar, .wa-float, .ck-bar, .skip-link, footer,
  .legal-toc, .legal-consent, .legal-close, .legal-top,
  .legal-permalink, .mesh, .grain { display: none !important; }
  body.pg { background: #fff; color: #000; }
  .page-hero { margin-top: 0; }
  .ph-legal { padding: 0 0 18px; }
  .pg-legal-cols { display: block; }
  .legal-prose, .legal-main { max-width: none; }
  .legal-summary { background: none; color: #000; box-shadow: none; border: 1px solid #999; }
  .legal-summary h2, .legal-summary-note, .legal-summary li, .legal-summary a { color: #000; }
  .legal-summary::before { display: none; }
  .legal-summary li::before { background: #000; }
  .legal-prose h2, .legal-summary { break-inside: avoid; page-break-inside: avoid; }
  .legal-prose h2 { break-after: avoid; page-break-after: avoid; }
  /* A printed policy is useless if its links go nowhere, so they print their
     destination. Internal anchors are left alone: they point into this sheet. */
  .legal-prose a[href^="http"]::after,
  .legal-prose a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: .85em; word-break: break-all; }
}

/* ==========================================================================
   Enquiry form. The featured servicing card's blue surface and gold edge,
   with stationary controls and a contrasting gold action.
   ========================================================================== */
.pg-form { padding: var(--sp-tight) 0; }
.fx {
  --fx-error: color-mix(in srgb, var(--closed-fg) 45%, var(--panel-fg));
  position: relative; display: flex; flex-direction: column; width: 100%; max-width: 860px;
  max-height: 100%; min-height: 0; margin-inline: auto; overflow: hidden; flex: 0 1 auto;
  padding: clamp(14px, 2vw, 24px); border-radius: var(--r-xl); color-scheme: dark;
  background: var(--panel-a); color: var(--panel-fg);
  border: 1px solid rgba(255,255,255,.08); box-shadow: var(--soft);
}
.fx::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--feature-accent); pointer-events: none;
}
.fx-body { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; scroll-padding: 6px; margin: -6px; padding: 6px; }
.fx-body:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
/* The form heading belongs to its blue card, not the compact light-page headers. */
.pg-form.surface-form .fx .sec-h {
  max-width: none; text-align: left; margin: 0 0 12px; padding: 0; border: 0;
}
.pg-form.surface-form .fx .sec-h h2 {
  max-width: none; margin: 0; font-size:clamp(1.4rem, 2.4vw, 2rem); line-height: 1.1; color: var(--panel-fg);
}
.fx .sec-h h2 span { color: var(--gold); }
.fx [hidden] { display: none; }
.fx-note { margin: 0 0 12px; font-size:var(--t-fine); line-height: 1.4; color: var(--panel-sub); }
.fx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.fx-msg { grid-column: 1 / -1; }
.fx-field { display: flex; flex-direction: column; min-width: 0; }
.fx-lab { font-size:var(--t-fine); line-height: 1.2; color: var(--panel-fg); font-weight: 700; margin-bottom: 5px; }
.fx-lab em { margin-inline-start: 3px; font-style: normal; font-weight: 500; color: var(--panel-sub); }
.fx-lab > span[aria-hidden="true"] { color: var(--gold); }
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.fx input, .fx textarea, .fx select {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: var(--r-md); line-height: 1.35;
  background: var(--panel-b); border: 1px solid rgba(255,255,255,.48);
  color: var(--panel-fg); caret-color: var(--gold);
  font-family:var(--font-sans); font-size:max(1rem, var(--t-body));
  transition: border-color .18s, box-shadow .18s;
}
.fx textarea { resize: vertical; height: clamp(60px, 12dvh, 132px); min-height: 60px; padding-block: 8px; line-height: 1.4; }
.fx select {
  appearance: none; padding-inline-end: 32px;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 17px) center, calc(100% - 12px) center;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.fx select:has(option[value=""]:checked) { color: var(--panel-sub); }
.fx select option { background: var(--panel-b); color: var(--panel-fg); }
@media (forced-colors: active) {
  .fx select { appearance: auto; background-image: none; }
}
.fx input::placeholder, .fx textarea::placeholder { color: var(--panel-sub); opacity: 1; }
.fx input:hover, .fx textarea:hover, .fx select:hover { border-color: var(--panel-sub); }
.fx input:focus, .fx textarea:focus, .fx select:focus {
  outline: 2px solid var(--gold); outline-offset: 3px; border-color: var(--gold);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 12%, transparent);
}
.fx :is(input, textarea, select)[aria-invalid="true"] { border-color: var(--fx-error); }
.fx-err:empty { display: none; }
.fx-err { font-size:var(--t-fine); line-height: 1.45; color: var(--fx-error); margin-top: 8px; }

/* --- actions and status ------------------------------------------------- */
.fx-actions {
  flex: 0 0 auto; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.16);
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
}
.fx .btn { white-space: normal; }
.fx-actions .mag { flex: 0 1 auto; min-width: 0; }
.fx-actions .btn { min-width: 144px; min-height: 46px; padding: 8px 12px; font-size:var(--t-fine); }
.fx-actions .btn .ic { width: 24px; height: 24px; }
.fx-actions .btn .ic svg { width: 13px; height: 13px; }
.fx .btn-primary {
  background: var(--gold); color: var(--panel-b);
  box-shadow: 0 14px 28px -16px color-mix(in srgb, var(--gold) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.35);
}
.fx .btn-primary:hover { background: color-mix(in srgb, var(--gold) 85%, var(--panel-fg)); }
.fx .btn-primary .ic {
  background: color-mix(in srgb, var(--panel-b) 12%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--panel-b) 16%, transparent);
}
.fx .btn:focus-visible, .fx-legal a:focus-visible { outline: 2.5px solid var(--gold); outline-offset: 4px; }
.fx button:disabled { cursor: wait; opacity: .85; }
.fx-legal { flex: 0 1 auto; font-size:var(--t-fine); line-height: 1.3; color: var(--panel-sub); margin: 0; margin-inline-start: auto; }
.fx-legal a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--gold); font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}

/* The honeypot is off-screen; its inert wrapper also excludes assistive navigation. */
.fx-pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fx-status {
  margin: 0 0 12px; padding: 12px 14px; border-radius: var(--r-lg);
  font-size:var(--t-fine); line-height: 1.55; color: var(--panel-sub);
  border: 1px solid rgba(255,255,255,.32); background: var(--panel-b);
}
.fx-status:empty { margin: 0; padding: 0; border: 0; }
.fx-status:focus { outline: 2.5px solid var(--gold); outline-offset: 3px; }
.fx-status b { display: block; margin-bottom: 3px; color: var(--panel-fg); }
.fx-status a:not(.btn) { color: var(--gold); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.fx-status.is-ok {
  margin: 0; border-color: color-mix(in srgb, var(--green) 50%, var(--panel-fg));
  background: color-mix(in srgb, var(--green) 12%, var(--panel-b));
}
.fx-status.is-error { border-color: var(--fx-error); background: color-mix(in srgb, var(--closed-fg) 12%, var(--panel-b)); }
.fx-status.is-warn { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--panel-b)); }
.fx-alt { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.fx-alt .btn { min-height: 44px; font-size: .9rem; padding: .65em 1.1em; text-decoration: none; }
.fx-alt .btn-wa { color: var(--wa-ink); }
.fx-alt .btn-ghost { background: rgba(255,255,255,.08); color: var(--panel-fg); border-color: rgba(255,255,255,.48); box-shadow: none; }
.fx-alt .btn-ghost:hover { border-color: var(--gold); }

@media (max-width: 759px) {
  .fx-actions .mag { flex: 1 1 12ch; }
  .fx-actions .btn { width: 100%; min-width: 0; justify-content: center; }
  .fx-alt .btn { width: 100%; justify-content: center; }
}
@media (max-height: 700px) {
  .fx { padding: 12px; }
  .pg-form.surface-form .fx .sec-h { margin-bottom: 8px; }
  .fx-note { margin-bottom: 8px; }
  .fx-grid { gap: 8px 12px; }
  .fx-lab { margin-bottom: 4px; }
  .fx textarea { height: 60px; }
  .fx-actions { margin-top: 8px; padding-top: 8px; }
}

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

   These six pages are hubs, not leaves. Each opens with its own hero from
   block 0, shares one section rhythm so they read as a family, and then
   diverges 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      .fleet-jobs          the work as cards, with the capacity behind each
       brands     .surface-marque-grid marques over real workshop cars
       areas      .surface-reach       position, reach and opening
       contact    .surface-route-grid  four clear ways to contact the workshop

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

/* ---------- 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. */
/* The heading scale belongs to every inner page, not just the six hubs. The
   service, area, brand and company pages were still on the raw --t-* tokens, so
   a service page's "Questions we get asked" came out at 54px beside the same
   heading at 27px on the services hub. One scale, defined on .pg, which every
   inner page carries and the hand-authored homepage does not. */
.pg {
  --h2-lead: clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem);
  --h2: clamp(1.35rem, 1.1rem + .95vw, 1.7rem);
  --h2-quiet: clamp(1.2rem, 1.05rem + .55vw, 1.35rem);
  --h3: clamp(1.02rem, .95rem + .3vw, 1.15rem);
  --lead: clamp(1rem, .96rem + .28vw, 1.1rem);
  --band-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3.5l8 6 8-6'/%3E%3C/svg%3E");
}
/* ---------- the dark band vocabulary ------------------------------------
   Every surface that puts a dark section between two light ones draws it the
   same way: a clipped ::before carrying a workshop photograph under a
   near-opaque veil, so no dark section meets its neighbour on a straight
   horizontal line and the ground belongs to this garage rather than to a
   swatch. These were declared on .pg-bodywork, which is where the treatment
   was worked out; they live here now because the company page draws its
   bands from the same three shapes.
   -------------------------------------------------------------------------- */
.pg-surface {
  /* The shear the sheared slab takes, and the arc the domed ones take. Both
     are deliberately deep: at half these values the joins read as a slightly
     crooked rule rather than as a gesture. --band-ell is the arc's horizontal
     radius - the smaller it is, the harder the dome curves; below about 90%
     the ellipse stops reaching the corners and clips the panel's own sides. */
  --band-cut: clamp(46px, 7vw, 130px);
  --band-arc: clamp(52px, 7.6vw, 148px);
  --band-ell: 100%;
  /* The homepage bands are never flat navy: a workshop photograph sits under a
     near-opaque gradient, so the ground has depth and belongs to this garage.
     One ::before carries both - the gradient is the first background layer and
     paints over the photograph under it - which keeps the clip-path on a single
     element. The alphas are tuned so the photograph reads at roughly a fifth,
     the same weight as .band-bg's img { opacity: .20 } on the homepage. */
  --band-veil: linear-gradient(158deg, rgba(9, 18, 44, .93), rgba(11, 28, 66, .88) 52%, rgba(18, 48, 112, .84));
  --band-veil-soft: linear-gradient(160deg, rgba(9, 20, 44, .91), rgba(11, 26, 58, .86) 55%, rgba(16, 38, 84, .82));
}
.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);
  /* The desktop scale. Three rules decide these numbers, and they are the
     reason not to reach for --t-h2 here:

     1. One display size per page. The h1 is it. A section heading sits near
        half of it — at 80% it reads as a second h1 and the page has no top.
     2. No two adjacent levels within ~15% of each other. --h2-quiet and the
        catalogue's h3 were both --t-h3, i.e. identical, so the directory had
        a heading level that announced nothing.
     3. A fluid maximum is the design size, not a licence to keep growing.
        --t-h2 tops out at 54px, which is a display size wearing an h2's name,
        and it landed in a 448px column where it broke every eight characters.

     Supporting copy stays 16-18px over a 45-75 character measure. The section
     intros were 20.8px, larger than the hero's own lede, which inverted the
     hierarchy on every one of these pages. */
}
/* Line-height runs inverse to size: tight for the display step, open for the
   copy underneath it. */
.pg-surface .surface-section .sec-h p { font-size: var(--lead); }
.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: var(--measure); }
/* Line-height runs inverse to size: 1.14 on the display step, 1.25 once a
   heading is down at body-adjacent sizes, where 1.12 reads as cramped. */
.pg-surface .surface-section h2 {
  max-width: 24ch; font-size: var(--h2); line-height: 1.18; 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,
.pg-about .surface-origin { 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,
.pg-about .surface-origin h2 {
  font-size: var(--h2-lead); max-width: 21ch; line-height: 1.14;
}

/* 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-coverage,
.pg-surface .surface-section.surface-scope,
.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-coverage h2,
.pg-surface .surface-section.surface-scope h2,
.pg-surface .surface-section.surface-reach h2 { font-size: var(--h2-quiet); line-height: 1.25; }
.surface-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.surface-note { max-width: var(--measure); margin: 24px 0 0; color: var(--ink2); font-size: var(--t-fine); line-height: var(--lh-body); }
.surface-note a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 2px; }
.surface-note a:hover { text-decoration-thickness: 2px; }
/* The direct-answer paragraph each surface opens on: one self-contained block
   stating the business, the place and the work in full sentences, because the
   surrounding grids and ledgers state those facts only as fragments. */
.surface-answer { max-width: var(--measure); margin: 16px 0 0; color: var(--ink2); line-height: var(--lh-body); }
.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. */
/* Both closing panels are the last block in <main>, so the footer's flat #0E234D
   starts where they end. The diagonal finishes on two different tones across its
   bottom edge, which read as a step against that flat ground, so the panel resolves
   into the footer over its last third - the same layered fade the homepage's contact
   band uses to meet the footer (see #contact .band-bg::after in site.css). */
.surface-guidance, .surface-enquiry {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(14, 35, 77, 0) 62%, #0E234D 97%),
    linear-gradient(135deg, var(--panel-a), var(--panel-b));
}
/* Every closing panel carries CLOSING_MARK: the initials pressed into the
   empty right-hand half of the ground rather than printed on it. It is
   decorative and absolute, so it never enters the grid the sections lay their
   content out on, and the panel clips it. */
.surface-guidance, .surface-enquiry { position: relative; overflow: hidden; }
/* The garage's own mark, masked out of the panel rather than set as three
   letters in the body face - the initials typed in Hanken are not the logo and
   read as a watermark someone forgot to remove. ft-logo.png is white on
   transparent, so its alpha channel is the mark and the tint is ours. */
/* The garage's own mark, masked out of the panel rather than set as three
   letters in the body face - the initials typed in Hanken are not the logo and
   read as a watermark someone forgot to remove. ft-logo.png is white on
   transparent, so its alpha channel is the mark and the tint is ours; the
   aspect ratio is the file's own 215x100, or `contain` letterboxes it and the
   mark floats in the middle of a box instead of sitting in the corner. */
.surface-mark {
  position: absolute; right: clamp(-26px, -2vw, -10px); bottom: clamp(-18px, -1.4vw, -6px);
  z-index: 1; pointer-events: none; user-select: none; -webkit-user-select: none;
  width: clamp(200px, 28vw, 430px); aspect-ratio: 215 / 100;
  overflow: hidden; text-indent: -200vw; white-space: nowrap;
  background: rgba(255, 255, 255, .06);
  -webkit-mask: url("brand/ft-logo.png") right bottom / contain no-repeat;
          mask: url("brand/ft-logo.png") right bottom / contain no-repeat;
}
.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;
}
/* Three prices, three cards. As hairline rows they read as a table of numbers on a
   page that is otherwise all type; as cards they read as three things to pick
   between, which is what they are. The card is laid out in 1b below: mark, work,
   note, then the number, which is the shape that lets the board hold one screen. */
.surface-board-list { display: grid; gap: 12px; margin: 0; padding: 0; border-top: 0; }
.surface-board-list dt {
  font-size: clamp(1.02rem, .96rem + .35vw, 1.2rem); font-weight: 700;
  letter-spacing: -.022em; color: var(--ink);
}
.surface-board-list dd {
  margin: 0; text-align: left; white-space: nowrap;
  font: 700 clamp(1.08rem, 1rem + .48vw, 1.34rem)/1.15 var(--font-sans);
  letter-spacing: -.02em; color: var(--cobalt);
}
.surface-board-list .surface-board-note {
  text-align: left; white-space: normal; margin-top: 2px;
  font: 500 .875rem/1.5 var(--font-sans); letter-spacing: 0; color: var(--ink2);
}
/* Two photos, stacked. Their desktop height comes from the price column beside
   them and is set in 1b: sizing them by their own rows created a cyclic height
   and blew the pair to 655px each. This is the fallback the stacked layout uses. */
.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:var(--t-body); line-height: 1.6;
}
.surface-free b { color: var(--ink); }
/* .freecode is the gold chip defined in site.css: one code, one look everywhere */

/* The page was four sections of one off-white, which is what made it read flat. It
   takes the homepage rhythm instead: the question sits on the sheared navy slab that
   band uses, the directory on the warm band, and the closing block rises out of it on
   an arc. The shear and the arc are the two devices the homepage already owns. */
/* The slab is the page's one full-width colour block, so it has to read as a
   band rather than a stripe. At .8 of the section rhythm it was 479px under a
   1440px-wide shear — squat for its width, and smaller type inside made it
   squatter. The padding carries the depth; the shear deepens with it so the
   diagonal still reads as deliberate at the larger height. */
.surface-intents {
  --cut: clamp(26px, 4.4vw, 86px); position: relative; isolation: isolate; border: 0;
  background: transparent;
}
/* Written at .pg-surface .surface-section's own specificity, which is the whole
   point: as a bare .surface-intents these two declarations lost to the section
   shorthand above and never applied, so the slab has been sitting at a flat
   --sec-base with nothing added back for the shear. The diagonal eats into the
   top and bottom of the band, so a block that has to read as the page's one
   full-width colour field came out at 479px under a 1440px shear — a stripe,
   not a band. The padding carries the depth and the shear is added on top of
   it, not taken out of it. */
.pg-surface .surface-section.surface-intents {
  padding-top: calc(var(--sec-base) * 1.15 + var(--cut));
  padding-bottom: calc(var(--sec-base) * 1.15 + var(--cut));
}
.surface-intents::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(135deg, rgba(9, 18, 44, .97), rgba(14, 36, 92, .95) 46%, rgba(24, 66, 150, .9));
  clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 calc(100% - var(--cut)));
}
/* The right half of the slab was empty navy, which is what made the band read
   as flat colour rather than as part of this garage. A real workshop frame sits
   under it — the same photography the rest of the site runs on, not a stock
   texture — blended on luminosity so it takes the navy's hue and contributes
   only its light. It is masked diagonally out of the left third, so nothing is
   ever read against a light patch of it; the heading and intro sit on flat
   gradient exactly as before. Decorative, and behind the copy at z-index 0. */
.surface-intents::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("photos/workshop-rays.webp") center / cover no-repeat;
  clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 calc(100% - var(--cut)));
  opacity: .14; mix-blend-mode: luminosity;
  /* The transparent stop keeps the photo clear of the heading column and lets
     it build across the empty right half. Contrast is verified on painted
     glyphs, not on element bounding boxes — the boxes overlap the chevron
     rings and the gold mark slots, which reports failures that no reader can
     see. Worst measured ratio on this slab is 6.5:1 against a 4.5 requirement. */
  -webkit-mask-image: linear-gradient(102deg, transparent 34%, rgba(0, 0, 0, .4) 58%, #000 84%, rgba(0, 0, 0, .6) 100%);
          mask-image: linear-gradient(102deg, transparent 34%, rgba(0, 0, 0, .4) 58%, #000 84%, rgba(0, 0, 0, .6) 100%);
}
.surface-intents > .wrap { position: relative; z-index: 1; }
.surface-intents .sec-h h2 { color: #fff; }
.surface-intents .sec-h p { color: rgba(255, 255, 255, .9); }
.surface-intents .sec-h .ey { color: #9DBBFF; }

/* The cards are glass panels on the slab, not flat 9%-white rectangles. The
   gradient gives them a lit top edge and a falling-away bottom, the inset
   hairline is the light catching that edge, and the drop shadow is what lifts
   them off the band at all — at box-shadow: none they sat flush and the whole
   row read as painted-on. */
.surface-intents .rel-card {
  background: linear-gradient(158deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .045) 64%);
  border-color: rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 22px 44px -30px rgba(2, 10, 30, .9);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}
.surface-intents .rel-card b { color: #fff; }
.surface-intents .rel-card span { color: rgba(255, 255, 255, .76); }
.surface-intents .rel-card:hover {
  background: linear-gradient(158deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, .08) 64%);
  border-color: rgba(232, 163, 23, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 26px 50px -28px rgba(2, 10, 30, .95);
}
.surface-intents .rel-card:hover b { color: var(--gold); }
/* The chevron gets a target of its own. As two bare borders it was a scratch in
   the corner; in a ring it reads as the thing you press. */
.surface-intents .rel-card::after {
  width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0B43C' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 5l7 7-7 7'/%3E%3C/svg%3E") center / 11px 11px no-repeat,
    rgba(255, 255, 255, .12);
  transform: translateY(-50%);
  transition: transform .25s var(--ease-out), border-color .25s, background-color .25s;
}
.surface-intents .rel-card:hover::after {
  transform: translateY(-50%) translateX(3px);
  border-color: rgba(232, 163, 23, .6); background-color: rgba(232, 163, 23, .18);
}

/* The directory runs on the page ground, not a band of its own: an opaque
   section hides the dot field inside it, and this is the longest section on the
   page, so banding it put the largest bare-looking block on the site. The slab
   above still ends on something — its own shear — and the rows carry their own
   card surfaces. */
.surface-directory { border-top: 1px solid var(--line); }

/* The closing blocks keep their navy ground and footer fade. Their upper arcs
   carry the preceding ground down: the Services band or the Car makes finder. */
.surface-guidance { position: relative; }
.surface-guidance::before, .pg-brands-index .surface-enquiry::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: 1; pointer-events: none;
  height: clamp(26px, 3.6vw, 58px); background: var(--bg);
  border-bottom-left-radius: 50% clamp(26px, 3.6vw, 58px);
  border-bottom-right-radius: 50% clamp(26px, 3.6vw, 58px);
}
.pg-brands-index .surface-enquiry::before {
  background: var(--bg2);
  border-bottom-left-radius: 65% clamp(26px, 3.6vw, 58px);
  border-bottom-right-radius: 35% clamp(26px, 3.6vw, 58px);
}
.surface-guidance > .wrap, .pg-brands-index .surface-enquiry > .wrap { position: relative; z-index: 2; }
.surface-intent-grid { margin: 0; padding: 0; }
/* the number sits on ::before beside the chevron on ::after: see the card rules below */

.surface-directory-group + .surface-directory-group { margin-top: clamp(36px, 4.5vw, 58px); }
.surface-directory-group h3 { margin: 0 0 18px; font-size: var(--h3); line-height: 1.3; letter-spacing: -.01em; }
.surface-directory-group--secondary { padding-top: 30px; border-top: 1px solid var(--line); }
.surface-directory-group--secondary h3 {
  font: 700 .72rem/1.4 var(--font-sans); 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: clamp(.98rem, .95rem + .18vw, 1.05rem); letter-spacing: -.014em; 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:var(--t-fine); 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:var(--t-fine); font-weight:700; 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.

   The page runs light / dark / light / dark / light / dark. The earlier note
   here said one dark moment per page, because two dark sections used to sit
   back to back and the page ended in an unbroken column of navy. They no
   longer touch: every dark section has a light one on both sides, so the
   alternation is what carries the rhythm rather than one late pivot.

/* ---------- one section, one screen --------------------------------------
   The homepage already gives each specialism a full screen with .sp-full.
   The bodywork surface reads the same way: a section is a floor to stand on,
   not a band to scroll past, so each one is at least a viewport tall and its
   content sits centred in that space. min-height, never height - a section
   whose content outgrows the screen still grows rather than clipping - and
   the mobile call bar comes off the top so nothing finishes underneath it.

   Every section states its own rhythm as --band-pad and one rule turns that
   into padding, because the shared rhythm tiers above set padding at three
   class deep and a per-section override would have to out-specify each of
   them. The navigation is sticky, so its height is added to the top padding
   only: in a centred grid that moves the content down by half of it, which
   is what centring inside the space below the bar means. */
.pg-surface.pg-bodywork .surface-section,
.pg-bodywork .pg-faq {
  --band-pad: var(--sec-base);
  min-height: calc(100dvh - var(--callbar-h, 0px));
  display: grid; align-content: center;
  padding-block: calc(var(--band-pad) + var(--nav-bottom, 92px) * .9) var(--band-pad);
  scroll-margin-top: var(--nav-bottom, 92px);
}
.pg-bodywork .surface-core, .pg-bodywork .surface-proof { --band-pad: var(--sec-tight); }
/* The pseudo-element grounds and the closing wordmark are absolute, so they
   never become grid items competing with the content for that centred row. */
.pg-surface.pg-bodywork .surface-section > .wrap { width: 100%; }

/* ---------- the facts strip points at the estimate ------------------------
   The hero facts are shared by all 35 editorial heroes and their markup is
   fixed, so this is emphasis only: the free-estimate fact takes the accent,
   and a cobalt chip straddles the strip's bottom rule pointing into the
   callout below it. The chip is absolute, so the measured hero geometry the
   fitter depends on is unchanged. */

/* ---------- the callout the chip points at -------------------------------
   The one section that opts out of the sticky-bar clearance. It is the first
   block under the facts strip, and the chip is pointing at it: a viewport of
   ground between the two turns a gesture into two unrelated objects. The
   navigation is over the hero photograph at this scroll position anyway. */
.pg-surface.pg-bodywork .surface-section.surface-estimate {
  padding-top: clamp(30px, 3.6vw, 52px);
  /* The card is blue and the damage slab under it is blue. Left on the shared
     rhythm the two met across a sliver of light that the shear then ate from
     one side, so the pair read as one mis-set block. The light ground between
     them is now wide enough to be a deliberate gap. */
  padding-bottom: clamp(64px, 9vw, 150px);
}
/* Blue and gold, the homepage featured price card's ground: this is the block
   the whole page is arguing for, and as one more white panel among white
   panels it had no more weight than the caveat under it. --feature-grad and
   --feature-accent are the same two tokens that card uses, so the two read as
   one object across the site rather than as two blue cards. */
.surface-callout {
  position: relative; max-width: 1100px; margin-inline: auto;
  padding: clamp(30px, 4vw, 58px); color: #fff;
  background:
    linear-gradient(158deg, rgba(20, 46, 92, .93), rgba(11, 29, 62, .95)),
    url("photos/exterior-front.webp") center 55% / cover no-repeat,
    var(--panel-b);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-xl); box-shadow: var(--soft); backdrop-filter: none;
  overflow: hidden;
}
.surface-callout::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--feature-accent);
}
.surface-callout .ey { color: var(--gold); }
.surface-callout h2 { color: #fff; }
.surface-callout p,
.surface-callout .surface-answer { color: rgba(255, 255, 255, .8); }
.surface-callout .surface-note { color: rgba(255, 255, 255, .62); }
/* white primary and a glass ghost, exactly as .ptile.feature inverts them */
.surface-callout .btn-primary { background: #fff; color: var(--panel-b); }
.surface-callout .btn-primary:hover { background: #EEF2FF; }
.surface-callout .btn-ghost {
  color: #fff; background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .32); box-shadow: none;
}
.surface-callout .btn-ghost:hover { background: rgba(255, 255, 255, .18); border-color: #fff; }
.surface-callout :focus-visible { outline-color: var(--gold); }
/* Two columns, not one stack: the argument on the left, and on the right the
   three facts a driver decides on, the two ways to act on them and the line
   that reassures. As one stack the buttons sat five paragraphs below the
   heading and the facts read as more of the same prose. The right column
   carries the actions so the two columns finish at about the same depth -
   with the ticket alone it ended a third of the way down. */
.surface-callout-in {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(250px, .9fr);
  gap: clamp(28px, 4vw, 58px); align-items: start;
}
.surface-callout-side { display: grid; gap: clamp(20px, 2.6vw, 30px); align-content: start; }
.surface-callout .surface-callout-lead > :first-child { margin-top: 0; }
.surface-callout h2 { margin-top: 14px; font-size: var(--t-display); }
.surface-callout p { max-width: var(--measure); margin-top: 18px; color: var(--ink2); font-size: var(--t-lead); line-height: var(--lh-lead); }
/* Inside the callout the answer paragraph is the lead, so it keeps the
   callout's measure and leading rather than the smaller body setting. */
.surface-callout .surface-answer { margin-top: 18px; font-size: var(--t-lead); line-height: var(--lh-lead); }
/* the side column owns its own spacing, so neither block adds a second gap */
.surface-callout .surface-actions,
.surface-callout .surface-note { margin-top: 0; }
/* The middle of the answer was a list wearing a paragraph's clothes: four
   categories of damage inside one 60-word sentence. It is a list. */
.surface-answer-list {
  list-style: none; display: grid; gap: 10px;
  margin: clamp(14px, 1.8vw, 20px) 0 0; padding: 0; max-width: var(--measure);
}
.surface-answer-list li {
  position: relative; padding-left: 26px;
  color: rgba(255, 255, 255, .86); font-size:var(--t-fine); line-height: 1.5;
}
.surface-answer-list li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 8px; height: 8px; border-radius: 2px; background: var(--gold);
}
/* Cost, time and place as an inset panel of rows. They were the middle third of
   a 130-word paragraph, which is the last place a driver deciding whether to
   drive over will find them. The gold rule ties the panel to the plate edge
   along the top of the card. */
.surface-ticket {
  display: grid; margin: 0; padding: clamp(6px, 1.2vw, 12px) clamp(18px, 2.2vw, 26px) clamp(18px, 2.2vw, 26px);
  background: rgba(255, 255, 255, .08); border-radius: var(--r-lg);
  border-left: 3px solid var(--gold);
}
.surface-ticket > div { min-width: 0; padding: clamp(14px, 1.8vw, 20px) 0 0; }
.surface-ticket > div + div { margin-top: clamp(14px, 1.8vw, 20px); border-top: 1px solid rgba(255, 255, 255, .18); }
.surface-ticket dt {
  font: 700 .7rem/1.3 var(--font-sans); letter-spacing: .13em;
  text-transform: uppercase; color: var(--gold);
}
.surface-ticket dd { margin: 8px 0 0; font-size:var(--t-fine); line-height: 1.55; color: rgba(255, 255, 255, .82); }

/* ---------- the damage slab (dark, sheared) ------------------------------- */
.pg-bodywork .surface-repairs {
  --band-pad: calc(var(--sec-base) * .45 + var(--band-cut) * .8);
  position: relative; isolation: isolate; border: 0; background: transparent; color: #fff;
}
.pg-bodywork .surface-repairs::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    var(--band-veil),
    url("photos/bodywork-booth.webp") center / cover no-repeat,
    #0A1730;
  clip-path: polygon(0 var(--band-cut), 100% 0, 100% calc(100% - var(--band-cut)), 0 100%);
}
.pg-bodywork .surface-repairs > .wrap { position: relative; z-index: 1; }
.pg-bodywork .surface-repairs h2,
.pg-bodywork .surface-repairs h3 { color: #fff; }
.pg-bodywork .surface-repairs .sec-h p { color: rgba(255, 255, 255, .82); }
.pg-bodywork .surface-repairs .surface-note { color: rgba(255, 255, 255, .72); }
.pg-bodywork .surface-repairs .surface-note a { color: #9DBBFF; }
.pg-bodywork .surface-repairs :focus-visible { outline-color: #fff; }

/* Two per row at every width. At four across the photographs were postage
   stamps on a laptop, and at one across the section ran to three screens on a
   phone; two is the only count that holds the crop at both ends. */
.surface-damage-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px);
}
/* Content-sized captions cannot stretch to fill the neighbouring tile's row. */
.surface-damage { display: grid; grid-template-rows: auto auto; align-content: start; gap: 12px; min-width: 0; }
/* A height, not a ratio. Two tiles per row means each photograph is half the
   container wide, and at 4:3 that made a 490px-deep crop on a laptop and a
   section three screens tall. The crop is set from the height instead, so the
   tile grows sideways and not downwards. */
.surface-damage-media {
  display: block; height: clamp(140px, 16vw, 230px); overflow: hidden;
  border-radius: var(--r-xl); background: var(--band);
}
.surface-damage-body { display: flex; flex-direction: column; gap: 4px; padding: 0; }
.surface-damage-body b { font-size:var(--t-body); letter-spacing: -.02em; }
.surface-damage-body span { font-size:var(--t-body); line-height: 1.5; }
/* The photographs have their own edge; captions sit directly on the dark ground,
   not in stretched white panels or over the photographs. */
.pg-bodywork .surface-repairs .surface-damage-body b { color: var(--panel-fg); }
.pg-bodywork .surface-repairs .surface-damage-body span { color: var(--panel-sub); }
/* The label and its caveat on the left, the ticked list on the right: as a
   full-width heading over a full-width card the two read as separate blocks
   with nothing joining them. */
.surface-assess {
  display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(24px, 4vw, 60px); align-items: center;
  margin-top: clamp(34px, 4.4vw, 58px);
}
.surface-assess .surface-subhead { margin-top: 0; }
.surface-assess .surface-note { margin-top: 16px; }
.surface-assess .surface-checks { margin-top: 0; }
/* Two columns only when the panel has room for readable wrapped categories. */
@media (min-width: 621px) {
  .surface-assess .surface-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(18px, 2.4vw, 32px);
  }
}

/* ---------- the five steps ------------------------------------------------
   Each step is a card carrying its mark, its number and its sentence. As a
   row of top-ruled columns the sequence had no object in it to look at, and
   the numbers were the only thing separating one step from the next. */
/* Desktop pairs the steps, with a full-width handover. Phones use one readable
   numbered card per row rather than squeezing the copy into pairs. */
.surface-steps {
  list-style: none; margin: 0; padding: 0; counter-reset: surface-step;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 22px);
}
.surface-steps li:last-child { grid-column: 1 / -1; }
.surface-steps li {
  counter-increment: surface-step; position: relative; min-width: 0;
  display: grid; align-content: start; gap: 10px;
  padding: clamp(22px, 2.6vw, 30px) clamp(18px, 2vw, 24px) clamp(24px, 2.8vw, 32px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--soft-sm);
}
.surface-step-mark {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--cobalt-soft); color: var(--cobalt);
}
.surface-step-mark .surface-ic { width: 25px; height: 25px; }
.surface-steps li::before {
  content: counter(surface-step, decimal-leading-zero); position: absolute;
  top: clamp(22px, 2.6vw, 30px); right: clamp(18px, 2vw, 24px);
  font: 800 .74rem/1 var(--font-sans); letter-spacing: .1em; color: var(--ink3);
}
.surface-steps b { margin-top: 4px; color: var(--ink); font-size:var(--t-body); }
.surface-step-note { color: var(--ink2); font-size:var(--t-body); line-height: 1.55; }

/* ---------- the insurer caveat ------------------------------------------- */
/* Full width and unboxed. As a glass card floated to the right it read as a
   footnote to the steps; the three answers are the ones people actually ring
   up about, so they get the width and a rule of their own. */
.surface-qualifier {
  margin: clamp(40px, 5.4vw, 72px) 0 0; padding: clamp(28px, 3.4vw, 44px) 0 0;
  border-top: 1px solid var(--line2);
}
.surface-qualifier-head { max-width: var(--measure); margin-bottom: clamp(22px, 2.8vw, 34px); }
.surface-qualifier h3 { margin-top: 10px; font-size: var(--t-h3); }
.surface-qualifier-head p { margin-top: 10px; color: var(--ink2); font-size:var(--t-fine); }
/* Three labelled answers, not three unlabelled paragraphs: what an insurer
   does, what a private repair does, and what a courtesy car depends on are
   three separate questions and were reading as one wall. */
.surface-qualifier-list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px); margin: 0; padding: 0;
}
.surface-qualifier-list > div {
  min-width: 0; padding-top: clamp(16px, 2vw, 22px); border-top: 3px solid var(--plate);
}
.surface-qualifier-list dt {
  font: 700 .7rem/1.3 var(--font-sans); letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink);
}
.surface-qualifier-list dd { margin: 10px 0 0; color: var(--ink2); font-size:var(--t-fine); line-height: 1.6; }

/* The heading over a ticked list. The list is already a card, so the label sits
   on the section ground above it rather than inside a second panel. */
.surface-subhead {
  margin: clamp(34px, 4.4vw, 52px) 0 0; font-size: var(--t-h3);
  letter-spacing: -.02em; color: var(--ink);
}
.surface-subhead + .surface-checks { margin-top: clamp(14px, 1.8vw, 20px); }

/* ---------- where the bodyshop is (dark, domed both ends) -----------------
   The slab's top rises on the arc the contact band uses; its bottom is the
   .sec-edge.up device from the homepage - a band drawn at the section's own
   bottom edge in the colour of the ground below, so the light section rises
   into the dark one instead of butting against it. */
/* The exact mirror of the damage slab's shear: that one starts low on the left
   and climbs to the right, this one starts high on the left and falls. Two slabs
   sheared the same way read as one repeated trick; opposed, they read as a pair. */
/* Clear the full shear at every width, including short tablet windows where
   viewport centring no longer supplies extra space around the photographs. */
.pg-surface.pg-bodywork .surface-section.surface-proof {
  --band-pad: calc(var(--band-cut) + var(--sec-tight));
  position: relative; isolation: isolate; border: 0; background: transparent; color: #fff;
}
.pg-bodywork .surface-proof::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    var(--band-veil-soft),
    url("photos/wide-ramps.webp") center 40% / cover no-repeat,
    #0A1730;
  /* Angled at both ends, mirroring the damage slab: high on the left and
     falling to the right across the top, and the same slope again underneath. */
  clip-path: polygon(0 0, 100% var(--band-cut), 100% 100%, 0 calc(100% - var(--band-cut)));
}
.pg-bodywork .surface-proof > .wrap { position: relative; z-index: 2; }
.pg-surface.pg-bodywork .surface-section.surface-proof h2 { font-size: var(--h2); color: #fff; }
.pg-bodywork .surface-proof .sec-h p,
.pg-bodywork .surface-proof .surface-place p { color: rgba(255, 255, 255, .8); }
.pg-bodywork .surface-proof .surface-note { color: rgba(255, 255, 255, .72); }
.pg-bodywork .surface-proof :focus-visible { outline-color: #fff; }
/* One block, two columns: the whole argument on the left and the photographs
   on the right. Split three ways down the page - a full-width heading, then a
   half-width paragraph beside the figures, then full-width photographs - the
   section left a viewport-sized hole at its top right and nothing lined up
   with anything. */
.surface-place {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(28px, 4.5vw, 72px); align-items: center;
}
/* Centred, because the two photographs beside it are a pair with a centre line
   of their own and a left-ragged column next to them read as a third thing. */
.pg-surface.pg-bodywork .surface-section.surface-proof .sec-h { text-align: center; }
.pg-bodywork .surface-place-copy { text-align: center; }
/* The heading is capped at 20ch by the rhythm tier, so centring its text moved
   the words inside a box that was still hard left. The box centres too. */
.pg-bodywork .surface-place-copy h2,
.pg-bodywork .surface-place p,
.pg-bodywork .surface-place .sec-h p { margin-inline: auto; }
.pg-bodywork .surface-place .surface-facts { text-align: left; }
.surface-place-copy > .sec-h { margin-bottom: clamp(18px, 2.4vw, 26px); }
.surface-place p { max-width: var(--measure); font-size:var(--t-body); line-height: var(--lh-body); }
.surface-place .sec-h p { font-size:var(--t-lead); line-height: var(--lh-lead); }
/* One row at every width. The shared strip stacks below 760px, which turned
   three short figures into three full-width blocks and pushed the photographs
   most of a screen further down. */
.surface-place .surface-facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(24px, 3vw, 36px); gap: 0;
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.surface-place .surface-facts > div { padding: clamp(16px, 2.4vw, 24px) clamp(10px, 1.6vw, 20px) 0 0; border-top: 0; }
.surface-place .surface-facts dt { font-size: clamp(1.35rem, 2.8vw, 2.4rem); }
.surface-place .surface-facts dd { margin-top: 8px; font-size: clamp(.56rem, 1.4vw, .66rem); }
/* Inside the right-hand column now, so they stack rather than run the width of
   the page. The second is inset from the left, which keeps the pair from
   reading as one tall box. */
.surface-proof-grid { display: grid; gap: clamp(12px, 1.6vw, 20px); margin: 0; padding: 0; }
/* One size for both. Staggered, the pair read as a large photograph and a
   thumbnail of something else rather than as two views of the same workshop. */
.surface-proof-grid .surface-photo {
  height: clamp(150px, 16vw, 230px); border-radius: var(--r-xl);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .85);
}

/* ---------- the questions, and a footer that continues them ---------------
   The questions used to be ten identical white bars under a bare heading, and
   then the page fell off a cliff into a navy footer. On this page both sit on
   the same ground: the footer takes the light treatment already defined for it
   at the top of site.css, so the last thing a visitor reads and the thing that
   closes the site are one surface with no seam between them. */
.pg-bodywork .pg-faq { --band-pad: var(--sec-base); }
.pg-bodywork .pg-faq { grid-template-columns: minmax(0, 1fr); }
.pg-bodywork .pg-faq > .wrap {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 76px); align-items: start; width: 100%; min-width: 0;
}
.pg-bodywork .pg-faq > .wrap > * { min-width: 0; }
.pg-bodywork .pg-faq > .wrap > .sec-h {
  position: sticky; top: calc(var(--nav-bottom, 92px) + 20px);
  margin: 0; text-align: left;
}
.pg-bodywork .pg-faq .pg-h2 { max-width: 14ch; font-size: var(--h2-lead); line-height: 1.14; }
.pg-bodywork .pg-faq .sec-h p {
  max-width: 34ch; margin: clamp(16px, 2vw, 22px) 0 0;
  color: var(--ink2); font-size:var(--t-body);
}
.pg-bodywork .pg-faq .sec-h .surface-actions { margin-top: clamp(20px, 2.6vw, 28px); }
.pg-bodywork .faq-list { max-width: none; gap: 0; }
/* Rules, not ten floating cards: as separate boxes the list had no shape and
   the open one looked no different from the nine shut ones. */
.pg-bodywork .faq {
  background: transparent; border: 0; border-top: 1px solid var(--line);
  border-radius: 0; box-shadow: none;
}
.pg-bodywork .faq:last-child { border-bottom: 1px solid var(--line); }
.pg-bodywork .faq summary {
  padding: clamp(18px, 2.2vw, 24px) 60px clamp(18px, 2.2vw, 24px) 0;
  font-size: var(--t-lead); letter-spacing: -.02em;
  transition: color .2s var(--ease-out);
}
.pg-bodywork .faq summary:hover { color: var(--cobalt); }
.pg-bodywork .faq summary::after { background: var(--ink3); }
.pg-bodywork .faq[open] summary { color: var(--cobalt); }
.pg-bodywork .faq[open] summary::after { background: var(--cobalt); }
.pg-bodywork .faq-a { padding: 0 56px clamp(20px, 2.4vw, 26px) 0; max-width: var(--measure); }

/* The footer reverts to the light treatment site.css defines for it before the
   navy override, so the questions run straight into it. Transparent, not a
   painted --bg: the page's mesh and grain run behind both, and a solid block
   would show the join as a tonal step. */
.pg-bodywork footer { background: transparent; color: var(--ink); border-top: 1px solid var(--line); }
.pg-bodywork footer a { color: var(--ink2); }
.pg-bodywork footer a:hover { color: var(--cobalt); }
.pg-bodywork footer h4 { color: var(--ink3); }
.pg-bodywork footer .addr, .pg-bodywork footer .faddr { color: var(--ink2); }
.pg-bodywork footer .fhours, .pg-bodywork footer .ftel { color: var(--ink); }
.pg-bodywork footer .fmail { color: var(--ink2); }
.pg-bodywork footer .ftb { border-top-color: var(--line); color: var(--ink3); }
.pg-bodywork footer .flogo { filter: var(--logo-filter); opacity: 1; }

/* ---------- the closing panel, curved at both ends ------------------------
   The shared rule fades this panel into the footer's flat navy, because on
   the other five surfaces it is the last block in <main>. Here the questions
   follow it on the light ground, so that fade is dropped and both edges take
   an arc instead: the panel rises out of the areas list on the contact band's
   ellipse, and the light ground rises back into it at the bottom on the
   .sec-edge.up device. Neither join is a straight line. */
.pg-bodywork .surface-enquiry {
  --band-pad: calc(var(--sec-base) * .5 + var(--band-cut) * .9);
  position: relative; isolation: isolate; background: transparent;
}
.pg-bodywork .surface-enquiry::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(80% 60% at 50% 52%, rgba(7, 16, 38, .72), transparent 70%),
    linear-gradient(158deg, rgba(9, 20, 44, .93), rgba(11, 26, 58, .9) 55%, rgba(16, 38, 84, .88)),
    url("photos/wide-rays.webp") center 45% / cover no-repeat,
    #0A1730;
  /* the cars chevron the way round the homepage draws it: notched inward to a
     point at the centre of both edges, against the areas band's outward points */
  clip-path: polygon(
    0 0, 50% var(--band-cut), 100% 0,
    100% 100%, 50% calc(100% - var(--band-cut)), 0 100%);
}
/* On a photographic ground the mark is one texture too many at full strength. */
.pg-bodywork .surface-enquiry .surface-mark { background: rgba(255, 255, 255, .035); }
.pg-bodywork .surface-enquiry > .wrap { position: relative; z-index: 3; }
/* Centred. Left-aligned in a full-screen section the copy sat in one corner
   of a very large navy field with the mark alone in the other. */
.pg-surface.pg-bodywork .surface-section.surface-enquiry .sec-h {
  text-align: center; margin-inline: auto; max-width: 46ch;
}
.pg-surface.pg-bodywork .surface-section.surface-enquiry .sec-h p { margin-inline: auto; }
.pg-surface.pg-bodywork .surface-section.surface-enquiry h2 { max-width: none; font-size: var(--h2); }
.pg-bodywork .surface-enquiry .surface-actions { justify-content: center; }

/* ==========================================================================
   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: var(--measure); 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: 700 .68rem/1.4 var(--font-sans);
  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-work-media .surface-photo {
  height: clamp(220px, 28vw, 400px); border-radius: var(--r-xl); box-shadow: var(--soft-sm);
}

/* ---------- fleet, rebuilt: the work as cards, the MOT classes as weight
   bands, the arrangement as a connected four-step line ------------------- */
.pg-fleet .surface-capability {
  background: linear-gradient(120deg, rgba(10,23,48,.94), rgba(24,53,96,.9)), url("/assets/photos/wide-ramps.webp") 50% 50% / cover;
}
.fleet-jobs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fleet-job { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-content: start;
  padding: 18px 18px 16px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--soft-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.fleet-job:hover { transform: translateY(-3px); box-shadow: var(--soft); }
.fleet-job-ic { grid-row: 1 / 3; width: 22px; height: 22px; padding: 11px; box-sizing: content-box; border-radius: 14px;
  background: var(--cobalt-soft); color: var(--cobalt); }
.fleet-job b { font-size: var(--t-body); letter-spacing: -.02em; color: var(--ink); align-self: center; }
.fleet-job span { font-size: var(--t-fine); line-height: 1.5; color: var(--ink2); }
.fleet-job em { grid-column: 2; justify-self: start; margin-top: 8px; padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(232,163,23,.14); color: #8a5d00; font: 800 .64rem/1.4 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; font-style: normal; }
.pg-fleet .surface-work-in { align-items: stretch; }
.pg-fleet .surface-work-media .surface-photo { height: 100%; min-height: 320px; object-fit: cover; }

.pg-fleet .surface-coverage { position: relative; isolation: isolate; color: #fff; }
.pg-fleet .surface-coverage::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(160deg, rgba(11,29,62,.95), rgba(7,19,48,.97)), url("/assets/photos/svc-mot-viewing.webp") 50% 40% / cover;
  clip-path: polygon(0 clamp(28px, 4vw, 60px), 100% 0, 100% calc(100% - clamp(28px, 4vw, 60px)), 0 100%); }
.pg-fleet .surface-coverage h2 { color: #fff; }
.pg-fleet .surface-coverage .sec-h p, .pg-fleet .surface-coverage .surface-note { color: rgba(255,255,255,.78); }
.fleet-classes { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 22px); }
.fleet-class { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; padding: clamp(20px, 2.4vw, 30px); border-radius: var(--r-xl);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); }
.fleet-class-ic { grid-row: 1 / 3; width: 30px; height: 30px; padding: 12px; box-sizing: content-box; border-radius: 16px; background: rgba(157,184,255,.16); color: #CFE0FF; }
.fleet-class dt { font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: #fff; align-self: end; }
.fleet-class dd { margin: 0; color: rgba(255,255,255,.8); font-size: var(--t-fine); line-height: 1.5; }
.fleet-weight { grid-column: 1 / -1; margin-top: 14px !important; }
.fleet-weight-bar { display: block; position: relative; height: 10px; border-radius: 6px; background: rgba(255,255,255,.12); overflow: hidden; }
.fleet-weight-bar i { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(90deg, var(--gold), #F6CE17); }
.fleet-class--4 .fleet-weight-bar i { left: 0; width: 85.7%; }
.fleet-class--7 .fleet-weight-bar i { left: 85.7%; width: 14.3%; }
.fleet-weight-ends { display: flex; justify-content: space-between; margin-top: 6px; font: 700 .66rem/1.4 var(--font-sans); letter-spacing: .1em; color: rgba(255,255,255,.6); }

.fleet-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); position: relative; counter-reset: fleet-step; }
.fleet-steps::before { content: ""; position: absolute; left: 30px; right: 30px; top: 29px; height: 2px;
  background: linear-gradient(90deg, var(--cobalt), var(--gold)); }
.fleet-steps li { position: relative; display: grid; gap: 8px; align-content: start; counter-increment: fleet-step; }
.fleet-step-mark { position: relative; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--cobalt); box-shadow: 0 0 0 6px var(--bg); color: var(--cobalt); }
.fleet-steps li:last-child .fleet-step-mark { border-color: var(--gold); color: #8a5d00; }
.fleet-step-mark::after { content: counter(fleet-step); position: absolute; right: -6px; top: -6px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--cobalt); color: #fff; font: 800 .72rem/1 var(--font-sans); }
.fleet-step-ic { width: 24px; height: 24px; }
.fleet-steps b { margin-top: 8px; font-size: var(--t-body); letter-spacing: -.02em; color: var(--ink); }
.fleet-steps span { font-size: var(--t-fine); line-height: 1.55; color: var(--ink2); }
@media (max-width: 980px) {
  .fleet-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .fleet-steps::before { display: none; }
}
@media (max-width: 760px) {
  .fleet-jobs, .fleet-classes { grid-template-columns: 1fr; }
  .fleet-steps { grid-template-columns: 1fr; gap: 0; padding-left: 0; }
  .fleet-steps li { grid-template-columns: 60px 1fr; column-gap: 16px; padding-bottom: 22px; }
  .fleet-steps li::before { content: ""; position: absolute; left: 29px; top: 60px; bottom: 0; width: 2px; background: var(--line2); }
  .fleet-steps li:last-child::before { display: none; }
  .fleet-step-mark { grid-row: 1 / 3; }
  .fleet-steps b { margin-top: 4px; }
  .pg-fleet .surface-work-media .surface-photo { min-height: 220px; }
}

/* ==========================================================================
   4. Car makes: a logo/name directory first, with photographed workshop proof
   underneath. The two uses share the same accessible brand identity.
   ========================================================================== */
.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: var(--measure); margin-top: 16px; color: var(--ink2); }
.surface-checks {
  list-style: none; display: grid; gap: 12px;
  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 {
  display: block; min-width: 0; padding-left: 32px; text-align: left;
  position: relative; font-size:var(--t-body); line-height: 1.5; color: var(--ink);
}
/* Both marks follow the first line, not the height of a wrapped grid row. */
.surface-checks li::before,
.surface-checks li::after { content: ""; position: absolute; top: .75em; transform: translateY(-50%); }
.surface-checks li::before {
  left: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--cobalt-soft);
}
.surface-checks li::after {
  left: 5px; width: 10px; height: 10px; background: var(--cobalt);
  -webkit-mask: var(--tick-mask) center / contain no-repeat;
          mask: var(--tick-mask) center / contain no-repeat;
}
/* The assessment list sits on the navy band as one glass panel with the
   heading: categories in three columns with gold ticks, then what else is
   done on site after an impact, as three linked tiles. */
.pg-bodywork .surface-repairs .surface-assess {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2vw, 24px);
  padding: clamp(20px, 2.8vw, 36px); border-radius: var(--r-xl);
  background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.16); box-shadow: 0 30px 60px -36px rgba(0,0,0,.8);
}
.pg-bodywork .surface-repairs .surface-assess-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 28px; flex-wrap: wrap; }
.pg-bodywork .surface-repairs .surface-assess-head .surface-note { margin: 0; max-width: 56ch; }
.pg-bodywork .surface-repairs .surface-checks {
  margin: 0; padding: clamp(14px, 1.8vw, 22px) 0; gap: 12px 28px; background: none; border: 0; box-shadow: none; border-radius: 0;
  border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14);
}
.pg-bodywork .surface-repairs .surface-checks li { color: #fff; font-weight: 700; }
.pg-bodywork .surface-repairs .surface-checks li::before { background: rgba(232,163,23,.18); }
.pg-bodywork .surface-repairs .surface-checks li::after { background: var(--gold); }
@media (min-width: 900px) {
  .pg-bodywork .surface-repairs .surface-assess .surface-checks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.surface-assess-also { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.surface-also { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; padding: 14px 16px; border-radius: var(--r-lg);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #fff; transition: background .25s, border-color .25s; }
.surface-also:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }
.surface-also .surface-ic { grid-row: 1 / 3; width: 22px; height: 22px; padding: 9px; box-sizing: content-box; border-radius: 50%; background: rgba(157,184,255,.16); color: #CFE0FF; }
.surface-also b { font-size: var(--t-body); }
.surface-also span { color: rgba(255,255,255,.72); font-size: var(--t-fine); line-height: 1.4; }
@media (max-width: 760px) {
  .surface-assess-also { grid-template-columns: 1fr; }
  .pg-bodywork .surface-repairs .surface-assess-head { flex-direction: column; align-items: center; }
}

.surface-expertise-media .surface-photo {
  height: clamp(240px, 30vw, 420px); border-radius: var(--r-xl); box-shadow: var(--soft-sm);
}

.surface-brand-identity { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.surface-brand-marks {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 0 0 28px; gap: 4px; width: 28px;
}
.surface-brand-marks img { display: block; width: 28px; height: 28px; object-fit: contain; }
.surface-brand-name {
  min-width: 0; font: 700 var(--t-fine)/1.3 var(--font-sans); color: var(--ink);
  letter-spacing: -.01em; white-space: normal; overflow-wrap: anywhere;
}
.pg-brands-index .surface-section.surface-featured,
.pg-brands-index .surface-section.surface-expertise { padding-block: var(--sec-tight); }
.surface-featured { background: var(--bg2); border-block: 1px solid var(--line); }
.pg-brands-index .surface-marque-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 18px);
}
.surface-marque {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface); transition: border-color .2s;
}
.surface-marque:hover { border-color: var(--cobalt); }
.surface-marque-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg2); }
.surface-marque-media .surface-photo { opacity: 1; }
.surface-marque-body { display: flex; flex-direction: column; gap: 10px; padding: clamp(10px, 1.5vw, 20px); }
.surface-marque-body > span:last-child {
  font: 500 var(--t-fine)/1.5 var(--font-sans); color: var(--ink2); overflow-wrap: anywhere;
}
@media (min-width: 760px) {
  .pg-brands-index .surface-marque-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .surface-brand-marks { flex-basis: 32px; width: 32px; }
  .surface-brand-marks img { width: 32px; height: 32px; }
  .surface-marque-body .surface-brand-name { font-size: var(--t-body); }
}

/* ==========================================================================
   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: var(--measure); 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: 700 .7rem/1.3 var(--font-sans); letter-spacing: .13em;
  text-transform: uppercase; color: var(--cobalt);
}
.surface-reach-list dd { margin: 0; font-size:var(--t-body); 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. */
/* Keyed to the section, not the page: .area-links is a scroll rail by default,
   and every core-areas block wants the wrapped grid instead. Scoping this to
   .pg-areas-index left the same block on bodywork and fleet as a rail with
   most of its links off-screen. */
/* Each area is a place you can actually be, so each one is a raised chip you
   press rather than a row in a table of names. They wrap in a centred field at
   every width, which is what makes twenty of them read as coverage instead of
   as a directory. */
.surface-core .area-links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(8px, 1.2vw, 14px); margin-top: 0; overflow-x: visible; padding-bottom: 0;
}
.surface-core .area-links a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px clamp(16px, 2vw, 24px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
  box-shadow: var(--soft-sm), inset 0 1px 0 rgba(255, 255, 255, .75);
  font-size:var(--t-fine); font-weight: 700; letter-spacing: -.01em; color: var(--ink);
  text-align: center;
  transition: color .22s var(--ease-out), border-color .22s var(--ease-out),
              box-shadow .26s var(--ease-out), transform .26s var(--ease-out);
}
.surface-core .area-links a:hover {
  color: var(--cobalt); border-color: var(--cobalt);
  box-shadow: 0 14px 30px -14px rgba(30, 86, 224, .5), inset 0 1px 0 rgba(255, 255, 255, .75);
}
/* Restated at the rhythm tier's specificity: .pg-surface .surface-section .sec-h
   sets text-align left at three classes, so a two-class rule here never landed. */
.pg-surface .surface-section.surface-core .sec-h {
  text-align: center; margin-inline: auto; max-width: 62ch;
}
.pg-surface .surface-section.surface-core .sec-h p { margin-inline: auto; }
.surface-core .surface-note { margin-inline: auto; text-align: center; }
/* The homepage's cars band, inverted. That one notches inward to a point at the
   centre of each edge; this one points outward, so the band is deepest in the
   middle and light wedges open at all four corners - which is also what holds it
   apart from the sheared slab above it and the closing panel below. Its
   photograph is the same workshop shot the cars band carries. */
/* The nearby areas sit on the open page, with no ground of their own. Its point
   moved up to the bodyshop slab's lower edge, and the closing panel below
   already draws the boundary they share - a band here would have put a third
   dark stretch between two edges that were doing the work without it. */
.pg-surface.pg-bodywork .surface-section.surface-core h2 { font-size: var(--h2); max-width: none; }
.pg-bodywork .surface-core .area-links,
.pg-bodywork .surface-core .surface-note { max-width: 1000px; margin-inline: auto; }
.pg-bodywork .surface-core .area-links a { background: var(--surface); }
@media (hover: hover) and (pointer: fine) {
  .surface-core .area-links a:hover { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .surface-core .area-links a { transition: none; }
  .surface-core .area-links a:hover { transform: none; }
}

/* ==========================================================================
   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: 700 .7rem/1.2 var(--font-sans);
  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(--ink3); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); font-size:var(--t-body);
}
.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 var(--font-sans); }
/* 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 var(--font-sans); 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:var(--t-fine); 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: var(--measure); 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:var(--t-body); 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; }

/* Make browsing stays compact without changing the shared Areas directory. */
html:has(body.pg-brands-index) {
  /* Include the rail in the visible scroll area, not just anchor margins:
     native focus otherwise considers links behind the sticky rail visible. */
  scroll-padding-top: calc(var(--nav-bottom, 82px) + max(44px, .82rem + 18px) + 32px);
  scroll-padding-bottom: calc(var(--callbar-h, 0px) + 12px);
}
.pg-brands-index .surface-finder .sec-h { margin-bottom: 24px; }
.pg-brands-index .surface-filter {
  max-width: none; padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none;
}
.pg-brands-index .surface-filter-row { grid-template-columns: minmax(0, 1fr) auto; }
.pg-brands-index .surface-az {
  top: var(--nav-bottom, 82px); flex-wrap: nowrap; overflow-x: auto;
  margin: 16px 0 24px; padding: 8px 6px; gap: 6px;
  scrollbar-width: thin; box-shadow: none; clip-path: none;
}
.pg-brands-index .surface-az a { flex: 0 0 auto; height: max(44px, calc(.82rem + 18px)); }
.pg-brands-index .surface-results.area-index { columns: 2 10rem; column-gap: 16px; }
.pg-brands-index .surface-result-group { break-inside: avoid; margin-bottom: 20px; }
/* The brand page's scroll-padding covers both sticky layers for links and groups. */
.pg-brands-index .surface-result-group,
.pg-brands-index .surface-index a { scroll-margin-top: 0; }
.pg-brands-index .surface-result-group h3 { font-size: var(--t-body); }
.pg-brands-index .surface-index a {
  min-height: 60px; margin-bottom: 6px; padding: 10px 8px; break-inside: avoid;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  white-space: normal; overflow: visible; text-overflow: clip;
}
.pg-brands-index .surface-index a:hover { border-color: var(--cobalt); background: var(--cobalt-soft); }
/* Wide wordmarks need more than a square icon slot to remain recognisable. */
.pg-brands-index .surface-index .surface-brand-marks { flex-basis: 64px; width: 64px; }
.pg-brands-index .surface-index .surface-brand-marks img { width: 64px; height: 32px; }
@media (min-width: 760px) {
  .pg-brands-index .surface-results.area-index { column-count: 3; column-gap: 20px; }
  /* From tablet up the 17 letters no longer fill the band, and a short row held
     to the left edge reads as the start of a list that ran out. `safe` is what
     makes centring usable in a scroller: the moment the letters are wider than
     the rail it falls back to start alignment, so the A never ends up parked
     outside the scrollable area where no amount of scrolling reaches it. */
  .pg-brands-index .surface-az { justify-content: safe center; }
}
@media (min-width: 1180px) {
  .pg-brands-index .surface-results.area-index { column-count: 4; column-gap: 24px; }
}
/* Without enhancement the expanded navigation scrolls normally, so it cannot
   cover the native A–Z destinations. All brand links remain present. */
html:not(.nav-initialized) body.pg-brands-index .nav { position: relative; top: auto; }
html:not(.nav-initialized) .pg-brands-index .surface-az { position: static; }
html:not(.nav-initialized):has(body.pg-brands-index) { scroll-padding-top: 12px; }

/* ==========================================================================
   6. Contact: clear channel choices, a contrasting enquiry band, then visits
   and answers. These treatments belong to the contact page only.
   ========================================================================== */
/* Resolve clearance at the root: shared short-screen rules also set
   --callbar-h on sections, but the measured root value is the actual obstruction. */
html:has(body.pg-contact-index) {
  --contact-top: calc(var(--nav-bottom, 92px) + 8px);
  --contact-bottom: calc(var(--callbar-h, 0px) + 8px);
  scroll-padding-block: var(--contact-top) var(--contact-bottom);
}
.pg-surface.pg-contact-index :is(.surface-form, .surface-location, .pg-faq) {
  --contact-cut: clamp(24px, 8dvh, 72px);
  position: relative; isolation: isolate; display: grid; grid-template-rows: minmax(0, 1fr);
  box-sizing: border-box; block-size: 100dvh; min-block-size: 0;
  padding-block: max(var(--contact-top), calc(var(--contact-cut) + 16px)) max(var(--contact-bottom), calc(var(--contact-cut) + 16px));
  padding-inline: 0;
}
.pg-surface.pg-contact-index .pg-faq {
  padding-block-start: max(var(--contact-top), calc(var(--band-arc) + 16px));
}
/* Frame anchors start at the viewport edge. Descendant focus still uses the
   root scroll-padding, so it clears both navigation and floating actions. */
.pg-surface.pg-contact-index :is(.surface-form[id], .surface-location[id], .pg-faq) {
  scroll-margin-top: calc(0px - var(--contact-top));
}
.pg-surface.pg-contact-index :is(.surface-form, .surface-location, .pg-faq) > .wrap {
  width: 100%; height: 100%; min-height: 0;
  display: flex; flex-direction: column; justify-content: safe center;
}
.pg-contact-index .surface-section > .wrap > .sec-h,
.pg-contact-index .pg-faq > .wrap > .sec-h {
  flex: 0 0 auto; margin: 0 0 clamp(12px, 2dvh, 22px); max-width: none; text-align: left;
}
.pg-contact-index .surface-section > .wrap > .sec-h h2,
.pg-contact-index .pg-faq .pg-h2 {
  max-width: none; margin: 0; font-size: clamp(1.5rem, 3.2vw, 2.8rem); line-height: 1.15;
}
/* Channel choices follow their content rather than occupying a whole screen. */
.pg-surface.pg-contact-index .surface-channels {
  block-size: auto; min-block-size: 0; padding-block: clamp(32px, 4vw, 52px);
}
.pg-surface.pg-contact-index .surface-channels[id] { scroll-margin-top: 0; }
.pg-contact-index .contact-pane { height: auto; overflow: visible; padding-block: 0; }
.pg-contact-index :is(.contact-pane, .find-grid):focus-visible { outline: 2px solid var(--cobalt); outline-offset: -2px; }
.pg-contact-index .surface-route-grid {
  flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 20px);
}
.pg-contact-index .surface-route {
  --route-accent: var(--cobalt);
  position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: clamp(12px, 1.6vw, 22px); border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface); box-shadow: var(--soft-sm);
  transition: transform .25s var(--ease-out), border-color .2s, box-shadow .2s;
}
.pg-contact-index .surface-route:hover { border-color: var(--route-accent); box-shadow: var(--soft); }
.pg-contact-index .surface-route:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 4px; }
.pg-contact-index .surface-route-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pg-contact-index .surface-route-head .surface-ic {
  width: 32px; height: 32px; flex: 0 0 auto; padding: 7px; border-radius: var(--r-md);
  color: var(--route-accent); fill: currentColor; stroke: none;
  background: color-mix(in srgb, var(--route-accent) 10%, var(--surface));
}
.pg-contact-index .surface-route-kind {
  margin: 0; font: 700 var(--t-fine)/1.2 var(--font-sans); color: var(--route-accent);
}
.pg-contact-index .surface-route b {
  display: block; margin-top: 2px; font-size:clamp(1rem, 1.35vw, 1.2rem); line-height: 1.25;
  font-weight: 800; letter-spacing: -.02em; color: var(--ink); overflow-wrap: anywhere;
}
.pg-contact-index .surface-route > p { flex: 1; margin: 0; font-size:var(--t-fine); line-height: 1.4; color: var(--ink2); }
.pg-contact-index .surface-route-action {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line);
  font-size:var(--t-fine); font-weight: 700; color: var(--route-accent); overflow-wrap: anywhere;
}
.pg-contact-index .surface-route-action .surface-ic { width: 18px; height: 18px; flex: 0 0 auto; color: inherit; stroke-width: 2.4; }
.pg-contact-index .surface-route--call { --route-accent: var(--gold); background: var(--feature-grad); border-color: rgba(255,255,255,.08); }
.pg-contact-index .surface-route--call::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--feature-accent); pointer-events: none;
}
.pg-contact-index .surface-route--call .surface-route-head .surface-ic { background: rgba(255,255,255,.08); }
.pg-contact-index .surface-route--call b { color: var(--panel-fg); }
.pg-contact-index .surface-route--call > p { color: var(--panel-sub); }
.pg-contact-index .surface-route--call .surface-route-action { border-color: rgba(255,255,255,.16); }
.pg-contact-index .surface-route--wa { --route-accent: var(--wa); }
.pg-contact-index .surface-channels .surface-note { flex: 0 0 auto; margin-top: 14px; }
.pg-contact-index .surface-channels .surface-note a {
  color: var(--cobalt); font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}

.pg-contact-index .surface-section.surface-form,
.pg-contact-index .pg-faq { background: transparent; border: 0; color: var(--panel-fg); }
.pg-contact-index .surface-form::before,
.pg-contact-index .pg-faq::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--panel-b); pointer-events: none;
}
/* Only the paint is shaped. Fields, focus rings and open answers stay intact. */
.pg-contact-index .surface-form::before {
  background: var(--panel-veil), url("photos/wide-rays.webp") center 45% / cover no-repeat, var(--panel-b);
  clip-path: polygon(0 var(--contact-cut), 100% 0, 100% calc(100% - var(--contact-cut)), 0 100%);
}
.pg-contact-index .pg-faq::before {
  /* The same fade as the other closing panels meets the footer's opaque top. */
  background:
    linear-gradient(180deg, rgba(14, 35, 77, 0) 62%, #0E234D 97%),
    var(--panel-veil), url("photos/workshop-corridor.webp") center 55% / cover no-repeat, var(--panel-b);
  border-radius: 0;
}
.pg-contact-index .surface-form .fx { border-color: rgba(255,255,255,.16); }
.pg-contact-index .surface-section.surface-location { background: var(--bg2); }
.pg-contact-index .find-grid {
  flex: 0 1 auto; min-height: 0; max-height: 100%; overflow: auto; scrollbar-width: thin;
  grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px;
  margin: -6px; padding: 6px;
}
.pg-contact-index .mapembed {
  min-height: 0; height: clamp(130px, 24dvh, 200px); aspect-ratio: auto; border-color: var(--line2);
}
.pg-contact-index .napcard {
  height: auto; padding: clamp(14px, 1.8vw, 24px); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--soft-sm);
}
.pg-contact-index .napcard::before { display: none; }
.pg-contact-index #openState:not(:empty) { margin-bottom: 10px; }
.pg-contact-index .surface-location-top {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(72px, 9vw, 110px);
  gap: 12px; align-items: start; margin-bottom: 12px;
}
.pg-contact-index .find-grid .find-photo { display: block; margin: 0; border-radius: var(--r-md); }
.pg-contact-index .find-photo img { aspect-ratio: 4 / 3; object-position: 50% 35%; }
.pg-contact-index .find-photo:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.pg-contact-index .napcard .nrow {
  gap: 8px; margin: 0; padding: 0; border: 0; font-size:var(--t-fine); line-height: 1.4;
}
.pg-contact-index .napcard .nrow > span { min-width: 0; overflow-wrap: anywhere; }
.pg-contact-index .napcard .nrow svg { width: 16px; height: 16px; margin-top: 2px; }
.pg-contact-index .napcard .nrow svg[fill="none"] { fill: none; stroke: var(--cobalt); }
.pg-contact-index .nap-hours > b { margin-bottom: 4px; }
.pg-contact-index .hours { margin: 0; font-size:var(--t-fine); }
.pg-contact-index .hours li { flex-wrap: wrap; gap: 2px 12px; padding-block: 3px; }
.pg-contact-index .hours li .h { font-size:var(--t-fine); }
.pg-contact-index .hours li.today { margin: 0 -6px; padding-inline: 6px; }
.pg-contact-index .nap-note { margin-top: 8px; font-size:var(--t-fine); line-height: 1.4; }
.pg-contact-index .nap-foot { padding-top: 12px; }
.pg-contact-index .nap-foot .getdir { min-height: 44px; padding-block: 8px; }
.pg-contact-index .surface-location-areas { grid-column: 1 / -1; min-width: 0; }
.pg-contact-index .surface-location-areas .area-lead {
  margin: 0 0 6px; font-size:var(--t-fine); letter-spacing: 0; text-transform: none;
}
.pg-contact-index .surface-location-areas .area-links {
  margin: 0; padding: 4px 4px 8px; scrollbar-width: thin; gap: 8px;
}
.pg-contact-index .surface-location-areas .area-links::-webkit-scrollbar { display: block; height: 6px; }
.pg-contact-index .surface-location-areas .area-links a {
  display: inline-flex; align-items: center; min-height: 44px; font-size:var(--t-fine);
}
@media (min-width: 760px) {
  .pg-contact-index .surface-route-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pg-contact-index .find-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; }
  .pg-contact-index .mapembed { height: auto; min-height: 260px; }
}

.pg-contact-index .pg-faq .pg-h2 { color: var(--panel-fg); }
.pg-contact-index .faq-list {
  flex: 0 1 auto; min-height: 0; max-width: none; max-height: 100%; overflow: auto;
  grid-auto-rows: max-content; align-content: start; gap: 0; margin: -6px; padding: 6px;
  scroll-padding-block: 6px; scrollbar-width: thin;
}
.pg-contact-index .faq-list:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.pg-contact-index .faq {
  background: transparent; border: 0; border-top: 1px solid rgba(255,255,255,.24);
  border-radius: 0; box-shadow: none; overflow: visible;
}
.pg-contact-index .faq:last-child { border-bottom: 1px solid rgba(255,255,255,.24); }
.pg-contact-index .faq:hover, .pg-contact-index .faq[open] { background: transparent; border-color: var(--gold); box-shadow: none; }
.pg-contact-index .faq summary {
  --faq-inset: 0px;
  min-height: 44px; padding: 14px 56px 14px 0; color: var(--panel-fg);
  font-size:var(--t-body); line-height: 1.35;
}
.pg-contact-index .faq[open] summary, .pg-contact-index .faq summary:hover { background: transparent; color: var(--gold); }
.pg-contact-index .faq summary:focus-visible { outline: 2.5px solid var(--gold); outline-offset: 2px; }
.pg-contact-index .faq:focus-within { border-color: var(--gold); }
.pg-contact-index .faq summary::before { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.24); }
.pg-contact-index .faq summary::after { background: var(--gold); }
.pg-contact-index .faq[open] summary::before { background: var(--gold); border-color: var(--gold); }
.pg-contact-index .faq[open] summary::after { background: var(--panel-b); }
.pg-contact-index .faq-a {
  border: 0; color: var(--panel-sub); font-size:var(--t-body); max-width: var(--measure);
  line-height: 1.55; margin: 0; padding: 0 56px 18px 0;
}
.pg-contact-index .faq-a a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.pg-contact-index .faq-a a:focus-visible { outline-color: var(--gold); }

/* ---------- responsive --------------------------------------------------- */
@media (max-width: 1180px) {
  .surface-results.area-index { columns: 5 auto; }
  .surface-proof-grid { grid-template-columns: 1fr 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-results.area-index { columns: 4 auto; }
  .surface-board-media { grid-template-columns: 1fr 1fr; }
  .surface-facts { grid-template-columns: repeat(3, 1fr); }
  .surface-assess, .surface-place, .surface-callout-in { grid-template-columns: 1fr; align-items: start; }
  /* Three answers side by side need three readable measures; below this they
     are three 100px columns of one-word lines. Stacked, though, a 3px gold rule
     running the full width of the screen three times reads as three dividers
     rather than three answers - so each one becomes a card that the rule caps. */
  .surface-qualifier-list { grid-template-columns: 1fr; gap: 10px; }
  .surface-qualifier-list > div {
    padding: clamp(15px, 3.4vw, 20px) clamp(16px, 3.6vw, 20px) clamp(17px, 3.8vw, 22px);
    margin-top: 0; text-align: left;
    background: var(--surface); border: 1px solid var(--line);
    border-top: 3px solid var(--plate); border-radius: var(--r-lg);
    box-shadow: var(--soft-sm);
  }
  .surface-qualifier-list dd { margin-top: 7px; font-size:var(--t-micro); line-height: 1.55; }
  .surface-qualifier { margin-inline: 0; }
}
@media (max-width: 760px) {
  .pg-surface .surface-section { padding: clamp(44px, 12vw, 68px) 0; }
  /* the shared phone rhythm, restated as the variable the bodywork sections
     pad from, so the sheared and domed grounds keep their clearance on top */
  .pg-surface.pg-bodywork .surface-section,
  .pg-bodywork .pg-faq { --band-pad: clamp(44px, 12vw, 68px); }
  /* A phone's navigation is a compact pill, so the full clearance the desktop
     rule reserves is most of a heading's worth of dead space at the top of every
     section - and it was enough to stop the shorter ones centring in their own
     grounds at all. */
  .pg-surface.pg-bodywork .surface-section,
  .pg-bodywork .pg-faq { padding-block: calc(var(--band-pad) + 22px) var(--band-pad); }
  .pg-surface.pg-bodywork .surface-section.surface-estimate { padding-top: clamp(26px, 6vw, 40px); }
  .pg-bodywork .surface-repairs { --band-pad: calc(clamp(30px, 8vw, 48px) + var(--band-cut) * .8); }
  .pg-bodywork .surface-core,
  .pg-bodywork .surface-enquiry { --band-pad: calc(clamp(30px, 8vw, 48px) + var(--band-cut) * .8); }
  .surface-board-media { grid-template-columns: 1fr; }
  .surface-catalogue,
  .surface-proof-grid, .surface-steps { grid-template-columns: 1fr; }
  .surface-damage-media { height: clamp(112px, 26vw, 170px); }
  .surface-damage { gap: 10px; }
  .surface-damage-body b { font-size:var(--t-body); }
  .surface-damage-body span { font-size: max(.875rem, var(--t-fine)); line-height: 1.5; }
  .surface-facts { grid-template-columns: 1fr; gap: 0; border-top: 0; }
  .surface-facts > div { padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, .2); }
  /* still cards on a phone, one per row: as a ruled rail the marks had
     nowhere to sit and the numbers ran into the step names. */
  .surface-steps li { border-radius: var(--r-lg); }
  .surface-step-mark { width: 42px; height: 42px; }
  .surface-step-mark .surface-ic { width: 22px; height: 22px; }
  .surface-callout-in { grid-template-columns: 1fr; }
  .surface-qualifier-list > div { grid-template-columns: 1fr; gap: 8px; }
  .surface-qualifier-list dt { padding-top: 0; }
  .surface-core .area-links a { padding: 11px 15px; font-size:var(--t-micro); }
  .surface-proof-grid .surface-photo,
  .surface-proof-grid .surface-photo + .surface-photo { height: clamp(230px, 72vw, 380px); margin-top: 0; }
  .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; }
}
/* ---------- the bodywork surface on a phone -------------------------------
   Every section on this page is a full screen with its content centred in it,
   and a left-ragged column sitting in the middle of that space reads as having
   drifted rather than as having been placed. On a phone the copy centres with
   the layout that holds it. Steps have centered numbered badges; ticked lists
   and answers retain a left reading edge. */
@media (max-width: 760px) {
  /* at the rhythm tier's specificity: .pg-surface .surface-section .sec-h sets
     text-align left at three classes and outranks a .pg-bodywork rule */
  .pg-surface.pg-bodywork .surface-section .sec-h,
  .pg-bodywork .surface-callout-head,
  .pg-bodywork .surface-qualifier-head,
  .pg-bodywork .surface-callout-lead,
  .pg-bodywork .surface-place p,
  .pg-bodywork .surface-assess-head,
  .pg-bodywork .pg-faq .pg-h2 { text-align: center; }
  .pg-surface.pg-bodywork .surface-section .sec-h h2,
  .pg-surface.pg-bodywork .surface-section .sec-h p,
  .pg-bodywork .surface-answer,
  .pg-bodywork .surface-place p,
  .pg-bodywork .surface-note { margin-inline: auto; }
  /* The two actions stay on one row. Stacked they cost a whole button's height,
     and on the estimate card that was the difference between fitting a phone
     screen and running past the bottom of it. */
  .pg-bodywork .surface-actions { justify-content: center; flex-direction: row; flex-wrap: nowrap; }
  .pg-bodywork .surface-actions .btn {
    width: auto; flex: 1 1 0; min-width: 0; padding-inline: clamp(8px, 2.6vw, 18px);
    font-size:var(--t-fine); white-space: nowrap;
  }
  .pg-bodywork .surface-steps { gap: 14px; }
  .pg-bodywork .surface-steps li {
    padding: 24px 20px; gap: 10px; justify-items: center; text-align: center;
  }
  .pg-bodywork .surface-steps li::before {
    position: static; display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: var(--r-pill); background: var(--cobalt-soft); color: var(--cobalt);
    font-size:var(--t-body); letter-spacing: .04em;
  }
  .pg-bodywork .surface-step-mark { display: none; }
  .pg-bodywork .surface-steps b { margin-top: 2px; font-size:var(--t-body); }
  .pg-bodywork .surface-step-note { max-width: var(--measure-narrow); font-size:var(--t-body); line-height: 1.55; }
  /* the workshop pair sits two abreast, the same as every other pair here */
  .pg-bodywork .surface-proof-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pg-bodywork .surface-proof-grid .surface-photo,
  .pg-bodywork .surface-proof-grid .surface-photo + .surface-photo {
    width: 100%; height: clamp(110px, 30vw, 170px); margin-top: 0;
  }
  /* the estimate card, trimmed to a phone screen */
  .pg-bodywork .surface-callout { padding: clamp(20px, 5vw, 28px); }
  .pg-bodywork .surface-callout h2 { font-size: clamp(1.5rem, 6.6vw, 2rem); }
  .pg-bodywork .surface-callout .surface-answer { margin-top: 12px; font-size:var(--t-fine); line-height: 1.5; }
  /* The block centres, the lines do not: a marker to the left of centred text
     leaves three ragged rules down the middle of the card. */
  .pg-bodywork .surface-answer-list {
    gap: 6px; margin: 12px auto 0; width: fit-content; max-width: 100%; text-align: left;
  }
  .pg-bodywork .surface-answer-list li { font-size:var(--t-micro); line-height: 1.45; padding-left: 20px; }
  .pg-bodywork .surface-answer-list li::before { width: 6px; height: 6px; }
  .pg-bodywork .surface-callout-in { gap: 18px; }
  .pg-bodywork .surface-callout-side { gap: 14px; }
  .pg-bodywork .surface-ticket { padding: 4px 14px 14px; }
  .pg-bodywork .surface-ticket > div { padding-top: 10px; }
  .pg-bodywork .surface-ticket > div + div { margin-top: 10px; }
  .pg-bodywork .surface-ticket dd { margin-top: 5px; font-size:var(--t-micro); line-height: 1.45; }
  .pg-bodywork .surface-callout .surface-note { font-size:var(--t-micro); }
  .pg-bodywork .surface-damage-body { text-align: center; align-items: center; }

  /* The questions stack under their heading rather than beside it, and the
     heading block unsticks - stuck, it rode down over the list it labels. */
  .pg-bodywork .pg-faq > .wrap { grid-template-columns: minmax(0, 1fr); }
  .pg-bodywork .pg-faq > .wrap > .sec-h { position: static; text-align: center; }
  .pg-bodywork .pg-faq .pg-h2 { max-width: none; margin-inline: auto; }
  .pg-bodywork .pg-faq .sec-h p { max-width: none; margin-inline: auto; }
  .pg-bodywork .pg-faq .sec-h .surface-actions { justify-content: center; flex-wrap: wrap; }
  .pg-bodywork .pg-faq .surface-actions .btn { white-space: normal; min-width: min(100%, 12em); }
  /* the inset second photograph squares up when the pair is the page width */
  .pg-bodywork .surface-proof-grid .surface-photo + .surface-photo { width: 100%; }
  .pg-bodywork .faq summary { padding-right: 60px; }
  .pg-bodywork .faq-a { padding-right: 0; }
  /* The footer is the one block on this page that does not centre on a phone.
     It is the same footer as every other page and reads as a directory, not as
     a closing statement; centred, its columns lost the left edge you scan. */
}

@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; }
}

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

/* ---------- area hero on a phone -----------------------------------------
   The same three corrections the service hero took, applied to the family that
   sits beside it: 961px of an 800px screen came from a three-button stack and a
   route card at desktop metrics. The card is the reason someone is on an area
   page, so it stays; it is the padding around it that goes. */

/* ---------- cards that read as cards -------------------------------------
   Most of what is interactive on these pages was a line of text with a hairline
   under it: related work, the intent grid, the service catalogue. They are the
   things a visitor is meant to press, so each gets a container, a border that
   answers on hover, and a chevron that says where it goes. */
.rel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rel-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rel-card {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: clamp(16px, 1.8vw, 22px) clamp(38px, 3.4vw, 44px) clamp(17px, 1.9vw, 22px) clamp(16px, 1.9vw, 24px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--soft-sm);
  transition: transform .25s var(--ease-out), border-color .25s, box-shadow .25s;
}
/* beside the text and centred on it, the way the catalogue rows read: on a phone a
   chevron under the copy took a line of its own and looked like a stray mark */
.rel-card::after {
  content: ""; position: absolute; right: clamp(16px, 1.7vw, 20px); top: 50%;
  width: 9px; height: 9px; border-right: 2px solid var(--cobalt); border-bottom: 2px solid var(--cobalt);
  transform: translateY(-50%) rotate(-45deg); transition: transform .25s var(--ease-out);
}
.rel-card:hover {
  transform: translateY(-3px); border-color: color-mix(in srgb, var(--cobalt) 40%, var(--line));
  box-shadow: var(--soft);
}
.rel-card:hover::after { transform: translateY(-50%) translateX(3px) rotate(-45deg); }
.rel-card b {font-family:var(--font-sans);font-weight: 800;font-size: clamp(.98rem, .94rem + .22vw, 1.08rem);letter-spacing: -.024em;color: var(--ink)}
.rel-card:hover b { color: var(--cobalt); }
.rel-card span { font-size:var(--t-fine); line-height: 1.5; color: var(--ink2); }

/* The intent cards do not carry a number. The counter used to be written into
   ::before, which on a .glass card is the pointer spotlight overlay: the overlay kept
   its inset and gained the text, so every card drew a stretched box with 01 in it. The
   number was decoration, so it goes rather than moving to a third pseudo-element. */
/* titles align at the top: bottom-aligned, a one-line description dropped its title
   twenty pixels below the others and the row read as a mistake */
/* The ring is 30px at right: 16-20px, so it needs ~52px of clearance. The
   inherited .rel-card padding cleared the old 9px chevron and no more, which
   left "...MOT and" touching the ring on the first card. */
.surface-intent-grid .rel-card { min-height: 152px; padding-right: clamp(56px, 4.4vw, 66px); }

/* the catalogue: pressable rows, each one closed on all four sides */
.surface-catalogue {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; border-top: 0;
}
.surface-link {
  display: grid; gap: 4px; min-height: 76px; align-content: start;
  padding: 14px 38px 15px 16px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--soft-sm); position: relative;
  transition: transform .2s var(--ease-out), border-color .2s, box-shadow .2s, color .2s;
}
.surface-link::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--ink3); border-bottom: 2px solid var(--ink3);
  transform: translateY(-50%) rotate(-45deg); opacity: .75;
  transition: opacity .2s, transform .2s var(--ease-out), border-color .2s;
}
.surface-link:hover {
  transform: translateY(-2px); border-color: color-mix(in srgb, var(--cobalt) 40%, var(--line));
  box-shadow: var(--soft);
}
.surface-link:hover::after {
  opacity: 1; border-color: var(--cobalt); transform: translateY(-50%) translateX(3px) rotate(-45deg);
}
.surface-link--secondary { min-height: 56px; padding-block: 12px; }

/* the free-MOT line is an offer, so it sits in the accent rather than beside it */
.surface-free {
  display: block; max-width: 760px; margin: clamp(24px, 3.4vw, 38px) 0 0;
  padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 26px);
  background: var(--cobalt-soft); border: 1px solid rgba(30, 86, 224, .2);
  border-left: 4px solid var(--cobalt); border-radius: var(--r-lg);
  color: var(--ink2); font-size:var(--t-body); line-height: 1.6;
}

/* What a service includes: a rail card, on the same white surface and radius as
   the fact card below it rather than a grey block inside the prose. */
.pg-includes {
  margin: 0; padding: clamp(16px, 1.9vw, 22px) clamp(16px, 2vw, 24px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--soft-sm);
}
.pg-includes .checks { gap: 11px; }
/* The tick sits in the same tinted slot the catalogue marks use, so a check on a
   service page and a mark on the hub read as one vocabulary. */
.pg-includes .checks .ck {
  width: 26px; height: 26px; border-radius: var(--r-md);
  background: var(--cobalt-soft); color: var(--cobalt);
}
.pg-includes .checks .ck svg { width: 15px; height: 15px; }
.pg-includes h2 {font-family:var(--font-sans);font-size:var(--t-micro);letter-spacing: .14em;text-transform: uppercase;color: var(--ink3);font-weight:700;margin: 0 0 14px}
.pg-includes .checks { gap: 10px; }
.pg-includes .checks li { font-size:var(--t-fine); color: var(--ink2); }

/* ---------- the accordion answers when you touch it ----------------------
   It was a white box with a chevron floating in it. The row lifts on hover, the
   marker sits on a target of its own, and an open question keeps a cobalt head
   so it is obvious which one is open. */
.faq { transition: border-color .2s, box-shadow .2s; }
.faq:hover { border-color: color-mix(in srgb, var(--cobalt) 34%, var(--line)); box-shadow: var(--soft); }
.faq[open] { border-color: color-mix(in srgb, var(--cobalt) 42%, var(--line)); box-shadow: var(--soft); }
.faq[open] summary { background: var(--cobalt-soft); color: var(--cobalt); }
.faq summary { transition: background .2s, color .2s; }
.faq summary::before {
  content: ""; position: absolute; right: var(--faq-inset); top: 50%; transform: translateY(-50%);
  box-sizing: border-box; width: var(--faq-mark); height: var(--faq-mark); border-radius: var(--r-pill);
  background: var(--cobalt-soft); border: 1px solid rgba(30, 86, 224, .18);
  transition: background .2s, border-color .2s;
}
.faq[open] summary::before { background: #fff; border-color: rgba(30, 86, 224, .3); }
.faq-a { border-top: 1px solid var(--line); padding: 16px 0 22px; margin: 0 clamp(16px, 2vw, 24px); }

@media (max-width: 980px) {
  .rel-grid, .rel-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .surface-catalogue { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .rel-grid, .rel-grid.three, .surface-catalogue { grid-template-columns: 1fr; }
  .surface-intent-grid .rel-card { min-height: 108px; }
  .surface-board-list { gap: 10px; }
  .faq summary { padding: 16px 60px 16px 18px; font-size:var(--t-fine); }
  .faq-a { margin-inline: 18px; }
}

/* ---------- the editorial head on a phone -------------------------------- */
@media (max-width: 760px) {

  /* Company/error heroes keep their existing band sizing. */
  .ph-company .ph-band { flex: 1 1 0; height: auto; min-height: 128px; margin-top: 16px; overflow: hidden; }
}

@media (max-width: 760px) and (max-height: 720px) {
  .ph-company .ph-band { min-height: 96px; margin-top: 12px; }
}
@media (max-width: 760px) and (max-height: 600px) {
  .ph-company .ph-band { min-height: 72px; margin-top: 10px; }
}

/* Three readable facts below the image, without card backgrounds or shadows. */

/* Short screens spend height on readable copy, not oversized headings or gaps. */

/* A landscape phone gets a compact, still touch-sized navigation and puts the
   quote beside the introduction. The photo and facts remain separate rows. */
@media (min-width: 568px) and (max-height: 500px) {
  body.pg-surface .nav,body.pg-service .nav { top: 8px; margin-top: 8px; }
  body.pg-surface .nav-in,body.pg-service .nav-in { height: auto; min-height: 50px; padding-block: 2px; }

}

/* A 320px-tall landscape viewport cannot hold a useful photograph as well as
   readable copy, facts and touch targets. Keep all the text and collapse only it. */

/* ==========================================================================
   1b. Services: the page's second beginning, and marks on what you press.

   The hero finished on white and the price board started on white, with only
   the facts strip's hairline between them, so the most important section on
   the page began with nothing. A dot field starts above the section, washes
   over that hairline and is gone well before the section ends, so the page is
   plain white again by the time the intent slab arrives. No wash of colour sits
   under it: the heading is the only thing that should carry weight up here.

   The board itself is one screen. The heading moved into the price column, so
   the two photographs beside it now run the full height of heading, prices and
   the free-MOT line together rather than stopping level with three cards.
   ========================================================================== */
/* z-index 0, not -1: site.css paints the whole page ground on a fixed .mesh
   layer at z-index 0, and anything behind that is simply not on the page. The
   intent slab below solves the same problem the same way — decoration at 0,
   content lifted to 1 — so the facts strip the field passes under is lifted
   too, which is what lets the field start above the section and soften the
   hairline under the hero rather than beginning below it. */
.pg-services .surface-prices > .wrap { position: relative; z-index: 1; }
/* The seam's own dot field is gone: the ground now carries one everywhere
   (--dot-field in site.css). A second, section-bound grid scrolling over the
   fixed one beat against it. What stays here is the rise/drop the facts strip
   is lifted over. */
/* One screen for the whole board, from the eyebrow to the qualification. The
   section is centred in the viewport rather than stretched to it, so a tall
   monitor gives the block air instead of 700px photographs. */
@media (min-width: 981px) {
  .pg-services .surface-prices {
    display: grid; align-content: center; min-height: 100dvh;
    padding-block: clamp(28px, 4.4vh, 68px);
  }
  .pg-services .surface-prices > .wrap { width: 100%; }

  /* the offer line keeps the board's vertical budget rather than the page's */
  .pg-services .surface-prices .surface-free { padding-block: clamp(12px, 1.7vh, 18px); }
}
.pg-services .surface-prices .sec-h { margin-bottom: clamp(16px, 2.8vh, 30px); }
.surface-board { align-items: stretch; }
.surface-board-main { display: flex; flex-direction: column; min-width: 0; }
/* The photographs take the column's full height, split evenly, so they end
   level with the free-MOT line rather than with the third price. They are laid
   out absolutely so the pair contributes no intrinsic height of its own: give
   them rows and the column's height depends on the images while the images
   depend on the column, and the browser resolves that cycle at natural size. */
@media (min-width: 981px) {
  .surface-board-media { position: relative; min-height: 300px; }
  .surface-board-media .surface-photo {
    position: absolute; left: 0; right: 0; height: calc(50% - 7px);
  }
  .surface-board-media .surface-photo:first-child { top: 0; }
  .surface-board-media .surface-photo:last-child { bottom: 0; }
}
.pg-services .surface-note { max-width: 104ch; }

/* ---------- the prices as rows -------------------------------------------
   Three stacked cards were 470px of a section that has to finish inside one
   screen. As rows — mark, work, note, then the number — they are the same
   three cards at half the height, and the number lands in one column where a
   customer compares it. The full service carries the accent because the free
   MOT hangs off it, which is the whole reason the board leads the page. */
.surface-board-list { gap: clamp(8px, 1.3vh, 14px); }
.surface-board-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto; align-items: center;
  column-gap: clamp(12px, 1.4vw, 18px); row-gap: 2px;
  padding: clamp(11px, 1.5vh, 17px) clamp(15px, 1.8vw, 22px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--soft-sm);
  transition: transform .25s var(--ease-out), border-color .25s, box-shadow .25s;
}
.surface-board-item:hover {
  transform: translateY(-2px); border-color: color-mix(in srgb, var(--cobalt) 34%, var(--line));
  box-shadow: var(--soft);
}
.surface-board-ic {
  grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center;
  width: clamp(36px, 4.4vh, 46px); aspect-ratio: 1; border-radius: var(--r-lg);
  background: var(--cobalt-soft); color: var(--cobalt);
}
.surface-board-ic .surface-ic { width: 56%; height: 56%; }
.surface-board-item dt { grid-column: 2; grid-row: 1; align-self: end; }
.surface-board-item > dd { grid-column: 3; grid-row: 1 / span 2; text-align: right; }
.surface-board-item > .surface-board-note {
  grid-column: 2; grid-row: 2; align-self: start; text-align: left;
}
.surface-board-item--lead { border-color: color-mix(in srgb, var(--gold) 52%, var(--line)); }
.surface-board-item--lead .surface-board-ic {
  background: color-mix(in srgb, var(--gold) 18%, transparent); color: #7A5300;
}
.surface-board-item--lead:hover { border-color: var(--gold); }
.surface-free { margin-top: clamp(16px, 2.6vh, 32px); }

/* ---------- marks on the cards -------------------------------------------
   The homepage already draws service icons: 24x24, no fill, a 1.5 stroke in
   currentColor. These are the same hand, so a services card and a homepage
   service tile read as one set. They are decorative — the card's own words
   name the link — so they carry aria-hidden and no title. */
.surface-ic { display: block; flex: none; width: 22px; height: 22px; }
.surface-link {
  grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: 12px; row-gap: 4px; padding-left: 15px;
}
/* The mark sits on a tinted slot, the same one the price rows use: at 22px on
   the card's own ground it read as a smudge beside the title rather than as
   part of the card. */
.surface-link > .surface-ic {
  grid-column: 1; grid-row: 1 / span 2; align-self: start; box-sizing: border-box;
  width: 34px; height: 34px; padding: 6px; border-radius: var(--r-md);
  background: var(--cobalt-soft); color: var(--cobalt);
  transition: background .2s, color .2s;
}
.surface-link > b { grid-column: 2; grid-row: 1; }
.surface-link > span { grid-column: 2; grid-row: 2; }
.surface-link:hover > .surface-ic { background: color-mix(in srgb, var(--cobalt) 16%, transparent); }
.surface-link--secondary > .surface-ic {
  grid-row: 1; align-self: center; width: 28px; height: 28px; padding: 5px;
}
/* On the navy slab the marks take the gold the intent cards already answer in. */
/* The mark sits on the title's line, not above it: stacked, it pushed the four
   titles down a row and the card read as an icon with a caption. Positions are
   assigned explicitly rather than left to auto-placement, the same way the
   catalogue rows are. The summary spans both columns so it keeps the card's
   full measure instead of indenting under the title. */
.surface-intent-grid .rel-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
  align-content: start; column-gap: 10px; row-gap: 6px;
}
/* Written at .surface-intents .surface-intent-grid, not .surface-intent-grid:
   the slab's section also carries .pg-related, so the subpage rule for related
   cards (.pg .rel-card > .surface-ic) matches these marks at the same
   specificity and, being later in the file, was recolouring them cobalt. This
   wins on specificity rather than on order. */
.surface-intents .surface-intent-grid .rel-card > .surface-ic {
  grid-column: 1; grid-row: 1; align-self: center; margin-bottom: 0; box-sizing: border-box;
  width: 32px; height: 32px; padding: 6px; border-radius: var(--r-md);
  background: rgba(232, 163, 23, .18); border: 0;
  color: var(--gold); transition: background .25s;
}
.surface-intents .surface-intent-grid .rel-card:hover > .surface-ic {
  background: rgba(232, 163, 23, .3);
}
.surface-intent-grid .rel-card > b { grid-column: 2; grid-row: 1; align-self: center; }
.surface-intent-grid .rel-card > span { grid-column: 1 / -1; grid-row: 2; }

/* ---------- the brand pressed into the closing panel ---------------------
   Every surface ends on the same dark panel with its right-hand half empty.
   The initials are debossed into that ground rather than printed on it: the
   fill is darker than the panel and the only light is a hairline under the
   letterforms, which is what reads as depth. Decorative, and behind both the
   arc and the copy. */
.surface-guidance, .surface-enquiry { overflow: hidden; }
.surface-mark {
  position: absolute; z-index: 0; right: clamp(14px, 3.4vw, 64px); top: 50%; pointer-events: none;
  transform: translateY(-48%) rotate(-8deg); transform-origin: 100% 50%;
  font: 800 clamp(104px, 16.5vw, 248px)/.78 var(--font-sans); letter-spacing: -.055em;
  color: rgba(5, 16, 42, .5); text-shadow: 0 2px 0 rgba(255, 255, 255, .075);
  -webkit-user-select: none; user-select: none;
}

@media (max-width: 980px) {
  .surface-board-media .surface-photo { height: clamp(132px, 22vw, 200px); }
}
@media (max-width: 620px) {
  .surface-board-item { column-gap: 12px; padding: 13px 15px; }
  .surface-board-ic { width: 34px; }
  /* stacked, the number belongs under the work it prices, not under the note */
  .surface-board-item { grid-template-columns: auto minmax(0, 1fr); }
  .surface-board-item dt { grid-row: 1; align-self: center; }
  .surface-board-item > dd { grid-column: 2; grid-row: 2; text-align: left; }
  .surface-board-item > .surface-board-note { grid-row: 3; }
  .surface-board-ic { grid-row: 1 / span 3; align-self: start; }
  .surface-mark { font-size: 116px; right: 10px; opacity: .85; }
}

@media (prefers-reduced-motion: reduce) {
  .surface-board-item { transition: none; }
  .surface-board-item:hover { transform: none; }
}

/* ==========================================================================
   The service, area and brand subpages take the hub's vocabulary.

   These pages share a renderer with the six hubs but had drifted away from
   them: raw --t-* headings, a bare tick list, related cards with no marks, and
   a closing band still at homepage display size. The shapes below are the same
   objects the hub uses, so a service page and the services hub read as one
   site rather than two templates.
   ========================================================================== */

/* The marks on a related card sit on the same tinted slot as the catalogue
   rows on the hub, not bare on the card ground. */
.pg .rel-card > .surface-ic {
  box-sizing: border-box; width: 34px; height: 34px; padding: 6px;
  border-radius: var(--r-md); background: var(--cobalt-soft); color: var(--cobalt);
  margin-bottom: 4px; transition: background .2s;
}
.pg .rel-card:hover > .surface-ic { background: color-mix(in srgb, var(--cobalt) 16%, transparent); }

/* The lead line states the price or the offer, which is the same job the hub's
   free-MOT line does, so it takes the same cobalt surface and accent edge
   rather than reading as a plain white box. */
.pg-service .prose-lead, .pg-area .prose-lead, .pg-brand .prose-lead {
  background: var(--cobalt-soft); border-color: rgba(30, 86, 224, .2);
  border-left: 4px solid var(--cobalt); box-shadow: none; color: var(--ink2);
}
.pg-service .prose-lead strong, .pg-service .prose-lead b { color: var(--ink); }

/* The rail's proof list uses the slot the includes card above it uses. */
.pg-aside .fact-checks .ck {
  width: 26px; height: 26px; border-radius: var(--r-md);
  background: var(--cobalt-soft); color: var(--cobalt);
}
.pg-aside .fact-checks .ck svg { width: 15px; height: 15px; }

/* The closing band is lifted from the homepage, where its heading is the page's
   display step. On a subpage it is the last of several sections and was landing
   at twice the size of every heading above it. */
.pg .pg-contact .sec-h h2 { font-size: var(--h2-lead); line-height: 1.14; }
.pg .pg-contact .sec-h p { font-size: var(--lead); }

/* The recovery note is written for the homepage's contact band, where #contact
   restyles .reach as a 7%-white card on navy and white text is correct. On an
   inner page .pg-contact has no dark ground, so .reach is its default solid
   white card and the note was white on white — 1.00 contrast, invisible. */
.pg .reach-recover { border-top-color: var(--line); }
.pg .reach-recover p { color: var(--ink2); }
.pg .reach-recover b { color: var(--ink); }
.pg .reach-recover svg { color: var(--cobalt); }

/* ---- the photograph gets the hero's spare vertical space ------------------
   The band is whatever the first viewport has left after the copy, the gaps and
   the facts, so every pixel taken out of those three is a pixel of photograph on
   every page at once. The lead-in above the copy, the gap over the band and the
   padding around the facts were all set for a page whose hero was mostly type.
   Tightened here only where there is room to spend: a landscape phone needs
   every one of them back. */

/* The copy block reserves the tallest height in the family, so the photograph is
   the same size on every page instead of being whatever the headline left over.
   Both values are measured, not guessed, and both carry the height guard: a
   landscape phone is 844px wide and 390px tall, and a reserve this size there
   pushes the intro past the first viewport. */
/* Every hero holds two rows of headline and two lines of introduction, whatever
   the page is called. Fixing the copy block is what lets the photograph be the
   same size everywhere, and at two rows rather than three it is the car-makes
   height — the biggest in the family — rather than fleet's worst case.
   The measures do the work: 32ch keeps the longest title to two rows, and the
   introduction is widened so the two longest do not run to three lines. */

/* ==========================================================================
   7. About: who the garage is. The other six surfaces answer what the work
   is; this one has to answer who does it, so the band is the three premises
   and the pivotal section is three pledges rather than three products.
   ========================================================================== */

/* ---------- the band as a triptych ---------------------------------------
   The company head used to crop one photograph of the reception wall, which cut
   the top and bottom frame off it and left the middle of a picture of three
   pictures. The three frames are laid side by side instead.

   It is still the family's band, not a row of cards, and that distinction is
   the whole of this block. Every other hero closes on one photograph that runs
   edge to edge, fills whatever height the copy leaves, and carries a single
   sweep across its bottom. So do these three: a hairline seam rather than
   gutters, each pane filled by its photograph rather than fitted inside it, and
   the sweep on the band so it crosses all three as one curve. Fitted panes with
   gaps between them were tried, and the page stopped reading as a sibling of
   /services the moment the two were put side by side.
   -------------------------------------------------------------------------- */

/* ---------- the origin, on the page's first dark band -------------------
   Every dark section here follows the rule the bodywork surface set out: it
   paints its ground on a clipped ::before carrying a workshop photograph under
   the shared veil, so it never meets the light section above or below it on a
   straight horizontal line. This one shears down to the right; the pledges band
   shears the other way, and the closing panel is notched to a point, so the
   three read as a set rather than as one trick repeated.
   -------------------------------------------------------------------------- */
/* Reserve the whole shear before the clear space, including below the portrait.
   Padding grows the background instead of cropping or shrinking its content. */
.pg-about .surface-section.surface-origin {
  --band-pad: calc(var(--band-cut) + var(--sec-lead) * .75);
  position: relative; isolation: isolate; border: 0; background: transparent; color: #fff;
  padding-top: var(--band-pad); padding-bottom: var(--band-pad);
}
.pg-about .surface-origin::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    var(--band-veil),
    url("photos/wide-rays.webp") center 42% / cover no-repeat,
    #0A1730;
  /* Angled at both ends, like the damage slab: low on the left and rising to
     the right across the top, and the same slope again underneath. */
  clip-path: polygon(0 var(--band-cut), 100% 0, 100% calc(100% - var(--band-cut)), 0 100%);
}
.pg-about .surface-origin > .wrap { position: relative; z-index: 2; }
.surface-origin-in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, .58fr);
  gap: clamp(32px, 6vw, 76px); align-items: center;
}
.surface-origin .ey { color: #A9C1FF; }
.surface-origin h2 { margin-top: 14px; color: #fff; }
.surface-origin .surface-answer { margin-top: 18px; color: rgba(255, 255, 255, .82); }
.surface-origin-media { position: relative; z-index: 2; }
/* The portrait is the only tall photograph on the page and it is of a person,
   so it keeps its own aspect rather than being cropped to a band's strip. */
.surface-origin-media .surface-photo {
  height: clamp(300px, 34vw, 470px); border-radius: var(--r-xl);
  box-shadow: 0 26px 70px -24px rgba(0, 0, 0, .8);
}
.surface-origin :focus-visible { outline-color: var(--gold); }

/* ---------- what is on site ----------------------------------------------
   Six cards on the page's own ground. This was a three-column ledger, and the
   descriptions here are whole sentences: in the ledger they wrapped four words
   to a line in a middle column while the fact beside them fought for the same
   space, and the section carried an opaque --bg2 that switched the dot field
   off for the length of it. Nothing paints a ground here now, so the mesh runs
   through the section the way it does on every other light one.
   -------------------------------------------------------------------------- */
.pg-about .surface-section.surface-workshop {
  background: transparent; border-bottom: 0;
  padding-block: calc(var(--sec-base) * 1.15);
}
.pg-about .surface-section.surface-scope { padding-block: calc(var(--sec-tight) * 1.15); }

/* ---------- the statement card, on either ground ------------------------
   One object for both of this page's grids. It is light here and dark on the
   pledges band below, which is a change of ground rather than a second
   component — the same way .surface-intents restyles .rel-card rather than
   introducing a card of its own.
   -------------------------------------------------------------------------- */
.surface-card-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px);
}
.surface-card {
  display: grid; align-content: start; gap: 8px;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--soft-sm);
}
.surface-card-ic {
  display: inline-flex; box-sizing: border-box; width: 36px; height: 36px; padding: 7px;
  border-radius: var(--r-md); background: var(--cobalt-soft); color: var(--cobalt);
}
.surface-card-ic .surface-ic { width: 100%; height: 100%; }
/* The fact a reader checks, above the name rather than in a column of its own. */
.surface-card-tag {
  font: 700 .66rem/1.4 var(--font-sans); letter-spacing: .12em;
  text-transform: uppercase; color: var(--cobalt);
}
.surface-card b { font-size: var(--h3); letter-spacing: -.02em; color: var(--ink); }
.surface-card > span:last-child {
  font-size: var(--t-fine); line-height: 1.55; color: var(--ink2);
}

/* ---------- the pledges (dark, sheared) ---------------------------------
   The page's pivotal moment, and the middle of its three dark bands. It takes
   the shear the services chooser takes, opposed to the origin band above it,
   and the cards on it are statements rather than links: no chevron, no hover
   lift, nothing that reads as pressable.
   -------------------------------------------------------------------------- */
.surface-pledges {
  position: relative; isolation: isolate; border: 0; background: transparent;
}
.pg-about .surface-section.surface-pledges {
  padding-block: calc(var(--band-cut) + var(--sec-base) * 1.15);
}
.surface-pledges::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    var(--band-veil-soft),
    url("photos/wide-busy.webp") center 45% / cover no-repeat,
    #0A1730;
  clip-path: polygon(0 0, 100% var(--band-cut), 100% 100%, 0 calc(100% - var(--band-cut)));
}
.surface-pledges > .wrap { position: relative; z-index: 2; }
.surface-pledges .sec-h h2 { color: #fff; }
.surface-pledges .sec-h p { color: rgba(255, 255, 255, .9); }
.surface-pledges .sec-h .ey { color: #9DBBFF; }
.surface-pledges :focus-visible { outline-color: var(--gold); }
/* The same card, on glass, because the ground changed and the object did not. */
.surface-pledges .surface-card {
  border-color: rgba(255, 255, 255, .22);
  background: linear-gradient(158deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .045) 64%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 22px 44px -30px rgba(2, 10, 30, .9);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}
.surface-pledges .surface-card-ic { background: rgba(255, 255, 255, .14); color: var(--gold); }
.surface-pledges .surface-card b { color: #fff; }
.surface-pledges .surface-card > span:last-child { color: rgba(255, 255, 255, .78); }

/* ---------- the closing panel, notched to a point -----------------------
   The third dark band. The shared .surface-enquiry rule fades into the footer
   because on the other surfaces that is what it meets; here it takes a ground
   of its own on the same terms as the two above it, and keeps the fade.
   -------------------------------------------------------------------------- */
.pg-about .surface-section.surface-enquiry {
  --band-pad: calc(var(--band-cut) + var(--sec-base));
  position: relative; isolation: isolate; background: transparent;
  padding-top: var(--band-pad); padding-bottom: calc(var(--sec-base) * 1.15);
}
.pg-about .surface-enquiry::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(14, 35, 77, 0) 62%, #0E234D 97%),
    var(--band-veil),
    url("photos/exterior-front.webp") center 46% / cover no-repeat,
    #0A1730;
  clip-path: polygon(0 0, 50% var(--band-cut), 100% 0, 100% 100%, 0 100%);
}
.pg-about .surface-enquiry > .wrap { position: relative; z-index: 3; }
/* Back the fractional polygon/rectangle join with the same navy. A paint-only
   overlap prevents a one-pixel light seam without moving either section. */
.pg-about footer { box-shadow: 0 -2px #0E234D; }
/* On a photographic ground the mark is one texture too many at full strength. */
.pg-about .surface-enquiry .surface-mark { background: rgba(255, 255, 255, .035); }

/* ---------- the facts strip points at the customer count ----------------
   Emphasis only: the hero strip's markup is shared by all thirty-six editorial
   heroes and is fixed. Fifty years of customers is the fact this page exists to
   state, so it takes the accent the bodywork and makes surfaces give theirs.
   -------------------------------------------------------------------------- */

/* ---------- responsive -------------------------------------------------- */
@media (max-width: 760px) {
  /* Keep the shared phone rhythm before adding space; --sec-base alone would
     reduce the padding at the wider end of this tier. */
  .pg-about .surface-section.surface-workshop { padding-block: calc(clamp(44px, 12vw, 68px) * 1.15); }
  .pg-about .surface-section.surface-enquiry { padding-bottom: calc(clamp(44px, 12vw, 68px) * 1.15); }
}
@media (max-width: 1000px) {
  .surface-origin-in { grid-template-columns: 1fr; }
  .surface-origin-media .surface-photo { height: clamp(240px, 46vw, 340px); }
  .surface-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .surface-card-grid { grid-template-columns: 1fr; }
  /* One row at every width, the same override the bodywork band takes: the
     shared strip stacks below 760px, which turned three short figures into
     three full-width blocks and pushed the portrait most of a screen down. */
  .surface-origin .surface-facts, .surface-capability .surface-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(255, 255, 255, .2); }
  .surface-origin .surface-facts > div, .surface-capability .surface-facts > div { padding: 16px 10px 0 0; border-top: 0; }
  .surface-origin .surface-facts dt, .surface-capability .surface-facts dt { font-size: clamp(1.3rem, 6vw, 1.9rem); }
  .surface-origin .surface-facts dd, .surface-capability .surface-facts dd { margin-top: 6px; font-size: .56rem; }
}

/* Three across stops being worth looking at once a pane is taller than it is
   wide: at 390px a third of the band is 126px against a band three times as
   deep, and each pane becomes a vertical sliver of fence or signage. Stacked,
   each premises keeps the full width of the screen and is cropped in the
   direction a shopfront has room to spare — still one band, with the seam a
   hairline and the sweep on the band rather than on each strip.

   The condition is the pane's shape, not the screen's width, which is why the
   second query is here: a portrait tablet is wider than the 760px the homepage
   timeline stacks at, but 768x1024 leaves a 467px band in 250px panes, which is
   a worse sliver than any phone. Portrait and under 900px covers the tablets;
   the same widths in landscape keep the row, where the band is shallow enough
   for it. */

/* Too short to caption: the band collapses towards 48px, where a caption is a
   line of type with no photograph left above it. */

/* The shortest landscape tier collapses the band to nothing. The panes follow it
   on their own — they are sized from the band. The seam does not: three
   zero-height rows still separated by 2px put the last two panes below a band
   that is no longer there. */


/* ==========================================================================
   Fleet, centred. The hero is now the dark, photograph-led one, so the
   first section is light. Headings, introductions and notes sit on the page
   centre line; the capability photograph is a full-width band under its
   figures instead of a box hanging off the side.
   ========================================================================== */
.pg-fleet .surface-capability { background: var(--bg); color: var(--ink); text-align: center; padding-bottom: var(--sec); }
.pg-fleet .surface-capability-in { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(26px, 4vw, 44px); }
.pg-fleet .surface-capability .ey { color: var(--cobalt); }
.pg-fleet .surface-capability h2 { color: var(--ink); margin-inline: auto; max-width: 22ch; }
.pg-fleet .surface-capability p { color: var(--ink2); margin-inline: auto; max-width: 68ch; }
.pg-fleet .surface-capability .surface-facts { border-top-color: var(--line2); max-width: 760px; margin-inline: auto; }
.pg-fleet .surface-capability .surface-facts > div { padding: 22px 12px 0; }
.pg-fleet .surface-capability .surface-facts > div + div { border-left: 1px solid var(--line); }
.pg-fleet .surface-capability .surface-facts dt { color: var(--cobalt); }
.pg-fleet .surface-capability .surface-facts dd { color: var(--ink3); }
.pg-fleet .surface-capability-media { transform: none; width: min(100%, 1040px); }
.pg-fleet .surface-capability-media .surface-photo { height: clamp(220px, 30vw, 420px); width: 100%; object-fit: cover; object-position: 50% 45%; }
.pg-fleet .surface-capability :focus-visible { outline-color: var(--cobalt); }
.pg-fleet .surface-work { padding-top: var(--sec); }
.pg-fleet .surface-section .sec-h { text-align: center; margin-inline: auto; }
.pg-fleet .surface-section .sec-h h2 { margin-inline: auto; }
.pg-fleet .surface-section .sec-h p { margin-inline: auto; }
.pg-fleet .surface-section .surface-note { text-align: center; margin-inline: auto; max-width: 72ch; }
.pg-fleet .fleet-steps li { justify-items: center; text-align: center; }
.pg-fleet .fleet-steps::before { left: 12.5%; right: 12.5%; }
@media (max-width: 980px) {
  .pg-fleet .fleet-steps li { justify-items: start; text-align: left; }
}
@media (max-width: 760px) {
  .pg-fleet .surface-capability .surface-facts > div { padding: 16px 6px 0; }
}

/* The menu bar is the homepage's width on every page: from 1600px the
   homepage widens its column to 1440px, and the bar follows it everywhere. */
@media (min-width: 1600px) { body.pg .nav-in { max-width: 1440px; } }


/* ---------- Contact, the body: two columns per frame ------------------------
   The form frame was one narrow card floating on a full screen of navy. It
   now sits beside what happens after it is sent: the counter where enquiries
   are answered and the three steps to a booking. The visit frame puts the
   card and the map side by side at full height. */
.pg-contact-index .contact-next { display: none; }
@media (min-width: 980px) {
  .pg-surface.pg-contact-index .surface-form > .wrap.contact-form-in {
    display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px); align-items: center; justify-content: stretch;
  }
  .pg-contact-index .contact-form-in .fx { width: 100%; max-width: 640px; margin: 0; justify-self: end; }
  .pg-contact-index .contact-next { display: grid; gap: clamp(14px, 2dvh, 22px); color: var(--panel-fg); min-width: 0; }
  .pg-contact-index .contact-next-photo { margin: 0; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16 / 9;
    max-height: 30dvh; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
  .pg-contact-index .contact-next-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
  .pg-contact-index .contact-next h3 { margin: 0; font-size: clamp(1.3rem, 2vw, 1.8rem); letter-spacing: -.02em; color: #fff; }
  .pg-contact-index .contact-next-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(10px, 1.6dvh, 16px); counter-reset: next; }
  .pg-contact-index .contact-next-steps li { position: relative; display: grid; gap: 2px; padding-left: 48px; counter-increment: next; }
  .pg-contact-index .contact-next-steps li::before {
    content: counter(next); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 800; font-size: .9rem; color: var(--panel-b); background: var(--gold);
  }
  .pg-contact-index .contact-next-steps li:not(:last-child)::after {
    content: ""; position: absolute; left: 15px; top: 38px; bottom: calc(-1 * clamp(10px, 1.6dvh, 16px) + 4px); width: 2px;
    background: rgba(255, 255, 255, .2);
  }
  .pg-contact-index .contact-next-steps b { font-size: var(--t-body); color: #fff; }
  .pg-contact-index .contact-next-steps span { font-size: var(--t-fine); line-height: 1.45; color: var(--panel-sub); }
}
@media (min-width: 980px) and (max-height: 760px) {
  .pg-contact-index .contact-next-photo { display: none; }
}
@media (min-width: 980px) {
  .pg-contact-index .find-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 22px; align-items: stretch; }
  .pg-contact-index .mapembed { height: auto; min-height: min(56dvh, 520px); border-radius: var(--r-xl); }
}
@media (min-width: 980px) {
  .pg-contact-index .napcard { display: flex; flex-direction: column; }
  .pg-contact-index .surface-location-top { grid-template-columns: minmax(0, 1fr); }
  .pg-contact-index .find-grid .find-photo { order: 2; }
  .pg-contact-index .find-photo img { aspect-ratio: 16 / 7; width: 100%; object-fit: cover; }
  .pg-contact-index .nap-foot { margin-top: auto; }
}

/* ---------- shaped grounds on the inner pages --------------------------------
   The homepage keeps itself moving with shaped grounds that carry a workshop
   photograph faintly through them. The inner pages had the same sections on
   flat ground. Light bands: a sheared tint with a photograph on luminosity at
   the open side. Closing bands: navy under an arc, a photograph through the
   veil, fading into the footer. --band-photo picks the frame per family. */
body:is(.pg-service, .pg-area, .pg-brand) .pg-related,
.pg-services .surface-section.surface-directory,
.pg-brands-index .surface-section.surface-expertise,
.pg-areas-index .surface-section.surface-reach {
  --band-cut: clamp(24px, 4vw, 64px);
  position: relative; isolation: isolate;
}
body:is(.pg-service, .pg-area, .pg-brand) .pg-related { padding-block: calc(var(--sp-tight) + var(--band-cut)); }
body:is(.pg-service, .pg-area, .pg-brand) .pg-related::before,
.pg-services .surface-directory::before,
.pg-brands-index .surface-expertise::before,
.pg-areas-index .surface-reach::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    var(--band-photo, url("photos/wide-ramps.webp")) 70% 40% / cover no-repeat,
    var(--bg2);
  background-blend-mode: luminosity, normal;
  clip-path: polygon(0 var(--band-cut), 100% 0, 100% calc(100% - var(--band-cut)), 0 100%);
  opacity: .9;
}
.pg-services .surface-directory { --band-photo: url("photos/svc-tools.webp"); }
.pg-brands-index .surface-expertise { --band-photo: url("photos/wide-bonnets.webp"); }
.pg-areas-index .surface-reach { --band-photo: url("photos/exterior-wide.webp"); }
.pg-brand .pg-related { --band-photo: url("photos/wide-bonnets.webp"); }
.pg-area .pg-related { --band-photo: url("photos/exterior-wide.webp"); }
/* the photograph is seen through the tint, never under copy at full strength */
body:is(.pg-service, .pg-area, .pg-brand) .pg-related::after,
.pg-services .surface-directory::after,
.pg-brands-index .surface-expertise::after,
.pg-areas-index .surface-reach::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, var(--bg2) 40%, color-mix(in srgb, var(--bg2) 80%, transparent) 100%);
  clip-path: polygon(0 var(--band-cut), 100% 0, 100% calc(100% - var(--band-cut)), 0 100%);
}

body:is(.pg-service, .pg-area, .pg-brand) .pg-contact {
  --close-arc: clamp(40px, 6vw, 110px);
  position: relative; isolation: isolate; color: #fff;
  padding-block: calc(var(--sp-tight) + var(--close-arc)) var(--sp-wide);
}
body:is(.pg-service, .pg-area, .pg-brand) .pg-contact::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(14, 35, 77, 0) 60%, #0E234D 97%),
    var(--panel-veil), var(--close-photo, url("photos/wide-busy.webp")) center 45% / cover no-repeat, var(--panel-b);
  -webkit-mask: radial-gradient(75% var(--close-arc) at 50% var(--close-arc), #000 99%, transparent 100%) top / 100% calc(var(--close-arc) + 1px) no-repeat,
                linear-gradient(#000, #000) 0 var(--close-arc) / 100% 100% no-repeat;
          mask: radial-gradient(75% var(--close-arc) at 50% var(--close-arc), #000 99%, transparent 100%) top / 100% calc(var(--close-arc) + 1px) no-repeat,
                linear-gradient(#000, #000) 0 var(--close-arc) / 100% 100% no-repeat;
}
.pg-area .pg-contact { --close-photo: url("photos/exterior-wide.webp"); }
.pg-brand .pg-contact { --close-photo: url("photos/wide-back.webp"); }
body:is(.pg-service, .pg-area, .pg-brand) .pg-contact .sec-h h2 { color: #fff; }
body:is(.pg-service, .pg-area, .pg-brand) .pg-contact .sec-h p { color: rgba(255, 255, 255, .82); }
body:is(.pg-service, .pg-area, .pg-brand) .pg-contact .reach { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55); }

/* ---------- Bodywork, the body ------------------------------------------------
   The estimate card carries the paint shop down its left edge and its three
   facts on a ticket stub. The damage band is one desktop screen: what we
   assess on the left, the four photographed jobs as a captioned mosaic on the
   right. The five steps run as a track, with the agreement step marked as the
   gate nothing passes without. */
.pg-bodywork .surface-callout { max-width: 1220px; padding: 0; }
.pg-bodywork .surface-callout-in {
  grid-template-columns: minmax(0, .34fr) minmax(0, 1fr) minmax(250px, .62fr);
  gap: 0; align-items: stretch;
}
.pg-bodywork .surface-callout-photo { position: relative; margin: 0; min-height: 100%; overflow: hidden; }
.pg-bodywork .surface-callout-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.pg-bodywork .surface-callout-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, rgba(11,29,62,.9)); }
.pg-bodywork .surface-callout-lead { padding: clamp(28px, 3.4vw, 52px) clamp(22px, 3vw, 44px); }
.pg-bodywork .surface-callout-side {
  position: relative; padding: clamp(28px, 3.4vw, 52px) clamp(22px, 2.6vw, 40px);
  background: rgba(255, 255, 255, .06); border-left: 2px dashed rgba(255, 255, 255, .22);
}
/* the stub's punched notches, top and bottom of the perforation */
.pg-bodywork .surface-callout-side::before, .pg-bodywork .surface-callout-side::after {
  content: ""; position: absolute; left: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--bg);
}
.pg-bodywork .surface-callout-side::before { top: -12px; }
.pg-bodywork .surface-callout-side::after { bottom: -12px; }
.pg-bodywork .surface-ticket { background: none; border-left: 0; padding: 0; }
@media (max-width: 980px) {
  .pg-bodywork .surface-callout-in { grid-template-columns: minmax(0, 1fr); }
  .pg-bodywork .surface-callout-photo { min-height: 0; aspect-ratio: 16 / 8; }
  .pg-bodywork .surface-callout-photo::after { background: linear-gradient(180deg, transparent 50%, rgba(11,29,62,.9)); }
  .pg-bodywork .surface-callout-side { border-left: 0; border-top: 2px dashed rgba(255, 255, 255, .22); }
  .pg-bodywork .surface-callout-side::before { top: -13px; left: -12px; }
  .pg-bodywork .surface-callout-side::after { top: -13px; bottom: auto; left: auto; right: -12px; }
}

/* the damage band */
.pg-bodywork .surface-damage { position: relative; display: block; overflow: hidden; border-radius: var(--r-xl); }
.pg-bodywork .surface-damage-media { height: clamp(180px, 22vw, 300px); border-radius: var(--r-xl); }
.pg-bodywork .surface-damage-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.pg-bodywork .surface-damage:hover .surface-damage-media img { transform: scale(1.05); }
.pg-bodywork .surface-damage-body {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px;
  background: linear-gradient(0deg, rgba(6, 14, 30, .92), rgba(6, 14, 30, 0));
}
.pg-bodywork .surface-repairs .surface-damage-body b { color: #fff; font-size: var(--t-body); }
.pg-bodywork .surface-repairs .surface-damage-body span { color: rgba(255,255,255,.78); font-size: var(--t-fine); line-height: 1.4; }
.pg-bodywork .surface-repairs .surface-assess { margin-top: clamp(18px, 2.4vh, 28px); padding: clamp(18px, 2vw, 26px); gap: 14px; }
.pg-bodywork .surface-repairs .surface-assess-head { flex-direction: column; align-items: flex-start; gap: 6px; }
.pg-bodywork .surface-repairs .surface-assess-head .surface-note { text-align: left; }
@media (min-width: 900px) {
  .pg-bodywork .surface-repairs .surface-assess .surface-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; padding-block: 12px; }
}
.pg-bodywork .surface-repairs .surface-checks li { font-size: var(--t-fine); }
.pg-bodywork .surface-assess-also { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pg-bodywork .surface-also { grid-template-columns: auto; gap: 6px; padding: 12px; }
.pg-bodywork .surface-also .surface-ic { grid-row: auto; width: 16px; height: 16px; padding: 7px; }
.pg-bodywork .surface-also span { display: none; }
@media (min-width: 1100px) {
  .pg-bodywork .bw-repairs { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
  .pg-bodywork .bw-repairs .sec-h { text-align: left; margin-inline: 0; }
  .pg-bodywork .bw-repairs .sec-h p { margin-inline: 0; }
  .pg-bodywork .surface-damage-grid { gap: 12px; }
}
@media (min-width: 1100px) and (min-height: 700px) {
  .pg-surface.pg-bodywork .surface-section.surface-repairs {
    box-sizing: border-box; min-height: 100dvh; display: grid; align-content: center;
    padding-block: calc(var(--band-cut) + clamp(28px, 5dvh, 56px));
  }
  .pg-bodywork .surface-damage-media { height: calc((100dvh - 2 * var(--band-cut) - 160px) / 2); max-height: 340px; }
  .pg-bodywork .bw-repairs .sec-h h2 { font-size: clamp(1.9rem, 1rem + 2vw, 2.8rem); }
}

/* the five steps as a track */
@media (min-width: 980px) {
  .pg-bodywork .surface-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; position: relative; padding-top: 8px; }
  .pg-bodywork .surface-steps li:last-child { grid-column: auto; }
  .pg-bodywork .surface-steps::before {
    content: ""; position: absolute; left: 10%; right: 10%; top: 46px; height: 2px; z-index: 0;
    background: repeating-linear-gradient(90deg, var(--cobalt) 0 10px, transparent 10px 18px); opacity: .45;
  }
}
.pg-bodywork .surface-steps li {
  justify-items: center; text-align: center; background: var(--surface); padding-top: 20px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pg-bodywork .surface-steps li:hover { transform: translateY(-4px); box-shadow: var(--soft); }
.pg-bodywork .surface-steps li::before {
  position: static; order: -1; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  font-size: 1rem; letter-spacing: 0; color: #fff; background: var(--feature-grad); box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px var(--line2);
  content: counter(surface-step);
}
.pg-bodywork .surface-step-mark { width: 40px; height: 40px; }
.pg-bodywork .surface-step-mark .surface-ic { width: 20px; height: 20px; }
.pg-bodywork .surface-steps b { font-size: clamp(1.05rem, .9rem + .4vw, 1.3rem); }
.pg-bodywork .surface-step-note { font-size: var(--t-fine); }
.pg-bodywork .surface-steps li.is-gate { background: var(--feature-grad); border-color: transparent; color: #fff; box-shadow: var(--soft); }
.pg-bodywork .surface-steps li.is-gate::before { background: var(--gold); color: var(--panel-b); }
.pg-bodywork .surface-steps li.is-gate b { color: #fff; }
.pg-bodywork .surface-steps li.is-gate .surface-step-note { color: rgba(255,255,255,.82); }
.pg-bodywork .surface-steps li.is-gate .surface-step-mark { background: rgba(255,255,255,.12); color: #fff; }
.surface-step-flag { display: inline-block; margin-top: 4px; padding: 5px 10px; border-radius: var(--r-pill); background: var(--gold); color: var(--panel-b);
  font-size: var(--t-micro); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
/* the insurer answers as three cards with a mark each */
.pg-bodywork .surface-qualifier-list > div {
  -webkit-mask: none; mask: none; border-top: 0; padding: clamp(18px, 2vw, 26px); border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--soft-sm); position: relative; overflow: hidden;
}
.pg-bodywork .surface-qualifier-list > div::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--feature-accent); }
.pg-bodywork .surface-qualifier-list dt { font-size: var(--t-body); font-weight: 800; color: var(--ink); letter-spacing: -.01em; text-transform: none; }
.pg-bodywork .surface-qualifier-list dd { margin: 8px 0 0; color: var(--ink2); font-size: var(--t-fine); line-height: 1.55; }
.pg-bodywork .surface-assess-also { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-bodywork .surface-also { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: var(--r-pill); }
.pg-bodywork .surface-also b { font-size: var(--t-fine); }
@media (min-width: 1100px) and (max-height: 820px) {
  .pg-bodywork .surface-repairs .surface-assess-head .surface-note { display: none; }
}
@media (min-width: 1100px) and (min-height: 700px) {
  .pg-bodywork .bw-repairs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pg-bodywork .bw-repairs .sec-h { margin-bottom: 0; }
  .pg-bodywork .bw-repairs .sec-h h2 { font-size: clamp(1.8rem, .9rem + 1.6vw, 2.6rem); margin-top: 8px; }
  .pg-bodywork .bw-repairs .sec-h p { font-size: var(--t-fine); margin-top: 10px; max-width: 54ch; }
  .pg-bodywork .surface-repairs .surface-assess { margin-top: 18px; padding: 16px 20px; gap: 10px; }
  .pg-bodywork .surface-repairs .surface-subhead { font-size: 1.05rem; }
  .pg-bodywork .surface-repairs .surface-checks li { font-size: .86rem; line-height: 1.35; }
  .pg-bodywork .surface-repairs .surface-assess .surface-checks { gap: 6px 18px; padding-block: 10px; }
  .pg-bodywork .surface-damage-media { height: calc((100dvh - 2 * var(--band-cut) - 120px) / 2); }
  .pg-surface.pg-bodywork .surface-section.surface-repairs { padding-block: calc(var(--band-cut) + 16px); }
}

/* ---------- Fleet, one screen per section on desktop --------------------------
   Each of the four content sections fills the screen with its content centred
   in it, so the page steps from one to the next evenly. The capability
   photograph takes whatever height the copy leaves; the six jobs run three
   across beside a narrow photograph. */
@media (min-width: 1100px) and (min-height: 700px) {
  .pg-surface.pg-fleet :is(.surface-capability, .surface-work, .surface-coverage, .surface-process) {
    box-sizing: border-box; min-height: 100dvh; display: grid; align-content: center;
  }
  .pg-surface.pg-fleet .surface-section.surface-capability { height: 100dvh; padding-block: clamp(96px, 12dvh, 120px) clamp(32px, 5dvh, 56px); }
  .pg-fleet .surface-capability > .wrap { height: 100%; }
  .pg-fleet .surface-capability-in { height: 100%; display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.4dvh, 28px); }
  .pg-fleet .surface-capability-in > div:first-child { flex: 0 0 auto; }
  .pg-fleet .surface-capability h2 { font-size: clamp(1.9rem, 1rem + 1.8vw, 2.8rem); margin-top: 8px; }
  .pg-fleet .surface-capability p { font-size: var(--t-fine); line-height: 1.6; max-width: 92ch; margin-top: 12px; }
  .pg-fleet .surface-capability .surface-facts { margin-top: clamp(12px, 2dvh, 22px); }
  .pg-fleet .surface-capability .surface-facts > div { padding-top: 14px; }
  .pg-fleet .surface-capability-media { flex: 1 1 0; min-height: 140px; }
  .pg-fleet .surface-capability-media .surface-photo { height: 100%; }
  .pg-surface.pg-fleet .surface-section.surface-work { padding-block: clamp(80px, 10dvh, 110px) clamp(32px, 5dvh, 56px); }
  .pg-fleet .surface-work-in { grid-template-columns: minmax(0, 1fr) minmax(0, .32fr); gap: 16px; }
  .pg-fleet .fleet-jobs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-fleet .surface-work-media .surface-photo { height: 100%; }
}
@media (min-width: 1100px) and (min-height: 700px) and (max-height: 860px) {
  .pg-fleet .surface-work .sec-h p { font-size: var(--t-fine); }
  .pg-fleet .fleet-job { padding: 14px 16px; gap: 6px; }
  .pg-fleet .fleet-job span { font-size: .84rem; line-height: 1.45; }
  .pg-fleet .surface-work .surface-note { display: none; }
}
@media (min-width: 1100px) and (min-height: 700px) {
  .pg-fleet .surface-capability-media .surface-photo { object-position: 50% 62%; }
}

/* ---------- Areas, the body ---------------------------------------------------
   The page is about distance, so it shows distance. The workshop band carries
   a departures board of the nearest areas by road; the reach facts are three
   marked tiles; the core areas are cards ordered by driving time, each with a
   bar for how far it is; every A to Z link carries its time. All of it comes
   from the routed drive times the area pages use. */
.pg-areas-index .surface-location {
  position: relative; isolation: isolate;
  background: var(--panel-veil), url("photos/exterior-wide.webp") center 60% / cover no-repeat, #0A1730;
}
.area-board {
  border-radius: var(--r-xl); padding: clamp(18px, 2vw, 26px); color: #fff;
  background: rgba(6, 14, 30, .72); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 40px 80px -40px rgba(0,0,0,.8);
}
.area-board-head { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 10px; font-size: var(--t-micro);
  letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--gold); }
.area-board-head span + span { color: rgba(255,255,255,.55); }
.area-board-rows { list-style: none; margin: 0; padding: 0; counter-reset: board; }
.area-board-rows li { counter-increment: board; border-top: 1px solid rgba(255,255,255,.1); }
.area-board-rows a { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 70px; align-items: center; gap: 12px; min-height: 48px; padding: 6px 4px; border-radius: 10px; transition: background .2s; }
.area-board-rows a::before { content: counter(board, decimal-leading-zero); font-size: .72rem; font-weight: 800; color: rgba(255,255,255,.4); font-variant-numeric: tabular-nums; }
.area-board-rows a:hover { background: rgba(255,255,255,.07); }
.board-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-miles { color: rgba(255,255,255,.6); font-size: var(--t-fine); font-variant-numeric: tabular-nums; }
.board-min { justify-self: end; font-size: 1.5rem; letter-spacing: -.03em; color: var(--gold); font-variant-numeric: tabular-nums; line-height: 1; }
.board-min small { font-size: .7rem; margin-left: 3px; color: rgba(255,255,255,.6); letter-spacing: 0; font-weight: 700; }

/* reach: three marked tiles beside the photograph */
.pg-areas-index .surface-reach-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border: 0; }
.pg-areas-index .surface-reach-list > div {
  align-content: start; gap: 8px; padding: clamp(18px, 2vw, 24px); border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--surface); box-shadow: var(--soft-sm);
}
.pg-areas-index .surface-reach-list .surface-ic { width: 22px; height: 22px; padding: 10px; box-sizing: content-box; border-radius: 14px; background: var(--cobalt-soft); color: var(--cobalt); }
.pg-areas-index .surface-reach-list dt { margin-top: 4px; font-size: var(--t-body); letter-spacing: -.01em; text-transform: none; color: var(--ink); font-weight: 800; }
.pg-areas-index .surface-reach-list dd { font-size: var(--t-fine); color: var(--ink2); }
@media (min-width: 981px) { .pg-areas-index .surface-reach-in { grid-template-columns: minmax(0, 1.5fr) minmax(220px, .7fr); } }

/* core areas by driving time */
.pg-areas-index .surface-core { position: relative; isolation: isolate; background: transparent; border: 0; }
.core-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.core-card {
  position: relative; display: grid; gap: 6px; padding: 16px 18px 18px; border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--soft-sm); color: var(--ink);
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.core-card:hover { transform: translateY(-3px); border-color: var(--cobalt); box-shadow: var(--soft); }
.core-card b { font-size: var(--t-body); letter-spacing: -.015em; }
.core-drive { font-size: var(--t-fine); color: var(--ink2); font-variant-numeric: tabular-nums; }
.core-bar { position: absolute; left: 0; bottom: 0; height: 4px; width: calc(12% + var(--t, 0) * 88%); background: linear-gradient(90deg, var(--cobalt), var(--gold)); border-radius: 0 4px 0 0; }
@media (prefers-reduced-motion: no-preference) {
  html.anim .core-card .core-bar { transform-origin: 0 50%; animation: core-bar 1.2s .2s var(--ease) both; }
}
@keyframes core-bar { from { transform: scaleX(0); } }

/* A to Z: each letter is a card, each link carries its time */
.pg-areas-index .surface-results .area-group {
  break-inside: avoid; padding: 14px 16px 6px; border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--soft-sm); margin-bottom: 12px;
}
.pg-areas-index .surface-results.area-index { columns: 4 220px; column-gap: 12px; }
.pg-areas-index .surface-results .area-group h3 { font-size: 1.6rem; letter-spacing: -.03em; color: var(--cobalt); border: 0; padding: 0; margin-bottom: 2px; }
.pg-areas-index .surface-index a { justify-content: space-between; gap: 10px; }
.pg-areas-index .surface-index a:last-child { border-bottom: 0; }
.area-min { flex: 0 0 auto; font-size: .74rem; font-weight: 700; color: var(--ink3); font-variant-numeric: tabular-nums; }
.surface-index a:hover .area-min { color: var(--cobalt); }

/* ---------- Contact channels: the call is the headline ----------------------
   Four equal small cards gave the phone no more weight than the email. The
   call card now takes half the band with the number at display size, WhatsApp
   and email sit beside it, and the visit card runs under them with the
   entrance photograph through it. Still four columns, still whole-card links. */
.pg-surface.pg-contact-index .surface-channels { position: relative; isolation: isolate; }
.pg-contact-index .surface-channels::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("photos/team-reception.webp") 85% 40% / cover no-repeat, var(--bg2); background-blend-mode: luminosity, normal;
  -webkit-mask-image: linear-gradient(100deg, transparent 35%, rgba(0,0,0,.14) 75%); mask-image: linear-gradient(100deg, transparent 35%, rgba(0,0,0,.14) 75%);
}
.pg-contact-index .surface-channels .sec-h h2 { font-size: clamp(2rem, 1rem + 2.6vw, 3.6rem); letter-spacing: -.035em; }
@media (min-width: 760px) {
  .pg-contact-index .surface-route-grid { grid-template-rows: auto auto; gap: 14px; }
  .pg-contact-index .surface-route--call { grid-column: 1 / 3; grid-row: 1 / 3; padding: clamp(24px, 3vw, 40px); justify-content: space-between; }
  .pg-contact-index .surface-route--call b { font-size: clamp(2rem, 1rem + 2.8vw, 3.6rem); letter-spacing: -.04em; line-height: 1; margin-top: auto; }
  .pg-contact-index .surface-route--call > p { flex: 0 0 auto; font-size: var(--t-body); }
  .pg-contact-index .surface-route--call .surface-route-action { font-size: var(--t-body); padding-top: 14px; }
  .pg-contact-index .surface-route--visit { grid-column: 3 / 5; grid-row: 2; padding-right: 42%;
    background: linear-gradient(90deg, var(--surface) 52%, color-mix(in srgb, var(--surface) 0%, transparent) 78%),
      url("photos/exterior-front.webp") right 40% / 52% auto no-repeat, var(--surface);
    border-top: 4px solid var(--gold); }
}
.pg-contact-index .surface-route:hover { transform: translateY(-3px); }
.pg-contact-index .surface-route--wa { border-top: 4px solid var(--wa); }
.pg-contact-index .surface-route--email { border-top: 4px solid var(--cobalt); }
/* the form card answers to the same weight */
.pg-contact-index .surface-form .fx { box-shadow: 0 50px 100px -40px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.12); }
.pg-contact-index .surface-form .fx .sec-h h2 { font-size: clamp(1.8rem, 1rem + 1.8vw, 2.6rem); }
@media (max-width: 759px) {
  .pg-contact-index .surface-route--email b { font-size: .86rem; overflow-wrap: normal; word-break: normal; }
}
@media (max-width: 760px) {
  .pg-areas-index .surface-reach-list { grid-template-columns: minmax(0, 1fr); }
  .pg-areas-index .surface-reach-list > div { grid-template-columns: auto 1fr; column-gap: 14px; }
  .pg-areas-index .surface-reach-list .surface-ic { grid-row: 1 / 3; }
  .pg-areas-index .surface-reach-list dt { margin-top: 0; }
  .core-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .core-card { padding: 12px 12px 14px; }
}
@media (max-width: 979px) {
  .pg-bodywork .surface-steps li { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 14px; row-gap: 4px; padding: 16px; }
  .pg-bodywork .surface-steps li::before { grid-row: 1 / 4; width: 40px; height: 40px; box-shadow: none; }
  .pg-bodywork .surface-step-mark { display: none; }
  .pg-bodywork .surface-steps b { margin-top: 0; }
}

/* ---------- Bodywork: the place, the areas, the close --------------------------
   The bodyshop section reads left to right like the damage band: copy and
   figures as cards on the left, the two workshop photographs overlapping on
   the right. The closest areas are a grid of cards, not a cloud of pills. */
@media (min-width: 981px) {
  .pg-bodywork .surface-place { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
  .pg-bodywork .surface-place-copy, .pg-bodywork .surface-place-copy h2, .pg-bodywork .surface-place p { text-align: left; margin-inline: 0; }
  .pg-bodywork .surface-proof-grid { position: relative; display: block; min-height: clamp(320px, 34vw, 460px); }
  .pg-bodywork .surface-proof-grid img { position: absolute; width: 74%; height: 70%; object-fit: cover; border-radius: var(--r-xl);
    box-shadow: 0 40px 80px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.12); }
  .pg-bodywork .surface-proof-grid img:first-child { left: 0; top: 0; }
  .pg-bodywork .surface-proof-grid img:nth-child(2) { right: 0; bottom: 0; }
  .pg-bodywork .surface-proof-grid img:nth-child(n+3) { display: none; }
}
.pg-bodywork .surface-place .surface-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border: 0; }
.pg-bodywork .surface-place .surface-facts > div { padding: 16px; border-radius: var(--r-lg); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
.pg-bodywork .surface-place .surface-facts dt { color: var(--gold); }

:is(.pg-bodywork, .pg-fleet) .surface-core .area-links {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 8px; overflow: visible;
}
:is(.pg-bodywork, .pg-fleet) .surface-core .area-links a {
  justify-content: space-between; display: flex; align-items: center; padding: 14px 16px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--soft-sm); font-weight: 700;
  transition: transform .25s var(--ease), border-color .25s;
}
:is(.pg-bodywork, .pg-fleet) .surface-core .area-links a::after { content: "→"; color: var(--cobalt); font-weight: 800; }
:is(.pg-bodywork, .pg-fleet) .surface-core .area-links a:hover { transform: translateY(-2px); border-color: var(--cobalt); }
:is(.pg-bodywork, .pg-fleet) .surface-enquiry h2 { font-size: clamp(2rem, 1rem + 2.4vw, 3.4rem); letter-spacing: -.035em; }
@media (min-width: 981px) { .pg-bodywork .surface-place-copy .sec-h { text-align: left; margin-inline: 0; } }

/* ---------- Bodywork steps: a running rail on wide screens --------------------
   Five cards in one row were too narrow to read. At three cards' width the
   steps run past on a loop (paused under the pointer or focus); without
   motion or JavaScript the same rail scrolls sideways. */
@media (min-width: 980px) {
  .pg-bodywork .surface-steps-rail {
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 12px 18px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .pg-bodywork .surface-steps-rail::-webkit-scrollbar { display: none; }
  .pg-bodywork .surface-steps-rail .surface-steps { display: flex; width: max-content; gap: 16px; padding: 8px 4px 0; }
  .pg-bodywork .surface-steps-rail .surface-steps::before { display: none; }
  .pg-bodywork .surface-steps-rail .surface-steps li { flex: 0 0 clamp(300px, 27vw, 380px); scroll-snap-align: start; }
  .pg-bodywork .surface-steps-rail.is-running { overflow: hidden; }
  .pg-bodywork .surface-steps-rail.is-running .surface-steps { animation: steps-run 48s linear infinite; }
  .pg-bodywork .surface-steps-rail.is-running:is(:hover, :focus-within) .surface-steps { animation-play-state: paused; }
}
/* half the track plus half a gap: the clones land exactly where the originals began */
@keyframes steps-run { to { transform: translateX(calc(-50% - 8px)); } }


/* ---------- round 7 -----------------------------------------------------------
   Alloy wheels sits on the light ground like every other inner hero; its
   status pill reads on light. */
.hx-clearcoat .coat-status { background: var(--surface); border-color: var(--line); color: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Fleet capability: the photograph beside the copy at full height, not a
   strip under it. */
@media (min-width: 1100px) and (min-height: 700px) {
  .pg-fleet .surface-capability { text-align: left; }
  .pg-fleet .surface-capability-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); align-items: stretch; gap: clamp(32px, 4vw, 64px); }
  .pg-fleet .surface-capability-in > div:first-child { align-self: center; }
  .pg-fleet .surface-capability h2, .pg-fleet .surface-capability p, .pg-fleet .surface-capability .surface-facts { margin-inline: 0; }
  .pg-fleet .surface-capability p { max-width: 62ch; }
  .pg-fleet .surface-capability-media { width: 100%; height: 100%; min-height: 0; }
  .pg-fleet .surface-capability-media .surface-photo { height: 100%; border-radius: var(--r-xl); object-position: 40% 50%; }
}
/* Fleet's enquiry and questions sit on the centre line like the rest of the page. */
.pg-fleet .surface-enquiry .surface-actions { justify-content: center; }
.pg-fleet .surface-enquiry .sec-h { text-align: center; margin-inline: auto; }
.pg-fleet .pg-faq .wrap > .sec-h, .pg-fleet .pg-faq .pg-h2 { text-align: center; margin-inline: auto; }
.pg-fleet .pg-faq .faq-list, .pg-fleet .pg-faq .wrap > div:not(.sec-h) { margin-inline: auto; }

/* Contact: the call card carries the garage's open state above the number. */
.route-live { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; row-gap: 2px; margin-top: 6px; }
.route-live .open-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.5); }
.route-live .open-state { font-weight: 800; font-size: var(--t-fine); color: #fff; }
.route-live .open-next { grid-column: 2; margin: 0; font-size: var(--t-fine); font-weight: 600; color: var(--panel-sub); }
.route-live.is-open .open-dot { background: #3BD38A; box-shadow: 0 0 0 4px rgba(59,211,138,.22); }
.route-live.is-open .open-state { color: #3BD38A; }
.route-live.is-closed .open-dot { background: #F27A7A; }
@media (prefers-reduced-motion: no-preference) {
  html.anim .route-live.is-open .open-dot { animation: open-pulse 2.2s 1s ease-out infinite; }
}

/* ==========================================================================
   Heroes on a phone: one screen, every family.
   The hero is exactly the small viewport tall (100svh: the height with the
   browser's bars showing, so nothing moves as they hide). The copy keeps its
   natural height; the picture - photo, map, plate, ticket - takes whatever is
   left. Breadcrumbs go (the eyebrow names the page), the two actions share a
   row, the lede stops at three lines, and the call bar reserve goes because
   the bar only fades in after the hero.
   ========================================================================== */
@media (max-width: 760px) {
  .hx { height: 100svh; min-height: 0; max-height: none; display: flex; flex-direction: column; overflow: hidden; }
  .hx > .wrap.hx-in { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding-bottom: 14px; }
  .hx .crumbs { display: none; }
  .hx-copy { flex: 0 0 auto; gap: 10px; }
  .hx .hx-h1 { font-size: clamp(1.95rem, 1rem + 5.4vw, 2.7rem); line-height: 1.04; }
  .hx .hx-lede { font-size: .95rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .hx .hero-ask { flex-wrap: nowrap; gap: 8px; }
  .hx .hero-ask > * { flex: 1 1 0; min-width: 0; width: auto; }
  .hx .hero-ask .btn, .hx .hero-ask .btn-lg { width: 100%; min-height: 48px; padding: .7em .5em; font-size: .95rem; justify-content: center; }
  .hx .hero-ask .btn .ic { display: none; }
  .hx-facts dt { font-size: .95rem; }
  .hx-facts dd { font-size: .72rem; }
  /* the picture fills the rest */
  .hx-in > :is(.menu-fig, .ramp-frame, .chev-fig, .desk-fig, .open-fig, .coat-fig, .print-fig, .plate-stage, .ticket-stage, .wall-grid) { flex: 1 1 0; min-height: 0; margin: 0; }
  .menu-fig, .chev-fig, .desk-fig, .coat-fig { display: flex; flex-direction: column; }
  .menu-photo, .chev-photo, .desk-main, .coat-media, .print-frame { flex: 1 1 0; min-height: 0; aspect-ratio: auto; max-height: none; }
  .menu-photo img, .chev-photo img, .desk-main img, .coat-media img, .print-frame img, .ramp-frame > img, .open-fig img { height: 100%; }
  .ramp-frame, .open-fig { aspect-ratio: auto; max-height: none; }
  .open-fig > img { width: 100%; object-fit: cover; }
  /* menu: the price cards sit on the photograph's foot */
  .menu-cards { margin-top: -34px; flex: 0 0 auto; }
  /* ramp: the seal sits on the frame's corner; the outlined word stays behind */
  .ramp-seal { width: 84px; bottom: auto; top: -18px; right: 10px; }
  .ramp-word { display: none; }
  /* chevron and clearcoat: the side panels give the photograph the room */
  .chev-covers, .coat-panel { display: none; }
  /* desk: the walk-in ruler under the photograph rather than over a reserve */
  .desk-fig { padding: 0; }
  .desk-ruler { position: relative; left: auto; right: auto; bottom: auto; margin-top: 8px; }
  /* wall: three rows of four, centred in the room */
  .wall-grid { align-content: center; }
  .wall-grid li:nth-child(4n+2), .wall-grid li:nth-child(4n+4) { transform: none; }
  /* marque: the car first, then the copy; the spec table waits for the body */
  .marque-car, .marque-turntable { flex: 1 1 0; min-height: 0; aspect-ratio: auto; margin-top: 0; }
  .marque-car img { height: 100%; }
  .marque-spec { display: none; }
  .marque-plinth { width: min(150px, 22svh); }
  /* route: the map fills the room; the arrival rows are in the page body */
  .route-in > .hx-copy > .route-rows { display: none; }
  .route-card, .route-card--hub { flex: 1 1 0; min-height: 0; aspect-ratio: auto; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .hx .hx-lede { -webkit-line-clamp: 2; }
  .hx-facts { display: none; }
  .menu-cards { display: none; }
}
@media (max-width: 760px) {
  .hx > .wrap.hx-in { align-items: stretch; }
  .hx-open .hero-ask { flex-wrap: wrap; }
  .hx-open .hero-ask > :nth-child(n+3) { flex-basis: 100%; }
}
@media (max-width: 760px) {
  .hx-open .hero-ask > :nth-child(-n+2) { flex: 1 1 40%; }
  .hx-open .open-state { font-size: clamp(1.6rem, 1rem + 4vw, 2.2rem); }
  .hx-open .open-live { padding-bottom: 8px; gap: 2px; }
}
@media (max-width: 760px) { .hx-open .open-fig img { object-position: 50% 75% !important; } }
@media (max-width: 1099px), (max-height: 699px) {
  .pg-surface.pg-fleet .surface-section.surface-work { padding-top: clamp(64px, 16vw, 96px); }
}

/* Services hero price cards: one size, and the gold edge belongs to the card.
   Each card fills its grid cell, so the three match whatever their copy; the
   featured card clips its own top edge (no border for the bar to sit inside
   of, no second radius to mismatch). */
.menu-cards li { display: flex; min-width: 0; }
.menu-card { flex: 1 1 auto; min-width: 0; align-content: start; overflow: hidden; }
.menu-cards li:nth-child(2) .menu-card { border: 0; }
.menu-cards li:nth-child(2) .menu-card::before { inset: 0 0 auto 0; height: 4px; border-radius: 0; }
@media (max-width: 760px) {
  .menu-name { font-size: .62rem; letter-spacing: .06em; }
  .menu-card b { font-size: clamp(1.15rem, .9rem + 1.6vw, 1.5rem); }
  .menu-qual { font-size: .66rem; line-height: 1.3; }
  .menu-qual .freecode { font-size: .62rem; padding: 1px 5px; }
}