/* ============================================================================
   Mobile Tyre Fitting Epsom — design system layer (v12)

   Loaded AFTER global.css. Its job is to impose one consistent system over
   the component sheet, and to carry the components added in v12.

   Audit of v11 found, and this file fixes:
     25 font size/weight pairs  ->  8-step scale
     9  image aspect ratios     ->  3
     3  section paddings        ->  2
     5  border radii            ->  3
     16 text colours            ->  5
   ========================================================================= */

:root {
  /* ---- type scale: 8 steps, nothing else is permitted ---- */
  --fs-xs:   0.75rem;                          /* 12  eyebrow, meta, badges   */
  --fs-sm:   0.875rem;                         /* 14  captions, small print   */
  --fs-base: 1rem;                             /* 16  body                    */
  --fs-md:   1.125rem;                         /* 18  lead paragraphs         */
  --fs-lg:   1.375rem;                         /* 22  h3                      */
  --fs-xl:   1.75rem;                          /* 28  small headings, stats   */
  --fs-2xl:  clamp(1.9rem, 3.1vw, 2.6rem);     /*     h2                      */
  --fs-3xl:  clamp(2.2rem, 4.2vw, 3.1rem);     /*     h1                      */

  /* ---- weights: four, mapped to roles ---- */
  --fw-body: 400;
  --fw-med:  600;
  --fw-bold: 700;
  --fw-dis:  800;

  /* ---- spacing: two section rhythms ---- */
  --sp-section: clamp(4rem, 6.5vw, 6rem);
  --sp-tight:   clamp(2.5rem, 4vw, 3.5rem);

  /* ---- radii: three ---- */
  --r-sm:   4px;
  --r-md:   10px;
  --r-pill: 999px;

  /* ---- text colours: five ---- */
  --c-ink:    #0d0f12;
  --c-body:   #59636e;
  --c-muted:  #7d8893;
  --c-onDark: #c2cad2;
  --c-accent: #c41016;

  /* ---- image ratios: three ---- */
  --ar-feature: 3 / 2;
  --ar-card:    16 / 10;
  --ar-square:  1 / 1;
}

/* ---------------------------------------------------------------- type ---- */

body { font-size: var(--fs-base); color: var(--c-body); }

h1 { font-size: var(--fs-3xl); font-weight: var(--fw-dis); }
h2 { font-size: var(--fs-2xl); font-weight: var(--fw-dis); }
h3 { font-size: var(--fs-lg);  font-weight: var(--fw-bold); letter-spacing: -.018em; }
h4 { font-size: var(--fs-base); font-weight: var(--fw-bold); }

.lead, .head p            { font-size: var(--fs-md);   line-height: 1.6; }
.hero-lead, .page-hero p  { font-size: var(--fs-md);   line-height: 1.6; }
.eyebrow, .brands-label   { font-size: var(--fs-xs);   font-weight: var(--fw-bold); }

