/* Southam Bodies. From Greg's new workshop sign: a black board with white, wide lettering
   (Archivo, set wide), and the yellow of his number plate for the call buttons only. White and
   primer grey for the rest, so the photos of the cars carry the colour. Light only. Every text
   colour passes WCAG AA where it's used.
   Three weights (400 text, 600 emphasis, 700 headings and the name), spacing on an 8px grid,
   and two widths where the layout changes: 600px (tablets) and 900px (computers). */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/fonts/archivo.woff2') format('woff2');
}
:root {
  --sign: #1B1C1E;       /* the sign board */
  --sign-line: #3D3F43;  /* lines on the sign board */
  --on-sign: #FFFFFF;
  --on-sign-soft: #C4C6C9;
  --white: #FFFFFF;
  --primer: #EDEEEC;     /* primer grey, for the quieter sections */
  --ink: #1B1C1E;
  --text: #33363A;
  --muted: #5C6066;
  --line: #D5D7D9;
  --plate: #F7CE10;      /* his number plate */
  --plate-hover: #FFDC3A;
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body { margin: 0; background: var(--white); color: var(--text); font-family: var(--font); font-size: 17px; line-height: 1.6; font-stretch: 100%; -webkit-font-smoothing: antialiased; }
@media (min-width: 900px) { body { font-size: 18px; } }
h1, h2, h3 { margin: 0; color: var(--ink); font-weight: 700; line-height: 1.1; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.1rem + 4vw, 4.25rem); font-stretch: 120%; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.6rem); font-stretch: 115%; letter-spacing: -0.01em; }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem); font-stretch: 110%; line-height: 1.15; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid #2F6FE4; outline-offset: 3px; border-radius: 2px; }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 600px) { .wrap { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 900px) { .wrap { padding-left: 48px; padding-right: 48px; } }
.narrow { max-width: 900px; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 10; background: var(--plate); color: var(--ink); padding: 12px 16px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 16px; }
.soft { color: var(--muted); }

/* buttons: the plate (yellow) is the main one, the outline is the other */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 20px; border: 2px solid transparent; border-radius: 6px; font-family: var(--font); font-size: 16px; font-weight: 700; font-stretch: 105%; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, transform .1s var(--ease-out); }
.btn svg { flex: none; }
.btn:active { transform: scale(0.97); }
.btn-plate { background: var(--plate); color: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--plate); }
@media (hover: hover) and (pointer: fine) { .btn-plate:hover { background: var(--plate-hover); } }
.btn-line { background: transparent; color: currentColor; border-color: currentColor; overflow-wrap: anywhere; text-align: center; }
@media (hover: hover) and (pointer: fine) { .btn-line:hover { background: rgba(127, 127, 127, 0.12); } }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* header: the sign board. The name is set like the sign's lettering. */
.top { background: var(--sign); color: var(--on-sign); }
.top-row { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; }
.brand { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; margin: -4px auto -4px 0; text-decoration: none; color: var(--on-sign); }
.brand .name { font-size: clamp(15.5px, 1.4vw + 11px, 19px); font-weight: 700; font-stretch: 118%; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.1; }
.brand .tag { font-size: 13px; color: var(--on-sign-soft); letter-spacing: 0.01em; line-height: 1.3; }
.nav { order: 3; width: 100%; border-top: 1px solid var(--sign-line); padding-top: 4px; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px 24px; flex-wrap: wrap; }
.nav a { display: inline-block; padding: 10px 0; color: var(--on-sign); text-decoration: none; font-weight: 600; font-stretch: 105%; border-bottom: 2px solid transparent; }
.nav a[aria-current="page"], .nav a:hover { border-bottom-color: var(--plate); }
.call { min-height: 44px; padding: 8px 12px; }
.call .num { display: none; }
@media (min-width: 600px) {
  .call { padding: 8px 16px; }
  .call .num { display: inline; }
}
@media (min-width: 900px) {
  .brand .name { font-size: clamp(19px, 1.1vw + 9px, 23px); font-stretch: 125%; letter-spacing: 0.05em; }
  .brand .tag { font-size: 14px; }
  .top-row { column-gap: 28px; }
  .nav { order: 0; width: auto; border: 0; padding: 0; }
  .nav ul { gap: 28px; }
}

