/* Guttenberg Auto Body: brand prototype
   Shared tokens, base, wordmark, header, buttons, tape and photo-print "snapshots".
   Page sections (hero, etc.) keep their own layout rules in the page; the parts several pages share sit at the end of
   this file: the call-us block, the footer, the inner-page heading, the rolling insurer logos, the common questions,
   the before & after prints, a group's services sheet, "Find us" and the credentials card. */

:root {
  /* palette, sampled from the building */
  --mortar: #1E1B19;
  --stone-dark: #5E483F;
  --stone: #8F7568;
  --sandstone: #BFA697;
  --cream: #F3E9D8;
  --sign: #2C6146;
  --sign-shadow: #2E4338;
  --tape: #78C54B;
  --oxblood: #622A2F;

  /* derived */
  --tape-hover: #8AD55D;
  --sign-hover: #367555;
  --print: #F4E8D3;                       /* photo-print border, a shade warmer than cream */
  --print-edge: #E9DAC0;
  --hair: rgba(94, 72, 63, .18);          /* hairline rules on light backgrounds */
  --cream-88: rgba(243, 233, 216, .88);
  --cream-80: rgba(243, 233, 216, .80);
  --ink-shadow: 20, 14, 10;               /* rgb of the warm black used in shadows */

  /* type */
  --font-hero: "Caprasimo", "Fraunces", Georgia, serif;   /* hero headline ONLY */
  --font-head: "Fraunces", Georgia, serif;
  --font-body: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fraunces-soft: "SOFT" 100, "WONK" 1, "opsz" 96;

  /* layout */
  --wrap: 1312px;
  --gutter: clamp(20px, 4.4vw, 64px);
  --header-h: 88px;
  --topbar-h: 38px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--mortar);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure { margin: 0; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 100;
  background: var(--cream); color: var(--mortar);
  padding: 12px 18px; border-radius: 8px; font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 3px solid var(--tape); outline-offset: 3px; border-radius: 6px; }

/* ---------- hand-drawn line art (car mark, icons) ---------- */
.l { fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.f { fill: currentColor; }

/* ---------- service icons: the locked hand-drawn line set ----------
   One ink line over a tape-green blob, each with its own wobble filter:
   <svg class="ico" viewBox="0 0 64 64"><use href="#ico-col-b" class="blob" filter="url(#blobwob)"/><use href="#ico-col-l" class="line" filter="url(#wob)"/></svg>
   Mortar ink on light backgrounds, cream ink inside .on-dark. */
.ico { width: 46px; height: 46px; flex: none; overflow: visible; }
.ico .blob { color: var(--tape); }
.ico .line { color: var(--mortar); }
.on-dark .ico .line { color: var(--cream); }

/* ---------- web wordmark: car mark + stacked "Guttenberg / AUTO BODY" ---------- */
.wm { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.wm svg { width: 56px; height: 56px; flex: none; margin: -5px 0; }
.wm .blob { color: var(--tape); }
.wm .line { color: currentColor; }
.wm b {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-variation-settings: var(--fraunces-soft);
  font-size: 30px;
  line-height: .95;
  letter-spacing: -.005em;
}
.wm i {
  display: block;
  font-style: normal;
  font-weight: 700;
  font-size: 10.5px;
  line-height: 1.2;
  letter-spacing: .36em;
  text-transform: uppercase;
  margin-top: 4px;
  padding-left: 2px;
}

/* ---------- thin top bar: address, phone, hours, Español (as on the live site) ---------- */
.topbar {
  height: var(--topbar-h);
  background: rgba(20, 14, 10, .5);
  border-bottom: 1px solid rgba(243, 233, 216, .12);
  font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
  color: var(--cream-80);
}
.topbar__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topbar__addr, .topbar__phone { display: inline-flex; align-items: center; gap: 7px; }
.topbar svg { width: 14px; height: 14px; fill: none; stroke: var(--tape); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.topbar__right { display: inline-flex; align-items: center; gap: 22px; }
.topbar a { text-decoration: none; }
.topbar a:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 4px; }
.topbar__phone { color: var(--cream); }
.topbar__lang { padding-left: 20px; border-left: 1px solid rgba(243, 233, 216, .28); }
@media (max-width: 960px) {
  :root { --topbar-h: 34px; }
  .topbar { font-size: 12.5px; }
  .topbar__addr, .topbar__phone { display: none; }
  .topbar__right { width: 100%; justify-content: space-between; }
  .topbar__lang { border-left: 0; padding-left: 0; }
}

/* ---------- header (transparent, sits over the first section) ---------- */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  color: var(--cream);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
}
.nav { display: flex; align-items: center; gap: 28px; }
.nav__list { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav__list > li > a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 0;
  font-size: 16px; font-weight: 600; letter-spacing: .005em;
  text-decoration: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}
.nav__list > li > a:hover { text-decoration-line: underline; text-decoration-color: var(--tape); }
.nav__list .chev { width: 13px; height: 13px; opacity: .85; margin-top: 1px; }

.nav__lang {
  font-size: 14px; font-weight: 600;
  color: var(--cream-80);
  text-decoration: none;
  padding: 4px 0 4px 20px;
  border-left: 1px solid rgba(243, 233, 216, .3);
}
.nav__lang:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 5px; }

.site-header__compact { display: none; align-items: center; gap: 10px; }
.icon-btn {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer;
  text-decoration: none;
}
.icon-btn--call { background: var(--tape); color: var(--mortar); }
.icon-btn--call svg { width: 21px; height: 21px; }
.icon-btn--menu { background: transparent; color: var(--cream); }
.icon-btn--menu span { display: block; width: 24px; height: 2.5px; border-radius: 2px; background: currentColor; grid-area: 1 / 1; }
.icon-btn--menu span:nth-child(1) { transform: translateY(-7px); }
.icon-btn--menu span:nth-child(3) { transform: translateY(7px); width: 18px; justify-self: start; margin-left: 11px; }
.icon-btn--menu span { transition: transform .25s ease, opacity .2s ease, width .25s ease, margin .25s ease; }
.site-header.is-menu .icon-btn--menu span:nth-child(1) { transform: rotate(45deg); }
.site-header.is-menu .icon-btn--menu span:nth-child(2) { opacity: 0; }
.site-header.is-menu .icon-btn--menu span:nth-child(3) { transform: rotate(-45deg); width: 24px; margin-left: 0; justify-self: center; }

