/* Banbridge Tyres & Auto Repairs. The one stylesheet. Tokens and components: design/DESIGN.md */

@font-face { font-family: Archivo; src: url(fonts/archivo-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Archivo; src: url(fonts/archivo-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Archivo Expanded"; src: url(fonts/archivo-expanded-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Archivo Semi"; src: url(fonts/archivo-semiexpanded-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
/* Arial sized to match, so the swap barely moves the text */
@font-face { font-family: "Archivo Fallback"; src: local("Arial"); size-adjust: 98%; }
@font-face { font-family: "Expanded Fallback"; src: local("Arial"); size-adjust: 116%; }

:root {
  --rubber: #1e2023;
  --rubber-lift: #33363a;
  --graphite: #43464a;
  --alloy: #bdbbb3;
  --primer: #ebe9e2;
  --paper: #f6f4ef;
  --white: #fff;
  --red: #e30615;
  --amber: #d98200;
  --on-rubber-muted: #c3c6c8;
  --on-rubber-line: #54575c;

  /* What changes on a dark ground. .on-dark surfaces below swap these. */
  --focus: var(--rubber);
  --line: var(--alloy);
  --ill-face: #f1f2f0;
  --link-line: var(--graphite);
  --muted: var(--graphite);

  --font: Archivo, "Archivo Fallback", Arial, sans-serif;
  --display: "Archivo Expanded", "Expanded Fallback", Arial, sans-serif;
  --semi: "Archivo Semi", "Archivo Fallback", Arial, sans-serif;

  --t-small: .875rem;
  --t-nav: .9375rem;
  --t-body: 1.0625rem;
  --t-lead: 1.3125rem;
  --t-h2: clamp(1.625rem, 1.45rem + .7vw, 2.125rem);
  --t-pull: clamp(1.5rem, 1.1rem + 1.7vw, 2.5rem);
  --t-h1-page: clamp(2.25rem, 1.75rem + 2vw, 3.5rem);
  --t-h1: clamp(2.5rem, 1.75rem + 3.1vw, 4.75rem);

  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --s-7: 4rem;
  --s-8: 6rem;
  --s-9: 8rem;

  --gutter: var(--s-4);
  --gap: var(--s-4);
  --header: 4.5rem;
  --logo-h: 3rem; /* 48px */
  --bar: 3.5rem;
  --content: 82rem;
  --section: var(--s-8);

  --m-fast: 160ms ease-out;
  --m-menu: 180ms ease-out;
  --m-row: 200ms ease-out;
  --m-settle: 900ms cubic-bezier(.16, 1, .3, 1);
  --m-draw: 850ms cubic-bezier(.45, 0, .2, 1);
}
@media (min-width: 64rem) {
  :root { --gutter: var(--s-7); --section: var(--s-9); }
}

@media (min-width: 56rem) {
  :root { --header: 6rem; --logo-h: 4.5rem; } /* 72px */
}

.site-header, .site-footer, .nav, .hero--rubber, .decoder, .ground-dark, .action-bar {
  --focus: var(--paper);
  --line: var(--on-rubber-line);
  --ill-face: #26282c;
  --link-line: var(--on-rubber-muted);
  --muted: var(--on-rubber-muted);
}

/* The three grounds. Each block on a page picks one: no two neighbours match and no two dark bands touch (tests/illustrations.mjs). */
.ground-dark { background: var(--rubber); color: var(--paper); }
.ground-paper { background: var(--paper); }
.ground-white { background: var(--white); --ill-face: var(--white); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; hanging-punctuation: first allow-end last; scroll-behavior: smooth; scroll-padding-top: var(--header); }
html:has(#menu:popover-open) { overflow: hidden; }
body { margin: 0; background: var(--paper); color: var(--rubber); font: 400 var(--t-body)/1.55 var(--font); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, figure, address { margin: 0; padding: 0; font-style: normal; }
ul { list-style: none; }
p { text-wrap: pretty; }
h1 { font-family: var(--display); font-weight: 500; text-wrap: balance; }
h2, h3 { font-family: var(--semi); font-weight: 500; text-wrap: balance; }
h2 { font-size: var(--t-h2); line-height: 1.2; letter-spacing: -.01em; }
h3 { font-size: var(--t-lead); line-height: 1.25; letter-spacing: -.01em; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* One focus ring everywhere: solid, clear of the element, and it flips on dark grounds */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 1px; }

.wrap { width: 100%; max-width: calc(var(--content) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link { position: absolute; left: var(--gutter); top: var(--s-2); z-index: 30; padding: var(--s-2) var(--s-3); background: var(--paper); color: var(--rubber); --focus: var(--red); transform: translateY(-200%); }
.skip-link:focus-visible { transform: none; }

/* Links */
/* The hairline is always there. The red one draws in over it, left to right. */
.text-link {
  text-decoration: none; padding-bottom: .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background-image: linear-gradient(var(--red), var(--red)), linear-gradient(var(--link-line), var(--link-line));
  background-position: 0 100%, 0 100%; background-repeat: no-repeat; background-size: 0 1px, 100% 1px;
  transition: background-size var(--m-fast);
}
.text-link:hover, .text-link:focus-visible { background-size: 100% 1px, 100% 1px; }

/* Button */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .3em; min-height: var(--s-6); padding: 0 var(--s-4); border-radius: 3px; background: var(--rubber); color: var(--paper); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color var(--m-fast), transform 80ms ease-out; }
.btn:hover { background: var(--rubber-lift); }
.btn:active, .call-link:active, .action-bar a:active { transform: translateY(1px); }
.btn:active { background: #0f1012; }
.btn--secondary { background: transparent; color: var(--rubber); box-shadow: inset 0 0 0 1px var(--rubber); }
.btn--secondary:hover { background: var(--primer); }
.btn--secondary:active { background: var(--alloy); }
/* On phones the two buttons nearly fill the width, so the font arriving could flip them between one row and two. They always stack. */
@media (max-width: 40rem) {
  .actions:has(.btn--secondary) { flex-direction: column; align-items: flex-start; }
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-4); }

/* An icon link: the same 3px corners and hairline as the call link, at a full 48px target */
.icon-link { display: inline-flex; align-items: center; justify-content: center; width: var(--s-6); height: var(--s-6); border: 1px solid currentColor; border-radius: 3px; text-decoration: none; transition: background-color var(--m-fast), color var(--m-fast); }
.icon-link svg { display: block; }
.icon-link:hover { background: var(--rubber); color: var(--paper); }
.site-footer .icon-link { border-color: var(--on-rubber-muted); }
.site-footer .icon-link:hover { background: var(--paper); color: var(--rubber); border-color: var(--paper); }
.social { margin-top: var(--s-3); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--rubber); color: var(--paper); }
.bar { display: flex; align-items: center; gap: var(--s-4); height: var(--header); padding-inline: var(--gutter); max-width: calc(var(--content) + 2 * var(--gutter)); margin-inline: auto; }
.logo { display: block; margin-right: auto; }
.logo img { width: auto; height: var(--logo-h); }
.call-link { display: inline-flex; align-items: center; gap: .3em; min-height: 2.5rem; padding-inline: var(--s-3); border: 1px solid var(--on-rubber-muted); border-radius: 3px; font-size: var(--t-nav); text-decoration: none; white-space: nowrap; transition: border-color var(--m-fast), background-color var(--m-fast); }
.call-link:hover { border-color: var(--paper); background: var(--rubber-lift); }
.call-number { display: none; }
.menu-toggle { font-size: var(--t-nav); min-height: 2.5rem; }

.nav { position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0; padding: 0 var(--gutter); background: var(--rubber); color: var(--paper); opacity: 0; transition: opacity var(--m-menu), display var(--m-menu) allow-discrete, overlay var(--m-menu) allow-discrete; }
.nav:popover-open { opacity: 1; }
@starting-style { .nav:popover-open { opacity: 0; } }
.nav ul { margin-top: var(--s-4); }
.nav li { border-bottom: 1px solid var(--line); }
.nav li a { display: block; padding-block: var(--s-3); font-family: var(--semi); font-size: var(--t-h2); font-weight: 500; text-decoration: none; }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.menu-close { display: flex; align-items: center; margin: var(--s-3) 0 var(--s-3) auto; } /* the same 40px as the Menu button, 16px clear of the edge so its focus ring shows */
.nav .call-link { margin-top: var(--s-5); }
.nav .call-number { display: inline; }
/* Without popover support the nav simply sits in the page */
@supports not selector(:popover-open) {
  .nav { position: static; height: auto; opacity: 1; }
  .bar { flex-wrap: wrap; height: auto; padding-block: var(--s-2); }
  .menu-toggle { display: none; }
}

@media (min-width: 56rem) {
  .call-number { display: inline; }
  .menu-toggle { display: none; }
  .nav { display: block; position: static; width: auto; height: auto; margin-right: auto; padding: 0; background: none; opacity: 1; overflow: visible; }
  .nav ul { display: flex; gap: var(--s-5); margin: 0; }
  .nav li { border: 0; }
  .nav li a { padding-block: var(--s-2); font-family: var(--font); font-size: var(--t-nav); font-weight: 400; }
  .nav li a:not([aria-current]):hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
  .nav .call-link { display: none; }
  .logo { margin-right: var(--s-6); }
}

/* Hero: the wheel is the only large dark thing on the screen */
.hero { position: relative; overflow: hidden; display: flex; background: var(--primer); min-height: calc(100svh - var(--header)); }
/* Only positions the composition: the words start at its left and the tyre hangs off its right. It has no ground and crops nothing. */
.hero-frame { position: relative; display: flex; width: 100%; }
.hero-copy { position: relative; padding-block: var(--s-5) calc(70vw + var(--s-4)); }
.hero h1 { max-width: 13ch; font-size: var(--t-h1); line-height: 1.04; letter-spacing: -.025em; }
.lede { max-width: 34ch; margin-top: var(--s-3); color: var(--muted); }
.today { margin-top: var(--s-3); font-size: var(--t-small); color: var(--muted); }
.today a { text-underline-offset: .25em; }
.lede .text-link { color: inherit; }

/* Phones: the tyre is smaller than the screen is wide, its hub well in view, and the copy keeps clear of it */
.wheel { position: absolute; right: -30vw; bottom: -34vw; width: 104vw; aspect-ratio: 1; }
/* On phones the name reads from the tyre's lower left, so it's turned to bring it all into the framing. From 640px the
   tyre-sidewall-wide artwork already sits where it should, on the visible top left, every letter the right way up.
   rotate is its own property, so it adds to the scroll's turn and the load's settle rather than fighting them. */
.wheel-spin { position: absolute; inset: 0; rotate: 16deg; }
.wheel-art { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; animation: settle var(--m-settle) both; }
/* The centre sits just under the tyre's inner edge, so no seam shows */
.wheel-art--centre, .wheel-photo { inset: 21.4%; width: 57.2%; height: 57.2%; }
.wheel-photo { position: absolute; max-width: none; border-radius: 50%; object-fit: cover; background: var(--alloy); }
@keyframes settle { from { transform: rotate(-16deg); } to { transform: none; } }

@media (min-width: 40rem) {
  .wheel { width: 70vw; right: -18vw; bottom: -26vw; }
  .wheel-spin { rotate: 0deg; }
  .hero-copy { padding-bottom: var(--s-5); }
}
@media (min-width: 64rem) {
  .lede { max-width: min(42ch, 38vw); margin-top: var(--s-4); font-size: var(--t-lead); line-height: 1.45; }
  .actions { margin-top: var(--s-5); }
  .today { margin-top: var(--s-4); }
}
/* Phones on their side: the button matters more than the tyre. Upright, the tyre sits below the copy on any phone. */
@media (max-width: 64rem) and (max-height: 40rem) and (orientation: landscape) {
  .wheel { display: none; }
  .hero-copy { padding-bottom: var(--s-5); }
}
/* Phones on their side: the same content, on fewer lines */
@media (max-width: 64rem) and (max-height: 30rem) {
  .hero h1 { max-width: none; font-size: var(--t-h2); }
  .lede { max-width: 72ch; }
  .hero-copy { padding-block: var(--s-4); }
}

/* The phone's composition with more room, and the same whatever the browser zoom, which only changes the viewport's size
   in CSS pixels. Everything's held in rem: the frame is the header's width, the hero's height is capped so a huge viewport
   doesn't make a huge empty block, and the tyre's size comes from that height between a minimum and a maximum, limited by
   the width so it can't reach the words. Its centre sits .4 of its radius in from the frame's right and .16 up from the
   bottom, which keeps the whole name in view. The ground stays edge to edge, and the tyre carries on past the frame until
   the hero's own overflow crops it, so only the viewport's edge ever cuts it. Also for a zoomed-in desktop window, wide but short, which has a fine pointer;
   a phone on its side doesn't, and keeps its own layout. tests/illustrations.mjs checks this at each size. */
@media (min-width: 64rem), (min-width: 40rem) and (max-height: 40rem) and (orientation: landscape) and (pointer: fine) {
  .hero:not(.hero--page) { --hero-h: min(100svh - var(--header), 56rem); --r: min(clamp(20rem, var(--hero-h) * .75, 36rem), 40vw); min-height: var(--hero-h); }
  .hero-frame { max-width: calc(var(--content) + 2 * var(--gutter)); margin-inline: auto; align-items: flex-start; }
  .hero-frame > .hero-copy { padding-block: calc(var(--hero-h) * .13) var(--s-5); }
  .hero-frame .wheel { display: block; width: calc(var(--r) * 2); right: calc(var(--r) * -.6); bottom: calc(var(--r) * -.84); left: auto; top: auto; }
}
/* Very short: one line of heading already, so the buttons stack to stay clear of the tyre */
@media (min-width: 40rem) and (max-height: 30rem) and (orientation: landscape) and (pointer: fine) {
  .hero-frame .lede { max-width: 38vw; }
  .hero-frame .actions { flex-direction: column; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-3); }
  .hero-frame > .hero-copy { padding-block: var(--s-4); }
}

/* Sections */
.section { padding-block: var(--section); }

/* What we do: the centrepiece. Big rows, whole row clickable. On hover or keyboard focus the title and arrow shift 4px and a red hairline draws under that row. */
.services { padding-block: var(--section); }
.services-grid > h2 { font-family: var(--display); font-size: var(--t-h1-page); line-height: 1.06; letter-spacing: -.02em; }
@media (min-width: 64rem) { .services-grid > h2 { font-size: var(--t-pull); line-height: 1.1; } }
.service { --pad: var(--s-5); position: relative; display: grid; gap: var(--s-2); padding: var(--pad-top, var(--pad)) var(--s-6) var(--pad) 0; border-bottom: 1px solid var(--line); }
.service h3 { font-size: clamp(1.375rem, 1.2rem + .9vw, 2rem); line-height: 1.15; }
.service a { text-decoration: none; }
.service a::after { content: ""; position: absolute; inset: 0; }
/* A block, not inline-block, whose baseline is its last line: a title that wraps still lines up on its first */
.row-label { display: block; transition: transform var(--m-row); }
.service a::before, .familiar-list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform var(--m-row); }
.service a:focus-visible { outline: none; }
.service a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 1px; }
.service p { color: var(--muted); }
.service::after {
  content: ""; position: absolute; right: var(--s-1); top: calc(var(--pad-top, var(--pad)) + .125rem); width: 1.75rem; height: 1.75rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.25'%3E%3Cpath d='M2 10h15.5M11.5 4l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.25'%3E%3Cpath d='M2 10h15.5M11.5 4l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--m-row);
}
/* Hover only where there's a real pointer, so a tap can't leave a row lit, and focus only for the keyboard: never plain :focus, which the back button restores */
@media (hover: hover) {
  .service:hover a::before, .familiar-list a:hover::after { transform: none; }
  .service:hover .row-label, .familiar-list a:hover .row-label { transform: translateX(.25rem); }
  .service:hover::after { transform: translateX(.25rem); }
}
.service:has(a:focus-visible) a::before, .familiar-list a:focus-visible::after { transform: none; }
.service:has(a:focus-visible) .row-label, .familiar-list a:focus-visible .row-label { transform: translateX(.25rem); }
.service:has(a:focus-visible)::after { transform: translateX(.25rem); }
/* Without motion, the hairline still marks the row but nothing shifts */
@media (prefers-reduced-motion: reduce) {
  .row-label, .service::after { transform: none !important; }
}
.services-note { margin-top: var(--s-4); }

@media (min-width: 64rem) {
  .service { grid-template-columns: 5fr 4fr; gap: var(--gap); align-items: baseline; padding-right: var(--s-7); }
}

/* Gallery, when site.json lists any photos */
.gallery { display: grid; gap: var(--gap); }
@media (min-width: 64rem) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery .frame--landscape { grid-column: auto; }
}

/* Talk to us */
.cta { padding-block: var(--section); }
.cta p { max-width: 40rem; }
.cta h2 { font-family: var(--display); font-size: var(--t-pull); line-height: 1.1; letter-spacing: -.015em; }
/* Visit: the address and map as one band, the phone and hours as the next */
.location { padding-block: var(--section); }
.location h2 { margin-bottom: var(--s-3); }
.location address { font-size: var(--t-lead); line-height: 1.4; }
.how-to-find { margin-top: var(--s-3); max-width: 34ch; color: var(--muted); }
.visit-detail { padding-block: var(--section); }
.visit-detail h2 { margin-bottom: var(--s-3); }
.visit-detail p + p { margin-top: var(--s-3); }
.visit-phone { font-family: var(--display); font-weight: 500; font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); line-height: 1.1; letter-spacing: -.02em; }
.visit-phone a { display: inline-block; padding-block: var(--s-1); text-decoration: none; }
.visit-phone a:hover { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }

.visit-map { width: 100%; max-width: 34rem; }
.ground-dark .map { --map-ground: var(--rubber); }
.visit-map figcaption { margin-top: var(--s-2); font-size: var(--t-small); color: var(--muted); }
.hours { width: 100%; max-width: 30rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hours th, .hours td { padding: var(--s-2) 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.hours td { padding-left: var(--s-3); text-align: right; white-space: nowrap; }
.hours tr[aria-current="date"] th, .hours tr[aria-current="date"] td { font-weight: 600; }

/* Inner pages: split hero, words left, drawing right. Grounds vary so pages don't blur together. */
.hero--page { display: block; min-height: 0; }
.hero--rubber { background: var(--rubber); color: var(--paper); }
:is(.hero--rubber, .ground-dark) .btn { background: var(--paper); color: var(--rubber); }
:is(.hero--rubber, .ground-dark) .btn:hover { background: var(--alloy); }
:is(.hero--rubber, .ground-dark) .btn:active { background: #aeb1b0; }
.hero--rubber .btn--secondary { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px var(--on-rubber-muted); }
.hero--rubber .btn--secondary:hover { background: var(--rubber-lift); }
.hero--rubber .btn--secondary:active { background: #0f1012; }
.hero-split { display: grid; }
.hero--page .hero-copy { padding-block: var(--s-6) var(--s-4); }
.hero--page h1 { max-width: 16ch; font-size: var(--t-h1-page); line-height: 1.06; letter-spacing: -.02em; }
.hero-art { min-width: 0; margin-inline: calc(-1 * var(--gutter)); }
.hero-art .ill { display: block; width: 100%; height: auto; }
.hero-art--draw .ill { max-width: 30rem; margin-inline: auto; }
.hero-art--photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* A drawing is an accent: one round thing, large, cropped by the screen's edge like the home page tyre.
   On phones it sits under the copy, as the tyre does, and the copy keeps clear of it. */
.hero-art--bleed { position: absolute; right: -30vw; bottom: -34vw; width: 104vw; margin: 0; color: var(--on-rubber-muted); pointer-events: none; }
.hero--page:has(.hero-art--bleed) .hero-copy { padding-bottom: calc(70vw + var(--s-4)); }
@media (min-width: 40rem) {
  .hero-art--bleed { width: 70vw; right: -18vw; bottom: -26vw; }
  .hero--page:has(.hero-art--bleed) .hero-copy { padding-bottom: calc(44vw + var(--s-5)); }
}
@media (max-width: 64rem) and (max-height: 30rem) and (orientation: landscape) {
  .hero-art--bleed { display: none; }
  .hero--page:has(.hero-art--bleed) .hero-copy { padding-bottom: var(--s-4); }
}
@media (min-width: 64rem) {
  /* The drawing hangs off the frame, not the viewport, so on a huge viewport it stays beside the words */
  .hero-split { position: relative; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: center; min-height: clamp(37rem, 40vw, 46rem); }
  .hero--page .hero-copy { grid-column: 1 / span 6; padding-block: var(--s-7); }
  .hero--page .lede { max-width: 38ch; }
  .hero-art { grid-column: 7 / -1; margin-inline: 0; padding-block: var(--s-5); }
  .hero-art--draw .ill { width: 100%; max-width: 36rem; margin-inline: auto 0; }
  /* grid-column: auto, or it would be placed against its grid column and not the frame */
  .hero-art--bleed { grid-column: auto; --d: clamp(46rem, 56vw, 64rem); width: var(--d); left: 56%; right: auto; bottom: auto; top: 50%; margin-top: calc(var(--d) / -2); padding: 0; }
  .hero--page:has(.hero-art--bleed) .hero-copy { padding-block: var(--s-7); }
  .hero-art--bleed .ill { stroke-width: 1; }
  .hero-art--bleed .ill .t { stroke-width: .7; }
  .hero-art--bleed .ill .a { stroke-width: 1.1; }
}
/* A part drawn side-on or three-quarter: nearly whole, only just touching the right edge, sat on the hero's foot on phones */
.hero-art--whole { width: 94vw; right: -6vw; bottom: 0; }
.hero--page:has(.hero-art--whole) .hero-copy { padding-bottom: calc(82vw + var(--s-5)); }
@media (min-width: 40rem) {
  .hero-art--whole { width: 58vw; right: -3vw; bottom: 0; }
  .hero--page:has(.hero-art--whole) .hero-copy { padding-bottom: calc(51vw + var(--s-5)); }
}
@media (max-width: 64rem) and (max-height: 30rem) and (orientation: landscape) {
  .hero--page:has(.hero-art--whole) .hero-copy { padding-bottom: var(--s-4); }
}
@media (min-width: 64rem) {
  .hero-art--whole { --d: clamp(33rem, 44vw, 50rem); width: var(--d); left: auto; right: max(-3vw, -2.7rem); top: 50%; bottom: auto; margin-top: calc(var(--d) * -.4375); }
  .hero--page:has(.hero-art--whole) .hero-copy { padding-block: var(--s-7); }
  .hero-art--whole .ill { stroke-width: 1.25; }
  .hero-art--whole .ill .t { stroke-width: .8; }
  .hero-art--whole .ill .a { stroke-width: 1.5; }
}
/* The MOT route: whole, never cropped, and on phones the tall version takes over */
.hero-art--route { margin: 0; padding-bottom: var(--s-5); color: var(--on-rubber-muted); }
.hero-art--route .ill { max-width: 23rem; margin-inline: 0 auto; }
.hero-art--route .ill text { fill: var(--paper); font-size: 17px; font-weight: 600; }
.route--wide { display: none !important; }
@media (min-width: 40rem) {
  .route--wide { display: block !important; }
  .route--tall { display: none !important; }
  .hero-art--route .ill text { font-size: 15px; font-weight: 400; }
  .hero-art--route .ill { max-width: 34rem; }
}
@media (min-width: 64rem) {
  .hero-art--route { grid-column: 7 / -1; padding-block: var(--s-5); }
  .hero-art--route .ill { margin-inline: auto 0; max-width: 40rem; }
}
/* The 404's tyre is flat, so its foot stays in frame and only the right edge crops it */
.hero-art--flat { width: 88vw; right: -20vw; bottom: 0; }
.hero--page:has(.hero-art--flat) .hero-copy { padding-bottom: calc(77vw + var(--s-4)); }
@media (min-width: 40rem) {
  .hero-art--flat { width: 60vw; right: -12vw; bottom: 0; }
  .hero--page:has(.hero-art--flat) .hero-copy { padding-bottom: calc(53vw + var(--s-4)); }
}
@media (min-width: 64rem) {
  .hero-art--flat { --d: 38rem; width: var(--d); left: auto; right: -9rem; top: auto; bottom: 0; margin-top: 0; }
  .hero--page:has(.hero-art--flat) .hero-copy { padding-block: var(--s-7); }
}

/* The line drawings. One stroke language at every size. */
.ill { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; max-width: 100%; height: auto; font-family: var(--font); }
.ill .t { stroke-width: 1; stroke-opacity: .6; }
.ill .a { stroke: var(--red); stroke-width: 1.75; }
.ill .f { fill: var(--ill-face); stroke: none; }
.ill .pin { fill: var(--red); stroke: none; }
.ill .road { stroke-width: 4; }
.ill .am { stroke: var(--amber); stroke-width: 1.75; }
/* The street map: real roads, to scale. Labels get a halo of the ground colour so they read over a line. */
.map { --map-ground: var(--paper); }
.map .ill { display: block; width: 100%; height: auto; }
.map .ill .halo { fill: var(--map-ground); }
.map .ill .lane { stroke: var(--red); stroke-width: 2.5; }
.map .ill .lane-end { stroke: var(--red); stroke-width: 2; stroke-dasharray: 3 4; }
.map .ill text { stroke: var(--map-ground); stroke-width: 3px; paint-order: stroke; }
.map figcaption a { color: inherit; }
.ill .town-bg, .ill .halo { fill: var(--paper); stroke: none; }
.ill text { fill: currentColor; stroke: none; font-size: 14px; letter-spacing: 0; }
.ill text.small { font-size: 12px; fill: var(--muted); }
.ill text.town, .ill text.strong { font-size: 15px; font-weight: 600; }
/* The map carries real labels, so on a phone its type stays readable */
@media (max-width: 40rem) {
  .map .ill text { font-size: 15.5px; }
  .map .ill text.strong { font-size: 16.5px; }
  .map .ill text.garage { font-size: 15px; } /* it has to fit between two roads */
}
.ill g[style] * { stroke-width: calc(1.5px / var(--s)); }
.ill g[style] .t { stroke-width: calc(1px / var(--s)); }
.ill g[style] .a { stroke-width: calc(1.75px / var(--s)); }
.ill g[style] .am { stroke-width: calc(1.75px / var(--s)); }
@media (prefers-reduced-motion: no-preference) {
  .hero-art .ill :is(path, circle, ellipse, rect):not(.f, .pin) { stroke-dasharray: 1; animation: draw var(--m-draw) both; }
  .hero-art .ill :is(.f, .pin) { animation: appear 300ms 550ms ease-out both; }
  /* The MOT route draws in along its way, one run after another, and each arrowhead lands as its run arrives */
  .hero-art .ill text { animation: appear 300ms 300ms ease-out both; }
  .hero-art .ill .r1 { animation: draw 700ms 400ms cubic-bezier(.45, 0, .2, 1) both; }
  .hero-art .ill .r2 { animation: draw 500ms 1100ms cubic-bezier(.45, 0, .2, 1) both; }
  .hero-art .ill .r3 { animation: draw 800ms 1600ms cubic-bezier(.45, 0, .2, 1) both; }
  .hero-art .ill .hd { stroke-dasharray: none; }
  .hero-art .ill .hd.r1 { animation: appear 150ms 1050ms ease-out both; }
  .hero-art .ill .hd.r2 { animation: appear 150ms 1550ms ease-out both; }
  .hero-art .ill .hd.r3 { animation: appear 150ms 2350ms ease-out both; }
}
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }

/* The tyre turns a little as the page scrolls, where browsers support it */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .wheel-spin { animation: roll linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    @keyframes roll { to { transform: rotate(10deg); } }
  }
}

/* Page rhythm */
.split-text > * + *, .split-side > * + * { margin-top: var(--s-3); }
.split-text > h2 + *, .split-side > h2 + * { margin-top: var(--s-4); }
.rows { border-top: 1px solid var(--line); }
.rows li { --pad: var(--s-3); padding-block: var(--pad-top, var(--pad)) var(--pad); border-bottom: 1px solid var(--line); font-size: var(--t-lead); line-height: 1.35; }
.brands li { padding-block: var(--s-3); border-bottom: 1px solid var(--line); }
.brands { border-top: 1px solid var(--line); }
.columns-lead { font-size: var(--t-lead); line-height: 1.45; }
.columns-lead p + p, .pull-grid p + p { margin-top: var(--s-3); }
.columns-lead > h3 { margin-top: var(--s-5); margin-bottom: var(--s-3); }
.columns-main > * + *, .columns-main > .figures:not(:first-child) { margin-top: var(--s-5); }
.columns-main > h3 { margin-top: var(--s-6); }
.columns-main > h3 + * { margin-top: var(--s-3); }
.columns-intro { font-size: var(--t-lead); line-height: 1.45; max-width: 38em; }
/* A few facts, set large. The figure is the picture. */
.figures { display: grid; gap: var(--s-4); margin: 0; }
.figures > div { position: relative; padding-top: var(--s-3); border-top: 1px solid currentColor; }
.figures dt { font-family: var(--display); font-size: var(--t-pull); font-weight: 500; line-height: 1.1; letter-spacing: -.015em; }
.figures dd { margin: var(--s-2) 0 0; color: var(--muted); max-width: 32ch; }
.figures > .figure--red { border-top: 3px solid var(--red); }
.figures > .figure--amber { border-top: 3px solid var(--amber); }
@media (min-width: 40rem) {
  .figures { grid-template-columns: repeat(3, 1fr); column-gap: var(--gap); }
  .figures--two { grid-template-columns: repeat(2, 1fr); }
}
.after-steps { margin-top: var(--s-6); }
.after-steps h2 { margin-bottom: var(--s-3); }

/* Pull bands: one sentence from the page, set large */
.pull-band { padding-block: var(--section); }
.pull-grid--solo { display: grid; gap: var(--s-4); }
.pull { font-family: var(--semi); font-size: var(--t-pull); font-weight: 500; line-height: 1.22; letter-spacing: -.012em; text-wrap: pretty; max-width: 32ch; }
.pull-grid .pull { max-width: 40ch; }
.pull-grid .pull + p { margin-top: var(--s-4); }
@media (min-width: 64rem) {
  .pull-grid--solo, .frontage-grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
  .pull-grid--solo > * { grid-column: 4 / -1; }
}

/* Numbered, because these really are in order */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); counter-reset: step; }
.steps li { counter-increment: step; padding-top: var(--s-3); border-top: 1px solid currentColor; }
.steps li::before { content: counter(step); display: block; margin-bottom: var(--s-3); font-family: var(--display); font-size: var(--t-pull); font-weight: 500; line-height: 1; }
.steps.steps--stack { grid-template-columns: 1fr; }
/* Signs: short statements on a grid */
.signs { display: grid; gap: 0 var(--gap); border-top: 1px solid var(--line); }
.signs li { --pad: var(--s-3); padding-block: var(--pad-top, var(--pad)) var(--pad); border-bottom: 1px solid var(--line); font-size: var(--t-lead); line-height: 1.35; }
.signs--check li { position: relative; padding-left: var(--s-5); }
/* Wheel alignment: three views of the front wheels. Beside their captions on phones, side by side on bigger screens */
.explainer { display: grid; gap: var(--s-5); }
.explainer figure { display: grid; grid-template-columns: minmax(7rem, 2fr) 3fr; gap: var(--s-4); align-items: center; padding-top: var(--s-4); border-top: 1px solid currentColor; color: var(--rubber); --ill-face: var(--paper); }
.explainer .ill { display: block; width: 100%; height: auto; }
.explainer figcaption { color: var(--muted); }
.explainer strong { display: block; margin-bottom: var(--s-1); font-family: var(--semi); font-size: var(--t-lead); font-weight: 500; line-height: 1.25; letter-spacing: -.01em; color: var(--rubber); }
.explainer-note { max-width: 38em; font-size: var(--t-lead); line-height: 1.45; }
@media (min-width: 40rem) {
  .explainer { grid-template-columns: repeat(3, 1fr); column-gap: var(--gap); }
  .explainer figure { grid-template-columns: 1fr; align-items: start; }
}
.signs--check li::before { content: ""; position: absolute; left: 0; top: calc(var(--pad-top, var(--pad)) + .3rem); width: 1rem; height: 1rem; border: 1.5px solid currentColor; border-radius: 2px; }
@media (min-width: 40rem) {
  .signs { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .steps { grid-template-columns: repeat(3, 1fr); column-gap: var(--gap); }
  .signs { grid-template-columns: repeat(3, 1fr); }
  .signs li { --pad: var(--s-4); min-height: 8rem; }
}

/* Read your tyre */
.decoder { background: var(--rubber); color: var(--paper); padding-block: var(--s-7); overflow: clip; }
.decoder-intro { display: grid; gap: var(--s-3); }
.decoder-intro p { max-width: 44ch; color: var(--muted); }
.decoder-art { margin-top: var(--s-5); }
/* On phones the arc stays in view above the keys, so a tap always shows what it lit up */
@media (max-width: 63.99rem) {
  .is-live .decoder-art { position: sticky; top: var(--header); z-index: 1; background: var(--rubber); }
  .is-live .decoder-keys a { scroll-margin-top: calc(var(--header) + 8rem); }
}
.decoder-svg { display: block; width: 100%; height: auto; }
.part { cursor: pointer; }
.part-mark { fill: #8b8e92; transition: fill var(--m-fast); }
.part-line { stroke: transparent; transition: stroke var(--m-fast); }
.part.is-active .part-mark, .part:hover .part-mark { fill: var(--paper); }
.part.is-active .part-line { stroke: var(--red); }
/* Without JavaScript, the links still light up the part they point at */
.decoder:has(#part-width:target) [data-part="width"] .part-mark,
.decoder:has(#part-profile:target) [data-part="profile"] .part-mark,
.decoder:has(#part-construction:target) [data-part="construction"] .part-mark,
.decoder:has(#part-rim:target) [data-part="rim"] .part-mark,
.decoder:has(#part-load:target) [data-part="load"] .part-mark,
.decoder:has(#part-speed:target) [data-part="speed"] .part-mark { fill: var(--paper); }
.decoder-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--s-3); margin-top: var(--s-4); }
.decoder-keys a { display: flex; flex-direction: column; gap: var(--s-1); padding-block: var(--s-3); border-top: 2px solid var(--on-rubber-line); font-size: var(--t-small); color: var(--muted); text-decoration: none; transition: border-color var(--m-fast), color var(--m-fast); }
.decoder-keys b { font-family: var(--semi); font-size: var(--t-lead); font-weight: 500; line-height: 1.2; color: var(--paper); }
.decoder-keys a:hover, .decoder-keys a[aria-current] { border-top-color: var(--red); color: var(--paper); }
.decoder-notes { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
.decoder-note { scroll-margin-top: calc(var(--header) + var(--s-3)); }
.decoder-note h3 { margin-bottom: var(--s-2); }
.decoder-note p { max-width: 52ch; color: var(--muted); }
.decoder-note:target h3 { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: .25em; }
.decoder-note[hidden] { display: none; }
.is-live .decoder-notes { display: block; min-height: 9.5rem; }
@media (min-width: 40rem) { .decoder-keys { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 64rem) {
  .decoder { padding-block: var(--s-8); }
    .is-live .decoder-notes { min-height: 7rem; }
  .decoder-notes:not(.is-live .decoder-notes) { grid-template-columns: repeat(3, 1fr); }
}

/* Home: "Sound familiar?", set as type */
.familiar { padding-block: var(--section); }
.familiar-list { display: grid; column-gap: var(--gap); }
.familiar-list a { --pad: var(--s-3); position: relative; display: block; padding-block: var(--pad-top, var(--pad)) var(--pad); border-bottom: 1px solid var(--line); font-family: var(--semi); font-size: var(--t-lead); font-weight: 500; line-height: 1.25; letter-spacing: -.01em; text-decoration: none; }
.familiar-end { margin-top: var(--s-4); }
.familiar-end a { text-underline-offset: .2em; white-space: nowrap; }
@media (min-width: 64rem) {
  .familiar-list { grid-template-columns: repeat(2, 1fr); }
  .familiar-list a { --pad: var(--s-4); }
}

/* Home: the garage's own photos, when there are any */
.frontage { padding-bottom: var(--section); }
.frontage-grid { display: grid; gap: var(--s-5); align-items: end; }
.frontage-art .frame, .frontage-art img { width: 100%; }
.frontage-side .frame { margin-bottom: var(--s-4); }
@media (min-width: 64rem) {
  .frontage-art { grid-column: 1 / span 8; }
  .frontage-side { grid-column: 9 / -1; }
}
.frame { position: relative; overflow: hidden; background: var(--primer); }
.frame--landscape { aspect-ratio: 3 / 2; }
.frame--portrait { aspect-ratio: 4 / 5; }
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* Every titled section, on every page. One rule across the whole section, then the title and the content. From 1024px they
   sit side by side with the first line of each on one baseline, whatever their sizes, as the browser lines them up.
   So the content's own first rule and first row's top padding go: it starts level with the title. tests/illustrations.mjs measures it. */
.sec { --sec-gap: var(--s-4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sec-gap) var(--gap); }
.sec::before { content: ""; grid-column: 1 / -1; height: 1px; background: var(--line); }
.split-text > * + *, .split-side > * + * { margin-top: var(--s-3); }
.split-text > h2 + *, .split-side > h2 + * { margin-top: var(--s-4); }
.visit-map, .gallery { align-self: start; }
.service:first-child, .sec > .rows li:first-child, .columns-main > .rows:first-child li:first-child, .sec > .signs li:first-child, .familiar-list li:first-child a { --pad-top: 0px; }
.sec > .rows, .columns-main > .rows:first-child, .sec > .signs { border-top: 0; }
.sec > .steps li:first-child { padding-top: 0; border-top: 0; }
.explainer li:first-child figure { padding-top: 0; border-top: 0; }
.columns-main > .figures:first-child > div:first-child { padding-top: 0; border-top: 0; }
@media (min-width: 40rem) {
  .sec > .signs li:nth-child(-n+2) { --pad-top: 0px; }
  .explainer figure { padding-top: 0; border-top: 0; }
  .columns-main > .figures:first-child > div { padding-top: 0; border-top: 0; }
  .columns-main > .figures:first-child > .figure--red::before { content: ""; position: absolute; left: 0; right: 0; top: -.75rem; height: 3px; background: var(--red); }
}
@media (min-width: 64rem) {
  .sec { --sec-gap: var(--s-5); grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: first baseline; }
  .sec > h2 { grid-column: 1 / span 3; }
  .sec > :not(h2) { grid-column: 4 / -1; }
  .sec > .columns-lead { grid-column: 4 / span 7; }
  .sec.cta-grid > div { grid-column: 4 / span 6; }
  .sec.split > .split-text, .visit-detail-grid > :first-child { grid-column: 1 / span 6; }
  .sec.split > .split-side, .visit-detail-grid > :last-child { grid-column: 7 / -1; }
  .sec.location-grid > .location-copy { grid-column: 1 / span 5; }
  .sec.location-grid > .visit-map { grid-column: 7 / -1; justify-self: end; }
  .sec > .signs li:nth-child(-n+3), .familiar-list li:nth-child(-n+2) a { --pad-top: 0px; }
  .sec > .steps li { padding-top: 0; border-top: 0; }
  /* A drawing has no first line of text to share, so the title starts level with its top instead */
  .sec:has(> .columns-main > .explainer:first-child) { align-items: start; }
  /* Tread depths and the like: the section's rule replaces theirs, and the red one sits on it */
  .columns-main > .figures:first-child > .figure--red::before { top: calc(-1 * var(--sec-gap) - 2px); }
}

/* Phones: Call and Directions, once the hero has gone */
.action-bar { display: none; }
@media (max-width: 55.99rem) {
  body { padding-bottom: calc(var(--bar) + env(safe-area-inset-bottom)); background: var(--rubber); }
  main { background: var(--white); }
  .action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding-bottom: env(safe-area-inset-bottom); background: var(--rubber); color: var(--paper); border-top: 1px solid var(--on-rubber-line); visibility: hidden; transform: translateY(100%); transition: transform var(--m-menu), visibility var(--m-menu); }
  .action-bar.is-visible { visibility: visible; transform: none; }
  .action-bar a { display: flex; align-items: center; justify-content: center; min-height: var(--bar); font-size: var(--t-nav); font-weight: 600; text-decoration: none; }
  .action-bar a + a { border-left: 1px solid var(--on-rubber-line); }
  .action-bar :focus-visible { outline-offset: -5px; }
}

/* Moving between pages: the header stays put and the content cross-fades */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-group(site-header) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Footer */
.site-footer { background: var(--rubber); color: var(--paper); padding-block: var(--s-7) var(--s-5); font-size: var(--t-small); }
.footer-grid { display: grid; gap: var(--s-6); }
.site-footer h2 { margin-bottom: var(--s-3); font-family: var(--font); font-size: var(--t-small); font-weight: 600; letter-spacing: 0; }
.site-footer p { margin-top: var(--s-3); }
.site-footer li { padding-block: var(--s-1); }
.footer-services { columns: 2; column-gap: var(--gap); }
.footer-services li { break-inside: avoid; }
@media (min-width: 64rem) { .footer-services { columns: 1; } }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: .25em; }
.site-footer .legal { margin-top: var(--s-7); color: var(--on-rubber-muted); }
@media (min-width: 64rem) {
  .footer-grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
  .footer-grid > :nth-child(1) { grid-column: 1 / span 3; }
  .footer-grid > :nth-child(2) { grid-column: 4 / span 3; }
  .footer-grid > :nth-child(3) { grid-column: 7 / span 3; }
  .footer-grid > :nth-child(4) { grid-column: 10 / -1; }
  /* Home: the visit block has the hours, so the rest sit on the page's usual lines */
  .footer-grid--no-hours > :nth-child(2) { grid-column: 4 / span 5; }
  .footer-grid--no-hours > :nth-child(3) { grid-column: 9 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}