/* the opening: the rest of the sign board, then the photo */
.hero { background: var(--sign); color: var(--on-sign-soft); }
.hero h1 { color: var(--on-sign); }
.hero a:not(.btn) { color: var(--on-sign); }
.hero-grid { display: grid; gap: 24px; padding-top: 32px; padding-bottom: 32px; }
.hero-side { display: grid; gap: 16px; align-content: start; max-width: 65ch; }
.hero-side > p:first-child { color: var(--on-sign); font-size: 1.08em; }
.hero .btn-line { color: var(--on-sign); }
.hero-rating { font-size: 15px; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.15fr 1fr; gap: 56px; padding-top: 56px; padding-bottom: 56px; align-items: end; }
}
.hero-photo { position: relative; }
.hero-photo .photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 600px) { .hero-photo .photo img { aspect-ratio: 16 / 10; max-height: 78vh; } }
.hero-contact .hero-grid { padding-bottom: 40px; }

/* photos: each wipes into view once, like a pass of the spray gun (only with motion on).
   The wipe takes 0.9 seconds: longer than the buttons' 0.1 to 0.2, on purpose, as it's a one-off
   reveal of a photo rather than an answer to a tap. */
.photo { display: block; position: relative; margin: 0; background: var(--primer); }
.photo img { width: 100%; height: auto; }
.photo figcaption { background: var(--white); padding: 8px 0 0; font-size: 15px; color: var(--muted); }
.motion .wipe:not(.first) { clip-path: inset(0 100% 0 0); }
.motion .wipe.in:not(.first) { clip-path: inset(0 0 0 0); transition: clip-path .9s var(--ease-out); }
/* the top photo is drawn straight away (so it isn't slow to appear) under a strip of the sign
   board, which slides off it */
.motion .wipe.first::after { content: ""; position: absolute; inset: 0; background: var(--sign); transform-origin: right center; }
.motion .wipe.first.in::after { transform: scaleX(0); transition: transform .9s var(--ease-out); }

/* sections */
section { scroll-margin-top: 8px; }
.services, .work, .faq, .detail, .about-short { padding: 56px 0; }
@media (min-width: 900px) { .services, .work, .faq, .detail, .about-short { padding: 88px 0; } }
.sec-head { display: grid; gap: 12px; margin-bottom: 32px; max-width: 70ch; }
@media (min-width: 900px) { .sec-head { margin-bottom: 40px; } }

/* services: a plain list with lines between */
.faq + .services { border-top: 1px solid var(--line); }
.svc { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.svc li { display: grid; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.svc-text { display: grid; gap: 8px; align-content: start; max-width: 65ch; }
.svc h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem); font-stretch: 115%; }
.svc h3 a { display: inline-block; padding: 10px 0; margin: -6px 0; text-decoration: none; }
.svc h3 a:hover { text-decoration: underline; }
.svc .more a { display: inline-block; padding: 12px 0; margin: -12px 0; font-weight: 600; }
.svc .photo img { aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 900px) {
  .svc li { grid-template-columns: 1fr 320px; gap: 48px; align-items: center; padding: 32px 0; }
  .svc .photo img { aspect-ratio: 4 / 3; }
}