/* below 960px the full nav no longer fits: the call button and the menu button take its place */
@media (max-width: 960px) {
  .nav { display: none; }
  .site-header__compact { display: flex; }
}
/* phones: a tighter gutter, a shorter header and a smaller wordmark */
@media (max-width: 760px) {
  :root { --gutter: 16px; --header-h: 68px; }
  .wm { gap: 10px; }
  .wm svg { width: 38px; height: 38px; }
  .wm b { font-size: 24px; }
  .wm i { font-size: 8.6px; letter-spacing: .33em; margin-top: 3px; }
}

/* ---------- Services dropdown (computer) ----------
   "Services" is a button: with a mouse it opens on hover (after a short pause, so passing over it doesn't flash it open)
   and closes when the pointer leaves it; a tap or the keyboard (Enter, Space, or Down arrow) opens it until you tap
   away or press Esc.
   The panel is a sheet of the same cream paper as the review cards: the four service groups from the live site, each
   headed by its hand-drawn icon, and two taped-up prints on the right that change to the photos of whatever service
   you point at (Before / After when the shop has a pair), side by side and large enough to see. The page behind dims. */
.site-header__bar { position: relative; }
.nav__drop { position: static; }
.nav__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 0; border: 0; background: none; cursor: pointer;
  color: inherit; font: 600 16px/1.2 var(--font-body); letter-spacing: .005em;
  text-decoration: none; text-decoration-thickness: 2px; text-underline-offset: 8px;
}
.nav__btn:hover, .nav__drop.is-open .nav__btn { text-decoration-line: underline; text-decoration-color: var(--tape); }
/* the page you're on: its menu item keeps the tape-green underline */
.nav__btn.is-current, .nav__list > li > a[aria-current="page"] { text-decoration-line: underline; text-decoration-color: var(--tape); }
.nav__btn .chev { transition: transform .22s ease; }
.nav__drop.is-open .nav__btn .chev { transform: rotate(180deg); }