.card p, .entity li, .mesh-go, .step p, .problem p,
.rows span, .rows strong, .checks li, .review p,
.service-body p, .area-card-body p, .faq .answer,
.trustbar-item p, .acc-body, .chips span, .chips a,
.hero-card p, .contact-card small, .footer p, .footer a,
.brandbar-sub, .cta-band p, .form-note {
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.hero-fact strong, .stat strong, .counters b { font-size: var(--fs-xl); font-weight: var(--fw-dis); }
.hero-fact span, .stat span, .area-card-eta,
.reviewer small, .gallery-item figcaption, .footer-bottom,
.crumbs, .topbar, .acc-count, .badge span {
  font-size: var(--fs-xs);
}
.mesh-name, .contact-card strong, .reviewer strong,
.hero-card b, .faq summary, .entity h3, .acc-name {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
}

/* ------------------------------------------------------------- spacing ---- */

.section            { padding: var(--sp-section) 0; }
.section--tight     { padding: var(--sp-tight) 0; }
.cta-band           { padding: var(--sp-section) 0; }
.head               { margin-bottom: clamp(2rem, 3.2vw, 3rem); }

/* --------------------------------------------------------------- radii ---- */

.card, .entity, .mesh, .acc-card, .area-card, .service,
.hero-card, .hero-photo, .split-media, .cta-art, .gallery-item,
.contact-card, .field, .foot-map, .callout, .review, .lookup {
  border-radius: var(--r-md);
}
.btn, .badge, .stat { border-radius: var(--r-sm); }
.chips span, .chips a, .acc-count, .hero-status, .pill { border-radius: var(--r-pill); }
.avatar { border-radius: 50%; }

/* ------------------------------------------------------- image ratios ---- */

.service-figure img            { aspect-ratio: var(--ar-card); object-fit: cover; }
.area-card img                 { aspect-ratio: var(--ar-card); object-fit: cover; }
.gallery-item img              { aspect-ratio: var(--ar-card); object-fit: cover; }
.hero-photo img                { aspect-ratio: var(--ar-feature); object-fit: cover; }
.page-hero-bg                  { aspect-ratio: auto; object-fit: cover; }
.split-media img, .cta-art img { aspect-ratio: var(--ar-feature); object-fit: cover; height: auto; min-height: 0; }
.avatar                        { aspect-ratio: var(--ar-square); }

/* --------------------------------------------------- contrast repairs ---- */

/* audit: eyebrow red on white measured 4.07:1, needed 4.5 */
.eyebrow { color: #b00e14; letter-spacing: .15em; }
.section--dark .eyebrow, .reviews .eyebrow,
.page-hero .eyebrow, .cta-band .eyebrow { color: #f4696e; }
/* audit: brand wordmark grey measured 2.53:1, needed 3.0 */
.brand-logo b { color: #6c7783; }

/* ============================================================================
   BRAND LOGO MARQUEE
   Duplicated track, translated by exactly -50% for a seamless loop.
   ========================================================================= */

.brandbar {
  padding: var(--sp-tight) 0;
  background: #fff;
  border-block: 1px solid var(--line);
  overflow: hidden;
}
.brandbar-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem 1rem;
  margin-bottom: 1.6rem;
}
.brandbar-label {
  margin: 0;
  font-family: var(--display);
  font-weight: var(--fw-bold);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.brandbar-sub { margin: 0; color: var(--c-muted); }

.brand-marquee {
  position: relative;
  overflow: hidden;
  /* fade the logos out at both edges instead of clipping them hard */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.brand-lane {
  display: flex;
  width: max-content;
  animation: brand-scroll 64s linear infinite;
}
.brand-marquee:hover .brand-lane,
.brand-marquee:focus-within .brand-lane { animation-play-state: paused; }

.brand-track {
  display: flex;
  align-items: center;
  gap: clamp(2.2rem, 4.5vw, 4rem);
  margin: 0;
  padding: 0 clamp(1.1rem, 2.25vw, 2rem);
  list-style: none;
}
.brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.brand-logo img {
  height: clamp(26px, 2.9vw, 38px);
  width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .58;
  transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}
.brand-logo img:hover { filter: none; opacity: 1; transform: scale(1.06); }

@keyframes brand-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .brand-lane { animation: none; width: 100%; }
  .brand-track { flex-wrap: wrap; justify-content: center; row-gap: 1.6rem; }
  .brand-track[aria-hidden="true"] { display: none; }
  .brand-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* ============================================================================
   REGISTRATION / TYRE SIZE LOOKUP
   ========================================================================= */

.lookup {
  margin-top: 1.6rem;
  padding: 1.15rem 1.2rem 1.25rem;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
}
.lookup-label {
  display: block;
  margin: 0 0 .7rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #f4696e;
}
.lookup-row { display: flex; gap: .6rem; flex-wrap: wrap; }

/* UK number plate styling: yellow ground, black char-grid type */
.lookup-input {
  flex: 1 1 15rem;
  min-width: 0;
  padding: .78rem 1rem;
  font-family: var(--display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-dis);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #111;
  background: #f6d417;
  border: 2px solid #d8bb12;
  border-radius: var(--r-sm);
}
.lookup-input::placeholder { color: #8a7605; opacity: 1; letter-spacing: .04em; }
.lookup-input:focus { outline: 3px solid #fff; outline-offset: 2px; }
.lookup .btn { flex: 0 0 auto; }
.lookup-hint { margin: .7rem 0 0; font-size: var(--fs-xs); color: #9aa5b0; }
.lookup-hint b { color: #fff; font-weight: var(--fw-bold); }

@media (max-width: 560px) {
  .lookup-row .btn { width: 100%; }
}

/* ============================================================================
   COVERAGE MAP
   ========================================================================= */

.mapzone { background: var(--neutral); }
.map-layout {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.map-figure {
  margin: 0;
  padding: 1.2rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.map-figure svg { display: block; width: 100%; height: auto; }

.map-svg .ring      { fill: none; stroke: #dfe4e9; stroke-width: 1.5; stroke-dasharray: 7 7; }
.map-svg .road      { fill: none; stroke: #ccd4db; stroke-width: 3; stroke-linecap: round; }
.map-svg .road-main { stroke: #b6c0c9; stroke-width: 4.5; }
.map-svg .road-lbl  { fill: #97a2ad; font-size: 11px; font-weight: 700; font-family: Manrope, sans-serif; }
.map-svg .green     { fill: #eaf1ea; }
.map-svg .green-lbl { fill: #8fa392; font-size: 10.5px; font-family: Manrope, sans-serif; }
.map-svg .hub       { fill: var(--red); }
.map-svg .hub-ring  { fill: none; stroke: var(--red); stroke-width: 1.5; opacity: .35; }
.map-svg .pin       { fill: #fff; stroke: var(--red); stroke-width: 2.5; }
.map-svg .pin-num   { fill: var(--red); font-size: 11px; font-weight: 800; font-family: Archivo, sans-serif; text-anchor: middle; }
.map-svg .place     { fill: var(--c-ink); font-size: 12.5px; font-weight: 700; font-family: Archivo, sans-serif; }
.map-svg .hub-lbl   { fill: var(--red); font-size: 14px; font-weight: 800; font-family: Archivo, sans-serif; }
.map-svg a:hover .pin { fill: var(--red); }
.map-svg a:hover .pin-num { fill: #fff; }
.map-svg a:hover .place { fill: var(--red); }
.map-svg a { cursor: pointer; }

.map-list { display: grid; gap: .55rem; }
.map-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .9rem;
  padding: .85rem 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
.map-item:hover { border-color: var(--red); transform: translateX(3px); }
.map-no {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--r-pill);
  background: var(--red-tint);
  color: var(--red);
  font-family: var(--display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-dis);
}
.map-name { font-family: var(--display); font-weight: var(--fw-bold); color: var(--c-ink); font-size: var(--fs-base); }
.map-eta  { font-size: var(--fs-xs); color: var(--c-muted); white-space: nowrap; }
.map-note { margin-top: 1.2rem; font-size: var(--fs-sm); color: var(--c-muted); }
.map-note a { color: var(--red); font-weight: var(--fw-bold); }

@media (max-width: 900px) {
  .map-layout { grid-template-columns: 1fr; }
}

/* ============================================================================
   SERVICE GRID — fixes the orphan row
   Ten services used to render 3+3+3+1, stranding one card beside two dead
   cells. Now two featured cards with photography, then eight compact cards
   on a four-up grid: 2 + 4 + 4, which divides cleanly.
   ========================================================================= */

.svc-feature {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}
.svc-compact {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.svc-mini {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.35rem 1.3rem 1.45rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.section--grey .svc-mini { background: #fff; }
.svc-mini:hover { border-color: var(--red); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(13,15,18,.08); }
.svc-mini svg { width: 24px; height: 24px; color: var(--red); }
.svc-mini h3 { font-size: var(--fs-base); margin: 0; }
.svc-mini p { margin: 0; font-size: var(--fs-sm); color: var(--c-body); line-height: 1.55; }

@media (max-width: 1000px) { .svc-compact { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .svc-feature { grid-template-columns: 1fr; } }
@media (max-width: 520px)  { .svc-compact { grid-template-columns: 1fr; } }

/* ============================================================================
   SECTION HIERARCHY
   v11 alternated white/grey with no run longer than one across 13 sections,
   which read as a metronome. Sections can now group into chapters, and each
   page gets one full-bleed dark moment as a landmark.
   ========================================================================= */

.section--flush-top    { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

.section--feature {
  position: relative;
  background: var(--ink);
  color: var(--c-onDark);
}
.section--feature h2, .section--feature h3 { color: #fff; }
.section--feature .rows strong { color: #fff; }
.section--feature .rows span { color: var(--c-onDark); }
.section--feature .rows, .section--feature .rows > div { border-color: var(--line-dark); }
.section--feature .lead { color: var(--c-onDark); }
.section--feature .card {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.1);
}
.section--feature .card p { color: var(--c-onDark); }
.section--feature .card svg { color: #f4696e; }

/* --------------------------------------------------------- misc repair ---- */

/* the numbered badge on split rows repeated the H3 beside it */
.badge span { display: none; }
.badge { padding: .7rem .95rem; }
.badge strong { font-size: var(--fs-lg); }

/* split rows: align the text block to the top of the photo on tall rows */
.split { align-items: center; }
.svc-row .split-body { align-self: center; }

/* icons: 24px at a heavier stroke so they hold against 800-weight display type */
.card svg, .entity svg, .callout svg, .problem svg, .trustbar-item svg {
  width: 24px; height: 24px; stroke-width: 2.1;
}
.checks svg { width: 18px; height: 18px; stroke-width: 2.4; }

/* ============================================================================
   v12 corrections — found by re-running the audit against my own changes
   ========================================================================= */

/* --c-muted at #7d8893 measured 3.61:1 on white. #646e79 gives 5.19:1 on
   white and 4.79:1 on the grey band, so it passes on both surfaces. */
:root { --c-muted: #646e79; }
.brandbar-sub, .map-eta, .map-note, .lookup-hint { color: var(--c-muted); }
.lookup-hint { color: #b9c2cb; }          /* sits on the dark hero */

/* The eyebrow rules above were too broad: light red landed on the red CTA
   band (2.07:1) and dark red landed on the dark feature band (2.67:1). */
.section--feature .eyebrow,
.cta-band--v1 .eyebrow, .cta-band--v3 .eyebrow,
.cta-band--v4 .eyebrow, .cta-band--v5 .eyebrow,
.cta-band--v6 .eyebrow { color: #f4696e; }      /* 6.48:1 on ink */
.cta-band--v2 .eyebrow { color: #ffffff; }      /* 6.12:1 on brand red */
.cta-band--v2 .cta-num span,
.cta-band--v2 .lookup-hint { color: rgba(255,255,255,.92); }

/* Consolidate the legacy greys onto the token set: the audit found sixteen
   text colours, several of them near-identical. */
.footer a, .footer p, .foot-hours, .reviewer small,
.rating-line span, .trustbar-item p, .review p { color: #b0bac4; }
.footer a:hover { color: #fff; }

/* Service hub rows used a full button per row, which pushed that page to 19
   CTAs. They are navigation, so they read as links now. */
.svc-row .btn--ghost {
  padding: 0;
  border: 0;
  background: none;
  color: var(--red);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.svc-row .btn--ghost:hover { color: var(--red-600); text-decoration: underline; background: none; }
.svc-row .btn--ghost svg { width: 15px; height: 15px; }

/* ---- gallery: one tile shape, not two ------------------------------------
   grid-auto-rows plus height:100% on the image was overriding the card ratio,
   rendering tiles at 0.87 (portrait) while every other card was 16:10. The
   grid now sizes from the ratio itself and every tile matches.            */
.gallery { grid-auto-rows: auto; }
.gallery-item { aspect-ratio: var(--ar-card); }
.gallery-item img { height: 100%; aspect-ratio: auto; }
.gallery-item--wide { grid-column: span 2; aspect-ratio: 32 / 10; }

/* ---- collapse the near-identical greys -----------------------------------
   The census found four light greys doing the same job on dark surfaces
   (#8e99a4, #b0bac4, #b9c2cb, #c2cad2) and two light reds. One of each.   */
:root { --c-onDark: #b9c2cb; --c-accent-light: #f4696e; }

.section--dark, .reviews, .trustbar, .footer, .cta-band, .page-hero, .hero { }
.footer a, .footer p, .foot-hours, .footer span,
.reviewer small, .rating-line span, .trustbar-item p, .review p,
.hero-lead, .page-hero p, .cta-band p, .section--feature .lead,
.section--feature .rows span, .section--dark .card p,
.area small, .coverage-copy p, .hero-fact span, .topbar,
.gallery-item figcaption, .footer-bottom, .lookup-hint {
  color: var(--c-onDark);
}
.hero h1 .line-red { color: var(--c-accent-light); }
.hero-status { color: #fff; }
.callout p { color: var(--c-body); }
.footer a:hover, .topbar a:hover { color: #fff; }

/* last of the strays: --c-onDark is tuned for the near-black bands and
   measured 3.39:1 on the brand-red CTA, which needs near-white instead */
.cta-band--v2 p,
.cta-band--v2 .checks--cta li,
.cta-band--v2 .cta-num span { color: rgba(255,255,255,.94); }

.area small, .reviewer small, .rating-line span,
.hero-fact span { color: var(--c-onDark); }

/* .stat and .badge sit on brand red, not on the near-black bands, so the
   on-dark grey fails there (3.39:1). Near-white is the right value. */
.stat strong, .badge strong { color: #fff; }
.stat span, .badge span { color: rgba(255,255,255,.93); }
.section--dark strong, .reviews strong { color: var(--c-accent-light); }

/* ---- last of the off-scale sizes -----------------------------------------
   Everything below was rendering at 15px or at a second h1 size, neither of
   which is on the eight-step scale. */
.service-more, .acc-link, .form-success, .form-error,
.stars, select.field option { font-size: var(--fs-sm); }
.hero h1 { font-size: var(--fs-3xl); }        /* was a second, larger clamp */
.hero-card b { font-size: var(--fs-base); }

/* ---- gallery: nine unique images, so a three-up grid divides exactly ----- */
.gallery { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .gallery { grid-template-columns: 1fr; } }

/* ---- badge: was hanging 16px outside its figure once the label was hidden */
.badge { right: 1rem; bottom: 1rem; left: auto; }

/* ---- link mesh: columns divide the item count so no row is left stranded -- */
.mesh-grid--2 { grid-template-columns: repeat(2, 1fr); }
.mesh-grid--3 { grid-template-columns: repeat(3, 1fr); }
.mesh-grid--4 { grid-template-columns: repeat(4, 1fr); }
.mesh-grid--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1040px) {
  .mesh-grid--4, .mesh-grid--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .mesh-grid--3, .mesh-grid--4, .mesh-grid--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .mesh-grid, .mesh-grid--2, .mesh-grid--3,
  .mesh-grid--4, .mesh-grid--5 { grid-template-columns: 1fr; }
}

/* ---- grids sized to their real item counts -------------------------------
   auto-fit was choosing a column count that left the last row short: the
   five process steps rendered 4+1 and the six reviews 4+2.               */
.steps { grid-template-columns: repeat(5, 1fr); gap: clamp(1rem, 2vw, 1.8rem); }
.review-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .review-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .steps, .review-grid { grid-template-columns: 1fr; } }

/* ============================================================================
   v14 — hero place photo, overview split, image cards, four-step process
   ========================================================================= */

/* ---- location hero: copy left, place photograph right -------------------- */

.page-hero--split .page-hero-inner {
  display: grid;
  grid-template-columns: 1fr 0.86fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.page-hero--split .page-hero-copy > * { max-width: 46rem; }
.page-hero--split .page-hero-copy h1 { max-width: 16ch; }

.hero-place {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 64px rgba(0,0,0,.5);
  background: var(--graphite-2);
}
.hero-place img {
  width: 100%;
  aspect-ratio: var(--ar-feature);
  object-fit: cover;
  display: block;
}
.hero-place figcaption {
  padding: .7rem .95rem .8rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: #fff;
  background: rgba(255,255,255,.06);
  border-top: 1px solid rgba(255,255,255,.1);
}
.place-credit { font-weight: var(--fw-body); color: var(--c-onDark); }

@media (max-width: 900px) {
  .page-hero--split .page-hero-inner { grid-template-columns: 1fr; }
  .hero-place { max-width: 560px; }
}

/* ---- overview: one readable column plus a supporting photograph ---------- */

.overview-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.overview-copy p { margin-bottom: 1.15rem; }
.overview-copy p:first-child::first-letter {
  font-family: var(--display);
  font-size: 3.1rem;
  font-weight: var(--fw-dis);
  line-height: .82;
  float: left;
  margin: .18rem .55rem 0 0;
  color: var(--red);
}
.overview-media { margin: 0; border-radius: var(--r-md); overflow: hidden; }
.overview-media img {
  width: 100%;
  aspect-ratio: var(--ar-feature);
  object-fit: cover;
  display: block;
}
@media (max-width: 880px) { .overview-split { grid-template-columns: 1fr; } }

/* ---- compact service cards, now with images ------------------------------ */

.svc-mini--img { padding: 0; overflow: hidden; }
.svc-mini-fig { display: block; line-height: 0; }
.svc-mini-fig img {
  width: 100%;
  aspect-ratio: var(--ar-card);
  object-fit: cover;
  transition: transform .4s cubic-bezier(.2,.6,.3,1);
}
.svc-mini--img:hover .svc-mini-fig img { transform: scale(1.05); }
.svc-mini-body {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1.05rem 1.15rem 1.25rem;
}
.svc-mini-body svg { width: 22px; height: 22px; color: var(--red); }

/* ---- ten service tiles, five-up, for location pages ---------------------- */

.svc-tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .8rem;
}
.svc-tile {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.svc-tile:hover { border-color: var(--red); transform: translateY(-3px); box-shadow: 0 14px 28px rgba(13,15,18,.08); }
.svc-tile-fig { line-height: 0; }
.svc-tile-fig img { width: 100%; aspect-ratio: var(--ar-card); object-fit: cover; }
.svc-tile-body { display: flex; flex-direction: column; gap: .4rem; padding: .85rem .9rem 1rem; }
.svc-tile-body svg { width: 20px; height: 20px; color: var(--red); }
.svc-tile-body h3 { margin: 0; font-size: var(--fs-sm); line-height: 1.3; }

@media (max-width: 1100px) { .svc-tiles { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px)  { .svc-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .svc-tiles { grid-template-columns: repeat(2, 1fr); } }

/* ---- process: four icon-led steps ---------------------------------------- */

.steps--4 { grid-template-columns: repeat(4, 1fr); }
.steps--3 { grid-template-columns: repeat(3, 1fr); }
.step { padding-top: 0; }
.step::before { content: none; }          /* replaced by the mark below */
.step::after {
  top: 1.35rem;
  left: 3.6rem;
}
.step-mark {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .95rem;
}
.step-ico {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--red-tint);
  color: var(--red);
  position: relative;
  z-index: 1;
}
.section--grey .step-ico { background: #fff; border: 1px solid var(--line); }
.step-ico svg { width: 21px; height: 21px; stroke-width: 2.1; }
.step-no {
  font-family: var(--display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-dis);
  letter-spacing: .06em;
  color: var(--c-muted);
}
.step h3 { font-size: var(--fs-base); margin-bottom: .45rem; }

@media (max-width: 1000px) { .steps--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .steps--4, .steps--3 { grid-template-columns: 1fr; }
                             .step::after { display: none; } }

/* ============================================================================
   v15 — equal-height cards
   Grid stretches the track, but each card also has to fill it and let its
   body absorb the slack, or cards with shorter copy end up shorter.
   ========================================================================= */

.svc-feature, .svc-compact, .svc-tiles, .cards, .mesh-grid,
.service-grid, .area-cards { align-items: stretch; }

.service, .svc-mini, .svc-tile, .card, .mesh, .area-card, .entity {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* the figure keeps its ratio, the body takes the remaining height */
.service-figure, .svc-mini-fig, .svc-tile-fig, .area-card img { flex: none; }
.service-body, .svc-mini-body, .svc-tile-body, .area-card-body { flex: 1 1 auto; }

/* push the read-more to the bottom so every card's link sits on one line */
.service-body { display: flex; flex-direction: column; }
.service-body .service-more { margin-top: auto; padding-top: .6rem; }

/* images inside cards must fill their box, not sit at intrinsic size */
.service-figure img, .svc-mini-fig img, .svc-tile-fig img, .area-card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* card interiors keep their own vertical rhythm */
.card { justify-content: flex-start; }
.entity ul { margin-top: auto; }

/* ============================================================================
   v16 — process cards, and lifting the visual language
   The research point that kept recurring across strong automotive sites was
   graphic overlap and distinctive framing, not more decoration. So: elements
   that break their container, oversized numerals as graphics, and the tread
   motif used as real texture rather than a divider.
   ========================================================================= */

/* ---- process cards ------------------------------------------------------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: clamp(1rem, 1.6vw, 1.5rem);
}

.step {
  position: relative;
  isolation: isolate;
  padding: 2.5rem 1.5rem 1.6rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s ease, border-color .26s ease;
}
.section--grey .step { background: #fff; }

/* the oversized numeral is the card's graphic, bleeding off the top right */
.step-num {
  position: absolute;
  top: -.34em;
  right: -.06em;
  z-index: -1;
  font-family: var(--display);
  font-size: 6.2rem;
  font-weight: var(--fw-dis);
  line-height: 1;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 2px #e7ebef;
  transition: -webkit-text-stroke-color .26s ease, color .26s ease;
  pointer-events: none;
  user-select: none;
}

/* the badge overlaps the card's top edge rather than sitting inside it */
.step-badge {
  position: absolute;
  top: -1px;
  left: 1.5rem;
  display: grid;
  place-items: center;
  width: 46px;
  height: 42px;
  background: var(--red);
  color: #fff;
  border-radius: 0 0 var(--r-md) var(--r-md);
  box-shadow: 0 8px 18px rgba(196,16,22,.28);
  transition: height .26s cubic-bezier(.2,.7,.3,1);
}
.step-badge svg { width: 21px; height: 21px; stroke-width: 2.2; }

.step h3 { font-size: var(--fs-base); margin: 0 0 .45rem; }
.step p { margin: 0; color: var(--c-body); }

/* accent rule that grows across the card on hover */
.step-rule {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .34s cubic-bezier(.2,.7,.3,1);
}

.step:hover {
  transform: translateY(-4px);
  border-color: #dfe5ea;
  box-shadow: 0 20px 44px rgba(13,15,18,.11);
}
.step:hover .step-num { -webkit-text-stroke-color: #f6c9cb; }
.step:hover .step-badge { height: 52px; }
.step:hover .step-rule { transform: scaleX(1); }

/* connector between cards, so the row reads as one journey */
.step::after {
  content: "";
  position: absolute;
  top: 20px;
  right: calc(-1 * clamp(1rem, 1.6vw, 1.5rem) - 1px);
  width: clamp(1rem, 1.6vw, 1.5rem);
  height: 2px;
  background-image: repeating-linear-gradient(90deg, var(--line) 0 5px, transparent 5px 9px);
  left: auto;
}
.step--last::after { display: none; }

@media (max-width: 1000px) {
  .steps--4 { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(2n)::after { display: none; }
}
@media (max-width: 560px) {
  .steps--4, .steps--3 { grid-template-columns: 1fr; }
  .step::after { display: none; }
  .step-num { font-size: 5rem; }
}

/* ---- tread texture, used as real surface rather than a divider ----------- */

.section--grey, .mapzone {
  position: relative;
  background-image:
    repeating-linear-gradient(115deg, rgba(13,15,18,.022) 0 2px, transparent 2px 9px);
  background-color: var(--neutral);
}
.section--feature, .cta-band--v1, .cta-band--v3 {
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.028) 0 2px, transparent 2px 10px);
}

/* ---- offset accent frame on feature photography -------------------------- */

.overview-media, .split-media, .hero-place {
  position: relative;
}
.overview-media::before, .split-media::before {
  content: "";
  position: absolute;
  inset: auto -12px -12px auto;
  width: 62%;
  height: 58%;
  border-right: 3px solid var(--red);
  border-bottom: 3px solid var(--red);
  border-radius: 0 0 var(--r-md) 0;
  z-index: -1;
}
.overview-media, .split-media { isolation: isolate; }

/* ---- section eyebrow gets a rule, so headings anchor to the left edge ---- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: currentColor;
  flex: none;
}

/* ---- cards: accent edge on hover instead of a flat lift ------------------ */

.card::after { width: 3px; }
.svc-mini, .svc-tile, .mesh, .area-card, .entity { position: relative; overflow: hidden; }
.svc-mini::after, .svc-tile::after, .mesh::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.svc-mini:hover::after, .svc-tile:hover::after, .mesh:hover::after { transform: scaleX(1); }

/* ---- stats: numerals get real presence ----------------------------------- */

.stat {
  position: relative;
  overflow: hidden;
  padding: 1.9rem 1.3rem;
}
.stat::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0 2px, transparent 2px 10px);
}
.stat strong { position: relative; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -.03em; }
.stat span { position: relative; }

/* ---- process card corrections -------------------------------------------
   The badge hangs from the top edge and grows on hover, so the card needs
   enough head room for the tallest state or it lands on the heading. */
.step { padding: 4.6rem 1.5rem 1.8rem; min-height: 15.5rem; }
.step h3 { min-height: 2.6em; display: flex; align-items: flex-start; }

.step-num {
  top: auto;
  bottom: -1.6rem;
  right: .5rem;
  font-size: 7.4rem;
  -webkit-text-stroke: 2px #eaeef2;
}
.step:hover .step-num { -webkit-text-stroke-color: #f7d2d4; }

.step-badge { width: 50px; height: 46px; }
.step:hover .step-badge { height: 58px; }

/* connector aligns with the badge, not the old icon row */
.step::after { top: 23px; }

@media (max-width: 560px) {
  .step { min-height: 0; padding: 4.2rem 1.4rem 1.6rem; }
  .step h3 { min-height: 0; }
  .step-num { font-size: 5.6rem; bottom: -1.2rem; }
}

/* ---- offset accent frame: the figure was clipping it -------------------- */
.overview-media, .split-media { overflow: visible; border-radius: 0; }
.overview-media img, .split-media img { border-radius: var(--r-md); }
.overview-media::before, .split-media::before { z-index: 0; }
.overview-media img, .split-media img { position: relative; z-index: 1; }

/* balance the two columns: the photo no longer towers over shorter copy */
.overview-split { align-items: center; }
.overview-media img { max-height: 30rem; object-fit: cover; }

@media (max-width: 880px) {
  .overview-split { align-items: start; }
  .overview-media::before { inset: auto -8px -8px auto; }
}

/* ============================================================================
   v17 — homepage hero and the proof band beneath it
   The hero was stacking a status pill, tag, headline, lead, two buttons, a reg
   lookup and three stat blocks in one column. The numbers and the lookup now
   live in their own band, so the hero carries the message and one action.
   ========================================================================= */

.hero { position: relative; isolation: isolate; overflow: hidden; }

/* full-bleed photograph behind the hero, heavily dimmed so type stays legible */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .28;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, var(--ink) 34%, rgba(13,15,18,.86) 58%, rgba(13,15,18,.62) 100%),
    radial-gradient(90% 120% at 12% 0%, rgba(196,16,22,.22), transparent 60%);
}

.hero-inner {
  grid-template-columns: 1.02fr 0.98fr;
  align-items: center;
  padding-block: clamp(3rem, 5.5vw, 5rem);
}
.hero-copy > * { max-width: 34rem; }

/* the small label chip above the headline */
.hero-tag {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .4rem .85rem;
  background: var(--red);
  color: #fff;
  border-radius: var(--r-sm);
  font-family: var(--display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-dis);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.hero h1 { margin-bottom: 1rem; }
.hero-lead { margin-bottom: 1.6rem; max-width: 31rem; }

/* scannable proof chips, light enough not to compete with the buttons */
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.7rem 0 0;
  padding: 0;
  list-style: none;
  max-width: 36rem;
}
.hero-chips li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .8rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.05);
  font-size: var(--fs-xs);
  font-weight: var(--fw-med);
  color: #dfe4e9;
}
.hero-chips li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--red-300);
  flex: none;
}

.hero .hero-photo {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 34px 70px rgba(0,0,0,.55);
}
.hero .hero-photo img { width: 100%; aspect-ratio: var(--ar-feature); object-fit: cover; }

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-copy > * { max-width: none; }
  .hero .hero-photo { max-width: 640px; margin-inline: auto; }
}

/* ---- proof band ---------------------------------------------------------- */

.trustpanel {
  position: relative;
  padding: clamp(2.2rem, 4vw, 3.2rem) 0;
  background: var(--graphite);
  color: var(--c-onDark);
  border-top: 3px solid var(--red);
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 10px);
}
.tp-head { margin-bottom: 1.6rem; }
.tp-head h2 { color: #fff; font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin: 0; }
.trustpanel .eyebrow { color: #f4696e; }

.tp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-md);
  overflow: hidden;
}
.tp-item {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.25rem 1.2rem;
  background: var(--graphite-2);
}
.tp-ico {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: var(--r-sm);
  background: rgba(196,16,22,.16);
  color: #f4696e;
}
.tp-ico svg { width: 21px; height: 21px; stroke-width: 2.1; }
.tp-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.tp-label { font-size: var(--fs-xs); color: #9aa5b0; }
.tp-value {
  font-family: var(--display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-dis);
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.tp-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  margin-top: 1.4rem;
}
.tp-rating { display: flex; align-items: center; gap: .8rem; }
.tp-rating .stars { color: var(--amber); font-size: 1.05rem; letter-spacing: .1em; }
.tp-rating-text { display: flex; flex-direction: column; }
.tp-rating-text strong { color: #fff; font-family: var(--display); font-size: var(--fs-base); }
.tp-rating-text span { font-size: var(--fs-xs); color: #9aa5b0; }

.tp-lookup { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.tp-lookup-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #f4696e;
}
.tp-lookup-row { display: flex; gap: .5rem; }
.tp-lookup .lookup-input { flex: 0 1 11rem; font-size: var(--fs-base); padding: .6rem .8rem; }
.tp-lookup .btn { padding: .62rem 1rem; }

@media (max-width: 1000px) { .tp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .tp-grid { grid-template-columns: 1fr; }
  .tp-foot { flex-direction: column; align-items: flex-start; }
  .tp-lookup-row { width: 100%; }
  .tp-lookup .lookup-input { flex: 1 1 auto; }
}

/* chips were wrapping 4 + 1, stranding the last one. Narrowing the row
   balances them to 3 + 2, which reads as deliberate rather than overflow. */
.hero-chips { max-width: 27rem; }
@media (max-width: 960px) { .hero-chips { max-width: none; } }

/* ============================================================================
   v18 — overview alignment
   The photo ran 161px past the bottom of the copy, leaving a blank column.
   The media cell now stretches to the row height and the image fills it, so
   the two columns always end on the same line whatever the copy length.
   ========================================================================= */

.overview-split { align-items: stretch; }
.overview-copy { align-self: center; }
/* The image is taken out of flow, so the figure claims no intrinsic height.
   The grid row is therefore sized by the copy alone and the stretched figure
   gives the photo exactly that height — the two columns cannot disagree. */
.overview-media {
  display: block;
  align-self: stretch;
  /* Only a floor for a pathologically short intro. Keep it below the
     shortest copy column on the site or it becomes the taller of the two
     and reintroduces the gap it is meant to prevent. */
  min-height: 13rem;
}
.overview-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
  z-index: 1;
}
/* the offset accent frame follows the new height */
.overview-media::before { height: 54%; }

@media (max-width: 880px) {
  .overview-media { align-self: auto; min-height: 0; }
  .overview-media img {
    position: relative;
    inset: auto;
    height: auto;
    aspect-ratio: var(--ar-feature);
  }
}

/* service hero image matches the location hero treatment */
.page-hero--split .hero-place { border-radius: var(--r-md); }

/* ============================================================================
   v19 — hero split alignment
   The hero photo sat at its natural 347px beside 510-610px of copy, so the
   right column stopped well short of the left. The figure now stretches to
   the row and the image grows into it; the caption stays in flow beneath.
   The image contributes only its min-height intrinsically, so a short copy
   column can never be dragged taller by the photo.
   ========================================================================= */

.page-hero--split .page-hero-inner { align-items: stretch; }
.page-hero--split .page-hero-copy { align-self: center; }
.page-hero--split .hero-place {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.page-hero--split .hero-place img {
  flex: 1 1 0;
  height: auto;
  min-height: 16rem;
  aspect-ratio: auto;
}

@media (max-width: 900px) {
  .page-hero--split .page-hero-inner { align-items: start; }
  .page-hero--split .hero-place { align-self: auto; display: block; }
  .page-hero--split .hero-place img {
    min-height: 0;
    aspect-ratio: var(--ar-feature);
  }
}

/* A grid item's automatic minimum is min-content, so the widest unbreakable
   run inside the hero copy was holding the single mobile column open at
   378px inside a 350px shell — the CTA row and stats were clipped off the
   right edge on every split hero. Letting the items shrink fixes it. */
.page-hero--split .page-hero-inner > * { min-width: 0; }

/* The tyre-sales photograph carries the branded tyre stack on its left. A
   centre crop into the portrait hero frame cut the labels off, which is the
   one thing that image is there to show, so it anchors left instead. */
.hero-place img[src*="tyre-sales-epsom-new-tyres"] { object-position: 18% center; }

/* ============================================================================
   v22 — Mobile Tyre Fitting stays listed
   It has no page of its own, but it is the flagship service and the name of
   the business, so it is listed everywhere services are listed and every link
   points at the homepage section covering it. Ten items again, so the grids
   keep their original 2 + 4 + 4 division and the three-up overrides that v21
   introduced are gone.
   ========================================================================= */

.scope-note {
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--c-rule, rgba(13,15,18,.1));
}
.scope-note h3 {
  font-size: var(--fs-md);
  margin-bottom: .35rem;
}
.scope-note p {
  color: var(--c-muted);
  margin-bottom: 1.2rem;
  max-width: 52ch;
}
/* .chips carries its own top rule for use on dark bands. Inside scope-note
   that stacks a second line under the one above, so it is dropped here. */
.scope-note .chips {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ============================================================================
   v24 — the callback form actually sends
   It posted to "#", which reloaded the page and discarded the enquiry. It now
   posts to /contact.php. These are the states that handler can return.
   ========================================================================= */

.label-opt {
  font-weight: var(--fw-body);
  color: var(--c-muted);
}

/* Per-field message, written next to the input the handler objected to. */
.field-error {
  margin-top: .4rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--red-600);
}
.lead-form [aria-invalid="true"] {
  border-color: var(--red-600);
  box-shadow: 0 0 0 3px var(--red-tint);
}

/* While the request is in flight, and after it has succeeded. */
.lead-form button[aria-busy="true"] { opacity: .72; cursor: progress; }
.lead-form[data-status="success"] :disabled { opacity: .6; }

/* ============================================================================
   v24 — thank you page
   The confirmation the form lands on. The tick draws itself once, the panel
   at the foot counts down to the homepage, and the countdown can be stopped,
   because a page that moves under someone with no way to prevent it fails
   WCAG 2.2.1.
   ========================================================================= */

.thanks {
  position: relative;
  background: var(--graphite);
  color: #fff;
  padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3rem, 7vw, 5rem);
  text-align: center;
  overflow: hidden;
}
.thanks::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(196,16,22,.22), transparent 70%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.028) 0 2px, transparent 2px 10px);
  pointer-events: none;
}
.thanks-inner { position: relative; max-width: 44rem; }

/* The global heading colour is near-black and beats the white inherited from
   .thanks, which left the H1 at about 1.1:1 on the dark band. */
.thanks h1 { color: #fff; }

/* .tread is a static 7px strip, so in normal flow it landed across the
   buttons with dark space below it. Pinned to the foot of the band instead. */
.thanks > .tread {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.thanks-mark {
  display: inline-flex;
  width: 5rem;
  height: 5rem;
  margin-bottom: 1.4rem;
  color: #46c07a;
}
.thanks-mark svg { width: 100%; height: 100%; }
.thanks-mark-ring {
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
  animation: thanks-ring .55s ease-out forwards;
}
.thanks-mark-tick {
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: thanks-tick .35s .5s ease-out forwards;
}
@keyframes thanks-ring { to { stroke-dashoffset: 0; } }
@keyframes thanks-tick { to { stroke-dashoffset: 0; } }

.thanks-kicker {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red-300, #f4696e);
  margin-bottom: .6rem;
}
.thanks h1 { margin-bottom: .9rem; }
.thanks-lead {
  color: var(--c-onDark);
  max-width: 34rem;
  margin: 0 auto 1.9rem;
}
.thanks-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  justify-content: center;
}

/* ---- the countdown panel ---- */

.thanks-timer {
  border-top: 1px solid var(--c-rule, rgba(13,15,18,.1));
  background: var(--c-surface-2, #f4f6f8);
  padding: 1.1rem 0;
}
.thanks-timer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 1.4rem;
  align-items: center;
  justify-content: center;
}
.thanks-timer-text {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
.thanks-timer-text strong {
  color: var(--c-ink, #0d0f12);
  font-variant-numeric: tabular-nums;
}
/* Stopped, or never started because the visitor prefers no motion. */
.thanks-timer[data-stopped] .thanks-timer-text { opacity: .72; }
.thanks-timer[data-stopped] [data-stay] { display: none; }

.btn--sm {
  padding: .5rem .95rem;
  font-size: var(--fs-xs);
}

@media (prefers-reduced-motion: reduce) {
  .thanks-mark-ring, .thanks-mark-tick { animation: none; stroke-dashoffset: 0; }
}