/* reviews: words first, plain, with lines between */
.reviews { background: var(--primer); padding: 56px 0; }
@media (min-width: 900px) { .reviews { padding: 88px 0; } }
.rating { color: var(--text); }
.rating a { font-weight: 600; }
.quotes { list-style: none; margin: 0; padding: 0; display: grid; border-top: 2px solid var(--ink); }
.quotes li { padding: 24px 0; border-bottom: 1px solid #C9CBCD; display: grid; gap: 12px; align-content: start; }
.quotes blockquote { margin: 0; display: grid; gap: 8px; color: var(--ink); font-size: 1.05em; }
.quotes .who { font-weight: 600; font-stretch: 105%; color: var(--text); font-size: 15px; }
@media (min-width: 900px) {
  .quotes { grid-template-columns: 1fr 1fr; column-gap: 56px; }
  .quotes li { padding: 32px 0; }
  .quotes li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .quotes li:last-child:nth-child(odd) blockquote { max-width: 70ch; }
}

/* at the workshop */
.gallery { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .gallery { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery .photo img { aspect-ratio: 4 / 3; object-fit: cover; }

/* about Greg */
.about-short { background: var(--white); border-top: 1px solid var(--line); }
.about-grid { display: grid; gap: 32px; }
.about-grid > div:last-child { display: grid; gap: 16px; align-content: start; max-width: 65ch; }
.plate-col { display: grid; gap: 24px; align-content: start; }
.plate { width: 100%; max-width: 360px; height: auto; }
/* a link on a line of its own: a bigger tap area, without moving anything */
.go { display: inline-block; padding: 12px 0; margin: -12px 0; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } }

/* service and about pages: the words, and photos beside them */
.detail-grid { display: grid; gap: 32px; }
.prose { display: grid; gap: 16px; align-content: start; max-width: 65ch; }
.prose h2 + p { margin-top: -4px; }
.prose h2:not(:first-child) { margin-top: 24px; }
.side-photos { display: grid; gap: 24px; align-content: start; }
.side-photos .photo img { aspect-ratio: 4 / 3; object-fit: cover; }
.side-photos .photo.whole img { aspect-ratio: auto; }
@media (min-width: 900px) { .detail-grid { grid-template-columns: 1.1fr 1fr; gap: 64px; } }

/* questions: tap to open */
.faq { background: var(--white); border-top: 1px solid var(--line); }
.faq h2 { margin-bottom: 24px; }
.qa { border-top: 2px solid var(--ink); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; min-height: 56px; color: var(--ink); font-weight: 600; font-stretch: 105%; font-size: 1.05em; line-height: 1.4; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: transform .2s var(--ease-out); }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa details p { padding: 0 0 24px; max-width: 65ch; }

/* contact: back on the sign board */
.contact { background: var(--sign); color: var(--on-sign-soft); padding: 56px 0; }
@media (min-width: 900px) { .contact { padding: 88px 0; } }
.contact h2 { color: var(--on-sign); }
.contact a:not(.btn) { color: var(--on-sign); }
.contact .btn-line { color: var(--on-sign); }
.contact-grid { display: grid; gap: 32px; }
.contact-grid > div:first-child { display: grid; gap: 16px; align-content: start; max-width: 65ch; }
.contact-page { padding-top: 0; }
.details { margin: 0; border-top: 2px solid var(--on-sign); }
.details > div { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--sign-line); }
.details dt { color: var(--on-sign-soft); font-size: 15px; }
.details dd { margin: 0; color: var(--on-sign); font-weight: 600; overflow-wrap: anywhere; }
.details dd > a:first-child:last-child { display: inline-block; padding: 10px 0; margin: -10px 0; }
.details .soft { color: var(--on-sign-soft); font-weight: 400; }
@media (min-width: 600px) { .details > div { grid-template-columns: 120px 1fr; gap: 16px; } }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
.contact-photo { padding-top: 40px; padding-bottom: 8px; }
.contact-photo .photo img { aspect-ratio: 16 / 9; object-fit: cover; }

/* footer */
.foot { background: var(--primer); color: var(--text); padding: 48px 0 32px; font-size: 15.5px; }
.foot-grid { display: grid; gap: 32px; }
.foot-grid > div:first-child { display: grid; gap: 8px; align-content: start; }
.foot-name img { width: 220px; height: auto; }
.foot-h { font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li a { display: inline-block; padding: 10px 0; }
@media (min-width: 600px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > div:first-child { grid-column: 1 / -1; } }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.2fr 1fr 1fr; } .foot-grid > div:first-child { grid-column: auto; } }
.legal { margin-top: 32px; padding-top: 24px; border-top: 1px solid #C9CBCD; display: grid; gap: 8px; color: var(--muted); font-size: 14.5px; }
.legal p { max-width: 75ch; }

/* the quote form (quote.js), on the sign board: one question at a time, and the answer
   chosen takes the plate's yellow */
.qf-wrap { display: grid; gap: 24px; margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--sign-line); }
.qf-head { display: grid; gap: 12px; align-content: start; max-width: 30rem; }
@media (min-width: 900px) { .qf-wrap { grid-template-columns: 1fr 1fr; gap: 64px; } }
.qf, .qf-plain, .qf-note { max-width: 38rem; }
/* the enquiry form sits in its own frame, named at the top, so it reads as a form to fill in and send */
.qf, .qf-plain { padding: 14px 18px 24px; border: 1px solid; }
@media (min-width: 600px) { .qf, .qf-plain { padding: 18px 28px 32px; } }
.qf-form-name { margin: 0; font-size: 16px; font-weight: 700; }
.qf-plain .qf-form-name { margin: 8px 0 20px; }
.qf[hidden], .qf-plain[hidden], .qf-step[hidden], .qf-back[hidden], .qf-error[hidden] { display: none; }
.qf-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }
.qf-progress { margin: 0 0 6px; font-size: 14.5px; }
.qf-back, .qf-again { min-height: 44px; padding: 8px 4px; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.qf-back { margin-right: -4px; }
.qf-bar { height: 3px; margin: 4px 0 22px; }
.qf-bar span { display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s cubic-bezier(.23, 1, .32, 1); }
.qf-q { margin: 0 0 16px; }
.qf-q:focus { outline: none; } /* focus only moves here so screen readers read the question */
.qf-opts { margin: 0; padding: 0; list-style: none; border-top: 1px solid; }
.qf-opts li { border-bottom: 1px solid; }
.qf-opt { display: flex; align-items: center; width: 100%; min-height: 56px; padding: 14px 16px; border: 0; border-radius: 0; background: none; font: inherit; font-size: 17px; font-weight: 600; line-height: 1.3; text-align: left; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease, color .15s ease; }
.qf-opt:focus-visible { outline-offset: -3px; }
.qf-fields { display: grid; gap: 18px; }
.qf-field { display: grid; gap: 6px; }
.qf-field label { font-size: 15px; font-weight: 600; }
.qf-field label span { font-weight: 400; }
.qf-field input, .qf-field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid; border-radius: 2px; font: inherit; font-size: 16px; line-height: 1.4; }
.qf-field textarea { min-height: 110px; resize: vertical; }
.qf-error { margin: 0; font-size: 15px; font-weight: 600; }
.qf-next, .qf-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 24px 0 0; }
.qf-preview { margin: 0; padding: 18px 20px; border: 1px solid; border-left-width: 3px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.55; }
.qf-plain .qf-fields { margin-bottom: 20px; }
.qf-note { margin: 20px 0 0; font-size: 14px; }
/* the next question slides in from the side it came from */
@media (prefers-reduced-motion: no-preference) {
  .qf-in { animation: qf-in .26s cubic-bezier(.23, 1, .32, 1); }
  .qf-in-back { animation: qf-in-back .26s cubic-bezier(.23, 1, .32, 1); }
}
@media (prefers-reduced-motion: reduce) { .qf-bar span, .qf-opt { transition: none; } }
@keyframes qf-in { from { opacity: 0; transform: translateX(12px); } }
@keyframes qf-in-back { from { opacity: 0; transform: translateX(-12px); } }