.mega {
  position: absolute; top: calc(100% - 8px); left: var(--gutter); right: var(--gutter);
  z-index: 2;
  color: var(--mortar);
  background: #FBF6EC;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(var(--ink-shadow), .2), 0 36px 70px -22px rgba(var(--ink-shadow), .75);
  opacity: 0; visibility: hidden; translate: 0 -8px;
  transition: opacity .16s ease, translate .16s ease, visibility 0s .16s;
}
.nav__drop.is-open .mega {
  opacity: 1; visibility: visible; translate: 0 0;
  transition: opacity .2s ease, translate .24s cubic-bezier(.2, .7, .2, 1), visibility 0s;
}
.mega :focus-visible { outline-color: var(--sign); }
.mega__in { display: grid; grid-template-columns: minmax(0, 1fr) min(560px, 46%); gap: 48px; padding: 32px 38px 30px; }
.mega__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; align-content: start; }   /* two by two, so the photos get room */
.mega__head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 13px; border-bottom: 1.5px solid var(--hair);
  color: var(--mortar); text-decoration: none;
  font-family: var(--font-head); font-weight: 700; font-variation-settings: var(--fraunces-soft);
  font-size: 19px; line-height: 1.15;
}
.mega__head .ico { width: 40px; height: 40px; margin: -5px 0 -5px -5px; }
.mega__head span, .mega__link span {
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 6px;
  transition: text-decoration-color .15s ease;
}
.mega__head:hover span, .mega__head:focus-visible span,
.mega__link:hover span, .mega__link:focus-visible span { text-decoration-color: var(--tape); }
.mega__list { margin: 10px 0 0; padding: 0; list-style: none; }
.mega__link {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 0;
  color: #44362F; text-decoration: none;
  font-size: 15px; font-weight: 500; line-height: 1.35;
}
.mega__link span { text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.mega__link:hover, .mega__link:focus-visible { color: var(--mortar); }
.mega__arrow { flex: none; width: 14px; height: 14px; color: var(--sign); opacity: 0; translate: -4px 0; transition: opacity .15s ease, translate .15s ease; }
.mega__link:hover .mega__arrow, .mega__link:focus-visible .mega__arrow { opacity: 1; translate: 0 0; }

.mega__side { display: flex; align-items: flex-start; justify-content: center; gap: 20px; padding-top: 10px; }
.mega__print {
  position: relative; display: block; flex: 1 1 0; min-width: 0;
  padding: 8px 8px 0;
  background: var(--print) linear-gradient(168deg, #F8EEDD 0%, var(--print) 45%, var(--print-edge) 100%);
  border-radius: 1.5px;
  color: var(--mortar); text-decoration: none;
  box-shadow: 0 1px 1px rgba(var(--ink-shadow), .3), 0 4px 8px rgba(var(--ink-shadow), .2), 0 16px 26px -8px rgba(var(--ink-shadow), .45);
  transition: translate .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease;
}
.mega__print:hover { translate: 0 -4px; box-shadow: 0 2px 2px rgba(var(--ink-shadow), .25), 0 10px 16px -4px rgba(var(--ink-shadow), .24), 0 30px 40px -14px rgba(var(--ink-shadow), .55); }
.mega__print--a { rotate: -1.6deg; }
.mega__print--b { rotate: 1.8deg; margin-top: 26px; }   /* side by side, barely turned, so both photos read clearly */
.mega__photo { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #2B2521; }
.mega__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .28s ease; }
.mega__photo img.is-on { opacity: 1; }
.mega__cap {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 6px 10px;
  font-family: var(--font-head); font-weight: 600; font-variation-settings: var(--fraunces-soft);
  font-size: 16px; line-height: 1.2; text-align: center; text-wrap: balance;
}
.mega__print .tape { --tape-w: 104px; --tape-h: 24px; top: -12px; left: 50%; transform: translateX(-50%) rotate(-4deg); }
.mega__print--b .tape { transform: translateX(-50%) rotate(5deg); }
.mega__foot { padding: 14px 38px 16px; border-top: 1.5px solid var(--hair); }

/* the page dims behind the open menu (it sits under the header, over everything else) */
.mega-scrim {
  position: fixed; inset: 0; z-index: -1;
  background: rgba(20, 14, 10, .45);
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility 0s .2s;
}
html.is-mega .mega-scrim { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; }

/* small laptops: the four groups in a row, no photos */
@media (max-width: 1099px) {
  .mega__in { grid-template-columns: minmax(0, 1fr); padding: 28px 30px 26px; }
  .mega__side { display: none; }
  .mega__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .mega__foot { padding-inline: 30px; }
}

/* ---------- phone + tablet menu ----------
   The menu button opens a sheet on the shop floor (like the footer) under the header: Services (opens to the same
   four groups and their services), Insurance, About Us, Contact, a big Call us button, the address and hours. The page
   behind can't scroll while it's open; Esc or the X closes it. */
.mnav { display: none; }
@media (max-width: 960px) {
  .site-header.is-menu { position: fixed; background: var(--mortar); }
  html.is-menu-open { overflow: hidden; }
  .mnav {
    display: block;
    position: absolute; top: 100%; left: 0; right: 0;
    height: calc(100dvh - var(--topbar-h) - var(--header-h));
    overflow-y: auto; overscroll-behavior: contain;
    background: linear-gradient(rgba(24, 20, 17, .9), rgba(24, 20, 17, .93)), url(/assets/tex/floor-8d7b55.webp) 0 0 / 720px auto repeat;
    color: var(--cream);
    visibility: hidden; opacity: 0; clip-path: inset(0 0 100% 0);
    transition: clip-path .3s cubic-bezier(.2, .7, .2, 1), opacity .2s ease, visibility 0s .3s;
  }
  .site-header.is-menu .mnav {
    visibility: visible; opacity: 1; clip-path: inset(0 0 0 0);
    transition: clip-path .34s cubic-bezier(.2, .7, .2, 1), opacity .2s ease, visibility 0s;
  }
  .mnav__in { display: flex; flex-direction: column; padding-top: 6px; padding-bottom: 40px; }
  .mnav__toggle, .mnav__link {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; padding: 17px 0;
    border: 0; border-bottom: 1px solid rgba(243, 233, 216, .14); background: none;
    color: var(--cream); text-decoration: none; text-align: left; cursor: pointer;
    font-family: var(--font-head); font-weight: 700; font-variation-settings: var(--fraunces-soft);
    font-size: 26px; line-height: 1.15;
  }
  .mnav__toggle .chev { width: 22px; height: 22px; color: var(--tape); transition: transform .25s ease; }
  .mnav__toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
  .mnav__toggle[aria-expanded="true"] { border-bottom-color: transparent; }
  .mnav__groups { padding: 2px 0 22px; border-bottom: 1px solid rgba(243, 233, 216, .14); }
  .mnav__groups:not([hidden]) { display: grid; gap: 16px; animation: mnav-in .28s cubic-bezier(.2, .7, .2, 1); }
  @keyframes mnav-in { from { opacity: 0; translate: 0 -6px; } }
  .mnav__head {
    display: flex; align-items: center; gap: 10px; padding: 6px 0;
    color: var(--cream); text-decoration: none;
    font-family: var(--font-head); font-weight: 700; font-variation-settings: var(--fraunces-soft);
    font-size: 20px; line-height: 1.15;
  }
  .mnav .ico .line { color: var(--cream); }
  .mnav__head .ico { width: 38px; height: 38px; margin: -4px 0 -4px -4px; }
  .mnav__group ul { margin: 0 0 0 44px; padding: 0; list-style: none; }
  .mnav__group li a { display: block; padding: 9px 0; color: var(--cream-80); text-decoration: none; font-size: 16.5px; line-height: 1.35; }
  .mnav__group li a:hover, .mnav__head:hover span { color: var(--cream); text-decoration: underline; text-decoration-color: var(--tape); text-underline-offset: 5px; }
  .mnav .text-link { color: var(--tape); }
  .mnav__all { justify-self: start; margin-top: 4px; }
  .mnav__call { margin-top: 28px; height: 58px; font-size: 18px; }
  .mnav__call svg { width: 20px; height: 20px; }
  .mnav__meta { display: grid; gap: 4px; margin-top: 18px; font-size: 14px; line-height: 1.45; color: var(--cream-80); text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .mega, .nav__drop.is-open .mega, .mnav, .site-header.is-menu .mnav, .mega-scrim, html.is-mega .mega-scrim { transition: none; }
  .mnav__groups:not([hidden]) { animation: none; }
}

/* ---------- buttons + links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 999px;
  font-family: var(--font-body); font-weight: 700;
  text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, transform .15s ease;
}
.btn svg { flex: none; }
.btn--tape {
  height: 56px; padding: 0 32px 0 26px;
  background: var(--tape); color: var(--mortar);
  font-size: 17.5px; letter-spacing: .005em;
  box-shadow: 0 8px 18px -8px rgba(var(--ink-shadow), .7);
}
.btn--tape svg { width: 21px; height: 21px; }
.btn--tape:hover { background: var(--tape-hover); transform: translateY(-1px); }
.btn--sign {
  height: 44px; padding: 0 20px 0 17px;
  background: var(--sign); color: var(--cream);
  font-size: 15px;
  box-shadow: inset 0 0 0 1px rgba(243, 233, 216, .18);
}
.btn--sign svg { width: 17px; height: 17px; }
.btn--sign:hover { background: var(--sign-hover); }
/* secondary button on light backgrounds: a Mortar outline that fills on hover */
.btn--ghost {
  height: 48px; padding: 0 24px 0 26px;
  background: transparent; color: var(--mortar);
  border: 1.5px solid var(--mortar);
  font-size: 16px; letter-spacing: .005em;
  transition: background-color .15s ease, color .15s ease;
}
.btn--ghost svg { width: 18px; height: 18px; transition: transform .15s ease; }
.btn--ghost:hover { background: var(--mortar); color: var(--cream); }
.btn--ghost:hover svg { transform: translateX(3px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 17.5px; font-weight: 600;
  color: var(--cream); text-decoration: none;
}
.link-arrow span {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 7px;
  text-decoration-color: rgba(243, 233, 216, .5);
  transition: text-decoration-color .15s ease;
}
.link-arrow svg { width: 19px; height: 19px; transition: transform .15s ease; }
.link-arrow:hover span { text-decoration-color: var(--tape); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------- tape ---------- */
/* A label printed on a torn strip of real green masking tape. */
.tape-label {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: 11px 28px 10px 27px;
  color: var(--mortar);
  font-family: var(--font-body);
  font-size: 13px; font-weight: 700; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-2deg);
}
.tape-label::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: url(/assets/tex/tape-3-a313af.webp) center / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 2px rgba(var(--ink-shadow), .45));
}
/* short words ("Before", "After"): the torn ends keep their shape and only the middle stretches */
.tape-label--short { padding-inline: 20px 19px; }
.tape-label--short::before {
  background: none;
  border-style: solid;
  border-width: 0 15px;
  border-image: url(/assets/tex/tape-2-43330f.webp) 0 54 fill / 0 15px stretch;
}

/* A short strip of tape (decorative). The torn ends keep their shape via border-image;
   only the middle of the strip stretches. Size it with --tape-w / --tape-h. */
.tape {
  --tape-w: 136px;
  --tape-h: 28px;
  position: absolute;
  z-index: 3;
  display: block;
  width: var(--tape-w);
  height: var(--tape-h);
  border-style: solid;
  border-width: 0 calc(var(--tape-h) * .52);
  border-image: url(/assets/tex/tape-1-c6b187.webp) 0 54 fill / 0 calc(var(--tape-h) * .52) stretch;
  filter: drop-shadow(0 1px 1.5px rgba(var(--ink-shadow), .5));
  pointer-events: none;
}
.tape--2 { border-image-source: url(/assets/tex/tape-2-43330f.webp); }
.tape--3 { border-image-source: url(/assets/tex/tape-3-a313af.webp); }
.tape--4 { border-image-source: url(/assets/tex/tape-4-e6c990.webp); }

/* ---------- snapshots: printed photos taped onto a scene ----------
   Sizes are in "design px" times --k, so a group of prints can scale as one.
   Set --k on the group (e.g. calc(100cqw / 600) inside a size container). */
.snap {
  --k: 1px;
  --ar: 4 / 3;
  --pos: 50% 50%;
  --r: 0deg;
  --side: 10;
  --foot: 30;
  position: absolute;
  margin: 0;
  padding: calc(var(--side) * var(--k)) calc(var(--side) * var(--k)) calc(var(--foot) * var(--k));
  background: var(--print) linear-gradient(168deg, #F8EEDD 0%, var(--print) 45%, var(--print-edge) 100%);
  border-radius: 1.5px;
  transform: rotate(var(--r));
  box-shadow:
    0 1px 1px rgba(var(--ink-shadow), .35),
    0 4px 8px rgba(var(--ink-shadow), .28),
    0 16px 30px -6px rgba(var(--ink-shadow), .55);
}
.snap__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ar);
  background: #2B2521;
}
.snap__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--pos);
  filter: brightness(1.14);        /* prints read a touch lighter than the graded scene behind them */
}
.snap__photo::after {             /* the faint edge where a print's photo meets its border */
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(var(--ink-shadow), .14);
  pointer-events: none;
}
.snap .tape {
  --tape-w: calc(var(--tw, 136) * var(--k));
  --tape-h: calc(var(--th, 28) * var(--k));
}

/* ---------- section labels + headings (shared by every section) ---------- */
.eyebrow {
  font: 700 13px/1.2 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sign);
  margin-bottom: 10px;
}
.on-dark .eyebrow { color: var(--tape); }
.h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-variation-settings: var(--fraunces-soft);
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.08;
  letter-spacing: -.005em;
  color: var(--mortar);
}
.on-dark .h2 { color: var(--cream); }
.text-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; color: var(--sign);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px;
}
.text-link svg { flex: none; transition: transform .2s ease; }
.text-link:hover svg { transform: translateX(3px); }

/* ---------- the last word: call us (shared by every page, just before the footer) ---------- */
.last { position: relative; isolation: isolate; overflow: hidden; background: var(--mortar); color: var(--cream); }
.last__photo {
  position: absolute; inset: 0 0 0 auto; z-index: -1;
  width: 62%; height: 100%; object-fit: cover; object-position: 50% 30%;
  /* the photo melts into the dark on its left, where the words sit */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 18%, #000 42%);
          mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 18%, #000 42%);
}
.last__inner { padding-block: 104px 108px; }
.last__copy { max-width: 600px; }
.last__title {
  font-family: var(--font-head); font-weight: 800;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  font-size: clamp(44px, 5.4vw, 78px); line-height: .98; letter-spacing: -.015em;
}
.last__lede { margin-top: 22px; max-width: 30em; font-size: 19px; line-height: 1.6; color: var(--cream-88); }
.last__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 30px; margin-top: 36px; }
.last .btn--tape { height: 68px; padding: 0 40px 0 32px; font-size: 21px; gap: 12px; }
.last .btn--tape svg { width: 24px; height: 24px; }
@media (max-width: 1099px) {
  .last__photo { width: 70%; }
  .last__copy { max-width: 520px; }
}
@media (max-width: 760px) {
  .last__photo {
    inset: 0 0 auto 0; width: 100%; height: 300px; object-position: 50% 28%;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
            mask-image: linear-gradient(180deg, #000 55%, transparent);
  }
  .last__inner { padding-block: 262px 64px; }
  .last__lede { font-size: 17.5px; }
  .last__actions { flex-direction: column; align-items: stretch; gap: 16px; }
  .last .btn--tape { width: 100%; }
  .last .link-arrow { align-self: center; }
}

/* ---------- footer on the shop floor (every page) ---------- */
.site-footer {
  background: linear-gradient(rgba(24, 20, 17, .82), rgba(24, 20, 17, .86)), url(/assets/tex/floor-8d7b55.webp) 0 0 / 720px auto repeat;
  color: var(--cream-80);
  border-top: 1px solid rgba(243, 233, 216, .08);
  font-size: 15.5px; line-height: 1.6;
}
.footer__cols { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1.1fr; gap: 48px; padding-block: 72px 56px; }
/* the official logo is a black-outlined sticker design, so it sits on a cream card taped to the floor */
.footer__badge {
  position: relative; display: inline-block; margin: 8px 0 22px;
  padding: 16px 20px 14px;
  background: var(--print) linear-gradient(168deg, #F8EEDD 0%, var(--print) 45%, var(--print-edge) 100%);
  border-radius: 2px;
  transform: rotate(-1.6deg);
  box-shadow: 0 1px 1px rgba(0,0,0,.35), 0 10px 22px -8px rgba(0,0,0,.7);
}
.footer__badge .tape { --tape-w: 110px; --tape-h: 24px; top: -12px; left: 50%; transform: translateX(-50%) rotate(3deg); }
.footer__logo { display: block; width: 236px; height: auto; }
.footer__about { max-width: 34ch; }
.footer__contact { margin-top: 18px; display: grid; gap: 8px; }
.footer__contact span, .footer__contact a { display: inline-flex; align-items: center; gap: 9px; }
.footer__contact svg { width: 15px; height: 15px; fill: none; stroke: var(--tape); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.footer__contact a { color: var(--cream); font-weight: 700; text-decoration: none; }
.site-footer h4 {
  margin: 0 0 14px;
  font: 700 12.5px/1.2 var(--font-body); letter-spacing: .16em; text-transform: uppercase;
  color: var(--tape);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--cream); text-decoration: underline; text-decoration-color: var(--tape); text-underline-offset: 4px; }
.footer__areas { margin-top: 0; }
.footer__hours + h4 { margin-top: 26px; }
.footer__legal {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 24px;
  padding-block: 22px 26px;
  border-top: 1px solid rgba(243, 233, 216, .12);
  font-size: 13.5px; color: rgba(243, 233, 216, .6);
}
.footer__legal nav { display: flex; gap: 22px; flex-wrap: wrap; }
@media (max-width: 1099px) {
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
}
@media (max-width: 760px) {
  .footer__cols { grid-template-columns: 1fr; gap: 34px; padding-block: 56px 40px; }
  .footer__logo { width: 210px; }
  .footer__services ul { grid-template-columns: 1fr 1fr; column-gap: 20px; }   /* two short columns instead of one long list */
  .footer__areas { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .site-footer ul { gap: 4px; }
  .footer__legal { flex-direction: column; align-items: flex-start; }
}

/* ---------- inner-page heading: no photo banner, the shop floor behind (services, insurance, …) ---------- */
.page-head {
  background: linear-gradient(rgba(24, 20, 17, .76), rgba(24, 20, 17, .84)), url(/assets/tex/floor-8d7b55.webp) 0 0 / 720px auto repeat;
  color: var(--cream);
  padding: calc(var(--topbar-h) + var(--header-h) + 40px) 0 62px;
}
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; font-weight: 600; color: var(--cream-80); }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .55; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--cream); text-decoration: underline; text-decoration-color: var(--tape); text-underline-offset: 4px; }
.page-head h1 {
  margin-top: 18px; max-width: 17ch;
  font-family: var(--font-head); font-weight: 800;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  font-size: clamp(40px, 4.4vw, 64px); line-height: 1; letter-spacing: -.015em;
}
.page-head__lede { margin-top: 18px; max-width: 34em; font-size: 19px; line-height: 1.6; color: var(--cream-88); }
@media (max-width: 760px) {
  .page-head { padding: calc(var(--topbar-h) + var(--header-h) + 28px) 0 44px; }
  .page-head h1 { font-size: 40px; }
  .page-head__lede { font-size: 17.5px; }
}