.qf-title { color: var(--on-sign); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); font-stretch: 112%; }
.qf-intro, .qf-progress, .qf-note, .qf-field label span { color: var(--on-sign-soft); }
.qf-q { color: var(--on-sign); font-size: clamp(1.4rem, 1.25rem + .6vw, 1.75rem); font-weight: 700; font-stretch: 112%; line-height: 1.15; }
.qf-back, .qf-again, .qf-field label, .qf-opt, .qf-preview { color: var(--on-sign); }
.qf-bar { background: var(--sign-line); }
.qf-bar span { background: var(--plate); }
.qf-opts, .qf-opts li { border-color: #55575B; }
.qf, .qf-plain { border-color: #55575B; background: #222326; }
.qf-form-name { color: var(--on-sign); font-stretch: 105%; }
.qf-opt:active { background: #303135; }
@media (hover: hover) and (pointer: fine) { .qf-opt:hover { background: #303135; } }
.qf-opt[aria-pressed="true"] { background: var(--plate); color: var(--ink); }
.qf-opt:focus-visible { outline: 3px solid #fff; }
.qf-opt[aria-pressed="true"]:focus-visible { outline-color: var(--ink); }
.qf-field input, .qf-field textarea { background: #26272A; border-color: #6A6C70; color: var(--on-sign); }
.qf-field input::placeholder, .qf-field textarea::placeholder { color: #A9ABAF; }
.qf-field input[aria-invalid="true"] { border-color: var(--plate); }
.qf-error { color: var(--plate); }
.qf-preview { border-color: var(--sign-line); border-left-color: var(--plate); background: #232427; }
.brand img { width: clamp(124px, 5vw + 104px, 176px); height: auto; }