/* the heading's buttons, and a taped print of the page's photo on the right (insurance, service pages).
   Below 1100px the print drops out to keep the heading slim, unless the page has .page-head--photo (service pages, where
   the photo is the proof the shop does this work): then it sits under the buttons. */
.page-head__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); column-gap: 72px; align-items: center; }
.page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: 32px; }
.page-head__print { --ar: 4 / 3; --r: 2.2deg; position: relative; margin-right: 8px; }
.page-head__print .tape { --tw: 124; --th: 27; top: -13px; left: 50%; margin-left: -62px; transform: rotate(-3deg); }
@media (max-width: 1099px) {
  .page-head__in { grid-template-columns: minmax(0, 1fr); }
  .page-head__print { display: none; }
  .page-head--photo .page-head__print { display: block; justify-self: start; width: min(76%, 440px); margin: 44px 0 0 8px; }
}
@media (max-width: 760px) {
  .page-head__actions { gap: 16px 26px; margin-top: 26px; }
  .page-head--photo .page-head__print { width: calc(100% - 26px); margin-top: 36px; --side: 9; --foot: 26; }
  .page-head--photo .page-head__print .tape { --tw: 100; --th: 23; margin-left: -50px; }
}

/* ---------- insurer logos rolling by (home ribbon, insurance page, town pages) ---------- */
.logo-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logo-track { display: flex; width: max-content; animation: logo-roll 46s linear infinite; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-set { display: flex; align-items: center; gap: 64px; padding-right: 64px; height: 64px; }
.logo-set img {
  height: calc(var(--h) * var(--logo-scale, 1));
  width: auto; max-width: none;
  filter: grayscale(1) contrast(1.35) sepia(.35);   /* one warm stone-grey, so eleven brands read as one row */
  mix-blend-mode: multiply;
  opacity: .66;
}
@keyframes logo-roll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; width: auto; }
  .logo-set { flex-wrap: wrap; justify-content: center; height: auto; row-gap: 20px; }
  .logo-set[aria-hidden] { display: none; }
  .logo-marquee { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 960px) {
  .logo-set { gap: 40px; padding-right: 40px; height: 52px; }
  .logo-set img { --logo-scale: .74; }
}

/* ---------- common questions (home, insurance, service pages) ----------
   On a wall painted the green of the hanging sign (/assets/tex/green-086818.jpg: the shop-floor grain, recoloured), cream ink. */
.faq {
  --faq-ink: rgba(243, 233, 216, .86);
  --faq-rule: rgba(243, 233, 216, .26);
  background:
    radial-gradient(ellipse 80% 90% at 50% 50%, rgba(20, 30, 24, 0) 50%, rgba(20, 30, 24, .3) 100%),
    var(--tex-green) 0 0 / 720px auto repeat;
  color: var(--cream);
  padding: 84px 0 88px;
}
.faq .h2 { text-align: center; }
.faq__list { max-width: 880px; margin: 34px auto 0; border-top: 1.5px solid var(--faq-rule); }
.faq__item { border-bottom: 1.5px solid var(--faq-rule); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 20px 4px 20px 2px;
  cursor: pointer; list-style: none;
  font-family: var(--font-head); font-weight: 700; font-variation-settings: var(--fraunces-soft);
  font-size: 21px; line-height: 1.3;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary svg { flex: none; width: 26px; height: 26px; color: var(--tape); transition: transform .25s ease; }
.faq__item summary:hover { color: var(--tape-hover); }
.faq__item[open] summary svg { transform: rotate(45deg); }
.faq__item p { max-width: 68ch; padding: 0 2px 24px; font-size: 17px; line-height: 1.65; color: var(--faq-ink); }
/* the one-word answers ("Yes", "No", "same-day") get a stroke of green highlighter (a band, not a thin line, so it doesn't read as a link) */
.faq .yn {
  font-weight: 700; color: var(--cream);
  background: linear-gradient(transparent 56%, rgba(120, 197, 75, .42) 56%, rgba(120, 197, 75, .42) 94%, transparent 94%);
  padding: 0 2px;
}
@media (max-width: 760px) {
  .faq { padding: 60px 0 64px; }
  .faq .h2 { text-align: left; }
  .faq__item summary { font-size: 18.5px; padding: 18px 2px; }
  .faq__item p { font-size: 16.5px; }
}

/* ---------- before & after: each job one print on the block wall (service pages and the group pages) ---------- */
.svc-ba {
  --wash: rgba(243, 233, 216, .34);
  background: linear-gradient(var(--wash), var(--wash)), var(--tex-wall) 0 0 / 640px auto repeat;
  color: var(--mortar);
  padding: 80px 0 96px;
  overflow: hidden;
}
.svc-ba__head { text-align: center; }
.svc-ba__lede { margin-top: 10px; font-size: 18px; line-height: 1.5; color: #44362F; }
.svc-ba__jobs { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 48px 56px; margin-top: 52px; }
.svc-proof { margin-top: 36px; text-align: center; }
.svc-proof .text-link { font-size: 17px; }
.svc-proof svg { width: 18px; height: 18px; }
.work__why .svc-proof { margin-top: 28px; text-align: left; }
.job {
  --r: -1.2deg;
  position: relative;
  width: min-content;                                   /* as wide as its photos */
  max-width: 100%;
  margin: 0; padding: 10px 10px 30px;
  background: var(--print) linear-gradient(168deg, #F8EEDD 0%, var(--print) 45%, var(--print-edge) 100%);
  border-radius: 1.5px;
  transform: rotate(var(--r));
  box-shadow:
    0 1px 1px rgba(var(--ink-shadow), .35),
    0 4px 8px rgba(var(--ink-shadow), .24),
    0 16px 30px -8px rgba(var(--ink-shadow), .5);
}
.job:nth-child(2) { --r: 1.3deg; margin-top: 16px; }
.job__photos { display: grid; grid-auto-flow: column; grid-auto-columns: 232px; gap: 5px; }
.job__half { position: relative; display: block; aspect-ratio: 4 / 5; background: #2B2521; }
.job__half img { width: 100%; height: 100%; object-fit: cover; }
.job__half::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(var(--ink-shadow), .14); pointer-events: none; }
.job__half .tape-label { position: absolute; top: -27px; left: 12px; z-index: 1; font-size: 12.5px; transform: rotate(-3deg); }   /* across the print's top edge: half on the photo, half on the wall */
.job__half + .job__half .tape-label { transform: rotate(2deg); }
.job__half + .job__half .tape-label::before { border-image-source: url(/assets/tex/tape-4-e6c990.webp); }
/* Collision Repair: single prints of damaged cars, one row on computers, a row you swipe on tablets and phones */
.svc-ba--singles .svc-ba__jobs { flex-wrap: nowrap; gap: 30px; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 48px auto 0; padding: 0 var(--gutter); }
.job.job--single { flex: 1 1 0; width: auto; min-width: 0; padding-bottom: 34px; }
.job--single .job__photos { grid-auto-columns: minmax(0, 1fr); }
.job--single:nth-child(3) { --r: -.5deg; margin-top: 6px; }
.job--single:nth-child(4) { --r: 1.8deg; margin-top: 22px; }
.job--single:nth-child(5) { --r: -1.6deg; margin-top: 2px; }
.job--single .tape { --tape-w: 96px; --tape-h: 23px; top: -11px; left: 50%; margin-left: -48px; transform: rotate(-4deg); }
.job--single:nth-child(even) .tape { transform: rotate(5deg); }
@media (max-width: 1279px) {
  .job__photos { grid-auto-columns: 200px; }
}
@media (max-width: 1099px) {
  .svc-ba__rail { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; padding: 16px 0 24px; margin-top: 28px; }
  .svc-ba__rail::-webkit-scrollbar { display: none; }
  .svc-ba--singles .svc-ba__jobs { width: max-content; max-width: none; margin: 0; gap: 26px; }
  .job.job--single { flex: none; width: clamp(220px, 32vw, 280px); scroll-snap-align: start; }
}
@media (max-width: 760px) {
  .svc-ba { padding: 56px 0 64px; }
  .svc-ba__head { text-align: left; }
  .svc-ba__lede { font-size: 17px; }
  .svc-ba__jobs { gap: 40px; margin-top: 40px; }
  .job { width: 100%; padding: 8px 8px 24px; }
  .job:nth-child(2) { margin-top: 0; }
  .job.job--single { width: 62vw; padding-bottom: 28px; }
  .job--single:nth-child(n) { margin-top: 0; }
  .job__photos { grid-auto-columns: minmax(0, 1fr); gap: 4px; }
  .job__half .tape-label { top: -24px; font-size: 11.5px; left: 8px; }                   /* the phone print's border is 8px */
}

/* ---------- a group's services on one taped sheet: a row each, the service's icon, name and one line (the group pages
   on plain cream; the Collision Repair page on the stone, with the heading inside the sheet) ---------- */
.grp { background: var(--cream); color: var(--mortar); padding: 88px 0 100px; overflow: hidden; }
.grp :focus-visible { outline-color: var(--sign); }
.grp__head { max-width: 780px; margin: 0 auto; text-align: center; }
.grp__head .h2 { display: inline-flex; align-items: center; gap: 10px; text-wrap: balance; }
.grp__head .h2 .ico { flex: none; width: 56px; height: 56px; margin: -10px 0 -10px -8px; }
.grp__lede { margin-top: 14px; font-size: 18px; line-height: 1.65; color: #44362F; text-wrap: pretty; }
.grp__sheet {
  position: relative;
  max-width: 1080px; margin: 56px auto 0;
  padding: 30px 40px 26px;
  background: #FBF6EC;
  border-radius: 3px;
  transform: rotate(-.3deg);
  box-shadow:
    0 1px 1px rgba(var(--ink-shadow), .25),
    0 4px 8px -1px rgba(var(--ink-shadow), .22),
    0 22px 36px -12px rgba(var(--ink-shadow), .55);
}
.grp__sheet > .tape { --tape-w: 120px; --tape-h: 27px; top: -13px; }
.grp__sheet > .tape:nth-of-type(1) { left: 10%; transform: rotate(-4deg); }
.grp__sheet > .tape:nth-of-type(2) { right: 10%; transform: rotate(3deg); }
.grp__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.grp__list > li { border-top: 1px solid var(--hair); }
.grp__list > li:nth-child(-n+2) { border-top: 0; }
.grow {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 18px; column-gap: 16px; align-items: center;
  margin: 0 -14px; padding: 18px 14px;
  border-radius: 6px;
  color: inherit; text-decoration: none;
  transition: background-color .15s ease;
}
.grow .ico { width: 62px; height: 62px; margin: -5px; }
.grow h3 {
  font-family: var(--font-head); font-weight: 700; font-variation-settings: var(--fraunces-soft);
  font-size: 21px; line-height: 1.2; color: var(--mortar);
}
.grow p { margin-top: 4px; font-size: 15.5px; line-height: 1.5; color: #44362F; text-wrap: pretty; }
.grow__arrow { width: 18px; height: 18px; color: var(--sign); opacity: .55; transition: transform .15s ease, opacity .15s ease; }
.grow:hover { background: rgba(120, 197, 75, .14); }
.grow:hover .grow__arrow { opacity: 1; transform: translateX(3px); }
.grp--stone {
  background:
    radial-gradient(ellipse 80% 90% at 50% 50%, rgba(30, 27, 25, 0) 55%, rgba(30, 27, 25, .2) 100%),
    linear-gradient(rgba(30, 27, 25, .05), rgba(30, 27, 25, .05)),
    var(--tex-stone) 0 0 / 680px auto repeat;
  padding: 96px 0 104px;
}
.grp--stone .grp__sheet { margin-top: 0; padding-top: 38px; }
.grp--stone .grp__head { max-width: none; margin: 0 0 4px; padding-bottom: 18px; text-align: left; border-bottom: 1.5px solid var(--hair); }
.grp--stone .grp__head .h2 { font-size: clamp(26px, 2.4vw, 34px); }
@media (max-width: 1099px) {
  .grp__sheet { padding: 26px 30px 22px; }
  .grp__list { column-gap: 32px; }
}
@media (max-width: 760px) {
  .grp { padding: 56px 0 68px; }
  .grp__head { text-align: left; }
  .grp__head .h2 .ico { width: 48px; height: 48px; margin: -8px 0 -8px -6px; }
  .grp__lede { font-size: 16.5px; line-height: 1.6; }
  .grp__sheet { margin: 40px calc(8px - var(--gutter)) 0; padding: 20px 18px 14px; transform: rotate(-.4deg); }
  .grp__sheet > .tape { --tape-w: 96px; --tape-h: 23px; top: -11px; }
  .grp__list { grid-template-columns: minmax(0, 1fr); }
  .grp__list > li:nth-child(2) { border-top: 1px solid var(--hair); }
  .grow { grid-template-columns: 44px minmax(0, 1fr) 16px; column-gap: 12px; margin: 0 -8px; padding: 14px 8px; }
  .grow .ico { width: 54px; height: 54px; }
  .grow h3 { font-size: 18.5px; }
  .grow p { font-size: 14.5px; line-height: 1.45; }
  .grow__arrow { width: 16px; height: 16px; }
  .grp--stone { padding: 56px 0 64px; }
  .grp--stone .grp__sheet { margin-top: 0; padding-top: 30px; }
  .grp--stone .grp__head { padding-bottom: 14px; }
}

/* ---------- find us: the towns as tape labels beside the map in a taped print (home, Contact) ---------- */
.findus { background: var(--cream); color: var(--mortar); padding: 80px 0; }
.findus__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.findus__lede { margin-top: 16px; max-width: 34em; font-size: 17px; line-height: 1.65; color: var(--stone-dark); }
.findus__towns { display: flex; flex-wrap: wrap; gap: 14px 12px; list-style: none; margin: 26px 0 30px; padding: 0; }
.findus__towns .tape-label { font-size: 12.5px; padding: 10px 22px 9px 21px; }
/* each label pressed on by hand: no two at the same angle */
.findus__towns li:nth-child(5n+1) { transform: rotate(-2deg); }
.findus__towns li:nth-child(5n+2) { transform: rotate(1.4deg) translateY(2px); }
.findus__towns li:nth-child(5n+3) { transform: rotate(-.8deg); }
.findus__towns li:nth-child(5n+4) { transform: rotate(2deg) translateY(-1px); }
.findus__towns li:nth-child(5n+5) { transform: rotate(-1.5deg) translateY(1px); }
.findus__towns li:nth-child(5n+5)::before { background-image: url(/assets/tex/tape-4-e6c990.webp); }
.findus__towns li:nth-child(5n+2)::before { background-image: url(/assets/tex/tape-1-c6b187.webp); }
.findus__map {
  position: relative;
  margin: 0;
  padding: 10px 10px 26px;
  background: var(--print) linear-gradient(168deg, #F8EEDD 0%, var(--print) 45%, var(--print-edge) 100%);
  border-radius: 1.5px;
  transform: rotate(.8deg);
  box-shadow:
    0 1px 1px rgba(var(--ink-shadow), .3),
    0 4px 8px rgba(var(--ink-shadow), .18),
    0 18px 34px -10px rgba(var(--ink-shadow), .42);
}
.findus__map iframe {
  display: block; width: 100%; height: 360px; border: 0;
}
.findus__map .tape { --tape-w: 120px; --tape-h: 26px; top: -12px; }
.findus__map .tape:first-of-type { left: -26px; transform: rotate(-32deg); }
.findus__map .tape:last-of-type  { right: -26px; transform: rotate(30deg); }
@media (max-width: 960px) {
  .findus { padding: 64px 0; }
  .findus__inner { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .findus__map { transform: rotate(.5deg); margin-inline: 6px; }
}
@media (max-width: 760px) {
  .findus { padding: 56px 0 60px; }
  .findus__lede { font-size: 16.5px; }
  .findus .btn { width: 100%; justify-content: center; }
  .findus__map iframe { height: 260px; }
  .findus__map .tape { --tape-w: 96px; --tape-h: 22px; }
  .findus__map .tape:first-of-type { left: -14px; }
  .findus__map .tape:last-of-type  { right: -14px; }
}

/* ---------- credentials: why bring your car here (home section 5, the town pages) ----------
   "Why bring your car here" on the shop's stone in its own colours (the front of the building): the heading and the
   four reasons as a ticked list on a cream card, held to the stone by the eyebrow's strip of tape (left); the Gold
   Class plaque as a printed photo with a round rubber stamp pressed over its bottom-right corner, part on the print
   and part on the stone (right).
   The stamp is drawn twice from one symbol, in the same spot: once on the stone, under the print (so the print's
   shadow falls across it), and once inside the print, multiplied into the paper. It reads as one stamp.
   Tablet and phone stack: text, then the print. */
.creds {
  position: relative;
  overflow: hidden;                                      /* the turned print and the stamp never push the page sideways */
  background:
    radial-gradient(ellipse 80% 90% at 50% 50%, rgba(30, 27, 25, 0) 55%, rgba(30, 27, 25, .2) 100%),   /* a little shade at the edges, so the card and print come forward */
    linear-gradient(rgba(30, 27, 25, .05), rgba(30, 27, 25, .05)),
    var(--tex-stone) 0 0 / 680px auto repeat;
  color: var(--mortar);
  padding: 88px 0;
}
.creds :focus-visible { outline-color: var(--sign); }
.creds__copy {                                           /* the card: same paper and shadow as the reviews summary */
  position: relative;
  padding: 50px 44px 38px;
  border-radius: 3px;
  background: #FBF6EC;
  box-shadow:
    0 1px 1px rgba(var(--ink-shadow), .25),
    0 4px 8px -1px rgba(var(--ink-shadow), .22),
    0 22px 36px -12px rgba(var(--ink-shadow), .6);
  transform: rotate(-.6deg);
}
.creds__copy::after {                                    /* a second, plain strip on the top-right corner */
  content: "";
  position: absolute; top: -10px; right: -26px;
  width: 104px; height: 26px;
  background: url(/assets/tex/tape-1-c6b187.webp) center / 100% 100% no-repeat;
  filter: drop-shadow(0 1px 1.5px rgba(var(--ink-shadow), .5));
  transform: rotate(38deg);
}
.creds__in { display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); column-gap: 64px; align-items: center; }
.creds__kicker { position: absolute; top: -19px; left: 34px; margin: 0; }   /* the eyebrow's tape is what holds the card up */
.creds .h2 { font-size: clamp(28px, 2.8vw, 40px); text-wrap: balance; }
.creds__list { margin: 26px 0 0; padding: 0; list-style: none; }
.creds__list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 14px; padding: 10px 0; }
.creds__list li:first-child { padding-top: 0; }
.creds__list li:last-child { padding-bottom: 0; }
.creds__list li + li { border-top: 1px solid var(--hair); }
.creds__tick { width: 20px; height: 20px; margin-top: 4px; color: var(--sign); overflow: visible; }
.creds__list p { font-size: 17px; line-height: 1.6; color: #44362F; text-wrap: pretty; }
.creds__list strong { font-weight: 700; color: var(--mortar); }

/* the print and its stamp turn together; the wrapper is a size container, so the stamp keeps its size and place
   relative to the print at every width (--st = stamp diameter; its offsets are fractions of it) */
.creds__media {
  position: relative;
  justify-self: start;
  width: min(480px, 100% - 56px);
  margin-bottom: 28px;                                   /* centres print + stamp together, not the print alone */
  container-type: inline-size;
  transform: rotate(-2deg);
}
.creds__print { --ar: 6 / 5; --pos: 0 50%; --side: 12; --foot: 36; --r: 0deg; position: relative; z-index: 1; overflow: hidden; }   /* 6:5 crops the green blur off the right edge */
.creds__stamp {
  --st: clamp(104px, 32cqw, 166px);
  position: absolute;
  right: calc(var(--st) * -.4);
  bottom: calc(var(--st) * -.34);
  width: var(--st); height: var(--st);
  color: var(--sign);
  opacity: .88;                                          /* on the stone: a little of the stone shows through the ink */
  transform: rotate(-10deg);                             /* -12deg on the page, with the print's -2deg */
  pointer-events: none;
}
.creds__print .creds__stamp { opacity: 1; mix-blend-mode: multiply; }   /* on the print: the ink soaks into the paper */

/* tablet: text, then the print centred below it */
@media (max-width: 1099px) {
  .creds { padding: 72px 0 80px; }
  .creds__in { grid-template-columns: minmax(0, 1fr); }
  .creds__copy { max-width: 680px; }
  .creds__copy::after { right: -20px; }
  .creds__media { justify-self: center; width: min(70%, 560px); margin: 52px 0 40px; }
}

/* phone: the print runs the width of the column, less room on the right for the stamp to stick out */
@media (max-width: 760px) {
  .creds { padding: 52px 0 56px; }
  .creds__copy { padding: 40px 22px 26px; transform: rotate(-.4deg); }
  .creds__copy::after { top: -8px; right: -12px; width: 84px; height: 22px; }
  .tape-label.creds__kicker { top: -17px; left: 18px; font-size: 12px; padding: 10px 22px 9px 21px; letter-spacing: .13em; }
  .creds__list { margin-top: 22px; }
  .creds__list li { grid-template-columns: 18px minmax(0, 1fr); column-gap: 12px; }
  .creds__tick { width: 18px; height: 18px; margin-top: 3px; }
  .creds__list p { font-size: 16px; line-height: 1.55; }
  .creds__media { justify-self: start; width: calc(100% - 26px); margin: 40px 0 34px 6px; }   /* the 6px keeps the turned corner inside the gutter */
  .creds__print { --side: 9; --foot: 27; }
  .creds__stamp { right: calc(var(--st) * -.17); }
}